docusaurus-theme-openapi-docs 1.1.12 → 1.2.1

package/lib-next/theme/ApiDemoPanel/SecuritySchemes/index.js

@@ -15,60 +15,62 @@ function SecuritySchemes(props) {
   if (selected === undefined) return null;
   const selectedAuth = options[selected];
   return (
-    <div
-      style={{
-        marginBottom: "var(--ifm-table-cell-padding)",
-      }}
-    >
+    <details className={`details__demo-panel`} open={false}>
+      <summary className={`details__request-summary`}>
+        <h4>Authorization</h4>
+      </summary>
       {selectedAuth.map((auth) => {
         const isApiKey = auth.type === "apiKey";
         const isBearer = auth.type === "http" && auth.key === "Bearer";
-        const isClientCredentials =
-          auth.type === "oauth2" && auth.key === "ClientCredentials";
+        const isOauth2 = auth.type === "oauth2";
 
         if (isApiKey || isBearer) {
           return (
-            <React.Fragment key={selected}>
-              <b>
-                Authorization: <Link to={infoAuthPath}>{auth.key}</Link>
-              </b>
+            <React.Fragment key={auth.key}>
               <pre
                 style={{
                   display: "flex",
                   flexDirection: "column",
                   background: "var(--openapi-card-background-color)",
-                  borderRadius: "var(--openapi-card-border-radius)",
                 }}
               >
-                <span>name: {auth.name}</span>
-                <span>in: {auth.in}</span>
                 <span>type: {auth.type}</span>
+                <span>
+                  name: <Link to={infoAuthPath}>{auth.name}</Link>
+                </span>
+                <span>in: {auth.in}</span>
               </pre>
             </React.Fragment>
           );
         }
 
-        if (isClientCredentials) {
+        if (isOauth2) {
           return (
             <React.Fragment key={selected}>
-              <b>Authorization: {auth.key}</b>
               <pre
                 style={{
                   display: "flex",
                   flexDirection: "column",
                   background: "var(--openapi-card-background-color)",
-                  borderRadius: "var(--openapi-card-border-radius)",
                 }}
               >
-                <span>type: {auth.type}</span>
+                <span>
+                  type: <Link to={infoAuthPath}>{auth.type}</Link>
+                </span>
+                {Object.keys(auth.flows).map((flow) => {
+                  return <span key={flow}>flow: {flow}</span>;
+                })}
+                <span>
+                  scopes: <code>{auth.scopes.toString()}</code>
+                </span>
               </pre>
             </React.Fragment>
           );
         }
 
-        return null;
+        return undefined;
       })}
-    </div>
+    </details>
   );
 }
 

package/lib-next/theme/ApiDemoPanel/Server/index.js

@@ -71,6 +71,7 @@ function Server() {
           options={options.map((s) => s.url)}
           onChange={(e) => dispatch(setServer(e.target.value))}
         />
+        <small>{value?.description}</small>
       </FormItem>
       {value?.variables &&
         Object.keys(value.variables).map((key) => {

package/lib-next/theme/ApiDemoPanel/buildPostmanRequest.js

@@ -258,6 +258,28 @@ function buildPostmanRequest(
         continue;
       }
 
+      otherHeaders.push({
+        key: "Authorization",
+        value: `Bearer ${token}`,
+      });
+      continue;
+    }
+
+    if (a.type === "oauth2") {
+      let token;
+
+      if (auth.data[a.key]) {
+        token = auth.data[a.key].token;
+      }
+
+      if (token === undefined) {
+        otherHeaders.push({
+          key: "Authorization",
+          value: "Bearer <TOKEN>",
+        });
+        continue;
+      }
+
       otherHeaders.push({
         key: "Authorization",
         value: `Bearer ${token}`,
@@ -280,9 +302,9 @@ function buildPostmanRequest(
     } // API Key
 
     if (a.type === "apiKey" && a.in === "header") {
-      const { apikey } = auth.data[a.key];
+      const { apiKey } = auth.data[a.key];
 
-      if (apikey === undefined) {
+      if (apiKey === undefined) {
         otherHeaders.push({
           key: a.name,
           value: "<API_KEY_VALUE>",
@@ -292,7 +314,7 @@ function buildPostmanRequest(
 
       otherHeaders.push({
         key: a.name,
-        value: apikey,
+        value: apiKey,
       });
       continue;
     }

package/lib-next/theme/ApiDemoPanel/index.js

@@ -8,13 +8,11 @@ import React from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import sdk from "@paloaltonetworks/postman-collection";
 import { Provider } from "react-redux";
-import Accept from "./Accept";
 import { createAuth } from "./Authorization/slice";
-import Body from "./Body";
 import Curl from "./Curl";
 import MethodEndpoint from "./MethodEndpoint";
-import ParamOptions from "./ParamOptions";
 import { createPersistanceMiddleware } from "./persistanceMiddleware";
+import Request from "./Request";
 import Response from "./Response";
 import SecuritySchemes from "./SecuritySchemes";
 import Server from "./Server";
@@ -83,18 +81,11 @@ function ApiDemoPanel({ item, infoPath }) {
     <Provider store={store2}>
       <div className={styles.apiDemoPanelContainer}>
         <MethodEndpoint method={method} path={path} />
-        <SecuritySchemes infoPath={infoPath} />
-        <div className={styles.optionsPanel}>
-          <ParamOptions />
-          <Body
-            jsonRequestBodyExample={item.jsonRequestBodyExample}
-            requestBodyMetadata={item.requestBody}
-          />
-          <Accept />
-        </div>
         <Server />
-        <Curl postman={postman} codeSamples={item["x-code-samples"] ?? []} />
+        <SecuritySchemes infoPath={infoPath} />
+        <Request item={item} />
         <Response />
+        <Curl postman={postman} codeSamples={item["x-code-samples"] ?? []} />
       </div>
     </Provider>
   );

package/lib-next/theme/ApiDemoPanel/persistanceMiddleware.js

@@ -10,7 +10,7 @@ export function createPersistanceMiddleware(options) {
   const persistanceMiddleware = (storeAPI) => (next) => (action) => {
     const result = next(action);
     const state = storeAPI.getState();
-    const storage = createStorage(options?.authPersistance);
+    const storage = createStorage("sessionStorage");
 
     if (action.type === setAuthData.type) {
       for (const [key, value] of Object.entries(state.auth.data)) {

package/lib-next/theme/ApiDemoPanel/react-modal.d.ts

@@ -0,0 +1,8 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+declare module "react-modal";

package/lib-next/theme/ApiItem/Layout/styles.module.css

@@ -71,6 +71,62 @@
   border-top: unset !important;
 }
 
+:global(.theme-api-markdown .details__demo-panel) {
+  margin-bottom: 1rem;
+  background: var(--openapi-card-background-color);
+  border-radius: var(--openapi-card-border-radius);
+}
+
+:global(.theme-api-markdown .details__demo-panel > summary) {
+  padding-left: 1rem;
+  padding-top: 1rem;
+  cursor: pointer;
+}
+
+:global(.theme-api-markdown .details__demo-panel > div > div > pre) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+:global(.theme-api-markdown .details__demo-panel > summary::marker) {
+  display: none;
+  content: "";
+}
+
+:global(.theme-api-markdown
+    .details__demo-panel
+    > summary::-webkit-details-marker) {
+  display: none;
+  content: "";
+}
+
+:global(.theme-api-markdown .details__demo-panel > pre) {
+  margin-bottom: 0;
+  padding-top: 0;
+}
+
+:global(.theme-api-markdown .details__request-summary) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+:global(.theme-api-markdown .details__request-summary > button) {
+  margin-bottom: 1rem;
+  margin-right: 1rem;
+}
+
+:global(.theme-api-markdown .details__response-summary) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+:global(.theme-api-markdown .details__response-summary > button) {
+  margin-bottom: 1rem;
+  margin-right: 1rem;
+}
+
 :global(.theme-api-markdown code) {
   max-width: 600px;
   max-height: 500px;

package/lib-next/theme/ApiTabs/styles.module.css

@@ -12,14 +12,19 @@
   height: 2.5rem;
   margin-top: 0 !important;
   margin-right: 0.5rem;
-  border: 1px solid var(--openapi-code-dim-dark);
+  border: 1px solid var(--ifm-color-primary);
   border-radius: var(--ifm-global-radius);
+  color: var(--ifm-color-primary);
   font-weight: var(--ifm-font-weight-normal);
-  color: var(--openapi-code-dim-dark);
+}
+
+.tabItem:not(.responseTabActive) {
+  opacity: 0.65;
 }
 
 .tabItem:hover {
-  color: var(--ifm-color-emphasis-500) !important;
+  opacity: 1;
+  background-color: var(--ifm-color-emphasis-100);
 }
 
 .tabItem:last-child {
@@ -74,8 +79,7 @@
 }
 
 .responseTabActive {
-  border: 1px solid var(--ifm-color-primary);
-  color: var(--ifm-color-primary);
+  background-color: var(--ifm-color-emphasis-100);
 }
 
 .responseSchemaContainer {

package/lib-next/theme/ParamsItem/index.js

@@ -53,7 +53,11 @@ function ParamsItem({
   ));
 
   const renderDefaultValue = guard(
-    schema.items ? schema.items.default : schema.default,
+    schema && schema.items
+      ? schema.items.default
+      : schema
+      ? schema.default
+      : undefined,
     (value) => (
       <div>
         <ReactMarkdown children={`**Default value:** \`${value}\``} />

package/lib-next/theme/SchemaTabs/styles.module.css

@@ -12,14 +12,19 @@
   height: 1.8rem;
   margin-top: 0 !important;
   margin-right: 0.5rem;
-  border: 1px solid var(--openapi-code-dim-dark);
+  border: 1px solid var(--ifm-color-primary);
   border-radius: var(--ifm-global-radius);
-  color: var(--openapi-code-dim-dark);
+  color: var(--ifm-color-primary);
   font-size: 12px;
 }
 
+.tabItem:not(.schemaTabActive) {
+  opacity: 0.65;
+}
+
 .tabItem:hover {
-  color: var(--ifm-color-emphasis-500) !important;
+  opacity: 1;
+  background-color: var(--ifm-color-emphasis-100);
 }
 
 .tabItem:last-child {
@@ -49,9 +54,8 @@
   display: none;
 }
 
-.tabItem.schemaTabActive {
-  border: 1px solid var(--ifm-color-primary);
-  color: var(--ifm-color-primary);
+.schemaTabActive {
+  background-color: var(--ifm-color-emphasis-100);
 }
 
 .schemaTabLabel {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "1.1.12",
+  "version": "1.2.1",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -44,19 +44,20 @@
   "dependencies": {
     "@docusaurus/theme-common": "^2.0.1",
     "@mdx-js/react": "^1.6.21",
-    "@paloaltonetworks/postman-code-generators": "^1.1.9",
+    "@paloaltonetworks/postman-code-generators": "^1.1.12",
     "@paloaltonetworks/postman-collection": "^4.1.0",
     "@reduxjs/toolkit": "^1.7.1",
     "buffer": "^6.0.3",
     "clsx": "^1.1.1",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "^1.1.12",
+    "docusaurus-plugin-openapi-docs": "^1.2.0",
     "immer": "^9.0.7",
     "lodash": "^4.17.20",
     "process": "^0.11.10",
     "react-live": "^3.1.1",
     "react-magic-dropzone": "^1.0.1",
     "react-markdown": "^8.0.1",
+    "react-modal": "^3.15.1",
     "react-redux": "^7.2.0",
     "redux-devtools-extension": "^2.13.8",
     "webpack": "^5.61.0",
@@ -69,5 +70,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "a45dcbd12f26156147a50f5f61026c3adee4b1c8"
+  "gitHead": "1d2b03eae750d2092994620b4695699910f40841"
 }

package/src/theme/ApiDemoPanel/Authorization/auth-types.ts

@@ -11,6 +11,10 @@ export function getAuthDataKeys(security: { [key: string]: any }) {
     return ["token"];
   }
 
+  if (security.type === "oauth2") {
+    return ["token"];
+  }
+
   // Basic Auth
   if (security.type === "http" && security.scheme === "basic") {
     return ["username", "password"];

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

@@ -0,0 +1,154 @@
+/* ============================================================================
+ * 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 FormItem from "../FormItem";
+import FormSelect from "../FormSelect";
+import FormTextInput from "../FormTextInput";
+import { useTypedDispatch, useTypedSelector } from "../hooks";
+import { setAuthData, setSelectedAuth } from "./slice";
+
+function Authorization() {
+  const data = useTypedSelector((state) => state.auth.data);
+  const options = useTypedSelector((state) => state.auth.options);
+  const selected = useTypedSelector((state) => state.auth.selected);
+
+  const dispatch = useTypedDispatch();
+
+  if (selected === undefined) {
+    return null;
+  }
+
+  const selectedAuth = options[selected];
+
+  const optionKeys = Object.keys(options);
+
+  return (
+    <div>
+      {optionKeys.length > 1 && (
+        <FormItem label="Security Scheme">
+          <FormSelect
+            options={optionKeys}
+            value={selected}
+            onChange={(e) => {
+              dispatch(setSelectedAuth(e.target.value));
+            }}
+          />
+        </FormItem>
+      )}
+      {selectedAuth.map((a) => {
+        if (a.type === "http" && a.scheme === "bearer") {
+          return (
+            <FormItem label="Bearer Token" key={a.key + "-bearer"}>
+              <FormTextInput
+                placeholder="Bearer Token"
+                value={data[a.key].token ?? ""}
+                onChange={(e) => {
+                  const value = e.target.value.trim();
+                  dispatch(
+                    setAuthData({
+                      scheme: a.key,
+                      key: "token",
+                      value: value ? value : undefined,
+                    })
+                  );
+                }}
+              />
+            </FormItem>
+          );
+        }
+
+        if (a.type === "oauth2") {
+          return (
+            <FormItem label="Bearer Token" key={a.key + "-oauth2"}>
+              <FormTextInput
+                placeholder="Bearer Token"
+                value={data[a.key].token ?? ""}
+                onChange={(e) => {
+                  const value = e.target.value.trim();
+                  dispatch(
+                    setAuthData({
+                      scheme: a.key,
+                      key: "token",
+                      value: value ? value : undefined,
+                    })
+                  );
+                }}
+              />
+            </FormItem>
+          );
+        }
+
+        if (a.type === "http" && a.scheme === "basic") {
+          return (
+            <React.Fragment key={a.key + "-basic"}>
+              <FormItem label="Username">
+                <FormTextInput
+                  placeholder="Username"
+                  value={data[a.key].username ?? ""}
+                  onChange={(e) => {
+                    const value = e.target.value.trim();
+                    dispatch(
+                      setAuthData({
+                        scheme: a.key,
+                        key: "username",
+                        value: value ? value : undefined,
+                      })
+                    );
+                  }}
+                />
+              </FormItem>
+              <FormItem label="Password">
+                <FormTextInput
+                  placeholder="Password"
+                  password
+                  value={data[a.key].password ?? ""}
+                  onChange={(e) => {
+                    const value = e.target.value.trim();
+                    dispatch(
+                      setAuthData({
+                        scheme: a.key,
+                        key: "password",
+                        value: value ? value : undefined,
+                      })
+                    );
+                  }}
+                />
+              </FormItem>
+            </React.Fragment>
+          );
+        }
+
+        if (a.type === "apiKey") {
+          return (
+            <FormItem label={`${a.key}`} key={a.key + "-apikey"}>
+              <FormTextInput
+                placeholder={`${a.key}`}
+                value={data[a.key].apiKey ?? ""}
+                onChange={(e) => {
+                  const value = e.target.value.trim();
+                  dispatch(
+                    setAuthData({
+                      scheme: a.key,
+                      key: "apiKey",
+                      value: value ? value : undefined,
+                    })
+                  );
+                }}
+              />
+            </FormItem>
+          );
+        }
+
+        return null;
+      })}
+    </div>
+  );
+}
+
+export default Authorization;

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

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

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

@@ -56,6 +56,7 @@ function BodyWrap({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
 
 function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
   const contentType = useTypedSelector((state) => state.contentType.value);
+  const required = requestBodyMetadata?.required;
 
   const dispatch = useTypedDispatch();
 
@@ -84,7 +85,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
 
   if (schema?.format === "binary") {
     return (
-      <FormItem label="Body">
+      <FormItem label="Body" required={required}>
         <FormFileUpload
           placeholder={schema.description || "Body"}
           onChange={(file) => {
@@ -110,7 +111,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
     schema?.type === "object"
   ) {
     return (
-      <FormItem label="Body">
+      <FormItem label="Body" required={required}>
         <div
           style={{
             marginTop: "calc(var(--ifm-pre-padding) / 2)",
@@ -122,7 +123,14 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
           {Object.entries(schema.properties ?? {}).map(([key, val]: any) => {
             if (val.format === "binary") {
               return (
-                <FormItem key={key} label={key}>
+                <FormItem
+                  key={key}
+                  label={key}
+                  required={
+                    Array.isArray(schema.required) &&
+                    schema.required.includes(key)
+                  }
+                >
                   <FormFileUpload
                     placeholder={val.description || key}
                     onChange={(file) => {
@@ -147,7 +155,14 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
 
             if (val.enum) {
               return (
-                <FormItem key={key} label={key}>
+                <FormItem
+                  key={key}
+                  label={key}
+                  required={
+                    Array.isArray(schema.required) &&
+                    schema.required.includes(key)
+                  }
+                >
                   <FormSelect
                     options={["---", ...val.enum]}
                     onChange={(e) => {
@@ -169,7 +184,14 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
             }
             // TODO: support all the other types.
             return (
-              <FormItem key={key} label={key}>
+              <FormItem
+                key={key}
+                label={key}
+                required={
+                  Array.isArray(schema.required) &&
+                  schema.required.includes(key)
+                }
+              >
                 <FormTextInput
                   placeholder={val.description || key}
                   onChange={(e) => {
@@ -212,7 +234,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
   }
 
   return (
-    <FormItem label="Body">
+    <FormItem label="Body" required={required}>
       <LiveApp action={dispatch} language={language}>
         {exampleBodyString}
       </LiveApp>