docusaurus-theme-openapi-docs 1.0.0

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

@@ -0,0 +1,101 @@
+/* ============================================================================
+ * 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 } from "@reduxjs/toolkit";
+import { createStorage, hashArray } from "../storage-utils";
+import { getAuthDataKeys } from "./auth-types"; // The global definitions
+// "securitySchemes": {
+//   "BearerAuth": { "type": "http", "scheme": "BeAreR" },
+//   "BasicAuth": { "type": "http", "scheme": "basic" }
+// },
+// The operation level requirements
+// "security": [
+//   { "BearerAuth": [] },
+//   { "BearerAuth": [], "BasicAuth": [] }
+// ],
+// SLICE_STATE
+// data:
+//   BearerAuth:
+//     token=xxx
+//   BasicAuth:
+//     username=xxx
+//     password=xxx
+//
+// options:
+//    "BearerAuth": [{ key: "BearerAuth", scopes: [], ...rest }]
+//    "BearerAuth and BasicAuth": [{ key: "BearerAuth", scopes: [], ...rest }, { key: "BasicAuth", scopes: [], ...rest }]
+//
+// selected: "BearerAuth and BasicAuth"
+// LOCAL_STORAGE
+// hash(SLICE_STATE.options) -> "BearerAuth and BasicAuth"
+// BearerAuth                -> { token: xxx }
+// BasicAuth                 -> { username: xxx, password: xxx }
+
+export function createAuth({ security, securitySchemes, options: opts }) {
+  const storage = createStorage(opts?.authPersistance);
+  let data = {};
+  let options = {};
+
+  for (const option of security ?? []) {
+    const id = Object.keys(option).join(" and ");
+
+    for (const [schemeID, scopes] of Object.entries(option)) {
+      const scheme = securitySchemes?.[schemeID];
+
+      if (scheme) {
+        if (options[id] === undefined) {
+          options[id] = [];
+        }
+
+        const dataKeys = getAuthDataKeys(scheme);
+
+        for (const key of dataKeys) {
+          if (data[schemeID] === undefined) {
+            data[schemeID] = {};
+          }
+
+          let persisted = undefined;
+
+          try {
+            persisted = JSON.parse(storage.getItem(schemeID) ?? "")[key];
+          } catch {}
+
+          data[schemeID][key] = persisted;
+        }
+
+        options[id].push({ ...scheme, key: schemeID, scopes });
+      }
+    }
+  }
+
+  let persisted = undefined;
+
+  try {
+    persisted = storage.getItem(hashArray(Object.keys(options))) ?? undefined;
+  } catch {}
+
+  return {
+    data,
+    options,
+    selected: persisted ?? Object.keys(options)[0],
+  };
+}
+const initialState = {};
+export const slice = createSlice({
+  name: "auth",
+  initialState,
+  reducers: {
+    setAuthData: (state, action) => {
+      const { scheme, key, value } = action.payload;
+      state.data[scheme][key] = value;
+    },
+    setSelectedAuth: (state, action) => {
+      state.selected = action.payload;
+    },
+  },
+});
+export const { setAuthData, setSelectedAuth } = slice.actions;
+export default slice.reducer;

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

@@ -0,0 +1,210 @@
+/* ============================================================================
+ * 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 ContentType from "../ContentType";
+import FormSelect from "../FormSelect";
+import { useTypedDispatch, useTypedSelector } from "../hooks";
+import FormFileUpload from "./../FormFileUpload";
+import FormItem from "./../FormItem";
+import FormTextInput from "./../FormTextInput";
+import VSCode from "./../VSCode";
+import {
+  clearFormBodyKey,
+  clearRawBody,
+  setFileFormBody,
+  setFileRawBody,
+  setStringFormBody,
+  setStringRawBody,
+} from "./slice";
+
+function BodyWrap({ requestBodyMetadata, jsonRequestBodyExample }) {
+  const contentType = useTypedSelector((state) => state.contentType.value); // NOTE: We used to check if body was required, but opted to always show the request body
+  // to reduce confusion, see: https://github.com/cloud-annotations/docusaurus-openapi/issues/145
+  // No body
+
+  if (contentType === undefined) {
+    return null;
+  }
+
+  return (
+    <>
+      <ContentType />
+      <Body
+        requestBodyMetadata={requestBodyMetadata}
+        jsonRequestBodyExample={jsonRequestBodyExample}
+      />
+    </>
+  );
+}
+
+function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
+  const contentType = useTypedSelector((state) => state.contentType.value);
+  const dispatch = useTypedDispatch(); // Lot's of possible content-types:
+  // - application/json
+  // - application/xml
+  // - text/plain
+  // - text/css
+  // - text/html
+  // - text/javascript
+  // - application/javascript
+  // - multipart/form-data
+  // - application/x-www-form-urlencoded
+  // - image/svg+xml;charset=US-ASCII
+  // Show editor:
+  // - application/json
+  // - application/xml
+  // - */*
+  // Show form:
+  // - multipart/form-data
+  // - application/x-www-form-urlencoded
+
+  const schema = requestBodyMetadata?.content?.[contentType]?.schema;
+
+  if (schema?.format === "binary") {
+    return (
+      <FormItem label="Body">
+        <FormFileUpload
+          placeholder={schema.description || "Body"}
+          onChange={(file) => {
+            if (file === undefined) {
+              dispatch(clearRawBody());
+              return;
+            }
+
+            dispatch(
+              setFileRawBody({
+                src: `/path/to/${file.name}`,
+                content: file,
+              })
+            );
+          }}
+        />
+      </FormItem>
+    );
+  }
+
+  if (
+    (contentType === "multipart/form-data" ||
+      contentType === "application/x-www-form-urlencoded") &&
+    schema?.type === "object"
+  ) {
+    return (
+      <FormItem label="Body">
+        <div
+          style={{
+            marginTop: "calc(var(--ifm-pre-padding) / 2)",
+            borderRadius: "4px",
+            padding: "var(--ifm-pre-padding)",
+            border: "1px solid var(--openapi-monaco-border-color)",
+          }}
+        >
+          {Object.entries(schema.properties ?? {}).map(([key, val]) => {
+            if (val.format === "binary") {
+              return (
+                <FormItem key={key} label={key}>
+                  <FormFileUpload
+                    placeholder={val.description || key}
+                    onChange={(file) => {
+                      if (file === undefined) {
+                        dispatch(clearFormBodyKey(key));
+                        return;
+                      }
+
+                      dispatch(
+                        setFileFormBody({
+                          key: key,
+                          value: {
+                            src: `/path/to/${file.name}`,
+                            content: file,
+                          },
+                        })
+                      );
+                    }}
+                  />
+                </FormItem>
+              );
+            }
+
+            if (val.enum) {
+              return (
+                <FormItem key={key} label={key}>
+                  <FormSelect
+                    options={["---", ...val.enum]}
+                    onChange={(e) => {
+                      const val = e.target.value;
+
+                      if (val === "---") {
+                        dispatch(clearFormBodyKey(key));
+                      } else {
+                        dispatch(
+                          setStringFormBody({
+                            key: key,
+                            value: val,
+                          })
+                        );
+                      }
+                    }}
+                  />
+                </FormItem>
+              );
+            } // TODO: support all the other types.
+
+            return (
+              <FormItem key={key} label={key}>
+                <FormTextInput
+                  placeholder={val.description || key}
+                  onChange={(e) => {
+                    dispatch(
+                      setStringFormBody({
+                        key: key,
+                        value: e.target.value,
+                      })
+                    );
+                  }}
+                />
+              </FormItem>
+            );
+          })}
+        </div>
+      </FormItem>
+    );
+  }
+
+  let language = "plaintext";
+  let exampleBodyString = ""; //"body content";
+
+  if (contentType === "application/json") {
+    if (jsonRequestBodyExample) {
+      exampleBodyString = JSON.stringify(jsonRequestBodyExample, null, 2);
+    }
+
+    language = "json";
+  }
+
+  if (contentType === "application/xml") {
+    language = "xml";
+  }
+
+  return (
+    <FormItem label="Body">
+      <VSCode
+        value={exampleBodyString}
+        language={language}
+        onChange={(value) => {
+          if (value.trim() === "") {
+            dispatch(clearRawBody());
+            return;
+          }
+
+          dispatch(setStringRawBody(value));
+        }}
+      />
+    </FormItem>
+  );
+}
+
+export default BodyWrap;

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

