docusaurus-theme-openapi-docs 0.0.0-619 → 0.0.0-684

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

@@ -0,0 +1,154 @@
+/* ============================================================================
+ * 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 { usePrismTheme } from "@docusaurus/theme-common";
+import { useDoc } from "@docusaurus/theme-common/internal";
+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: NonNullable<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: prismTheme.plain.backgroundColor,
+          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/{ApiDemoPanel → ApiExplorer}/Response/slice.ts

@@ -9,6 +9,8 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 export interface State {
   value?: string;
+  code?: string;
+  headers?: string;
 }
 
 const initialState: State = {} as any;
@@ -20,12 +22,31 @@ export const slice = createSlice({
     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 } = slice.actions;
+export const {
+  setResponse,
+  clearResponse,
+  setCode,
+  clearCode,
+  setHeaders,
+  clearHeaders,
+} = slice.actions;
 
 export default slice.reducer;

package/src/theme/{ApiDemoPanel → ApiExplorer}/SecuritySchemes/index.tsx

@@ -23,9 +23,11 @@ function SecuritySchemes(props: any) {
 
   const selectedAuth = options[selected];
   return (
-    <details className={`details__demo-panel`} open={false}>
-      <summary className={`details__request-summary`}>
-        <h4>Authorization</h4>
+    <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";

package/{lib/theme/ApiDemoPanel/Request/styles.module.css → src/theme/ApiExplorer/Server/_Server.scss}

@@ -1,8 +1,4 @@
-.optionsPanel:empty {
-  display: none;
-}
-
-.optionsPanel {
+.openapi-explorer__server-container {
   background: var(--openapi-card-background-color);
   border-radius: var(--openapi-card-border-radius);
   color: var(--ifm-pre-color);
@@ -10,9 +6,21 @@
   margin-bottom: var(--ifm-spacing-vertical);
   margin-top: 0;
   overflow: auto;
-  padding-top: 0 !important;
-  padding: var(--ifm-pre-padding);
 
   /* 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/{ApiDemoPanel → ApiExplorer}/Server/index.tsx

@@ -7,14 +7,13 @@
 
 import React, { useState } from "react";
 
-import FloatingButton from "@theme/ApiDemoPanel/FloatingButton";
-import FormItem from "@theme/ApiDemoPanel/FormItem";
-import FormSelect from "@theme/ApiDemoPanel/FormSelect";
-import FormTextInput from "@theme/ApiDemoPanel/FormTextInput";
+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";
-import styles from "./styles.module.css";
 
 function Server() {
   const [isEditing, setIsEditing] = useState(false);
@@ -59,23 +58,18 @@ function Server() {
     }
     return (
       <FloatingButton onClick={() => setIsEditing(true)} label="Edit">
-        <FormItem label="Base URL">
-          <pre
-            style={{
-              background: "var(--openapi-card-background-color)",
-              paddingLeft: "0px",
-            }}
-          >
-            <code title={url}>{url}</code>
-          </pre>
+        <FormItem>
+          <span className="openapi-explorer__server-url" title={url}>
+            {url}
+          </span>
         </FormItem>
       </FloatingButton>
     );
   }
   return (
-    <div className={styles.optionsPanel}>
+    <div className="openapi-explorer__server-container">
       <FloatingButton onClick={() => setIsEditing(false)} label="Hide">
-        <FormItem label="Base URL">
+        <FormItem>
           <FormSelect
             options={options.map((s: any) => s.url)}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -89,7 +83,9 @@ function Server() {
             }}
             value={value?.url}
           />
-          <small>{value?.description}</small>
+          <small className="openapi-explorer__server-description">
+            {value?.description}
+          </small>
         </FormItem>
         {value?.variables &&
           Object.keys(value.variables).map((key) => {

package/src/theme/{ApiDemoPanel → ApiExplorer}/buildPostmanRequest.ts

@@ -6,8 +6,8 @@
  * ========================================================================== */
 
 import sdk from "@paloaltonetworks/postman-collection";
