zudoku 0.0.0-e614aaa → 0.0.0-e64b729

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";
 
@@ -49,21 +52,34 @@ export type QueryParam = {
   enum?: string[];
   type?: string;
 };
+
 export type PathParam = {
   name: string;
   defaultValue?: string;
   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;
     active: boolean;
     enum?: string[];
   }>;
-  pathParams: Array<{ name: string; value: string }>;
+  pathParams: Array<{
+    name: string;
+    value: string;
+  }>;
   headers: Array<{
     name: string;
     value: string;
@@ -97,6 +113,9 @@ export type PlaygroundContentProps = {
   pathParams?: PathParam[];
   defaultBody?: string;
   examples?: Content;
+  requiresLogin?: boolean;
+  onLogin?: () => void;
+  onSignUp?: () => void;
 };
 
 export const Playground = ({
@@ -109,15 +128,27 @@ export const Playground = ({
   pathParams = [],
   defaultBody = "",
   examples,
+  requiresLogin = false,
+  onLogin,
+  onSignUp,
 }: PlaygroundContentProps) => {
   const { selectedServer, setSelectedServer } = useSelectedServer(
     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,36 +181,43 @@ 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({
+    gcTime: 0,
     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(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,
         },
       );
@@ -189,15 +227,24 @@ export const Playground = ({
           ?.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),
+          cache: "no-store",
+          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 +265,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 +278,12 @@ export const Playground = ({
     },
   });
 
+  useEffect(() => {
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, []);
+
   const path = (
     <PathRenderer
       path={url}
@@ -262,9 +317,9 @@ export const Playground = ({
     ));
 
   const serverSelect = (
-    <div className="inline-block opacity-50 hover:opacity-100 transition translate-y-[4px]">
+    <div className="inline-block opacity-50 hover:opacity-100 transition">
       {server ? (
-        <span>{server.replace(/^https?:\/\//, "")}</span>
+        <span>{server.replace(/^https?:\/\//, "").replace(/\/$/, "")}</span>
       ) : (
         servers.length > 1 && (
           <Select
@@ -274,13 +329,13 @@ export const Playground = ({
             value={selectedServer}
             defaultValue={selectedServer}
           >
-            <SelectTrigger className="p-0 border-none flex-row-reverse bg-transparent text-xs gap-0.5 h-auto">
+            <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?:\/\//, "")}
+                  {s.replace(/^https?:\/\//, "").replace(/\/$/, "")}
                 </SelectItem>
               ))}
             </SelectContent>
@@ -290,16 +345,47 @@ export const Playground = ({
     </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 flex-col gap-4 p-4 after:bg-muted-foreground/20 relative after:absolute after:w-px after:inset-0 after:start-auto">
             <div className="flex gap-2 items-stretch">
               <div className="flex flex-1 items-center w-full border rounded-md">
                 <div className="border-r p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono flex items-center">
@@ -316,7 +402,7 @@ export const Playground = ({
               <SubmitButton
                 identities={identities.data ?? []}
                 formRef={formRef}
-                disabled={form.formState.isSubmitting}
+                disabled={identities.isLoading || form.formState.isSubmitting}
               />
             </div>
             <Tabs defaultValue="parameters">
@@ -326,22 +412,27 @@ export const Playground = ({
                     Parameters
                     {(formState.pathParams.some((p) => p.value !== "") ||
                       formState.queryParams.some((p) => p.active)) && (
-                      <div className="w-2 h-2 rounded-full bg-blue-400 ml-2" />
+                      <div className="w-2 h-2 rounded-full bg-blue-400 ms-2" />
                     )}
                   </TabsTrigger>
                   <TabsTrigger value="headers">
                     Headers
                     {formState.headers.filter((h) => h.active).length > 0 && (
-                      <div className="w-2 h-2 rounded-full bg-blue-400 ml-2" />
+                      <div className="w-2 h-2 rounded-full bg-blue-400 ms-2" />
                     )}
                   </TabsTrigger>
                   <TabsTrigger value="auth">
                     Auth
                     {formState.identity !== NO_IDENTITY && (
-                      <div className="w-2 h-2 rounded-full bg-blue-400 ml-2" />
+                      <div className="w-2 h-2 rounded-full bg-blue-400 ms-2" />
+                    )}
+                  </TabsTrigger>
+                  <TabsTrigger value="body">
+                    Body
+                    {formState.body && (
+                      <div className="w-2 h-2 rounded-full bg-blue-400 ms-2" />
                     )}
                   </TabsTrigger>
-                  <TabsTrigger value="body">Body</TabsTrigger>
                 </TabsList>
               </div>
               <TabsContent value="headers">
@@ -375,31 +466,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">
@@ -414,43 +532,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>
@@ -461,6 +547,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/PlaygroundDialog.tsx

@@ -41,7 +41,7 @@ const PlaygroundDialog = (props: PlaygroundDialogProps) => {
         {props.children ?? (
           <button
             type="button"
-            className="flex gap-1 items-center px-2 py-1 rounded-md transition text-xs bg-primary  text-primary-foreground shadow-sm hover:bg-primary/80"
+            className="flex gap-1 items-center px-2 py-1 rounded-md transition text-xs bg-primary  text-primary-foreground shadow-xs hover:bg-primary/80"
           >
             Test
             <HeroPlayIcon size={14} />

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

@@ -1,5 +1,5 @@
 import {
-  Control,
+  type Control,
   Controller,
   useFieldArray,
   useFormContext,
@@ -43,9 +43,8 @@ export const QueryParams = ({
                     name={`queryParams.${i}.active`}
                     render={({ field }) => (
                       <Checkbox
-                        variant="outline"
                         id={`queryParams.${i}.active`}
-                        className="mr-2"
+                        className="me-2"
                         checked={field.value}
                         onCheckedChange={field.onChange}
                       />
@@ -61,7 +60,7 @@ export const QueryParams = ({
                           onChange={(e) => {
                             field.onChange(e);
                           }}
-                          className="border-0 font-mono text-xs bg-transparent hover:bg-transparent"
+                          className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
                         />
                       ) : (
                         <InlineInput asChild>
@@ -112,7 +111,7 @@ export const QueryParams = ({
                             field.onChange(e);
                             form.setValue(`queryParams.${i}.active`, true);
                           }}
-                          className="font-mono text-xs border-0 ring-1 ring-ring"
+                          className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
                         />
                       );
                     }}

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/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>
   );