docusaurus-theme-openapi-docs 1.1.12 → 1.2.0

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

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
+
+var _postmanCollection = _interopRequireDefault(require("@paloaltonetworks/postman-collection"));
+
+var _Accept = _interopRequireDefault(require("../Accept"));
+
+var _Authorization = _interopRequireDefault(require("../Authorization"));
+
+var _Body = _interopRequireDefault(require("../Body"));
+
+var _Execute = _interopRequireDefault(require("../Execute"));
+
+var _hooks = require("../hooks");
+
+var _ParamOptions = _interopRequireDefault(require("../ParamOptions"));
+
+var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+function Request({
+  item
+}) {
+  var _item$parameters;
+
+  const response = (0, _hooks.useTypedSelector)(state => state.response.value);
+  const {
+    siteConfig
+  } = (0, _useDocusaurusContext.default)();
+  const themeConfig = siteConfig.themeConfig;
+  const options = themeConfig.api;
+  const postman = new _postmanCollection.default.Request(item.postman);
+  const params = {
+    path: [],
+    query: [],
+    header: [],
+    cookie: []
+  };
+  (_item$parameters = item.parameters) === null || _item$parameters === void 0 ? void 0 : _item$parameters.forEach(param => {
+    const paramType = param.in;
+    const paramsArray = params[paramType];
+    paramsArray.push(param);
+  });
+  return <div>
+      <details className={`details__demo-panel`} open={response ? false : true}>
+        <summary>
+          <div className={`details__request-summary`}>
+            <h4>Request</h4>
+            {item.servers && <_Execute.default postman={postman} proxy={options === null || options === void 0 ? void 0 : options.proxy} />}
+          </div>
+        </summary>
+        <div className={_stylesModule.default.optionsPanel}>
+          <_Authorization.default />
+          <_ParamOptions.default />
+          <_Body.default jsonRequestBodyExample={item.jsonRequestBodyExample} requestBodyMetadata={item.requestBody} />
+          <_Accept.default />
+        </div>
+      </details>
+    </div>;
+}
+
+var _default = Request;
+exports.default = _default;

package/lib/theme/ApiDemoPanel/Request/styles.module.css

@@ -0,0 +1,17 @@
+.optionsPanel:empty {
+  display: none;
+}
+
+.optionsPanel {
+  background: var(--openapi-card-background-color);
+  border-radius: var(--openapi-card-border-radius);
+  color: var(--ifm-pre-color);
+  line-height: var(--ifm-pre-line-height);
+  margin-bottom: var(--ifm-spacing-vertical);
+  margin-top: 0;
+  overflow: auto;
+  padding: var(--ifm-pre-padding);
+
+  /* hack for view calculation when monaco is hidden */
+  position: relative;
+}

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

@@ -7,9 +7,9 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _hooks = require("../hooks");
+var _CodeBlock = _interopRequireDefault(require("@theme/CodeBlock"));
 
-var _FloatingButton = _interopRequireDefault(require("./../FloatingButton"));
+var _hooks = require("../hooks");
 
 var _slice = require("./slice");
 
@@ -55,20 +55,24 @@ function Response() {
   try {
     prettyResponse = JSON.stringify(JSON.parse(response), null, 2);
   } catch {
-    if (response.startsWith("<?xml ")) {
+    if (response.startsWith("<")) {
       prettyResponse = formatXml(response);
     }
   }
 
-  return <_FloatingButton.default onClick={() => dispatch((0, _slice.clearResponse)())} label="Clear">
-      <pre style={{
-      background: "var(--openapi-card-background-color)",
-      borderRadius: "var(--openapi-card-border-radius)",
-      paddingRight: "60px"
-    }}>
-        <code>{prettyResponse || "No Response"}</code>
-      </pre>
-    </_FloatingButton.default>;
+  return <details className={`details__demo-panel`} open={true}>
+      <summary>
+        <div className={`details__response-summary`}>
+          <h4>Response</h4>
+          <button className="button button--sm button--secondary" onClick={() => dispatch((0, _slice.clearResponse)())}>
+            Clear
+          </button>
+        </div>
+      </summary>
+      <_CodeBlock.default language={response.startsWith("<") ? `xml` : `json`}>
+        {prettyResponse || "No Response"}
+      </_CodeBlock.default>
+    </details>;
 }
 
 var _default = Response;

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

@@ -25,49 +25,54 @@ function SecuritySchemes(props) {
   const infoAuthPath = `/${props.infoPath}#authentication`;
   if (selected === undefined) return null;
   const selectedAuth = options[selected];
-  return <div style={{
-    marginBottom: "var(--ifm-table-cell-padding)"
-  }}>
+  return <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.default.Fragment key={selected}>
-              <b>
-                Authorization: <_Link.default to={infoAuthPath}>{auth.key}</_Link.default>
-              </b>
+        return <_react.default.Fragment key={auth.key}>
               <pre style={{
             display: "flex",
             flexDirection: "column",
-            background: "var(--openapi-card-background-color)",
-            borderRadius: "var(--openapi-card-border-radius)"
+            background: "var(--openapi-card-background-color)"
           }}>
-                <span>name: {auth.name}</span>
-                <span>in: {auth.in}</span>
                 <span>type: {auth.type}</span>
+                <span>
+                  name: <_Link.default to={infoAuthPath}>{auth.name}</_Link.default>
+                </span>
+                <span>in: {auth.in}</span>
               </pre>
             </_react.default.Fragment>;
       }
 
-      if (isClientCredentials) {
+      if (isOauth2) {
         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)"
+            background: "var(--openapi-card-background-color)"
           }}>