-import { AuthState, Scheme } from "@theme/ApiDemoPanel/Authorization/slice";
-import { Body, Content } from "@theme/ApiDemoPanel/Body/slice";
+import { AuthState, Scheme } from "@theme/ApiExplorer/Authorization/slice";
+import { Body, Content } from "@theme/ApiExplorer/Body/slice";
 import {
   ParameterObject,
   ServerObject,

package/src/theme/{ApiDemoPanel → ApiExplorer}/index.tsx

@@ -8,14 +8,12 @@
 import React from "react";
 
 import sdk from "@paloaltonetworks/postman-collection";
-import Curl from "@theme/ApiDemoPanel/Curl";
-import MethodEndpoint from "@theme/ApiDemoPanel/MethodEndpoint";
-import Request from "@theme/ApiDemoPanel/Request";
-import Response from "@theme/ApiDemoPanel/Response";
-import SecuritySchemes from "@theme/ApiDemoPanel/SecuritySchemes";
+import CodeSnippets from "@theme/ApiExplorer/CodeSnippets";
+import Request from "@theme/ApiExplorer/Request";
+import Response from "@theme/ApiExplorer/Response";
 import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 
-function ApiDemoPanel({
+function ApiExplorer({
   item,
   infoPath,
 }: {
@@ -23,20 +21,19 @@ function ApiDemoPanel({
   infoPath: string;
 }) {
   const postman = new sdk.Request(item.postman);
-  const { path, method } = item;
 
   return (
-    <div>
-      <MethodEndpoint method={method} path={path} />
-      <SecuritySchemes infoPath={infoPath} />
+    <>
+      {item.method !== "event" && (
+        <CodeSnippets
+          postman={postman}
+          codeSamples={(item as any)["x-code-samples"] ?? []}
+        />
+      )}
       <Request item={item} />
-      <Response />
-      <Curl
-        postman={postman}
-        codeSamples={(item as any)["x-code-samples"] ?? []}
-      />
-    </div>
+      <Response item={item} />
+    </>
   );
 }
 
-export default ApiDemoPanel;
+export default ApiExplorer;

package/src/theme/{ApiDemoPanel → ApiExplorer}/persistanceMiddleware.ts

@@ -9,7 +9,7 @@ import { Middleware } from "@reduxjs/toolkit";
 import {
   setAuthData,
   setSelectedAuth,
-} from "@theme/ApiDemoPanel/Authorization/slice";
+} from "@theme/ApiExplorer/Authorization/slice";
 import { AppDispatch, RootState } from "@theme/ApiItem/store";
 /* eslint-disable import/no-extraneous-dependencies*/
 import { ThemeConfig } from "docusaurus-theme-openapi-docs/src/types";

package/src/theme/ApiItem/index.tsx

@@ -14,8 +14,8 @@ import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 import { HtmlClassNameProvider } from "@docusaurus/theme-common";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useIsBrowser from "@docusaurus/useIsBrowser";
-import { createAuth } from "@theme/ApiDemoPanel/Authorization/slice";
-import { createPersistanceMiddleware } from "@theme/ApiDemoPanel/persistanceMiddleware";
+import { createAuth } from "@theme/ApiExplorer/Authorization/slice";
+import { createPersistanceMiddleware } from "@theme/ApiExplorer/persistanceMiddleware";
 import DocItemLayout from "@theme/ApiItem/Layout";
 import type { Props } from "@theme/DocItem";
 import DocItemMetadata from "@theme/DocItem/Metadata";
@@ -34,10 +34,10 @@ import { createStoreWithoutState, createStoreWithState } from "./store";
 
 const { DocProvider } = require("@docusaurus/theme-common/internal");
 
-let ApiDemoPanel = (_: { item: any; infoPath: any }) => <div />;
+let ApiExplorer = (_: { item: any; infoPath: any }) => <div />;
 
 if (ExecutionEnvironment.canUseDOM) {
-  ApiDemoPanel = require("@theme/ApiDemoPanel").default;
+  ApiExplorer = require("@theme/ApiExplorer").default;
 }
 
 interface ApiFrontMatter extends DocFrontMatter {
@@ -143,13 +143,13 @@ export default function ApiItem(props: Props): JSX.Element {
           <DocItemLayout>
             <Provider store={store2}>
               <div className={clsx("row", "theme-api-markdown")}>
-                <div className="col col--7">
+                <div className="col col--7 openapi-left-panel__container">
                   <MDXComponent />
                 </div>
-                <div className="col col--5">
+                <div className="col col--5 openapi-right-panel__container">
                   <BrowserOnly fallback={<div>Loading...</div>}>
                     {() => {
-                      return <ApiDemoPanel item={api} infoPath={infoPath} />;
+                      return <ApiExplorer item={api} infoPath={infoPath} />;
                     }}
                   </BrowserOnly>
                 </div>

package/src/theme/ApiItem/store.ts

@@ -6,13 +6,13 @@
  * ========================================================================== */
 
 import { configureStore, combineReducers } from "@reduxjs/toolkit";
-import accept from "@theme/ApiDemoPanel/Accept/slice";
-import auth from "@theme/ApiDemoPanel/Authorization/slice";
-import body from "@theme/ApiDemoPanel/Body/slice";
-import contentType from "@theme/ApiDemoPanel/ContentType/slice";
-import params from "@theme/ApiDemoPanel/ParamOptions/slice";
-import response from "@theme/ApiDemoPanel/Response/slice";
-import server from "@theme/ApiDemoPanel/Server/slice";
+import accept from "@theme/ApiExplorer/Accept/slice";
+import auth from "@theme/ApiExplorer/Authorization/slice";
+import body from "@theme/ApiExplorer/Body/slice";
+import contentType from "@theme/ApiExplorer/ContentType/slice";
+import params from "@theme/ApiExplorer/ParamOptions/slice";
+import response from "@theme/ApiExplorer/Response/slice";
+import server from "@theme/ApiExplorer/Server/slice";
 
 const rootReducer = combineReducers({
   accept,

package/src/theme/ApiTabs/_ApiTabs.scss

@@ -0,0 +1,140 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+.openapi-tabs__container {
+  margin-left: -1px;
+  margin-bottom: var(--ifm-leading);
+}
+
+.openapi-tabs__response-header {
+  margin-bottom: 0;
+}
+
+.openapi-tabs__response-code-item {
+  border: 1px solid transparent;
+  margin-top: 0 !important;
+  margin-right: 0.5rem;
+  padding: 0.35rem 0.85rem;
+  border-radius: var(--ifm-global-radius);
+  font-weight: var(--ifm-font-weight-bold);
+  font-size: 12px;
+  transition: 300ms;
+  color: var(--ifm-font-color-secondary);
+
+  &.success.active {
+    background-color: var(--ifm-color-success);
+    color: var(--ifm-color-white);
+  }
+
+  &.danger.active {
+    background-color: var(--ifm-color-danger);
+    color: var(--ifm-color-white);
+  }
+
+  &.info.active {
+    background-color: var(--ifm-color-info);
+    color: var(--ifm-color-white);
+  }
+
+  &.active,
+  &:hover {
+    opacity: 1;
+  }
+
+  &:hover:not(.active) {
+    background-color: transparent;
+    border: 1px solid var(--ifm-toc-border-color);
+  }
+}
+
+.openapi-tabs__response-code-item:not(.active) {
+  opacity: 0.65;
+}
+
+.openapi-tabs__response-code-item:hover {
+  opacity: 1;
+}
+
+.openapi-tabs__response-code-item:last-child {
+  margin-right: 0 !important;
+}
+
+/* Open API Response Code Tabs */
+.openapi-tabs__response-header-section {
+  border-top: 1px solid var(--ifm-toc-border-color);
+  margin-top: 2rem;
+  padding-top: 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.openapi-tabs__response-container {
+  display: flex;
+  align-items: center;
+  max-width: 390px;
+  padding-left: 1rem;
+  overflow: hidden;
+}
+
+.openapi-tabs__response-list-container {
+  padding: 0 0.25rem;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  scroll-behavior: smooth;
+}
+
+.openapi-tabs__response-list-container::-webkit-scrollbar {
+  display: none;
+}
+
+/* Response Code Tabs - Colored Dots */
+.openapi-tabs__response-dot {
+  width: 12.5px;
+  height: 12.5px;
+  margin-right: 5px;
+  border-radius: 50%;
+}
+
+.openapi-tabs__response-schema-container {
+  max-width: 600px;
+}
+
+/* Tab Arrows */
+.openapi-tabs__arrow {
+  content: "";
+  height: 1.25rem;
+  width: 1.25rem;
+  border: none;
+  min-width: 1.25rem;
+  background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
+  filter: var(--ifm-menu-link-sublist-icon-filter);
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &.left {
+    transform: rotate(270deg);
+  }
+
+  &.right {
+    transform: rotate(90deg);
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .openapi-tabs__response-header-section {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .openapi-tabs__response-container {
+    width: 100%;
+    margin-top: var(--ifm-spacing-vertical);
+    padding: 0;
+  }
+}