zudoku 0.3.0-dev.11 → 0.3.0-dev.111

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

@@ -1,7 +1,7 @@
 import { useMutation } from "@tanstack/react-query";
-import { Fragment } from "react";
+import { Fragment, useEffect, useRef } from "react";
 import { FormProvider, useForm } from "react-hook-form";
-import { useApiIdentities } from "../../../components/context/DevPortalProvider.js";
+import { useApiIdentities } from "../../../components/context/ZudokuContext.js";
 import {
   Select,
   SelectContent,
@@ -10,15 +10,16 @@ import {
   SelectValue,
 } from "../../../components/Select.js";
 import { Spinner } from "../../../components/Spinner.js";
-import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
 import { Button } from "../../../ui/Button.js";
 import { Card } from "../../../ui/Card.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
+import { fetchTimeout } from "../../../util/fetchTimeout.js";
 import { ColorizedParam } from "../ColorizedParam.js";
 import { createUrl } from "./createUrl.js";
 import { Headers } from "./Headers.js";
 import { PathParams } from "./PathParams.js";
 import { QueryParams } from "./QueryParams.js";
+import { ResponseTab } from "./ResponseTab.js";
 
 export const NO_IDENTITY = "__none";
 
@@ -36,7 +37,7 @@ function mimeTypeToLanguage(mimeType: string) {
 
   return Object.entries(mimeTypeMapping).find(([mime]) =>
     mimeType.includes(mime),
-  )?.[0][1];
+  )?.[1];
 }
 
 const statusCodeMap: Record<number, string> = {
@@ -54,62 +55,83 @@ const statusCodeMap: Record<number, string> = {
 
 export type Header = {
   name: string;
-  value: string;
+  defaultValue?: string;
 };
 export type QueryParam = {
   name: string;
-  value: string;
-  active: boolean;
-  isRequired: boolean;
+  defaultValue?: string;
+  defaultActive?: boolean;
+  isRequired?: boolean;
 };
 export type PathParam = {
   name: string;
-  value: string;
+  defaultValue?: string;
+  isRequired?: boolean;
 };
 
 export type PlaygroundForm = {
   body: string;
-  queryParams: QueryParam[];
-  pathParams: PathParam[];
-  headers: Header[];
+  queryParams: Array<{ name: string; value: string; active: boolean }>;
+  pathParams: Array<{ name: string; value: string }>;
+  headers: Array<{ name: string; value: string }>;
   identity?: string;
 };
 
 export type PlaygroundContentProps = {
-  host: string;
+  server: string;
   url: string;
   method: string;
   headers?: Header[];
   queryParams?: QueryParam[];
   pathParams?: PathParam[];
-  hasParams: boolean;
+  defaultBody?: string;
 };
 
 export const Playground = ({
-  host,
+  server,
   url,
   method,
-  headers = [{ name: "", value: "" }],
+  headers = [],
   queryParams = [],
   pathParams = [],
-  hasParams,
+  defaultBody = "",
 }: PlaygroundContentProps) => {
-  const { register, control, handleSubmit, watch, ...form } =
+  const { register, control, handleSubmit, watch, setValue, ...form } =
     useForm<PlaygroundForm>({
       defaultValues: {
-        body: "",
-        queryParams,
-        headers,
-        pathParams,
+        body: defaultBody,
+        queryParams: queryParams.map((param) => ({
+          name: param.name,
+          value: param.defaultValue ?? "",
+          active: param.defaultActive ?? false,
+        })),
+        pathParams: pathParams.map((param) => ({
+          name: param.name,
+          value: param.defaultValue ?? "",
+        })),
+        headers: headers.map((header) => ({
+          name: header.name,
+          value: header.defaultValue ?? "",
+        })),
         identity: NO_IDENTITY,
       },
     });
   const formState = watch();
   const identities = useApiIdentities();
 
+  const setOnce = useRef(false);
+  useEffect(() => {
+    if (setOnce.current) return;
+    const firstIdentity = identities.data?.at(0);
+    if (firstIdentity) {
+      setValue("identity", firstIdentity.id);
+      setOnce.current = true;
+    }
+  }, [setValue, identities.data]);
+
   const queryMutation = useMutation({
     mutationFn: async (data: PlaygroundForm) => {
-      const requestUrl = createUrl(host, url, data);
+      const requestUrl = createUrl(server, url, data);
       const start = performance.now();
 
       const request = new Request(requestUrl, {
@@ -126,7 +148,8 @@ export const Playground = ({
           ?.find((i) => i.id === data.identity)
           ?.authorizeRequest(request);
       }
-      const response = await fetch(request);
+      const response = await fetchTimeout(request);
+      const time = performance.now() - start;
 
       const body = await response.text();
 
@@ -135,31 +158,38 @@ export const Playground = ({
         headers: response.headers,
         size: body.length,
         body,
-        time: performance.now() - start,
+        time,
       };
     },
   });
 
-  const path = url.split("/").map((part, i, arr) => (
-    <Fragment key={part}>
-      {part.startsWith("{") && part.endsWith("}") ? (
-        <ColorizedParam
-          name={part}
-          backgroundOpacity="0"
-          slug={part.slice(1, -1)}
-        >
-          {
-            formState.pathParams.find((p) => p.name === part.slice(1, -1))
-              ?.value
-          }
-        </ColorizedParam>
-      ) : (
-        part
-      )}
-      {i < arr.length - 1 && "/"}
-      <wbr />
-    </Fragment>
-  ));
+  const path = url.split("/").map((part, i, arr) => {
+    const isPathParam = part.startsWith("{") && part.endsWith("}");
+    const replaced = part.replace(/[{}]/g, "");
+    const value = formState.pathParams.find((p) => p.name === replaced)?.value;
+
+    const pathParamValue = value ? (
+      <ColorizedParam backgroundOpacity="25%" name={part} slug={part}>
+        {encodeURIComponent(value)}
+      </ColorizedParam>
+    ) : (
+      <span
+        className="underline decoration-wavy decoration-red-500"
+        title={`Missing value for path parameter \`${replaced}\``}
+      >
+        {part}
+      </span>
+    );
+
+    return (
+      // eslint-disable-next-line react/no-array-index-key
+      <Fragment key={part + i}>
+        {isPathParam ? pathParamValue : part}
+        {i < arr.length - 1 && "/"}
+        <wbr />
+      </Fragment>
+    );
+  });
 
   const lang = mimeTypeToLanguage(
     queryMutation.data?.headers.get("Content-Type") ?? "",
@@ -169,20 +199,24 @@ export const Playground = ({
 
   const urlQueryParams = formState.queryParams
     .filter((p) => p.active)
-    .map((p) => (
+    .map((p, i, arr) => (
       <Fragment key={p.name}>
-        {p.name}={p.value}
+        {p.name}={encodeURIComponent(p.value).replaceAll("%20", "+")}
+        {i < arr.length - 1 && "&"}
         <wbr />
       </Fragment>
     ));
+
   return (
-    <FormProvider {...{ register, control, handleSubmit, watch, ...form }}>
+    <FormProvider
+      {...{ register, control, handleSubmit, watch, setValue, ...form }}
+    >
       <form onSubmit={handleSubmit((data) => queryMutation.mutateAsync(data))}>
         <div className="grid grid-cols-2 text-sm h-full">
           <div className="flex flex-col gap-4 p-8 bg-muted/50 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 border-border">
-                <div className="border-r border-border p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono">
+              <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">
                   {method.toUpperCase()}
                 </div>
                 <div className="p-2 font-mono text-xs">
@@ -195,10 +229,12 @@ export const Playground = ({
                 Send
               </Button>
             </div>
-            <Tabs defaultValue={hasParams ? "parameters" : "headers"}>
+            <Tabs
+              defaultValue={pathParams.length > 0 ? "parameters" : "headers"}
+            >
               <div className="flex justify-between">
                 <TabsList>
-                  {hasParams && (
+                  {queryParams.length + pathParams.length > 0 && (
                     <TabsTrigger value="parameters">Parameters</TabsTrigger>
                   )}
                   <TabsTrigger value="headers">
@@ -208,9 +244,11 @@ export const Playground = ({
                   </TabsTrigger>
                   <TabsTrigger
                     value="body"
-                    disabled={["POST", "PUT", "PATCH", "DELETE"].includes(
-                      method.toUpperCase(),
-                    )}
+                    disabled={
+                      !["POST", "PUT", "PATCH", "DELETE"].includes(
+                        method.toUpperCase(),
+                      )
+                    }
                   >
                     Body
                   </TabsTrigger>
@@ -218,7 +256,8 @@ export const Playground = ({
                 <div className="flex gap-2 items-center">
                   Auth:
                   <Select
-                    onValueChange={(value) => form.setValue("identity", value)}
+                    onValueChange={(value) => setValue("identity", value)}
+                    value={formState.identity}
                     defaultValue={formState.identity}
                   >
                     <SelectTrigger className="w-[180px] flex">
@@ -239,32 +278,35 @@ export const Playground = ({
                 <Headers control={control} register={register} />
               </TabsContent>
               <TabsContent value="parameters">
-                <div className="grid grid-cols-[min-content_1fr_1fr_auto]">
-                  {pathParams.length > 0 && (
-                    <div className="font-semibold my-3 col-span-3">
-                      Path Parameters
-                    </div>
-                  )}
-                  <PathParams control={control} register={register} />
-                  {queryParams.length > 0 && (
-                    <span className="font-semibold my-3 col-span-3">
-                      Query Parameters
-                    </span>
-                  )}
-                  <QueryParams control={control} />
-                </div>
+                {pathParams.length > 0 && (
+                  <div className="flex flex-col gap-4 my-4">
+                    <span className="font-semibold">Path Parameters</span>
+                    <PathParams control={control} />
+                  </div>
+                )}
+                {queryParams.length > 0 && (
+                  <div className="flex flex-col gap-4 my-4">
+                    <span className="font-semibold">Query Parameters</span>
+                    <QueryParams control={control} queryParams={queryParams} />
+                  </div>
+                )}
               </TabsContent>
               <TabsContent value="body">
                 <textarea
                   {...register("body")}
-                  className="border border-border w-full rounded p-2 bg-muted h-40"
+                  className="border w-full rounded p-2 bg-muted h-40"
                 />
               </TabsContent>
             </Tabs>
           </div>
           <div className="flex flex-col gap-4 p-8 bg-muted/70">
             {queryMutation.error ? (
-              <div>{queryMutation.error.message}</div>
+              <div>
+                Error:{" "}
+                {queryMutation.error.message ||
+                  String(queryMutation.error) ||
+                  "Unexpected error"}
+              </div>
             ) : queryMutation.data ? (
               <div className="flex flex-col gap-2">
                 <div className="flex gap-2">
@@ -289,14 +331,10 @@ export const Playground = ({
                   </TabsList>
 
                   <TabsContent value="response">
-                    <Card className="shadow-none p-4">
-                      <SyntaxHighlight
-                        language={lang ?? "json"}
-                        noBackground
-                        className="overflow-x-auto "
-                        code={queryMutation.data.body ?? JSON.stringify("")}
-                      />
-                    </Card>
+                    <ResponseTab
+                      headers={queryMutation.data.headers}
+                      body={queryMutation.data.body}
+                    />
                   </TabsContent>
                   <TabsContent value="headers">
                     <Card className="grid grid-cols-2 w-full gap-2.5 font-mono text-xs shadow-none p-4">
@@ -305,7 +343,7 @@ export const Playground = ({
                       {headerEntries.map(([key, value]) => (
                         <Fragment key={key}>
                           <div>{key}</div>
-                          <div>{value}</div>
+                          <div className="break-words">{value}</div>
                         </Fragment>
                       ))}
                     </Card>
@@ -329,3 +367,5 @@ export const Playground = ({
     </FormProvider>
   );
 };
+
+export default Playground;

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

@@ -1,5 +1,6 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { CirclePlayIcon } from "lucide-react";
+import { type PropsWithChildren, useState } from "react";
 import {
   Dialog,
   DialogContent,
@@ -8,14 +9,19 @@ import {
 } from "../../../components/Dialog.js";
 import { Playground, type PlaygroundContentProps } from "./Playground.js";
 
-const PlaygroundDialog = (props: PlaygroundContentProps) => {
+export type PlaygroundDialogProps = PropsWithChildren<PlaygroundContentProps>;
+
+const PlaygroundDialog = (props: PlaygroundDialogProps) => {
+  const [open, setOpen] = useState(false);
   return (
-    <Dialog>
+    <Dialog onOpenChange={(open) => setOpen(open)}>
       <DialogTrigger asChild>
-        <CirclePlayIcon
-          className="cursor-pointer text-primary hover:text-primary/80"
-          size={16}
-        />
+        {props.children ?? (
+          <CirclePlayIcon
+            className="cursor-pointer text-primary hover:text-primary/80"
+            size={16}
+          />
+        )}
       </DialogTrigger>
 
       <DialogContent
@@ -25,7 +31,7 @@ const PlaygroundDialog = (props: PlaygroundContentProps) => {
         <VisuallyHidden>
           <DialogTitle>Playground</DialogTitle>
         </VisuallyHidden>
-        <Playground {...props} />
+        {open && <Playground {...props} />}
       </DialogContent>
     </Dialog>
   );

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

@@ -1,17 +1,26 @@
-import { XIcon } from "lucide-react";
+import { EraserIcon } from "lucide-react";
 import {
   Control,
   Controller,
   useFieldArray,
   useFormContext,
 } from "react-hook-form";
+import { Button } from "../../../ui/Button.js";
+import { Input } from "../../../ui/Input.js";
+import { cn } from "../../../util/cn.js";
 import { InlineInput } from "./InlineInput.js";
-import { PlaygroundForm } from "./Playground.js";
+import {
+  NO_IDENTITY,
+  type PlaygroundForm,
+  type QueryParam,
+} from "./Playground.js";
 
 export const QueryParams = ({
   control,
+  queryParams,
 }: {
   control: Control<PlaygroundForm>;
+  queryParams: QueryParam[];
 }) => {
   const { fields } = useFieldArray<PlaygroundForm>({
     control,
@@ -19,71 +28,103 @@ export const QueryParams = ({
   });
   const form = useFormContext<PlaygroundForm>();
 
-  const requiredFields = form
-    .getValues(`queryParams`)
-    .map((param) => param.isRequired);
-
-  return fields.map((field, i) => (
-    <div
-      key={field.id}
-      className="px-2 grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-accent rounded overflow-hidden group"
-    >
-      <Controller
-        control={control}
-        name={`queryParams.${i}.active`}
-        render={({ field }) => (
-          <input
-            type="checkbox"
-            id={`queryParams.${i}.active`}
-            checked={field.value}
-            onChange={field.onChange}
-          />
-        )}
-      />
+  const requiredFields = queryParams.map((param) => Boolean(param.isRequired));
 
-      <Controller
-        control={control}
-        render={({ field }) => {
-          return (
-            <InlineInput asChild>
-              <label
-                className="flex items-center"
-                htmlFor={`queryParams.${i}.active`}
-                title={requiredFields[i] ? "Required field" : undefined}
-              >
-                {field.value}
-                {requiredFields[i] && <sup className="text-destructive">*</sup>}
-              </label>
-            </InlineInput>
-          );
-        }}
-        name={`queryParams.${i}.name`}
-      />
-      <Controller
-        control={control}
-        render={({ field }) => {
-          return (
-            <InlineInput {...field} placeholder="Value" className="peer" />
-          );
-        }}
-        name={`queryParams.${i}.value`}
-      />
-      <Controller
-        control={control}
-        render={({ field }) => {
-          return (
-            <button
-              className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
-              onClick={() => field.onChange("")}
-            >
-              <XIcon size={16} />
-            </button>
-          );
-        }}
-        name={`queryParams.${i}.value`}
-      />
+  const selectedIdentity = form.watch("identity");
+  const hasSelectedIdentity = selectedIdentity !== NO_IDENTITY;
 
-      <div className="-mx-2 col-span-full border-b border-border"></div>
+  return (
+    <div className="">
+      <table className="w-full [&_td]:border [&_td]:p-1.5 [&_td]:px-2">
+        <tbody>
+          {fields
+            .filter(
+              // TODO remove this hack for Accu or make it more generic
+              (field) => !(hasSelectedIdentity && field.name === "apikey"),
+            )
+            .map((field, i) => (
+              <tr key={field.id} className="hover:bg-accent/40">
+                <td className="text-center">
+                  <Controller
+                    control={control}
+                    name={`queryParams.${i}.active`}
+                    render={({ field }) => (
+                      <input
+                        type="checkbox"
+                        id={`queryParams.${i}.active`}
+                        checked={field.value}
+                        onChange={field.onChange}
+                      />
+                    )}
+                  />
+                </td>
+                <td>
+                  <Controller
+                    control={control}
+                    render={({ field }) => (
+                      <InlineInput asChild>
+                        <label
+                          className="flex items-center cursor-pointer"
+                          htmlFor={`queryParams.${i}.active`}
+                          title={
+                            requiredFields[i] ? "Required field" : undefined
+                          }
+                        >
+                          {field.value}
+                          {requiredFields[i] && <sup>&nbsp;*</sup>}
+                        </label>
+                      </InlineInput>
+                    )}
+                    name={`queryParams.${i}.name`}
+                  />
+                </td>
+                <td>
+                  <div className="flex justify-between items-center">
+                    <Controller
+                      control={control}
+                      render={({ field }) => (
+                        <Input
+                          {...field}
+                          onChange={(e) => {
+                            field.onChange(e.target.value);
+                            if (e.target.value.length > 0) {
+                              form.setValue(`queryParams.${i}.active`, true);
+                            }
+                          }}
+                          placeholder="Enter value"
+                          className="w-full border-0 shadow-none text-xs font-mono"
+                        />
+                      )}
+                      name={`queryParams.${i}.value`}
+                    />
+                    <Controller
+                      control={control}
+                      render={({ field }) => (
+                        <Button
+                          size="icon"
+                          type="button"
+                          variant="ghost"
+                          aria-label="Clear value"
+                          className={cn(
+                            "ms-2",
+                            field.value.length === 0
+                              ? "opacity-0 pointer-events-none"
+                              : "opacity-100",
+                          )}
+                          title="Clear value"
+                          onClick={() => field.onChange("")}
+                        >
+                          <EraserIcon size={16} />
+                        </Button>
+                      )}
+                      name={`queryParams.${i}.value`}
+                    />
+                  </div>
+                </td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
     </div>
-  ));
+  );
 };

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

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
+import { Card } from "../../../ui/Card.js";
+import { SimpleSelect } from "../SimpleSelect.js";
+
+const mimeTypeToLanguage = (mimeType: string) => {
+  const mimeTypeMapping = {
+    "application/json": "json",
+    "text/json": "json",
+    "text/html": "html",
+    "text/css": "css",
+    "text/javascript": "javascript",
+    "application/xml": "xml",
+    "application/xhtml+xml": "xhtml",
+  };
+
+  return Object.entries(mimeTypeMapping).find(([mime]) =>
+    mimeType.includes(mime),
+  )?.[1];
+};
+
+const detectLanguage = (headers: Headers) => {
+  const contentType = headers.get("Content-Type") || "";
+  return mimeTypeToLanguage(contentType);
+};
+
+const tryParseJson = (body: string) => {
+  try {
+    return JSON.stringify(JSON.parse(body), null, 2);
+  } catch {
+    return null;
+  }
+};
+
+export const ResponseTab = ({
+  body = "",
+  headers,
+}: {
+  body?: string;
+  headers: Headers;
+}) => {
+  const detectedLanguage = detectLanguage(headers);
+  const jsonContent = tryParseJson(body);
+  const beautifiedBody = jsonContent || body;
+  const [view, setView] = useState<"formatted" | "raw">(
+    jsonContent ? "formatted" : "raw",
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Card className="shadow-none">
+        <SyntaxHighlight
+          language={
+            view === "raw" ? (jsonContent ? "plain" : detectedLanguage) : "json"
+          }
+          noBackground
+          showLanguageIndicator
+          className="overflow-x-auto p-4 text-xs"
+          code={view === "raw" ? body : beautifiedBody}
+        />
+      </Card>
+      {jsonContent && (
+        <div className="flex justify-end">
+          <SimpleSelect
+            value={view}
+            onChange={(e) => setView(e.target.value as "formatted" | "raw")}
+            options={[
+              { value: "formatted", label: "Formatted" },
+              { value: "raw", label: "Raw" },
+            ]}
+          />
+        </div>
+      )}
+    </div>
+  );
+};