zudoku 0.0.0-f2fd45c → 0.0.0-f3786a4

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

@@ -1,19 +1,15 @@
-import { EraserIcon } from "lucide-react";
 import {
   Control,
   Controller,
   useFieldArray,
   useFormContext,
 } from "react-hook-form";
-import { Button } from "../../../ui/Button.js";
+import { Card } from "zudoku/ui/Card.js";
+import { Checkbox } from "zudoku/ui/Checkbox.js";
+import { Autocomplete } from "../../../components/Autocomplete.js";
 import { Input } from "../../../ui/Input.js";
-import { cn } from "../../../util/cn.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,
@@ -30,59 +26,68 @@ export const QueryParams = ({
 
   const requiredFields = queryParams.map((param) => Boolean(param.isRequired));
 
-  const selectedIdentity = form.watch("identity");
-  const hasSelectedIdentity = selectedIdentity !== NO_IDENTITY;
-
   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}
-                      />
-                    )}
+    <Card className="rounded-lg">
+      <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}
                   />
-                </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 }) => (
+                )}
+              />
+              <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 className="flex justify-between items-center">
+                <Controller
+                  control={control}
+                  render={({ field }) => {
+                    const hasEnum =
+                      currentParam?.enum && currentParam.enum.length > 0;
+
+                    if (!hasEnum) {
+                      return (
                         <Input
                           {...field}
                           onChange={(e) => {
@@ -94,37 +99,28 @@ export const QueryParams = ({
                           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>
+                      );
+                    }
+
+                    return (
+                      <Autocomplete
+                        value={field.value}
+                        options={currentParam.enum ?? []}
+                        onChange={(e) => {
+                          field.onChange(e);
+                          form.setValue(`queryParams.${i}.active`, true);
+                        }}
+                        className="font-mono text-xs border-0 ring-1 ring-ring"
+                      />
+                    );
+                  }}
+                  name={`queryParams.${i}.value`}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </Card>
   );
 };

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

@@ -0,0 +1,202 @@
+import { describe, expect, it } from "vitest";
+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: [
+          {
+            name: "opParam1",
+            in: "header",
+            schema: { type: "string" },
+            "x-op-param-ext": "remove me",
+            "x-zuplo-param": "remove me too",
+          },
+        ],
+      },
+    },
+  },
+  tags: [
+    {
+      name: "example",
+      "x-tag-ext": "remove me",
+      "x-zuplo-tag": "remove me too",
+    },
+  ],
+  components: {
+    securitySchemes: {
+      ApiKeyAuth: {
+        type: "apiKey",
+        name: "api_key",
+        in: "header",
+        "x-security-ext": "remove me",
+        "x-zuplo-security": "remove me too",
+      },
+    },
+  },
+};
+
+describe("removeExtensions", () => {
+  it("removes all x- extensions by default", () => {
+    const processed = removeExtensions()(baseDoc);
+
+    const removedExtensions = [
+      "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("."));
+    });
+
+    // Assert that non-x- fields remain unchanged
+    expect(processed.openapi).toBe("3.1.0");
+    expect(processed.info.title).toBe("Test API");
+    expect(processed).toHaveProperty(
+      ["paths", "/test", "get", "responses", "200", "description"],
+      "OK",
+    );
+    expect(processed.tags[0].name).toBe("example");
+  });
+
+  it("removes only specified x- extensions when names are provided", () => {
+    const docWithExtraExtensions = {
+      ...baseDoc,
+      info: { ...baseDoc.info, "x-other-ext": "keep me" },
+    };
+
+    const processed = removeExtensions({
+      keys: ["x-path-ext", "x-param-ext"],
+    })(docWithExtraExtensions);
+
+    // Assert specified extensions are removed
+    expect(processed.paths["/test"]["x-path-ext"]).toBeUndefined();
+    expect(
+      processed.paths["/test"].parameters[0]["x-param-ext"],
+    ).toBeUndefined();
+
+    // Assert other x- fields remain
+    expect(processed["x-root-ext"]).toBe("remove me");
+    expect(processed.info["x-info-ext"]).toBe("remove me");
+    expect(processed.info["x-other-ext"]).toBe("keep me");
+  });
+
+  it("handles deeply nested extensions", () => {
+    const deeplyNested = {
+      a: {
+        b: {
+          c: {
+            "x-deep-ext": "remove me",
+            d: {
+              e: "value",
+              "x-another-ext": "remove me",
+            },
+          },
+        },
+      },
+    };
+
+    const processed = removeExtensions()(deeplyNested);
+
+    expect(processed.a.b.c["x-deep-ext"]).toBeUndefined();
+    expect(processed.a.b.c.d["x-another-ext"]).toBeUndefined();
+    expect(processed.a.b.c.d.e).toBe("value");
+  });
+
+  it("does nothing if no x- extensions are present", () => {
+    const docWithoutExtensions = {
+      openapi: "3.1.0",
+      info: { title: "API without extensions" },
+    };
+
+    const processed = removeExtensions()(docWithoutExtensions);
+
+    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");
+  });
+});

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

