docusaurus-theme-openapi-docs 0.0.0-beta.646 → 0.0.0-beta.651

package/src/theme/ApiDemoPanel/Request/_Request.scss

@@ -1,13 +1,15 @@
-.openapi-demo__options-panel {
-  background: var(--openapi-card-background-color);
+.openapi-demo__request-form {
+  background-color: var(--ifm-pre-background);
   border-radius: var(--openapi-card-border-radius);
+  border: 1px solid var(--openapi-demo-border-color);
+  box-shadow: 0 2px 3px hsla(222, 8%, 43%, 0.1),
+    0 8px 16px -10px hsla(222, 8%, 43%, 0.2);
   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);
+  transition: 300ms;
 
   /* hack for view calculation when monaco is hidden */
   position: relative;
@@ -15,34 +17,105 @@
   &:empty {
     display: none;
   }
-}
 
-.openapi-demo__details {
-  margin-bottom: 1rem;
-  background: var(--openapi-card-background-color);
-  border-radius: var(--openapi-card-border-radius);
+  &:hover {
+    box-shadow: 0 0 0 2px rgba(38, 53, 61, 0.15),
+      0 2px 3px hsla(222, 8%, 43%, 0.15),
+      0 16px 16px -10px hsla(222, 8%, 43%, 0.2);
+  }
+
+  .required {
+    font-size: var(--ifm-code-font-size);
+    color: var(--openapi-required);
+
+    &.request-body {
+      padding-left: 0.25rem;
+    }
+  }
 }
 
-.openapi-demo__summary-container {
-  padding: 1rem;
-  list-style-type: none;
+.openapi-demo__request-header-container {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--openapi-demo-border-color);
+  margin: 0;
+  padding: 0.75rem var(--ifm-pre-padding);
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: bold;
+}
 
+.openapi-demo__expand-details-btn {
   &:hover {
     cursor: pointer;
   }
 }
 
