From b1e88df64b45f89a42e034989f3b6d170bf54644 Mon Sep 17 00:00:00 2001
From: Daniel Lehr <daniellehr@gmx.de>
Date: Tue, 20 Aug 2024 20:59:19 +0200
Subject: [PATCH] Refactor schema view

---
 .../lib/plugins/openapi/OperationListItem.tsx |   6 +-
 .../src/lib/plugins/openapi/ParameterList.tsx |  18 +--
 .../lib/plugins/openapi/SchemaListView.tsx    |  75 -----------
 .../plugins/openapi/SchemaListViewItem.tsx    | 125 -----------------
 .../openapi/SchemaListViewItemGroup.tsx       |  63 ---------
 .../src/lib/plugins/openapi/Sidecar.tsx       |   7 +-
 .../openapi/schema/SchemaComponents.tsx       | 126 ++++++++++++++++++
 .../lib/plugins/openapi/schema/SchemaView.tsx | 110 +++++++++++++++
 .../src/lib/plugins/openapi/schema/utils.ts   |  10 ++
 9 files changed, 263 insertions(+), 277 deletions(-)
 delete mode 100644 packages/zudoku/src/lib/plugins/openapi/SchemaListView.tsx
 delete mode 100644 packages/zudoku/src/lib/plugins/openapi/SchemaListViewItem.tsx
 delete mode 100644 packages/zudoku/src/lib/plugins/openapi/SchemaListViewItemGroup.tsx
 create mode 100644 packages/zudoku/src/lib/plugins/openapi/schema/SchemaComponents.tsx
 create mode 100644 packages/zudoku/src/lib/plugins/openapi/schema/SchemaView.tsx
 create mode 100644 packages/zudoku/src/lib/plugins/openapi/schema/utils.ts