-                <span>type: {auth.type}</span>
+                <span>
+                  type: <_Link.default to={infoAuthPath}>{auth.type}</_Link.default>
+                </span>
+                {Object.keys(auth.flows).map(flow => {
+              return <span key={flow}>flow: {flow}</span>;
+            })}
+                <span>
+                  scopes: <code>{auth.scopes.toString()}</code>
+                </span>
               </pre>
             </_react.default.Fragment>;
       }
 
-      return null;
+      return undefined;
     })}
-    </div>;
+    </details>;
 }
 
 var _default = SecuritySchemes;

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

@@ -78,6 +78,7 @@ function Server() {
       </button>
       <_FormItem.default label="Base URL">
         <_FormSelect.default options={options.map(s => s.url)} onChange={e => dispatch((0, _slice.setServer)(e.target.value))} />
+        <small>{value === null || value === void 0 ? void 0 : value.description}</small>
       </_FormItem.default>
       {(value === null || value === void 0 ? void 0 : value.variables) && Object.keys(value.variables).map(key => {
       var _value$variables2, _value$variables3;

package/lib/theme/ApiDemoPanel/buildPostmanRequest.js

@@ -276,6 +276,28 @@ function buildPostmanRequest(postman, {
         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}`
@@ -304,10 +326,10 @@ function buildPostmanRequest(postman, {
 
     if (a.type === "apiKey" && a.in === "header") {
       const {
-        apikey
+        apiKey
       } = auth.data[a.key];
 
-      if (apikey === undefined) {
+      if (apiKey === undefined) {
         otherHeaders.push({
           key: a.name,
           value: "<API_KEY_VALUE>"
@@ -317,7 +339,7 @@ function buildPostmanRequest(postman, {
 
       otherHeaders.push({
         key: a.name,
-        value: apikey
+        value: apiKey
       });
       continue;
     }

package/lib/theme/ApiDemoPanel/index.js

@@ -13,20 +13,16 @@ var _postmanCollection = _interopRequireDefault(require("@paloaltonetworks/postm
 
 var _reactRedux = require("react-redux");
 
-var _Accept = _interopRequireDefault(require("./Accept"));
-
 var _slice = require("./Authorization/slice");
 
-var _Body = _interopRequireDefault(require("./Body"));
-
 var _Curl = _interopRequireDefault(require("./Curl"));
 
 var _MethodEndpoint = _interopRequireDefault(require("./MethodEndpoint"));
 
-var _ParamOptions = _interopRequireDefault(require("./ParamOptions"));
-
 var _persistanceMiddleware = require("./persistanceMiddleware");
 
+var _Request = _interopRequireDefault(require("./Request"));
+
 var _Response = _interopRequireDefault(require("./Response"));
 
 var _SecuritySchemes = _interopRequireDefault(require("./SecuritySchemes"));
@@ -111,15 +107,11 @@ function ApiDemoPanel({
   return <_reactRedux.Provider store={store2}>
       <div className={_stylesModule.default.apiDemoPanelContainer}>
         <_MethodEndpoint.default method={method} path={path} />
-        <_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 : []} />
+        <_SecuritySchemes.default infoPath={infoPath} />
+        <_Request.default item={item} />
         <_Response.default />
+        <_Curl.default postman={postman} codeSamples={(_xCodeSamples = item["x-code-samples"]) !== null && _xCodeSamples !== void 0 ? _xCodeSamples : []} />
       </div>
     </_reactRedux.Provider>;
 }

package/lib/theme/ApiDemoPanel/persistanceMiddleware.js

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

package/lib/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/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/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/ApiDemoPanel/Authorization/auth-types.js

@@ -8,6 +8,10 @@ export function getAuthDataKeys(security) {
   // Bearer Auth
   if (security.type === "http" && security.scheme === "bearer") {
     return ["token"];
+  }
+
+  if (security.type === "oauth2") {
+    return ["token"];
   } // Basic Auth
 
   if (security.type === "http" && security.scheme === "basic") {

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

@@ -0,0 +1,149 @@
+/* ============================================================================
+ * 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/lib-next/theme/ApiDemoPanel/Authorization/slice.js

@@ -35,7 +35,7 @@ import { getAuthDataKeys } from "./auth-types"; // The global definitions
 // BasicAuth                 -> { username: xxx, password: xxx }
 
 export function createAuth({ security, securitySchemes, options: opts }) {
-  const storage = createStorage(opts?.authPersistance);
+  const storage = createStorage("sessionStorage");
   let data = {};
   let options = {};
 

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

@@ -45,6 +45,7 @@ function BodyWrap({ requestBodyMetadata, jsonRequestBodyExample }) {
 
 function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
   const contentType = useTypedSelector((state) => state.contentType.value);
+  const required = requestBodyMetadata?.required;
   const dispatch = useTypedDispatch(); // Lot's of possible content-types:
   // - application/json
   // - application/xml
@@ -68,7 +69,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
 
   if (schema?.format === "binary") {
     return (
-      <FormItem label="Body">
+      <FormItem label="Body" required={required}>
         <FormFileUpload
           placeholder={schema.description || "Body"}
           onChange={(file) => {
@@ -95,7 +96,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
     schema?.type === "object"
   ) {
     return (
-      <FormItem label="Body">
+      <FormItem label="Body" required={required}>
         <div
           style={{
             marginTop: "calc(var(--ifm-pre-padding) / 2)",
@@ -107,7 +108,14 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
           {Object.entries(schema.properties ?? {}).map(([key, val]) => {
             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) => {
@@ -133,7 +141,14 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
 
             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) => {
@@ -156,7 +171,14 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
             } // 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) => {
@@ -204,7 +226,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
   }
 
   return (
-    <FormItem label="Body">
+    <FormItem label="Body" required={required}>
       <LiveApp action={dispatch} language={language}>
         {exampleBodyString}
       </LiveApp>