-.openapi-demo__summary-content {
-  display: flex;
-  justify-content: space-between;
+.openapi-demo__details-outer-container {
+  padding: 1rem;
+}
+
+.openapi-demo__details-container[open] {
+  .openapi-demo__details-summary::before {
+    transform: rotate(180deg);
+    margin-top: 0.25rem;
+  }
+}
+
+.openapi-demo__details-summary {
+  display: inline-flex;
   align-items: center;
+  padding: 0.35rem 0;
+  font-size: 14px;
+  list-style: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &::before {
+    margin-right: 0.25rem;
+    margin-bottom: 0.25rem;
+    background-image: var(--openapi-demo-caret-bg);
+    border: none !important;
+    transform: rotate(90deg);
+    content: "";
+    height: 0.75rem;
+    width: 0.75rem;
+  }
 }
 
-.openapi-demo__summary-header {
-  margin-bottom: 0;
+.openapi-demo__request-btn {
+  border: none;
+  border-radius: var(--ifm-global-radius);
+  padding: 0.5rem 1rem;
+  margin-top: 1rem;
+  background-color: var(--ifm-color-primary-light);
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 12px;
+  color: white;
+  cursor: pointer;
+  transition: 300ms;
+
+  &:hover {
+    background-color: var(--ifm-color-primary-lightest);
+  }
+
+  &:active {
+    background-color: var(--ifm-color-primary-light);
+  }
 }
 
-.openapi-demo__summary-header > button {
-  margin-bottom: 1rem;
-  margin-right: 1rem;
+// Prevent auto zoom on mobile iOS devices when focusing on input elmenents
+@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-device-width: 1024px) {
+  .prism-code,
+  select,
+  input {
+    font-size: 1rem;
+  }
 }

package/src/theme/ApiDemoPanel/Request/index.tsx

@@ -5,27 +5,80 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React from "react";
+// @ts-nocheck
+import React, { useState } from "react";
 
 import { useDoc } from "@docusaurus/theme-common/internal";
 import sdk from "@paloaltonetworks/postman-collection";
 import Accept from "@theme/ApiDemoPanel/Accept";
 import Authorization from "@theme/ApiDemoPanel/Authorization";
 import Body from "@theme/ApiDemoPanel/Body";
-import Execute from "@theme/ApiDemoPanel/Execute";
+import buildPostmanRequest from "@theme/ApiDemoPanel/buildPostmanRequest";
+import ContentType from "@theme/ApiDemoPanel/ContentType";
 import ParamOptions from "@theme/ApiDemoPanel/ParamOptions";
+import {
+  setResponse,
+  setCode,
+  clearCode,
+  setHeaders,
+  clearHeaders,
+} from "@theme/ApiDemoPanel/Response/slice";
 import Server from "@theme/ApiDemoPanel/Server";
-import { useTypedSelector } from "@theme/ApiItem/hooks";
+import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
+import { FormProvider, useForm } from "react-hook-form";
+
+import makeRequest from "./makeRequest";
 
 function Request({ item }: { item: NonNullable<ApiItem> }) {
-  const response = useTypedSelector((state: any) => state.response.value);
   const postman = new sdk.Request(item.postman);
   const metadata = useDoc();
-  const { proxy, hide_send_button } = metadata.frontMatter;
+  const { proxy, hide_send_button: hideSendButton } = metadata.frontMatter;
+
+  const pathParams = useTypedSelector((state: any) => state.params.path);
+  const queryParams = useTypedSelector((state: any) => state.params.query);
+  const cookieParams = useTypedSelector((state: any) => state.params.cookie);
+  const contentType = useTypedSelector((state: any) => state.contentType.value);
+  const headerParams = useTypedSelector((state: any) => state.params.header);
+  const body = useTypedSelector((state: any) => state.body);
+  const accept = useTypedSelector((state: any) => state.accept.value);
+  const acceptOptions = useTypedDispatch((state: any) => state.accept.options);
+  const authSelected = useTypedSelector((state: any) => state.auth.selected);
+  const server = useTypedSelector((state: any) => state.server.value);
+  const serverOptions = useTypedSelector((state: any) => state.server.options);
+  const auth = useTypedSelector((state: any) => state.auth);
+  const dispatch = useTypedDispatch();
+
+  const [expandAccept, setExpandAccept] = useState(true);
+  const [expandAuth, setExpandAuth] = useState(true);
+  const [expandBody, setExpandBody] = useState(true);
+  const [expandParams, setExpandParams] = useState(true);
+  const [expandServer, setExpandServer] = useState(true);
+
+  const allParams = [
+    ...pathParams,
+    ...queryParams,
+    ...cookieParams,
+    ...headerParams,
+  ];
+
+  const postmanRequest = buildPostmanRequest(postman, {
+    queryParams,
+    pathParams,
+    cookieParams,
+    contentType,
+    accept,
+    headerParams,
+    body,
+    server,
+    auth,
+  });
 
-  const params = {
+  const delay = (ms: number) =>
+    new Promise((resolve) => setTimeout(resolve, ms));
+
+  const paramsObject = {
     path: [] as ParameterObject[],
     query: [] as ParameterObject[],
     header: [] as ParameterObject[],
@@ -35,34 +88,203 @@ function Request({ item }: { item: NonNullable<ApiItem> }) {
   item.parameters?.forEach(
     (param: { in: "path" | "query" | "header" | "cookie" }) => {
       const paramType = param.in;
-      const paramsArray: ParameterObject[] = params[paramType];
+      const paramsArray: ParameterObject[] = paramsObject[paramType];
       paramsArray.push(param as ParameterObject);
     }
   );
 
+  const methods = useForm({ shouldFocusError: false });
+
+  const onSubmit = async (data) => {
+    dispatch(setResponse("Fetching..."));
+    try {
+      await delay(1200);
+      const res = await makeRequest(postmanRequest, proxy, body);
+      dispatch(setResponse(await res.text()));
+      dispatch(setCode(res.status));
+      res.headers && dispatch(setHeaders(Object.fromEntries(res.headers)));
+    } catch (e: any) {
+      console.log(e);
+      dispatch(setResponse("Connection failed"));
+      dispatch(clearCode());
+      dispatch(clearHeaders());
+    }
+  };
+
+  const showServerOptions = serverOptions.length > 0;
+  const showAcceptOptions = acceptOptions.length > 1;
+  const showRequestBody = contentType !== undefined;
+  const showRequestButton = item.servers && !hideSendButton;
+  const showAuth = authSelected !== undefined;
+  const showParams = allParams.length > 0;
+  const requestBodyRequired = item.requestBody?.required;
+
+  if (
+    !showAcceptOptions &&
+    !showAuth &&
+    !showParams &&
+    !showRequestBody &&
+    !showServerOptions
+  ) {
+    return null;
+  }
+
+  const expandAllDetails = () => {
+    setExpandAccept(true);
+    setExpandAuth(true);
+    setExpandBody(true);
+    setExpandParams(true);
+    setExpandServer(true);
+  };
+
+  const collapseAllDetails = () => {
+    setExpandAccept(false);
+    setExpandAuth(false);
+    setExpandBody(false);
+    setExpandParams(false);
+    setExpandServer(false);
+  };
+
+  const allDetailsExpanded =
+    expandParams && expandBody && expandServer && expandAuth && expandAccept;
+
   return (
-    <>
-      <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="openapi-demo__options-panel">
-          <Server />
-          <Authorization />
-          <ParamOptions />
-          <Body
-            jsonRequestBodyExample={item.jsonRequestBodyExample}
-            requestBodyMetadata={item.requestBody}
-          />
-          <Accept />
+    <FormProvider {...methods}>
+      <form
+        className="openapi-demo__request-form"
+        onSubmit={methods.handleSubmit(onSubmit)}
+      >
+        <div className="openapi-demo__request-header-container">
+          <span className="openapi-demo__request-title">Request </span>
+          {allDetailsExpanded ? (
+            <span
+              className="openapi-demo__expand-details-btn"
+              onClick={collapseAllDetails}
+            >
+              Collapse all
+            </span>
+          ) : (
+            <span
+              className="openapi-demo__expand-details-btn"
+              onClick={expandAllDetails}
+            >
+              Expand all
+            </span>
+          )}
+        </div>
+        <div className="openapi-demo__details-outer-container">
+          {showServerOptions && (
+            <details
+              open={expandServer}
+              className="openapi-demo__details-container"
+            >
+              <summary
+                className="openapi-demo__details-summary"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setExpandServer(!expandServer);
+                }}
+              >
+                Base URL
+              </summary>
+              <Server />
+            </details>
+          )}
+          {showAuth && (
+            <details
+              open={expandAuth}
+              className="openapi-demo__details-container"
+            >
+              <summary
+                className="openapi-demo__details-summary"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setExpandAuth(!expandAuth);
+                }}
+              >
+                Auth
+              </summary>
+              <Authorization />
+            </details>
+          )}
+          {showParams && (
+            <details
+              open={
+                expandParams || Object.keys(methods.formState.errors).length
+              }
+              className="openapi-demo__details-container"
+            >
+              <summary
+                className="openapi-demo__details-summary"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setExpandParams(!expandParams);
+                }}
+              >
+                Parameters
+              </summary>
+              <ParamOptions />
+            </details>
+          )}
+          {showRequestBody && (
+            <details
+              open={expandBody}
+              className="openapi-demo__details-container"
+            >
+              <summary
+                className="openapi-demo__details-summary"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setExpandBody(!expandBody);
+                }}
+              >
+                Body{" "}
+                {requestBodyRequired && (
+                  <span>
+                    <small>
+                      <strong className="request-body required">
+                        {" "}
+                        required
+                      </strong>
+                    </small>
+                  </span>
+                )}
+              </summary>
+              <>
+                <ContentType />
+                <Body
+                  jsonRequestBodyExample={item.jsonRequestBodyExample}
+                  requestBodyMetadata={item.requestBody}
+                  required={requestBodyRequired}
+                />
+              </>
+            </details>
+          )}
+          {showAcceptOptions && (
+            <details
+              open={expandAccept}
+              className="openapi-demo__details-container"
+            >
+              <summary
+                className="openapi-demo__details-summary"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setExpandAccept(!expandAccept);
+                }}
+              >
+                Accept
+              </summary>
+              <Accept />
+            </details>
+          )}
+          {showRequestButton && (
+            <button className="openapi-demo__request-btn" type="submit">
+              Send API Request
+            </button>
+          )}
         </div>
