@lukoweb/apitogo 0.2.43 → 0.2.45

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

@@ -1,106 +1,179 @@
-import { Spinner } from "@lukoweb/apitogo/components";
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@lukoweb/apitogo/ui/Alert.js";
-import type { UseMutationResult } from "@tanstack/react-query";
-import { SendIcon, UnplugIcon } from "lucide-react";
-import { Button } from "../../../../ui/Button.js";
-import { cn } from "../../../../util/cn.js";
-import type { PlaygroundResult } from "../Playground.js";
-import ResponseStatusBar from "./ResponseStatusBar.js";
-import { ResponseTab } from "./ResponseTab.js";
-
-export const ResultPanel = ({
-  queryMutation,
-  showLongRunningWarning,
-  onCancel,
-  tip,
-  isFinished,
-  progress,
-}: {
-  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
-  queryMutation: UseMutationResult<PlaygroundResult, Error, any>;
-  showLongRunningWarning?: boolean;
-  onCancel?: () => void;
-  isFinished: boolean;
-  progress: number;
-  tip?: React.ReactNode;
-}) => {
-  return (
-    <div className="flex flex-col overflow-y-auto h-[80vh] bg-muted/50">
-      {(queryMutation.isPending || queryMutation.data) && (
-        <ResponseStatusBar
-          status={queryMutation.data?.status}
-          time={queryMutation.data?.time}
-          size={queryMutation.data?.size}
-          isFinished={isFinished}
-          progress={progress}
-        />
-      )}
-      {queryMutation.error ? (
-        <div className="max-w-2/3 mx-auto mt-20">
-          <Alert>
-            <UnplugIcon size={24} strokeWidth={1.5} className="me-5" />
-            <AlertTitle>Request failed</AlertTitle>
-            <AlertDescription>
-              {queryMutation.error.message ||
-                String(queryMutation.error) ||
-                "Unexpected error"}
-            </AlertDescription>
-          </Alert>
-        </div>
-      ) : queryMutation.data ? (
-        <ResponseTab
-          request={queryMutation.data.request}
-          size={queryMutation.data.size}
-          headers={queryMutation.data.headers}
-          body={queryMutation.data.body}
-          isBinary={queryMutation.data.isBinary}
-          fileName={queryMutation.data.fileName}
-          blob={queryMutation.data.blob}
-        />
-      ) : queryMutation.isPending ? (
-        <div className="grid place-items-center h-full">
-          <div className="flex flex-col gap-2 items-center mt-20">
-            <Spinner />
-            <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>
-        </div>
-      ) : (
-        <div className="h-full grid place-items-center">
-          <div className="flex flex-col gap-4 items-center">
-            <SendIcon
-              size={64}
-              className="text-muted-foreground"
-              strokeWidth={1.2}
-            />
-            <span className="text-[16px] font-semibold text-muted-foreground">
-              Send your first request
-            </span>
-            {tip}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ResultPanel;
+import { Spinner } from "@lukoweb/apitogo/components";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@lukoweb/apitogo/ui/Alert.js";
+import type { UseMutationResult } from "@tanstack/react-query";
+import {
+  HourglassIcon,
+  KeyRoundIcon,
+  SendIcon,
+  UnplugIcon,
+} from "lucide-react";
+import { Button } from "../../../../ui/Button.js";
+import { cn } from "../../../../util/cn.js";
+import type { PlaygroundResult } from "../Playground.js";
+import { WARM_UP_STATUSES } from "../warmUpRetry.js";
+import ResponseStatusBar from "./ResponseStatusBar.js";
+import { ResponseTab } from "./ResponseTab.js";
+
+/** Where a signed-in developer gets an API key on an APItoGo portal with plans. */
+const API_KEYS_PATH = "/account/credentials";
+
+/** What a refused or failed answer means, and what to do about it. */
+const ResultHint = ({
+  status,
+  hasIdentities,
+}: {
+  status: number;
+  hasIdentities: boolean;
+}) => {
+  if (status === 401 || status === 403)
+    return (
+      <Alert className="mx-4 mt-3 w-auto">
+        <KeyRoundIcon size={20} strokeWidth={1.5} />
+        <AlertTitle>This API needs an API key</AlertTitle>
+        <AlertDescription>
+          {hasIdentities ? (
+            <>
+              Choose your key under Authentication above and send the request
+              again. No key yet? Create one on the{" "}
+              <a href={API_KEYS_PATH} className="underline">
+                API keys page
+              </a>
+              : a key you create there is offered here in this browser.
+            </>
+          ) : (
+            <>
+              Create a key on the{" "}
+              <a href={API_KEYS_PATH} className="underline">
+                API keys page
+              </a>{" "}
+              (sign in first if you have not). It is then offered under
+              Authentication here.
+            </>
+          )}
+        </AlertDescription>
+      </Alert>
+    );
+  if (WARM_UP_STATUSES.includes(status))
+    return (
+      <Alert className="mx-4 mt-3 w-auto">
+        <HourglassIcon size={20} strokeWidth={1.5} />
+        <AlertTitle>The API is still starting</AlertTitle>
+        <AlertDescription>
+          An API that was idle takes a few seconds to wake up. Send the request
+          again in a moment.
+        </AlertDescription>
+      </Alert>
+    );
+  return null;
+};
+
+export const ResultPanel = ({
+  queryMutation,
+  showLongRunningWarning,
+  isWarmingUp = false,
+  hasIdentities = false,
+  onCancel,
+  tip,
+  isFinished,
+  progress,
+}: {
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
+  queryMutation: UseMutationResult<PlaygroundResult, Error, any>;
+  showLongRunningWarning?: boolean;
+  /** The API said it is still starting, and the request is sent again in a moment. */
+  isWarmingUp?: boolean;
+  /** The playground offers at least one identity (a key or the signed-in user) under Authentication. */
+  hasIdentities?: boolean;
+  onCancel?: () => void;
+  isFinished: boolean;
+  progress: number;
+  tip?: React.ReactNode;
+}) => {
+  return (
+    <div className="flex flex-col overflow-y-auto h-[80vh] bg-muted/50">
+      {(queryMutation.isPending || queryMutation.data) && (
+        <ResponseStatusBar
+          status={queryMutation.data?.status}
+          time={queryMutation.data?.time}
+          size={queryMutation.data?.size}
+          isFinished={isFinished}
+          progress={progress}
+        />
+      )}
+      {queryMutation.error ? (
+        <div className="max-w-2/3 mx-auto mt-20">
+          <Alert>
+            <UnplugIcon size={24} strokeWidth={1.5} className="me-5" />
+            <AlertTitle>Request failed</AlertTitle>
+            <AlertDescription>
+              {queryMutation.error.message ||
+                String(queryMutation.error) ||
+                "Unexpected error"}
+            </AlertDescription>
+          </Alert>
+        </div>
+      ) : queryMutation.data ? (
+        <>
+          <ResultHint
+            status={queryMutation.data.status}
+            hasIdentities={hasIdentities}
+          />
+          <ResponseTab
+            request={queryMutation.data.request}
+            size={queryMutation.data.size}
+            headers={queryMutation.data.headers}
+            body={queryMutation.data.body}
+            isBinary={queryMutation.data.isBinary}
+            fileName={queryMutation.data.fileName}
+            blob={queryMutation.data.blob}
+          />
+        </>
+      ) : queryMutation.isPending ? (
+        <div className="grid place-items-center h-full">
+          <div className="flex flex-col gap-2 items-center mt-20">
+            <Spinner />
+            <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",
+              )}
+            >
+              {isWarmingUp
+                ? "The API is waking up. Trying again in a few seconds…"
+                : "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>
+        </div>
+      ) : (
+        <div className="h-full grid place-items-center">
+          <div className="flex flex-col gap-4 items-center">
+            <SendIcon
+              size={64}
+              className="text-muted-foreground"
+              strokeWidth={1.2}
+            />
+            <span className="text-[16px] font-semibold text-muted-foreground">
+              Send your first request
+            </span>
+            {tip}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ResultPanel;

package/src/lib/plugins/openapi/playground/warmUpRetry.ts

@@ -0,0 +1,43 @@
+/** What a gateway answers while the API behind it is still starting: it is not ready yet, or it did not answer in time. */
+export const WARM_UP_STATUSES = [502, 503, 504];
+
+const WARM_UP_RETRY_DELAY_MS = 5000;
+
+const wait = (ms: number, signal?: AbortSignal) =>
+  new Promise<void>((resolve, reject) => {
+    const timer = setTimeout(resolve, ms);
+    signal?.addEventListener("abort", () => {
+      clearTimeout(timer);
+      reject(signal.reason);
+    });
+  });
+
+/**
+ * Sends the request, and once more after a short wait when the answer says the API is still starting. A hosted API
+ * that slept goes on answering 502/504 (or, behind an older gateway, a response the browser reports as a network
+ * error) until it is up, which takes a few seconds. A cancelled request is never retried.
+ */
+export async function fetchWithWarmUpRetry(
+  request: Request,
+  init: RequestInit,
+  options: { delayMs?: number; onRetry?: () => void } = {},
+): Promise<Response> {
+  const retry = async () => {
+    options.onRetry?.();
+    await wait(
+      options.delayMs ?? WARM_UP_RETRY_DELAY_MS,
+      init.signal ?? undefined,
+    );
+    return fetch(request, init);
+  };
+
+  // A request body can be read once, so the first try sends a copy.
+  let response: Response;
+  try {
+    response = await fetch(request.clone(), init);
+  } catch (error) {
+    if (init.signal?.aborted || !(error instanceof TypeError)) throw error;
+    return retry();
+  }
+  return WARM_UP_STATUSES.includes(response.status) ? retry() : response;
+}