docusaurus-theme-openapi-docs 0.0.0-345

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

@@ -0,0 +1,35 @@
+/* ============================================================================
+ * 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 { useTypedDispatch, useTypedSelector } from "../hooks";
+import FormItem from "./../FormItem";
+import FormSelect from "./../FormSelect";
+import { setContentType } from "./slice";
+
+function ContentType() {
+  const value = useTypedSelector((state) => state.contentType.value);
+  const options = useTypedSelector((state) => state.contentType.options);
+  const dispatch = useTypedDispatch();
+
+  if (options.length <= 1) {
+    return null;
+  }
+
+  return (
+    <FormItem label="Content-Type">
+      <FormSelect
+        value={value}
+        options={options}
+        onChange={(e) => dispatch(setContentType(e.target.value))}
+      />
+    </FormItem>
+  );
+}
+
+export default ContentType;

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

@@ -0,0 +1,29 @@
+/* ============================================================================
+ * 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 { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export interface State {
+  value: string;
+  options: string[];
+}
+
+const initialState: State = {} as any;
+
+export const slice = createSlice({
+  name: "contentType",
+  initialState,
+  reducers: {
+    setContentType: (state, action: PayloadAction<string>) => {
+      state.value = action.payload;
+    },
+  },
+});
+
+export const { setContentType } = slice.actions;
+
+export default slice.reducer;

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

@@ -0,0 +1,278 @@
+/* ============================================================================
+ * 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, { useRef, useState, useEffect } from "react";
+
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import codegen from "@paloaltonetworks/postman-code-generators";
+import sdk from "@paloaltonetworks/postman-collection";
+import clsx from "clsx";
+import Highlight, { defaultProps } from "prism-react-renderer";
+
+import { useTypedSelector } from "../hooks";
+import buildPostmanRequest from "./../buildPostmanRequest";
+import FloatingButton from "./../FloatingButton";
+import styles from "./styles.module.css";
+
+interface Language {
+  tabName: string;
+  highlight: string;
+  language: string;
+  variant: string;
+  options: { [key: string]: boolean };
+}
+
+const languageSet: Language[] = [
+  {
+    tabName: "cURL",
+    highlight: "bash",
+    language: "curl",
+    variant: "curl",
+    options: {
+      longFormat: false,
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+  },
+  {
+    tabName: "Node",
+    highlight: "javascript",
+    language: "nodejs",
+    variant: "axios",
+    options: {
+      ES6_enabled: true,
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+  },
+  {
+    tabName: "Go",
+    highlight: "go",
+    language: "go",
+    variant: "native",
+    options: {
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+  },
+  {
+    tabName: "Python",
+    highlight: "python",
+    language: "python",
+    variant: "requests",
+    options: {
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+  },
+];
+
+const languageTheme = {
+  plain: {
+    color: "var(--ifm-code-color)",
+  },
+  styles: [
+    {
+      types: ["inserted", "attr-name"],
+      style: {
+        color: "var(--openapi-code-green)",
+      },
+    },
+    {
+      types: ["string", "url"],
+      style: {
+        color: "var(--openapi-code-green)",
+      },
+    },
+    {
+      types: ["builtin", "char", "constant", "function"],
+      style: {
+        color: "var(--openapi-code-blue)",
+      },
+    },
+    {
+      types: ["punctuation", "operator"],
+      style: {
+        color: "var(--openapi-code-dim)",
+      },
+    },
+    {
+      types: ["class-name"],
+      style: {
+        color: "var(--openapi-code-orange)",
+      },
+    },
+    {
+      types: ["tag", "arrow", "keyword"],
+      style: {
+        color: "var(--openapi-code-purple)",
+      },
+    },
+    {
+      types: ["boolean"],
+      style: {
+        color: "var(--openapi-code-red)",
+      },
+    },
+  ],
+};
+
+interface Props {
+  postman: sdk.Request;
+  codeSamples: any; // TODO: Type this...
+}
+
+function Curl({ postman, codeSamples }: Props) {
+  // TODO: match theme for vscode.
+
+  const { siteConfig } = useDocusaurusContext();
+
+  const [copyText, setCopyText] = useState("Copy");
+
+  const contentType = useTypedSelector((state) => state.contentType.value);
+  const accept = useTypedSelector((state) => state.accept.value);
+  const server = useTypedSelector((state) => state.server.value);
+  const body = useTypedSelector((state) => state.body);
+
+  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 auth = useTypedSelector((state) => state.auth);
+
+  // TODO
+  const langs = [
+    ...((siteConfig?.themeConfig?.languageTabs as Language[] | undefined) ??
+      languageSet),
+    ...codeSamples,
+  ];
+
+  const [language, setLanguage] = useState(langs[0]);
+
+  const [codeText, setCodeText] = useState("");
+
+  useEffect(() => {
+    if (language && !!language.options) {
+      const postmanRequest = buildPostmanRequest(postman, {
+        queryParams,
+        pathParams,
+        cookieParams,
+        contentType,
+        accept,
+        headerParams,
+        body,
+        server,
+        auth,
+      });
+
+      codegen.convert(
+        language.language,
+        language.variant,
+        postmanRequest,
+        language.options,
+        (error: any, snippet: string) => {
+          if (error) {
+            return;
+          }
+          setCodeText(snippet);
+        }
+      );
+    } else if (language && !!language.source) {
+      setCodeText(language.source);
+    } else {
+      setCodeText("");
+    }
+  }, [
+    accept,
+    body,
+    contentType,
+    cookieParams,
+    headerParams,
+    language,
+    pathParams,
+    postman,
+    queryParams,
+    server,
+    auth,
+  ]);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  const handleCurlCopy = () => {
+    setCopyText("Copied");
+    setTimeout(() => {
+      setCopyText("Copy");
+    }, 2000);
+    if (ref.current?.innerText) {
+      navigator.clipboard.writeText(ref.current.innerText);
+    }
+  };
+
+  if (language === undefined) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className={clsx(styles.buttonGroup, "api-code-tab-group")}>
+        {langs.map((lang) => {
+          return (
+            <button
+              key={lang.tabName || lang.label}
+              className={clsx(
+                language === lang ? styles.selected : undefined,
+                language === lang ? "api-code-tab--active" : undefined,
+                "api-code-tab"
+              )}
+              onClick={() => setLanguage(lang)}
+            >
+              {lang.tabName || lang.label}
+            </button>
+          );
+        })}
+      </div>
+
+      <Highlight
+        {...defaultProps}
+        theme={languageTheme}
+        code={codeText}
+        language={language.highlight || language.lang}
+      >
+        {({ className, tokens, getLineProps, getTokenProps }) => (
+          <FloatingButton onClick={handleCurlCopy} label={copyText}>
+            <pre
+              className={className}
+              style={{
+                background: "var(--openapi-card-background-color)",
+                paddingRight: "60px",
+                borderRadius:
+                  "2px 2px var(--openapi-card-border-radius) var(--openapi-card-border-radius)",
+              }}
+            >
+              <code ref={ref}>
+                {tokens.map((line, i) => (
+                  <span {...getLineProps({ line, key: i })}>
+                    {line.map((token, key) => {
+                      if (token.types.includes("arrow")) {
+                        token.types = ["arrow"];
+                      }
+                      return <span {...getTokenProps({ token, key })} />;
+                    })}
+                    {"\n"}
+                  </span>
+                ))}
+              </code>
+            </pre>
+          </FloatingButton>
+        )}
+      </Highlight>
+    </>
+  );
+}
+
+export default Curl;

package/src/theme/ApiDemoPanel/Curl/styles.module.css

@@ -0,0 +1,84 @@
+.buttonGroup {
+  background: var(--openapi-card-background-color);
+  color: var(--ifm-pre-color);
+  font-family: var(--ifm-font-family-monospace);
+  /* font-size: var(--ifm-code-font-size); */
+  /* line-height: var(--ifm-pre-line-height); */
+  /* margin-bottom: calc(var(--ifm-spacing-vertical) / 4); */
+  margin-bottom: 1px;
+  margin-top: 0;
+  border-radius: var(--openapi-card-border-radius)
+    var(--openapi-card-border-radius) 2px 2px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.buttonGroup button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  cursor: pointer;
+  /* font-size: calc(0.875rem * var(--ifm-button-size-multiplier)); */
+  /* line-height: 1.5; */
+  /* font-weight: var(--ifm-button-font-weight); */
+
+  /* font-size: var(--ifm-code-font-size); */
+  font-size: 13.3333px;
+  line-height: var(--ifm-pre-line-height);
+  font-weight: var(--ifm-font-weight-semibold);
+
+  padding: calc(
+      var(--ifm-button-padding-vertical) * var(--ifm-button-size-multiplier)
+    )
+    calc(
+      var(--ifm-button-padding-horizontal) * var(--ifm-button-size-multiplier)
+    );
+
+  text-align: center;
+
+  transition: color var(--ifm-button-transition-duration)
+      cubic-bezier(0.08, 0.52, 0.52, 1),
+    background var(--ifm-button-transition-duration)
+      cubic-bezier(0.08, 0.52, 0.52, 1),
+    border-color var(--ifm-button-transition-duration)
+      cubic-bezier(0.08, 0.52, 0.52, 1);
+  -webkit-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+
+  background: transparent;
+
+  color: var(--ifm-menu-color);
+  border: 0px solid transparent;
+  /* border-radius: var(--ifm-pre-border-radius); */
+
+  --margin: 0.25rem;
+
+  border-radius: calc(var(--margin));
+  /* border-radius: 0.25rem; */
+
+  display: block;
+  width: 100%;
+
+  /* margin: 2px; */
+  margin: var(--margin);
+  margin-right: 0;
+}
+
+.buttonGroup button:last-child {
+  margin-right: 0.25rem;
+}
+
+.buttonGroup button:hover {
+  background: var(--ifm-menu-color-background-active);
+}
+
+.buttonGroup button:focus {
+  outline: 0;
+}
+
+.buttonGroup button.selected {
+  background: var(--ifm-menu-color-background-active);
+  color: var(--ifm-menu-color-active);
+}

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

