docusaurus-theme-openapi-docs 0.0.0-1000

package/src/theme/ApiExplorer/Response/index.tsx

@@ -0,0 +1,157 @@
+/* ============================================================================
+ * 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 { useDoc } from "@docusaurus/plugin-content-docs/client";
+import { usePrismTheme } from "@docusaurus/theme-common";
+import ApiCodeBlock from "@theme/ApiExplorer/ApiCodeBlock";
+import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
+import SchemaTabs from "@theme/SchemaTabs";
+import TabItem from "@theme/TabItem";
+import clsx from "clsx";
+import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
+
+import { clearResponse, clearCode, clearHeaders } from "./slice";
+
+// TODO: We probably shouldn't attempt to format XML...
+function formatXml(xml: string) {
+  const tab = "  ";
+  let formatted = "";
+  let indent = "";
+
+  xml.split(/>\s*</).forEach((node) => {
+    if (node.match(/^\/\w/)) {
+      // decrease indent by one 'tab'
+      indent = indent.substring(tab.length);
+    }
+    formatted += indent + "<" + node + ">\r\n";
+    if (node.match(/^<?\w[^>]*[^/]$/)) {
+      // increase indent
+      indent += tab;
+    }
+  });
+  return formatted.substring(1, formatted.length - 3);
+}
+
+function Response({ item }: { item: ApiItem }) {
+  const metadata = useDoc();
+  const hideSendButton = metadata.frontMatter.hide_send_button;
+  const prismTheme = usePrismTheme();
+  const code = useTypedSelector((state: any) => state.response.code);
+  const headers = useTypedSelector((state: any) => state.response.headers);
+  const response = useTypedSelector((state: any) => state.response.value);
+  const dispatch = useTypedDispatch();
+  const responseStatusClass =
+    code &&
+    "openapi-response__dot " +
+      (parseInt(code) >= 400
+        ? "openapi-response__dot--danger"
+        : parseInt(code) >= 200 && parseInt(code) < 300
+          ? "openapi-response__dot--success"
+          : "openapi-response__dot--info");
+
+  if (!item.servers || hideSendButton) {
+    return null;
+  }
+
+  let prettyResponse: string = response;
+
+  if (prettyResponse) {
+    try {
+      prettyResponse = JSON.stringify(JSON.parse(response), null, 2);
+    } catch {
+      if (response.startsWith("<")) {
+        prettyResponse = formatXml(response);
+      }
+    }
+  }
+
+  return (
+    <div className="openapi-explorer__response-container">
+      <div className="openapi-explorer__response-title-container">
+        <span className="openapi-explorer__response-title">Response</span>
+        <span
+          className="openapi-explorer__response-clear-btn"
+          onClick={() => {
+            dispatch(clearResponse());
+            dispatch(clearCode());
+            dispatch(clearHeaders());
+          }}
+        >
+          Clear
+        </span>
+      </div>
+      <div
+        style={{
+          backgroundColor:
+            code && prettyResponse !== "Fetching..."
+              ? prismTheme.plain.backgroundColor
+              : "transparent",
+          paddingLeft: "1rem",
+          paddingTop: "1rem",
+          ...((prettyResponse === "Fetching..." || !code) && {
+            paddingBottom: "1rem",
+          }),
+        }}
+      >
+        {code && prettyResponse !== "Fetching..." ? (
+          <SchemaTabs lazy>
+            {/* @ts-ignore */}
+            <TabItem
+              label={` ${code}`}
+              value="body"
+              attributes={{
+                className: clsx("openapi-response__dot", responseStatusClass),
+              }}
+              default
+            >
+              {/* @ts-ignore */}
+              <ApiCodeBlock
+                className="openapi-explorer__code-block openapi-response__status-code"
+                language={response.startsWith("<") ? `xml` : `json`}
+              >
+                {prettyResponse || (
+                  <p className="openapi-explorer__response-placeholder-message">
+                    Click the <code>Send API Request</code> button above and see
+                    the response here!
+                  </p>
+                )}
+              </ApiCodeBlock>
+            </TabItem>
+            {/* @ts-ignore */}
+            <TabItem label="Headers" value="headers">
+              {/* @ts-ignore */}
+              <ApiCodeBlock
+                className="openapi-explorer__code-block openapi-response__status-headers"
+                language={response.startsWith("<") ? `xml` : `json`}
+              >
+                {JSON.stringify(headers, undefined, 2)}
+              </ApiCodeBlock>
+            </TabItem>
+          </SchemaTabs>
+        ) : prettyResponse === "Fetching..." ? (
+          <div className="openapi-explorer__loading-container">
+            <div className="openapi-response__lds-ring">
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+            </div>
+          </div>
+        ) : (
+          <p className="openapi-explorer__response-placeholder-message">
+            Click the <code>Send API Request</code> button above and see the
+            response here!
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Response;

package/src/theme/ApiExplorer/Response/slice.ts

@@ -0,0 +1,52 @@
+/* ============================================================================
+ * 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;
+  code?: string;
+  headers?: string;
+}
+
+const initialState: State = {} as any;
+
+export const slice = createSlice({
+  name: "response",
+  initialState,
+  reducers: {
+    setResponse: (state, action: PayloadAction<string>) => {
+      state.value = action.payload;
+    },
+    setCode: (state, action: PayloadAction<string>) => {
+      state.code = action.payload;
+    },
+    setHeaders: (state, action: PayloadAction<string>) => {
+      state.headers = action.payload;
+    },
+    clearResponse: (state) => {
+      state.value = undefined;
+    },
+    clearCode: (state) => {
+      state.code = undefined;
+    },
+    clearHeaders: (state) => {
+      state.headers = undefined;
+    },
+  },
+});
+
+export const {
+  setResponse,
+  clearResponse,
+  setCode,
+  clearCode,
+  setHeaders,
+  clearHeaders,
+} = slice.actions;
+
+export default slice.reducer;

package/src/theme/ApiExplorer/SecuritySchemes/index.tsx

@@ -0,0 +1,287 @@
+/* ============================================================================
+ * 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 Link from "@docusaurus/Link";
+import { useTypedSelector } from "@theme/ApiItem/hooks";
+
+function SecuritySchemes(props: any) {
+  const options = useTypedSelector((state: any) => state.auth.options);
+  const selected = useTypedSelector((state: any) => state.auth.selected);
+  const infoAuthPath = `/${props.infoPath}#authentication`;
+
+  if (selected === undefined) return null;
+
+  if (options[selected]?.[0]?.type === undefined) {
+    return null;
+  }
+
+  const selectedAuth = options[selected];
+  return (
+    <details className="openapi-security__details" open={false}>
+      <summary className="openapi-security__summary-container">
+        <h4 className="openapi-security__summary-header">
+          Authorization: {selectedAuth[0].name ?? selectedAuth[0].type}
+        </h4>
+      </summary>
+      {selectedAuth.map((auth: any) => {
+        const isHttp = auth.type === "http";
+        const isApiKey = auth.type === "apiKey";
+        const isOauth2 = auth.type === "oauth2";
+        const isOpenId = auth.type === "openIdConnect";
+
+        if (isHttp) {
+          if (auth.scheme === "bearer") {
+            const { name, key, type, scopes, ...rest } = auth;
+            return (
+              <React.Fragment key={auth.key}>
+                <pre
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    background: "var(--openapi-card-background-color)",
+                  }}
+                >
+                  <span>
+                    <strong>name:</strong>{" "}
+                    <Link to={infoAuthPath}>{name ?? key}</Link>
+                  </span>
+                  <span>
+                    <strong>type: </strong>
+                    {type}
+                  </span>
+                  {scopes && scopes.length > 0 && (
+                    <span>
+                      <strong>scopes: </strong>
+                      <code>
+                        {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                      </code>
+                    </span>
+                  )}
+                  {Object.keys(rest).map((k, i) => {
+                    return (
+                      <span key={k}>
+                        <strong>{k}: </strong>
+                        {typeof rest[k] === "object"
+                          ? JSON.stringify(rest[k], null, 2)
+                          : String(rest[k])}
+                      </span>
+                    );
+                  })}
+                </pre>
+              </React.Fragment>
+            );
+          }
+          if (auth.scheme === "basic") {
+            const { name, key, type, scopes, ...rest } = auth;
+            return (
+              <React.Fragment key={auth.key}>
+                <pre
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    background: "var(--openapi-card-background-color)",
+                  }}
+                >
+                  <span>
+                    <strong>name:</strong>{" "}
+                    <Link to={infoAuthPath}>{name ?? key}</Link>
+                  </span>
+                  <span>
+                    <strong>type: </strong>
+                    {type}
+                  </span>
+                  {scopes && scopes.length > 0 && (
+                    <span>
+                      <strong>scopes: </strong>
+                      <code>
+                        {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                      </code>
+                    </span>
+                  )}
+                  {Object.keys(rest).map((k, i) => {
+                    return (
+                      <span key={k}>
+                        <strong>{k}: </strong>
+                        {typeof rest[k] === "object"
+                          ? JSON.stringify(rest[k], null, 2)
+                          : String(rest[k])}
+                      </span>
+                    );
+                  })}
+                </pre>
+              </React.Fragment>
+            );
+          }
+          return (
+            <React.Fragment key={auth.key}>
+              <pre
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  background: "var(--openapi-card-background-color)",
+                }}
+              >
+                <span>
+                  <strong>name:</strong>{" "}
+                  <Link to={infoAuthPath}>{auth.name ?? auth.key}</Link>
+                </span>
+                <span>
+                  <strong>type: </strong>
+                  {auth.type}
+                </span>
+                <span>
+                  <strong>in: </strong>
+                  {auth.in}
+                </span>
+              </pre>
+            </React.Fragment>
+          );
+        }
+
+        if (isApiKey) {
+          const { name, key, type, scopes, ...rest } = auth;
+          return (
+            <React.Fragment key={auth.key}>
+              <pre
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  background: "var(--openapi-card-background-color)",
+                }}
+              >
+                <span>
+                  <strong>name:</strong>{" "}
+                  <Link to={infoAuthPath}>{name ?? key}</Link>
+                </span>
+                <span>
+                  <strong>type: </strong>
+                  {type}
+                </span>
+                {scopes && scopes.length > 0 && (
+                  <span>
+                    <strong>scopes: </strong>
+                    <code>
+                      {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                    </code>
+                  </span>
+                )}
+                {Object.keys(rest).map((k, i) => {
+                  return (
+                    <span key={k}>
+                      <strong>{k}: </strong>
+                      {typeof rest[k] === "object"
+                        ? JSON.stringify(rest[k], null, 2)
+                        : String(rest[k])}
+                    </span>
+                  );
+                })}
+              </pre>
+            </React.Fragment>
+          );
+        }
+
+        if (isOauth2) {
+          const { name, key, type, scopes, flows, ...rest } = auth;
+          return (
+            <React.Fragment key={selected}>
+              <pre
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  background: "var(--openapi-card-background-color)",
+                }}
+              >
+                <span>
+                  <strong>name:</strong>{" "}
+                  <Link to={infoAuthPath}>{name ?? key}</Link>
+                </span>
+                <span>
+                  <strong>type: </strong>
+                  {type}
+                </span>
+                {scopes && scopes.length > 0 && (
+                  <span>
+                    <strong>scopes: </strong>
+                    <code>
+                      {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                    </code>
+                  </span>
+                )}
+                {Object.keys(rest).map((k, i) => {
+                  return (
+                    <span key={k}>
+                      <strong>{k}: </strong>
+                      {typeof rest[k] === "object"
+                        ? JSON.stringify(rest[k], null, 2)
+                        : String(rest[k])}
+                    </span>
+                  );
+                })}
+                {flows && (
+                  <span>
+                    <code>
+                      <strong>flows: </strong>
+                      {JSON.stringify(flows, null, 2)}
+                    </code>
+                  </span>
+                )}
+              </pre>
+            </React.Fragment>
+          );
+        }
+
+        if (isOpenId) {
+          const { name, key, scopes, type, ...rest } = auth;
+          return (
+            <React.Fragment key={auth.key}>
+              <pre
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  background: "var(--openapi-card-background-color)",
+                }}
+              >
+                <span>
+                  <strong>name:</strong>{" "}
+                  <Link to={infoAuthPath}>{name ?? key}</Link>
+                </span>
+                <span>
+                  <strong>type: </strong>
+                  {type}
+                </span>
+                {scopes && scopes.length > 0 && (
+                  <span>
+                    <strong>scopes: </strong>
+                    <code>
+                      {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                    </code>
+                  </span>
+                )}
+                {Object.keys(rest).map((k, i) => {
+                  return (
+                    <span key={k}>
+                      <strong>{k}: </strong>
+                      {typeof rest[k] === "object"
+                        ? JSON.stringify(rest[k], null, 2)
+                        : String(rest[k])}
+                    </span>
+                  );
+                })}
+              </pre>
+            </React.Fragment>
+          );
+        }
+
+        return undefined;
+      })}
+    </details>
+  );
+}
+
+export default SecuritySchemes;

package/src/theme/ApiExplorer/Server/_Server.scss

@@ -0,0 +1,26 @@
+.openapi-explorer__server-container {
+  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;
+
+  /* hack for view calculation when monaco is hidden */
+  position: relative;
+
+  &:empty {
+    display: none;
+  }
+}
+
+.openapi-explorer__server-url {
+  font-size: var(--openapi-explorer-font-size-input);
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.openapi-explorer__server-description {
+  padding-left: 0.5rem;
+  font-weight: var(--ifm-font-weight-bold);
+}

package/src/theme/ApiExplorer/Server/index.tsx

@@ -0,0 +1,130 @@
+/* ============================================================================
+ * 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, { useState } from "react";
+
+import FloatingButton from "@theme/ApiExplorer/FloatingButton";
+import FormItem from "@theme/ApiExplorer/FormItem";
+import FormSelect from "@theme/ApiExplorer/FormSelect";
+import FormTextInput from "@theme/ApiExplorer/FormTextInput";
+import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
+
+import { setServer, setServerVariable } from "./slice";
+
+function Server() {
+  const [isEditing, setIsEditing] = useState(false);
+  const value = useTypedSelector((state: any) => state.server.value);
+  const options = useTypedSelector((state: any) => state.server.options);
+  const dispatch = useTypedDispatch();
+
+  if (options.length <= 0) {
+    return null;
+  }
+
+  if (options.length < 1 && value?.variables === undefined) {
+    return null;
+  }
+
+  if (!value) {
+    const defaultOption = options[0];
+    dispatch(setServer(JSON.stringify(defaultOption)));
+  }
+
+  // Default to first option when existing server state is mismatched
+  if (value) {
+    const urlExists = options.find((s: any) => s.url === value.url);
+    if (!urlExists) {
+      const defaultOption = options[0];
+      dispatch(setServer(JSON.stringify(defaultOption)));
+    }
+  }
+
+  if (!isEditing) {
+    let url = "";
+    if (value) {
+      url = value.url.replace(/\/$/, "");
+      if (value.variables) {
+        Object.keys(value.variables).forEach((variable) => {
+          url = url.replace(
+            `{${variable}}`,
+            value.variables?.[variable].default ?? ""
+          );
+        });
+      }
+    }
+    return (
+      <FloatingButton onClick={() => setIsEditing(true)} label="Edit">
+        <FormItem>
+          <span className="openapi-explorer__server-url" title={url}>
+            {url}
+          </span>
+        </FormItem>
+      </FloatingButton>
+    );
+  }
+  return (
+    <div className="openapi-explorer__server-container">
+      <FloatingButton onClick={() => setIsEditing(false)} label="Hide">
+        <FormItem>
+          <FormSelect
+            options={options.map((s: any) => s.url)}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              dispatch(
+                setServer(
+                  JSON.stringify(
+                    options.filter((s: any) => s.url === e.target.value)[0]
+                  )
+                )
+              );
+            }}
+            value={value?.url}
+          />
+          <small className="openapi-explorer__server-description">
+            {value?.description}
+          </small>
+        </FormItem>
+        {value?.variables &&
+          Object.keys(value.variables).map((key) => {
+            if (value.variables?.[key].enum !== undefined) {
+              return (
+                <FormItem label={key}>
+                  <FormSelect
+                    options={value.variables[key].enum}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      dispatch(
+                        setServerVariable(
+                          JSON.stringify({ key, value: e.target.value })
+                        )
+                      );
+                    }}
+                    value={value?.variables[key].default}
+                  />
+                </FormItem>
+              );
+            }
+            return (
+              <FormItem label={key}>
+                <FormTextInput
+                  placeholder={value.variables?.[key].default}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    dispatch(
+                      setServerVariable(
+                        JSON.stringify({ key, value: e.target.value })
+                      )
+                    );
+                  }}
+                  value={value?.variables?.[key].default}
+                />
+              </FormItem>
+            );
+          })}
+      </FloatingButton>
+    </div>
+  );
+}
+
+export default Server;

package/src/theme/ApiExplorer/Server/slice.ts

@@ -0,0 +1,39 @@
+/* ============================================================================
+ * 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";
+import { ServerObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
+// TODO: we might want to export this
+
+export interface State {
+  value?: ServerObject;
+  options: ServerObject[];
+}
+
+const initialState: State = {} as any;
+
+export const slice = createSlice({
+  name: "server",
+  initialState,
+  reducers: {
+    setServer: (state, action: PayloadAction<string>) => {
+      state.value = state.options.find(
+        (s) => s.url === JSON.parse(action.payload).url
+      );
+    },
+    setServerVariable: (state, action: PayloadAction<string>) => {
+      if (state.value?.variables) {
+        const parsedPayload = JSON.parse(action.payload);
+        state.value.variables[parsedPayload.key].default = parsedPayload.value;
+      }
+    },
+  },
+});
+
+export const { setServer, setServerVariable } = slice.actions;
+
+export default slice.reducer;