Refactor schema view

zuplo · Aug 20, 2024 · b1e88df · b1e88df
1 parent dd2fbd5
commit b1e88df
Show file tree

Hide file tree

Showing 9 changed files with 263 additions and 277 deletions.
diff --git a/packages/zudoku/src/lib/plugins/openapi/OperationListItem.tsx b/packages/zudoku/src/lib/plugins/openapi/OperationListItem.tsx
@@ -6,9 +6,9 @@ import { groupBy } from "../../util/groupBy.js";
 import { renderIf } from "../../util/renderIf.js";
 import { OperationsFragment } from "./OperationList.js";
 import { ParameterList } from "./ParameterList.js";
-import { SchemaListView } from "./SchemaListView.js";
 import { Sidecar } from "./Sidecar.js";
 import { FragmentType, useFragment } from "./graphql/index.js";
+import { SchemaView } from "./schema/SchemaView.js";
 import { SchemaProseClasses } from "./util/prose.js";
 
 export const PARAM_GROUPS = ["path", "query", "header", "cookie"] as const;
@@ -62,7 +62,7 @@ export const OperationListItem = ({
             <Heading level={3} className="capitalize">
               Request Body
             </Heading>
-            <SchemaListView schema={schema} />
+            <SchemaView schema={schema} />
           </div>
         ))}
         {operation.responses.length > 0 && (
@@ -93,7 +93,7 @@ export const OperationListItem = ({
                     {renderIf(
                       response.content?.find((content) => content.schema),
                       (content) => {
-                        return <SchemaListView schema={content.schema} />;
+                        return <SchemaView schema={content.schema} />;
                       },
                     ) ?? (
                       <Card className="font-mono text-sm p-4">

diff --git a/packages/zudoku/src/lib/plugins/openapi/ParameterList.tsx b/packages/zudoku/src/lib/plugins/openapi/ParameterList.tsx
@@ -21,14 +21,16 @@ export const ParameterList = ({
     </Heading>
     <Card>
       <ul className="list-none m-0 px-0 divide-y ">
-        {parameters.map((parameter) => (
-          <ParameterListItem
-            key={`${parameter.name}-${parameter.in}`}
-            parameter={parameter}
-            id={id}
-            group={group}
-          />
-        ))}
+        {parameters
+          .sort((a, b) => (a.required === b.required ? 0 : a.required ? -1 : 1))
+          .map((parameter) => (
+            <ParameterListItem
+              key={`${parameter.name}-${parameter.in}`}
+              parameter={parameter}
+              id={id}
+              group={group}
+            />
+          ))}
       </ul>
     </Card>
   </>

diff --git a/packages/zudoku/src/lib/plugins/openapi/SchemaListView.tsx b/packages/zudoku/src/lib/plugins/openapi/SchemaListView.tsx
diff --git a/packages/zudoku/src/lib/plugins/openapi/SchemaListViewItem.tsx b/packages/zudoku/src/lib/plugins/openapi/SchemaListViewItem.tsx
diff --git a/packages/zudoku/src/lib/plugins/openapi/SchemaListViewItemGroup.tsx b/packages/zudoku/src/lib/plugins/openapi/SchemaListViewItemGroup.tsx
diff --git a/packages/zudoku/src/lib/plugins/openapi/Sidecar.tsx b/packages/zudoku/src/lib/plugins/openapi/Sidecar.tsx
@@ -105,8 +105,9 @@ export const Sidecar = ({
 
   const requestBodyContent = operation.requestBody?.content;
 
-  const path = operation.path.split("/").map((part) => (
-    <Fragment key={part}>
+  const path = operation.path.split("/").map((part, i, arr) => (
+    // eslint-disable-next-line react/no-array-index-key
+    <Fragment key={part + i}>
       {part.startsWith("{") && part.endsWith("}") ? (
         <ColorizedParam
           name={part.slice(1, -1)}
@@ -119,7 +120,7 @@ export const Sidecar = ({
       ) : (
         part
       )}
-      /
+      {i < arr.length - 1 ? "/" : null}
       <wbr />
     </Fragment>
   ));