zudoku 0.26.1 → 0.28.0

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

@@ -12,6 +12,7 @@ import { Checkbox } from "zudoku/ui/Checkbox.js";
 import { Autocomplete } from "../../../components/Autocomplete.js";
 import { Button } from "../../../ui/Button.js";
 import { Input } from "../../../ui/Input.js";
+import ParamsGrid from "./ParamsGrid.js";
 import { type PlaygroundForm } from "./Playground.js";
 
 const headerOptions = Object.freeze([
@@ -77,56 +78,55 @@ export const Headers = ({
 
   return (
     <div className="flex flex-col gap-2">
-      <Card className="flex flex-col gap-2 overflow-hidden">
-        <table className="w-full">
-          <tbody>
-            {fields.map((header, i) => (
-              <tr
-                key={header.id}
-                className="group has-[:focus]:bg-muted/50 hover:bg-muted/50"
-              >
-                <td className="flex gap-2 items-center pl-3">
-                  <Controller
-                    control={control}
-                    name={`headers.${i}.active`}
-                    render={({ field }) => (
-                      <Checkbox
-                        variant="outline"
-                        id={`headers.${i}.active`}
-                        checked={field.value}
-                        onCheckedChange={(checked) => {
-                          field.onChange(checked);
-                        }}
-                      />
-                    )}
-                  />
-                  <Controller
-                    control={control}
-                    name={`headers.${i}.name`}
-                    render={({ field }) => (
-                      <Autocomplete
-                        {...field}
-                        placeholder="Name"
-                        className="border-0 shadow-none bg-transparent text-xs font-mono"
-                        options={headerOptions}
-                        onEnterPress={() => handleHeaderEnter(i)}
-                        onChange={(e) => {
-                          field.onChange(e);
-                          setValue(`headers.${i}.active`, true);
-                        }}
-                        ref={(el) => {
-                          nameRefs.current[i] = el;
-                        }}
-                      />
-                    )}
-                  />
-                </td>
-                <td>
-                  <div className="flex items-center gap-2">
+      <Card className="overflow-hidden">
+        <ParamsGrid>
+          {fields.map((header, i) => (
+            <div key={i} className="group grid col-span-full grid-cols-subgrid">
+              <div className="flex items-center gap-2 ">
+                <Controller
+                  control={control}
+                  name={`headers.${i}.active`}
+                  render={({ field }) => (
+                    <Checkbox
+                      variant="outline"
+                      id={`headers.${i}.active`}
+                      checked={field.value}
+                      onCheckedChange={(checked) => {
+                        field.onChange(checked);
+                      }}
+                    />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={`headers.${i}.name`}
+                  render={({ field }) => (
+                    <Autocomplete
+                      {...field}
+                      placeholder="Name"
+                      className="border-0 shadow-none bg-transparent text-xs font-mono"
+                      options={headerOptions}
+                      onEnterPress={() => handleHeaderEnter(i)}
+                      onChange={(e) => {
+                        field.onChange(e);
+                        setValue(`headers.${i}.active`, true);
+                      }}
+                      ref={(el) => {
+                        nameRefs.current[i] = el;
+                      }}
+                    />
+                  )}
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <Controller
+                  control={control}
+                  name={`headers.${i}.value`}
+                  render={({ field }) => (
                     <Input
                       placeholder="Value"
-                      className="w-full border-0 shadow-none text-xs font-mono"
-                      {...register(`headers.${i}.value`)}
+                      className="w-full border-0 shadow-none text-xs font-mono focus-visible:ring-0"
+                      {...field}
                       ref={(el) => {
                         valueRefs.current[i] = el;
                       }}
@@ -137,23 +137,23 @@ export const Headers = ({
                       }}
                       autoComplete="off"
                     />
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      className="text-muted-foreground opacity-0 group-hover:opacity-100"
-                      onClick={() => {
-                        remove(i);
-                      }}
-                      type="button"
-                    >
-                      <XIcon size={16} />
-                    </Button>
-                  </div>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+                  )}
+                />
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="text-muted-foreground opacity-0 group-hover:opacity-100 rounded-full w-8 h-7"
+                  onClick={() => {
+                    remove(i);
+                  }}
+                  type="button"
+                >
+                  <XIcon size={16} />
+                </Button>
+              </div>
+            </div>
+          ))}
+        </ParamsGrid>
       </Card>
       <div className="text-end">
         <Button

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

@@ -0,0 +1,8 @@
+import createVariantComponent from "../../../util/createVariantComponent.js";
+
+const ParamsGrid = createVariantComponent(
+  "div",
+  "hover:bg-accent/40 grid grid-cols-[2fr_3fr] gap-2 items-center px-3",
+);
+
+export default ParamsGrid;

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

@@ -1,31 +1,10 @@
-import { EraserIcon } from "lucide-react";
 import { Control, Controller, useFieldArray } from "react-hook-form";
 import { Card } from "zudoku/ui/Card.js";
-import { Button } from "../../../ui/Button.js";
 import { Input } from "../../../ui/Input.js";
-import { cn } from "../../../util/cn.js";
-import { ColorizedParam, useParamColor } from "../ColorizedParam.js";
+import { ColorizedParam } from "../ColorizedParam.js";
+import ParamsGrid from "./ParamsGrid.js";
 import type { PlaygroundForm } from "./Playground.js";
 
-const PathParamLabel = ({ name }: { name: string }) => {
-  const color = useParamColor(name);
-
-  return (
-    <div className="flex items-center">
-      <div
-        className="w-2 h-2 rounded-full"
-        style={{ backgroundColor: `hsl(${color})` }}
-      />
-
-      <ColorizedParam
-        slug={name}
-        name={name}
-        className="font-mono text-xs m-2 px-1"
-      />
-    </div>
-  );
-};
-
 export const PathParams = ({
   control,
 }: {
@@ -38,59 +17,40 @@ export const PathParams = ({
 
   return (
     <Card className="rounded-lg">
-      <table className="w-full">
-        <tbody>
-          {fields.map((part, i) => (
-            <tr key={part.id} className="hover:bg-accent/40">
-              <td className="w-5/12">
-                <Controller
-                  control={control}
-                  name={`pathParams.${i}.value`}
-                  render={() => <PathParamLabel name={part.name} />}
-                />
-              </td>
-              <td className="w-7/12">
-                <div className="flex justify-between items-center">
-                  <Controller
-                    control={control}
-                    name={`pathParams.${i}.value`}
-                    render={({ field }) => (
-                      <Input
-                        {...field}
-                        required
-                        placeholder="Enter value"
-                        className="w-full border-0 shadow-none text-xs font-mono hover:bg-accent"
-                      />
-                    )}
-                  />
-                  <Controller
-                    control={control}
-                    name={`pathParams.${i}.value`}
-                    render={({ field }) => (
-                      <Button
-                        size="icon"
-                        type="button"
-                        variant="ghost"
-                        aria-label="Clear value"
-                        className={cn(
-                          "ms-2 mr-1",
-                          field.value.length === 0
-                            ? "opacity-0 pointer-events-none"
-                            : "opacity-100",
-                        )}
-                        title="Clear value"
-                        onClick={() => field.onChange("")}
-                      >
-                        <EraserIcon size={16} />
-                      </Button>
-                    )}
+      <ParamsGrid>
+        {fields.map((part, i) => (
+          <>
+            <Controller
+              control={control}
+              name={`pathParams.${i}.value`}
+              render={() => (
+                <div>
+                  <ColorizedParam
+                    slug={part.name}
+                    name={part.name}
+                    className="font-mono text-xs px-2"
                   />
                 </div>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+              )}
+            />
+
+            <div className="flex justify-between items-center">
+              <Controller
+                control={control}
+                name={`pathParams.${i}.value`}
+                render={({ field }) => (
+                  <Input
+                    {...field}
+                    required
+                    placeholder="Enter value"
+                    className="w-full border-0 shadow-none text-xs font-mono hover:bg-accent"
+                  />
+                )}
+              />
+            </div>
+          </>
+        ))}
+      </ParamsGrid>
     </Card>
   );
 };

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

@@ -3,6 +3,7 @@ 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 { Label } from "zudoku/ui/Label.js";
 import { RadioGroup, RadioGroupItem } from "zudoku/ui/RadioGroup.js";
 import {
@@ -15,10 +16,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 +26,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 +68,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 +159,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 +191,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(
@@ -237,8 +253,6 @@ export const Playground = ({
     );
   });
 
-  const headerEntries = Array.from(queryMutation.data?.headers.entries() ?? []);
-
   const urlQueryParams = formState.queryParams
     .filter((p) => p.active)
     .map((p, i, arr) => (
@@ -282,24 +296,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="flex items-center flex-wrap p-2 font-mono text-xs break-all">
                   {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 +458,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>