zudoku 0.0.0-ec30b50 → 0.0.0-edd80c1

package/src/lib/plugins/openapi/playground/SubmitButton.tsx

@@ -1,5 +1,4 @@
-import { ChevronDownIcon } from "lucide-react";
-import { useState } from "react";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
 import { useFormContext } from "react-hook-form";
 import { Button } from "zudoku/ui/Button.js";
 import {
@@ -8,8 +7,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "zudoku/ui/DropdownMenu.js";
-import { RadioGroup, RadioGroupItem } from "zudoku/ui/RadioGroup.js";
-import { ApiIdentity } from "../../../core/ZudokuContext.js";
+import { type ApiIdentity } from "../../../core/ZudokuContext.js";
 import { NO_IDENTITY } from "./Playground.js";
 
 const SubmitButton = ({
@@ -21,15 +19,16 @@ const SubmitButton = ({
   formRef?: React.RefObject<HTMLFormElement | null>;
   disabled?: boolean;
 }) => {
-  const { setValue } = useFormContext();
-  const [dropdownValue, setDropdownValue] = useState<string | undefined>();
+  const { setValue, watch } = useFormContext();
+  const formIdentity = watch("identity");
+
   if (identities.length === 0) {
     return <Button disabled={disabled}>Send</Button>;
   }
   return (
     <div className="flex">
       <Button
-        className="rounded-r-none inset-shadow-sm"
+        className="rounded-r-none inset-shadow-xs"
         disabled={disabled}
         onClick={() => formRef?.current?.requestSubmit()}
       >
@@ -39,34 +38,30 @@ const SubmitButton = ({
         <DropdownMenuTrigger asChild>
           <Button
             disabled={disabled}
-            className="rounded-l-none border-l border-border/40 inset-shadow-sm w-6"
+            className="rounded-l-none border-l border-border/40 inset-shadow-xs w-6"
             size="icon"
           >
             <ChevronDownIcon className="w-4 h-4" />
           </Button>
         </DropdownMenuTrigger>
-        <RadioGroup value={dropdownValue}>
-          <DropdownMenuContent className="w-56" align="end" alignOffset={-150}>
-            {[{ id: NO_IDENTITY, label: "None" }, ...identities].map(
-              (identity) => (
-                <DropdownMenuItem
-                  key={identity.id}
-                  onClick={() => {
-                    setDropdownValue(identity.id);
-                    setValue("identity", identity.id);
-                    formRef?.current?.requestSubmit();
-                  }}
-                  onMouseEnter={() => setDropdownValue(identity.id)}
-                  onMouseLeave={() => setDropdownValue(undefined)}
-                >
-                  <RadioGroupItem value={identity.id} className="mr-2" />
-
-                  {identity.label}
-                </DropdownMenuItem>
-              ),
-            )}
-          </DropdownMenuContent>
-        </RadioGroup>
+        <DropdownMenuContent className="w-56" align="end" alignOffset={-150}>
+          {[{ id: NO_IDENTITY, label: "None" }, ...identities].map(
+            (identity) => (
+              <DropdownMenuItem
+                key={identity.id}
+                onClick={() => {
+                  setValue("identity", identity.id);
+                  formRef?.current?.requestSubmit();
+                }}
+              >
+                {identity.label}
+                {formIdentity === identity.id && (
+                  <CheckIcon className="ms-2" size={16} />
+                )}
+              </DropdownMenuItem>
+            ),
+          )}
+        </DropdownMenuContent>
       </DropdownMenu>
     </div>
   );

package/src/lib/plugins/openapi/playground/rememberedIdentity.ts

@@ -0,0 +1,26 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+interface IdentityState {
+  rememberedIdentity: string | null;
+  setRememberedIdentity: (identity: string | null) => void;
+  getRememberedIdentity: (availableIdentities: string[]) => string | undefined;
+}
+
+export const useIdentityStore = create<IdentityState>()(
+  persist(
+    (set, get) => ({
+      rememberedIdentity: null,
+      setRememberedIdentity: (identity: string | null) =>
+        set({ rememberedIdentity: identity }),
+      getRememberedIdentity: (availableIdentities: string[]) =>
+        availableIdentities.find(
+          (identity) => identity === get().rememberedIdentity,
+        ),
+    }),
+    {
+      name: "identity-storage",
+      storage: createJSONStorage(() => sessionStorage),
+    },
+  ),
+);

package/src/lib/plugins/openapi/playground/result-panel/RequestTab.tsx

@@ -36,11 +36,11 @@ export const RequestTab = ({
             <span className="font-semibold">Headers</span>
           </CollapsibleTrigger>
           <CollapsibleContent>
-            <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 pl-1.5 pt-2">
+            <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 ps-1.5 pt-2">
               {headers.map(([key, value]) => (
                 <Fragment key={key}>
                   <div className="text-primary">{key}</div>
-                  <div className="break-words">{value}</div>
+                  <div className="break-all">{value}</div>
                 </Fragment>
               ))}
             </div>
@@ -53,7 +53,7 @@ export const RequestTab = ({
             <span className="font-semibold">Body</span>
           </CollapsibleTrigger>
           <CollapsibleContent>
-            <div className="pl-0 pt-2">
+            <div className="ps-0 pt-2">
               <div
                 className={cn(
                   "whitespace-pre-wrap break-all bg-muted p-2 rounded-md",

package/src/lib/plugins/openapi/playground/result-panel/ResponseTab.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { ChevronRightIcon } from "lucide-react";
 import { Fragment, useState } from "react";
+import { Callout } from "zudoku/ui/Callout.js";
 import {
   Collapsible,
   CollapsibleContent,
@@ -13,8 +14,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "zudoku/ui/Select.js";
-import { SyntaxHighlight } from "../../../../components/SyntaxHighlight.js";
 import { Card } from "../../../../ui/Card.js";
+import { SyntaxHighlight } from "../../../../ui/SyntaxHighlight.js";
 import { convertToTypes } from "./convertToTypes.js";
 
 const statusCodeMap: Record<number, string> = {
@@ -30,6 +31,14 @@ const statusCodeMap: Record<number, string> = {
   500: "Internal Server Error",
 };
 
+const humanFileSize = (bytes: number) => {
+  const exponent = Math.floor(Math.log(bytes) / Math.log(1000.0));
+  const decimal = (bytes / Math.pow(1000.0, exponent)).toFixed(
+    exponent ? 2 : 0,
+  );
+  return `${decimal} ${exponent ? `${"kMGTPEZY"[exponent - 1]}B` : "B"}`;
+};
+
 const mimeTypeToLanguage = (mimeType: string) => {
   const mimeTypeMapping = {
     "application/json": "json",
@@ -83,6 +92,8 @@ const sortHeadersByRelevance = (
   });
 };
 
+const SYNTAX_HIGHLIGHT_MAX_SIZE_THRESHOLD = 64_000;
+
 export const ResponseTab = ({
   body = "",
   headers,
@@ -114,16 +125,17 @@ export const ResponseTab = ({
   });
 
   const sortedHeaders = sortHeadersByRelevance([...headers]);
+  const shouldDisableHighlighting = size > SYNTAX_HIGHLIGHT_MAX_SIZE_THRESHOLD;
 
   return (
-    <div className="flex flex-col gap-2 h-full overflow-y-scroll max-h-[calc(100vh-220px)] py-4">
+    <div className="flex flex-col gap-2 h-full overflow-auto max-h-[calc(100vh-220px)] ">
       <Collapsible defaultOpen>
         <CollapsibleTrigger className="flex items-center gap-2 hover:text-primary group">
           <ChevronRightIcon className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-[90deg]" />
           <span className="font-semibold">Headers</span>
         </CollapsibleTrigger>
         <CollapsibleContent>
-          <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 pl-1.5 pt-2 font-mono text-xs">
+          <div className="grid grid-cols-[auto,1fr] gap-x-8 gap-y-1 ps-1.5 pt-2 font-mono text-xs">
             {sortedHeaders.slice(0, 5).map(([key, value]) => (
               <Fragment key={key}>
                 <div className="text-primary whitespace-pre">{key}</div>
@@ -151,6 +163,12 @@ export const ResponseTab = ({
       </Collapsible>
 
       <Card className="shadow-none">
+        {shouldDisableHighlighting && (
+          <Callout type="info" className="my-0 p-2">
+            Code highlight is disabled for responses larger than{" "}
+            {humanFileSize(SYNTAX_HIGHLIGHT_MAX_SIZE_THRESHOLD)}
+          </Callout>
+        )}
         <SyntaxHighlight
           language={
             view === "types"
@@ -161,8 +179,9 @@ export const ResponseTab = ({
                   : detectedLanguage
                 : "json"
           }
+          showCopy="always"
+          disabled={shouldDisableHighlighting}
           noBackground
-          // playground dialog has h-5/6 ≈ 83.333vh
           className="overflow-x-auto p-4 text-xs max-h-[calc(83.333vh-180px)]"
           code={
             (view === "raw"
@@ -173,7 +192,7 @@ export const ResponseTab = ({
           }
         />
       </Card>
-      <div className="flex gap-2 justify-between">
+      <div className="flex gap-2 justify-between items-center">
         <div className="flex text-xs gap-2 border bg-muted rounded-md p-2 items-center h-8 font-mono divide-x">
           <div>
             <span className="text-muted-foreground">Status</span> {status}{" "}
@@ -184,7 +203,8 @@ export const ResponseTab = ({
             {time.toFixed(0)}ms
           </div>
           <div>
-            <span className="text-muted-foreground">Size</span> {size}B
+            <span className="text-muted-foreground">Size</span>{" "}
+            {humanFileSize(size)}
           </div>
         </div>
         {jsonContent && (

package/src/lib/plugins/openapi/playground/result-panel/ResultPanel.tsx

@@ -1,5 +1,6 @@
-import { UseMutationResult } from "@tanstack/react-query";
+import { type UseMutationResult } from "@tanstack/react-query";
 import { Spinner } from "../../../../components/Spinner.js";
+import { Button } from "../../../../ui/Button.js";
 import { Callout } from "../../../../ui/Callout.js";
 import {
   Card,
@@ -14,20 +15,24 @@ import {
   TabsTrigger,
 } from "../../../../ui/Tabs.js";
 import { cn } from "../../../../util/cn.js";
-import { PlaygroundResult } from "../Playground.js";
+import { type PlaygroundResult } from "../Playground.js";
 import { RequestTab } from "./RequestTab.js";
 import { ResponseTab } from "./ResponseTab.js";
 
 export const ResultPanel = ({
   queryMutation,
   showPathParamsWarning,
+  showLongRunningWarning,
+  onCancel,
 }: {
-  queryMutation: UseMutationResult<PlaygroundResult, Error, any, unknown>;
+  queryMutation: UseMutationResult<PlaygroundResult, Error, any>;
   showPathParamsWarning: boolean;
+  showLongRunningWarning?: boolean;
+  onCancel?: () => void;
 }) => {
   const status = ((queryMutation.data?.status ?? 0) / 100).toFixed(0);
   return (
-    <div className="min-w-0 p-8 bg-muted/70 overflow-y-auto">
+    <div className="min-w-0 p-4 py-8 bg-muted/50">
       {queryMutation.error ? (
         <div className="flex flex-col gap-2">
           {showPathParamsWarning && (
@@ -49,49 +54,66 @@ export const ResultPanel = ({
           </Card>
         </div>
       ) : queryMutation.data ? (
-        <div className="flex flex-col gap-2">
-          <Tabs defaultValue="response">
-            <TabsList>
-              <TabsTrigger value="request">Request</TabsTrigger>
-              <TabsTrigger value="response">
-                Response
-                <span
-                  className={cn(
-                    "text-xs font-mono ml-1",
-                    status === "2" && "text-green-500",
-                    status === "3" && "text-blue-500",
-                    status === "4" && "text-yellow-500",
-                    status === "5" && "text-red-500",
-                  )}
-                >
-                  ({queryMutation.data.status})
-                </span>
-              </TabsTrigger>
-            </TabsList>
-            <TabsContent value="request">
-              <RequestTab {...queryMutation.data.request} />
-            </TabsContent>
-            <TabsContent value="response">
-              <ResponseTab
-                status={queryMutation.data.status}
-                time={queryMutation.data.time}
-                size={queryMutation.data.size}
-                headers={queryMutation.data.headers}
-                body={queryMutation.data.body}
-                url={queryMutation.data.request.url}
-              />
-            </TabsContent>
-          </Tabs>
-        </div>
+        <Tabs defaultValue="response">
+          <TabsList>
+            <TabsTrigger value="request">Request</TabsTrigger>
+            <TabsTrigger value="response">
+              Response
+              <span
+                className={cn(
+                  "text-xs font-mono ms-1",
+                  status === "2" && "text-green-500",
+                  status === "3" && "text-blue-500",
+                  status === "4" && "text-yellow-500",
+                  status === "5" && "text-red-500",
+                )}
+              >
+                ({queryMutation.data.status})
+              </span>
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="request">
+            <RequestTab {...queryMutation.data.request} />
+          </TabsContent>
+          <TabsContent value="response">
+            <ResponseTab
+              status={queryMutation.data.status}
+              time={queryMutation.data.time}
+              size={queryMutation.data.size}
+              headers={queryMutation.data.headers}
+              body={queryMutation.data.body}
+              url={queryMutation.data.request.url}
+            />
+          </TabsContent>
+        </Tabs>
       ) : (
         <div className="grid place-items-center h-full">
-          <span className="text-[16px] font-semibold text-muted-foreground">
-            {queryMutation.isPending ? (
-              <Spinner />
-            ) : (
-              "Send a request first to see the response here"
-            )}
-          </span>
+          {queryMutation.isPending ? (
+            <div className="flex flex-col gap-2 items-center mt-20">
+              <Spinner size={20} />
+              <div
+                className={cn(
+                  "opacity-0 pointer-events-none transition-opacity h-20 text-sm text-muted-foreground duration-300 flex flex-col gap-2 items-center",
+                  showLongRunningWarning && "opacity-100 pointer-events-auto",
+                )}
+              >
+                Looks like the request is taking longer than expected.
+                <Button
+                  type="button"
+                  onClick={onCancel}
+                  size="sm"
+                  className="w-fit"
+                  variant="outline"
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <span className="text-[16px] font-semibold text-muted-foreground">
+              Send a request first to see the response here
+            </span>
+          )}
         </div>
       )}
     </div>

package/src/lib/plugins/openapi/{post-processors → processors}/removeExtensions.test.ts

@@ -64,11 +64,15 @@ const baseDoc = {
       },
     },
   },
-};
+} as any;
 
 describe("removeExtensions", () => {
   it("removes all x- extensions by default", () => {
-    const processed = removeExtensions()(baseDoc);
+    const processed = removeExtensions()({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
 
     const removedExtensions = [
       "x-root-ext",
@@ -93,7 +97,7 @@ describe("removeExtensions", () => {
       ["paths", "/test", "get", "responses", "200", "description"],
       "OK",
     );
-    expect(processed.tags[0].name).toBe("example");
+    expect(processed.tags?.[0]?.name).toBe("example");
   });
 
   it("removes only specified x- extensions when names are provided", () => {
@@ -104,7 +108,11 @@ describe("removeExtensions", () => {
 
     const processed = removeExtensions({
       keys: ["x-path-ext", "x-param-ext"],
-    })(docWithExtraExtensions);
+    })({
+      schema: docWithExtraExtensions,
+      file: "/file.json",
+      dereference: async (id) => id,
+    }) as any;
 
     // Assert specified extensions are removed
     expect(processed.paths["/test"]["x-path-ext"]).toBeUndefined();
@@ -131,9 +139,13 @@ describe("removeExtensions", () => {
           },
         },
       },
-    };
+    } as any;
 
-    const processed = removeExtensions()(deeplyNested);
+    const processed = removeExtensions()({
+      schema: deeplyNested,
+      file: "/file.json",
+      dereference: async (id) => id,
+    }) as any;
 
     expect(processed.a.b.c["x-deep-ext"]).toBeUndefined();
     expect(processed.a.b.c.d["x-another-ext"]).toBeUndefined();
@@ -144,9 +156,13 @@ describe("removeExtensions", () => {
     const docWithoutExtensions = {
       openapi: "3.1.0",
       info: { title: "API without extensions" },
-    };
+    } as any;
 
-    const processed = removeExtensions()(docWithoutExtensions);
+    const processed = removeExtensions()({
+      schema: docWithoutExtensions,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
 
     expect(processed).toEqual(docWithoutExtensions);
   });
@@ -154,7 +170,11 @@ describe("removeExtensions", () => {
   it("removes extensions based on shouldRemove callback", () => {
     const processed = removeExtensions({
       shouldRemove: (key) => key.startsWith("x-zuplo"),
-    })(baseDoc);
+    })({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
 
     // Should remove x-zuplo extensions
     const removedExtensions = [

package/src/lib/plugins/openapi/{post-processors → processors}/removeExtensions.ts

@@ -1,3 +1,5 @@
+import type { ProcessorArg } from "../../../../config/validators/BuildSchema.js";
+import type { OpenAPIDocument } from "../../../oas/parser/index.js";
 import { type RecordAny, traverse } from "./traverse.js";
 
 interface RemoveExtensionsOptions {
@@ -8,8 +10,8 @@ interface RemoveExtensionsOptions {
 // Remove all `x-` prefixed key/value pairs, or filter by names if provided
 export const removeExtensions =
   ({ keys, shouldRemove }: RemoveExtensionsOptions = {}) =>
-  (doc: RecordAny): RecordAny =>
-    traverse(doc, (spec) => {
+  ({ schema }: ProcessorArg) =>
+    traverse(schema, (spec) => {
       const result: RecordAny = {};
 
       for (const [key, value] of Object.entries(spec)) {
@@ -24,4 +26,4 @@ export const removeExtensions =
         result[key] = value;
       }
       return result;
-    });
+    }) as OpenAPIDocument;

package/src/lib/plugins/openapi/{post-processors → processors}/removeParameters.test.ts

@@ -1,8 +1,8 @@
-import { type OpenAPIV3_1 } from "openapi-types";
 import { describe, expect, it } from "vitest";
+import type { OpenAPIDocument } from "../../../oas/parser/index.js";
 import { removeParameters } from "./removeParameters.js";
 
-const baseDoc: OpenAPIV3_1.Document = {
+const baseDoc: OpenAPIDocument = {
   openapi: "3.1.0",
   info: {
     title: "Test API",
@@ -67,45 +67,67 @@ describe("removeParameters", () => {
   it("removes parameters by name", () => {
     const processed = removeParameters({
       names: ["pathParam", "opParam"],
-    })(baseDoc);
-
-    expect(processed.paths["/test"].parameters).toHaveLength(1);
-    expect(processed.paths["/test"].parameters[0].name).toBe("pathHeader");
-    expect(processed.paths["/test"].get.parameters).toHaveLength(1);
-    expect(processed.paths["/test"].get.parameters[0].name).toBe("opHeader");
+    })({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
+
+    expect(processed.paths?.["/test"]?.parameters).toHaveLength(1);
+    expect(processed.paths?.["/test"]?.parameters?.[0]?.name).toBe(
+      "pathHeader",
+    );
+    expect(processed.paths?.["/test"]?.get?.parameters).toHaveLength(1);
+    expect(processed.paths?.["/test"]?.get?.parameters?.[0]?.name).toBe(
+      "opHeader",
+    );
   });
 
   it("removes parameters by location", () => {
     const processed = removeParameters({
       in: ["header"],
-    })(baseDoc);
-
-    expect(processed.paths["/test"].parameters).toHaveLength(1);
-    expect(processed.paths["/test"].parameters[0].in).toBe("path");
-    expect(processed.paths["/test"].get.parameters).toHaveLength(1);
-    expect(processed.paths["/test"].get.parameters[0].in).toBe("query");
+    })({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
+
+    expect(processed.paths?.["/test"]?.parameters).toHaveLength(1);
+    expect(processed.paths?.["/test"]?.parameters?.[0]?.in).toBe("path");
+    expect(processed.paths?.["/test"]?.get?.parameters).toHaveLength(1);
+    expect(processed.paths?.["/test"]?.get?.parameters?.[0]?.in).toBe("query");
   });
 
   it("removes parameters using shouldRemove callback", () => {
     const processed = removeParameters({
       shouldRemove: ({ parameter }) =>
         parameter.in === "header" && parameter.name.includes("op"),
-    })(baseDoc);
-
-    expect(processed.paths["/test"].parameters).toHaveLength(2);
-    expect(processed.paths["/test"].get.parameters).toHaveLength(1);
-    expect(processed.paths["/test"].get.parameters[0].name).toBe("opParam");
+    })({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
+
+    expect(processed.paths?.["/test"]?.parameters).toHaveLength(2);
+    expect(processed.paths?.["/test"]?.get?.parameters).toHaveLength(1);
+    expect(processed.paths?.["/test"]?.get?.parameters?.[0]?.name).toBe(
+      "opParam",
+    );
   });
 
   it("combines multiple removal criteria", () => {
     const processed = removeParameters({
       in: ["query", "header"],
       shouldRemove: ({ parameter }) => parameter.name === "pathHeader",
-    })(baseDoc);
-
-    expect(processed.paths["/test"].parameters).toHaveLength(1);
-    expect(processed.paths["/test"].parameters[0].name).toBe("pathParam");
-    expect(processed.paths["/test"].get.parameters).toHaveLength(0);
+    })({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
+
+    expect(processed.paths?.["/test"]?.parameters).toHaveLength(1);
+    expect(processed.paths?.["/test"]?.parameters?.[0]?.name).toBe("pathParam");
+    expect(processed.paths?.["/test"]?.get?.parameters).toHaveLength(0);
   });
 
   it("handles missing parameters arrays", () => {
@@ -118,11 +140,15 @@ describe("removeParameters", () => {
           },
         },
       },
-    };
+    } as any;
 
     const processed = removeParameters({
       names: ["someParam"],
-    })(docWithoutParams);
+    })({
+      schema: docWithoutParams,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
 
     expect(processed).toEqual(docWithoutParams);
   });
@@ -130,19 +156,27 @@ describe("removeParameters", () => {
   it("preserves non-parameter properties", () => {
     const processed = removeParameters({
       names: ["globalParam"],
-    })(baseDoc);
+    })({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
 
     expect(processed.openapi).toBe("3.1.0");
-    expect(processed.paths["/test"].get).toBeDefined();
+    expect(processed.paths?.["/test"]?.get).toBeDefined();
   });
 
   it("removes parameters from components", () => {
     const processed = removeParameters({
       in: ["header"],
-    })(baseDoc);
-
-    expect(Object.keys(processed.components.parameters)).toHaveLength(1);
-    expect(processed.components.parameters.commonParam).toBeDefined();
-    expect(processed.components.parameters.headerParam).toBeUndefined();
+    })({
+      schema: baseDoc,
+      file: "/file.json",
+      dereference: async (id) => id,
+    });
+
+    expect(Object.keys(processed.components?.parameters ?? {})).toHaveLength(1);
+    expect(processed.components?.parameters?.commonParam).toBeDefined();
+    expect(processed.components?.parameters?.headerParam).toBeUndefined();
   });
 });