Wire all the designer switch sections

Apicurio · Nov 28, 2024 · 8c75cfa · 8c75cfa
1 parent ea6c21e
commit 8c75cfa
Show file tree

Hide file tree

Showing 14 changed files with 81 additions and 35 deletions.
diff --git a/packages/ui/src/components/SearchableTable.tsx b/packages/ui/src/components/SearchableTable.tsx
@@ -85,7 +85,6 @@ export function SearchableTable<T>({
             {filteredData.length > 0 && (
               <DataList
                 aria-label="Servers"
-                isCompact={!editing}
                 gridBreakpoint={editing ? "always" : undefined}
               >
                 {filteredData.map((t, idx) => {

diff --git a/packages/ui/src/components/Section.tsx b/packages/ui/src/components/Section.tsx
@@ -1,4 +1,4 @@
-import { createContext, ReactNode, useContext, useState } from "react";
+import { createContext, ReactNode, useState } from "react";
 import {
   Badge,
   Card,
@@ -10,18 +10,14 @@ import {
   Switch,
 } from "@patternfly/react-core";
 
-const SectionContext = createContext<{
+export const SectionContext = createContext<{
   view: "viewer" | "designer";
   toggleView: () => void;
 }>({
   view: "viewer",
   toggleView: () => {},
 });
 
-export function useSection() {
-  return useContext(SectionContext).view;
-}
-
 export function Section({
   title,
   count,
@@ -48,6 +44,7 @@ export function Section({
                 label={"Design"}
               />
             ),
+            hasNoOffset: true,
           }}
         >
           <CardTitle>

diff --git a/packages/ui/src/components/useSection.ts b/packages/ui/src/components/useSection.ts
@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { SectionContext } from "./Section.tsx";
+
+export function useSection() {
+  return useContext(SectionContext).view;
+}
diff --git a/packages/ui/src/dataTypeDesigner/Info.tsx b/packages/ui/src/dataTypeDesigner/Info.tsx
@@ -9,15 +9,16 @@ import {
   useMachineActorRef,
   useMachineSelector,
 } from "./DataTypeDesignerMachineContext.ts";
+import { useEditableSection } from "./useEditableSection.ts";
 
 export function Info() {
-  const { description, editable } = useMachineSelector(({ context }) => {
+  const { description } = useMachineSelector(({ context }) => {
     return {
       description: context.description,
-      editable: context.editable,
     };
   });
   const actorRef = useMachineActorRef();
+  const isEditable = useEditableSection();
   return (
     <DescriptionList>
       <DescriptionListGroup>
@@ -28,7 +29,7 @@ export function Info() {
               actorRef.send({ type: "CHANGE_DESCRIPTION", description });
             }}
             value={description}
-            editing={editable}
+            editing={isEditable}
           />
         </DescriptionListDescription>
       </DescriptionListGroup>

diff --git a/packages/ui/src/dataTypeDesigner/Properties.tsx b/packages/ui/src/dataTypeDesigner/Properties.tsx
@@ -18,25 +18,28 @@ import { Markdown } from "../components/Markdown.tsx";
 import { DataTypeProperty } from "../OpenApiEditorModels.ts";
 import { SearchableTable } from "../components/SearchableTable.tsx";
 import { TrashIcon } from "@patternfly/react-icons";
+import { useEditableSection } from "./useEditableSection.ts";
 
 export function Properties() {
-  const { properties, editable } = useMachineSelector(({ context }) => {
+  const { properties } = useMachineSelector(({ context }) => {
     return {
       properties: context.properties,
-      editable: context.editable,
     };
   });
   const actorRef = useMachineActorRef();
+  const isEditable = useEditableSection();
   return (
     <SearchableTable
       data={properties}
       label={"property"}
-      editing={editable}
+      editing={isEditable}
       onFilter={(p, filter) =>
         p.name.toLowerCase().includes(filter.toLowerCase()) ||
         p.type.toLowerCase().includes(filter.toLowerCase())
       }
-      onRenderRow={(p, idx) => <Property idx={idx} editing={editable} p={p} />}
+      onRenderRow={(p, idx) => (
+        <Property idx={idx} editing={isEditable} p={p} />
+      )}
       onAdd={() => {}}
       onRemoveAll={() => {}}
     />

diff --git a/packages/ui/src/dataTypeDesigner/useEditableSection.ts b/packages/ui/src/dataTypeDesigner/useEditableSection.ts
@@ -0,0 +1,13 @@
+import { useMachineSelector } from "./DataTypeDesignerMachineContext";
+
+import { useSection } from "../components/useSection.ts";
+
+export function useEditableSection() {
+  const { editable } = useMachineSelector(({ context }) => {
+    return {
+      editable: context.editable,
+    };
+  });
+  const view = useSection();
+  return view === "designer" || editable;
+}
diff --git a/packages/ui/src/documentDesigner/Designer.tsx b/packages/ui/src/documentDesigner/Designer.tsx
@@ -49,7 +49,6 @@ export function Designer() {
       serversCount={serversCount}
       securitySchemeCount={securitySchemeCount}
       securityRequirementsCount={securityRequirementsCount}
-      onEdit={onEdit}
     />
   );
 }
diff --git a/packages/ui/src/documentDesigner/SecurityScheme.tsx b/packages/ui/src/documentDesigner/SecurityScheme.tsx
@@ -65,7 +65,7 @@ function SecuritySchemeRow({
       <DataListItemRow>
         <DataListItemCells
           dataListCells={[
-            <DataListCell key="name" width={2}>
+            <DataListCell key="name">
               <span id={id}>
                 <InlineEdit label={"Name"} value={name} />
               </span>

diff --git a/packages/ui/src/documentDesigner/useEditableSection.ts b/packages/ui/src/documentDesigner/useEditableSection.ts
@@ -1,5 +1,6 @@
 import { useMachineSelector } from "./DocumentDesignerMachineContext.ts";
-import { useSection } from "../components/Section.tsx";
+
+import { useSection } from "../components/useSection.ts";
 
 export function useEditableSection() {
   const { editable } = useMachineSelector(({ context }) => {

diff --git a/packages/ui/src/pathDesigner/Info.tsx b/packages/ui/src/pathDesigner/Info.tsx
@@ -9,18 +9,17 @@ import {
   useMachineActorRef,
   useMachineSelector,
 } from "./PathDesignerMachineContext.ts";
+import { useEditableSection } from "./useEditableSection.ts";
 
 export function Info() {
-  const { summary, description, editable } = useMachineSelector(
-    ({ context }) => {
-      return {
-        summary: context.summary,
-        description: context.description,
-        editable: context.editable,
-      };
-    },
-  );
+  const { summary, description } = useMachineSelector(({ context }) => {
+    return {
+      summary: context.summary,
+      description: context.description,
+    };
+  });
   const actorRef = useMachineActorRef();
+  const isEditable = useEditableSection();
   return (
     <DescriptionList>
       <DescriptionListGroup>
@@ -31,7 +30,7 @@ export function Info() {
               actorRef.send({ type: "CHANGE_SUMMARY", summary });
             }}
             value={summary}
-            editing={editable}
+            editing={isEditable}
           />
         </DescriptionListDescription>
       </DescriptionListGroup>
@@ -43,7 +42,7 @@ export function Info() {
               actorRef.send({ type: "CHANGE_DESCRIPTION", description });
             }}
             value={description}
-            editing={editable}
+            editing={isEditable}
           />
         </DescriptionListDescription>
       </DescriptionListGroup>

diff --git a/packages/ui/src/pathDesigner/Servers.tsx b/packages/ui/src/pathDesigner/Servers.tsx
@@ -4,20 +4,21 @@ import {
   useMachineSelector,
 } from "./PathDesignerMachineContext.ts";
 import { ServerRow } from "../components/ServerRow.tsx";
+import { useEditableSection } from "./useEditableSection.ts";
 
 export function Servers() {
-  const { servers, editable } = useMachineSelector(({ context }) => {
+  const { servers } = useMachineSelector(({ context }) => {
     return {
       servers: context.servers,
-      editable: context.editable,
     };
   });
   const actorRef = useMachineActorRef();
+  const isEditable = useEditableSection();
   return (
     <SearchableTable
       label={"server"}
       data={servers}
-      editing={editable}
+      editing={isEditable}
       onFilter={(server, filter) =>
         server.url.toLowerCase().includes(filter.toLowerCase()) ||
         server.description.toLowerCase().includes(filter.toLowerCase())
@@ -26,7 +27,7 @@ export function Servers() {
         <ServerRow
           id={`server-${idx}`}
           url={server.url}
-          editing={editable}
+          editing={isEditable}
           description={server.description}
           onRemove={() => {}}
         />

diff --git a/packages/ui/src/pathDesigner/useEditableSection.ts b/packages/ui/src/pathDesigner/useEditableSection.ts
@@ -0,0 +1,13 @@
+import { useMachineSelector } from "./PathDesignerMachineContext.ts";
+
+import { useSection } from "../components/useSection.ts";
+
+export function useEditableSection() {
+  const { editable } = useMachineSelector(({ context }) => {
+    return {
+      editable: context.editable,
+    };
+  });
+  const view = useSection();
+  return view === "designer" || editable;
+}
diff --git a/packages/ui/src/responseDesigner/Info.tsx b/packages/ui/src/responseDesigner/Info.tsx
@@ -9,15 +9,16 @@ import {
   useMachineActorRef,
   useMachineSelector,
 } from "./ResponseDesignerMachineContext.ts";
+import { useEditableSection } from "./useEditableSection.ts";
 
 export function Info() {
-  const { description, editable } = useMachineSelector(({ context }) => {
+  const { description } = useMachineSelector(({ context }) => {
     return {
       description: context.description,
-      editable: context.editable,
     };
   });
   const actorRef = useMachineActorRef();
+  const isEditable = useEditableSection();
   return (
     <DescriptionList>
       <DescriptionListGroup>
@@ -28,7 +29,7 @@ export function Info() {
               actorRef.send({ type: "CHANGE_DESCRIPTION", description });
             }}
             value={description}
-            editing={editable}
+            editing={isEditable}
           />
         </DescriptionListDescription>
       </DescriptionListGroup>

diff --git a/packages/ui/src/responseDesigner/useEditableSection.ts b/packages/ui/src/responseDesigner/useEditableSection.ts
@@ -0,0 +1,13 @@
+import { useMachineSelector } from "./ResponseDesignerMachineContext";
+
+import { useSection } from "../components/useSection.ts";
+
+export function useEditableSection() {
+  const { editable } = useMachineSelector(({ context }) => {
+    return {
+      editable: context.editable,
+    };
+  });
+  const view = useSection();
+  return view === "designer" || editable;
+}