[FR] Support for response status code examples (#176)

* Create ResponseSamples component and import into markdown index * Lint fix for imports * Add margin to ResponseSamples container * Add content type and fix styling * Fix content type for responses with multiple examples * Remove content type * Fix response tab item styling * Remove unncessary code from ResponseSamples * Refactor createStatusCodes to support example tabs * Clean up css
PaloAltoNetworks · Aug 2, 2022 · 4570524 · 4570524
1 parent c237f3b
commit 4570524
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 19 deletions.
diff --git a/packages/docusaurus-plugin-openapi-docs/src/markdown/createStatusCodes.ts b/packages/docusaurus-plugin-openapi-docs/src/markdown/createStatusCodes.ts
@@ -67,6 +67,26 @@ function createResponseHeaders(responseHeaders: any) {
   );
 }
 
+function createResponseExamples(responseExamples: any) {
+  return Object.entries(responseExamples).map(
+    ([exampleName, exampleValue]: any) => {
+      const camelToSpaceName = exampleName.replace(/([A-Z])/g, " $1");
+      let finalFormattedName =
+        camelToSpaceName.charAt(0).toUpperCase() + camelToSpaceName.slice(1);
+
+      return create("TabItem", {
+        label: `${finalFormattedName}`,
+        value: `${finalFormattedName}`,
+        children: [
+          create("ResponseSamples", {
+            responseExample: JSON.stringify(exampleValue.value, null, 2),
+          }),
+        ],
+      });
+    }
+  );
+}
+
 export function createStatusCodes({ responses }: Props) {
   if (responses === undefined) {
     return undefined;
@@ -82,14 +102,57 @@ export function createStatusCodes({ responses }: Props) {
       create("ApiTabs", {
         children: codes.map((code) => {
           const responseHeaders: any = responses[code].headers;
+          const responseContent: any = responses[code].content;
+          const responseContentKey: any =
+            responseContent && Object.keys(responseContent)[0];
+          const responseExamples: any =
+            responseContentKey && responseContent[responseContentKey].examples;
+
           return create("TabItem", {
             label: code,
             value: code,
             children: [
               create("div", {
                 children: createDescription(responses[code].description),
               }),
-              responseHeaders &&
+              guard(responseExamples, () =>
+                create("SchemaTabs", {
+                  children: [
+                    create("TabTtem", {
+                      label: "Schema",
+                      value: "Schema",
+                      children: [
+                        responseHeaders &&
+                          createDetails({
+                            "data-collaposed": false,
+                            open: true,
+                            style: { textAlign: "left" },
+                            children: [
+                              createDetailsSummary({
+                                children: [
+                                  create("strong", {
+                                    children: "Response Headers",
+                                  }),
+                                ],
+                              }),
+                              createResponseHeaders(responseHeaders),
+                            ],
+                          }),
+                        create("div", {
+                          children: createSchemaDetails({
+                            title: "Schema",
+                            body: {
+                              content: responses[code].content,
+                            },
+                          }),
+                        }),
+                      ],
+                    }),
+                    createResponseExamples(responseExamples),
+                  ],
+                })
+              ),
+              guard(responseHeaders, () =>
                 createDetails({
                   "data-collaposed": false,
                   open: true,
@@ -102,15 +165,18 @@ export function createStatusCodes({ responses }: Props) {
                     }),
                     createResponseHeaders(responseHeaders),
                   ],
-                }),
-              create("div", {
-                children: createSchemaDetails({
-                  title: "Schema",
-                  body: {
-                    content: responses[code].content,
-                  },
-                }),
-              }),
+                })
+              ),
+              guard(!responseExamples, () =>
+                create("div", {
+                  children: createSchemaDetails({
+                    title: "Schema",
+                    body: {
+                      content: responses[code].content,
+                    },
+                  }),
+                })
+              ),
             ],
           });
         }),

diff --git a/packages/docusaurus-plugin-openapi-docs/src/markdown/index.ts b/packages/docusaurus-plugin-openapi-docs/src/markdown/index.ts
@@ -38,9 +38,10 @@ export function createApiPageMD({
   },
 }: ApiPageMetadata) {
   return render([
+    `import ApiTabs from "@theme/ApiTabs";\n`,
     `import ParamsItem from "@theme/ParamsItem";\n`,
+    `import ResponseSamples from "@theme/ResponseSamples";\n`,
     `import SchemaItem from "@theme/SchemaItem"\n`,
-    `import ApiTabs from "@theme/ApiTabs";\n`,
     `import SchemaTabs from "@theme/SchemaTabs";\n`,
     `import DiscriminatorTabs from "@theme/DiscriminatorTabs";\n`,
     `import TabItem from "@theme/TabItem";\n\n`,

diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ResponseSamples/index.js b/packages/docusaurus-theme-openapi-docs/src/theme/ResponseSamples/index.js
@@ -0,0 +1,27 @@
+/* ============================================================================
+ * 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 CodeBlock from "@theme/CodeBlock";
+
+import styles from "./styles.module.css";
+
+function ResponseSamples({ responseExample }) {
+  return (
+    <div className={styles.responseSamplesContainer}>
+      <CodeBlock
+        language="javascript"
+        className={styles.responseSamplesCodeBlock}
+      >
+        {responseExample}
+      </CodeBlock>
+    </div>
+  );
+}
+
+export default ResponseSamples;
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ResponseSamples/styles.module.css b/packages/docusaurus-theme-openapi-docs/src/theme/ResponseSamples/styles.module.css
@@ -0,0 +1,7 @@
+.responseSamplesContainer {
+  margin-top: 2rem;
+}
+
+.responseSamplesTabItem {
+  width: 100%;
+}
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/styles.module.css b/packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/styles.module.css
@@ -38,14 +38,6 @@
   display: none;
 }
 
-.schemaTabsContainer {
-  display: flex;
-  align-items: center;
-  max-width: 390px;
-  padding-left: 3px;
-  overflow: hidden;
-}
-
 .schemaTabsListContainer {
   padding: 0 0.25rem;
   overflow-y: hidden;