From a6adfaaf27049be679cfd5491494bee411e1ac8d Mon Sep 17 00:00:00 2001
From: Brett Jephson <brett@gitbook.io>
Date: Fri, 20 Sep 2024 11:27:27 +0100
Subject: [PATCH] Add icons for editing url

---
 .../components/DocumentView/OpenAPI/OpenAPI.tsx |  2 ++
 .../components/DocumentView/OpenAPI/style.css   | 17 ++++++++++++++---
 packages/react-openapi/src/OpenAPIOperation.tsx |  2 +-
 .../react-openapi/src/OpenAPIServerURLForm.tsx  |  5 +++--
 packages/react-openapi/src/ServerSelector.tsx   |  4 ++--
 packages/react-openapi/src/types.ts             |  2 ++
 6 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx
index 05c094467..1c907c928 100644
--- a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx
+++ b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx
@@ -54,6 +54,8 @@ async function OpenAPIBody(props: BlockProps<DocumentBlockSwagger>) {
                     icons: {
                         chevronDown: <Icon icon="chevron-down" />,
                         chevronRight: <Icon icon="chevron-right" />,
+                        edit: <Icon icon="edit" />,
+                        clear: <Icon icon="x" />
                     },
                     CodeBlock: PlainCodeBlock,
                     defaultInteractiveOpened: context.mode === 'print',
diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
index 6bd0206ad..cd2c8b5ca 100644
--- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
+++ b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
@@ -57,7 +57,7 @@
 /** URL */
 
 .openapi-url {
-    @apply font-mono text-sm text-dark/8 dark:text-light/8;
+    @apply flex items-center font-mono text-sm text-dark/8 dark:text-light/8;
 }
 
 .openapi-url-var {
@@ -365,6 +365,17 @@
     @apply mb-0;
 }
 
-.openapi-server-button {
-    @apply disabled:opacity-5;
+.openapi-select-button,
+.openapi-edit-button {
+    @apply p-0.5 inline-flex text-dark/6 dark:text-light/6 hover:opacity-8;
+}
+
+.openapi-edit-button { @apply p-0.5 ml-4 size-4; }
+
+.openapi-edit-button > * {
+    @apply size-full;
+}
+
+.openapi-select-button {
+    @apply leading-[1cap] disabled:opacity-5;
 }
diff --git a/packages/react-openapi/src/OpenAPIOperation.tsx b/packages/react-openapi/src/OpenAPIOperation.tsx
index b0a2b0325..e4a643303 100644
--- a/packages/react-openapi/src/OpenAPIOperation.tsx
+++ b/packages/react-openapi/src/OpenAPIOperation.tsx
@@ -37,7 +37,7 @@ export async function OpenAPIOperation(props: {
                     {operation.description ? (
                         <Markdown className="openapi-description" source={operation.description} />
                     ) : null}
-                    <div className="openapi-target">
+                    <div className="openapi-target flex items-center">
                         <span
                             className={classNames(
                                 'openapi-method',
diff --git a/packages/react-openapi/src/OpenAPIServerURLForm.tsx b/packages/react-openapi/src/OpenAPIServerURLForm.tsx
index 36ee6df57..957d8d566 100644
--- a/packages/react-openapi/src/OpenAPIServerURLForm.tsx
+++ b/packages/react-openapi/src/OpenAPIServerURLForm.tsx
@@ -49,6 +49,7 @@ export function ServerURLForm(props: {
         });
     }
 
+    const isEditable = servers.length > 1 || server.variables;
     return (
         <form ref={formRef} onSubmit={e => { e.preventDefault(); updateServerVariables(new FormData(e.currentTarget)); }} className="contents">
             <fieldset disabled={ctx?.isPending} className="contents">
@@ -61,11 +62,11 @@ export function ServerURLForm(props: {
                     onChange={switchServer}
                     />
                 ) : null}
-                <button className='inline-flex pl-4' onClick={() => { 
+                 { isEditable ? <button className='openapi-edit-button ml-2' onClick={() => { 
                     const state = { ...ctx?.state };
                     delete state.edit;
                     update({ server: `${serverIndex}`, ...state, ...(ctx?.state?.edit ? undefined : { edit: 'true' }) });
-                }} aria-label={ctx?.state?.edit ? "Clear" : "Edit"}>{ctx?.state?.edit ? 'X' : 'Edit'}</button>
+                }} title={ctx?.state?.edit ? undefined : "Try different server options"} aria-label={ctx?.state?.edit ? "Clear" : "Edit"}>{ctx?.state?.edit ? context.icons.clear : context.icons.edit}</button> : null}
             </fieldset>
         </form>
     );
diff --git a/packages/react-openapi/src/ServerSelector.tsx b/packages/react-openapi/src/ServerSelector.tsx
index 53051e3b8..bd2997619 100644
--- a/packages/react-openapi/src/ServerSelector.tsx
+++ b/packages/react-openapi/src/ServerSelector.tsx
@@ -18,7 +18,7 @@ export function ServerSelector(props: {
         <span className="inline-flex pl-4 gap-2">
             <input type="hidden" value={`${index}`} name="server" />
             <button
-                className="openapi-server-button"
+                className="openapi-select-button"
                 disabled={index === 0}
                 onClick={(e) => {
                     e.preventDefault();
@@ -31,7 +31,7 @@ export function ServerSelector(props: {
                 ◀
             </button>
             <button
-                className="openapi-server-button"
+                className="openapi-select-button"
                 disabled={index >= servers.length - 1}
                 onClick={(e) => {
                     e.preventDefault();
diff --git a/packages/react-openapi/src/types.ts b/packages/react-openapi/src/types.ts
index 90d9889bd..8eb46eb10 100644
--- a/packages/react-openapi/src/types.ts
+++ b/packages/react-openapi/src/types.ts
@@ -8,6 +8,8 @@ export interface OpenAPIClientContext {
     icons: {
         chevronDown: React.ReactNode;
         chevronRight: React.ReactNode;
+        edit: React.ReactNode;
+        clear: React.ReactNode;
     };
 
     /**