@@ -0,0 +1,89 @@
+/* ============================================================================
+ * 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 } from "@reduxjs/toolkit";
+const initialState = {};
+export const slice = createSlice({
+  name: "body",
+  initialState,
+  reducers: {
+    clearRawBody: (_state) => {
+      return {
+        type: "empty",
+      };
+    },
+    setStringRawBody: (_state, action) => {
+      return {
+        type: "raw",
+        content: {
+          type: "string",
+          value: action.payload,
+        },
+      };
+    },
+    setFileRawBody: (_state, action) => {
+      return {
+        type: "raw",
+        content: {
+          type: "file",
+          value: action.payload,
+        },
+      };
+    },
+    clearFormBodyKey: (state, action) => {
+      if (state?.type === "form") {
+        delete state.content[action.payload];
+      }
+    },
+    setStringFormBody: (state, action) => {
+      if (state?.type !== "form") {
+        return {
+          type: "form",
+          content: {
+            [action.payload.key]: {
+              type: "string",
+              value: action.payload.value,
+            },
+          },
+        };
+      }
+
+      state.content[action.payload.key] = {
+        type: "string",
+        value: action.payload.value,
+      };
+      return state;
+    },
+    setFileFormBody: (state, action) => {
+      if (state?.type !== "form") {
+        return {
+          type: "form",
+          content: {
+            [action.payload.key]: {
+              type: "file",
+              value: action.payload.value,
+            },
+          },
+        };
+      }
+
+      state.content[action.payload.key] = {
+        type: "file",
+        value: action.payload.value,
+      };
+      return state;
+    },
+  },
+});
+export const {
+  clearRawBody,
+  setStringRawBody,
+  setFileRawBody,
+  clearFormBodyKey,
+  setStringFormBody,
+  setFileFormBody,
+} = slice.actions;
+export default slice.reducer;

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

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

@@ -0,0 +1,19 @@
+/* ============================================================================
+ * 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 } from "@reduxjs/toolkit";
+const initialState = {};
+export const slice = createSlice({
+  name: "contentType",
+  initialState,
+  reducers: {
+    setContentType: (state, action) => {
+      state.value = action.payload;
+    },
+  },
+});
+export const { setContentType } = slice.actions;
+export default slice.reducer;