docusaurus-theme-openapi-docs 1.6.1 → 2.0.0-beta.1

package/lib-next/theme/ApiDemoPanel/Request/_Request.scss

@@ -0,0 +1,48 @@
+.openapi-demo__options-panel {
+  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;
+  padding-top: 0 !important;
+  padding: var(--ifm-pre-padding);
+
+  /* hack for view calculation when monaco is hidden */
+  position: relative;
+
+  &:empty {
+    display: none;
+  }
+}
+
+.openapi-demo__details {
+  margin-bottom: 1rem;
+  background: var(--openapi-card-background-color);
+  border-radius: var(--openapi-card-border-radius);
+}
+
+.openapi-demo__summary-container {
+  padding: 1rem;
+  list-style-type: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.openapi-demo__summary-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.openapi-demo__summary-header {
+  margin-bottom: 0;
+}
+
+.openapi-demo__summary-header > button {
+  margin-bottom: 1rem;
+  margin-right: 1rem;
+}

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

@@ -15,7 +15,6 @@ import Execute from "@theme/ApiDemoPanel/Execute";
 import ParamOptions from "@theme/ApiDemoPanel/ParamOptions";
 import Server from "@theme/ApiDemoPanel/Server";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
-import styles from "./styles.module.css";
 function Request({ item }) {
   const response = useTypedSelector((state) => state.response.value);
   const postman = new sdk.Request(item.postman);
@@ -33,17 +32,17 @@ function Request({ item }) {
     paramsArray.push(param);
   });
   return (
-    <div>
-      <details className={`details__demo-panel`} open={response ? false : true}>
-        <summary>
-          <div className={`details__request-summary`}>
-            <h4>Request</h4>
+    <>
+      <details className="openapi-demo__details" open={response ? false : true}>
+        <summary className="openapi-demo__summary-container">
+          <div className="openapi-demo__summary-content">
+            <h4 className="openapi-demo__summary-header">Request</h4>
             {item.servers && !hide_send_button && (
               <Execute postman={postman} proxy={proxy} />
             )}
           </div>
         </summary>
-        <div className={styles.optionsPanel}>
+        <div className="openapi-demo__options-panel">
           <Server />
           <Authorization />
           <ParamOptions />
@@ -54,7 +53,7 @@ function Request({ item }) {
           <Accept />
         </div>
       </details>
-    </div>
+    </>
   );
 }
 export default Request;

package/lib-next/theme/ApiDemoPanel/Response/_Response.scss

@@ -0,0 +1,27 @@
+.openapi-response__dot::before {
+  margin-right: 0.2rem;
+  margin-bottom: 0.15rem;
+  content: "⬤";
+  color: var(--ifm-color-primary);
+  font-size: 8px;
+}
+
+.openapi-response__dot--danger::before {
+  color: var(--ifm-color-danger);
+}
+
+.openapi-response__dot--success::before {
+  color: var(--ifm-color-success);
+}
+
+.openapi-response__dot--info::before {
+  color: var(--ifm-color-info);
+}
+
+.openapi-response__status-code {
+  margin-left: -1rem;
+}
+
+.openapi-response__status-headers {
+  margin-left: -1rem;
+}

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

@@ -6,9 +6,13 @@
  * ========================================================================== */
 
 import React from "react";
+import { usePrismTheme } from "@docusaurus/theme-common";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import CodeBlock from "@theme/CodeBlock";
-import { clearResponse } from "./slice";
+import SchemaTabs from "@theme/SchemaTabs";
+import TabItem from "@theme/TabItem";
+import clsx from "clsx";
+import { clearResponse, clearCode, clearHeaders } from "./slice";
 
 // TODO: We probably shouldn't attempt to format XML...
 function formatXml(xml) {
@@ -29,8 +33,19 @@ function formatXml(xml) {
   return formatted.substring(1, formatted.length - 3);
 }
 function Response() {
+  const prismTheme = usePrismTheme();
+  const code = useTypedSelector((state) => state.response.code);
+  const headers = useTypedSelector((state) => state.response.headers);
   const response = useTypedSelector((state) => 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 (response === undefined) {
     return null;
   }
@@ -43,21 +58,65 @@ function Response() {
     }
   }
   return (
-    <details className={`details__demo-panel`} open={true}>
-      <summary>
-        <div className={`details__response-summary`}>
-          <h4>Response</h4>
+    <details className="openapi-demo__details" open={true}>
+      <summary className="openapi-demo__summary-container">
+        <div className="openapi-demo__summary-content">
+          <h4 className="openapi-demo__summary-header">Response</h4>
           <button
             className="button button--sm button--secondary"
-            onClick={() => dispatch(clearResponse())}
+            onClick={() => {
+              dispatch(clearResponse());
+              dispatch(clearCode());
+              dispatch(clearHeaders());
+            }}
           >
             Clear
           </button>
         </div>
       </summary>
-      <CodeBlock language={response.startsWith("<") ? `xml` : `json`}>
-        {prettyResponse || "No Response"}
-      </CodeBlock>
+
+      <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
+            >
+              <CodeBlock
+                className="openapi-response__status-code"
+                language={response.startsWith("<") ? `xml` : `json`}
+              >
+                {prettyResponse || "No Response"}
+              </CodeBlock>
+            </TabItem>
+            {/* @ts-ignore */}
+            <TabItem label="Headers" value="headers">
+              <CodeBlock
+                className="openapi-response__status-headers"
+                language={response.startsWith("<") ? `xml` : `json`}
+              >
+                {JSON.stringify(headers, undefined, 2)}
+              </CodeBlock>
+            </TabItem>
+          </SchemaTabs>
+        ) : (
+          prettyResponse || "No Response"
+        )}
+      </div>
     </details>
   );
 }

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

