zudoku 0.25.3 → 0.26.1

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

@@ -1,6 +1,10 @@
 import { useMutation } from "@tanstack/react-query";
+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 {
   Select,
   SelectContent,
@@ -8,6 +12,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "zudoku/ui/Select.js";
+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";
@@ -15,8 +20,11 @@ import { Button } from "../../../ui/Button.js";
 import { Callout } from "../../../ui/Callout.js";
 import { Card, CardContent, CardHeader, CardTitle } from "../../../ui/Card.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
+import { cn } from "../../../util/cn.js";
 import { ColorizedParam } from "../ColorizedParam.js";
+import { Content } from "../SidecarExamples.js";
 import { createUrl } from "./createUrl.js";
+import ExamplesDropdown from "./ExamplesDropdown.js";
 import { Headers } from "./Headers.js";
 import { PathParams } from "./PathParams.js";
 import { QueryParams } from "./QueryParams.js";
@@ -40,6 +48,7 @@ const statusCodeMap: Record<number, string> = {
 export type Header = {
   name: string;
   defaultValue?: string;
+  defaultActive?: boolean;
 };
 export type QueryParam = {
   name: string;
@@ -67,6 +76,7 @@ export type PlaygroundForm = {
   headers: Array<{
     name: string;
     value: string;
+    active: boolean;
   }>;
   identity?: string;
 };
@@ -80,6 +90,7 @@ export type PlaygroundContentProps = {
   queryParams?: QueryParam[];
   pathParams?: PathParam[];
   defaultBody?: string;
+  examples?: Content;
 };
 
 export const Playground = ({
@@ -91,6 +102,7 @@ export const Playground = ({
   queryParams = [],
   pathParams = [],
   defaultBody = "",
+  examples,
 }: PlaygroundContentProps) => {
   const { selectedServer, setSelectedServer } = useSelectedServerStore();
   const [, startTransition] = useTransition();
@@ -98,20 +110,38 @@ export const Playground = ({
     useForm<PlaygroundForm>({
       defaultValues: {
         body: defaultBody,
-        queryParams: queryParams.map((param) => ({
-          name: param.name,
-          value: param.defaultValue ?? "",
-          active: param.defaultActive ?? false,
-          enum: param.enum ?? [],
-        })),
+        queryParams: queryParams
+          .map((param) => ({
+            name: param.name,
+            value: param.defaultValue ?? "",
+            active: param.defaultActive ?? false,
+            enum: param.enum ?? [],
+          }))
+          .concat([
+            {
+              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 ?? "",
-        })),
+        headers: headers
+          .map((header) => ({
+            name: header.name,
+            value: header.defaultValue ?? "",
+            active: header.defaultActive ?? false,
+          }))
+          .concat([
+            {
+              name: "",
+              value: "",
+              active: false,
+            },
+          ]),
         identity: NO_IDENTITY,
       },
     });
@@ -137,7 +167,7 @@ export const Playground = ({
         method: method.toUpperCase(),
         headers: Object.fromEntries(
           data.headers
-            .filter((h) => h.name)
+            .filter((h) => h.name && h.active)
             .map((header) => [header.name, header.value]),
         ),
         body: data.body ? data.body : undefined,
@@ -229,6 +259,7 @@ export const Playground = ({
             });
           }}
           value={selectedServer}
+          defaultValue={selectedServer}
         >
           <SelectTrigger className="p-0 border-none flex-row-reverse bg-transparent text-xs gap-0.5 h-auto">
             <SelectValue />
@@ -256,7 +287,7 @@ export const Playground = ({
           <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">
+                <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">
@@ -270,54 +301,30 @@ export const Playground = ({
                 Send
               </Button>
             </div>
-            <Tabs
-              defaultValue={
-                queryParams.length + pathParams.length > 0
-                  ? "parameters"
-                  : "headers"
-              }
-            >
+            <Tabs defaultValue="parameters">
               <div className="flex flex-wrap gap-1 justify-between">
                 <TabsList>
-                  {queryParams.length + pathParams.length > 0 && (
-                    <TabsTrigger value="parameters">Parameters</TabsTrigger>
-                  )}
+                  <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 ml-2" />
+                    )}
+                  </TabsTrigger>
                   <TabsTrigger value="headers">
-                    Headers{" "}
-                    {formState.headers.length > 0 &&
-                      `(${formState.headers.length})`}
+                    Headers
+                    {formState.headers.filter((h) => h.active).length > 0 && (
+                      <div className="w-2 h-2 rounded-full bg-blue-400 ml-2" />
+                    )}
                   </TabsTrigger>
-                  <TabsTrigger
-                    value="body"
-                    disabled={
-                      !["POST", "PUT", "PATCH", "DELETE"].includes(
-                        method.toUpperCase(),
-                      )
-                    }
-                  >
-                    Body
+                  <TabsTrigger value="auth">
+                    Auth
+                    {formState.identity !== NO_IDENTITY && (
+                      <div className="w-2 h-2 rounded-full bg-blue-400 ml-2" />
+                    )}
                   </TabsTrigger>
+                  <TabsTrigger value="body">Body</TabsTrigger>
                 </TabsList>
-                <div className="flex gap-2 items-center">
-                  Auth:
-                  <Select
-                    onValueChange={(value) => setValue("identity", value)}
-                    value={formState.identity}
-                    defaultValue={formState.identity}
-                  >
-                    <SelectTrigger className="w-[180px] flex">
-                      {identities.isPending ? <Spinner /> : <SelectValue />}
-                    </SelectTrigger>
-                    <SelectContent align="center">
-                      <SelectItem value={NO_IDENTITY}>None</SelectItem>
-                      {identities.data?.map((identity) => (
-                        <SelectItem key={identity.id} value={identity.id}>
-                          {identity.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
               </div>
               <TabsContent value="headers">
                 <Headers control={control} register={register} />
@@ -329,18 +336,105 @@ export const Playground = ({
                     <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>
-                )}
+                <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
+                {!["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="border w-full rounded p-2 bg-muted h-40"
+                  className={cn(
+                    "border w-full rounded-lg p-2 bg-muted h-40 font-mono",
+                    !["POST", "PUT", "PATCH", "DELETE"].includes(
+                      method.toUpperCase(),
+                    ) && "h-20",
+                  )}
+                  placeholder={
+                    !["POST", "PUT", "PATCH", "DELETE"].includes(
+                      method.toUpperCase(),
+                    )
+                      ? "This request does not support a body"
+                      : undefined
+                  }
+                  disabled={
+                    !["POST", "PUT", "PATCH", "DELETE"].includes(
+                      method.toUpperCase(),
+                    )
+                  }
                 />
+                {examples && (
+                  <ExamplesDropdown
+                    examples={examples}
+                    onSelect={(example) =>
+                      setValue("body", JSON.stringify(example.value, null, 2))
+                    }
+                  />
+                )}
+              </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">
+                    <Card className="w-full overflow-hidden">
+                      <RadioGroup
+                        onValueChange={(value) => setValue("identity", value)}
+                        value={formState.identity}
+                        defaultValue={formState.identity}
+                        className="gap-0"
+                        disabled={identities.data?.length === 0}
+                      >
+                        <Label
+                          className="h-12 border-b items-center flex p-4 cursor-pointer hover:bg-accent"
+                          htmlFor="none"
+                        >
+                          <RadioGroupItem value={NO_IDENTITY} id="none">
+                            None
+                          </RadioGroupItem>
+                          <Label htmlFor="none" className="ml-2">
+                            None
+                          </Label>
+                        </Label>
+                        {identities.data?.map((identity) => (
+                          <Label
+                            key={identity.id}
+                            className="h-12 border-b items-center flex p-4 cursor-pointer hover:bg-accent"
+                          >
+                            <RadioGroupItem
+                              value={identity.id}
+                              id={identity.id}
+                            >
+                              {identity.label}
+                            </RadioGroupItem>
+                            <Label htmlFor={identity.id} className="ml-2">
+                              {identity.label}
+                            </Label>
+                          </Label>
+                        ))}
+                      </RadioGroup>
+                    </Card>
+                  </div>
+                </div>
               </TabsContent>
             </Tabs>
           </div>

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

@@ -1,4 +1,3 @@
-import { EraserIcon } from "lucide-react";
 import {
   Control,
   Controller,
@@ -7,16 +6,10 @@ import {
 } from "react-hook-form";
 import { Card } from "zudoku/ui/Card.js";
 import { Checkbox } from "zudoku/ui/Checkbox.js";
-import { Button } from "../../../ui/Button.js";
+import { Autocomplete } from "../../../components/Autocomplete.js";
 import { Input } from "../../../ui/Input.js";
-import { cn } from "../../../util/cn.js";
-import { EnumSelector } from "./EnumSelector.js";
 import { InlineInput } from "./InlineInput.js";
-import {
-  NO_IDENTITY,
-  type PlaygroundForm,
-  type QueryParam,
-} from "./Playground.js";
+import { type PlaygroundForm, type QueryParam } from "./Playground.js";
 
 export const QueryParams = ({
   control,
@@ -33,127 +26,101 @@ export const QueryParams = ({
 
   const requiredFields = queryParams.map((param) => Boolean(param.isRequired));
 
-  const selectedIdentity = form.watch("identity");
-  const hasSelectedIdentity = selectedIdentity !== NO_IDENTITY;
-
   return (
     <Card className="rounded-lg">
-      <table className="w-full">
-        <tbody>
-          {fields
-            .filter(
-              // TODO remove this hack for Accu or make it more generic
-              (field) => !(hasSelectedIdentity && field.name === "apikey"),
-            )
-            .map((field, i) => {
-              const currentParam = queryParams.find(
-                (param) => param.name === field.name,
-              );
-              return (
-                <tr key={field.id} className="hover:bg-accent/40">
-                  <td className="w-5/12 flex items-center ps-3">
-                    <Controller
-                      control={control}
-                      name={`queryParams.${i}.active`}
-                      render={({ field }) => (
-                        <Checkbox
-                          variant="outline"
-                          id={`queryParams.${i}.active`}
-                          checked={field.value}
-                          onCheckedChange={field.onChange}
-                        />
-                      )}
-                    />
-                    <Controller
-                      control={control}
-                      render={({ field }) => (
-                        <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 className="w-full ">
+        {fields.map((field, i) => {
+          const currentParam = queryParams.find(
+            (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"
                     />
-                  </td>
-                  <td className="w-7/12">
-                    <div className="flex justify-between items-center">
-                      <Controller
-                        control={control}
-                        render={({ field }) => {
-                          const hasEnum =
-                            currentParam?.enum && currentParam.enum.length > 0;
+                  ) : (
+                    <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`}
+              />
 
-                          if (!hasEnum) {
-                            return (
-                              <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 hover:bg-accent"
-                              />
-                            );
-                          }
+              <div className="flex justify-between items-center">
+                <Controller
+                  control={control}
+                  render={({ field }) => {
+                    const hasEnum =
+                      currentParam?.enum && currentParam.enum.length > 0;
 
-                          const enumValues = currentParam.enum ?? [];
+                    if (!hasEnum) {
+                      return (
+                        <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"
+                        />
+                      );
+                    }
 
-                          return (
-                            <EnumSelector
-                              value={field.value}
-                              enumValues={enumValues}
-                              onChange={field.onChange}
-                              onValueSelected={() => {
-                                form.setValue(`queryParams.${i}.active`, true);
-                              }}
-                            />
-                          );
+                    return (
+                      <Autocomplete
+                        value={field.value}
+                        options={currentParam.enum ?? []}
+                        onChange={(e) => {
+                          field.onChange(e);
+                          form.setValue(`queryParams.${i}.active`, true);
                         }}
-                        name={`queryParams.${i}.value`}
-                      />
-                      <Controller
-                        control={control}
-                        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>
-                        )}
-                        name={`queryParams.${i}.value`}
+                        className="font-mono text-xs border-0 ring-1 ring-ring"
                       />
-                    </div>
-                  </td>
-                </tr>
-              );
-            })}
-        </tbody>
-      </table>
+                    );
+                  }}
+                  name={`queryParams.${i}.value`}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
     </Card>
   );
 };

package/src/lib/plugins/openapi/post-processors/removeExtensions.test.ts

@@ -4,28 +4,34 @@ import { removeExtensions } from "./removeExtensions.js";
 const baseDoc = {
   openapi: "3.1.0",
   "x-root-ext": "remove me",
+  "x-zuplo-ext": "remove me too",
   info: {
     title: "Test API",
     version: "1.0.0",
     "x-info-ext": "remove me",
+    "x-zuplo-info": "remove me too",
   },
   paths: {
     "/test": {
       "x-path-ext": "remove me",
+      "x-zuplo-path": "remove me too",
       parameters: [
         {
           name: "param1",
           in: "query",
           schema: { type: "string" },
           "x-param-ext": "remove me",
+          "x-zuplo-param": "remove me too",
         },
       ],
       get: {
         "x-operation-ext": "remove me",
+        "x-zuplo-route": "remove me too",
         responses: {
           "200": {
             description: "OK",
             "x-response-ext": "remove me",
+            "x-zuplo-response": "remove me too",
           },
         },
         parameters: [
@@ -34,6 +40,7 @@ const baseDoc = {
             in: "header",
             schema: { type: "string" },
             "x-op-param-ext": "remove me",
+            "x-zuplo-param": "remove me too",
           },
         ],
       },
@@ -43,6 +50,7 @@ const baseDoc = {
     {
       name: "example",
       "x-tag-ext": "remove me",
+      "x-zuplo-tag": "remove me too",
     },
   ],
   components: {
@@ -52,6 +60,7 @@ const baseDoc = {
         name: "api_key",
         in: "header",
         "x-security-ext": "remove me",
+        "x-zuplo-security": "remove me too",
       },
     },
   },
@@ -141,4 +150,53 @@ describe("removeExtensions", () => {
 
     expect(processed).toEqual(docWithoutExtensions);
   });
+
+  it("removes extensions based on shouldRemove callback", () => {
+    const processed = removeExtensions({
+      shouldRemove: (key) => key.startsWith("x-zuplo"),
+    })(baseDoc);
+
+    // Should remove x-zuplo extensions
+    const removedExtensions = [
+      "x-zuplo-ext",
+      "info.x-zuplo-info",
+      "paths./test.x-zuplo-path",
+      "paths./test.parameters.0.x-zuplo-param",
+      "paths./test.get.x-zuplo-route",
+      "paths./test.get.responses.200.x-zuplo-response",
+      "paths./test.get.parameters.0.x-zuplo-param",
+      "tags.0.x-zuplo-tag",
+      "components.securitySchemes.ApiKeyAuth.x-zuplo-security",
+    ];
+
+    // Should keep other x- extensions
+    const keptExtensions = [
+      "x-root-ext",
+      "info.x-info-ext",
+      "paths./test.x-path-ext",
+      "paths./test.parameters.0.x-param-ext",
+      "paths./test.get.x-operation-ext",
+      "paths./test.get.responses.200.x-response-ext",
+      "paths./test.get.parameters.0.x-op-param-ext",
+      "tags.0.x-tag-ext",
+      "components.securitySchemes.ApiKeyAuth.x-security-ext",
+    ];
+
+    removedExtensions.forEach((ext) => {
+      expect(processed).not.toHaveProperty(ext.split("."));
+    });
+
+    keptExtensions.forEach((ext) => {
+      expect(processed).toHaveProperty(ext.split("."));
+    });
+
+    // Assert that non-x- fields remain unchanged
+    expect(processed).toHaveProperty("openapi", "3.1.0");
+    expect(processed).toHaveProperty("info.title", "Test API");
+    expect(processed).toHaveProperty(
+      "paths./test.get.responses.200.description",
+      "OK",
+    );
+    expect(processed).toHaveProperty("tags.0.name", "example");
+  });
 });