From cde6f2ec16351fea9c57b3855a2abccfa6df3aed Mon Sep 17 00:00:00 2001
From: Brett Jephson <brett@gitbook.io>
Date: Thu, 12 Sep 2024 16:46:18 +0100
Subject: [PATCH] Update server choice based on selection

---
 bun.lockb                                     | Bin 674336 -> 674368 bytes
 .../DocumentView/OpenAPI/OpenAPI.tsx          |  13 +++----
 .../components/DocumentView/OpenAPI/style.css |   4 +++
 .../react-openapi/src/OpenAPICodeSample.tsx   |   1 -
 .../react-openapi/src/OpenAPIOperation.tsx    |  20 ++---------
 .../react-openapi/src/OpenAPIServerURL.tsx    |  15 ++++----
 .../src/OpenAPIServerURLForm.tsx              |  32 ++++++++++++------
 .../react-openapi/src/ScalarApiButton.tsx     |   8 ++---
 packages/react-openapi/src/ServerSelector.tsx |  26 ++++++++++++++
 packages/react-openapi/src/types.ts           |  11 ++++--
 10 files changed, 81 insertions(+), 49 deletions(-)
 create mode 100644 packages/react-openapi/src/ServerSelector.tsx

diff --git a/bun.lockb b/bun.lockb
index 342942d7dad954feaa623a275c46a94369468d07..740bfbf011c5b8e7b0bc4eba1c0fc22f720dad9d 100755
GIT binary patch
delta 24790
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

delta 24728
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

diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx
index ee96a211e5..438c3ca27e 100644
--- a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx
+++ b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx
@@ -49,6 +49,7 @@ async function OpenAPIBody(props: BlockProps<DocumentBlockSwagger>) {
         context.searchParams && context.searchParams.block === block.key
             ? parseModifiers(data, context.searchParams)
             : undefined;
+
     return (
         <OpenAPIOperation
             data={data}
@@ -101,14 +102,14 @@ function parseModifiers(data: OpenAPIOperationData, params: Record<string, strin
     if (!data) {
         return;
     }
-    const { servers } = params;
+    const { server: serverQueryParam } = params;
     const serverIndex =
-        servers && !isNaN(Number(servers))
-            ? Math.min(0, Math.max(Number(servers), servers.length - 1))
+        serverQueryParam && !isNaN(Number(serverQueryParam))
+            ? Math.max(0, Math.min(Number(serverQueryParam), data.servers.length - 1))
             : 0;
     const server = data.servers[serverIndex];
-    if (server && server.variables) {
-        return Object.keys(server.variables).reduce<Record<string, number>>(
+    if (server) {
+        return Object.keys(server.variables ?? {}).reduce<Record<string, number>>(
             (result, key) => {
                 const selection = Number(params[key]);
                 if (!isNaN(selection)) {
@@ -116,7 +117,7 @@ function parseModifiers(data: OpenAPIOperationData, params: Record<string, strin
                 }
                 return result;
             },
-            { servers: serverIndex },
+            { server: serverIndex },
         );
     }
 }
diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
index a3c1a6ff91..419ce77d0c 100644
--- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
+++ b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
@@ -363,3 +363,7 @@
 .openapi-markdown > *:last-child {
     @apply mb-0;
 }
+
+.openapi-server-button {
+    @apply disabled:opacity-5;
+}
\ No newline at end of file
diff --git a/packages/react-openapi/src/OpenAPICodeSample.tsx b/packages/react-openapi/src/OpenAPICodeSample.tsx
index 2230743a27..6212dee17f 100644
--- a/packages/react-openapi/src/OpenAPICodeSample.tsx
+++ b/packages/react-openapi/src/OpenAPICodeSample.tsx
@@ -36,7 +36,6 @@ export function OpenAPICodeSample(props: {
 
     const requestBody = noReference(data.operation.requestBody);
     const requestBodyContent = requestBody ? Object.entries(requestBody.content)[0] : undefined;
-
     const input: CodeSampleInput = {
         url: getServersURL(data.servers, context.enumSelectors) + data.path,
         method: data.method,
diff --git a/packages/react-openapi/src/OpenAPIOperation.tsx b/packages/react-openapi/src/OpenAPIOperation.tsx
index a6f4950978..fb1daa951a 100644
--- a/packages/react-openapi/src/OpenAPIOperation.tsx
+++ b/packages/react-openapi/src/OpenAPIOperation.tsx
@@ -28,9 +28,8 @@ export async function OpenAPIOperation(props: {
         enumSelectors: context.enumSelectors,
     };
 
-    const config = await getConfiguration(context);
     return (
-        <ScalarApiClient>
+        <ScalarApiClient serverUrl={getServersURL(data.servers, context.enumSelectors)}>
             <div className={classNames('openapi-operation', className)}>
                 <div className="openapi-intro">
                     <h2 className="openapi-summary" id={context.id}>
@@ -49,8 +48,7 @@ export async function OpenAPIOperation(props: {
                             {method.toUpperCase()}
                         </span>
                         <span className="openapi-url">
-                            <OpenAPIServerURL servers={servers} context={clientContext} />
-                            {path}
+                            <OpenAPIServerURL servers={servers} context={clientContext} path={path} />
                         </span>
                     </div>
                 </div>
@@ -69,17 +67,3 @@ export async function OpenAPIOperation(props: {
         </ScalarApiClient>
     );
 }
-
-async function getConfiguration(context: OpenAPIContextProps) {
-    const response = await fetch(context.specUrl);
-    const doc = await response.json();
-
-    return {
-        spec: {
-            content: {
-                ...doc,
-                servers: [{ url: getServersURL(doc.servers, context.enumSelectors) }],
-            },
-        },
-    };
-}
diff --git a/packages/react-openapi/src/OpenAPIServerURL.tsx b/packages/react-openapi/src/OpenAPIServerURL.tsx
index 79973d6219..c30517a9d5 100644
--- a/packages/react-openapi/src/OpenAPIServerURL.tsx
+++ b/packages/react-openapi/src/OpenAPIServerURL.tsx
@@ -3,6 +3,7 @@ import { OpenAPIV3 } from 'openapi-types';
 import { OpenAPIServerURLVariable } from './OpenAPIServerURLVariable';
 import { OpenAPIClientContext } from './types';
 import { ServerURLForm } from './OpenAPIServerURLForm';
+import { ServerSelector } from './ServerSelector';
 
 /**
  * Show the url of the server with variables replaced by their default values.
@@ -10,16 +11,17 @@ import { ServerURLForm } from './OpenAPIServerURLForm';
 export function OpenAPIServerURL(props: {
     servers: OpenAPIV3.ServerObject[];
     context: OpenAPIClientContext;
+    path?: string;
 }) {
-    const { servers, context } = props;
-    const serverIndex = context.enumSelectors?.servers ?? 0;
+    const { path, servers, context } = props;
+    const serverIndex = context.enumSelectors?.server ?? 0;
     const server = servers[serverIndex];
     const parts = parseServerURL(server?.url ?? '');
 
     return (
-        <ServerURLForm context={context} server={server}>
+        <ServerURLForm context={context} servers={servers} serverIndex={serverIndex}>
             {parts.map((part, i) => {
-                if (part.kind === 'text') {
+                if (part.kind === 'text') { 
                     return <span key={i}>{part.text}</span>;
                 } else {
                     if (!server.variables?.[part.name]) {
@@ -35,7 +37,7 @@ export function OpenAPIServerURL(props: {
                         />
                     );
                 }
-            })}
+            })}{path}
         </ServerURLForm>
     );
 }
@@ -47,7 +49,8 @@ export function getServersURL(
     servers: OpenAPIV3.ServerObject[],
     selectors?: Record<string, number>,
 ): string {
-    const server = servers[0];
+    const serverIndex = selectors && !isNaN(selectors.server) ? Number(selectors.server) : 0;
+    const server = servers[serverIndex];
     const parts = parseServerURL(server?.url ?? '');
 
     return parts
diff --git a/packages/react-openapi/src/OpenAPIServerURLForm.tsx b/packages/react-openapi/src/OpenAPIServerURLForm.tsx
index 5651084171..2818bbbf64 100644
--- a/packages/react-openapi/src/OpenAPIServerURLForm.tsx
+++ b/packages/react-openapi/src/OpenAPIServerURLForm.tsx
@@ -4,25 +4,34 @@ import * as React from 'react';
 import { useRouter } from 'next/navigation';
 import { OpenAPIClientContext } from './types';
 import { OpenAPIV3 } from 'openapi-types';
-import { useApiClientModal } from '@scalar/api-client-react';
+import { ServerSelector } from './ServerSelector';
 
 export function ServerURLForm(props: {
     children: React.ReactNode;
     context: OpenAPIClientContext;
-    server: OpenAPIV3.ServerObject;
+    servers: OpenAPIV3.ServerObject[];
+    serverIndex: number;
 }) {
-    const { children, context, server } = props;
+    const { children, context, servers, serverIndex } = props;
     const router = useRouter();
-    const client = useApiClientModal();
     const [isPending, startTransition] = React.useTransition();
+    
+    const server = servers[serverIndex];
+    const formRef = React.useRef<HTMLFormElement>(null);
 
-    function updateServerUrl(formData: FormData) {
+    function switchServer(index: number) {
         startTransition(() => {
-            if (!server.variables) {
-                return;
+            if (index !== serverIndex) {
+                let params = new URLSearchParams(`block=${context.blockKey}&server=${index ?? '0'}`);
+                router.push(`?${params}`, { scroll: false });
             }
-            let params = new URLSearchParams(`block=${context.blockKey}`);
-            const variableKeys = Object.keys(server.variables);
+        });
+    }
+
+    function updateServerVariables(formData: FormData) {
+        startTransition(() => {
+            let params = new URLSearchParams(`block=${context.blockKey}&server=${formData.get('server') ?? '0'}`);
+            const variableKeys = Object.keys(server.variables ?? {});
             for (const pair of formData.entries()) {
                 if (variableKeys.includes(pair[0]) && !isNaN(Number(pair[1]))) {
                     params.set(pair[0], `${pair[1]}`);
@@ -33,10 +42,11 @@ export function ServerURLForm(props: {
     }
 
     return (
-        <form action={updateServerUrl} className="contents">
+        <form ref={formRef} action={updateServerVariables} className="contents">
             <fieldset disabled={isPending} className="contents">
                 <input type="hidden" name="block" value={context.blockKey} />
-                <span>{children}</span>
+                {children}
+                { servers.length > 1 ? <ServerSelector servers={servers} currentIndex={serverIndex} onChange={switchServer} /> : null }
             </fieldset>
         </form>
     );
diff --git a/packages/react-openapi/src/ScalarApiButton.tsx b/packages/react-openapi/src/ScalarApiButton.tsx
index 02d9ffaa18..60b7f1586c 100644
--- a/packages/react-openapi/src/ScalarApiButton.tsx
+++ b/packages/react-openapi/src/ScalarApiButton.tsx
@@ -55,8 +55,8 @@ export function ScalarApiButton(props: {
 /**
  * Wrap the rendering with a context to open the scalar modal.
  */
-export function ScalarApiClient(props: { children: React.ReactNode }) {
-    const { children } = props;
+export function ScalarApiClient(props: { children: React.ReactNode; serverUrl?: string }) {
+    const { children, serverUrl } = props;
 
     const [active, setActive] = React.useState<null | {
         operationData: OpenAPIOperationData | null;
@@ -125,12 +125,12 @@ export function ScalarApiClient(props: { children: React.ReactNode }) {
             headers: request.headers.map((header: Header) => {
                 return { ...header, enabled: true };
             }),
-            url: operationData.servers[0]?.url,
+            url: serverUrl ?? operationData.servers[0]?.url,
             body: request.postData?.text,
         };
 
         return data;
-    }, [active]);
+    }, [active, serverUrl]);
 
     return (
         <ScalarContext.Provider value={open}>
diff --git a/packages/react-openapi/src/ServerSelector.tsx b/packages/react-openapi/src/ServerSelector.tsx
new file mode 100644
index 0000000000..a235b7b672
--- /dev/null
+++ b/packages/react-openapi/src/ServerSelector.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import * as React from 'react';
+
+export function ServerSelector(props: { currentIndex: number; onChange: (value:number) => void; servers: any[] }) {
+    const { currentIndex, onChange, servers } = props;
+    const [index, setIndex] = React.useState(currentIndex);
+
+    React.useEffect(() => {
+        onChange(index);
+    }, [index]);
+
+    return <span className="inline-flex pl-4 gap-2">
+        <input type="hidden" value={`${index}`} name="server" />
+        <button className="openapi-server-button" disabled={index === 0} onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIndex((index) => index - 1);
+        }} type="button" aria-label="Previous">◀</button>
+        <button className="openapi-server-button" disabled={index >= servers.length - 1} onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIndex((index) => index + 1);
+        }} type="button" aria-label="Next">▶</button>
+    </span>;
+}
\ No newline at end of file
diff --git a/packages/react-openapi/src/types.ts b/packages/react-openapi/src/types.ts
index b278f2efd0..215d8ef561 100644
--- a/packages/react-openapi/src/types.ts
+++ b/packages/react-openapi/src/types.ts
@@ -15,15 +15,20 @@ export interface OpenAPIClientContext {
      * @default false
      */
     defaultInteractiveOpened?: boolean;
+    
     /**
      * The key of the block
      */
     blockKey?: string;
-    /** Optional id attached to the OpenAPI Operation heading and used as an anchor */
-    id?: string;
 
-    blockKey?: string;
+    /** 
+     * Optional id attached to the OpenAPI Operation heading and used as an anchor
+     */
+    id?: string;
 
+    /**
+     * Selectors to update openapi enums, e.g. for server url variables
+     */
     enumSelectors?: Record<string, number>;
 }