Examples rendering for 'multipart/form-data' (#1315)

Co-authored-by: Vladislav Abrosimov <Vladislav.Abrosimov@infowatch.com>

Author: v50553490-cyber

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Body/FileArrayFormBodyItem/index.tsx

@@ -43,11 +43,6 @@ export default function FileArrayFormBodyItem({
       return;
     }
 
-    let maxIndex = 0;
-
-    newItems.keys().forEach((item) => {
-      maxIndex = item > maxIndex ? item : maxIndex;
-    });
     newItems.set(index, {
       src: `/path/to/${file.name}`,
       content: file,

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Body/FormBodyItem/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import FormFileUpload from "@theme/ApiExplorer/FormFileUpload";
 import FormLabel from "@theme/ApiExplorer/FormLabel";
@@ -24,6 +24,7 @@ interface FormBodyItemProps {
   schema: SchemaObject;
   label?: string;
   required?: boolean;
+  exampleValue?: SchemaObject["example"];
 }
 
 export default function FormBodyItem({
@@ -32,8 +33,27 @@ export default function FormBodyItem({
   schema,
   label,
   required,
+  exampleValue,
 }: FormBodyItemProps): React.JSX.Element {
   const dispatch = useTypedDispatch();
+  const [value, setValue] = useState(() => {
+    let initialValue = exampleValue ?? "";
+
+    if (schemaObject.type === "object" && exampleValue) {
+      initialValue = JSON.stringify(exampleValue, null, 2);
+    }
+
+    return initialValue;
+  });
+
+  useEffect(() => {
+    if (value) {
+      dispatch(setStringFormBody({ key: id, value }));
+    } else {
+      dispatch(clearFormBodyKey(id));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   if (
     schemaObject.type === "array" &&
@@ -73,27 +93,18 @@ export default function FormBodyItem({
     );
   }
 
-  if (
-    schemaObject.type === "object" &&
-    (schemaObject.example || schemaObject.examples)
-  ) {
-    const objectExample = JSON.stringify(
-      schemaObject.example ?? schemaObject.examples[0],
-      null,
-      2
-    );
-
+  if (schemaObject.type === "object") {
     return (
-      <>
-        {label && <FormLabel label={label} required={required} />}
-        <LiveApp
-          action={(code: string) =>
-            dispatch(setStringFormBody({ key: id, value: code }))
-          }
-        >
-          {objectExample}
-        </LiveApp>
-      </>
+    <>
+      {label && <FormLabel label={label} required={required} />}
+      <LiveApp
+        action={(code: string) =>
+          dispatch(setStringFormBody({ key: id, value: code }))
+        }
+      >
+        {value}
+      </LiveApp>
+    </>
     );
   }
 
@@ -105,9 +116,11 @@ export default function FormBodyItem({
       <FormSelect
         label={label}
         required={required}
+        value={value}
         options={["---", ...schemaObject.enum]}
         onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
           const val = e.target.value;
+          setValue(val);
           if (val === "---") {
             dispatch(clearFormBodyKey(id));
           } else {
@@ -127,12 +140,14 @@ export default function FormBodyItem({
     <FormTextInput
       label={label}
       required={required}
+      value={value}
       paramName={id}
       isRequired={
         Array.isArray(schema.required) && schema.required.includes(id)
       }
       placeholder={schemaObject.description || id}
       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+        setValue(e.target.value);
         dispatch(setStringFormBody({ key: id, value: e.target.value }));
       }}
     />

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Body/index.tsx

@@ -316,22 +316,86 @@ function Body({
   ) {
     return (
       <FormItem className="openapi-explorer__form-item-body-container">
-        {Object.entries(schema.properties ?? {}).map(([key, val]: any) => {
-          return (
-            <FormItem key={key}>
-              <FormBodyItem
-                schemaObject={val}
-                id={key}
-                schema={schema}
-                label={key}
-                required={
-                  Array.isArray(schema.required) &&
-                  schema.required.includes(key)
+        <SchemaTabs className="openapi-tabs__schema" lazy>
+          {/* @ts-ignore */}
+          <TabItem
+            label={translate({
+              id: OPENAPI_BODY.EXAMPLE_FROM_SCHEMA,
+              message: "Example (from schema)",
+            })}
+            value="Example (from schema)"
+            default
+          >
+            {Object.entries(schema.properties ?? {}).map(([key, val]: any) => {
+              return (
+                <FormItem key={key}>
+                  <FormBodyItem
+                    schemaObject={val}
+                    id={key}
+                    schema={schema}
+                    exampleValue={val.example}
+                    label={key}
+                    required={
+                      Array.isArray(schema.required) &&
+                      schema.required.includes(key)
+                    }
+                  ></FormBodyItem>
+                </FormItem>
+              );
+            })}
+          </TabItem>
+          {example && (
+            // @ts-ignore
+            <TabItem label="Example" value="example">
+              {Object.entries(schema.properties ?? {}).map(
+                ([schemaKey, schemaVal]: any) => {
+                  return (
+                    <FormItem key={schemaKey}>
+                      <FormBodyItem
+                        schemaObject={schemaVal}
+                        id={schemaKey}
+                        schema={schema}
+                        exampleValue={example[schemaKey]}
+                        label={schemaKey}
+                        required={
+                          Array.isArray(schema.required) &&
+                          schema.required.includes(schemaKey)
+                        }
+                      ></FormBodyItem>
+                    </FormItem>
+                  );
                 }
-              />
-            </FormItem>
-          );
-        })}
+              )}
+            </TabItem>
+          )}
+          {examples &&
+            Object.entries(examples).map(([key, value]) => {
+              return (
+                // @ts-ignore
+                <TabItem label={key} value={key} key={key}>
+                  {Object.entries(schema.properties ?? {}).map(
+                    ([schemaKey, schemaVal]: any) => {
+                      return (
+                        <FormItem key={schemaKey}>
+                          <FormBodyItem
+                            schemaObject={schemaVal}
+                            id={schemaKey}
+                            schema={schema}
+                            exampleValue={value.value?.[schemaKey]}
+                            label={schemaKey}
+                            required={
+                              Array.isArray(schema.required) &&
+                              schema.required.includes(schemaKey)
+                            }
+                          ></FormBodyItem>
+                        </FormItem>
+                      );
+                    }
+                  )}
+                </TabItem>
+              );
+            })}
+        </SchemaTabs>
       </FormItem>
     );
   }