zudoku 0.28.2 → 0.29.0

package/src/lib/plugins/openapi/index.tsx

@@ -26,14 +26,20 @@ const GetCategoriesQuery = graphql(`
 `);
 
 const GetOperationsQuery = graphql(`
-  query GetOperations(
-    $input: JSON!
-    $type: SchemaType!
-    $tag: String
-    $untagged: Boolean
-  ) {
+  query GetOperations($input: JSON!, $type: SchemaType!, $tag: String) {
     schema(input: $input, type: $type) {
-      operations(tag: $tag, untagged: $untagged) {
+      operations(tag: $tag) {
+        slug
+        deprecated
+        method
+        summary
+        operationId
+        path
+        tags {
+          name
+        }
+      }
+      untagged: operations(untagged: true) {
         slug
         deprecated
         method
@@ -138,7 +144,7 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
         );
         const version = urlVersion ?? Object.keys(config.input).at(0);
 
-        const data = await client.fetch(GetCategoriesQuery, {
+        const tagData = await client.fetch(GetCategoriesQuery, {
           type: config.type,
           input: config.type === "file" ? config.input[version!] : config.input,
         });
@@ -150,42 +156,69 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
         const operationsData = await client.fetch(GetOperationsQuery, {
           type: config.type,
           input: config.type === "file" ? config.input[version!] : config.input,
-          tag,
-          untagged: tag === undefined,
+          tag: !config.loadTags ? tag : undefined,
         });
 
-        const items = operationsData.schema.operations.map((operation) => ({
-          type: "link" as const,
-          label: operation.summary ?? operation.path,
-          href: `#${operation.slug}`,
-          badge: {
-            label: operation.method,
-            color: MethodColorMap[operation.method.toLowerCase()]!,
-            invert: true,
-          } as const,
-        }));
-
-        const categories = data.schema.tags
-          // .filter((tag) => tag.operations.length > 0)
-          .map<SidebarItem>((tag) => {
-            const categoryLink = joinUrl(
-              basePath,
-              urlVersion,
-              tag.name ? slugify(tag.name) : UNTAGGED_PATH,
-            );
-            return {
-              type: "category",
-              label: tag.name || "Other endpoints",
-              link: {
-                type: "doc" as const,
-                id: categoryLink,
-                label: tag.name!,
-              },
-              collapsible: false,
-              collapsed: true,
-              items: path === categoryLink ? items : [],
-            };
+        const categories = tagData.schema.tags.flatMap<SidebarItem>((tag) => {
+          const categoryLink = joinUrl(basePath, urlVersion, slugify(tag.name));
+
+          const operations = operationsData.schema.operations
+            .filter(
+              (operation) =>
+                operation.tags?.length !== 0 &&
+                operation.tags?.map((t) => t.name).includes(tag.name),
+            )
+            .map((operation) => ({
+              type: "link" as const,
+              label: operation.summary ?? operation.path,
+              href: `${categoryLink}#${operation.slug}`,
+              badge: {
+                label: operation.method,
+                color: MethodColorMap[operation.method.toLowerCase()]!,
+                invert: true,
+              } as const,
+            }));
+
+          if (config.loadTags && operations.length === 0) {
+            return [];
+          }
+
+          return {
+            type: "category",
+            label: tag.name,
+            link: {
+              type: "doc" as const,
+              id: categoryLink,
+              label: tag.name,
+            },
+            collapsible: config.loadTags,
+            collapsed: !config.loadTags,
+            items: operations,
+          };
+        });
+
+        const { untagged } = operationsData.schema;
+
+        if (untagged.length > 0) {
+          const categoryLink = joinUrl(basePath, urlVersion, UNTAGGED_PATH);
+
+          categories.push({
+            type: "category",
+            label: "Other endpoints",
+            link: {
+              type: "doc" as const,
+              id: categoryLink,
+              label: "Other endpoints",
+            },
+            collapsible: config.loadTags,
+            collapsed: !config.loadTags,
+            items: untagged.map((operation) => ({
+              type: "link" as const,
+              label: operation.summary ?? operation.path,
+              href: `${categoryLink}#${operation.slug}`,
+            })),
           });
+        }
 
         return categories;
       } catch {

package/src/lib/plugins/openapi/interfaces.ts

@@ -1,19 +1,13 @@
+type DynamicInput = () => Promise<unknown>;
+
 type OasSource =
   | { type: "url"; input: string }
-  | {
-      type: "file";
-      input: {
-        [version: string]: () => Promise<unknown>;
-      };
-    }
+  | { type: "file"; input: { [version: string]: DynamicInput } }
   | { type: "raw"; input: string };
 
 export type ContextOasSource =
   | { type: "url"; input: string }
-  | {
-      type: "file";
-      input: () => Promise<unknown>;
-    }
+  | { type: "file"; input: DynamicInput }
   | { type: "raw"; input: string };
 
 export type OasPluginConfig = {
@@ -21,6 +15,7 @@ export type OasPluginConfig = {
   navigationId?: string;
   skipPreload?: boolean;
   tagPages?: Array<string>;
+  loadTags?: boolean;
 } & OasPluginConfigOptions &
   OasSource;
 

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

@@ -1,5 +1,5 @@
 import { XIcon } from "lucide-react";
-import { useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import {
   Control,
   Controller,
@@ -11,8 +11,8 @@ 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";
+import ParamsGrid, { ParamsGridItem } from "./ParamsGrid.js";
+import { Header, type PlaygroundForm } from "./Playground.js";
 
 const headerOptions = Object.freeze([
   "Accept",
@@ -43,22 +43,31 @@ const headerOptions = Object.freeze([
   "X-Requested-With",
 ]);
 
-export const Headers = ({ control }: { control: Control<PlaygroundForm> }) => {
-  const { fields, append, remove } = useFieldArray<PlaygroundForm>({
+export const Headers = ({
+  control,
+  headers: schemaHeaders,
+}: {
+  control: Control<PlaygroundForm>;
+  headers: Header[];
+}) => {
+  const { fields, append, remove } = useFieldArray<PlaygroundForm, "headers">({
     control,
     name: "headers",
   });
-  const { setValue } = useFormContext<PlaygroundForm>();
+  const { setValue, watch } = useFormContext<PlaygroundForm>();
   const valueRefs = useRef<Array<HTMLInputElement | null>>([]);
   const nameRefs = useRef<Array<HTMLInputElement | null>>([]);
+  const watchedHeaders = watch("headers");
 
-  const addNewHeader = () => {
-    append({
-      name: "",
-      value: "",
-      active: false,
-    } as PlaygroundForm["headers"][number]);
-  };
+  const addNewHeader = useCallback(() => {
+    append({ name: "", value: "", active: false });
+  }, [append]);
+
+  useEffect(() => {
+    if (watchedHeaders.length === 0) {
+      addNewHeader();
+    }
+  }, [watchedHeaders, addNewHeader]);
 
   const handleHeaderEnter = (index: number) => {
     valueRefs.current[index]?.focus();
@@ -69,86 +78,113 @@ export const Headers = ({ control }: { control: Control<PlaygroundForm> }) => {
     requestAnimationFrame(() => nameRefs.current[index + 1]?.focus());
   };
 
+  const missingHeaders = schemaHeaders
+    .filter((h) => !watchedHeaders.some((f) => f.name === h.name))
+    .map(({ name }) => name);
+
   return (
     <div className="flex flex-col gap-2">
       <Card className="overflow-hidden">
         <ParamsGrid>
-          {fields.map((header, i) => (
-            <div
-              key={header.name}
-              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 focus-visible:ring-0"
-                      {...field}
-                      ref={(el) => {
-                        valueRefs.current[i] = el;
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter" && e.currentTarget.value.trim()) {
-                          handleValueEnter(i);
-                        }
-                      }}
-                      autoComplete="off"
-                    />
-                  )}
-                />
-                <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>
-          ))}
+          {fields.map((field, i) => {
+            const currentHeader = schemaHeaders.find(
+              (h) => h.name === watch(`headers.${i}.name`),
+            );
+            return (
+              <ParamsGridItem key={field.id}>
+                <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={[...missingHeaders, ...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 }) => {
+                      const hasEnum =
+                        currentHeader?.enum && currentHeader.enum.length > 0;
+
+                      if (!hasEnum) {
+                        return (
+                          <Input
+                            placeholder="Value"
+                            className="w-full border-0 shadow-none text-xs font-mono focus-visible:ring-0"
+                            {...field}
+                            ref={(el) => {
+                              valueRefs.current[i] = el;
+                            }}
+                            onKeyDown={(e) => {
+                              if (
+                                e.key === "Enter" &&
+                                e.currentTarget.value.trim()
+                              ) {
+                                handleValueEnter(i);
+                              }
+                            }}
+                            autoComplete="off"
+                          />
+                        );
+                      }
+
+                      return (
+                        <Autocomplete
+                          shouldFilter={false}
+                          value={field.value}
+                          options={currentHeader.enum ?? []}
+                          onChange={(e) => {
+                            field.onChange(e);
+                            setValue(`headers.${i}.active`, true);
+                          }}
+                          className="font-mono text-xs border-0"
+                        />
+                      );
+                    }}
+                  />
+                  <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>
+              </ParamsGridItem>
+            );
+          })}
         </ParamsGrid>
       </Card>
       <div className="text-end">

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

@@ -2,7 +2,12 @@ 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",
+  "grid grid-cols-[2fr_3fr] gap-2 items-center",
+);
+
+export const ParamsGridItem = createVariantComponent(
+  "div",
+  "group hover:bg-accent px-3 grid col-span-full grid-cols-subgrid",
 );
 
 export default ParamsGrid;

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

@@ -2,7 +2,7 @@ import { Control, Controller, useFieldArray } from "react-hook-form";
 import { Card } from "zudoku/ui/Card.js";
 import { Input } from "../../../ui/Input.js";
 import { ColorizedParam } from "../ColorizedParam.js";
-import ParamsGrid from "./ParamsGrid.js";
+import ParamsGrid, { ParamsGridItem } from "./ParamsGrid.js";
 import type { PlaygroundForm } from "./Playground.js";
 
 export const PathParams = ({
@@ -10,7 +10,7 @@ export const PathParams = ({
 }: {
   control: Control<PlaygroundForm>;
 }) => {
-  const { fields } = useFieldArray<PlaygroundForm>({
+  const { fields } = useFieldArray<PlaygroundForm, "pathParams">({
     control,
     name: "pathParams",
   });
@@ -18,16 +18,16 @@ export const PathParams = ({
   return (
     <Card className="rounded-lg">
       <ParamsGrid>
-        {fields.map((part, i) => (
-          <>
+        {fields.map((field, i) => (
+          <ParamsGridItem key={field.id}>
             <Controller
               control={control}
               name={`pathParams.${i}.name`}
               render={() => (
-                <div>
+                <div className="flex items-center">
                   <ColorizedParam
-                    slug={part.name}
-                    name={part.name}
+                    slug={field.name}
+                    name={field.name}
                     className="font-mono text-xs px-2"
                   />
                 </div>
@@ -43,12 +43,12 @@ export const PathParams = ({
                     {...field}
                     required
                     placeholder="Enter value"
-                    className="w-full border-0 shadow-none text-xs font-mono hover:bg-accent"
+                    className="w-full border-0 shadow-none text-xs font-mono focus-visible:ring-0"
                   />
                 )}
               />
             </div>
-          </>
+          </ParamsGridItem>
         ))}
       </ParamsGrid>
     </Card>

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

@@ -15,7 +15,7 @@ import {
   SelectValue,
 } from "zudoku/ui/Select.js";
 import { Textarea } from "zudoku/ui/Textarea.js";
-import { useSelectedServerStore } from "../../../authentication/state.js";
+import { useSelectedServer } from "../../../authentication/state.js";
 import { useApiIdentities } from "../../../components/context/ZudokuContext.js";
 import { Card } from "../../../ui/Card.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
@@ -68,6 +68,7 @@ export type PlaygroundForm = {
     name: string;
     value: string;
     active: boolean;
+    enum?: string[];
   }>;
   identity?: string;
 };
@@ -100,7 +101,7 @@ export type PlaygroundContentProps = {
 
 export const Playground = ({
   server,
-  servers,
+  servers = [],
   url,
   method,
   headers = [],
@@ -109,7 +110,9 @@ export const Playground = ({
   defaultBody = "",
   examples,
 }: PlaygroundContentProps) => {
-  const { selectedServer, setSelectedServer } = useSelectedServerStore();
+  const { selectedServer, setSelectedServer } = useSelectedServer(
+    servers.map((server) => ({ url: server })),
+  );
   const [, startTransition] = useTransition();
   const { register, control, handleSubmit, watch, setValue, ...form } =
     useForm<PlaygroundForm>({
@@ -340,7 +343,7 @@ export const Playground = ({
                 </TabsList>
               </div>
               <TabsContent value="headers">
-                <Headers control={control} />
+                <Headers control={control} headers={headers} />
               </TabsContent>
               <TabsContent value="parameters">
                 {pathParams.length > 0 && (