Add icons to visualize/edit a specific path in the paths explorer

Apicurio · Nov 27, 2024 · ff8486b · ff8486b
1 parent 02d2b52
commit ff8486b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 12 deletions.
diff --git a/packages/ui/src/components/EditorToolbar.tsx b/packages/ui/src/components/EditorToolbar.tsx
@@ -50,14 +50,14 @@ export function EditorToolbar({
     ({ context }) => {
       const groupedCount = groupBy(
         context.validationProblems,
-        (v) => v.severity
+        (v) => v.severity,
       );
       return {
         low: groupedCount["info"]?.length ?? 0,
         medium: groupedCount["warning"]?.length ?? 0,
         high: groupedCount["danger"]?.length ?? 0,
       };
-    }
+    },
   );
   const actorRef = OpenApiEditorMachineContext.useActorRef();
   return (

diff --git a/packages/ui/src/documentDesigner/PathsExplorer.tsx b/packages/ui/src/documentDesigner/PathsExplorer.tsx
@@ -1,5 +1,6 @@
 import {
   Accordion,
+  Button,
   Card,
   CardBody,
   CardHeader,
@@ -44,6 +45,7 @@ import { useState } from "react";
 import { OperationLabel } from "./OperationLabel.tsx";
 import { StatusCodeLabel } from "../components/StatusCodeLabel.tsx";
 import { AccordionSection } from "../components/AccordionSection.tsx";
+import { EyeIcon, PencilAltIcon } from "@patternfly/react-icons";
 
 function normalize(str: string) {
   return str.toLowerCase().trim().normalize("NFC");
@@ -87,7 +89,7 @@ const machine = setup({
         paths: ({ context: { initialPaths, filter } }) => {
           const normalizedFilter = normalize(filter);
           return initialPaths.filter((path) =>
-            isMatch(normalizedFilter, JSON.stringify(path))
+            isMatch(normalizedFilter, JSON.stringify(path)),
           );
         },
       }),
@@ -172,16 +174,36 @@ function PathDetails({
 }) {
   const actorRef = OpenApiEditorMachineContext.useActorRef();
   return (
-    <Card isCompact={true} isClickable={true} isPlain={true}>
+    <Card isCompact={true} isPlain={true}>
       <CardHeader
-        selectableActions={{
-          onClickAction: () =>
-            actorRef.send({
-              type: "SELECT_PATH_VISUALIZER",
-              path: path.node.path,
-              nodePath: path.node.nodePath,
-            }),
-          selectableActionAriaLabelledby: `path-title-${path.node.nodePath}`,
+        actions={{
+          actions: (
+            <>
+              <Button
+                variant={"control"}
+                icon={<EyeIcon />}
+                onClick={() =>
+                  actorRef.send({
+                    type: "SELECT_PATH_VISUALIZER",
+                    path: path.node.path,
+                    nodePath: path.node.nodePath,
+                  })
+                }
+              />
+              <Button
+                variant={"control"}
+                icon={<PencilAltIcon />}
+                onClick={() =>
+                  actorRef.send({
+                    type: "SELECT_PATH_DESIGNER",
+                    path: path.node.path,
+                    nodePath: path.node.nodePath,
+                  })
+                }
+              />
+            </>
+          ),
+          hasNoOffset: true,
         }}
       >
         <CardTitle id={`path-title-${path.node.nodePath}`}>