docusaurus-theme-openapi-docs 1.0.0 → 1.0.3

package/lib/postman-code-generators.d.ts

@@ -0,0 +1,9 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+// TODO: Remove this when https://github.com/facebook/docusaurus/issues/6087 is resolved.
+declare module "@paloaltonetworks/postman-code-generators";

package/lib/react-magic-dropzone.d.ts

@@ -0,0 +1,9 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+// TODO: Remove this when https://github.com/facebook/docusaurus/issues/6087 is resolved.
+declare module "react-magic-dropzone";

package/lib/theme/ApiDemoPanel/Curl/index.js

@@ -35,7 +35,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
-// @ts-ignore
 const languageSet = [{
   tabName: "cURL",
   highlight: "bash",

package/lib/theme/ApiDemoPanel/FormFileUpload/index.js

@@ -25,7 +25,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
-// @ts-ignore
 function RenderPreview({
   file
 }) {

package/lib/theme/ApiDemoPanel/MethodEndpoint/index.js

@@ -24,18 +24,21 @@ function colorForMethod(method) {
     case "get":
       return "primary";
 
-    case "put":
-      return "warning";
-
-    case "patch":
-      return "warning";
-
     case "post":
       return "success";
 
     case "delete":
       return "danger";
 
+    case "put":
+      return "info";
+
+    case "patch":
+      return "warning";
+
+    case "head":
+      return "secondary";
+
     default:
       return undefined;
   }

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

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _Link = _interopRequireDefault(require("@docusaurus/Link"));
+
 var _hooks = require("../hooks");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,18 +19,25 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
-function SecuritySchemes() {
+function SecuritySchemes(props) {
   const options = (0, _hooks.useTypedSelector)(state => state.auth.options);
   const selected = (0, _hooks.useTypedSelector)(state => state.auth.selected);
+  const infoAuthPath = `/${props.infoPath}#authentication`;
   if (selected === undefined) return null;
   const selectedAuth = options[selected];
   return <div style={{
     marginBottom: "var(--ifm-table-cell-padding)"
   }}>
       {selectedAuth.map(auth => {
-      if (auth.type === "apiKey") {
-        return <_react.default.Fragment key={selected + "-apiKey"}>
-              <b>Authorization: {auth.name}</b>
+      const isApiKey = auth.type === "apiKey";
+      const isBearer = auth.type === "http" && auth.key === "Bearer";
+      const isClientCredentials = auth.type === "oauth2" && auth.key === "ClientCredentials";
+
+      if (isApiKey || isBearer) {
+        return <_react.default.Fragment key={selected}>
+              <b>
+                Authorization: <_Link.default to={infoAuthPath}>{auth.key}</_Link.default>
+              </b>
               <pre style={{
             display: "flex",
             flexDirection: "column",
@@ -42,6 +51,20 @@ function SecuritySchemes() {
             </_react.default.Fragment>;
       }
 
+      if (isClientCredentials) {
+        return <_react.default.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>
+              </pre>
+            </_react.default.Fragment>;
+      }
+
       return null;
     })}
     </div>;

package/lib/theme/ApiDemoPanel/buildPostmanRequest.js

@@ -17,7 +17,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
-// @ts-ignore
 function setQueryParams(postman, queryParams) {
   postman.url.query.clear();
   const qp = queryParams.map(param => {
@@ -270,6 +269,10 @@ function buildPostmanRequest(postman, {
       } = auth.data[a.key];
 
       if (token === undefined) {
+        otherHeaders.push({
+          key: "Authorization",
+          value: "Bearer <TOKEN>"
+        });
         continue;
       }
 
@@ -307,7 +310,7 @@ function buildPostmanRequest(postman, {
       if (apikey === undefined) {
         otherHeaders.push({
           key: a.name,
-          value: "API_KEY_VALUE"
+          value: "<API_KEY_VALUE>"
         });
         continue;
       }

package/lib/theme/ApiDemoPanel/index.js

@@ -45,10 +45,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
-// @ts-ignore
-// @ts-ignore
 function ApiDemoPanel({
-  item
+  item,
+  infoPath
 }) {
   var _item$responses, _item$requestBody$con, _item$requestBody, _item$servers, _item$parameters, _xCodeSamples;
 
@@ -58,8 +57,7 @@ function ApiDemoPanel({
   const themeConfig = siteConfig.themeConfig;
   const options = themeConfig.api;
   const postman = new _postmanCollection.default.Request(item.postman);
-  const acceptArray = Array.from(new Set(Object.values((_item$responses = item.responses) !== null && _item$responses !== void 0 ? _item$responses : {}) // @ts-ignore
-  .map(response => {
+  const acceptArray = Array.from(new Set(Object.values((_item$responses = item.responses) !== null && _item$responses !== void 0 ? _item$responses : {}).map(response => {
     var _response$content;
 
     return Object.keys((_response$content = response.content) !== null && _response$content !== void 0 ? _response$content : {});
@@ -74,8 +72,9 @@ function ApiDemoPanel({
     cookie: []
   };
   (_item$parameters = item.parameters) === null || _item$parameters === void 0 ? void 0 : _item$parameters.forEach(param => {
-    // @ts-ignore
-    params[param.in].push(param);
+    const paramType = param.in;
+    const paramsArray = params[paramType];
+    paramsArray.push(param);
   });
   const auth = (0, _slice.createAuth)({
     security: item.security,
@@ -112,19 +111,14 @@ function ApiDemoPanel({
   return <_reactRedux.Provider store={store2}>
       <div className={_stylesModule.default.apiDemoPanelContainer}>
         <_MethodEndpoint.default method={method} path={path} />
-
-        <_SecuritySchemes.default />
-
+        <_SecuritySchemes.default infoPath={infoPath} />
         <div className={_stylesModule.default.optionsPanel}>
           <_ParamOptions.default />
           <_Body.default jsonRequestBodyExample={item.jsonRequestBodyExample} requestBodyMetadata={item.requestBody} />
           <_Accept.default />
         </div>
-
         <_Server.default />
-
         <_Curl.default postman={postman} codeSamples={(_xCodeSamples = item["x-code-samples"]) !== null && _xCodeSamples !== void 0 ? _xCodeSamples : []} />
-
         <_Response.default />
       </div>
     </_reactRedux.Provider>;

package/lib/theme/ApiItem/index.js

@@ -85,6 +85,7 @@ function DocItemContent(props) {
     frontMatter
   } = DocContent;
   const {
+    info_path: infoPath,
     hide_title: hideTitle,
     hide_table_of_contents: hideTableOfContents,
     toc_min_heading_level: tocMinHeadingLevel,
@@ -131,16 +132,16 @@ function DocItemContent(props) {
                     <DocContent />
                   </div>
                   {api && <div className="col col--5">
-                      <ApiDemoPanel item={api} />
+                      <ApiDemoPanel item={api} infoPath={infoPath} />
                     </div>}
                 </div>
               </_MDXContent.default>
             </div>
-            <div className={(0, _clsx.default)("col", api ? "col--7" : !canRenderTOC ? "col--9" : "col--12")}>
+            <div className={(0, _clsx.default)("col", api ? "col--7" : "col--12")}>
               <_DocItemFooter.default {...props} />
             </div>
           </article>
-          <div className={(0, _clsx.default)("col", api ? "col--7" : !canRenderTOC ? "col--9" : "col--12")}>
+          <div className={(0, _clsx.default)("col", api ? "col--7" : "col--12")}>
             <_DocPaginator.default previous={metadata.previous} next={metadata.next} />
           </div>
         </div>

package/lib/theme/ApiItem/styles.module.css

@@ -1,5 +1,9 @@
 :root {
   --openapi-required: var(--ifm-color-danger);
+  --openapi-code-blue: var(--ifm-color-info);
+  --openapi-code-red: var(--ifm-color-danger);
+  --openapi-code-orange: var(--ifm-color-warning);
+  --openapi-code-green: var(--ifm-color-success);
 }
 
 .apiItemContainer article > *:first-child,
@@ -75,9 +79,9 @@
   font-size: 14px;
 }
 
-:global(.theme-api-markdown h2) {
+/* :global(.theme-api-markdown h2) {
   font-size: 2rem;
-}
+} */
 
 :global(.schemaItem) {
   list-style: none;

package/lib/theme/{Tabs → ApiTabs}/index.js

@@ -29,7 +29,7 @@ function isTabItem(comp) {
   return typeof comp.props.value !== "undefined";
 }
 
-function ResponseCodeTabs(props) {
+function ApiTabsComponent(props) {
   const {
     lazy,
     block,
@@ -246,10 +246,10 @@ function ResponseCodeTabs(props) {
   );
 }
 
-export default function Tabs(props) {
+export default function ApiTabs(props) {
   const isBrowser = useIsBrowser();
   return (
-    <ResponseCodeTabs // Remount tabs after hydration
+    <ApiTabsComponent // Remount tabs after hydration
       // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
       key={String(isBrowser)}
       {...props}

package/lib-next/postman-code-generators.d.ts

@@ -0,0 +1,9 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+// TODO: Remove this when https://github.com/facebook/docusaurus/issues/6087 is resolved.
+declare module "@paloaltonetworks/postman-code-generators";

package/lib-next/react-magic-dropzone.d.ts

@@ -0,0 +1,9 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+// TODO: Remove this when https://github.com/facebook/docusaurus/issues/6087 is resolved.
+declare module "react-magic-dropzone";

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

@@ -5,10 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 import React, { useRef, useState, useEffect } from "react";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; // @ts-ignore
-
-import codegen from "@paloaltonetworks/postman-code-generators"; // @ts-ignore
-
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import codegen from "@paloaltonetworks/postman-code-generators";
 import clsx from "clsx";
 import Highlight, { defaultProps } from "prism-react-renderer";
 import { useTypedSelector } from "../hooks";

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

@@ -4,8 +4,7 @@
  * 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"; // @ts-ignore
-
+import React, { useState } from "react";
 import MagicDropzone from "react-magic-dropzone";
 import FloatingButton from "../FloatingButton";
 import styles from "./styles.module.css";

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

@@ -14,18 +14,21 @@ function colorForMethod(method) {
     case "get":
       return "primary";
 
-    case "put":
-      return "warning";
-
-    case "patch":
-      return "warning";
-
     case "post":
       return "success";
 
     case "delete":
       return "danger";
 
+    case "put":
+      return "info";
+
+    case "patch":
+      return "warning";
+
+    case "head":
+      return "secondary";
+
     default:
       return undefined;
   }

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

@@ -5,11 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 import React from "react";
+import Link from "@docusaurus/Link";
 import { useTypedSelector } from "../hooks";
 
-function SecuritySchemes() {
+function SecuritySchemes(props) {
   const options = useTypedSelector((state) => state.auth.options);
   const selected = useTypedSelector((state) => state.auth.selected);
+  const infoAuthPath = `/${props.infoPath}#authentication`;
   if (selected === undefined) return null;
   const selectedAuth = options[selected];
   return (
@@ -19,10 +21,17 @@ function SecuritySchemes() {
       }}
     >
       {selectedAuth.map((auth) => {
-        if (auth.type === "apiKey") {
+        const isApiKey = auth.type === "apiKey";
+        const isBearer = auth.type === "http" && auth.key === "Bearer";
+        const isClientCredentials =
+          auth.type === "oauth2" && auth.key === "ClientCredentials";
+
+        if (isApiKey || isBearer) {
           return (
-            <React.Fragment key={selected + "-apiKey"}>
-              <b>Authorization: {auth.name}</b>
+            <React.Fragment key={selected}>
+              <b>
+                Authorization: <Link to={infoAuthPath}>{auth.key}</Link>
+              </b>
               <pre
                 style={{
                   display: "flex",
@@ -39,6 +48,24 @@ function SecuritySchemes() {
           );
         }
 
+        if (isClientCredentials) {
+          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>
+              </pre>
+            </React.Fragment>
+          );
+        }
+
         return null;
       })}
     </div>

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

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 import sdk from "@paloaltonetworks/postman-collection";
-// @ts-ignore
 import cloneDeep from "lodash/cloneDeep";
 
 function setQueryParams(postman, queryParams) {
@@ -252,6 +251,10 @@ function buildPostmanRequest(
       const { token } = auth.data[a.key];
 
       if (token === undefined) {
+        otherHeaders.push({
+          key: "Authorization",
+          value: "Bearer <TOKEN>",
+        });
         continue;
       }
 
@@ -282,7 +285,7 @@ function buildPostmanRequest(
       if (apikey === undefined) {
         otherHeaders.push({
           key: a.name,
-          value: "API_KEY_VALUE",
+          value: "<API_KEY_VALUE>",
         });
         continue;
       }

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

@@ -5,11 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 import React from "react";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; // @ts-ignore
-// @ts-ignore
-
-import sdk from "@paloaltonetworks/postman-collection"; // @ts-ignore
-
+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";
@@ -24,14 +21,14 @@ import Server from "./Server";
 import { createStoreWithState } from "./store";
 import styles from "./styles.module.css";
 
-function ApiDemoPanel({ item }) {
+function ApiDemoPanel({ item, infoPath }) {
   const { siteConfig } = useDocusaurusContext();
   const themeConfig = siteConfig.themeConfig;
   const options = themeConfig.api;
   const postman = new sdk.Request(item.postman);
   const acceptArray = Array.from(
     new Set(
-      Object.values(item.responses ?? {}) // @ts-ignore
+      Object.values(item.responses ?? {})
         .map((response) => Object.keys(response.content ?? {}))
         .flat()
     )
@@ -46,8 +43,9 @@ function ApiDemoPanel({ item }) {
     cookie: [],
   };
   item.parameters?.forEach((param) => {
-    // @ts-ignore
-    params[param.in].push(param);
+    const paramType = param.in;
+    const paramsArray = params[paramType];
+    paramsArray.push(param);
   });
   const auth = createAuth({
     security: item.security,
@@ -85,9 +83,7 @@ function ApiDemoPanel({ item }) {
     <Provider store={store2}>
       <div className={styles.apiDemoPanelContainer}>
         <MethodEndpoint method={method} path={path} />
-
-        <SecuritySchemes />
-
+        <SecuritySchemes infoPath={infoPath} />
         <div className={styles.optionsPanel}>
           <ParamOptions />
           <Body
@@ -96,11 +92,8 @@ function ApiDemoPanel({ item }) {
           />
           <Accept />
         </div>
-
         <Server />
-
         <Curl postman={postman} codeSamples={item["x-code-samples"] ?? []} />
-
         <Response />
       </div>
     </Provider>

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

@@ -58,6 +58,7 @@ function DocItemContent(props) {
   const { content: DocContent } = props;
   const { metadata, frontMatter } = DocContent;
   const {
+    info_path: infoPath,
     hide_title: hideTitle,
     hide_table_of_contents: hideTableOfContents,
     toc_min_heading_level: tocMinHeadingLevel,
@@ -121,27 +122,17 @@ function DocItemContent(props) {
                   </div>
                   {api && (
                     <div className="col col--5">
-                      <ApiDemoPanel item={api} />
+                      <ApiDemoPanel item={api} infoPath={infoPath} />
                     </div>
                   )}
                 </div>
               </MDXContent>
             </div>
-            <div
-              className={clsx(
-                "col",
-                api ? "col--7" : !canRenderTOC ? "col--9" : "col--12"
-              )}
-            >
+            <div className={clsx("col", api ? "col--7" : "col--12")}>
               <DocItemFooter {...props} />
             </div>
           </article>
-          <div
-            className={clsx(
-              "col",
-              api ? "col--7" : !canRenderTOC ? "col--9" : "col--12"
-            )}
-          >
+          <div className={clsx("col", api ? "col--7" : "col--12")}>
             <DocPaginator previous={metadata.previous} next={metadata.next} />
           </div>
         </div>

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

@@ -1,5 +1,9 @@
 :root {
   --openapi-required: var(--ifm-color-danger);
+  --openapi-code-blue: var(--ifm-color-info);
+  --openapi-code-red: var(--ifm-color-danger);
+  --openapi-code-orange: var(--ifm-color-warning);
+  --openapi-code-green: var(--ifm-color-success);
 }
 
 .apiItemContainer article > *:first-child,
@@ -75,9 +79,9 @@
   font-size: 14px;
 }
 
-:global(.theme-api-markdown h2) {
+/* :global(.theme-api-markdown h2) {
   font-size: 2rem;
-}
+} */
 
 :global(.schemaItem) {
   list-style: none;

package/{src/theme/Tabs → lib-next/theme/ApiTabs}/index.js

@@ -29,7 +29,7 @@ function isTabItem(comp) {
   return typeof comp.props.value !== "undefined";
 }
 
-function ResponseCodeTabs(props) {
+function ApiTabsComponent(props) {
   const {
     lazy,
     block,
@@ -246,10 +246,10 @@ function ResponseCodeTabs(props) {
   );
 }
 
-export default function Tabs(props) {
+export default function ApiTabs(props) {
   const isBrowser = useIsBrowser();
   return (
-    <ResponseCodeTabs // Remount tabs after hydration
+    <ApiTabsComponent // Remount tabs after hydration
       // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
       key={String(isBrowser)}
       {...props}