@@ -14,10 +14,29 @@ export const slice = createSlice({
     setResponse: (state, action) => {
       state.value = action.payload;
     },
+    setCode: (state, action) => {
+      state.code = action.payload;
+    },
+    setHeaders: (state, action) => {
+      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/lib-next/theme/ApiDemoPanel/SecuritySchemes/index.js

@@ -18,9 +18,9 @@ function SecuritySchemes(props) {
   }
   const selectedAuth = options[selected];
   return (
-    <details className={`details__demo-panel`} open={false}>
-      <summary className={`details__request-summary`}>
-        <h4>Authorization</h4>
+    <details className="openapi-demo__details" open={false}>
+      <summary className="openapi-demo__summary-container">
+        <h4 className="openapi-demo__summary-header">Authorization</h4>
       </summary>
       {selectedAuth.map((auth) => {
         const isHttp = auth.type === "http";

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

@@ -1,8 +1,4 @@
-.optionsPanel:empty {
-  display: none;
-}
-
-.optionsPanel {
+.openapi-demo__server-container {
   background: var(--openapi-card-background-color);
   border-radius: var(--openapi-card-border-radius);
   color: var(--ifm-pre-color);
@@ -10,9 +6,11 @@
   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;
+  }
 }

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

@@ -12,7 +12,6 @@ import FormSelect from "@theme/ApiDemoPanel/FormSelect";
 import FormTextInput from "@theme/ApiDemoPanel/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);
   const value = useTypedSelector((state) => state.server.value);
@@ -66,7 +65,7 @@ function Server() {
     );
   }
   return (
-    <div className={styles.optionsPanel}>
+    <div className="openapi-demo__server-container">
       <FloatingButton onClick={() => setIsEditing(false)} label="Hide">
         <FormItem label="Base URL">
           <FormSelect

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

@@ -8,16 +8,13 @@
 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";
 function ApiDemoPanel({ item, infoPath }) {
   const postman = new sdk.Request(item.postman);
-  const { path, method } = item;
   return (
     <div>
-      <MethodEndpoint method={method} path={path} />
       <SecuritySchemes infoPath={infoPath} />
       <Request item={item} />
       <Response />

package/lib-next/theme/ApiTabs/{styles.module.css → _ApiTabs.scss}

@@ -1,11 +1,15 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
+/* ============================================================================
+ * 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);
+}
 
-.tabItem {
+.openapi-tabs__response-code-item {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16,29 +20,52 @@
   border-radius: var(--ifm-global-radius);
   color: var(--ifm-color-primary);
   font-weight: var(--ifm-font-weight-normal);
+
+  &.success {
+    .openapi-tabs__response-dot {
+      background-color: var(--ifm-color-success);
+    }
+  }
+
+  &.danger {
+    .openapi-tabs__response-dot {
+      background-color: var(--ifm-color-danger);
+    }
+  }
+
+  &.info {
+    .openapi-tabs__response-dot {
+      background-color: var(--ifm-color-info);
+    }
+  }
+
+  &.active {
+    opacity: 1;
+    background-color: var(--ifm-color-emphasis-100);
+  }
 }
 
-.tabItem:not(.active) {
+.openapi-tabs__response-code-item:not(.active) {
   opacity: 0.65;
 }
 
-.tabItem:hover {
+.openapi-tabs__response-code-item:hover {
   opacity: 1;
 }
 
-.tabItem:last-child {
+.openapi-tabs__response-code-item:last-child {
   margin-right: 0 !important;
 }
 
 /* Open API Response Code Tabs */
-.responseTabsTopSection {
+.openapi-tabs__response-header-section {
   margin-top: 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.responseTabsContainer {
+.openapi-tabs__response-container {
   display: flex;
   align-items: center;
   max-width: 390px;
@@ -46,47 +73,31 @@
   overflow: hidden;
 }
 
-.responseTabsListContainer {
+.openapi-tabs__response-list-container {
   padding: 0 0.25rem;
   overflow-y: hidden;
   overflow-x: scroll;
   scroll-behavior: smooth;
 }
 
-.responseTabsListContainer::-webkit-scrollbar {
+.openapi-tabs__response-list-container::-webkit-scrollbar {
   display: none;
 }
 
 /* Response Code Tabs - Colored Dots */
-.responseTabDot {
+.openapi-tabs__response-dot {
   width: 12.5px;
   height: 12.5px;
   margin-right: 5px;
   border-radius: 50%;
 }
 
-.responseStatusSuccess > .responseTabDot {
-  background-color: var(--ifm-color-success);
-}
-
-.responseStatusDanger > .responseTabDot {
-  background-color: var(--ifm-color-danger);
-}
-
-.responseStatusInfo > .responseTabDot {
-  background-color: var(--ifm-color-info);
-}
-
-.active {
-  background-color: var(--ifm-color-emphasis-100);
-}
-
-.responseSchemaContainer {
+.openapi-tabs__response-schema-container {
   max-width: 600px;
 }
 
 /* Tab Arrows */
-.tabArrow {
+.openapi-tabs__arrow {
   content: "";
   height: 1.25rem;
   width: 1.25rem;
@@ -94,25 +105,27 @@
   min-width: 1.25rem;
   background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
   filter: var(--ifm-menu-link-sublist-icon-filter);
-}
 
-.tabArrow:hover {
-  cursor: pointer;
-}
-.tabArrowLeft {
-  transform: rotate(270deg);
-}
-.tabArrowRight {
-  transform: rotate(90deg);
+  &:hover {
+    cursor: pointer;
+  }
+
+  &.left {
+    transform: rotate(270deg);
+  }
+
+  &.right {
+    transform: rotate(90deg);
+  }
 }
 
 @media screen and (max-width: 500px) {
-  .responseTabsTopSection {
+  .openapi-tabs__response-header-section {
     flex-direction: column;
     align-items: flex-start;
   }
 
-  .responseTabsContainer {
+  .openapi-tabs__response-container {
     width: 100%;
     margin-top: var(--ifm-spacing-vertical);
     padding: 0;