zudoku 0.3.0-dev.77 → 0.3.0-dev.79

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

@@ -57,7 +57,7 @@ export type MediaTypeObject = {
   encoding?: Maybe<Array<EncodingItem>>;
   examples?: Maybe<Array<ExampleItem>>;
   mediaType: Scalars["String"]["output"];
-  schema: Scalars["JSON"]["output"];
+  schema?: Maybe<Scalars["JSON"]["output"]>;
 };
 
 export type OperationItem = {
@@ -163,16 +163,6 @@ export type TagItem = {
   name: Scalars["String"]["output"];
 };
 
-export type GetServerQueryQueryVariables = Exact<{
-  input: Scalars["JSON"]["input"];
-  type: SchemaType;
-}>;
-
-export type GetServerQueryQuery = {
-  __typename?: "Query";
-  schema: { __typename?: "Schema"; url: string };
-};
-
 export type OperationsFragmentFragment = {
   __typename?: "OperationItem";
   slug: string;
@@ -206,7 +196,7 @@ export type OperationsFragmentFragment = {
     content?: Array<{
       __typename?: "MediaTypeObject";
       mediaType: string;
-      schema: any;
+      schema?: any | null;
       encoding?: Array<{ __typename?: "EncodingItem"; name: string }> | null;
     }> | null;
   } | null;
@@ -218,7 +208,7 @@ export type OperationsFragmentFragment = {
     content?: Array<{
       __typename?: "MediaTypeObject";
       mediaType: string;
-      schema: any;
+      schema?: any | null;
       encoding?: Array<{ __typename?: "EncodingItem"; name: string }> | null;
     }> | null;
   }>;
@@ -252,6 +242,16 @@ export type AllOperationsQuery = {
   };
 };
 
+export type GetServerQueryQueryVariables = Exact<{
+  input: Scalars["JSON"]["input"];
+  type: SchemaType;
+}>;
+
+export type GetServerQueryQuery = {
+  __typename?: "Query";
+  schema: { __typename?: "Schema"; url: string };
+};
+
 export type GetCategoriesQueryVariables = Exact<{
   input: Scalars["JSON"]["input"];
   type: SchemaType;
@@ -423,73 +423,6 @@ export const OperationsFragmentFragmentDoc = {
     },
   ],
 } as unknown as DocumentNode<OperationsFragmentFragment, unknown>;
-export const GetServerQueryDocument = {
-  kind: "Document",
-  definitions: [
-    {
-      kind: "OperationDefinition",
-      operation: "query",
-      name: { kind: "Name", value: "getServerQuery" },
-      variableDefinitions: [
-        {
-          kind: "VariableDefinition",
-          variable: {
-            kind: "Variable",
-            name: { kind: "Name", value: "input" },
-          },
-          type: {
-            kind: "NonNullType",
-            type: { kind: "NamedType", name: { kind: "Name", value: "JSON" } },
-          },
-        },
-        {
-          kind: "VariableDefinition",
-          variable: { kind: "Variable", name: { kind: "Name", value: "type" } },
-          type: {
-            kind: "NonNullType",
-            type: {
-              kind: "NamedType",
-              name: { kind: "Name", value: "SchemaType" },
-            },
-          },
-        },
-      ],
-      selectionSet: {
-        kind: "SelectionSet",
-        selections: [
-          {
-            kind: "Field",
-            name: { kind: "Name", value: "schema" },
-            arguments: [
-              {
-                kind: "Argument",
-                name: { kind: "Name", value: "input" },
-                value: {
-                  kind: "Variable",
-                  name: { kind: "Name", value: "input" },
-                },
-              },
-              {
-                kind: "Argument",
-                name: { kind: "Name", value: "type" },
-                value: {
-                  kind: "Variable",
-                  name: { kind: "Name", value: "type" },
-                },
-              },
-            ],
-            selectionSet: {
-              kind: "SelectionSet",
-              selections: [
-                { kind: "Field", name: { kind: "Name", value: "url" } },
-              ],
-            },
-          },
-        ],
-      },
-    },
-  ],
-} as unknown as DocumentNode<GetServerQueryQuery, GetServerQueryQueryVariables>;
 export const AllOperationsDocument = {
   kind: "Document",
   definitions: [
@@ -735,6 +668,73 @@ export const AllOperationsDocument = {
     },
   ],
 } as unknown as DocumentNode<AllOperationsQuery, AllOperationsQueryVariables>;
