zudoku 0.4.1 → 0.4.2-dev.1

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

@@ -140,19 +140,24 @@ export const Sidecar = ({
       ? generateSchemaExample(requestBodyContent[0].schema as SchemaObject)
       : undefined;
 
-    const snippet = new HTTPSnippet(
-      {
-        method: operation.method.toLocaleUpperCase(),
-        url: operation.path.replaceAll("{", ":").replaceAll("}", ""),
-        headers: [{ name: "Authorization", value: "Bearer <token>" }],
-        postData: example
-          ? {
-              text: JSON.stringify(example, null, 2),
-              mimeType: "application/json",
-            }
-          : {},
-      } as never, // 👈 never touch this
-    );
+    const snippet = new HTTPSnippet({
+      method: operation.method.toLocaleUpperCase(),
+      url:
+        (result.data?.schema.url ?? "") +
+        operation.path.replaceAll("{", ":").replaceAll("}", ""),
+      postData: example
+        ? {
+            text: JSON.stringify(example, null, 2),
+            mimeType: "application/json",
+          }
+        : ({} as any),
+      headers: [],
+      queryString: [],
+      httpVersion: "",
+      cookies: [],
+      headersSize: 0,
+      bodySize: 0,
+    });
 
     return getConverted(snippet, selectedLang);
   }, [selectedLang, operation.method, operation.path, requestBodyContent]);

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

@@ -1,14 +1,8 @@
-import { TriangleAlertIcon, XIcon } from "lucide-react";
-import {
-  Control,
-  useFieldArray,
-  UseFormRegister,
-  useWatch,
-} from "react-hook-form";
+import { XIcon } from "lucide-react";
+import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
 import { Button } from "../../../ui/Button.js";
