Add icons for editing url

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',

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;
 }

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',

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>
     );

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();

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;
     };
 
     /**