docusaurus-theme-openapi-docs 4.5.1 → 4.7.0

package/src/theme/ApiExplorer/Authorization/index.tsx

@@ -7,10 +7,12 @@
 
 import React from "react";
 
+import { translate } from "@docusaurus/Translate";
 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_AUTH } from "@theme/translationIds";
 
 import { setAuthData, setSelectedAuth } from "./slice";
 
@@ -32,11 +34,16 @@ function Authorization() {
   return (
     <div>
       {optionKeys.length > 1 && (
-        <FormItem label="Security Scheme">
+        <FormItem
+          label={translate({
+            id: OPENAPI_AUTH.SECURITY_SCHEME,
+            message: "Security Scheme",
+          })}
+        >
           <FormSelect
             options={optionKeys}
             value={selected}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
               dispatch(setSelectedAuth(e.target.value));
             }}
           />
@@ -45,9 +52,18 @@ function Authorization() {
       {selectedAuth.map((a: any) => {
         if (a.type === "http" && a.scheme === "bearer") {
           return (
-            <FormItem label="Bearer Token" key={a.key + "-bearer"}>
+            <FormItem
+              label={translate({
+                id: OPENAPI_AUTH.BEARER_TOKEN,
+                message: "Bearer Token",
+              })}
+              key={a.key + "-bearer"}
+            >
               <FormTextInput
-                placeholder="Bearer Token"
+                placeholder={translate({
+                  id: OPENAPI_AUTH.BEARER_TOKEN,
+                  message: "Bearer Token",
+                })}
                 password
                 value={data[a.key].token ?? ""}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -67,9 +83,18 @@ function Authorization() {
 
         if (a.type === "oauth2") {
           return (
-            <FormItem label="Bearer Token" key={a.key + "-oauth2"}>
+            <FormItem
+              label={translate({
+                id: OPENAPI_AUTH.BEARER_TOKEN,
+                message: "Bearer Token",
+              })}
+              key={a.key + "-oauth2"}
+            >
               <FormTextInput
-                placeholder="Bearer Token"
+                placeholder={translate({
+                  id: OPENAPI_AUTH.BEARER_TOKEN,
+                  message: "Bearer Token",
+                })}
                 password
                 value={data[a.key].token ?? ""}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -90,9 +115,17 @@ function Authorization() {
         if (a.type === "http" && a.scheme === "basic") {
           return (
             <React.Fragment key={a.key + "-basic"}>
-              <FormItem label="Username">
+              <FormItem
+                label={translate({
+                  id: OPENAPI_AUTH.USERNAME,
+                  message: "Username",
+                })}
+              >
                 <FormTextInput
-                  placeholder="Username"
+                  placeholder={translate({
+                    id: OPENAPI_AUTH.USERNAME,
+                    message: "Username",
+                  })}
                   value={data[a.key].username ?? ""}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                     const value = e.target.value;
@@ -106,9 +139,17 @@ function Authorization() {
                   }}
                 />
               </FormItem>
-              <FormItem label="Password">
+              <FormItem
+                label={translate({
+                  id: OPENAPI_AUTH.PASSWORD,
+                  message: "Password",
+                })}
+              >
                 <FormTextInput
-                  placeholder="Password"
+                  placeholder={translate({
+                    id: OPENAPI_AUTH.PASSWORD,
+                    message: "Password",
+                  })}
                   password
                   value={data[a.key].password ?? ""}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {

package/src/theme/ApiExplorer/Authorization/slice.ts

@@ -58,7 +58,7 @@ export function createAuth({
   };
   options?: ThemeConfig["api"];
 }): AuthState {
-  const storage = createStorage("sessionStorage");
+  const storage = createStorage(opts?.authPersistence ?? "sessionStorage");
 
   let data: AuthState["data"] = {};
   let options: AuthState["options"] = {};

package/src/theme/ApiExplorer/Body/FileArrayFormBodyItem/index.tsx

@@ -0,0 +1,77 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import React, { useState } from "react";
+import FormFileUpload from "@theme/ApiExplorer/FormFileUpload";
+import { useTypedDispatch } from "@theme/ApiItem/hooks";
+import { FileContent, setFileArrayFormBody } from "../slice";
+
+interface FileArrayFormItemProps {
+  id: string;
+  description: string | undefined;
+}
+
+export default function FileArrayFormBodyItem({
+  id,
+  description,
+}: FileArrayFormItemProps): React.JSX.Element {
+  const dispatch = useTypedDispatch();
+  const [fileItems, setFileItems] = useState<
+    Map<number, FileContent["value"] | undefined>
+  >(new Map([[0, undefined]]));
+
+  const handleFileChange = (index: number, file: any) => {
+    const newItems = new Map(fileItems);
+
+    if (file === undefined) {
+      newItems.delete(index);
+
+      setFileItems(newItems);
+
+      dispatch(
+        setFileArrayFormBody({
+          key: id,
+          value: [...newItems.values()].filter((item) => item !== undefined),
+        })
+      );
+      return;
+    }
+
+    let maxIndex = 0;
+
+    newItems.keys().forEach((item) => {
+      maxIndex = item > maxIndex ? item : maxIndex;
+    });
+    newItems.set(index, {
+      src: `/path/to/${file.name}`,
+      content: file,
+    });
+    newItems.set(index + 1, undefined);
+
+    setFileItems(newItems);
+
+    dispatch(
+      setFileArrayFormBody({
+        key: id,
+        value: [...newItems.values()].filter((item) => item !== undefined),
+      })
+    );
+  };
+
+  return (
+    <div>
+      {[...fileItems.keys()].map((index) => (
+        <div key={index}>
+          <FormFileUpload
+            placeholder={description || id}
+            onChange={(file: any) => handleFileChange(index, file)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,120 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import React from "react";
+import FormFileUpload from "@theme/ApiExplorer/FormFileUpload";
+import FormSelect from "@theme/ApiExplorer/FormSelect";
+import FormTextInput from "@theme/ApiExplorer/FormTextInput";
+import LiveApp from "@theme/ApiExplorer/LiveEditor";
+import { useTypedDispatch } from "@theme/ApiItem/hooks";
+import { SchemaObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
+import { clearFormBodyKey, setFileFormBody, setStringFormBody } from "../slice";
+import FileArrayFormBodyItem from "../FileArrayFormBodyItem";
+
+interface FormBodyItemProps {
+  schemaObject: SchemaObject;
+  id: string;
+  schema: SchemaObject;
+}
+
+export default function FormBodyItem({
+  schemaObject,
+  id,
+  schema,
+}: FormBodyItemProps): React.JSX.Element {
+  const dispatch = useTypedDispatch();
+
+  if (
+    schemaObject.type === "array" &&
+    schemaObject.items?.format === "binary"
+  ) {
+    return (
+      <FileArrayFormBodyItem id={id} description={schemaObject.description} />
+    );
+  }
+
+  if (schemaObject.format === "binary") {
+    return (
+      <FormFileUpload
+        placeholder={schemaObject.description || id}
+        onChange={(file: any) => {
+          if (file === undefined) {
+            dispatch(clearFormBodyKey(id));
+            return;
+          }
+          dispatch(
+            setFileFormBody({
+              key: id,
+              value: {
+                src: `/path/to/${file.name}`,
+                content: file,
+              },
+            })
+          );
+        }}
+      />
+    );
+  }
+
+  if (
+    schemaObject.type === "object" &&
+    (schemaObject.example || schemaObject.examples)
+  ) {
+    const objectExample = JSON.stringify(
+      schemaObject.example ?? schemaObject.examples[0],
+      null,
+      2
+    );
+
+    return (
+      <LiveApp
+        action={(code: string) =>
+          dispatch(setStringFormBody({ key: id, value: code }))
+        }
+      >
+        {objectExample}
+      </LiveApp>
+    );
+  }
+
+  if (
+    schemaObject.enum &&
+    schemaObject.enum.every((value) => typeof value === "string")
+  ) {
+    return (
+      <FormSelect
+        options={["---", ...schemaObject.enum]}
+        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+          const val = e.target.value;
+          if (val === "---") {
+            dispatch(clearFormBodyKey(id));
+          } else {
+            dispatch(
+              setStringFormBody({
+                key: id,
+                value: val,
+              })
+            );
+          }
+        }}
+      />
+    );
+  }
+  // TODO: support all the other types.
+  return (
+    <FormTextInput
+      paramName={id}
+      isRequired={
+        Array.isArray(schema.required) && schema.required.includes(id)
+      }
+      placeholder={schemaObject.description || id}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+        dispatch(setStringFormBody({ key: id, value: e.target.value }));
+      }}
+    />
+  );
+}