diff --git a/packages/zudoku/src/lib/plugins/openapi/OperationListItem.tsx b/packages/zudoku/src/lib/plugins/openapi/OperationListItem.tsx
index 0f1a5b1c..a5b342a8 100644
--- 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
index a97c4ded..c1bd1f0b 100644
--- 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
deleted file mode 100644
index 62835cd6..00000000
--- a/packages/zudoku/src/lib/plugins/openapi/SchemaListView.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Markdown } from "../../components/Markdown.js";
-import { SchemaObject } from "../../oas/parser/index.js";
-import { Card } from "../../ui/Card.js";
-import { groupBy } from "../../util/groupBy.js";
-import { objectEntries } from "../../util/objectEntries.js";
-import { SchemaListViewItem } from "./SchemaListViewItem.js";
-import { SchemaListViewItemGroup } from "./SchemaListViewItemGroup.js";
-import { SchemaProseClasses } from "./util/prose.js";
-
-export const SchemaListView = ({
-  name,
-  schema,
-  level = 0,
-  defaultOpen = false,
-}: {
-  level?: number;
-  defaultOpen?: boolean;
-  name?: string;
-  schema: SchemaObject;
-}) => {
-  const properties = Object.entries(schema.properties ?? {});
-  const additionalProperties =
-    typeof schema.additionalProperties === "object"
-      ? Object.entries(schema.additionalProperties)
-      : [];
-
-  const combinedProperties = properties.concat(
-    Array.isArray(additionalProperties) ? additionalProperties : [],
-  );
-
-  const groups = groupBy(combinedProperties, ([propertyName, property]) => {
-    return property.deprecated
-      ? "deprecated"
-      : schema.required?.includes(propertyName)
-        ? "required"
-        : "optional";
-  });
-
-  if (schema.type === "array") {
-    return (
-      <Card className="overflow-hidden">
-        <SchemaListViewItem
-          propertyName={schema.title ?? name}
-          isRequired={true}
-          property={schema}
-          defaultOpen={level === 0}
-          nestingLevel={level}
-        />
-      </Card>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-2.5">
-      {(schema.title ?? name) && (
-        <div className="ml-2 my-1 font-bold">{schema.title ?? name}</div>
-      )}
-      {level === 0 && schema.description && (
-        <Markdown className={SchemaProseClasses} content={schema.description} />
-      )}
-      <Card className="overflow-hidden">
-        {objectEntries(groups).map(([group, properties]) => (
-          <SchemaListViewItemGroup
-            key={group}
-            defaultOpen={defaultOpen}
-            group={group}
-            nestingLevel={level}
-            properties={properties ?? []}
-            required={schema.required ?? []}
-          />
-        ))}
-      </Card>
-    </div>
-  );
-};
diff --git a/packages/zudoku/src/lib/plugins/openapi/SchemaListViewItem.tsx b/packages/zudoku/src/lib/plugins/openapi/SchemaListViewItem.tsx
deleted file mode 100644
index b0cb8def..00000000
--- a/packages/zudoku/src/lib/plugins/openapi/SchemaListViewItem.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { ListPlusIcon } from "lucide-react";
-import { Markdown } from "../../components/Markdown.js";
-import { SchemaObject } from "../../oas/parser/index.js";
-import { Button } from "../../ui/Button.js";
-import { cn } from "../../util/cn.js";
-import { SchemaListView } from "./SchemaListView.js";
-
-export const SchemaListViewItem = ({
-  propertyName,
-  property,
-  nestingLevel,
-  isRequired,
-  defaultOpen = false,
-}: {
-  propertyName?: string;
-  isRequired: boolean;
-  property: SchemaObject;
-  nestingLevel: number;
-  defaultOpen?: boolean;
-}) => {
-  if (!property) {
-    return <div>no property</div>;
-  }
-
-  const title =
-    propertyName || property.title
-      ? [propertyName, property.title].filter(Boolean).join(" ")
-      : null;
-
-  return (
-    <div
-      className={cn(
-        "p-4 bg-border/20 hover:bg-border/30 flex gap-1 flex-col text-sm",
-        property.deprecated && "opacity-50",
-      )}
-    >
-      <div className="flex items-center gap-2 relative">
-        {title && <code>{title}</code>}
-
-        {property.type && (
-          <span className="text-muted-foreground">{property.type}</span>
-        )}
-        {property.deprecated && (
-          <span className="text-muted-foreground">Deprecated</span>
-        )}
-        {!isRequired && (
-          <span className="py-px px-1.5 font-medium border rounded-lg">
-            optional {property.required}
-          </span>
-        )}
-      </div>
-      {property.description && (
-        <Markdown
-          content={property.description}
-          className="text-sm leading-normal line-clamp-4 "
-        />
-      )}
-
-      {property.enum && (
-        <span className="text-sm text-muted-foreground flex gap-1 flex-wrap items-center">
-          <span>Possible values</span>
-          {/* Make values unique, some schemas have duplicates */}
-          {[...new Set(property.enum.filter((value) => value))]
-            .map((value) => (
-              <span
-                key={value}
-                className="font-mono text-xs border bg-muted rounded px-1"
-              >
-                {value}
-              </span>
-            ))
-            .slice(0, 4)}
-          {property.enum.length > 4 && (
-            <span className="font-mono text-xs border bg-muted rounded px-1">
-              ...
-            </span>
-          )}
-        </span>
-      )}
-
-      {(property.type === "object" &&
-        (property.properties?.length ??
-          Object.entries(property.additionalProperties ?? {}).length > 0)) ||
-      (property.type === "array" &&
-        // this check is needed because the `items` can be undefined despite the type being defined
-        typeof property.items !== "undefined" &&
-        property.items.type === "object") ? (
-        <Collapsible.Root className="CollapsibleRoot" defaultOpen={defaultOpen}>
-          <Collapsible.Trigger asChild>
-            <Button
-              variant="ghost"
-              size="sm"
-              className={cn(defaultOpen && "hidden")}
-            >
-              Show nested fields
-              <ListPlusIcon size={18} className="ml-1.5" />
-            </Button>
-          </Collapsible.Trigger>
-
-          <Collapsible.Content>
-            {property.type === "object" && (
-              <div className="mt-2.5">
-                <SchemaListView
-                  schema={property}
-                  level={nestingLevel + 1}
-                  defaultOpen
-                />
-              </div>
-            )}
-            {property.type === "array" && property.items.type === "object" && (
-              <div className="mt-2.5">
-                <SchemaListView
-                  schema={property.items}
-                  defaultOpen
-                  level={nestingLevel + 1}
-                />
-              </div>
-            )}
-          </Collapsible.Content>
-        </Collapsible.Root>
-      ) : null}
-    </div>
-  );
-};
diff --git a/packages/zudoku/src/lib/plugins/openapi/SchemaListViewItemGroup.tsx b/packages/zudoku/src/lib/plugins/openapi/SchemaListViewItemGroup.tsx
deleted file mode 100644
index 6cf3be69..00000000
--- a/packages/zudoku/src/lib/plugins/openapi/SchemaListViewItemGroup.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { useState } from "react";
-import { SchemaObject } from "../../oas/parser/index.js";
-import { cn } from "../../util/cn.js";
-import { SchemaListViewItem } from "./SchemaListViewItem.js";
-
-export const SchemaListViewItemGroup = ({
-  group,
-  properties,
-  nestingLevel,
-  required,
-  defaultOpen = false,
-}: {
-  group: "optional" | "required" | "deprecated";
-  defaultOpen?: boolean;
-  properties: [string, SchemaObject][];
-  nestingLevel: number;
-  required: string[];
-}) => {
-  const notCollapsible =
-    defaultOpen ||
-    group === "required" ||
-    properties.length === 1 ||
-    nestingLevel === 0;
-
-  const [open, setOpen] = useState(notCollapsible);
-
-  if (properties.length === 0) {
-    return;
-  }
-
-  return (
-    <Collapsible.Root
-      className="CollapsibleRoot"
-      open={open}
-      onOpenChange={setOpen}
-    >
-      {!open && (
-        <Collapsible.Trigger
-          className={cn(
-            "py-2 hover:bg-muted w-full",
-            group === "optional" && "font-semibold",
-            group === "deprecated" && "text-muted-foreground",
-          )}
-        >
-          {properties.length} {group} fields
-        </Collapsible.Trigger>
-      )}
-
-      <Collapsible.Content className="divide-y divide-border">
-        {properties.map(([propertyName, property]) => (
-          <SchemaListViewItem
-            key={propertyName}
-            property={property}
-            propertyName={propertyName}
-            nestingLevel={nestingLevel}
-            isRequired={required.includes(propertyName)}
-          />
-        ))}
-      </Collapsible.Content>
-    </Collapsible.Root>
-  );
-};
diff --git a/packages/zudoku/src/lib/plugins/openapi/Sidecar.tsx b/packages/zudoku/src/lib/plugins/openapi/Sidecar.tsx
index 059172a4..b7b8b31c 100644
--- 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>
   ));
