zudoku 0.0.0-fd8f8ad → 0.0.0-feda542

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

@@ -1,6 +1,10 @@
 import { useMutation } from "@tanstack/react-query";
-import { Fragment, useEffect, useRef, useTransition } from "react";
+import { InfoIcon } from "lucide-react";
+import { Fragment, useEffect, useRef, useState, useTransition } from "react";
 import { FormProvider, useForm } from "react-hook-form";
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
+import { PathRenderer } from "../../../components/PathRenderer.js";
+
 import {
   Select,
   SelectContent,
@@ -8,44 +12,45 @@ import {
   SelectTrigger,
   SelectValue,
 } from "zudoku/ui/Select.js";
-import { useSelectedServerStore } from "../../../authentication/state.js";
+import { Textarea } from "zudoku/ui/Textarea.js";
 import { useApiIdentities } from "../../../components/context/ZudokuContext.js";
-import { Spinner } from "../../../components/Spinner.js";
-import { Button } from "../../../ui/Button.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 { cn } from "../../../util/cn.js";
+import { objectEntries } from "../../../util/objectEntries.js";
+import { useLatest } from "../../../util/useLatest.js";
 import { ColorizedParam } from "../ColorizedParam.js";
+import { type Content } from "../SidecarExamples.js";
+import { useSelectedServer } from "../state.js";
 import { createUrl } from "./createUrl.js";
+import ExamplesDropdown from "./ExamplesDropdown.js";
 import { Headers } from "./Headers.js";
+import { IdentityDialog } from "./IdentityDialog.js";
+import IdentitySelector from "./IdentitySelector.js";
 import { PathParams } from "./PathParams.js";
 import { QueryParams } from "./QueryParams.js";
-import { ResponseTab } from "./ResponseTab.js";
+import { useIdentityStore } from "./rememberedIdentity.js";
+import RequestLoginDialog from "./RequestLoginDialog.js";
+import { ResultPanel } from "./result-panel/ResultPanel.js";
+import SubmitButton from "./SubmitButton.js";
 
 export const NO_IDENTITY = "__none";
 
-const statusCodeMap: Record<number, string> = {
-  200: "OK",
-  201: "Created",
-  202: "Accepted",
-  204: "No Content",
-  400: "Bad Request",
-  401: "Unauthorized",
-  403: "Forbidden",
-  404: "Not Found",
-  405: "Method Not Allowed",
-  500: "Internal Server Error",
-};
-
 export type Header = {
   name: string;
   defaultValue?: string;
+  defaultActive?: boolean;
+  isRequired?: boolean;
+  enum?: string[];
+  type?: string;
 };
+
 export type QueryParam = {
   name: string;
   defaultValue?: string;
   defaultActive?: boolean;
   isRequired?: boolean;
+  enum?: string[];
+  type?: string;
 };
 export type PathParam = {
   name: string;
@@ -53,16 +58,49 @@ export type PathParam = {
   isRequired?: boolean;
 };
 
+const bodyContentTypeMap = {
+  Plain: "text/plain",
+  JSON: "application/json",
+  XML: "application/xml",
+  YAML: "application/yaml",
+  CSV: "text/csv",
+} as const;
+
 export type PlaygroundForm = {
   body: string;
-  queryParams: Array<{ name: string; value: string; active: boolean }>;
+  bodyContentType: keyof typeof bodyContentTypeMap;
+  queryParams: Array<{
+    name: string;
+    value: string;
+    active: boolean;
+    enum?: string[];
+  }>;
   pathParams: Array<{ name: string; value: string }>;
-  headers: Array<{ name: string; value: string }>;
+  headers: Array<{
+    name: string;
+    value: string;
+    active: boolean;
+    enum?: string[];
+  }>;
   identity?: string;
 };
 
+export type PlaygroundResult = {
+  status: number;
+  headers: Array<[string, string]>;
+  size: number;
+  body: string;
+  time: number;
+  request: {
+    method: string;
+    url: string;
+    headers: Array<[string, string]>;
+    body?: string;
+  };
+};
+
 export type PlaygroundContentProps = {
-  server: string;
+  server?: string;
   servers?: string[];
   url: string;
   method: string;
@@ -70,90 +108,159 @@ export type PlaygroundContentProps = {
   queryParams?: QueryParam[];
   pathParams?: PathParam[];
   defaultBody?: string;
+  examples?: Content;
+  requiresLogin?: boolean;
+  onLogin?: () => void;
+  onSignUp?: () => void;
 };
 
 export const Playground = ({
   server,
-  servers,
+  servers = [],
   url,
   method,
   headers = [],
   queryParams = [],
   pathParams = [],
   defaultBody = "",
+  examples,
+  requiresLogin = false,
+  onLogin,
+  onSignUp,
 }: PlaygroundContentProps) => {
-  const { selectedServer, setSelectedServer } = useSelectedServerStore();
+  const { selectedServer, setSelectedServer } = useSelectedServer(
+    servers.map((url) => ({ url })),
+  );
+  const [showSelectIdentity, setShowSelectIdentity] = useState(false);
+  const identities = useApiIdentities();
+  const { setRememberedIdentity, getRememberedIdentity } = useIdentityStore();
   const [, startTransition] = useTransition();
+  const [skipLogin, setSkipLogin] = useState(false);
+  const [showLongRunningWarning, setShowLongRunningWarning] = useState(false);
+  const abortControllerRef = useRef<AbortController | undefined>(undefined);
+  const latestSetRememberedIdentity = useLatest(setRememberedIdentity);
+
   const { register, control, handleSubmit, watch, setValue, ...form } =
     useForm<PlaygroundForm>({
       defaultValues: {
         body: defaultBody,
-        queryParams: queryParams.map((param) => ({
-          name: param.name,
-          value: param.defaultValue ?? "",
-          active: param.defaultActive ?? false,
-        })),
+        bodyContentType: "JSON",
+        queryParams: queryParams
+          .map((param) => ({
+            name: param.name,
+            value: param.defaultValue ?? "",
+            active: param.defaultActive ?? false,
+            enum: param.enum ?? [],
+          }))
+          .concat([
+            {
+              name: "",
+              value: "",
+              active: false,
+              enum: [],
+            },
+          ]),
         pathParams: pathParams.map((param) => ({
           name: param.name,
           value: param.defaultValue ?? "",
         })),
-        headers: headers.map((header) => ({
-          name: header.name,
-          value: header.defaultValue ?? "",
-        })),
-        identity: NO_IDENTITY,
+        headers: headers
+          .map((header) => ({
+            name: header.name,
+            value: header.defaultValue ?? "",
+            active: header.defaultActive ?? false,
+          }))
+          .concat([
+            {
+              name: "",
+              value: "",
+              active: false,
+            },
+          ]),
+        identity: getRememberedIdentity(
+          identities.data?.map((i) => i.id) ?? [],
+        ),
       },
     });
   const formState = watch();
-  const identities = useApiIdentities();
+  const formRef = useRef<HTMLFormElement>(null);
 
-  const setOnce = useRef(false);
   useEffect(() => {
-    if (setOnce.current) return;
-    const firstIdentity = identities.data?.at(0);
-    if (firstIdentity) {
-      setValue("identity", firstIdentity.id);
-      setOnce.current = true;
+    if (formState.identity) {
+      latestSetRememberedIdentity.current(formState.identity);
     }
-  }, [setValue, identities.data]);
+  }, [latestSetRememberedIdentity, formState.identity]);
 
   const queryMutation = useMutation({
     mutationFn: async (data: PlaygroundForm) => {
-      const requestUrl = createUrl(selectedServer ?? server, url, data);
       const start = performance.now();
 
-      const request = new Request(requestUrl, {
-        method: method.toUpperCase(),
-        headers: Object.fromEntries(
-          data.headers
-            .filter((h) => h.name)
-            .map((header) => [header.name, header.value]),
-        ),
-        body: data.body ? data.body : undefined,
-      });
+      const shouldSetContentType = !data.headers.some(
+        (h) => h.active && h.name.toLowerCase() === "content-type",
+      );
+
+      const headers = Object.fromEntries([
+        ...data.headers
+          .filter((h) => h.name && h.active)
+          .map((header) => [header.name, header.value]),
+        ...(shouldSetContentType
+          ? [["content-type", bodyContentTypeMap[data.bodyContentType]]]
+          : []),
+      ]);
+
+      const request = new Request(
+        createUrl(server ?? selectedServer, url, data),
+        {
+          method: method.toUpperCase(),
+          headers,
+          body: data.body ? data.body : undefined,
+        },
+      );
 
       if (data.identity !== NO_IDENTITY) {
-        identities.data
+        await identities.data
           ?.find((i) => i.id === data.identity)
           ?.authorizeRequest(request);
       }
+
+      const warningTimeout = setTimeout(
+        () => setShowLongRunningWarning(true),
+        3210,
+      );
+      abortControllerRef.current = new AbortController();
+
       try {
         const response = await fetch(request, {
-          signal: AbortSignal.timeout(5000),
+          signal: abortControllerRef.current.signal,
         });
 
-        const time = performance.now() - start;
+        clearTimeout(warningTimeout);
+        setShowLongRunningWarning(false);
 
+        const time = performance.now() - start;
         const body = await response.text();
+        const url = new URL(request.url);
 
         return {
           status: response.status,
-          headers: response.headers,
+          headers: Array.from(response.headers.entries()),
           size: body.length,
           body,
           time,
-        };
+          request: {
+            method: request.method.toUpperCase(),
+            url: request.url,
+            headers: [
+              ["Host", url.host],
+              ["User-Agent", "Zudoku Playground"],
+              ...Array.from(request.headers.entries()),
+            ],
+            body: data.body ? data.body : undefined,
+          },
+        } satisfies PlaygroundResult;
       } catch (error) {
+        clearTimeout(warningTimeout);
+        setShowLongRunningWarning(false);
         if (error instanceof TypeError) {
           throw new Error(
             "The request failed, possibly due to network issues or CORS policy.",
@@ -165,36 +272,33 @@ export const Playground = ({
     },
   });
 
-  const path = url.split("/").map((part, i, arr) => {
-    const isPathParam =
-      (part.startsWith("{") && part.endsWith("}")) || part.startsWith(":");
-    const replaced = part.replace(/[:{}]/g, "");
-    const value = formState.pathParams.find((p) => p.name === replaced)?.value;
-
-    const pathParamValue = value ? (
-      <ColorizedParam backgroundOpacity="25%" name={part} slug={part}>
-        {encodeURIComponent(value)}
-      </ColorizedParam>
-    ) : (
-      <span
-        className="underline decoration-wavy decoration-red-500"
-        title={`Missing value for path parameter \`${replaced}\``}
-      >
-        {part}
-      </span>
-    );
-
-    return (
-      // eslint-disable-next-line react/no-array-index-key
-      <Fragment key={part + i}>
-        {isPathParam ? pathParamValue : part}
-        {i < arr.length - 1 && "/"}
-        <wbr />
-      </Fragment>
-    );
-  });
+  useEffect(() => {
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, []);
 
-  const headerEntries = Array.from(queryMutation.data?.headers.entries() ?? []);
+  const path = (
+    <PathRenderer
+      path={url}
+      renderParam={({ name, originalValue, index }) => {
+        const formValue = formState.pathParams.find(
+          (param) => param.name === name,
+        )?.value;
+
+        return (
+          <ColorizedParam
+            name={name}
+            backgroundOpacity="0"
+            slug={name}
+            onClick={() => form.setFocus(`pathParams.${index}.value`)}
+          >
+            {formValue || originalValue}
+          </ColorizedParam>
+        );
+      }}
+    />
+  );
 
   const urlQueryParams = formState.queryParams
     .filter((p) => p.active)
@@ -208,207 +312,243 @@ export const Playground = ({
 
   const serverSelect = (
     <div className="inline-block opacity-50 hover:opacity-100 transition">
-      {servers && servers.length > 1 ? (
-        <Select
-          onValueChange={(value) => {
-            startTransition(() => {
-              setSelectedServer(value);
-            });
-          }}
-          value={selectedServer}
-        >
-          <SelectTrigger className="p-0 border-none flex-row-reverse bg-transparent text-xs gap-0.5 h-auto">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {servers.map((s) => (
-              <SelectItem key={s} value={s}>
-                {s.replace(/^https?:\/\//, "")}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+      {server ? (
+        <span>{server.replace(/^https?:\/\//, "").replace(/\/$/, "")}</span>
       ) : (
-        <span>{server.replace(/^https?:\/\//, "")}</span>
+        servers.length > 1 && (
+          <Select
+            onValueChange={(value) => {
+              startTransition(() => setSelectedServer(value));
+            }}
+            value={selectedServer}
+            defaultValue={selectedServer}
+          >
+            <SelectTrigger className="p-0 border-none flex-row-reverse bg-transparent text-xs gap-0.5 h-auto translate-y-[4px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {servers.map((s) => (
+                <SelectItem key={s} value={s}>
+                  {s.replace(/^https?:\/\//, "").replace(/\/$/, "")}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )
       )}
     </div>
   );
 
+  const showLogin = requiresLogin && !skipLogin;
+  const isBodySupported = ["POST", "PUT", "PATCH", "DELETE"].includes(
+    method.toUpperCase(),
+  );
+
   return (
     <FormProvider
       {...{ register, control, handleSubmit, watch, setValue, ...form }}
     >
-      <form onSubmit={handleSubmit((data) => queryMutation.mutateAsync(data))}>
-        <div className="grid grid-cols-[8fr_7fr] 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">
+      <form
+        onSubmit={handleSubmit((data) => {
+          if (identities.data?.length === 0 || data.identity) {
+            queryMutation.mutate(data);
+          } else {
+            setShowSelectIdentity(true);
+          }
+        })}
+        ref={formRef}
+        className="relative"
+      >
+        <IdentityDialog
+          identities={identities.data ?? []}
+          open={showSelectIdentity}
+          onOpenChange={setShowSelectIdentity}
+          onSubmit={({ rememberedIdentity, identity }) => {
+            if (rememberedIdentity) {
+              setValue("identity", identity ?? NO_IDENTITY);
+            }
+            setShowSelectIdentity(false);
+            queryMutation.mutate({ ...formState, identity });
+          }}
+        />
+        <RequestLoginDialog
+          open={showLogin}
+          setOpen={(open) => setSkipLogin(!open)}
+          onSignUp={onSignUp}
+          onLogin={onLogin}
+        />
+
+        <div className="grid grid-cols-2 text-sm h-full">
+          <div className="flex flex-col gap-4 p-4 after:bg-muted-foreground/20 relative after:absolute after:w-px after:inset-0 after:left-auto">
             <div className="flex gap-2 items-stretch">
               <div className="flex flex-1 items-center w-full border rounded-md">
-                <div className="border-r p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono">
+                <div className="border-r p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono flex items-center">
                   {method.toUpperCase()}
                 </div>
-                <div className="flex items-center flex-wrap p-2 font-mono text-xs">
+                <div className="items-center px-2 py-0.5 font-mono text-xs break-all leading-6">
                   {serverSelect}
                   {path}
                   {urlQueryParams.length > 0 ? "?" : ""}
                   {urlQueryParams}
                 </div>
               </div>
-              <Button type="submit" className="h-auto flex gap-1">
-                Send
-              </Button>
+
+              <SubmitButton
+                identities={identities.data ?? []}
+                formRef={formRef}
+                disabled={identities.isLoading || form.formState.isSubmitting}
+              />
             </div>
-            <Tabs
-              defaultValue={
-                queryParams.length + pathParams.length > 0
-                  ? "parameters"
-                  : "headers"
-              }
-            >
+            <Tabs defaultValue="parameters">
               <div className="flex flex-wrap gap-1 justify-between">
                 <TabsList>
-                  {queryParams.length + pathParams.length > 0 && (
-                    <TabsTrigger value="parameters">Parameters</TabsTrigger>
-                  )}
+                  <TabsTrigger value="parameters">
+                    Parameters
+                    {(formState.pathParams.some((p) => p.value !== "") ||
+                      formState.queryParams.some((p) => p.active)) && (
+                      <div className="w-2 h-2 rounded-full bg-blue-400 ml-2" />
+                    )}
+                  </TabsTrigger>
                   <TabsTrigger value="headers">
-                    Headers{" "}
-                    {formState.headers.length > 0 &&
-                      `(${formState.headers.length})`}
+                    Headers
+                    {formState.headers.filter((h) => h.active).length > 0 && (
+                      <div className="w-2 h-2 rounded-full bg-blue-400 ml-2" />
+                    )}
                   </TabsTrigger>
-                  <TabsTrigger
-                    value="body"
-                    disabled={
-                      !["POST", "PUT", "PATCH", "DELETE"].includes(
-                        method.toUpperCase(),
-                      )
-                    }
-                  >
+                  <TabsTrigger value="auth">
+                    Auth
+                    {formState.identity !== NO_IDENTITY && (
+                      <div className="w-2 h-2 rounded-full bg-blue-400 ml-2" />
+                    )}
+                  </TabsTrigger>
+                  <TabsTrigger value="body">
                     Body
+                    {formState.body && (
+                      <div className="w-2 h-2 rounded-full bg-blue-400 ml-2" />
+                    )}
                   </TabsTrigger>
                 </TabsList>
-                <div className="flex gap-2 items-center">
-                  Auth:
-                  <Select
-                    onValueChange={(value) => setValue("identity", value)}
-                    value={formState.identity}
-                    defaultValue={formState.identity}
-                  >
-                    <SelectTrigger className="w-[180px] flex">
-                      {identities.isPending ? <Spinner /> : <SelectValue />}
-                    </SelectTrigger>
-                    <SelectContent align="center">
-                      <SelectItem value={NO_IDENTITY}>None</SelectItem>
-                      {identities.data?.map((identity) => (
-                        <SelectItem key={identity.id} value={identity.id}>
-                          {identity.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
               </div>
               <TabsContent value="headers">
-                <Headers control={control} register={register} />
+                <Headers control={control} headers={headers} />
               </TabsContent>
               <TabsContent value="parameters">
                 {pathParams.length > 0 && (
                   <div className="flex flex-col gap-4 my-4">
                     <span className="font-semibold">Path Parameters</span>
-                    <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={queryParams} />
+                    <PathParams url={url} control={control} />
                   </div>
                 )}
+                <div className="flex flex-col gap-4 my-4">
+                  <span className="font-semibold">Query Parameters</span>
+                  <QueryParams control={control} queryParams={queryParams} />
+                </div>
               </TabsContent>
               <TabsContent value="body">
-                <textarea
+                {!["POST", "PUT", "PATCH", "DELETE"].includes(
+                  method.toUpperCase(),
+                ) && (
+                  <Alert className="mb-2">
+                    <InfoIcon className="w-4 h-4" />
+                    <AlertTitle>Body</AlertTitle>
+                    <AlertDescription>
+                      Body is only supported for POST, PUT, PATCH, and DELETE
+                      requests
+                    </AlertDescription>
+                  </Alert>
+                )}
+                <Textarea
                   {...register("body")}
-                  className="border w-full rounded p-2 bg-muted h-40"
+                  className={cn(
+                    "border w-full rounded-lg bg-muted/40 p-2 h-64 font-mono text-[13px]",
+                    !isBodySupported && "h-20 bg-muted",
+                  )}
+                  placeholder={
+                    !isBodySupported
+                      ? "This request does not support a body"
+                      : undefined
+                  }
+                  disabled={!isBodySupported}
                 />
-              </TabsContent>
-            </Tabs>
-          </div>
-          <div className="min-w-0 p-8 bg-muted/70">
-            {queryMutation.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>
+                {isBodySupported && (
+                  <div className="flex items-center gap-2 mt-2 justify-between">
+                    <Select
+                      value={formState.bodyContentType}
+                      onValueChange={(value) =>
+                        setValue(
+                          "bodyContentType",
+                          value as keyof typeof bodyContentTypeMap,
+                        )
+                      }
+                    >
+                      <SelectTrigger className="w-[100px]">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {Object.keys(bodyContentTypeMap).map((format) => (
+                          <SelectItem key={format} value={format}>
+                            {format}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    {examples && examples.length > 0 && (
+                      <ExamplesDropdown
+                        examples={examples}
+                        onSelect={(example, mediaType) => {
+                          setValue(
+                            "body",
+                            JSON.stringify(example.value, null, 2),
+                          );
+
+                          const format = objectEntries(bodyContentTypeMap).find(
+                            ([_, contentType]) => contentType === mediaType,
+                          )?.[0];
+
+                          if (format) {
+                            setValue("bodyContentType", format);
+                          }
+                        }}
+                      />
+                    )}
+                  </div>
                 )}
-                <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">
-                <div className="flex gap-2">
-                  <div className="flex text-xs gap-6">
-                    <div>
-                      Status: {queryMutation.data.status}{" "}
-                      {statusCodeMap[queryMutation.data.status] ?? ""}
-                    </div>
-                    <div>Time: {queryMutation.data.time.toFixed(0)}ms</div>
-                    <div>Size: {queryMutation.data.size} B</div>
+              </TabsContent>
+              <TabsContent value="auth">
+                <div className="flex flex-col gap-4 my-4">
+                  {identities.data?.length === 0 && (
+                    <Alert>
+                      <InfoIcon className="w-4 h-4" />
+                      <AlertTitle>Authentication</AlertTitle>
+                      <AlertDescription>
+                        No identities found. Please create an identity first.
+                      </AlertDescription>
+                    </Alert>
+                  )}
+                  <div className="flex flex-col items-center gap-2">
+                    <IdentitySelector
+                      value={formState.identity}
+                      identities={identities.data ?? []}
+                      setValue={(value) => setValue("identity", value)}
+                    />
                   </div>
                 </div>
-                <Tabs defaultValue="response">
-                  <TabsList>
-                    <TabsTrigger value="response">Response</TabsTrigger>
-                    <TabsTrigger value="headers">
-                      {headerEntries.length
-                        ? `Headers (${headerEntries.length})`
-                        : "No headers"}
-                    </TabsTrigger>
-                  </TabsList>
-
-                  <TabsContent value="response">
-                    <ResponseTab
-                      headers={queryMutation.data.headers}
-                      body={queryMutation.data.body}
-                    />
-                  </TabsContent>
-                  <TabsContent value="headers">
-                    <Card
-                      // playground dialog has h-5/6 ≈ 83.333vh
-                      className="max-h-[calc(83.333vh-140px)] overflow-y-auto grid grid-cols-2 w-full gap-2.5 font-mono text-xs shadow-none p-4"
-                    >
-                      <div className="font-semibold">Key</div>
-                      <div className="font-semibold">Value</div>
-                      {headerEntries.map(([key, value]) => (
-                        <Fragment key={key}>
-                          <div>{key}</div>
-                          <div className="break-words">{value}</div>
-                        </Fragment>
-                      ))}
-                    </Card>
-                  </TabsContent>
-                </Tabs>
-              </div>
-            ) : (
-              <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>
-              </div>
-            )}
+              </TabsContent>
+            </Tabs>
           </div>
+          <ResultPanel
+            queryMutation={queryMutation}
+            showPathParamsWarning={formState.pathParams.some(
+              (p) => p.value === "",
+            )}
+            showLongRunningWarning={showLongRunningWarning}
+            onCancel={() => {
+              abortControllerRef.current?.abort(
+                "Request cancelled by the user",
+              );
+              setShowLongRunningWarning(false);
+            }}
+          />
         </div>
       </form>
     </FormProvider>