@@ -0,0 +1,87 @@
+/* ============================================================================
+ * 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 { 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,
+  });
+
+  return (
+    <button
+      className="button button--block button--primary"
+      style={{ height: "48px", marginBottom: "var(--ifm-spacing-vertical)" }}
+      disabled={!isValidRequest}
+      onClick={async () => {
+        dispatch(setResponse("loading..."));
+        try {
+          const res = await makeRequest(postmanRequest, proxy, body);
+          dispatch(setResponse(res));
+        } catch (e: any) {
+          dispatch(setResponse(e.message ?? "Error fetching."));
+        }
+      }}
+    >
+      Execute
+    </button>
+  );
+}
+
+export default Execute;

package/src/theme/ApiDemoPanel/Execute/makeRequest.ts

@@ -0,0 +1,182 @@
+/* ============================================================================
+ * 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 sdk from "@paloaltonetworks/postman-collection";
+
+import { Body } from "../Body/slice";
+
+async function loadImage(content: Blob): Promise<string | ArrayBuffer | null> {
+  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: sdk.Request,
+  proxy: string | undefined,
+  _body: Body
+) {
+  const headers = request.toJSON().header;
+
+  let myHeaders = new Headers();
+  if (headers) {
+    headers.forEach((header: any) => {
+      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?.toJSON();
+
+  let myBody: RequestInit["body"] = 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": {
+        myBody = (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": {
+        if (_body.type === "raw" && _body.content?.type === "file") {
+          myBody = await loadImage(_body.content.value.content);
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  const requestOptions: RequestInit = {
+    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 fetch(finalUrl, requestOptions).then((response) => {
+    return response.text();
+  });
+}
+
+export default makeRequest;