diff --git a/packages/zudoku/src/lib/plugins/openapi/schema/SchemaComponents.tsx b/packages/zudoku/src/lib/plugins/openapi/schema/SchemaComponents.tsx
new file mode 100644
index 00000000..1b6d6e43
--- /dev/null
+++ b/packages/zudoku/src/lib/plugins/openapi/schema/SchemaComponents.tsx
@@ -0,0 +1,126 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { ListPlusIcon } from "lucide-react";
+import { useState } from "react";
+import { Markdown, ProseClasses } from "../../../components/Markdown.js";
+import type { SchemaObject } from "../../../oas/parser/index.js";
+import { Button } from "../../../ui/Button.js";
+import { cn } from "../../../util/cn.js";
+import { SchemaView } from "./SchemaView.js";
+import { hasLogicalGroupings, isComplexType } from "./utils.js";
+
+export const SchemaLogicalGroup = ({
+  schema,
+  level,
+}: {
+  schema: SchemaObject;
+  level: number;
+}) => {
+  const renderLogicalGroup = (
+    group: SchemaObject[],
+    groupName: string,
+    separator: string,
+  ) => {
+    return group.map((subSchema, index) => (
+      <div key={index} className="my-2">
+        <strong>{groupName}</strong>
+        <div className="mt-2">
+          <SchemaView schema={subSchema} level={level + 1} />
+          {index < group.length - 1 && (
+            <div className="text-center my-2">{separator}</div>
+          )}
+        </div>
+      </div>
+    ));
+  };
+
+  if (schema.oneOf) return renderLogicalGroup(schema.oneOf, "One of", "OR");
+  if (schema.allOf) return renderLogicalGroup(schema.allOf, "All of", "AND");
+  if (schema.anyOf) return renderLogicalGroup(schema.anyOf, "Any of", "OR");
+
+  return null;
+};
+
+export const SchemaPropertyItem = ({
+  name,
+  value,
+  group,
+  level,
+  defaultOpen = false,
+  showCollapseButton = true,
+}: {
+  name: string;
+  value: SchemaObject;
+  group: "required" | "optional" | "deprecated";
+  level: number;
+  defaultOpen?: boolean;
+  showCollapseButton?: boolean;
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <li className="p-4 bg-border/20 hover:bg-border/30">
+      <div className="flex flex-col gap-1 justify-between text-sm">
+        <div className="flex gap-2 items-center">
+          <code>{name}</code>
+          <span className="text-muted-foreground">
+            {value.type === "array" && value.items?.type ? (
+              <span>{value.items.type}[]</span>
+            ) : Array.isArray(value.type) ? (
+              <span>{value.type.join(" | ")}</span>
+            ) : (
+              <span>{value.type}</span>
+            )}
+          </span>
+          {group === "optional" && (
+            <span className="py-px px-1.5 font-medium border rounded-lg">
+              optional
+            </span>
+          )}
+        </div>
+
+        {value.description && (
+          <Markdown
+            className={cn(ProseClasses, "text-sm leading-normal line-clamp-4")}
+            content={value.description}
+          />
+        )}
+
+        {(hasLogicalGroupings(value) ?? isComplexType(value)) && (
+          <Collapsible.Root
+            defaultOpen={defaultOpen}
+            open={isOpen}
+            onOpenChange={() => setIsOpen(!isOpen)}
+          >
+            {showCollapseButton && (
+              <Collapsible.Trigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="mt-2 flex gap-1.5"
+                >
+                  <ListPlusIcon size={18} />
+                  {!isOpen
+                    ? "Show nested properties"
+                    : "Hide nested properties"}
+                </Button>
+              </Collapsible.Trigger>
+            )}
+            <Collapsible.Content>
+              <div className="mt-2">
+                {hasLogicalGroupings(value) && (
+                  <SchemaLogicalGroup schema={value} level={level + 1} />
+                )}
+                {value.type === "object" && (
+                  <SchemaView schema={value} level={level + 1} />
+                )}
+                {value.type === "array" && typeof value.items === "object" && (
+                  <SchemaView schema={value.items} level={level + 1} />
+                )}
+              </div>
+            </Collapsible.Content>
+          </Collapsible.Root>
+        )}
+      </div>
+    </li>
+  );
+};
diff --git a/packages/zudoku/src/lib/plugins/openapi/schema/SchemaView.tsx b/packages/zudoku/src/lib/plugins/openapi/schema/SchemaView.tsx
new file mode 100644
index 00000000..d5d07a8f
--- /dev/null
+++ b/packages/zudoku/src/lib/plugins/openapi/schema/SchemaView.tsx
@@ -0,0 +1,110 @@
+import type { SchemaObject } from "../../../oas/parser/index.js";
+import { Card, CardContent, CardHeader, CardTitle } from "../../../ui/Card.js";
+import { groupBy } from "../../../util/groupBy.js";
+import { SchemaLogicalGroup, SchemaPropertyItem } from "./SchemaComponents.js";
+import { hasLogicalGroupings } from "./utils.js";
+
+export const SchemaView = ({
+  schema,
+  level = 0,
+  defaultOpen = false,
+}: {
+  schema: SchemaObject;
+  level?: number;
+  defaultOpen?: boolean;
+}) => {
+  const renderSchema = (schema: SchemaObject, level: number) => {
+    if (schema.oneOf || schema.allOf || schema.anyOf) {
+      return <SchemaLogicalGroup schema={schema} level={level} />;
+    }
+
+    if (schema.type === "array" && schema.items) {
+      const itemsSchema = schema.items as SchemaObject;
+
+      if (
+        typeof itemsSchema.type === "string" &&
+        ["string", "number", "boolean", "integer"].includes(itemsSchema.type)
+      ) {
+        return (
+          <Card className="my-2">
+            <CardContent>
+              <strong>{`array<${itemsSchema.type}>`}</strong>
+              {schema.description && <p>{schema.description}</p>}
+            </CardContent>
+          </Card>
+        );
+      } else if (
+        itemsSchema.type === "object" ||
+        hasLogicalGroupings(itemsSchema)
+      ) {
+        return (
+          <Card className="flex flex-col gap-2 bg-border/30 p-4 ">
+            <span className="text-sm text-muted-foreground">object[]</span>
+            {renderSchema(itemsSchema, level + 1)}
+          </Card>
+        );
+      } else {
+        return renderSchema(itemsSchema, level + 1);
+      }
+    }
+
+    if (schema.properties) {
+      const groupedProperties = groupBy(
+        Object.entries(schema.properties),
+        ([propertyName, property]) => {
+          return property.deprecated
+            ? "deprecated"
+            : schema.required?.includes(propertyName)
+              ? "required"
+              : "optional";
+        },
+      );
+
+      const isTopLevelSingleItem =
+        level === 0 && Object.keys(groupedProperties).length === 1;
+
+      return (
+        <Card className="divide-y overflow-hidden">
+          {(["required", "optional", "deprecated"] as const).map(
+            (group) =>
+              groupedProperties[group] && (
+                <ul key={group} className="divide-y divide-border">
+                  {groupedProperties[group].map(([key, value]) => (
+                    <SchemaPropertyItem
+                      key={key}
+                      name={key}
+                      value={value}
+                      group={group}
+                      level={level}
+                      defaultOpen={isTopLevelSingleItem || defaultOpen}
+                      showCollapseButton={!isTopLevelSingleItem}
+                    />
+                  ))}
+                </ul>
+              ),
+          )}
+        </Card>
+      );
+    }
+
+    if (schema.additionalProperties) {
+      return (
+        <Card className="my-2">
+          <CardHeader>
+            <CardTitle>Additional Properties:</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {renderSchema(
+              schema.additionalProperties as SchemaObject,
+              level + 1,
+            )}
+          </CardContent>
+        </Card>
+      );
+    }
+
+    return null;
+  };
+
+  return renderSchema(schema, level);
+};
diff --git a/packages/zudoku/src/lib/plugins/openapi/schema/utils.ts b/packages/zudoku/src/lib/plugins/openapi/schema/utils.ts
new file mode 100644
index 00000000..972a704e
--- /dev/null
+++ b/packages/zudoku/src/lib/plugins/openapi/schema/utils.ts
@@ -0,0 +1,10 @@
+import type { SchemaObject } from "../../../oas/parser/index.js";
+
+export const isComplexType = (value: SchemaObject) =>
+  value.type === "object" ||
+  (value.type === "array" &&
+    typeof value.items === "object" &&
+    (!value.items?.type || value.items?.type === "object"));
+
+export const hasLogicalGroupings = (value: SchemaObject) =>
+  value.oneOf || value.allOf || value.anyOf;