npm - docusaurus-theme-openapi-docs - Versions diffs - 1.1.12 → 1.2.0 - Mend

docusaurus-theme-openapi-docs 1.1.12 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

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

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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/ParamsItem/index.js CHANGED Viewed

@@ -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/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "1.1.12",
+  "version": "1.2.0",
   "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": "fdbc413e36c3b7c202cc31606124c0a8eb76811b"
 }

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>

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

@@ -0,0 +1,188 @@
+/* ============================================================================
+ * 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 sdk from "@paloaltonetworks/postman-collection";
+import Modal from "react-modal";
+import { useTypedDispatch, useTypedSelector } from "../hooks";
+import { Param } from "../ParamOptions/slice";
+import { setResponse } from "../Response/slice";
+import buildPostmanRequest from "./../buildPostmanRequest";
+import makeRequest from "./makeRequest";
+function validateRequest(params: {
+  path: Param[];
+  query: Param[];
+  header: Param[];
+  cookie: Param[];
+}) {
+  for (let paramList of Object.values(params)) {
+    for (let param of paramList) {
+      if (param.required && !param.value) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+interface Props {
+  postman: sdk.Request;
+  proxy?: string;
+}
+function Execute({ postman, proxy }: Props) {
+  const pathParams = useTypedSelector((state) => state.params.path);
+  const queryParams = useTypedSelector((state) => state.params.query);
+  const cookieParams = useTypedSelector((state) => state.params.cookie);
+  const headerParams = useTypedSelector((state) => state.params.header);
+  const contentType = useTypedSelector((state) => state.contentType.value);
+  const body = useTypedSelector((state) => state.body);
+  const accept = useTypedSelector((state) => state.accept.value);
+  const server = useTypedSelector((state) => state.server.value);
+  const params = useTypedSelector((state) => state.params);
+  const auth = useTypedSelector((state) => state.auth);
+  const isValidRequest = validateRequest(params);
+  const dispatch = useTypedDispatch();
+  const postmanRequest = buildPostmanRequest(postman, {
+    queryParams,
+    pathParams,
+    cookieParams,
+    contentType,
+    accept,
+    headerParams,
+    body,
+    server,
+    auth,
+  });
+  const delay = (ms: number) =>
+    new Promise((resolve) => setTimeout(resolve, ms));
+  function openModal() {
+    setIsOpen(true);
+  }
+  function closeModal() {
+    setIsOpen(false);
+  }
+  function acceptAgreement() {
+    setIsOpen(false);
+    setAgreementAccepted(true);
+    sessionStorage.setItem("agreement-ack", "true");
+  }
+  const [modalIsOpen, setIsOpen] = React.useState(false);
+  // Set the following as default value to persist to session and enable modal
+  // sessionStorage.getItem("agreement-ack") === "true"
+  const [agreementAccepted, setAgreementAccepted] = React.useState(true);
+  const customStyles = {
+    overlay: {
+      backdropFilter: "blur(10px)",
+      backgroundColor: "transparent",
+    },
+    content: {
+      top: "50%",
+      left: "50%",
+      right: "auto",
+      bottom: "auto",
+      marginRight: "-50%",
+      border: "none",
+      padding: "none",
+      borderRadius: "var(--openapi-card-border-radius)",
+      background: "var(--ifm-card-background-color)",
+      transform: "translate(-50%, -50%)",
+      maxWidth: "550px",
+    },
+  };
+  if (agreementAccepted) {
+    return (
+      <button
+        className="button button--sm button--secondary"
+        disabled={!isValidRequest}
+        onClick={async () => {
+          dispatch(setResponse("Fetching..."));
+          try {
+            await delay(1200);
+            const res = await makeRequest(postmanRequest, proxy, body);
+            dispatch(setResponse(res));
+          } catch (e: any) {
+            console.log(e);
+            dispatch(setResponse("Connection failed"));
+          }
+        }}
+      >
+        Send API Request
+      </button>
+    );
+  } else {
+    return (
+      <React.Fragment>
+        <button
+          className="button button--sm button--secondary"
+          onClick={openModal}
+        >
+          Send API Request
+        </button>
+        <Modal
+          isOpen={modalIsOpen}
+          onRequestClose={closeModal}
+          style={customStyles}
+          contentLabel="Terms of Use"
+        >
+          <form>
+            <div className="card">
+              <div className="card__header">
+                <h2>Terms of Use</h2>
+                <hr></hr>
+              </div>
+              <div className="card__body">
+                <p>
+                  By accepting this agreement the end user acknowledges the
+                  risks of performing authenticated and non-authenticated API
+                  requests from the browser.
+                </p>
+                <p>
+                  The end user also accepts the responsibility of safeguarding
+                  API credentials and any potentially sensitive data returned by
+                  the API.
+                </p>
+                <br></br>
+              </div>
+              <div className="card__footer">
+                <div className="button-group button-group--block">
+                  <button
+                    className="button button--sm button--outline button--success"
+                    onClick={acceptAgreement}
+                  >
+                    AGREE
+                  </button>
+                  <button
+                    className="button button--sm button--outline button--danger"
+                    onClick={closeModal}
+                  >
+                    DISAGREE
+                  </button>
+                </div>
+              </div>
+            </div>
+          </form>
+        </Modal>
+      </React.Fragment>
+    );
+  }
+}
+export default Execute;