docusaurus-theme-openapi-docs 1.1.12 → 1.2.0

package/lib/theme/ApiDemoPanel/Authorization/auth-types.js

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

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

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FormItem = _interopRequireDefault(require("../FormItem"));
+
+var _FormSelect = _interopRequireDefault(require("../FormSelect"));
+
+var _FormTextInput = _interopRequireDefault(require("../FormTextInput"));
+
+var _hooks = require("../hooks");
+
+var _slice = require("./slice");
+
+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 Authorization() {
+  const data = (0, _hooks.useTypedSelector)(state => state.auth.data);
+  const options = (0, _hooks.useTypedSelector)(state => state.auth.options);
+  const selected = (0, _hooks.useTypedSelector)(state => state.auth.selected);
+  const dispatch = (0, _hooks.useTypedDispatch)();
+
+  if (selected === undefined) {
+    return null;
+  }
+
+  const selectedAuth = options[selected];
+  const optionKeys = Object.keys(options);
+  return <div>
+      {optionKeys.length > 1 && <_FormItem.default label="Security Scheme">
+          <_FormSelect.default options={optionKeys} value={selected} onChange={e => {
+        dispatch((0, _slice.setSelectedAuth)(e.target.value));
+      }} />
+        </_FormItem.default>}
+      {selectedAuth.map(a => {
+      if (a.type === "http" && a.scheme === "bearer") {
+        var _data$a$key$token;
+
+        return <_FormItem.default label="Bearer Token" key={a.key + "-bearer"}>
+              <_FormTextInput.default placeholder="Bearer Token" value={(_data$a$key$token = data[a.key].token) !== null && _data$a$key$token !== void 0 ? _data$a$key$token : ""} onChange={e => {
+            const value = e.target.value.trim();
+            dispatch((0, _slice.setAuthData)({
+              scheme: a.key,
+              key: "token",
+              value: value ? value : undefined
+            }));
+          }} />
+            </_FormItem.default>;
+      }
+
+      if (a.type === "oauth2") {
+        var _data$a$key$token2;
+
+        return <_FormItem.default label="Bearer Token" key={a.key + "-oauth2"}>
+              <_FormTextInput.default placeholder="Bearer Token" value={(_data$a$key$token2 = data[a.key].token) !== null && _data$a$key$token2 !== void 0 ? _data$a$key$token2 : ""} onChange={e => {
+            const value = e.target.value.trim();
+            dispatch((0, _slice.setAuthData)({
+              scheme: a.key,
+              key: "token",
+              value: value ? value : undefined
+            }));
+          }} />
+            </_FormItem.default>;
+      }
+
+      if (a.type === "http" && a.scheme === "basic") {
+        var _data$a$key$username, _data$a$key$password;
+
+        return <_react.default.Fragment key={a.key + "-basic"}>
+              <_FormItem.default label="Username">
+                <_FormTextInput.default placeholder="Username" value={(_data$a$key$username = data[a.key].username) !== null && _data$a$key$username !== void 0 ? _data$a$key$username : ""} onChange={e => {
+              const value = e.target.value.trim();
+              dispatch((0, _slice.setAuthData)({
+                scheme: a.key,
+                key: "username",
+                value: value ? value : undefined
+              }));
+            }} />
+              </_FormItem.default>
+              <_FormItem.default label="Password">
+                <_FormTextInput.default placeholder="Password" password value={(_data$a$key$password = data[a.key].password) !== null && _data$a$key$password !== void 0 ? _data$a$key$password : ""} onChange={e => {
+              const value = e.target.value.trim();
+              dispatch((0, _slice.setAuthData)({
+                scheme: a.key,
+                key: "password",
+                value: value ? value : undefined
+              }));
+            }} />
+              </_FormItem.default>
+            </_react.default.Fragment>;
+      }
+
+      if (a.type === "apiKey") {
+        var _data$a$key$apiKey;
+
+        return <_FormItem.default label={`${a.key}`} key={a.key + "-apikey"}>
+              <_FormTextInput.default placeholder={`${a.key}`} value={(_data$a$key$apiKey = data[a.key].apiKey) !== null && _data$a$key$apiKey !== void 0 ? _data$a$key$apiKey : ""} onChange={e => {
+            const value = e.target.value.trim();
+            dispatch((0, _slice.setAuthData)({
+              scheme: a.key,
+              key: "apiKey",
+              value: value ? value : undefined
+            }));
+          }} />
+            </_FormItem.default>;
+      }
+
+      return null;
+    })}
+    </div>;
+}
+
+var _default = Authorization;
+exports.default = _default;