-import { cn } from "../../../util/cn.js";
-import { InlineInput } from "./InlineInput.js";
-import { NO_IDENTITY, type PlaygroundForm } from "./Playground.js";
+import { Input } from "../../../ui/Input.js";
+import { type PlaygroundForm } from "./Playground.js";
 
 export const Headers = ({
   control,
@@ -21,67 +15,58 @@ export const Headers = ({
     control,
     name: "headers",
   });
-  const selectedIdentity = useWatch({ name: "identity", control });
-  const liveHeaders = useWatch({ name: "headers", control });
-
-  const disableAuth = selectedIdentity !== NO_IDENTITY;
 
   return (
-    <div className="grid grid-cols-[1fr_1fr_auto]">
-      {fields.map((header, i) => {
-        const isDisabledByAuth =
-          disableAuth && liveHeaders.at(i)?.name === "Authorization";
-
-        return (
-          <div
-            key={header.id}
-            className={cn(
-              "grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group",
-              isDisabledByAuth && "line-through",
-            )}
-            title={
-              isDisabledByAuth
-                ? "This header is disabled because authentication was selected"
-                : undefined
-            }
-          >
-            <div className="flex gap-2 items-center">
-              <InlineInput
-                {...register(`headers.${i}.name`)}
-                placeholder="Name"
-                className="peer"
-                autoComplete="off"
-              />
-              {isDisabledByAuth && (
-                <TriangleAlertIcon size={16} className="text-amber-500" />
-              )}
-            </div>
-            <InlineInput
-              placeholder={"Value"}
-              className="peer"
-              {...register(`headers.${i}.value`)}
-              autoComplete="off"
-            />
-            <button
-              className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
-              onClick={() => {
-                remove(i);
-              }}
-              type="button"
+    <div className="flex flex-col gap-2">
+      <table className="w-full [&_td]:border [&_td]:p-1.5 [&_td]:px-2">
+        <tbody>
+          {fields.map((header, i) => (
+            <tr
+              key={header.id}
+              className="group has-[:focus]:bg-muted/50 hover:bg-muted/50"
             >
-              <XIcon size={16} />
-            </button>
-            <div className="col-span-full border-b"></div>
-          </div>
-        );
-      })}
-      <Button
-        className="col-span-full mt-4"
-        onClick={() => append({ name: "", value: "" })}
-        type="button"
-      >
-        Add header
-      </Button>
+              <td className="flex gap-2 items-center">
+                <Input
+                  {...register(`headers.${i}.name`)}
+                  placeholder="Name"
+                  className="border-0 shadow-none text-xs font-mono"
+                  autoComplete="off"
+                />
+              </td>
+              <td>
+                <div className="flex items-center gap-2">
+                  <Input
+                    placeholder={"Value"}
+                    className="border-0 shadow-none text-xs font-mono"
+                    {...register(`headers.${i}.value`)}
+                    autoComplete="off"
+                  />
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    className="text-muted-foreground opacity-0 group-hover:opacity-100"
+                    onClick={() => {
+                      remove(i);
+                    }}
+                    type="button"
+                  >
+                    <XIcon size={16} />
+                  </Button>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="text-end">
+        <Button
+          className=""
+          onClick={() => append({ name: "", value: "" })}
+          type="button"
+        >
+          Add header
+        </Button>
+      </div>
     </div>
   );
 };

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

@@ -51,9 +51,7 @@ export const PathParams = ({
                     <Input
                       {...field}
                       placeholder="Enter value"
-                      className={cn(
-                        "border-0 shadow-none ring-0 font-mono text-xs",
-                      )}
+                      className="border-0 shadow-none ring-0 font-mono text-xs"
                     />
                   )}
                 />

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

@@ -11,9 +11,9 @@ import {
 } from "../../../components/Select.js";
 import { Spinner } from "../../../components/Spinner.js";
 import { Button } from "../../../ui/Button.js";
-import { Card } from "../../../ui/Card.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 { fetchTimeout } from "../../../util/fetchTimeout.js";
 import { ColorizedParam } from "../ColorizedParam.js";
 import { createUrl } from "./createUrl.js";
 import { Headers } from "./Headers.js";
@@ -23,23 +23,6 @@ import { ResponseTab } from "./ResponseTab.js";
 
 export const NO_IDENTITY = "__none";
 
-function 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",
-    "text/plain": "plain",
-  } as const;
-
-  return Object.entries(mimeTypeMapping).find(([mime]) =>
-    mimeType.includes(mime),
-  )?.[1];
-}
-
 const statusCodeMap: Record<number, string> = {
   200: "OK",
   201: "Created",
@@ -148,18 +131,31 @@ export const Playground = ({
           ?.find((i) => i.id === data.identity)
           ?.authorizeRequest(request);
       }
-      const response = await fetchTimeout(request);
-      const time = performance.now() - start;
+      try {
+        const response = await fetch(request, {
+          signal: AbortSignal.timeout(5000),
+        });
+
+        const time = performance.now() - start;
 
-      const body = await response.text();
+        const body = await response.text();
 
-      return {
-        status: response.status,
-        headers: response.headers,
-        size: body.length,
-        body,
-        time,
-      };
+        return {
+          status: response.status,
+          headers: response.headers,
+          size: body.length,
+          body,
+          time,
+        };
+      } catch (error) {
+        if (error instanceof TypeError) {
+          throw new Error(
+            "The request failed, possibly due to network issues or CORS policy.",
+          );
+        } else {
+          throw error;
+        }
+      }
     },
   });
 
@@ -298,11 +294,24 @@ export const Playground = ({
           </div>
           <div className="flex flex-col gap-4 p-8 bg-muted/70">
             {queryMutation.error ? (
-              <div>
-                Error:{" "}
-                {queryMutation.error.message ||
-                  String(queryMutation.error) ||
-                  "Unexpected error"}
+              <div className="flex flex-col gap-2">
+                {formState.pathParams.some((p) => p.value === "") && (
+                  <Callout type="caution">
+                    Some path parameters are missing values. Please fill them in
+                    to ensure the request is sent correctly.
+                  </Callout>
+                )}
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Request failed</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    Error:{" "}
+                    {queryMutation.error.message ||
+                      String(queryMutation.error) ||
+                      "Unexpected error"}
+                  </CardContent>
+                </Card>
               </div>
             ) : queryMutation.data ? (
               <div className="flex flex-col gap-2">

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

@@ -55,7 +55,7 @@ export const ResponseTab = ({
           }
           noBackground
           showLanguageIndicator
-          className="overflow-x-auto p-4 text-xs"
+          className="overflow-x-auto p-4 text-xs max-h-[480px]"
           code={view === "raw" ? body : beautifiedBody}
         />
       </Card>

package/src/lib/plugins/openapi/schema/SchemaView.tsx

@@ -26,7 +26,7 @@ export const SchemaView = ({
   }
 
   const renderSchema = (schema: SchemaObject, level: number) => {
-    if (schema.oneOf || schema.allOf || schema.anyOf) {
+    if (hasLogicalGroupings(schema)) {
       return <SchemaLogicalGroup schema={schema} level={level} />;
     }
 
@@ -55,10 +55,7 @@ export const SchemaView = ({
             )}
           </Card>
         );
-      } else if (
-        itemsSchema.type === "object" ||
-        hasLogicalGroupings(itemsSchema)
-      ) {
+      } else if (itemsSchema.type === "object") {
         return (
           <Card className="flex flex-col gap-2 bg-border/30 p-4">
             <span className="text-sm text-muted-foreground">object[]</span>
@@ -100,9 +97,6 @@ export const SchemaView = ({
         },
       );
 
-      const isTopLevelSingleItem =
-        level === 0 && Object.keys(groupedProperties).length === 1;
-
       const groupNames = ["required", "optional", "deprecated"] as const;
 
       return (
@@ -118,8 +112,7 @@ export const SchemaView = ({
                       schema={schema}
                       group={group}
                       level={level}
-                      defaultOpen={isTopLevelSingleItem || defaultOpen}
-                      showCollapseButton={!isTopLevelSingleItem}
+                      defaultOpen={defaultOpen}
                     />
                   ))}
                 </ul>

package/src/lib/ui/Callout.tsx

@@ -74,7 +74,7 @@ export const Callout = ({ type, children, title, className }: CalloutProps) => {
       )}
     >
       <Icon
-        className={cn(!title && "mt-1 translate-y-px", iconColor)}
+        className={cn(!title && "translate-y-px", iconColor)}
         size={20}
         aria-hidden="true"
       />

package/dist/lib/util/fetchTimeout.d.ts

@@ -1 +0,0 @@
-export declare const fetchTimeout: (input: RequestInfo, init?: RequestInit, timeout?: number) => Promise<Response>;

package/dist/lib/util/fetchTimeout.js

@@ -1,14 +0,0 @@
-export const fetchTimeout = async (input, init, timeout = 5000) => {
-    const controller = new AbortController();
-    const signal = controller.signal;
-    const fetchPromise = fetch(input, { ...init, signal });
-    const timeoutPromise = new Promise((_, reject) => {
-        const timer = setTimeout(() => {
-            controller.abort("Request timed out");
-            reject(new Error("Request timed out"));
-        }, timeout);
-        void fetchPromise.finally(() => clearTimeout(timer));
-    });
-    return Promise.race([fetchPromise, timeoutPromise]);
-};
-//# sourceMappingURL=fetchTimeout.js.map

package/dist/lib/util/fetchTimeout.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fetchTimeout.js","sourceRoot":"","sources":["../../../src/lib/util/fetchTimeout.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,EAC/B,KAAkB,EAClB,IAAkB,EAClB,OAAO,GAAG,IAAI,EACK,EAAE;IACrB,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;IACzC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAEjC,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IAEvD,MAAM,cAAc,GAAG,IAAI,OAAO,CAAW,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE;QACzD,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YAC5B,UAAU,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACtC,MAAM,CAAC,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC;QACzC,CAAC,EAAE,OAAO,CAAC,CAAC;QAEZ,KAAK,YAAY,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC,CAAC;AACtD,CAAC,CAAC"}