Button to go to the designer view quickly

Apicurio · Nov 27, 2024 · 55ee05d · 55ee05d
1 parent ff8486b
commit 55ee05d
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 15 deletions.
diff --git a/packages/ui/src/components/Section.tsx b/packages/ui/src/components/Section.tsx
@@ -1,36 +1,57 @@
 import { ReactNode } from "react";
 import {
   Badge,
+  Button,
   Card,
   CardBody,
+  CardHeader,
   CardTitle,
   Split,
   SplitItem,
 } from "@patternfly/react-core";
+import { PencilAltIcon } from "@patternfly/react-icons";
 
 export function Section({
   title,
   count,
   id,
   children,
+  onEdit,
 }: {
   title: ReactNode;
   count?: number;
   id: string;
   children: ReactNode;
+  onEdit?: () => void;
 }) {
   return (
     <Card isPlain={true} isLarge={true} id={id}>
-      <CardTitle>
-        <Split hasGutter={true}>
-          <SplitItem>{title}</SplitItem>
-          {count !== undefined && (
-            <SplitItem>
-              <Badge>{count}</Badge>
-            </SplitItem>
-          )}
-        </Split>
-      </CardTitle>
+      <CardHeader
+        actions={{
+          actions: (
+            <>
+              {onEdit && (
+                <Button
+                  variant={"control"}
+                  icon={<PencilAltIcon />}
+                  onClick={onEdit}
+                />
+              )}
+            </>
+          ),
+        }}
+      >
+        <CardTitle>
+          <Split hasGutter={true}>
+            <SplitItem>{title}</SplitItem>
+            {count !== undefined && (
+              <SplitItem>
+                <Badge>{count}</Badge>
+              </SplitItem>
+            )}
+          </Split>
+        </CardTitle>
+      </CardHeader>
       <CardBody>{children}</CardBody>
     </Card>
   );

diff --git a/packages/ui/src/documentDesigner/Designer.tsx b/packages/ui/src/documentDesigner/Designer.tsx
@@ -9,6 +9,7 @@ import { useMachineSelector } from "./DocumentDesignerMachineContext.ts";
 import { DesignerLayout } from "./DesignerLayout.tsx";
 import { PathsExplorer } from "./PathsExplorer.tsx";
 import { PathsTree } from "./PathsTree.tsx";
+import { OpenApiEditorMachineContext } from "../OpenApiEditor.tsx";
 
 export function Designer() {
   const {
@@ -28,6 +29,12 @@ export function Designer() {
       editable: context.editable,
     };
   });
+  const actorRef = OpenApiEditorMachineContext.useActorRef();
+  const onEdit = !editable
+    ? () => {
+        actorRef.send({ type: "SELECT_DOCUMENT_ROOT_DESIGNER" });
+      }
+    : undefined;
   return (
     <DesignerLayout
       info={<Info />}
@@ -43,6 +50,7 @@ export function Designer() {
       serversCount={serversCount}
       securitySchemeCount={securitySchemeCount}
       securityRequirementsCount={securityRequirementsCount}
+      onEdit={onEdit}
     />
   );
 }
diff --git a/packages/ui/src/documentDesigner/DesignerLayout.tsx b/packages/ui/src/documentDesigner/DesignerLayout.tsx
@@ -19,6 +19,7 @@ export function DesignerLayout({
   serversCount,
   securitySchemeCount,
   securityRequirementsCount,
+  onEdit,
 }: {
   info?: ReactNode;
   paths?: ReactNode;
@@ -33,6 +34,7 @@ export function DesignerLayout({
   serversCount?: number;
   securitySchemeCount?: number;
   securityRequirementsCount?: number;
+  onEdit?: () => void;
 }) {
   return (
     <Flex>
@@ -49,38 +51,50 @@ export function DesignerLayout({
         </JumpLinksItem>
       </Toc>
       <TocContainer>
-        <Section title={"Info"} id={"info"}>
+        <Section title={"Info"} id={"info"} onEdit={onEdit}>
           {info}
         </Section>
         <Divider inset={{ default: "insetNone" }} />
-        <Section title={"Contact"} id={"contact"}>
+        <Section title={"Contact"} id={"contact"} onEdit={onEdit}>
           {contact}
         </Section>
         <Divider inset={{ default: "insetNone" }} />
-        <Section title={"License"} id={"license"}>
+        <Section title={"License"} id={"license"} onEdit={onEdit}>
           {license}
         </Section>
         <Divider inset={{ default: "insetNone" }} />
-        <Section title={"Paths"} id={"paths"} count={pathsCount}>
+        <Section
+          title={"Paths"}
+          id={"paths"}
+          count={pathsCount}
+          onEdit={onEdit}
+        >
           {paths}
         </Section>
         <Divider inset={{ default: "insetNone" }} />
         <Section
           title={"Tag definitions"}
           count={tagDefinitionsCount}
           id={"tag-definitions"}
+          onEdit={onEdit}
         >
           {tagDefinitions}
         </Section>
         <Divider inset={{ default: "insetNone" }} />
-        <Section title={"Servers"} count={serversCount} id={"servers"}>
+        <Section
+          title={"Servers"}
+          count={serversCount}
+          id={"servers"}
+          onEdit={onEdit}
+        >
           {servers}
         </Section>
         <Divider inset={{ default: "insetNone" }} />
         <Section
           title={"Security scheme"}
           count={securitySchemeCount}
           id={"security-scheme"}
+          onEdit={onEdit}
         >
           {securityScheme}
         </Section>
@@ -89,6 +103,7 @@ export function DesignerLayout({
           title={"Security requirements"}
           count={securityRequirementsCount}
           id={"security-requirements"}
+          onEdit={onEdit}
         >
           {securityRequirements}
         </Section>