zudoku 0.0.0-f0602bf → 0.0.0-f0b4321

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

@@ -1,10 +1,15 @@
+import { useNProgress } from "@tanem/react-nprogress";
 import { useMutation } from "@tanstack/react-query";
-import { InfoIcon } from "lucide-react";
-import { Fragment, useEffect, useRef, useState, useTransition } from "react";
+import {
+  CheckIcon,
+  CopyIcon,
+  IdCardLanyardIcon,
+  ShapesIcon,
+} from "lucide-react";
+import { useEffect, useMemo, 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 { Button } from "zudoku/ui/Button.js";
+import { Collapsible, CollapsibleContent } from "zudoku/ui/Collapsible.js";
 import {
   Select,
   SelectContent,
@@ -12,26 +17,32 @@ import {
   SelectTrigger,
   SelectValue,
 } from "zudoku/ui/Select.js";
-import { Textarea } from "zudoku/ui/Textarea.js";
+import { TooltipProvider } from "zudoku/ui/Tooltip.js";
 import { useApiIdentities } from "../../../components/context/ZudokuContext.js";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
+import { useHotkey } from "../../../hooks/useHotkey.js";
 import { cn } from "../../../util/cn.js";
-import { objectEntries } from "../../../util/objectEntries.js";
+import { useCopyToClipboard } from "../../../util/useCopyToClipboard.js";
 import { useLatest } from "../../../util/useLatest.js";
-import { ColorizedParam } from "../ColorizedParam.js";
 import { type Content } from "../SidecarExamples.js";
 import { useSelectedServer } from "../state.js";
+import BodyPanel from "./BodyPanel.js";
+import {
+  CollapsibleHeader,
+  CollapsibleHeaderTrigger,
+} from "./CollapsibleHeader.js";
 import { createUrl } from "./createUrl.js";
-import ExamplesDropdown from "./ExamplesDropdown.js";
+import { extractFileName, isBinaryContentType } from "./fileUtils.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 { UrlPath } from "./request-panel/UrlPath.js";
+import { UrlQueryParams } from "./request-panel/UrlQueryParams.js";
 import RequestLoginDialog from "./RequestLoginDialog.js";
 import { ResultPanel } from "./result-panel/ResultPanel.js";
-import SubmitButton from "./SubmitButton.js";
+import { useRememberSkipLoginDialog } from "./useRememberSkipLoginDialog.js";
 
 export const NO_IDENTITY = "__none";
 
@@ -59,17 +70,8 @@ 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;
@@ -95,6 +97,9 @@ export type PlaygroundResult = {
   size: number;
   body: string;
   time: number;
+  isBinary?: boolean;
+  fileName?: string;
+  blob?: Blob;
   request: {
     method: string;
     url: string;
@@ -139,78 +144,82 @@ export const Playground = ({
   const identities = useApiIdentities();
   const { setRememberedIdentity, getRememberedIdentity } = useIdentityStore();
   const [, startTransition] = useTransition();
-  const [skipLogin, setSkipLogin] = useState(false);
+  const { skipLogin, setSkipLogin } = useRememberSkipLoginDialog();
   const [showLongRunningWarning, setShowLongRunningWarning] = useState(false);
   const abortControllerRef = useRef<AbortController | undefined>(undefined);
   const latestSetRememberedIdentity = useLatest(setRememberedIdentity);
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const { label: hotkeyLabel } = useHotkey("meta+enter", () => {
+    formRef.current?.requestSubmit();
+  });
 
   const { register, control, handleSubmit, watch, setValue, ...form } =
     useForm<PlaygroundForm>({
       defaultValues: {
         body: defaultBody,
-        bodyContentType: "JSON",
-        queryParams: queryParams
-          .map((param) => ({
-            name: param.name,
-            value: param.defaultValue ?? "",
-            active: param.defaultActive ?? false,
-            enum: param.enum ?? [],
-          }))
-          .concat([
-            {
-              name: "",
-              value: "",
-              active: false,
-              enum: [],
-            },
-          ]),
+        queryParams:
+          queryParams.length > 0
+            ? queryParams.map((param) => ({
+                name: param.name,
+                value: param.defaultValue ?? "",
+                active: param.defaultActive ?? false,
+                enum: param.enum ?? [],
+              }))
+            : [
+                {
+                  name: "",
+                  value: "",
+                  active: false,
+                  enum: [],
+                },
+              ],
         pathParams: pathParams.map((param) => ({
           name: param.name,
           value: param.defaultValue ?? "",
         })),
-        headers: headers
-          .map((header) => ({
-            name: header.name,
-            value: header.defaultValue ?? "",
-            active: header.defaultActive ?? false,
-          }))
-          .concat([
-            {
-              name: "",
-              value: "",
-              active: false,
-            },
-          ]),
-        identity: getRememberedIdentity(
-          identities.data?.map((i) => i.id) ?? [],
-        ),
+        headers:
+          headers.length > 0
+            ? headers.map((header) => ({
+                name: header.name,
+                value: header.defaultValue ?? "",
+                active: header.defaultActive ?? false,
+              }))
+            : [
+                {
+                  name: "",
+                  value: "",
+                  active: false,
+                },
+              ],
+        identity: getRememberedIdentity([
+          NO_IDENTITY,
+          ...(identities.data?.map((i) => i.id) ?? []),
+        ]),
       },
     });
-  const formState = watch();
-  const formRef = useRef<HTMLFormElement>(null);
+  const identity = watch("identity");
+
+  const authorizationFields = useMemo(
+    () => identities.data?.find((i) => i.id === identity)?.authorizationFields,
+    [identities.data, identity],
+  );
 
   useEffect(() => {
-    if (formState.identity) {
-      latestSetRememberedIdentity.current(formState.identity);
+    if (identity) {
+      latestSetRememberedIdentity.current(identity);
     }
-  }, [latestSetRememberedIdentity, formState.identity]);
+  }, [latestSetRememberedIdentity, 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(
@@ -234,6 +243,10 @@ export const Playground = ({
       );
       abortControllerRef.current = new AbortController();
 
+      abortControllerRef.current.signal.addEventListener("abort", () => {
+        clearTimeout(warningTimeout);
+      });
+
       try {
         const response = await fetch(request, {
           cache: "no-store",
@@ -244,15 +257,34 @@ export const Playground = ({
         setShowLongRunningWarning(false);
 
         const time = performance.now() - start;
-        const body = await response.text();
         const url = new URL(request.url);
+        const responseHeaders = Array.from(response.headers.entries());
+        const contentType = response.headers.get("content-type") || "";
+        const isBinary = isBinaryContentType(contentType);
+
+        let body = "";
+        let blob: Blob | undefined;
+        let fileName: string | undefined;
+
+        if (isBinary) {
+          blob = await response.blob();
+          fileName = extractFileName(responseHeaders, request.url);
+          body = `Binary content (${contentType})`;
+        } else {
+          body = await response.text();
+        }
+
+        const responseSize = response.headers.get("content-length");
 
         return {
           status: response.status,
-          headers: Array.from(response.headers.entries()),
-          size: body.length,
+          headers: responseHeaders,
+          size: responseSize ? parseInt(responseSize) : body.length,
           body,
           time,
+          isBinary,
+          fileName,
+          blob,
           request: {
             method: request.method.toUpperCase(),
             url: request.url,
@@ -278,44 +310,22 @@ export const Playground = ({
     },
   });
 
+  const isRequestAnimating = queryMutation.isPending;
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsAnimating(isRequestAnimating), 100);
+    return () => clearTimeout(timer);
+  }, [isRequestAnimating]);
+
+  const { isFinished, progress } = useNProgress({ isAnimating });
+
   useEffect(() => {
     return () => {
       abortControllerRef.current?.abort();
     };
   }, []);
 
-  const path = (
-    <PathRenderer
-      path={url}
-      renderParam={({ name, originalValue, index }) => {
-        const formValue = formState.pathParams.find(
-          (param) => param.name === name,
-        )?.value;
-
-        return (
-          <ColorizedParam
-            name={name}
-            backgroundOpacity="0"
-            slug={name}
-            onClick={() => form.setFocus(`pathParams.${index}.value`)}
-          >
-            {formValue || originalValue}
-          </ColorizedParam>
-        );
-      }}
-    />
-  );
-
-  const urlQueryParams = formState.queryParams
-    .filter((p) => p.active)
-    .map((p, i, arr) => (
-      <Fragment key={p.name}>
-        {p.name}={encodeURIComponent(p.value).replaceAll("%20", "+")}
-        {i < arr.length - 1 && "&"}
-        <wbr />
-      </Fragment>
-    ));
-
   const serverSelect = (
     <div className="inline-block opacity-50 hover:opacity-100 transition">
       {server ? (
@@ -349,214 +359,169 @@ export const Playground = ({
   const isBodySupported = ["POST", "PUT", "PATCH", "DELETE"].includes(
     method.toUpperCase(),
   );
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
 
   return (
     <FormProvider
       {...{ register, control, handleSubmit, watch, setValue, ...form }}
     >
-      <form
-        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);
+      <TooltipProvider delayDuration={150}>
+        <form
+          ref={formRef}
+          onSubmit={handleSubmit((data) => {
+            if (identities.data?.length === 0 || data.identity) {
+              queryMutation.mutate(data);
+            } else {
+              setShowSelectIdentity(true);
             }
-            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:start-auto">
-            <div className="flex gap-2 items-stretch">
-              <div className="flex flex-1 items-center w-full border rounded-md">
+          })}
+          className="relative"
+        >
+          <IdentityDialog
+            identities={identities.data ?? []}
+            open={showSelectIdentity}
+            onOpenChange={setShowSelectIdentity}
+            onSubmit={({ rememberedIdentity, identity }) => {
+              if (rememberedIdentity) {
+                setValue("identity", identity ?? NO_IDENTITY);
+              }
+              setShowSelectIdentity(false);
+              queryMutation.mutate({ ...form.getValues(), identity });
+            }}
+          />
+          <RequestLoginDialog
+            open={showLogin}
+            setOpen={(open) => setSkipLogin(!open)}
+            onSignUp={onSignUp}
+            onLogin={onLogin}
+          />
+
+          <div className="grid grid-cols-[1fr_1px_1fr] text-sm">
+            <div className="col-span-3 p-4 border-b flex gap-2 items-stretch">
+              <div className="flex flex-1 items-center w-full border rounded-md relative overflow-hidden">
                 <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 px-2 py-0.5 font-mono text-xs break-all leading-6">
-                  {serverSelect}
-                  {path}
-                  {urlQueryParams.length > 0 ? "?" : ""}
-                  {urlQueryParams}
+                <div className="items-center px-2 font-mono text-xs break-all leading-6 relative h-full w-full">
+                  <div className="h-full py-1.5">
+                    {serverSelect}
+                    <UrlPath url={url} />
+                    <UrlQueryParams />
+                  </div>
                 </div>
-              </div>
-
-              <SubmitButton
-                identities={identities.data ?? []}
-                formRef={formRef}
-                disabled={identities.isLoading || form.formState.isSubmitting}
-              />
-            </div>
-            <Tabs defaultValue="parameters">
-              <div className="flex flex-wrap gap-1 justify-between">
-                <TabsList>
-                  <TabsTrigger value="parameters">
-                    Parameters
-                    {(formState.pathParams.some((p) => p.value !== "") ||
-                      formState.queryParams.some((p) => p.active)) && (
-                      <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 ms-2" />
-                    )}
-                  </TabsTrigger>
-                  <TabsTrigger value="auth">
-                    Auth
-                    {formState.identity !== NO_IDENTITY && (
-                      <div className="w-2 h-2 rounded-full bg-blue-400 ms-2" />
+                <div className="px-1">
+                  <Button
+                    type="button"
+                    onClick={() => {
+                      copyToClipboard(
+                        createUrl(
+                          server ?? selectedServer,
+                          url,
+                          form.getValues(),
+                        ).toString(),
+                      );
+                    }}
+                    variant="ghost"
+                    size="icon-xs"
+                    className={cn(
+                      "hover:opacity-100 transition",
+                      isCopied ? "text-emerald-600 opacity-100" : "opacity-50",
                     )}
-                  </TabsTrigger>
-                  <TabsTrigger value="body">
-                    Body
-                    {formState.body && (
-                      <div className="w-2 h-2 rounded-full bg-blue-400 ms-2" />
+                  >
+                    {isCopied ? (
+                      <CheckIcon className="text-green-500" size={14} />
+                    ) : (
+                      <CopyIcon size={14} />
                     )}
-                  </TabsTrigger>
-                </TabsList>
-              </div>
-              <TabsContent value="headers">
-                <Headers control={control} headers={headers} />
-              </TabsContent>
-              <TabsContent value="parameters">
-                {pathParams.length > 0 && (
-                  <div className="flex flex-col gap-4 my-4">
-                    <span className="font-semibold">Path Parameters</span>
-                    <PathParams url={url} control={control} />
-                  </div>
-                )}
-                <div className="flex flex-col gap-4 my-4">
-                  <span className="font-semibold">Query Parameters</span>
-                  <QueryParams control={control} queryParams={queryParams} />
+                  </Button>
                 </div>
-              </TabsContent>
-              <TabsContent value="body">
-                {!["POST", "PUT", "PATCH", "DELETE"].includes(
-                  method.toUpperCase(),
-                ) && (
-                  <Alert className="mb-2">
-                    <InfoIcon className="w-4 h-4" />
-                    <AlertTitle>Body</AlertTitle>
-                    <AlertDescription>
-                      Body is only supported for POST, PUT, PATCH, and DELETE
-                      requests
-                    </AlertDescription>
-                  </Alert>
-                )}
-                <Textarea
-                  {...register("body")}
-                  className={cn(
-                    "border w-full rounded-lg bg-muted/40 p-2 h-64 font-mono text-[13px]",
-                    !isBodySupported && "h-20 bg-muted",
-                  )}
-                  placeholder={
-                    !isBodySupported
-                      ? "This request does not support a body"
-                      : undefined
+              </div>
+
+              <Button
+                type="submit"
+                variant={queryMutation.isPending ? "destructive" : "default"}
+                onClick={(e) => {
+                  if (queryMutation.isPending) {
+                    abortControllerRef.current?.abort(
+                      "Request cancelled by user",
+                    );
+                    e.preventDefault();
                   }
-                  disabled={!isBodySupported}
-                />
-                {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">
-                <div className="flex flex-col gap-4 my-4">
-                  {identities.data?.length === 0 && (
-                    <Alert>
-                      <InfoIcon className="w-4 h-4" />
-                      <AlertTitle>Authentication</AlertTitle>
-                      <AlertDescription>
-                        No identities found. Please create an identity first.
-                      </AlertDescription>
-                    </Alert>
-                  )}
-                  <div className="flex flex-col items-center gap-2">
+                }}
+                className="w-18"
+              >
+                {queryMutation.isPending ? "Cancel" : "Send"}
+              </Button>
+            </div>
+            <div className="relative overflow-y-auto h-[80vh]">
+              {identities.data?.length !== 0 && (
+                <Collapsible defaultOpen>
+                  <CollapsibleHeaderTrigger>
+                    <IdCardLanyardIcon size={16} />
+                    <CollapsibleHeader className="col-span-2">
+                      Authentication
+                    </CollapsibleHeader>
+                  </CollapsibleHeaderTrigger>
+                  <CollapsibleContent className="CollapsibleContent">
                     <IdentitySelector
-                      value={formState.identity}
+                      value={identity}
                       identities={identities.data ?? []}
                       setValue={(value) => setValue("identity", value)}
                     />
-                  </div>
+                  </CollapsibleContent>
+                </Collapsible>
+              )}
+
+              {pathParams.length > 0 && (
+                <Collapsible defaultOpen>
+                  <CollapsibleHeaderTrigger>
+                    <ShapesIcon size={16} />
+                    <CollapsibleHeader className="col-span-2">
+                      Path Parameters
+                    </CollapsibleHeader>
+                  </CollapsibleHeaderTrigger>
+                  <CollapsibleContent className="CollapsibleContent">
+                    <PathParams url={url} control={control} />
+                  </CollapsibleContent>
+                </Collapsible>
+              )}
+
+              <QueryParams control={control} schemaQueryParams={queryParams} />
+
+              <Headers
+                control={control}
+                schemaHeaders={headers}
+                lockedHeaders={authorizationFields?.headers}
+              />
+              {isBodySupported && <BodyPanel content={examples} />}
+            </div>
+            <div className="w-full bg-muted-foreground/20" />
+            <ResultPanel
+              queryMutation={queryMutation}
+              showLongRunningWarning={showLongRunningWarning}
+              isFinished={isFinished}
+              progress={progress}
+              tip={
+                <div className="text-xs w-full">
+                  <span className="text-muted-foreground">
+                    Press{" "}
+                    <kbd className="text-foreground border rounded m-0.5 px-1 py-0.5 capitalize">
+                      {hotkeyLabel.join(" + ")}
+                    </kbd>{" "}
+                    to send a request
+                  </span>
                 </div>
-              </TabsContent>
-            </Tabs>
+              }
+              onCancel={() => {
+                abortControllerRef.current?.abort(
+                  "Request cancelled by the user",
+                );
+                setShowLongRunningWarning(false);
+              }}
+            />
           </div>
-          <ResultPanel
-            queryMutation={queryMutation}
-            showPathParamsWarning={formState.pathParams.some(
-              (p) => p.value === "",
-            )}
-            showLongRunningWarning={showLongRunningWarning}
-            onCancel={() => {
-              abortControllerRef.current?.abort(
-                "Request cancelled by the user",
-              );
-              setShowLongRunningWarning(false);
-            }}
-          />
-        </div>
-      </form>
+        </form>
+      </TooltipProvider>
     </FormProvider>
   );
 };