@@ -0,0 +1,27 @@
+import { type RecordAny, traverse } from "./traverse.js";
+
+interface RemoveExtensionsOptions {
+  keys?: string[];
+  shouldRemove?: (key: string) => boolean;
+}
+
+// Remove all `x-` prefixed key/value pairs, or filter by names if provided
+export const removeExtensions =
+  ({ keys, shouldRemove }: RemoveExtensionsOptions = {}) =>
+  (doc: RecordAny): RecordAny =>
+    traverse(doc, (spec) => {
+      const result: RecordAny = {};
+
+      for (const [key, value] of Object.entries(spec)) {
+        const isExtension = key.startsWith("x-");
+        const shouldBeRemoved =
+          isExtension &&
+          (keys === undefined || keys.includes(key)) &&
+          (!shouldRemove || shouldRemove(key));
+
+        if (shouldBeRemoved) continue;
+
+        result[key] = value;
+      }
+      return result;
+    });

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

@@ -0,0 +1,148 @@
+import { type OpenAPIV3_1 } from "openapi-types";
+import { describe, expect, it } from "vitest";
+import { removeParameters } from "./removeParameters.js";
+
+const baseDoc: OpenAPIV3_1.Document = {
+  openapi: "3.1.0",
+  info: {
+    title: "Test API",
+    version: "1.0.0",
+  },
+  components: {
+    parameters: {
+      commonParam: {
+        name: "commonParam",
+        in: "query",
+        schema: { type: "string" },
+      },
+      headerParam: {
+        name: "headerParam",
+        in: "header",
+        schema: { type: "string" },
+      },
+    },
+  },
+  paths: {
+    "/test": {
+      parameters: [
+        {
+          name: "pathParam",
+          in: "path",
+          schema: { type: "string" },
+          required: true,
+        },
+        {
+          name: "pathHeader",
+          in: "header",
+          schema: { type: "string" },
+          required: true,
+        },
+      ],
+      get: {
+        parameters: [
+          {
+            name: "opParam",
+            in: "query",
+            schema: { type: "string" },
+            required: true,
+          },
+          {
+            name: "opHeader",
+            in: "header",
+            schema: { type: "string" },
+            required: true,
+          },
+        ],
+        responses: {
+          "200": {
+            description: "OK",
+          },
+        },
+      },
+    },
+  },
+};
+
+describe("removeParameters", () => {
+  it("removes parameters by name", () => {
+    const processed = removeParameters({
+      names: ["pathParam", "opParam"],
+    })(baseDoc);
+
+    expect(processed.paths["/test"].parameters).toHaveLength(1);
+    expect(processed.paths["/test"].parameters[0].name).toBe("pathHeader");
+    expect(processed.paths["/test"].get.parameters).toHaveLength(1);
+    expect(processed.paths["/test"].get.parameters[0].name).toBe("opHeader");
+  });
+
+  it("removes parameters by location", () => {
+    const processed = removeParameters({
+      in: ["header"],
+    })(baseDoc);
+
+    expect(processed.paths["/test"].parameters).toHaveLength(1);
+    expect(processed.paths["/test"].parameters[0].in).toBe("path");
+    expect(processed.paths["/test"].get.parameters).toHaveLength(1);
+    expect(processed.paths["/test"].get.parameters[0].in).toBe("query");
+  });
+
+  it("removes parameters using shouldRemove callback", () => {
+    const processed = removeParameters({
+      shouldRemove: ({ parameter }) =>
+        parameter.in === "header" && parameter.name.includes("op"),
+    })(baseDoc);
+
+    expect(processed.paths["/test"].parameters).toHaveLength(2);
+    expect(processed.paths["/test"].get.parameters).toHaveLength(1);
+    expect(processed.paths["/test"].get.parameters[0].name).toBe("opParam");
+  });
+
+  it("combines multiple removal criteria", () => {
+    const processed = removeParameters({
+      in: ["query", "header"],
+      shouldRemove: ({ parameter }) => parameter.name === "pathHeader",
+    })(baseDoc);
+
+    expect(processed.paths["/test"].parameters).toHaveLength(1);
+    expect(processed.paths["/test"].parameters[0].name).toBe("pathParam");
+    expect(processed.paths["/test"].get.parameters).toHaveLength(0);
+  });
+
+  it("handles missing parameters arrays", () => {
+    const docWithoutParams = {
+      openapi: "3.1.0",
+      paths: {
+        "/test": {
+          get: {
+            summary: "Test endpoint",
+          },
+        },
+      },
+    };
+
+    const processed = removeParameters({
+      names: ["someParam"],
+    })(docWithoutParams);
+
+    expect(processed).toEqual(docWithoutParams);
+  });
+
+  it("preserves non-parameter properties", () => {
+    const processed = removeParameters({
+      names: ["globalParam"],
+    })(baseDoc);
+
+    expect(processed.openapi).toBe("3.1.0");
+    expect(processed.paths["/test"].get).toBeDefined();
+  });
+
+  it("removes parameters from components", () => {
+    const processed = removeParameters({
+      in: ["header"],
+    })(baseDoc);
+
+    expect(Object.keys(processed.components.parameters)).toHaveLength(1);
+    expect(processed.components.parameters.commonParam).toBeDefined();
+    expect(processed.components.parameters.headerParam).toBeUndefined();
+  });
+});