package/lib/theme/ApiDemoPanel/Authorization/slice.js

@@ -52,7 +52,7 @@ function createAuth({
 }) {
   var _persisted;
 
-  const storage = (0, _storageUtils.createStorage)(opts === null || opts === void 0 ? void 0 : opts.authPersistance);
+  const storage = (0, _storageUtils.createStorage)("sessionStorage");
   let data = {};
   let options = {};
 

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

@@ -61,6 +61,7 @@ function Body({
   var _requestBodyMetadata$, _requestBodyMetadata$2;
 
   const contentType = (0, _hooks.useTypedSelector)(state => state.contentType.value);
+  const required = requestBodyMetadata === null || requestBodyMetadata === void 0 ? void 0 : requestBodyMetadata.required;
   const dispatch = (0, _hooks.useTypedDispatch)(); // Lot's of possible content-types:
   // - application/json
   // - application/xml
@@ -83,7 +84,7 @@ function Body({
   const schema = requestBodyMetadata === null || requestBodyMetadata === void 0 ? void 0 : (_requestBodyMetadata$ = requestBodyMetadata.content) === null || _requestBodyMetadata$ === void 0 ? void 0 : (_requestBodyMetadata$2 = _requestBodyMetadata$[contentType]) === null || _requestBodyMetadata$2 === void 0 ? void 0 : _requestBodyMetadata$2.schema;
 
   if ((schema === null || schema === void 0 ? void 0 : schema.format) === "binary") {
-    return <_FormItem.default label="Body">
+    return <_FormItem.default label="Body" required={required}>
         <_FormFileUpload.default placeholder={schema.description || "Body"} onChange={file => {
         if (file === undefined) {
           dispatch((0, _slice.clearRawBody)());
@@ -101,7 +102,7 @@ function Body({
   if ((contentType === "multipart/form-data" || contentType === "application/x-www-form-urlencoded") && (schema === null || schema === void 0 ? void 0 : schema.type) === "object") {
     var _schema$properties;
 
-    return <_FormItem.default label="Body">
+    return <_FormItem.default label="Body" required={required}>
         <div style={{
         marginTop: "calc(var(--ifm-pre-padding) / 2)",
         borderRadius: "4px",
@@ -110,7 +111,7 @@ function Body({
       }}>
           {Object.entries((_schema$properties = schema.properties) !== null && _schema$properties !== void 0 ? _schema$properties : {}).map(([key, val]) => {
           if (val.format === "binary") {
-            return <_FormItem.default key={key} label={key}>
+            return <_FormItem.default key={key} label={key} required={Array.isArray(schema.required) && schema.required.includes(key)}>
                   <_FormFileUpload.default placeholder={val.description || key} onChange={file => {
                 if (file === undefined) {
                   dispatch((0, _slice.clearFormBodyKey)(key));
@@ -129,7 +130,7 @@ function Body({
           }
 
           if (val.enum) {
-            return <_FormItem.default key={key} label={key}>
+            return <_FormItem.default key={key} label={key} required={Array.isArray(schema.required) && schema.required.includes(key)}>
                   <_FormSelect.default options={["---", ...val.enum]} onChange={e => {
                 const val = e.target.value;
 
@@ -146,7 +147,7 @@ function Body({
           } // TODO: support all the other types.
 
 
-          return <_FormItem.default key={key} label={key}>
+          return <_FormItem.default key={key} label={key} required={Array.isArray(schema.required) && schema.required.includes(key)}>
                 <_FormTextInput.default placeholder={val.description || key} onChange={e => {
               dispatch((0, _slice.setStringFormBody)({
                 key: key,
@@ -186,7 +187,7 @@ function Body({
     language = "xml";
   }
 
-  return <_FormItem.default label="Body">
+  return <_FormItem.default label="Body" required={required}>
       <_LiveEditor.default action={dispatch} language={language}>
         {exampleBodyString}
       </_LiveEditor.default>

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

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactModal = _interopRequireDefault(require("react-modal"));
+
+var _hooks = require("../hooks");
+
+var _slice = require("../Response/slice");
+
+var _buildPostmanRequest = _interopRequireDefault(require("./../buildPostmanRequest"));
+
+var _makeRequest = _interopRequireDefault(require("./makeRequest"));
+
+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 validateRequest(params) {
+  for (let paramList of Object.values(params)) {
+    for (let param of paramList) {
+      if (param.required && !param.value) {
+        return false;
+      }
+    }
+  }
+
+  return true;
+}
+
+function Execute({
+  postman,
+  proxy
+}) {
+  const pathParams = (0, _hooks.useTypedSelector)(state => state.params.path);
+  const queryParams = (0, _hooks.useTypedSelector)(state => state.params.query);
+  const cookieParams = (0, _hooks.useTypedSelector)(state => state.params.cookie);
+  const headerParams = (0, _hooks.useTypedSelector)(state => state.params.header);
+  const contentType = (0, _hooks.useTypedSelector)(state => state.contentType.value);
+  const body = (0, _hooks.useTypedSelector)(state => state.body);
+  const accept = (0, _hooks.useTypedSelector)(state => state.accept.value);
+  const server = (0, _hooks.useTypedSelector)(state => state.server.value);
+  const params = (0, _hooks.useTypedSelector)(state => state.params);
+  const auth = (0, _hooks.useTypedSelector)(state => state.auth);
+  const isValidRequest = validateRequest(params);
+  const dispatch = (0, _hooks.useTypedDispatch)();
+  const postmanRequest = (0, _buildPostmanRequest.default)(postman, {
+    queryParams,
+    pathParams,
+    cookieParams,
+    contentType,
+    accept,
+    headerParams,
+    body,
+    server,
+    auth
+  });
+
+  const delay = ms => 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.default.useState(false); // Set the following as default value to persist to session and enable modal
+  // sessionStorage.getItem("agreement-ack") === "true"
+
+
+  const [agreementAccepted, setAgreementAccepted] = _react.default.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((0, _slice.setResponse)("Fetching..."));
+
+      try {
+        await delay(1200);
+        const res = await (0, _makeRequest.default)(postmanRequest, proxy, body);
+        dispatch((0, _slice.setResponse)(res));
+      } catch (e) {
+        console.log(e);
+        dispatch((0, _slice.setResponse)("Connection failed"));
+      }
+    }}>
+        Send API Request
+      </button>;
+  } else {
+    return <_react.default.Fragment>
+        <button className="button button--sm button--secondary" onClick={openModal}>
+          Send API Request
+        </button>
+        <_reactModal.default 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>
+        </_reactModal.default>
+      </_react.default.Fragment>;
+  }
+}
+
+var _default = Execute;
+exports.default = _default;

package/lib/theme/ApiDemoPanel/Execute/makeRequest.js

@@ -0,0 +1,204 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/* ============================================================================
+ * 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 fetchWithtimeout(url, options, timeout = 5000) {
+  return Promise.race([fetch(url, options), new Promise((_, reject) => setTimeout(() => reject(new Error("Request timed out")), timeout))]);
+}
+
+async function loadImage(content) {
+  return new Promise((accept, reject) => {
+    const reader = new FileReader();
+
+    reader.onabort = () => {
+      console.log("file reading was aborted");
+      reject();
+    };
+
+    reader.onerror = () => {
+      console.log("file reading has failed");
+      reject();
+    };
+
+    reader.onload = () => {
+      // Do whatever you want with the file contents
+      const binaryStr = reader.result;
+      accept(binaryStr);
+    };
+
+    reader.readAsArrayBuffer(content);
+  });
+}
+
+async function makeRequest(request, proxy, _body) {
+  var _request$body;
+
+  const headers = request.toJSON().header;
+  let myHeaders = new Headers();
+
+  if (headers) {
+    headers.forEach(header => {
+      if (header.key && header.value) {
+        myHeaders.append(header.key, header.value);
+      }
+    });
+  } // The following code handles multiple files in the same formdata param.
+  // It removes the form data params where the src property is an array of filepath strings
+  // Splits that array into different form data params with src set as a single filepath string
+  // TODO:
+  // if (request.body && request.body.mode === 'formdata') {
+  //   let formdata = request.body.formdata,
+  //     formdataArray = [];
+  //   formdata.members.forEach((param) => {
+  //     let key = param.key,
+  //       type = param.type,
+  //       disabled = param.disabled,
+  //       contentType = param.contentType;
+  //     // check if type is file or text
+  //     if (type === 'file') {
+  //       // if src is not of type string we check for array(multiple files)
+  //       if (typeof param.src !== 'string') {
+  //         // if src is an array(not empty), iterate over it and add files as separate form fields
+  //         if (Array.isArray(param.src) && param.src.length) {
+  //           param.src.forEach((filePath) => {
+  //             addFormParam(
+  //               formdataArray,
+  //               key,
+  //               param.type,
+  //               filePath,
+  //               disabled,
+  //               contentType
+  //             );
+  //           });
+  //         }
+  //         // if src is not an array or string, or is an empty array, add a placeholder for file path(no files case)
+  //         else {
+  //           addFormParam(
+  //             formdataArray,
+  //             key,
+  //             param.type,
+  //             '/path/to/file',
+  //             disabled,
+  //             contentType
+  //           );
+  //         }
+  //       }
+  //       // if src is string, directly add the param with src as filepath
+  //       else {
+  //         addFormParam(
+  //           formdataArray,
+  //           key,
+  //           param.type,
+  //           param.src,
+  //           disabled,
+  //           contentType
+  //         );
+  //       }
+  //     }
+  //     // if type is text, directly add it to formdata array
+  //     else {
+  //       addFormParam(
+  //         formdataArray,
+  //         key,
+  //         param.type,
+  //         param.value,
+  //         disabled,
+  //         contentType
+  //       );
+  //     }
+  //   });
+  //   request.body.update({
+  //     mode: 'formdata',
+  //     formdata: formdataArray,
+  //   });
+  // }
+
+
+  const body = (_request$body = request.body) === null || _request$body === void 0 ? void 0 : _request$body.toJSON();
+  let myBody = undefined;
+
+  if (body !== undefined && Object.keys(body).length > 0) {
+    switch (body.mode) {
+      case "urlencoded":
+        {
+          myBody = new URLSearchParams();
+
+          if (Array.isArray(body.urlencoded)) {
+            for (const data of body.urlencoded) {
+              if (data.key && data.value) {
+                myBody.append(data.key, data.value);
+              }
+            }
+          }
+
+          break;
+        }
+
+      case "raw":
+        {
+          var _body$raw;
+
+          myBody = ((_body$raw = body.raw) !== null && _body$raw !== void 0 ? _body$raw : "").toString();
+          break;
+        }
+
+      case "formdata":
+        {
+          myBody = new FormData();
+
+          if (Array.isArray(body.formdata)) {
+            for (const data of body.formdata) {
+              if (data.key && data.value) {
+                myBody.append(data.key, data.value);
+              }
+            }
+          }
+
+          break;
+        }
+
+      case "file":
+        {
+          var _body$content;
+
+          if (_body.type === "raw" && ((_body$content = _body.content) === null || _body$content === void 0 ? void 0 : _body$content.type) === "file") {
+            myBody = await loadImage(_body.content.value.content);
+          }
+
+          break;
+        }
+
+      default:
+        break;
+    }
+  }
+
+  const requestOptions = {
+    method: request.method,
+    headers: myHeaders,
+    body: myBody
+  };
+  let finalUrl = request.url.toString();
+
+  if (proxy) {
+    // Ensure the proxy ends with a slash.
+    let normalizedProxy = proxy.replace(/\/$/, "") + "/";
+    finalUrl = normalizedProxy + request.url.toString();
+  }
+
+  return await fetchWithtimeout(finalUrl, requestOptions).then(response => {
+    return response.text();
+  });
+}
+
+var _default = makeRequest;
+exports.default = _default;

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

@@ -20,6 +20,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function FormItem({
   label,
   type,
+  required,
   children
 }) {
   return <div className={_stylesModule.default.formItem}>
@@ -27,6 +28,12 @@ function FormItem({
       {type && <span style={{
       opacity: 0.6
     }}> — {type}</span>}
+      {required && <span>
+          {" "}
+          <small>
+            <strong className={_stylesModule.default.required}> required</strong>
+          </small>
+        </span>}
       <div>{children}</div>
     </div>;
 }

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

@@ -5,3 +5,8 @@
 .formItem:first-child {
   margin-top: 0;
 }
+
+.required {
+  font-size: var(--ifm-code-font-size);
+  color: var(--openapi-required);
+}

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

@@ -64,7 +64,7 @@ function ParamOption({
 function ParamOptionWrapper({
   param
 }) {
-  return <_FormItem.default label={param.name} type={param.in}>
+  return <_FormItem.default label={param.name} type={param.in} required={param.required}>
       <ParamOption param={param} />
     </_FormItem.default>;
 }