[UI Enhancement] Refactor include status code in response (#476)

* Refactor include status code in response

* Use inline styles to avoid double scrollbars

* Fix linter errors

* Match ApiTabs styles

* Adjust dot size

* Conditionally render tabs based on code

Author: sserrata

demo/docusaurus.config.js

@@ -235,7 +235,7 @@ const config = {
             template: "api.mustache", // Customize API MDX with mustache template
             downloadUrl:
               "https://raw.githubusercontent.com/PaloAltoNetworks/docusaurus-openapi-docs/main/demo/examples/petstore.yaml",
-            hideSendButton: true,
+            hideSendButton: false,
           },
           cos: {
             specPath: "examples/openapi-cos.json",

packages/docusaurus-theme-openapi-docs/src/theme-openapi.d.ts

@@ -213,7 +213,7 @@ declare module "@theme/ApiDemoPanel/Response" {
 }
 
 declare module "@theme/ApiDemoPanel/Response/slice" {
-  export { setResponse };
+  export { setResponse, setCode, setHeaders, clearCode, clearHeaders };
   export default response as Reducer<State, AnyAction>;
 }
 

packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/Execute/index.tsx

@@ -10,7 +10,13 @@ import React from "react";
 import sdk from "@paloaltonetworks/postman-collection";
 import buildPostmanRequest from "@theme/ApiDemoPanel/buildPostmanRequest";
 import { Param } from "@theme/ApiDemoPanel/ParamOptions/slice";
-import { setResponse } from "@theme/ApiDemoPanel/Response/slice";
+import {
+  setResponse,
+  setCode,
+  clearCode,
+  setHeaders,
+  clearHeaders,
+} from "@theme/ApiDemoPanel/Response/slice";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import Modal from "react-modal";
 
@@ -118,10 +124,15 @@ function Execute({ postman, proxy }: Props) {
           try {
             await delay(1200);
             const res = await makeRequest(postmanRequest, proxy, body);
-            dispatch(setResponse(res));
+            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());
           }
         }}
       >

packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/Execute/makeRequest.ts

@@ -188,7 +188,7 @@ async function makeRequest(
 
   return await fetchWithtimeout(finalUrl, requestOptions).then(
     (response: any) => {
-      return response.text();
+      return response;
     }
   );
 }

packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/Response/index.tsx

@@ -7,10 +7,14 @@
 
 import React from "react";
 
+import { usePrismTheme } from "@docusaurus/theme-common";
 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 { clearResponse } from "./slice";
+import { clearResponse, clearCode, clearHeaders } from "./slice";
 
 // TODO: We probably shouldn't attempt to format XML...
 function formatXml(xml: string) {
@@ -33,8 +37,18 @@ function formatXml(xml: string) {
 }
 
 function Response() {
+  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 &&
+    (parseInt(code) >= 400
+      ? "response__status--danger"
+      : parseInt(code) >= 200 && parseInt(code) < 300
+      ? "response__status--success"
+      : "response__status--info");
 
   if (response === undefined) {
     return null;
@@ -56,15 +70,52 @@ function Response() {
           <h4>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 className={clsx(responseStatusClass)} lazy>
+            {/* @ts-ignore */}
+            <TabItem label={` ${code}`} value="body" default>
+              <CodeBlock
+                className="response__status-code"
+                language={response.startsWith("<") ? `xml` : `json`}
+              >
+                {prettyResponse || "No Response"}
+              </CodeBlock>
+            </TabItem>
+            {/* @ts-ignore */}
+            <TabItem label="Headers" value="headers">
+              <CodeBlock
+                className="response__status-headers"
+                language={response.startsWith("<") ? `xml` : `json`}
+              >
+                {JSON.stringify(headers, undefined, 2)}
+              </CodeBlock>
+            </TabItem>
+          </SchemaTabs>
+        ) : (
+          prettyResponse || "No Response"
+        )}
+      </div>
     </details>
   );
 }

packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/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;

packages/docusaurus-theme-openapi-docs/src/theme/styles.css

@@ -574,3 +574,35 @@ div:has(> ul.openapi-tabs__security-schemes) {
 /* div:has(> ul.openapi-tabs__discriminator) {
   margin-left: -1px !important;
 } */
+
+.response__status--danger > :first-child > span:before {
+  content: "\2B24";
+  color: var(--ifm-color-danger);
+  font-size: 8px;
+  vertical-align: 15%;
+  display: inline-block;
+}
+
+.response__status--success > :first-child > span:before {
+  content: "\2B24";
+  color: var(--ifm-color-success);
+  font-size: 8px;
+  vertical-align: 15%;
+  display: inline-block;
+}
+
+.response__status--info > :first-child > span:before {
+  content: "\2B24";
+  color: var(--ifm-color-info);
+  font-size: 8px;
+  vertical-align: 15%;
+  display: inline-block;
+}
+
+.response__status-code {
+  margin-left: -1rem;
+}
+
+.response__status-headers {
+  margin-left: -1rem;
+}