package/src/lib/plugins/openapi/post-processors/removeParameters.ts

@@ -0,0 +1,101 @@
+import { type RecordAny, traverse } from "./traverse.js";
+
+interface RemoveParametersOptions {
+  // Names of parameters to remove
+  names?: string[];
+  // Specific locations to remove parameters from ('query', 'header', 'path', 'cookie')
+  in?: string[];
+  // Custom filter function
+  shouldRemove?: ({ parameter }: { parameter: RecordAny }) => boolean;
+}
+
+export const removeParameters =
+  ({ names, in: locations, shouldRemove }: RemoveParametersOptions = {}) =>
+  (doc: RecordAny): RecordAny =>
+    traverse(doc, (spec) => {
+      // Helper function to filter parameters
+      const filterParameters = (parameters: RecordAny[]) =>
+        parameters.filter((p) => {
+          if (names?.includes(p.name)) return false;
+          if (locations?.includes(p.in)) return false;
+          if (shouldRemove?.({ parameter: p })) return false;
+          return true;
+        });
+
+      // Handle components.parameters
+      if (spec.components?.parameters) {
+        spec = {
+          ...spec,
+          components: {
+            ...spec.components,
+            parameters: Object.fromEntries(
+              Object.entries(spec.components.parameters).filter(
+                ([_, param]) => {
+                  const p = param as RecordAny;
+                  if (p.$ref) return true; // Skip references
+                  return (
+                    !names?.includes(p.name) &&
+                    !locations?.includes(p.in) &&
+                    !shouldRemove?.({ parameter: p })
+                  );
+                },
+              ),
+            ),
+          },
+        };
+      }
+
+      // Handle paths
+      if (spec.paths) {
+        const updatedPaths: RecordAny = {};
+
+        for (const [path, pathItem] of Object.entries(spec.paths)) {
+          if (typeof pathItem !== "object" || pathItem === null) {
+            updatedPaths[path] = pathItem;
+            continue;
+          }
+
+          let updatedPathItem = { ...pathItem };
+
+          // Handle path-level parameters
+          if (
+            "parameters" in updatedPathItem &&
+            Array.isArray(updatedPathItem.parameters)
+          ) {
+            updatedPathItem.parameters = filterParameters(
+              updatedPathItem.parameters,
+            );
+          }
+
+          // Handle operation-level parameters
+          for (const method of Object.keys(updatedPathItem)) {
+            const pathItemWithMethods = updatedPathItem as Record<
+              string,
+              RecordAny
+            >;
+
+            if (
+              method === "parameters" ||
+              typeof pathItemWithMethods[method] !== "object"
+            ) {
+              continue;
+            }
+
+            const operation = pathItemWithMethods[method];
+            if (Array.isArray(operation.parameters)) {
+              pathItemWithMethods[method] = {
+                ...operation,
+                parameters: filterParameters(operation.parameters),
+              };
+              updatedPathItem = pathItemWithMethods;
+            }
+          }
+
+          updatedPaths[path] = updatedPathItem;
+        }
+
+        spec = { ...spec, paths: updatedPaths };
+      }
+
+      return spec;
+    });