zudoku 0.0.0-ec30b50 → 0.0.0-ed94abf

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

@@ -1,12 +1,10 @@
 import { useMutation } from "@tanstack/react-query";
 import { InfoIcon } from "lucide-react";
-import { Fragment, useEffect, useRef, useTransition } from "react";
+import { Fragment, useEffect, useRef, useState, useTransition } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
 import { PathRenderer } from "../../../components/PathRenderer.js";
 
-import { Label } from "zudoku/ui/Label.js";
-import { RadioGroup, RadioGroupItem } from "zudoku/ui/RadioGroup.js";
 import {
   Select,
   SelectContent,
@@ -15,18 +13,23 @@ import {
   SelectValue,
 } from "zudoku/ui/Select.js";
 import { Textarea } from "zudoku/ui/Textarea.js";
-import { useSelectedServer } from "../../../authentication/state.js";
 import { useApiIdentities } from "../../../components/context/ZudokuContext.js";
-import { Card } from "../../../ui/Card.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
 import { cn } from "../../../util/cn.js";
+import { objectEntries } from "../../../util/objectEntries.js";
+import { useLatest } from "../../../util/useLatest.js";
 import { ColorizedParam } from "../ColorizedParam.js";
-import { Content } from "../SidecarExamples.js";
+import { type Content } from "../SidecarExamples.js";
+import { useSelectedServer } from "../state.js";
 import { createUrl } from "./createUrl.js";
 import ExamplesDropdown from "./ExamplesDropdown.js";
 import { Headers } from "./Headers.js";
+import { IdentityDialog } from "./IdentityDialog.js";
+import IdentitySelector from "./IdentitySelector.js";
 import { PathParams } from "./PathParams.js";
 import { QueryParams } from "./QueryParams.js";
+import { useIdentityStore } from "./rememberedIdentity.js";
+import RequestLoginDialog from "./RequestLoginDialog.js";
 import { ResultPanel } from "./result-panel/ResultPanel.js";
 import SubmitButton from "./SubmitButton.js";
 
@@ -55,8 +58,17 @@ export type PathParam = {
   isRequired?: boolean;
 };
 
+const bodyContentTypeMap = {
+  Plain: "text/plain",
+  JSON: "application/json",
+  XML: "application/xml",
+  YAML: "application/yaml",
+  CSV: "text/csv",
+} as const;
+
 export type PlaygroundForm = {
   body: string;
+  bodyContentType: keyof typeof bodyContentTypeMap;
   queryParams: Array<{
     name: string;
     value: string;
@@ -88,7 +100,7 @@ export type PlaygroundResult = {
 };
 
 export type PlaygroundContentProps = {
-  server: string;
+  server?: string;
   servers?: string[];
   url: string;
   method: string;
@@ -97,6 +109,9 @@ export type PlaygroundContentProps = {
   pathParams?: PathParam[];
   defaultBody?: string;
   examples?: Content;
+  requiresLogin?: boolean;
+  onLogin?: () => void;
+  onSignUp?: () => void;
 };
 
 export const Playground = ({
@@ -109,15 +124,27 @@ export const Playground = ({
   pathParams = [],
   defaultBody = "",
   examples,
+  requiresLogin = false,
+  onLogin,
+  onSignUp,
 }: PlaygroundContentProps) => {
   const { selectedServer, setSelectedServer } = useSelectedServer(
-    servers.map((server) => ({ url: server })),
+    servers.map((url) => ({ url })),
   );
+  const [showSelectIdentity, setShowSelectIdentity] = useState(false);
+  const identities = useApiIdentities();
+  const { setRememberedIdentity, getRememberedIdentity } = useIdentityStore();
   const [, startTransition] = useTransition();
+  const [skipLogin, setSkipLogin] = useState(false);
+  const [showLongRunningWarning, setShowLongRunningWarning] = useState(false);
+  const abortControllerRef = useRef<AbortController | undefined>(undefined);
+  const latestSetRememberedIdentity = useLatest(setRememberedIdentity);
+
   const { register, control, handleSubmit, watch, setValue, ...form } =
     useForm<PlaygroundForm>({
       defaultValues: {
         body: defaultBody,
+        bodyContentType: "JSON",
         queryParams: queryParams
           .map((param) => ({
             name: param.name,
@@ -150,54 +177,68 @@ export const Playground = ({
               active: false,
             },
           ]),
-        identity: NO_IDENTITY,
+        identity: getRememberedIdentity(
+          identities.data?.map((i) => i.id) ?? [],
+        ),
       },
     });
   const formState = watch();
-  const identities = useApiIdentities();
+  const formRef = useRef<HTMLFormElement>(null);
 
-  const setOnce = useRef(false);
   useEffect(() => {
-    if (setOnce.current) return;
-    const firstIdentity = identities.data?.at(0);
-    if (firstIdentity) {
-      setValue("identity", firstIdentity.id);
-      setOnce.current = true;
+    if (formState.identity) {
+      latestSetRememberedIdentity.current(formState.identity);
     }
-  }, [setValue, identities.data]);
-
-  const formRef = useRef<HTMLFormElement>(null);
+  }, [latestSetRememberedIdentity, formState.identity]);
 
   const queryMutation = useMutation({
     mutationFn: async (data: PlaygroundForm) => {
       const start = performance.now();
+
+      const shouldSetContentType = !data.headers.some(
+        (h) => h.active && h.name.toLowerCase() === "content-type",
+      );
+
+      const headers = Object.fromEntries([
+        ...data.headers
+          .filter((h) => h.name && h.active)
+          .map((header) => [header.name, header.value]),
+        ...(shouldSetContentType
+          ? [["content-type", bodyContentTypeMap[data.bodyContentType]]]
+          : []),
+      ]);
+
       const request = new Request(
-        createUrl(selectedServer ?? server, url, data),
+        createUrl(server ?? selectedServer, url, data),
         {
           method: method.toUpperCase(),
-          headers: Object.fromEntries(
-            data.headers
-              .filter((h) => h.name && h.active)
-              .map((header) => [header.name, header.value]),
-          ),
+          headers,
           body: data.body ? data.body : undefined,
         },
       );
 
       if (data.identity !== NO_IDENTITY) {
-        identities.data
+        await identities.data
           ?.find((i) => i.id === data.identity)
           ?.authorizeRequest(request);
       }
+
+      const warningTimeout = setTimeout(
+        () => setShowLongRunningWarning(true),
+        3210,
+      );
+      abortControllerRef.current = new AbortController();
+
       try {
         const response = await fetch(request, {
-          signal: AbortSignal.timeout(5000),
+          signal: abortControllerRef.current.signal,
         });
 
-        const time = performance.now() - start;
+        clearTimeout(warningTimeout);
+        setShowLongRunningWarning(false);
 
+        const time = performance.now() - start;
         const body = await response.text();
-
         const url = new URL(request.url);
 
         return {
@@ -218,6 +259,8 @@ export const Playground = ({
           },
         } satisfies PlaygroundResult;
       } catch (error) {
+        clearTimeout(warningTimeout);
+        setShowLongRunningWarning(false);
         if (error instanceof TypeError) {
           throw new Error(
             "The request failed, possibly due to network issues or CORS policy.",
@@ -229,6 +272,12 @@ export const Playground = ({
     },
   });
 
+  useEffect(() => {
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, []);
+
   const path = (
     <PathRenderer
       path={url}
@@ -263,39 +312,72 @@ export const Playground = ({
 
   const serverSelect = (
     <div className="inline-block opacity-50 hover:opacity-100 transition">
-      {servers && servers.length > 1 ? (
-        <Select
-          onValueChange={(value) => {
-            startTransition(() => setSelectedServer(value));
-          }}
-          value={selectedServer}
-          defaultValue={selectedServer}
-        >
-          <SelectTrigger className="p-0 border-none flex-row-reverse bg-transparent text-xs gap-0.5 h-auto">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {servers.map((s) => (
-              <SelectItem key={s} value={s}>
-                {s.replace(/^https?:\/\//, "")}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+      {server ? (
+        <span>{server.replace(/^https?:\/\//, "").replace(/\/$/, "")}</span>
       ) : (
-        <span>{server.replace(/^https?:\/\//, "")}</span>
+        servers.length > 1 && (
+          <Select
+            onValueChange={(value) => {
+              startTransition(() => setSelectedServer(value));
+            }}
+            value={selectedServer}
+            defaultValue={selectedServer}
+          >
+            <SelectTrigger className="p-0 border-none flex-row-reverse bg-transparent text-xs gap-0.5 h-auto translate-y-[4px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {servers.map((s) => (
+                <SelectItem key={s} value={s}>
+                  {s.replace(/^https?:\/\//, "").replace(/\/$/, "")}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )
       )}
     </div>
   );
 
+  const showLogin = requiresLogin && !skipLogin;
+  const isBodySupported = ["POST", "PUT", "PATCH", "DELETE"].includes(
+    method.toUpperCase(),
+  );
+
   return (
     <FormProvider
       {...{ register, control, handleSubmit, watch, setValue, ...form }}
     >
       <form
-        onSubmit={handleSubmit((data) => queryMutation.mutateAsync(data))}
+        onSubmit={handleSubmit((data) => {
+          if (identities.data?.length === 0 || data.identity) {
+            queryMutation.mutate(data);
+          } else {
+            setShowSelectIdentity(true);
+          }
+        })}
         ref={formRef}
+        className="relative"
       >
+        <IdentityDialog
+          identities={identities.data ?? []}
+          open={showSelectIdentity}
+          onOpenChange={setShowSelectIdentity}
+          onSubmit={({ rememberedIdentity, identity }) => {
+            if (rememberedIdentity) {
+              setValue("identity", identity ?? NO_IDENTITY);
+            }
+            setShowSelectIdentity(false);
+            queryMutation.mutate({ ...formState, identity });
+          }}
+        />
+        <RequestLoginDialog
+          open={showLogin}
+          setOpen={(open) => setSkipLogin(!open)}
+          onSignUp={onSignUp}
+          onLogin={onLogin}
+        />
+
         <div className="grid grid-cols-2 text-sm h-full">
           <div className="flex flex-col gap-4 p-4 after:bg-muted-foreground/20 relative after:absolute after:w-px after:inset-0 after:left-auto">
             <div className="flex gap-2 items-stretch">
@@ -303,7 +385,7 @@ export const Playground = ({
                 <div className="border-r p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono flex items-center">
                   {method.toUpperCase()}
                 </div>
-                <div className="items-center p-2 font-mono text-xs break-words">
+                <div className="items-center px-2 py-0.5 font-mono text-xs break-all leading-6">
                   {serverSelect}
                   {path}
                   {urlQueryParams.length > 0 ? "?" : ""}
@@ -314,7 +396,7 @@ export const Playground = ({
               <SubmitButton
                 identities={identities.data ?? []}
                 formRef={formRef}
-                disabled={form.formState.isSubmitting}
+                disabled={identities.isLoading || form.formState.isSubmitting}
               />
             </div>
             <Tabs defaultValue="parameters">
@@ -339,7 +421,12 @@ export const Playground = ({
                       <div className="w-2 h-2 rounded-full bg-blue-400 ml-2" />
                     )}
                   </TabsTrigger>
-                  <TabsTrigger value="body">Body</TabsTrigger>
+                  <TabsTrigger value="body">
+                    Body
+                    {formState.body && (
+                      <div className="w-2 h-2 rounded-full bg-blue-400 ml-2" />
+                    )}
+                  </TabsTrigger>
                 </TabsList>
               </div>
               <TabsContent value="headers">
@@ -349,7 +436,7 @@ export const Playground = ({
                 {pathParams.length > 0 && (
                   <div className="flex flex-col gap-4 my-4">
                     <span className="font-semibold">Path Parameters</span>
-                    <PathParams control={control} />
+                    <PathParams url={url} control={control} />
                   </div>
                 )}
                 <div className="flex flex-col gap-4 my-4">
@@ -373,31 +460,58 @@ export const Playground = ({
                 <Textarea
                   {...register("body")}
                   className={cn(
-                    "border w-full rounded-lg p-2 bg-muted h-40 font-mono",
-                    !["POST", "PUT", "PATCH", "DELETE"].includes(
-                      method.toUpperCase(),
-                    ) && "h-20",
+                    "border w-full rounded-lg bg-muted/40 p-2 h-64 font-mono text-[13px]",
+                    !isBodySupported && "h-20 bg-muted",
                   )}
                   placeholder={
-                    !["POST", "PUT", "PATCH", "DELETE"].includes(
-                      method.toUpperCase(),
-                    )
+                    !isBodySupported
                       ? "This request does not support a body"
                       : undefined
                   }
-                  disabled={
-                    !["POST", "PUT", "PATCH", "DELETE"].includes(
-                      method.toUpperCase(),
-                    )
-                  }
+                  disabled={!isBodySupported}
                 />
-                {examples && (
-                  <ExamplesDropdown
-                    examples={examples}
-                    onSelect={(example) =>
-                      setValue("body", JSON.stringify(example.value, null, 2))
-                    }
-                  />
+                {isBodySupported && (
+                  <div className="flex items-center gap-2 mt-2 justify-between">
+                    <Select
+                      value={formState.bodyContentType}
+                      onValueChange={(value) =>
+                        setValue(
+                          "bodyContentType",
+                          value as keyof typeof bodyContentTypeMap,
+                        )
+                      }
+                    >
+                      <SelectTrigger className="w-[100px]">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {Object.keys(bodyContentTypeMap).map((format) => (
+                          <SelectItem key={format} value={format}>
+                            {format}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    {examples && examples.length > 0 && (
+                      <ExamplesDropdown
+                        examples={examples}
+                        onSelect={(example, mediaType) => {
+                          setValue(
+                            "body",
+                            JSON.stringify(example.value, null, 2),
+                          );
+
+                          const format = objectEntries(bodyContentTypeMap).find(
+                            ([_, contentType]) => contentType === mediaType,
+                          )?.[0];
+
+                          if (format) {
+                            setValue("bodyContentType", format);
+                          }
+                        }}
+                      />
+                    )}
+                  </div>
                 )}
               </TabsContent>
               <TabsContent value="auth">
@@ -412,43 +526,11 @@ export const Playground = ({
                     </Alert>
                   )}
                   <div className="flex flex-col items-center gap-2">
-                    <Card className="w-full overflow-hidden">
-                      <RadioGroup
-                        onValueChange={(value) => setValue("identity", value)}
-                        value={formState.identity}
-                        defaultValue={formState.identity}
-                        className="gap-0"
-                        disabled={identities.data?.length === 0}
-                      >
-                        <Label
-                          className="h-12 border-b items-center flex p-4 cursor-pointer hover:bg-accent"
-                          htmlFor="none"
-                        >
-                          <RadioGroupItem value={NO_IDENTITY} id="none">
-                            None
-                          </RadioGroupItem>
-                          <Label htmlFor="none" className="ml-2">
-                            None
-                          </Label>
-                        </Label>
-                        {identities.data?.map((identity) => (
-                          <Label
-                            key={identity.id}
-                            className="h-12 border-b items-center flex p-4 cursor-pointer hover:bg-accent"
-                          >
-                            <RadioGroupItem
-                              value={identity.id}
-                              id={identity.id}
-                            >
-                              {identity.label}
-                            </RadioGroupItem>
-                            <Label htmlFor={identity.id} className="ml-2">
-                              {identity.label}
-                            </Label>
-                          </Label>
-                        ))}
-                      </RadioGroup>
-                    </Card>
+                    <IdentitySelector
+                      value={formState.identity}
+                      identities={identities.data ?? []}
+                      setValue={(value) => setValue("identity", value)}
+                    />
                   </div>
                 </div>
               </TabsContent>
@@ -459,6 +541,13 @@ export const Playground = ({
             showPathParamsWarning={formState.pathParams.some(
               (p) => p.value === "",
             )}
+            showLongRunningWarning={showLongRunningWarning}
+            onCancel={() => {
+              abortControllerRef.current?.abort(
+                "Request cancelled by the user",
+              );
+              setShowLongRunningWarning(false);
+            }}
           />
         </div>
       </form>

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

@@ -43,7 +43,6 @@ export const QueryParams = ({
                     name={`queryParams.${i}.active`}
                     render={({ field }) => (
                       <Checkbox
-                        variant="outline"
                         id={`queryParams.${i}.active`}
                         className="mr-2"
                         checked={field.value}

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

@@ -0,0 +1,51 @@
+import { Button } from "zudoku/ui/Button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from "zudoku/ui/Dialog.js";
+
+const RequestLoginDialog = ({
+  open,
+  setOpen,
+  onSignUp,
+  onLogin,
+}: {
+  open: boolean;
+  onSignUp?: () => void;
+  onLogin?: () => void;
+  setOpen: (open: boolean) => void;
+}) => {
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogTitle>Welcome to the Playground!</DialogTitle>
+        <DialogDescription>
+          The Playground is a tool for developers to test and explore our APIs.
+          To use the Playground, you need to login.
+        </DialogDescription>
+        <DialogFooter className="flex gap-2 sm:justify-between">
+          <Button type="button" variant="ghost" onClick={() => setOpen(false)}>
+            Skip
+          </Button>
+          <div className="flex gap-2">
+            {onSignUp && (
+              <Button type="button" variant="outline" onClick={onSignUp}>
+                Sign Up
+              </Button>
+            )}
+            {onLogin && (
+              <Button type="button" variant="default" onClick={onLogin}>
+                Login
+              </Button>
+            )}
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default RequestLoginDialog;

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

@@ -40,7 +40,7 @@ export const RequestTab = ({
               {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>

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,9 +125,10 @@ 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]" />
@@ -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 && (