Paths explorer

Apicurio · Nov 26, 2024 · f4f52ca · f4f52ca
1 parent 2d06cb3
commit f4f52ca
Show file tree

Hide file tree

Showing 9 changed files with 344 additions and 63 deletions.
diff --git a/packages/ui/src/OpenApiEditorModels.ts b/packages/ui/src/OpenApiEditorModels.ts
@@ -24,11 +24,22 @@ export type Response =
       ref: string; // TODO
     };
 
+export const Operations = [
+  "get" as const,
+  "put" as const,
+  "post" as const,
+  "delete" as const,
+  "options" as const,
+  "head" as const,
+  "patch" as const,
+  "trace" as const,
+];
+
 export type Operation = {
   summary: string;
   description: string;
   id: string;
-  tags: Tag[];
+  tags: string[];
   servers: Server[];
   queryParameters: "TODO";
   headerParameters: "TODO";

diff --git a/packages/ui/src/OpenApiEditorWorker.ts b/packages/ui/src/OpenApiEditorWorker.ts
@@ -1,4 +1,5 @@
 import * as DM from "@apicurio/data-models";
+import { Oas20Operation } from "@apicurio/data-models";
 import { FindPathItemsVisitor } from "../../visitors/src/path-items.visitor.ts";
 import { FindResponseDefinitionsVisitor } from "../../visitors/src/response-definitions.visitor.ts";
 import { FindSchemaDefinitionsVisitor } from "../../visitors/src/schema-definitions.visitor.ts";
@@ -213,7 +214,7 @@ function oasOperationToOperation(
       summary: operation.summary,
       description: operation.description,
       id: operation.operationId,
-      tags: [],
+      tags: (operation as Oas20Operation).tags,
       servers: [],
       queryParameters: "TODO",
       headerParameters: "TODO",

diff --git a/packages/ui/src/components/Path.tsx b/packages/ui/src/components/Path.tsx
@@ -18,13 +18,7 @@ export function Path({ path }: { path: string }) {
               p
             )}
             {idx < list.length - 1 && (
-              <span
-                className={
-                  "pf-v6-u-text-color-disabled pf-v6-u-text-color-status-danger"
-                }
-              >
-                /
-              </span>
+              <span className={"pf-v6-u-text-color-disabled"}>/</span>
             )}
           </Fragment>
         )) as unknown as string

diff --git a/packages/ui/src/components/SearchableTable.tsx b/packages/ui/src/components/SearchableTable.tsx
@@ -1,5 +1,7 @@
 import {
   Button,
+  Card,
+  CardBody,
   DataList,
   EmptyState,
   EmptyStateActions,
@@ -78,48 +80,54 @@ export function SearchableTable<T>({
         </PanelHeader>
       )}
       <PanelMain>
-        {filteredData.length > 0 && (
-          <DataList
-            aria-label="Servers"
-            isCompact={!editing}
-            gridBreakpoint={editing ? "always" : undefined}
-          >
-            {filteredData.map((t, idx) => {
-              return <Fragment key={idx}>{onRenderRow(t, idx)}</Fragment>;
-            })}
-          </DataList>
-        )}
-        {filteredData.length === 0 && filter.length > 0 && (
-          <PanelMainBody>
-            <EmptyState variant={"xs"} icon={SearchIcon}>
-              <EmptyStateBody>
-                No {label}s were found that meet the search criteria.
-              </EmptyStateBody>
-              <EmptyStateActions>
-                <Button variant={"link"} onClick={() => setFilter("")}>
-                  Reset search
-                </Button>
-              </EmptyStateActions>
-            </EmptyState>
-          </PanelMainBody>
-        )}
-        {filteredData.length === 0 && filter.length === 0 && (
-          <PanelMainBody>
-            <EmptyState
-              variant={"xs"}
-              icon={editing ? AddCircleOIcon : undefined}
-            >
-              <EmptyStateBody>No {label}s have been defined.</EmptyStateBody>
-              {editing && (
-                <EmptyStateActions>
-                  <Button variant={"link"} onClick={onAdd}>
-                    Add a {label}
-                  </Button>
-                </EmptyStateActions>
-              )}
-            </EmptyState>
-          </PanelMainBody>
-        )}
+        <Card>
+          <CardBody>
+            {filteredData.length > 0 && (
+              <DataList
+                aria-label="Servers"
+                isCompact={!editing}
+                gridBreakpoint={editing ? "always" : undefined}
+              >
+                {filteredData.map((t, idx) => {
+                  return <Fragment key={idx}>{onRenderRow(t, idx)}</Fragment>;
+                })}
+              </DataList>
+            )}
+            {filteredData.length === 0 && filter.length > 0 && (
+              <PanelMainBody>
+                <EmptyState variant={"xs"} icon={SearchIcon}>
+                  <EmptyStateBody>
+                    No {label}s were found that meet the search criteria.
+                  </EmptyStateBody>
+                  <EmptyStateActions>
+                    <Button variant={"link"} onClick={() => setFilter("")}>
+                      Reset search
+                    </Button>
+                  </EmptyStateActions>
+                </EmptyState>
+              </PanelMainBody>
+            )}
+            {filteredData.length === 0 && filter.length === 0 && (
+              <PanelMainBody>
+                <EmptyState
+                  variant={"xs"}
+                  icon={editing ? AddCircleOIcon : undefined}
+                >
+                  <EmptyStateBody>
+                    No {label}s have been defined.
+                  </EmptyStateBody>
+                  {editing && (
+                    <EmptyStateActions>
+                      <Button variant={"link"} onClick={onAdd}>
+                        Add a {label}
+                      </Button>
+                    </EmptyStateActions>
+                  )}
+                </EmptyState>
+              </PanelMainBody>
+            )}
+          </CardBody>
+        </Card>
       </PanelMain>
     </Panel>
   );

diff --git a/packages/ui/src/documentDesigner/Designer.tsx b/packages/ui/src/documentDesigner/Designer.tsx
@@ -7,7 +7,8 @@ import { SecurityScheme } from "./SecurityScheme.tsx";
 import { SecurityRequirements } from "./SecurityRequirements.tsx";
 import { useMachineSelector } from "./DocumentDesignerMachineContext.ts";
 import { DesignerLayout } from "./DesignerLayout.tsx";
-import { Paths } from "./Paths.tsx";
+import { PathsExplorer } from "./PathsExplorer.tsx";
+import { PathsTree } from "./PathsTree.tsx";
 
 export function Designer() {
   const {
@@ -16,19 +17,21 @@ export function Designer() {
     securitySchemeCount,
     securityRequirementsCount,
     pathsCount,
+    editable,
   } = useMachineSelector(({ context }) => {
     return {
       tagDefinitionsCount: context.tags?.length,
       serversCount: context.servers?.length,
       securitySchemeCount: context.securityScheme?.length,
       securityRequirementsCount: context.securityRequirements?.length,
       pathsCount: context.paths?.length,
+      editable: context.editable,
     };
   });
   return (
     <DesignerLayout
       info={<Info />}
-      paths={<Paths />}
+      paths={editable ? <PathsTree /> : <PathsExplorer />}
       pathsCount={pathsCount}
       contact={<Contact />}
       license={<License />}