Update text boxes for 'name' in the branding API to be editable

src/theme/ApiExplorer/Body/FormBodyItem/index.tsx

@@ -102,7 +102,7 @@ export default function FormBodyItem({
   // TODO: support all the other types.
   return (
     <FormTextInput
-      paramName={id}
+      paramName={`body-${id}`}
       isRequired={
         Array.isArray(schema.required) && schema.required.includes(id)
       }

src/theme/ApiExplorer/FormTextInput/index.tsx

@@ -33,26 +33,35 @@ function FormTextInput({
 
   const showErrorMessage = errors?.[paramName]?.message;
 
+  const registration = paramName
+    ? register(paramName, {
+        required: isRequired
+          ? translate({
+              id: OPENAPI_FORM.FIELD_REQUIRED,
+              message: "This field is required",
+            })
+          : false,
+      })
+    : undefined;
+
+  const { onChange: registerOnChange, ...registerProps } = registration ?? {};
+
   return (
     <>
       {paramName ? (
         <input
-          {...register(paramName, {
-            required: isRequired
-              ? translate({
-                  id: OPENAPI_FORM.FIELD_REQUIRED,
-                  message: "This field is required",
-                })
-              : false,
-          })}
+          {...registerProps}
           className={clsx("openapi-explorer__form-item-input", {
             error: showErrorMessage,
           })}
           type={password ? "password" : "text"}
           placeholder={placeholder}
           title={placeholder}
-          value={value}
-          onChange={onChange}
+          {...(value !== undefined ? { value } : {})}
+          onChange={(e) => {
+            registerOnChange?.(e);
+            onChange?.(e);
+          }}
           autoComplete="off"
         />
       ) : (
@@ -61,7 +70,7 @@ function FormTextInput({
           type={password ? "password" : "text"}
           placeholder={placeholder}
           title={placeholder}
-          value={value}
+          {...(value !== undefined ? { value } : {})}
           onChange={onChange}
           autoComplete="off"
         />

src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamTextFormItem.tsx

@@ -13,7 +13,7 @@ export default function ParamTextFormItem({ param }: ParamProps) {
   return (
     <FormTextInput
       isRequired={param.required}
-      paramName={param.name}
+      paramName={`${param.in}-${param.name}`}
       placeholder={param.description || param.name}
       onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
         dispatch(

src/theme/ApiExplorer/Server/index.tsx

@@ -1,17 +1,13 @@
-import React, { useState } from "react";
+import React from 'react';
 
-import { translate } from "@docusaurus/Translate";
-import FloatingButton from "@theme/ApiExplorer/FloatingButton";
-import FormItem from "@theme/ApiExplorer/FormItem";
-import FormSelect from "@theme/ApiExplorer/FormSelect";
-import FormTextInput from "@theme/ApiExplorer/FormTextInput";
-import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
-import { OPENAPI_SERVER } from "@theme/translationIds";
+import FormItem from '@theme/ApiExplorer/FormItem';
+import FormSelect from '@theme/ApiExplorer/FormSelect';
+import FormTextInput from '@theme/ApiExplorer/FormTextInput';
+import {useTypedDispatch, useTypedSelector} from '@theme/ApiItem/hooks';
 
-import { setServer, setServerVariable } from "./slice";
+import {setServer, setServerVariable} from './slice';
 
 function Server() {
-  const [isEditing, setIsEditing] = useState(false);
   const value = useTypedSelector((state: any) => state.server.value);
   const options = useTypedSelector((state: any) => state.server.options);
   const dispatch = useTypedDispatch();
@@ -38,92 +34,61 @@ function Server() {
     }
   }
 
-  if (!isEditing) {
-    let url = "";
-    if (value) {
-      url = value.url.replace(/\/$/, "");
-      if (value.variables) {
-        Object.keys(value.variables).forEach((variable) => {
-          url = url.replace(
-            `{${variable}}`,
-            value.variables?.[variable].default ?? ""
-          );
-        });
-      }
-    }
-    return (
-      <FloatingButton
-        onClick={() => setIsEditing(true)}
-        label={translate({ id: OPENAPI_SERVER.EDIT_BUTTON, message: "Edit" })}
-      >
-        <FormItem>
-          <span className="openapi-explorer__server-url" title={url}>
-            {url}
-          </span>
-        </FormItem>
-      </FloatingButton>
-    );
-  }
   return (
     <div className="openapi-explorer__server-container">
-      <FloatingButton
-        onClick={() => setIsEditing(false)}
-        label={translate({ id: OPENAPI_SERVER.HIDE_BUTTON, message: "Hide" })}
-      >
-        <FormItem>
-          <FormSelect
-            options={options.map((s: any) => s.url)}
-            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-              dispatch(
-                setServer(
-                  JSON.stringify(
-                    options.filter((s: any) => s.url === e.target.value)[0]
-                  )
-                )
-              );
-            }}
-            value={value?.url}
-          />
-          <small className="openapi-explorer__server-description">
-            {value?.description}
-          </small>
-        </FormItem>
-        {value?.variables &&
-          Object.keys(value.variables).map((key) => {
-            if (value.variables?.[key].enum !== undefined) {
-              return (
-                <FormItem label={key}>
-                  <FormSelect
-                    options={value.variables[key].enum}
-                    onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-                      dispatch(
-                        setServerVariable(
-                          JSON.stringify({ key, value: e.target.value })
-                        )
-                      );
-                    }}
-                    value={value?.variables[key].default}
-                  />
-                </FormItem>
-              );
-            }
+      <FormItem>
+        <FormSelect
+          options={options.map((s: any) => s.url)}
+          onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+            dispatch(
+              setServer(
+                JSON.stringify(
+                  options.filter((s: any) => s.url === e.target.value)[0],
+                ),
+              ),
+            );
+          }}
+          value={value?.url}
+        />
+        <small className="openapi-explorer__server-description">
+          {value?.description}
+        </small>
+      </FormItem>
+      {value?.variables &&
+        Object.keys(value.variables).map((key) => {
+          if (value.variables?.[key].enum !== undefined) {
             return (
               <FormItem label={key}>
-                <FormTextInput
-                  placeholder={value.variables?.[key].default}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                <FormSelect
+                  options={value.variables[key].enum}
+                  onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
                     dispatch(
                       setServerVariable(
-                        JSON.stringify({ key, value: e.target.value })
-                      )
+                        JSON.stringify({key, value: e.target.value}),
+                      ),
                     );
                   }}
-                  value={value?.variables?.[key].default}
+                  value={value?.variables[key].default}
                 />
               </FormItem>
             );
-          })}
-      </FloatingButton>
+          }
+          return (
+            <FormItem label={key}>
+              <FormTextInput
+                placeholder={value.variables?.[key].default}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  dispatch(
+                    setServerVariable(
+                      JSON.stringify({key, value: e.target.value}),
+                    ),
+                  );
+                }}
+                value={value?.variables?.[key].default}
+              />
+            </FormItem>
+          );
+        })}
     </div>
   );
 }