@camunda8/docusaurus-theme-openapi-docs 4.5.1

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

@@ -0,0 +1,375 @@
+/* ============================================================================
+ * 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 { translate } from "@docusaurus/Translate";
+import { OPENAPI_SECURITY_SCHEMES } from "@theme/translationIds";
+
+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];
+
+  const keyTranslations: Record<string, { id: string; message: string }> = {
+    description: {
+      id: OPENAPI_SECURITY_SCHEMES.DESCRIPTION,
+      message: "description:",
+    },
+    scheme: {
+      id: OPENAPI_SECURITY_SCHEMES.SCHEME,
+      message: "scheme:",
+    },
+    bearerFormat: {
+      id: OPENAPI_SECURITY_SCHEMES.BEARER_FORMAT,
+      message: "bearerFormat:",
+    },
+    openIdConnectUrl: {
+      id: OPENAPI_SECURITY_SCHEMES.OPEN_ID_CONNECT_URL,
+      message: "openIdConnectUrl:",
+    },
+  };
+
+  const renderRest = (rest: Record<string, any>) =>
+    Object.keys(rest).map((k) => {
+      const translation = keyTranslations[k];
+      const label = translation
+        ? translate({ id: translation.id, message: translation.message })
+        : `${k}:`;
+      return (
+        <span key={k}>
+          <strong>{label} </strong>
+          {typeof rest[k] === "object"
+            ? JSON.stringify(rest[k], null, 2)
+            : String(rest[k])}
+        </span>
+      );
+    });
+  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>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.NAME,
+                        message: "name:",
+                      })}
+                    </strong>{" "}
+                    <Link to={infoAuthPath}>{name ?? key}</Link>
+                  </span>
+                  <span>
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                        message: "type:",
+                      })}
+                    </strong>{" "}
+                    {type}
+                  </span>
+                  {scopes && scopes.length > 0 && (
+                    <span>
+                      <strong>
+                        {translate({
+                          id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                          message: "scopes:",
+                        })}
+                      </strong>{" "}
+                      <code>
+                        {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                      </code>
+                    </span>
+                  )}
+                  {renderRest(rest)}
+                </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>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.NAME,
+                        message: "name:",
+                      })}
+                    </strong>{" "}
+                    <Link to={infoAuthPath}>{name ?? key}</Link>
+                  </span>
+                  <span>
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                        message: "type:",
+                      })}
+                    </strong>{" "}
+                    {type}
+                  </span>
+                  {scopes && scopes.length > 0 && (
+                    <span>
+                      <strong>
+                        {translate({
+                          id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                          message: "scopes:",
+                        })}
+                      </strong>{" "}
+                      <code>
+                        {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                      </code>
+                    </span>
+                  )}
+                  {renderRest(rest)}
+                </pre>
+              </React.Fragment>
+            );
+          }
+          return (
+            <React.Fragment key={auth.key}>
+              <pre
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  background: "var(--openapi-card-background-color)",
+                }}
+              >
+                <span>
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.NAME,
+                      message: "name:",
+                    })}
+                  </strong>{" "}
+                  <Link to={infoAuthPath}>{auth.name ?? auth.key}</Link>
+                </span>
+                <span>
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                      message: "type:",
+                    })}
+                  </strong>{" "}
+                  {auth.type}
+                </span>
+                <span>
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.IN,
+                      message: "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>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.NAME,
+                      message: "name:",
+                    })}
+                  </strong>{" "}
+                  <Link to={infoAuthPath}>{name ?? key}</Link>
+                </span>
+                <span>
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                      message: "type:",
+                    })}
+                  </strong>{" "}
+                  {type}
+                </span>
+                {scopes && scopes.length > 0 && (
+                  <span>
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                        message: "scopes:",
+                      })}
+                    </strong>{" "}
+                    <code>
+                      {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                    </code>
+                  </span>
+                )}
+                {renderRest(rest)}
+              </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>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.NAME,
+                      message: "name:",
+                    })}
+                  </strong>{" "}
+                  <Link to={infoAuthPath}>{name ?? key}</Link>
+                </span>
+                <span>
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                      message: "type:",
+                    })}
+                  </strong>{" "}
+                  {type}
+                </span>
+                {scopes && scopes.length > 0 && (
+                  <span>
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                        message: "scopes:",
+                      })}
+                    </strong>{" "}
+                    <code>
+                      {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                    </code>
+                  </span>
+                )}
+                {renderRest(rest)}
+                {flows && (
+                  <span>
+                    <code>
+                      <strong>
+                        {translate({
+                          id: OPENAPI_SECURITY_SCHEMES.FLOWS,
+                          message: "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>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.NAME,
+                      message: "name:",
+                    })}
+                  </strong>{" "}
+                  <Link to={infoAuthPath}>{name ?? key}</Link>
+                </span>
+                <span>
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                      message: "type:",
+                    })}
+                  </strong>{" "}
+                  {type}
+                </span>
+                {scopes && scopes.length > 0 && (
+                  <span>
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                        message: "scopes:",
+                      })}
+                    </strong>{" "}
+                    <code>
+                      {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                    </code>
+                  </span>
+                )}
+                {renderRest(rest)}
+              </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,138 @@
+/* ============================================================================
+ * 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 { translate } from "@docusaurus/Translate";
+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 { OPENAPI_SERVER } from "@theme/translationIds";
+
+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={translate({ id: OPENAPI_SERVER.EDIT_BUTTON, message: "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={translate({ id: OPENAPI_SERVER.HIDE_BUTTON, message: "Hide" })}
+      >
+        <FormItem>
+          <FormSelect
+            options={options.map((s: any) => s.url)}
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+              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<HTMLSelectElement>) => {
+                      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 "@camunda8/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;