zudoku 0.0.0-f3786a4 → 0.0.0-f3f6db5

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

@@ -3,6 +3,8 @@ import { InfoIcon } from "lucide-react";
 import { Fragment, useEffect, useRef, 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 {
@@ -15,10 +17,7 @@ import {
 import { Textarea } from "zudoku/ui/Textarea.js";
 import { useSelectedServerStore } from "../../../authentication/state.js";
 import { useApiIdentities } from "../../../components/context/ZudokuContext.js";
-import { Spinner } from "../../../components/Spinner.js";
-import { Button } from "../../../ui/Button.js";
-import { Callout } from "../../../ui/Callout.js";
-import { Card, CardContent, CardHeader, CardTitle } from "../../../ui/Card.js";
+import { Card } from "../../../ui/Card.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
 import { cn } from "../../../util/cn.js";
 import { ColorizedParam } from "../ColorizedParam.js";
@@ -28,28 +27,17 @@ import ExamplesDropdown from "./ExamplesDropdown.js";
 import { Headers } from "./Headers.js";
 import { PathParams } from "./PathParams.js";
 import { QueryParams } from "./QueryParams.js";
-import { ResponseTab } from "./ResponseTab.js";
+import { ResultPanel } from "./result-panel/ResultPanel.js";
+import SubmitButton from "./SubmitButton.js";
 
 export const NO_IDENTITY = "__none";
 
-const statusCodeMap: Record<number, string> = {
-  200: "OK",
-  201: "Created",
-  202: "Accepted",
-  204: "No Content",
-  400: "Bad Request",
-  401: "Unauthorized",
-  403: "Forbidden",
-  404: "Not Found",
-  405: "Method Not Allowed",
-  500: "Internal Server Error",
-};
-
 export type Header = {
   name: string;
   defaultValue?: string;
   defaultActive?: boolean;
 };
+
 export type QueryParam = {
   name: string;
   defaultValue?: string;
@@ -81,6 +69,20 @@ export type PlaygroundForm = {
   identity?: string;
 };
 
+export type PlaygroundResult = {
+  status: number;
+  headers: Array<[string, string]>;
+  size: number;
+  body: string;
+  time: number;
+  request: {
+    method: string;
+    url: string;
+    headers: Array<[string, string]>;
+    body?: string;
+  };
+};
+
 export type PlaygroundContentProps = {
   server: string;
   servers?: string[];
@@ -158,20 +160,23 @@ export const Playground = ({
     }
   }, [setValue, identities.data]);
 
+  const formRef = useRef<HTMLFormElement>(null);
+
   const queryMutation = useMutation({
     mutationFn: async (data: PlaygroundForm) => {
-      const requestUrl = createUrl(selectedServer ?? server, url, data);
       const start = performance.now();
-
-      const request = new Request(requestUrl, {
-        method: method.toUpperCase(),
-        headers: Object.fromEntries(
-          data.headers
-            .filter((h) => h.name && h.active)
-            .map((header) => [header.name, header.value]),
-        ),
-        body: data.body ? data.body : undefined,
-      });
+      const request = new Request(
+        createUrl(selectedServer ?? server, url, data),
+        {
+          method: method.toUpperCase(),
+          headers: Object.fromEntries(
+            data.headers
+              .filter((h) => h.name && h.active)
+              .map((header) => [header.name, header.value]),
+          ),
+          body: data.body ? data.body : undefined,
+        },
+      );
 
       if (data.identity !== NO_IDENTITY) {
         identities.data
@@ -187,13 +192,25 @@ export const Playground = ({
 
         const body = await response.text();
 
+        const url = new URL(request.url);
+
         return {
           status: response.status,
-          headers: response.headers,
+          headers: Array.from(response.headers.entries()),
           size: body.length,
           body,
           time,
-        };
+          request: {
+            method: request.method.toUpperCase(),
+            url: request.url,
+            headers: [
+              ["Host", url.host],
+              ["User-Agent", "Zudoku Playground"],
+              ...Array.from(request.headers.entries()),
+            ],
+            body: data.body ? data.body : undefined,
+          },
+        } satisfies PlaygroundResult;
       } catch (error) {
         if (error instanceof TypeError) {
           throw new Error(
@@ -206,38 +223,27 @@ export const Playground = ({
     },
   });
 
-  const path = url.split("/").map((part, i, arr) => {
-    const isPathParam =
-      (part.startsWith("{") && part.endsWith("}")) || part.startsWith(":");
-    const replaced = part.replace(/[:{}]/g, "");
-    const value = formState.pathParams.find((p) => p.name === replaced)?.value;
-
-    const pathParamValue = (
-      <ColorizedParam
-        backgroundOpacity="25%"
-        name={part}
-        slug={part}
-        title={
-          !value
-            ? `Missing value for path parameter \`${replaced}\``
-            : undefined
-        }
-      >
-        {value ? encodeURIComponent(value) : part}
-      </ColorizedParam>
-    );
-
-    return (
-      // eslint-disable-next-line react/no-array-index-key
-      <Fragment key={part + i}>
-        {isPathParam ? pathParamValue : part}
-        {i < arr.length - 1 && "/"}
-        <wbr />
-      </Fragment>
-    );
-  });
+  const path = (
+    <PathRenderer
+      path={url}
+      renderParam={({ name, originalValue, index }) => {
+        const formValue = formState.pathParams.find(
+          (param) => param.name === name,
+        )?.value;
 
-  const headerEntries = Array.from(queryMutation.data?.headers.entries() ?? []);
+        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)
@@ -254,9 +260,7 @@ export const Playground = ({
       {servers && servers.length > 1 ? (
         <Select
           onValueChange={(value) => {
-            startTransition(() => {
-              setSelectedServer(value);
-            });
+            startTransition(() => setSelectedServer(value));
           }}
           value={selectedServer}
           defaultValue={selectedServer}
@@ -282,24 +286,30 @@ export const Playground = ({
     <FormProvider
       {...{ register, control, handleSubmit, watch, setValue, ...form }}
     >
-      <form onSubmit={handleSubmit((data) => queryMutation.mutateAsync(data))}>
-        <div className="grid grid-cols-[8fr_7fr] text-sm h-full">
+      <form
+        onSubmit={handleSubmit((data) => queryMutation.mutateAsync(data))}
+        ref={formRef}
+      >
+        <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">
               <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">
                   {method.toUpperCase()}
                 </div>
-                <div className="flex items-center flex-wrap p-2 font-mono text-xs">
+                <div className="items-center p-2 font-mono text-xs break-words">
                   {serverSelect}
                   {path}
                   {urlQueryParams.length > 0 ? "?" : ""}
                   {urlQueryParams}
                 </div>
               </div>
-              <Button type="submit" className="h-auto flex gap-1">
-                Send
-              </Button>
+
+              <SubmitButton
+                identities={identities.data ?? []}
+                formRef={formRef}
+                disabled={form.formState.isSubmitting}
+              />
             </div>
             <Tabs defaultValue="parameters">
               <div className="flex flex-wrap gap-1 justify-between">
@@ -438,84 +448,12 @@ export const Playground = ({
               </TabsContent>
             </Tabs>
           </div>
-          <div className="min-w-0 p-8 bg-muted/70">
-            {queryMutation.error ? (
-              <div className="flex flex-col gap-2">
-                {formState.pathParams.some((p) => p.value === "") && (
-                  <Callout type="caution">
-                    Some path parameters are missing values. Please fill them in
-                    to ensure the request is sent correctly.
-                  </Callout>
-                )}
-                <Card>
-                  <CardHeader>
-                    <CardTitle>Request failed</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    Error:{" "}
-                    {queryMutation.error.message ||
-                      String(queryMutation.error) ||
-                      "Unexpected error"}
-                  </CardContent>
-                </Card>
-              </div>
-            ) : queryMutation.data ? (
-              <div className="flex flex-col gap-2">
-                <div className="flex gap-2">
-                  <div className="flex text-xs gap-6">
-                    <div>
-                      Status: {queryMutation.data.status}{" "}
-                      {statusCodeMap[queryMutation.data.status] ?? ""}
-                    </div>
-                    <div>Time: {queryMutation.data.time.toFixed(0)}ms</div>
-                    <div>Size: {queryMutation.data.size} B</div>
-                  </div>
-                </div>
-                <Tabs defaultValue="response">
-                  <TabsList>
-                    <TabsTrigger value="response">Response</TabsTrigger>
-                    <TabsTrigger value="headers">
-                      {headerEntries.length
-                        ? `Headers (${headerEntries.length})`
-                        : "No headers"}
-                    </TabsTrigger>
-                  </TabsList>
-
-                  <TabsContent value="response">
-                    <ResponseTab
-                      headers={queryMutation.data.headers}
-                      body={queryMutation.data.body}
-                    />
-                  </TabsContent>
-                  <TabsContent value="headers">
-                    <Card
-                      // playground dialog has h-5/6 ≈ 83.333vh
-                      className="max-h-[calc(83.333vh-140px)] overflow-y-auto grid grid-cols-2 w-full gap-2.5 font-mono text-xs shadow-none p-4"
-                    >
-                      <div className="font-semibold">Key</div>
-                      <div className="font-semibold">Value</div>
-                      {headerEntries.map(([key, value]) => (
-                        <Fragment key={key}>
-                          <div>{key}</div>
-                          <div className="break-words">{value}</div>
-                        </Fragment>
-                      ))}
-                    </Card>
-                  </TabsContent>
-                </Tabs>
-              </div>
-            ) : (
-              <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>
-              </div>
+          <ResultPanel
+            queryMutation={queryMutation}
+            showPathParamsWarning={formState.pathParams.some(
+              (p) => p.value === "",
             )}
-          </div>
+          />
         </div>
       </form>
     </FormProvider>

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

@@ -47,7 +47,7 @@ const PlaygroundDialog = (props: PlaygroundDialogProps) => {
       </DialogTrigger>
 
       <DialogContent
-        className="max-w-screen-xl w-full h-5/6 overflow-auto p-0"
+        className="max-w-screen-xl w-full h-5/6 overflow-hidden p-0"
         aria-describedby={undefined}
       >
         <VisuallyHidden>

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

@@ -9,6 +9,7 @@ import { Checkbox } from "zudoku/ui/Checkbox.js";
 import { Autocomplete } from "../../../components/Autocomplete.js";
 import { Input } from "../../../ui/Input.js";
 import { InlineInput } from "./InlineInput.js";
+import ParamsGrid from "./ParamsGrid.js";
 import { type PlaygroundForm, type QueryParam } from "./Playground.js";
 
 export const QueryParams = ({
@@ -34,51 +35,51 @@ export const QueryParams = ({
             (param) => param.name === field.name,
           );
           return (
-            <div
-              key={field.id}
-              className="hover:bg-accent/40 grid grid-cols-[min-content_1fr_1fr] gap-2 items-center px-3"
-            >
-              <Controller
-                control={control}
-                name={`queryParams.${i}.active`}
-                render={({ field }) => (
-                  <Checkbox
-                    variant="outline"
-                    id={`queryParams.${i}.active`}
-                    className="mr-2"
-                    checked={field.value}
-                    onCheckedChange={field.onChange}
-                  />
-                )}
-              />
-              <Controller
-                control={control}
-                render={({ field }) =>
-                  !requiredFields[i] ? (
-                    <Autocomplete
-                      value={field.value}
-                      options={queryParams.map((param) => param.name)}
-                      onChange={(e) => {
-                        field.onChange(e);
-                      }}
-                      className="border-0 font-mono text-xs bg-transparent hover:bg-transparent"
+            <ParamsGrid key={field.id}>
+              <div className="flex items-center">
+                <Controller
+                  control={control}
+                  name={`queryParams.${i}.active`}
+                  render={({ field }) => (
+                    <Checkbox
+                      variant="outline"
+                      id={`queryParams.${i}.active`}
+                      className="mr-2"
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
                     />
-                  ) : (
-                    <InlineInput asChild>
-                      <label
-                        className="flex items-center cursor-pointer gap-1"
-                        htmlFor={`queryParams.${i}.active`}
-                        title={requiredFields[i] ? "Required field" : undefined}
-                      >
-                        {field.value}
-                        {requiredFields[i] && <sup>&nbsp;*</sup>}
-                      </label>
-                    </InlineInput>
-                  )
-                }
-                name={`queryParams.${i}.name`}
-              />
-
+                  )}
+                />
+                <Controller
+                  control={control}
+                  render={({ field }) =>
+                    !requiredFields[i] ? (
+                      <Autocomplete
+                        value={field.value}
+                        options={queryParams.map((param) => param.name)}
+                        onChange={(e) => {
+                          field.onChange(e);
+                        }}
+                        className="border-0 font-mono text-xs bg-transparent hover:bg-transparent"
+                      />
+                    ) : (
+                      <InlineInput asChild>
+                        <label
+                          className="flex items-center cursor-pointer gap-1"
+                          htmlFor={`queryParams.${i}.active`}
+                          title={
+                            requiredFields[i] ? "Required field" : undefined
+                          }
+                        >
+                          {field.value}
+                          {requiredFields[i] && <sup>&nbsp;*</sup>}
+                        </label>
+                      </InlineInput>
+                    )
+                  }
+                  name={`queryParams.${i}.name`}
+                />
+              </div>
               <div className="flex justify-between items-center">
                 <Controller
                   control={control}
@@ -117,7 +118,7 @@ export const QueryParams = ({
                   name={`queryParams.${i}.value`}
                 />
               </div>
-            </div>
+            </ParamsGrid>
           );
         })}
       </div>

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

@@ -0,0 +1,75 @@
+import { ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { Button } from "zudoku/ui/Button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "zudoku/ui/DropdownMenu.js";
+import { RadioGroup, RadioGroupItem } from "zudoku/ui/RadioGroup.js";
+import { ApiIdentity } from "../../../core/ZudokuContext.js";
+import { NO_IDENTITY } from "./Playground.js";
+
+const SubmitButton = ({
+  identities,
+  formRef,
+  disabled,
+}: {
+  identities: ApiIdentity[];
+  formRef?: React.RefObject<HTMLFormElement | null>;
+  disabled?: boolean;
+}) => {
+  const { setValue } = useFormContext();
+  const [dropdownValue, setDropdownValue] = useState<string | undefined>();
+  if (identities.length === 0) {
+    return <Button disabled={disabled}>Send</Button>;
+  }
+  return (
+    <div className="flex">
+      <Button
+        className="rounded-r-none inset-shadow-sm"
+        disabled={disabled}
+        onClick={() => formRef?.current?.requestSubmit()}
+      >
+        Send
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            disabled={disabled}
+            className="rounded-l-none border-l border-border/40 inset-shadow-sm 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>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+export default SubmitButton;

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

@@ -0,0 +1,73 @@
+import { ChevronRightIcon } from "lucide-react";
+import { Fragment } from "react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../../../../ui/Collapsible.js";
+import { cn } from "../../../../util/cn.js";
+import { methodForColor } from "../../util/methodToColor.js";
+
+export const RequestTab = ({
+  method,
+  url,
+  headers,
+  body,
+}: {
+  method: string;
+  url: string;
+  headers: Array<[string, string]>;
+  body?: string;
+}) => {
+  return (
+    <div className="flex flex-col gap-2 font-mono text-xs">
+      <div className="gap-2 p-2 bg-muted rounded-md">
+        <span className={cn(methodForColor(method), "font-semibold")}>
+          {method}
+        </span>
+        &nbsp;
+        <span className="break-all">{url}</span>&nbsp;
+        <span className="text-muted-foreground">HTTP/1.1</span>
+      </div>
+      <div className="mx-1.5 flex flex-col gap-3">
+        <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">
+              {headers.map(([key, value]) => (
+                <Fragment key={key}>
+                  <div className="text-primary">{key}</div>
+                  <div className="break-words">{value}</div>
+                </Fragment>
+              ))}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+
+        <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">Body</span>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="pl-0 pt-2">
+              <div
+                className={cn(
+                  "whitespace-pre-wrap break-all bg-muted p-2 rounded-md",
+                  !body && "text-muted-foreground",
+                )}
+              >
+                {body ?? "Empty body"}
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+    </div>
+  );
+};
+
+export default RequestTab;