-      </details>
-    </>
+      </form>
+    </FormProvider>
   );
 }
 

package/src/theme/ApiDemoPanel/Response/_Response.scss

@@ -1,3 +1,57 @@
+.openapi-demo__response-container {
+  background-color: var(--ifm-pre-background);
+  border-radius: var(--openapi-card-border-radius);
+  border: 1px solid var(--openapi-demo-border-color);
+  box-shadow: 0 2px 3px hsla(222, 8%, 43%, 0.1),
+    0 8px 16px -10px hsla(222, 8%, 43%, 0.2);
+  color: var(--ifm-pre-color);
+  line-height: var(--ifm-pre-line-height);
+  margin-bottom: var(--ifm-spacing-vertical);
+  margin-top: 0;
+  overflow: auto;
+  transition: 300ms;
+
+  &:hover {
+    box-shadow: 0 0 0 2px rgba(38, 53, 61, 0.15),
+      0 2px 3px hsla(222, 8%, 43%, 0.15),
+      0 16px 16px -10px hsla(222, 8%, 43%, 0.2);
+  }
+
+  .openapi-demo__code-block code {
+    padding-top: 0;
+  }
+}
+
+.openapi-demo__response-title-container {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--openapi-demo-border-color);
+  margin: 0;
+  padding: 0.75rem var(--ifm-pre-padding);
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.openapi-demo__response-placeholder-message {
+  font-size: 12px;
+  padding: 1.25rem;
+  margin-bottom: 0;
+  text-align: center;
+}
+
+.openapi-demo__response-clear-btn {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.openapi-demo__loading-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
 .openapi-response__dot::before {
   margin-right: 0.2rem;
   margin-bottom: 0.15rem;

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

@@ -8,11 +8,14 @@
 import React from "react";
 
 import { usePrismTheme } from "@docusaurus/theme-common";
+import { useDoc } from "@docusaurus/theme-common/internal";
+import { Loading } from "@nextui-org/react";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import CodeBlock from "@theme/CodeBlock";
 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";
 
@@ -36,7 +39,9 @@ function formatXml(xml: string) {
   return formatted.substring(1, formatted.length - 3);
 }
 
-function Response() {
+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);
@@ -51,36 +56,37 @@ function Response() {
         ? "openapi-response__dot--success"
         : "openapi-response__dot--info");
 
-  if (response === undefined) {
+  if (!item.servers || hideSendButton) {
     return null;
   }
 
   let prettyResponse: string = response;
-  try {
-    prettyResponse = JSON.stringify(JSON.parse(response), null, 2);
-  } catch {
-    if (response.startsWith("<")) {
-      prettyResponse = formatXml(response);
+
+  if (prettyResponse) {
+    try {
+      prettyResponse = JSON.stringify(JSON.parse(response), null, 2);
+    } catch {
+      if (response.startsWith("<")) {
+        prettyResponse = formatXml(response);
+      }
     }
   }
 
   return (
-    <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());
-              dispatch(clearCode());
-              dispatch(clearHeaders());
-            }}
-          >
-            Clear
-          </button>
-        </div>
-      </summary>
+    <div className="openapi-demo__response-container">
+      <div className="openapi-demo__response-title-container">
+        <span className="openapi-demo__response-title">Response</span>
+        <span
+          className="openapi-demo__response-clear-btn"
+          onClick={() => {
+            dispatch(clearResponse());
+            dispatch(clearCode());
+            dispatch(clearHeaders());
+          }}
+        >
+          Clear
+        </span>
+      </div>
       <div
         style={{
           backgroundColor: prismTheme.plain.backgroundColor,
@@ -106,7 +112,12 @@ function Response() {
                 className="openapi-demo__code-block openapi-response__status-code"
                 language={response.startsWith("<") ? `xml` : `json`}
               >
-                {prettyResponse || "No Response"}
+                {prettyResponse || (
+                  <p className="openapi-demo__response-placeholder-message">
+                    Click the <code>Send API Request</code> button above and see
+                    the response here!
+                  </p>
+                )}
               </CodeBlock>
             </TabItem>
             {/* @ts-ignore */}
@@ -119,11 +130,18 @@ function Response() {
               </CodeBlock>
             </TabItem>
           </SchemaTabs>
+        ) : prettyResponse === "Fetching..." ? (
+          <div className="openapi-demo__loading-container">
+            <Loading color="success" />
+          </div>
         ) : (
-          prettyResponse || "No Response"
+          <p className="openapi-demo__response-placeholder-message">
+            Click the <code>Send API Request</code> button above and see the
+            response here!
+          </p>
         )}
       </div>
-    </details>
+    </div>
   );
 }
 

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

@@ -14,3 +14,13 @@
     display: none;
   }
 }
+
+.openapi-demo__server-url {
+  font-size: var(--openapi-demo-font-size-input);
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.openapi-demo__server-description {
+  padding-left: 0.5rem;
+  font-weight: var(--ifm-font-weight-bold);
+}

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

@@ -58,15 +58,10 @@ 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-demo__server-url" title={url}>
+            {url}
+          </span>
         </FormItem>
       </FloatingButton>
     );
@@ -74,7 +69,7 @@ function Server() {
   return (
     <div className="openapi-demo__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>) => {
@@ -88,7 +83,9 @@ function Server() {
             }}
             value={value?.url}
           />
-          <small>{value?.description}</small>
+          <small className="openapi-demo__server-description">
+            {value?.description}
+          </small>
         </FormItem>
         {value?.variables &&
           Object.keys(value.variables).map((key) => {