zudoku 0.0.0-e614aaa → 0.0.0-e6d1d34

package/src/lib/plugins/openapi/playground/result-panel/ResultPanel.tsx

@@ -1,5 +1,6 @@
-import { UseMutationResult } from "@tanstack/react-query";
+import { type UseMutationResult } from "@tanstack/react-query";
 import { Spinner } from "../../../../components/Spinner.js";
+import { Button } from "../../../../ui/Button.js";
 import { Callout } from "../../../../ui/Callout.js";
 import {
   Card,
@@ -14,20 +15,24 @@ import {
   TabsTrigger,
 } from "../../../../ui/Tabs.js";
 import { cn } from "../../../../util/cn.js";
-import { PlaygroundResult } from "../Playground.js";
+import { type PlaygroundResult } from "../Playground.js";
 import { RequestTab } from "./RequestTab.js";
 import { ResponseTab } from "./ResponseTab.js";
 
 export const ResultPanel = ({
   queryMutation,
   showPathParamsWarning,
+  showLongRunningWarning,
+  onCancel,
 }: {
-  queryMutation: UseMutationResult<PlaygroundResult, Error, any, unknown>;
+  queryMutation: UseMutationResult<PlaygroundResult, Error, any>;
   showPathParamsWarning: boolean;
+  showLongRunningWarning?: boolean;
+  onCancel?: () => void;
 }) => {
   const status = ((queryMutation.data?.status ?? 0) / 100).toFixed(0);
   return (
-    <div className="min-w-0 p-8 bg-muted/70 overflow-y-auto">
+    <div className="min-w-0 p-4 py-8 bg-muted/50">
       {queryMutation.error ? (
         <div className="flex flex-col gap-2">
           {showPathParamsWarning && (
@@ -49,49 +54,66 @@ export const ResultPanel = ({
           </Card>
         </div>
       ) : queryMutation.data ? (
-        <div className="flex flex-col gap-2">
-          <Tabs defaultValue="response">
-            <TabsList>
-              <TabsTrigger value="request">Request</TabsTrigger>
-              <TabsTrigger value="response">
-                Response
-                <span
-                  className={cn(
-                    "text-xs font-mono ml-1",
-                    status === "2" && "text-green-500",
-                    status === "3" && "text-blue-500",
-                    status === "4" && "text-yellow-500",
-                    status === "5" && "text-red-500",
-                  )}
-                >
-                  ({queryMutation.data.status})
-                </span>
-              </TabsTrigger>
-            </TabsList>
-            <TabsContent value="request">
-              <RequestTab {...queryMutation.data.request} />
-            </TabsContent>
-            <TabsContent value="response">
-              <ResponseTab
-                status={queryMutation.data.status}
-                time={queryMutation.data.time}
-                size={queryMutation.data.size}
-                headers={queryMutation.data.headers}
-                body={queryMutation.data.body}
-                url={queryMutation.data.request.url}
-              />
-            </TabsContent>
-          </Tabs>
-        </div>
+        <Tabs defaultValue="response">
+          <TabsList>
+            <TabsTrigger value="request">Request</TabsTrigger>
+            <TabsTrigger value="response">
+              Response
+              <span
+                className={cn(
+                  "text-xs font-mono ml-1",
+                  status === "2" && "text-green-500",
+                  status === "3" && "text-blue-500",
+                  status === "4" && "text-yellow-500",
+                  status === "5" && "text-red-500",
+                )}
+              >
+                ({queryMutation.data.status})
+              </span>
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="request">
+            <RequestTab {...queryMutation.data.request} />
+          </TabsContent>
+          <TabsContent value="response">
+            <ResponseTab
+              status={queryMutation.data.status}
+              time={queryMutation.data.time}
+              size={queryMutation.data.size}
+              headers={queryMutation.data.headers}
+              body={queryMutation.data.body}
+              url={queryMutation.data.request.url}
+            />
+          </TabsContent>
+        </Tabs>
       ) : (
         <div className="grid place-items-center h-full">
-          <span className="text-[16px] font-semibold text-muted-foreground">
-            {queryMutation.isPending ? (
-              <Spinner />
-            ) : (
-              "Send a request first to see the response here"
-            )}
-          </span>
+          {queryMutation.isPending ? (
+            <div className="flex flex-col gap-2 items-center mt-20">
+              <Spinner size={20} />
+              <div
+                className={cn(
+                  "opacity-0 pointer-events-none transition-opacity h-20 text-sm text-muted-foreground duration-300 flex flex-col gap-2 items-center",
+                  showLongRunningWarning && "opacity-100 pointer-events-auto",
+                )}
+              >
+                Looks like the request is taking longer than expected.
+                <Button
+                  type="button"
+                  onClick={onCancel}
+                  size="sm"
+                  className="w-fit"
+                  variant="outline"
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <span className="text-[16px] font-semibold text-muted-foreground">
+              Send a request first to see the response here
+            </span>
+          )}
         </div>
       )}
     </div>

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

@@ -15,14 +15,12 @@ export const LogicalGroup = ({
   schemas,
   type,
   isOpen,
-  level,
   toggleOpen,
 }: {
   schemas: SchemaObject[];
   type: LogicalGroupType;
   isOpen: boolean;
   toggleOpen: () => void;
-  level: number;
 }) => (
   <Collapsible.Root open={isOpen} onOpenChange={toggleOpen} asChild>
     <Card className="px-6">
@@ -34,12 +32,7 @@ export const LogicalGroup = ({
       <Collapsible.Content className="pb-4">
         {schemas.map((subSchema, index) => (
           // eslint-disable-next-line react/no-array-index-key
-          <LogicalGroupItem
-            key={index}
-            type={type}
-            schema={subSchema}
-            level={level}
-          />
+          <LogicalGroupItem key={index} type={type} schema={subSchema} />
         ))}
       </Collapsible.Content>
     </Card>

package/src/lib/plugins/openapi/schema/LogicalGroup/LogicalGroupConnector.tsx

@@ -24,10 +24,12 @@ export const LogicalGroupConnector = ({
   type,
   isOpen,
   className,
+  schemeName,
 }: {
   type: LogicalGroupType;
   isOpen: boolean;
   className?: string;
+  schemeName?: string;
 }) => {
   return (
     <div
@@ -48,6 +50,7 @@ export const LogicalGroupConnector = ({
         >
           <ChevronDownIcon size={16} />
         </div>
+        <span className="text-sm text-foreground">{schemeName}</span>
       </div>
     </div>
   );

package/src/lib/plugins/openapi/schema/LogicalGroup/LogicalGroupItem.tsx

@@ -8,7 +8,6 @@ import { LogicalGroupConnector } from "./LogicalGroupConnector.js";
 export const LogicalGroupItem = (props: {
   type: LogicalGroupType;
   schema: SchemaObject;
-  level: number;
 }) => {
   const [isOpen, setIsOpen] = useState(true);
 
@@ -19,11 +18,15 @@ export const LogicalGroupItem = (props: {
       className="group"
     >
       <Collapsible.Trigger>
-        <LogicalGroupConnector type={props.type} isOpen={isOpen} />
+        <LogicalGroupConnector
+          type={props.type}
+          isOpen={isOpen}
+          schemeName={props.schema.title}
+        />
       </Collapsible.Trigger>
       {!isOpen && <div className="wavy-line bg-border translate-y-1" />}
       <Collapsible.Content>
-        <SchemaView schema={props.schema} level={props.level + 1} />
+        <SchemaView schema={props.schema} />
       </Collapsible.Content>
     </Collapsible.Root>
   );

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

@@ -0,0 +1,36 @@
+import type { SchemaObject } from "../../../oas/parser/index.js";
+import { SelectOnClick } from "../components/SelectOnClick.js";
+
+export const SchemaExampleAndDefault = ({
+  schema,
+}: {
+  schema: SchemaObject;
+}) => {
+  const example = schema.examples?.at(0);
+  const defaultValue = schema.default;
+
+  if (!example && !defaultValue) return null;
+
+  return (
+    <div className="flex flex-col gap-1 text-xs">
+      {example && (
+        <div>
+          <span className="text-muted-foreground">Example: </span>
+          <SelectOnClick className="border rounded px-1 font-mono">
+            {typeof example === "object" ? JSON.stringify(example) : example}
+          </SelectOnClick>
+        </div>
+      )}
+      {defaultValue && (
+        <div>
+          <span className="text-muted-foreground">Default: </span>
+          <SelectOnClick className="border rounded px-1 font-mono">
+            {typeof defaultValue === "object"
+              ? JSON.stringify(defaultValue)
+              : defaultValue}
+          </SelectOnClick>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -1,13 +1,17 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { ListPlusIcon, RefreshCcwDotIcon } from "lucide-react";
+import { MinusIcon, PlusIcon, RefreshCcwDotIcon } from "lucide-react";
 import { useCallback, useState } from "react";
-import { Badge } from "zudoku/ui/Badge.js";
+import { InlineCode } from "../../../components/InlineCode.js";
 import { Markdown, ProseClasses } from "../../../components/Markdown.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
 import { Button } from "../../../ui/Button.js";
 import { cn } from "../../../util/cn.js";
 import { objectEntries } from "../../../util/objectEntries.js";
+import { EnumValues } from "../components/EnumValues.js";
+import { SelectOnClick } from "../components/SelectOnClick.js";
+import { ParamInfos } from "../ParamInfos.js";
 import { LogicalGroup } from "./LogicalGroup/LogicalGroup.js";
+import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
 import { SchemaView } from "./SchemaView.js";
 import {
   hasLogicalGroupings,
@@ -16,13 +20,7 @@ import {
   LogicalSchemaTypeMap,
 } from "./utils.js";
 
-export const SchemaLogicalGroup = ({
-  schema,
-  level,
-}: {
-  schema: SchemaObject;
-  level: number;
-}) => {
+export const SchemaLogicalGroup = ({ schema }: { schema: SchemaObject }) => {
   const [isOpen, setIsOpen] = useState(true);
   const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
 
@@ -35,31 +33,31 @@ export const SchemaLogicalGroup = ({
         type={type}
         isOpen={isOpen}
         toggleOpen={toggleOpen}
-        level={level}
       />
     );
   }
 };
 
 const RecursiveIndicator = () => (
-  <div className="flex items-center gap-2 italic text-sm text-muted-foreground font-mono bg-muted px-2 py-0.5 rounded-md">
-    <RefreshCcwDotIcon size={16} />
+  <InlineCode
+    className="inline-flex items-center gap-1.5 italic text-xs translate-y-0.5"
+    selectOnClick={false}
+  >
+    <RefreshCcwDotIcon size={13} />
     <span>circular</span>
-  </div>
+  </InlineCode>
 );
 
 export const SchemaPropertyItem = ({
   name,
   schema,
   group,
-  level,
   defaultOpen = false,
   showCollapseButton = true,
 }: {
   name: string;
   schema: SchemaObject;
   group: "required" | "optional" | "deprecated";
-  level: number;
   defaultOpen?: boolean;
   showCollapseButton?: boolean;
 }) => {
@@ -68,13 +66,15 @@ export const SchemaPropertyItem = ({
   if (isCircularRef(schema)) {
     return (
       <li className="p-4 bg-border/20 hover:bg-border/30">
-        <div className="flex flex-col gap-1 justify-between text-sm">
-          <div className="flex gap-2 items-center">
+        <div className="flex flex-col gap-2.5 justify-between text-sm">
+          <div className="space-x-2">
             <code>{name}</code>
-            <Badge variant="muted">object</Badge>
-            {group === "optional" && <Badge variant="outline">optional</Badge>}
-            <RecursiveIndicator />
+            <ParamInfos
+              schema={schema}
+              extraItems={[<RecursiveIndicator key="circular-ref" />]}
+            />
           </div>
+          <SchemaExampleAndDefault schema={schema} />
         </div>
       </li>
     );
@@ -82,31 +82,34 @@ export const SchemaPropertyItem = ({
 
   return (
     <li className="p-4 bg-border/20 hover:bg-border/30">
-      <div className="flex flex-col gap-1 justify-between text-sm">
-        <div className="flex gap-2 items-center">
-          <code>{name}</code>
-          <Badge variant="muted">
-            {schema.type === "array" && schema.items.type ? (
-              <span>{schema.items.type}[]</span>
-            ) : Array.isArray(schema.type) ? (
-              <span>{schema.type.join(" | ")}</span>
-            ) : (
-              <span>{schema.type}</span>
-            )}
-          </Badge>
-          {group === "optional" && <Badge variant="outline">optional</Badge>}
-          {schema.type === "array" &&
-            "items" in schema &&
-            isCircularRef(schema.items) && <RecursiveIndicator />}
+      <div className="flex flex-col gap-2.5 justify-between text-sm">
+        <div className="space-x-2">
+          <SelectOnClick asChild>
+            <code>{name}</code>
+          </SelectOnClick>
+          <ParamInfos
+            schema={schema}
+            extraItems={[
+              group !== "optional" && (
+                <span className="text-primary">required</span>
+              ),
+              schema.type === "array" &&
+                "items" in schema &&
+                isCircularRef(schema.items) && <RecursiveIndicator />,
+            ]}
+          />
         </div>
-
         {schema.description && (
           <Markdown
             className={cn(ProseClasses, "text-sm leading-normal line-clamp-4")}
             content={schema.description}
           />
         )}
-
+        {schema.type === "array" && "items" in schema && schema.items.enum && (
+          <EnumValues values={schema.items.enum} />
+        )}
+        {schema.enum && <EnumValues values={schema.enum} />}
+        <SchemaExampleAndDefault schema={schema} />
         {(hasLogicalGroupings(schema) || isComplexType(schema)) && (
           <Collapsible.Root
             defaultOpen={defaultOpen}
@@ -115,30 +118,24 @@ export const SchemaPropertyItem = ({
           >
             {showCollapseButton && (
               <Collapsible.Trigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="mt-2 flex gap-1.5"
-                >
-                  <ListPlusIcon size={18} />
-                  {!isOpen
-                    ? "Show nested properties"
-                    : "Hide nested properties"}
+                <Button variant="expand" size="sm" className="h-7">
+                  {isOpen ? <MinusIcon size={12} /> : <PlusIcon size={12} />}
+                  {!isOpen ? "Show properties" : "Hide properties"}
                 </Button>
               </Collapsible.Trigger>
             )}
             <Collapsible.Content>
               <div className="mt-2">
                 {hasLogicalGroupings(schema) ? (
-                  <SchemaLogicalGroup schema={schema} level={level + 1} />
+                  <SchemaLogicalGroup schema={schema} />
                 ) : schema.type === "object" ? (
-                  <SchemaView schema={schema} level={level + 1} />
+                  <SchemaView schema={schema} />
                 ) : (
                   schema.type === "array" &&
                   "items" in schema &&
                   typeof schema.items === "object" &&
                   !isCircularRef(schema.items) && (
-                    <SchemaView schema={schema.items} level={level + 1} />
+                    <SchemaView schema={schema.items} />
                   )
                 )}
               </div>