docusaurus-theme-openapi-docs 1.2.2 → 1.3.1

package/src/theme/ApiDemoPanel/Body/index.tsx

@@ -7,12 +7,15 @@
 
 import React from "react";
 
+import TabItem from "@theme/TabItem";
 import { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import format from "xml-formatter";
 
+import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
+// @ts-ignore
+import SchemaTabs from "../../SchemaTabs";
 import ContentType from "../ContentType";
 import FormSelect from "../FormSelect";
-import { useTypedDispatch, useTypedSelector } from "../hooks";
 import LiveApp from "../LiveEditor";
 import FormFileUpload from "./../FormFileUpload";
 import FormItem from "./../FormItem";
@@ -82,6 +85,8 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
   // - application/x-www-form-urlencoded
 
   const schema = requestBodyMetadata?.content?.[contentType]?.schema;
+  const example = requestBodyMetadata?.content?.[contentType]?.example;
+  const examples = requestBodyMetadata?.content?.[contentType]?.examples;
 
   if (schema?.format === "binary") {
     return (
@@ -209,34 +214,129 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
   }
 
   let language = "plaintext";
-  let exampleBodyString = ""; //"body content";
+  let defaultBody = ""; //"body content";
+  let exampleBody;
+  let examplesBodies = [] as any;
 
   if (contentType === "application/json" || contentType.endsWith("+json")) {
     if (jsonRequestBodyExample) {
-      exampleBodyString = JSON.stringify(jsonRequestBodyExample, null, 2);
+      defaultBody = JSON.stringify(jsonRequestBodyExample, null, 2);
+    }
+    if (example) {
+      exampleBody = JSON.stringify(example, null, 2);
+    }
+    if (examples) {
+      for (const [key, example] of Object.entries(examples)) {
+        examplesBodies.push({
+          label: key,
+          body: JSON.stringify(example.value, null, 2),
+          summary: example.summary,
+        });
+      }
     }
     language = "json";
   }
 
-  if (contentType === "application/xml") {
+  if (contentType === "application/xml" || contentType.endsWith("+xml")) {
     if (jsonRequestBodyExample) {
       try {
-        exampleBodyString = format(json2xml(jsonRequestBodyExample, ""), {
+        defaultBody = format(json2xml(jsonRequestBodyExample, ""), {
+          indentation: "  ",
+          lineSeparator: "\n",
+          collapseContent: true,
+        });
+      } catch {
+        defaultBody = json2xml(jsonRequestBodyExample);
+      }
+    }
+    if (example) {
+      try {
+        exampleBody = format(json2xml(example, ""), {
           indentation: "  ",
           lineSeparator: "\n",
           collapseContent: true,
         });
       } catch {
-        exampleBodyString = json2xml(jsonRequestBodyExample);
+        exampleBody = json2xml(example);
+      }
+    }
+    if (examples) {
+      for (const [key, example] of Object.entries(examples)) {
+        let formattedXmlBody;
+        try {
+          formattedXmlBody = format(example.value, {
+            indentation: "  ",
+            lineSeparator: "\n",
+            collapseContent: true,
+          });
+        } catch {
+          formattedXmlBody = example.value;
+        }
+        examplesBodies.push({
+          label: key,
+          body: formattedXmlBody,
+          summary: example.summary,
+        });
       }
     }
     language = "xml";
   }
 
+  if (exampleBody) {
+    return (
+      <FormItem label="Body" required={required}>
+        <SchemaTabs lazy>
+          <TabItem label="Default" value="default" default>
+            <LiveApp action={dispatch} language={language}>
+              {defaultBody}
+            </LiveApp>
+          </TabItem>
+          <TabItem label="Example" value="example">
+            {exampleBody && (
+              <LiveApp action={dispatch} language={language}>
+                {exampleBody}
+              </LiveApp>
+            )}
+          </TabItem>
+        </SchemaTabs>
+      </FormItem>
+    );
+  }
+
+  if (examplesBodies && examplesBodies.length > 0) {
+    return (
+      <FormItem label="Body" required={required}>
+        <SchemaTabs lazy>
+          <TabItem label="Default" value="default" default>
+            <LiveApp action={dispatch} language={language}>
+              {defaultBody}
+            </LiveApp>
+          </TabItem>
+          {examplesBodies.map((example: any) => {
+            return (
+              <TabItem
+                label={example.label}
+                value={example.label}
+                key={example.label}
+              >
+                {example.summary && <p>{example.summary}</p>}
+                {example.body && (
+                  <LiveApp action={dispatch} language={language}>
+                    {example.body}
+                  </LiveApp>
+                )}
+              </TabItem>
+            );
+          })}
+        </SchemaTabs>
+      </FormItem>
+    );
+  }
+
   return (
     <FormItem label="Body" required={required}>
       <LiveApp action={dispatch} language={language}>
-        {exampleBodyString}
+        {defaultBody}
       </LiveApp>
     </FormItem>
   );

package/src/theme/ApiDemoPanel/ContentType/index.tsx

@@ -7,7 +7,7 @@
 
 import React from "react";
 
-import { useTypedDispatch, useTypedSelector } from "../hooks";
+import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
 import FormItem from "./../FormItem";
 import FormSelect from "./../FormSelect";
 import { setContentType } from "./slice";

package/src/theme/ApiDemoPanel/Curl/index.tsx

@@ -13,8 +13,8 @@ import sdk from "@paloaltonetworks/postman-collection";
 import CodeBlock from "@theme/CodeBlock";
 import clsx from "clsx";
 
+import { useTypedSelector } from "../../ApiItem/hooks";
 import CodeTabs from "../CodeTabs";
-import { useTypedSelector } from "../hooks";
 import buildPostmanRequest from "./../buildPostmanRequest";
 import styles from "./styles.module.css";
 

package/src/theme/ApiDemoPanel/Execute/index.tsx

@@ -10,7 +10,7 @@ import React from "react";
 import sdk from "@paloaltonetworks/postman-collection";
 import Modal from "react-modal";
 
-import { useTypedDispatch, useTypedSelector } from "../hooks";
+import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
 import { Param } from "../ParamOptions/slice";
 import { setResponse } from "../Response/slice";
 import buildPostmanRequest from "./../buildPostmanRequest";

package/src/theme/ApiDemoPanel/ParamOptions/index.tsx

@@ -9,7 +9,7 @@ import React, { useState, useEffect } from "react";
 
 import { nanoid } from "@reduxjs/toolkit";
 
-import { useTypedDispatch, useTypedSelector } from "../hooks";
+import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
 import FormItem from "./../FormItem";
 import FormMultiSelect from "./../FormMultiSelect";
 import FormSelect from "./../FormSelect";

package/src/theme/ApiDemoPanel/Request/index.tsx

@@ -13,11 +13,11 @@ import { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/type
 import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 
 import { ThemeConfig } from "../../../types";
+import { useTypedSelector } from "../../ApiItem/hooks";
 import Accept from "../Accept";
 import Authorization from "../Authorization";
 import Body from "../Body";
 import Execute from "../Execute";
-import { useTypedSelector } from "../hooks";
 import ParamOptions from "../ParamOptions";
 import Server from "../Server";
 import styles from "./styles.module.css";

package/src/theme/ApiDemoPanel/Response/index.tsx

@@ -9,7 +9,7 @@ import React from "react";
 
 import CodeBlock from "@theme/CodeBlock";
 
-import { useTypedDispatch, useTypedSelector } from "../hooks";
+import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
 import { clearResponse } from "./slice";
 
 // TODO: We probably shouldn't attempt to format XML...

package/src/theme/ApiDemoPanel/SecuritySchemes/index.tsx

@@ -9,7 +9,7 @@ import React from "react";
 
 import Link from "@docusaurus/Link";
 
-import { useTypedSelector } from "../hooks";
+import { useTypedSelector } from "../../ApiItem/hooks";
 
 function SecuritySchemes(props: any) {
   const options = useTypedSelector((state) => state.auth.options);

package/src/theme/ApiDemoPanel/Server/index.tsx

@@ -7,8 +7,8 @@
 
 import React, { useState } from "react";
 
+import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
 import FloatingButton from "../FloatingButton";
-import { useTypedDispatch, useTypedSelector } from "../hooks";
 import FormItem from "./../FormItem";
 import FormSelect from "./../FormSelect";
 import FormTextInput from "./../FormTextInput";
@@ -19,7 +19,6 @@ function Server() {
   const [isEditing, setIsEditing] = useState(false);
   const value = useTypedSelector((state) => state.server.value);
   const options = useTypedSelector((state) => state.server.options);
-
   const dispatch = useTypedDispatch();
 
   if (options.length <= 0) {
@@ -30,6 +29,20 @@ function Server() {
     return null;
   }
 
+  if (!value) {
+    const defaultOption = options[0];
+    dispatch(setServer(JSON.stringify(defaultOption)));
+  }
+
+  // Default to first option when existing server state is mismatched
+  if (value) {
+    const urlExists = options.find((s) => s.url === value.url);
+    if (!urlExists) {
+      const defaultOption = options[0];
+      dispatch(setServer(JSON.stringify(defaultOption)));
+    }
+  }
+
   if (!isEditing) {
     let url = "";
     if (value) {
@@ -58,14 +71,21 @@ function Server() {
       </FloatingButton>
     );
   }
-
   return (
     <div className={styles.optionsPanel}>
       <FloatingButton onClick={() => setIsEditing(false)} label="Hide">
         <FormItem label="Base URL">
           <FormSelect
             options={options.map((s) => s.url)}
-            onChange={(e) => dispatch(setServer(e.target.value))}
+            onChange={(e) => {
+              dispatch(
+                setServer(
+                  JSON.stringify(
+                    options.filter((s) => s.url === e.target.value)[0]
+                  )
+                )
+              );
+            }}
             value={value?.url}
           />
           <small>{value?.description}</small>
@@ -79,9 +99,12 @@ function Server() {
                     options={value.variables[key].enum}
                     onChange={(e) => {
                       dispatch(
-                        setServerVariable({ key, value: e.target.value })
+                        setServerVariable(
+                          JSON.stringify({ key, value: e.target.value })
+                        )
                       );
                     }}
+                    value={value?.variables[key].default}
                   />
                 </FormItem>
               );
@@ -91,8 +114,13 @@ function Server() {
                 <FormTextInput
                   placeholder={value.variables?.[key].default}
                   onChange={(e) => {
-                    dispatch(setServerVariable({ key, value: e.target.value }));
+                    dispatch(
+                      setServerVariable(
+                        JSON.stringify({ key, value: e.target.value })
+                      )
+                    );
                   }}
+                  value={value?.variables?.[key].default}
                 />
               </FormItem>
             );

package/src/theme/ApiDemoPanel/Server/slice.ts

@@ -21,15 +21,14 @@ export const slice = createSlice({
   initialState,
   reducers: {
     setServer: (state, action: PayloadAction<string>) => {
-      state.value = state.options.find((s) => s.url === action.payload);
+      state.value = state.options.find(
+        (s) => s.url === JSON.parse(action.payload).url
+      );
     },
-    setServerVariable: (
-      state,
-      action: PayloadAction<{ key: string; value: string }>
-    ) => {
+    setServerVariable: (state, action: PayloadAction<string>) => {
       if (state.value?.variables) {
-        state.value.variables[action.payload.key].default =
-          action.payload.value;
+        const parsedPayload = JSON.parse(action.payload);
+        state.value.variables[parsedPayload.key].default = parsedPayload.value;
       }
     },
   },

package/src/theme/ApiDemoPanel/index.tsx

@@ -7,21 +7,14 @@
 
 import React from "react";
 
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import sdk from "@paloaltonetworks/postman-collection";
-import { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
-import { Provider } from "react-redux";
 
-import { ThemeConfig } from "../../types";
-import { createAuth } from "./Authorization/slice";
 import Curl from "./Curl";
 import MethodEndpoint from "./MethodEndpoint";
-import { createPersistanceMiddleware } from "./persistanceMiddleware";
 import Request from "./Request";
 import Response from "./Response";
 import SecuritySchemes from "./SecuritySchemes";
-import { createStoreWithState } from "./store";
 import styles from "./styles.module.css";
 
 function ApiDemoPanel({
@@ -31,76 +24,20 @@ function ApiDemoPanel({
   item: NonNullable<ApiItem>;
   infoPath: string;
 }) {
-  const { siteConfig } = useDocusaurusContext();
-  const themeConfig = siteConfig.themeConfig as ThemeConfig;
-  const options = themeConfig.api;
   const postman = new sdk.Request(item.postman);
-
-  const acceptArray = Array.from(
-    new Set(
-      Object.values(item.responses ?? {})
-        .map((response: any) => Object.keys(response.content ?? {}))
-        .flat()
-    )
-  );
-
-  const content = item.requestBody?.content ?? {};
-
-  const contentTypeArray = Object.keys(content);
-
-  const servers = item.servers ?? [];
-
-  const params = {
-    path: [] as ParameterObject[],
-    query: [] as ParameterObject[],
-    header: [] as ParameterObject[],
-    cookie: [] as ParameterObject[],
-  };
-
-  item.parameters?.forEach(
-    (param: { in: "path" | "query" | "header" | "cookie" }) => {
-      const paramType = param.in;
-      const paramsArray: ParameterObject[] = params[paramType];
-      paramsArray.push(param as ParameterObject);
-    }
-  );
-
-  const auth = createAuth({
-    security: item.security,
-    securitySchemes: item.securitySchemes,
-    options,
-  });
-
-  const persistanceMiddleware = createPersistanceMiddleware(options);
-
-  const store2 = createStoreWithState(
-    {
-      accept: { value: acceptArray[0], options: acceptArray },
-      contentType: { value: contentTypeArray[0], options: contentTypeArray },
-      server: { value: servers[0], options: servers },
-      response: { value: undefined },
-      body: { type: "empty" },
-      params,
-      auth,
-    },
-    [persistanceMiddleware]
-  );
-
   const { path, method } = item;
 
   return (
-    <Provider store={store2}>
-      <div className={styles.apiDemoPanelContainer}>
-        <MethodEndpoint method={method} path={path} />
-        <SecuritySchemes infoPath={infoPath} />
-        <Request item={item} />
-        <Response />
-        <Curl
-          postman={postman}
-          codeSamples={(item as any)["x-code-samples"] ?? []}
-        />
-      </div>
-    </Provider>
+    <div className={styles.apiDemoPanelContainer}>
+      <MethodEndpoint method={method} path={path} />
+      <SecuritySchemes infoPath={infoPath} />
+      <Request item={item} />
+      <Response />
+      <Curl
+        postman={postman}
+        codeSamples={(item as any)["x-code-samples"] ?? []}
+      />
+    </div>
   );
 }
 

package/src/theme/ApiDemoPanel/persistanceMiddleware.ts

@@ -8,9 +8,9 @@
 import { Middleware } from "@reduxjs/toolkit";
 
 import { ThemeConfig } from "../../types";
+import { AppDispatch, RootState } from "../ApiItem/store";
 import { setAuthData, setSelectedAuth } from "./Authorization/slice";
 import { createStorage, hashArray } from "./storage-utils";
-import { AppDispatch, RootState } from "./store";
 
 export function createPersistanceMiddleware(options: ThemeConfig["api"]) {
   const persistanceMiddleware: Middleware<{}, RootState, AppDispatch> =
@@ -40,6 +40,26 @@ export function createPersistanceMiddleware(options: ThemeConfig["api"]) {
         }
       }
 
+      if (action.type === "contentType/setContentType") {
+        storage.setItem("contentType", action.payload);
+      }
+
+      if (action.type === "accept/setAccept") {
+        storage.setItem("accept", action.payload);
+      }
+
+      if (action.type === "server/setServer") {
+        storage.setItem("server", action.payload);
+      }
+
+      if (action.type === "server/setServerVariable") {
+        const server = storage.getItem("server") ?? "{}";
+        const variables = JSON.parse(action.payload);
+        let serverObject = JSON.parse(server);
+        serverObject.variables[variables.key].default = variables.value;
+        storage.setItem("server", JSON.stringify(serverObject));
+      }
+
       return result;
     };
   return persistanceMiddleware;

package/src/theme/ApiItem/Layout/styles.module.css

@@ -154,12 +154,15 @@
   margin-bottom: 0;
 }
 
-:global(.theme-api-markdown li::before) {
+:global([class^="paramsItem"]::before),
+:global([class^="schemaItem"]::before) {
   position: absolute;
   top: 10px;
   left: 0;
-  width: 0.7rem; /* width of horizontal line */
-  height: 0.5rem; /* vertical position of line */
+  width: 0.7rem;
+  /* width of horizontal line */
+  height: 0.5rem;
+  /* vertical position of line */
   vertical-align: top;
   border-bottom: thin solid var(--ifm-color-gray-500);
   content: "";
@@ -410,3 +413,8 @@
   max-height: 500px;
   overflow: auto;
 }
+
+/* Prism code styles */
+:global(.prism-code.language-json) {
+  white-space: pre !important;
+}