+export const GetServerQueryDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getServerQuery" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "input" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "JSON" } },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: { kind: "Variable", name: { kind: "Name", value: "type" } },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "NamedType",
+              name: { kind: "Name", value: "SchemaType" },
+            },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "schema" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "input" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "input" },
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "type" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "type" },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "url" } },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<GetServerQueryQuery, GetServerQueryQueryVariables>;
 export const GetCategoriesDocument = {
   kind: "Document",
   definitions: [

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

@@ -11,10 +11,16 @@ import {
   fetchExchange,
 } from "./util/urql.js";
 
+import { CirclePlayIcon } from "lucide-react";
 import { createClient } from "zudoku/openapi-worker";
 import { ErrorPage } from "../../components/ErrorPage.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
+import { Button } from "../../ui/Button.js";
 import { OasPluginConfig } from "./interfaces.js";
+import {
+  PlaygroundDialog,
+  type PlaygroundDialogProps,
+} from "./playground/PlaygroundDialog.js";
 
 const GetCategoriesQuery = graphql(`
   query GetCategories($input: JSON!, $type: SchemaType!) {
@@ -81,6 +87,21 @@ export const openApiPlugin = (
         return <link rel="preconnect" href={config.server} />;
       }
     },
+    getMdxComponents: () => ({
+      OpenPlaygroundButton: (props: PlaygroundDialogProps) => (
+        <div>
+          <PlaygroundDialog {...props}>
+            <Button className="gap-2 items-center" variant="outline">
+              {props.children ?? (
+                <>
+                  Open in Playground <CirclePlayIcon size={16} />
+                </>
+              )}
+            </Button>
+          </PlaygroundDialog>
+        </div>
+      ),
+    }),
     getNavigation: async (path: string) => {
       if (!matchPath({ path: basePath, end: false }, path)) {
         return [];

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

@@ -1,11 +1,5 @@
 import { EraserIcon } from "lucide-react";
-import {
-  Control,
-  Controller,
-  useFieldArray,
-  useFormContext,
-  UseFormRegister,
-} from "react-hook-form";
+import { Control, Controller, useFieldArray } from "react-hook-form";
 import { Button } from "../../../ui/Button.js";
 import { Input } from "../../../ui/Input.js";
 import { cn } from "../../../util/cn.js";
@@ -14,12 +8,9 @@ import type { PlaygroundForm } from "./Playground.js";
 
 export const PathParams = ({
   control,
-  register,
 }: {
-  register: UseFormRegister<PlaygroundForm>;
   control: Control<PlaygroundForm>;
 }) => {
-  const form = useFormContext<PlaygroundForm>();
   const { fields } = useFieldArray<PlaygroundForm>({
     control,
     name: "pathParams",
@@ -35,16 +26,19 @@ export const PathParams = ({
                 control={control}
                 name={`pathParams.${i}.value`}
                 render={({ field }) => (
-                  <ColorizedParam
-                    slug={part.name}
-                    name={part.name}
-                    backgroundOpacity="25%"
-                    borderOpacity={field.value ? "100%" : "0"}
-                    className={cn(
-                      "font-mono text-xs m-2",
-                      !field.value && "opacity-60",
-                    )}
-                  />
+                  <div>
+                    <ColorizedParam
+                      slug={part.name}
+                      name={part.name}
+                      backgroundOpacity="25%"
+                      borderOpacity={field.value ? "100%" : "0"}
+                      className={cn(
+                        "font-mono text-xs m-2",
+                        !field.value && "opacity-60",
+                      )}
+                    />
+                    *
+                  </div>
                 )}
               />
             </td>

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

@@ -1,7 +1,6 @@
 import { useMutation } from "@tanstack/react-query";
-import { Fragment } from "react";
+import { Fragment, useEffect, useRef } from "react";
 import { FormProvider, useForm } from "react-hook-form";
-import { useQuery } from "urql";
 import { useApiIdentities } from "../../../components/context/DevPortalProvider.js";
 import {
   Select,
@@ -11,28 +10,19 @@ 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 { useOasConfig } from "../context.js";
-import { graphql } from "../graphql/index.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";
 
-const GetServerQuery = graphql(/* GraphQL */ `
-  query getServerQuery($input: JSON!, $type: SchemaType!) {
-    schema(input: $input, type: $type) {
-      url
-    }
-  }
-`);
-
 function mimeTypeToLanguage(mimeType: string) {
   const mimeTypeMapping = {
     "application/json": "json",
@@ -47,7 +37,7 @@ function mimeTypeToLanguage(mimeType: string) {
 
   return Object.entries(mimeTypeMapping).find(([mime]) =>
     mimeType.includes(mime),
-  )?.[0][1];
+  )?.[1];
 }
 
 const statusCodeMap: Record<number, string> = {
@@ -65,63 +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 = {
+  server: string;
   url: string;
   method: string;
   headers?: Header[];
   queryParams?: QueryParam[];
   pathParams?: PathParam[];
-  hasParams: boolean;
+  defaultBody?: string;
 };
 
 export const Playground = ({
+  server,
   url,
   method,
-  headers = [{ name: "", value: "" }],
+  headers = [],
   queryParams = [],
   pathParams = [],
-  hasParams,
+  defaultBody = "",
 }: PlaygroundContentProps) => {
-  const variables = useOasConfig();
-  const [server] = useQuery({ query: GetServerQuery, variables });
-
-  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(server.data?.schema.url ?? "", url, data);
+      const requestUrl = createUrl(server, url, data);
       const start = performance.now();
 
       const request = new Request(requestUrl, {
@@ -138,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();
 
@@ -147,7 +158,7 @@ export const Playground = ({
         headers: response.headers,
         size: body.length,
         body,
-        time: performance.now() - start,
+        time,
       };
     },
   });
@@ -159,7 +170,7 @@ export const Playground = ({
 
     const pathParamValue = value ? (
       <ColorizedParam backgroundOpacity="25%" name={part} slug={part}>
-        {value}
+        {encodeURIComponent(value)}
       </ColorizedParam>
     ) : (
       <span
@@ -195,8 +206,11 @@ export const Playground = ({
         <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">
@@ -215,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 && (
+                  {pathParams.length > 0 && (
                     <TabsTrigger value="parameters">Parameters</TabsTrigger>
                   )}
                   <TabsTrigger value="headers">
@@ -228,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>
@@ -238,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">
@@ -262,13 +281,13 @@ export const Playground = ({
                 {pathParams.length > 0 && (
                   <div className="flex flex-col gap-4 my-4">
                     <span className="font-semibold">Path Parameters</span>
-                    <PathParams control={control} register={register} />
+                    <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 control={control} queryParams={queryParams} />
                   </div>
                 )}
               </TabsContent>
@@ -282,7 +301,12 @@ export const Playground = ({
           </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">
@@ -307,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">
@@ -323,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>

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

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { CirclePlayIcon } from "lucide-react";
-import { useState } from "react";
+import { type PropsWithChildren, useState } from "react";
 import {
   Dialog,
   DialogContent,
@@ -9,15 +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 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