docusaurus-theme-openapi-docs 4.3.0 → 4.3.2

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

@@ -5,20 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-/* ============================================================================
- * 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, { useState, useEffect } from "react";
+import React, { useState, useEffect, type JSX } from "react";
 
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import ApiCodeBlock from "@theme/ApiExplorer/ApiCodeBlock";
 import buildPostmanRequest from "@theme/ApiExplorer/buildPostmanRequest";
 import CodeTabs from "@theme/ApiExplorer/CodeTabs";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
+import cloneDeep from "lodash/cloneDeep";
 import codegen from "postman-code-generators";
 import sdk from "postman-collection";
 
@@ -59,6 +53,44 @@ function CodeSnippets({ postman, codeSamples }: Props) {
   const headerParams = useTypedSelector((state: any) => state.params.header);
 
   const auth = useTypedSelector((state: any) => state.auth);
+  const clonedAuth = cloneDeep(auth);
+  let placeholder: string;
+
+  function cleanCredentials(obj: any) {
+    for (const key in obj) {
+      if (typeof obj[key] === "object" && obj[key] !== null) {
+        // use name as placeholder if exists
+        const comboAuthId = Object.keys(obj).join(" and ");
+        const authOptions =
+          clonedAuth?.options?.[key] ?? clonedAuth?.options?.[comboAuthId];
+        placeholder = authOptions?.[0]?.name;
+        obj[key] = cleanCredentials(obj[key]);
+      } else {
+        obj[key] = `<${placeholder ?? key}>`;
+      }
+    }
+
+    return obj;
+  }
+
+  // scrub credentials from code snippets
+  const cleanedAuth = {
+    ...clonedAuth,
+    data: cleanCredentials(clonedAuth.data),
+  };
+
+  // Create a Postman request object using cleanedAuth
+  const cleanedPostmanRequest = buildPostmanRequest(postman, {
+    queryParams,
+    pathParams,
+    cookieParams,
+    contentType,
+    accept,
+    headerParams,
+    body,
+    server,
+    auth: cleanedAuth,
+  });
 
   // User-defined languages array
   // Can override languageSet, change order of langs, override options and variants
@@ -105,21 +137,10 @@ function CodeSnippets({ postman, codeSamples }: Props) {
     }
 
     if (language && !!language.options) {
-      const postmanRequest = buildPostmanRequest(postman, {
-        queryParams,
-        pathParams,
-        cookieParams,
-        contentType,
-        accept,
-        headerParams,
-        body,
-        server,
-        auth,
-      });
       codegen.convert(
         language.language,
         language.variant,
-        postmanRequest,
+        cleanedPostmanRequest,
         language.options,
         (error: any, snippet: string) => {
           if (error) {
@@ -137,22 +158,10 @@ function CodeSnippets({ postman, codeSamples }: Props) {
       // This allows users to define only the minimal properties necessary in languageTabs
       // User-defined properties should override languageSet properties
       const mergedLanguage = { ...langSource[0], ...language };
-      const postmanRequest = buildPostmanRequest(postman, {
-        queryParams,
-        pathParams,
-        cookieParams,
-        contentType,
-        accept,
-        headerParams,
-        body,
-        server,
-        auth,
-      });
-
       codegen.convert(
         mergedLanguage.language,
         mergedLanguage.variant,
-        postmanRequest,
+        cleanedPostmanRequest,
         mergedLanguage.options,
         (error: any, snippet: string) => {
           if (error) {
@@ -175,27 +184,16 @@ function CodeSnippets({ postman, codeSamples }: Props) {
     postman,
     queryParams,
     server,
-    auth,
+    cleanedPostmanRequest,
     mergedLangs,
   ]);
-  // no dependencies was intentionlly set for this particular hook. it's safe as long as if conditions are set
+  // no dependencies was intentionally set for this particular hook. it's safe as long as if conditions are set
   useEffect(function onSelectedVariantUpdate() {
     if (selectedVariant && selectedVariant !== language?.variant) {
-      const postmanRequest = buildPostmanRequest(postman, {
-        queryParams,
-        pathParams,
-        cookieParams,
-        contentType,
-        accept,
-        headerParams,
-        body,
-        server,
-        auth,
-      });
       codegen.convert(
         language.language,
         selectedVariant,
-        postmanRequest,
+        cleanedPostmanRequest,
         language.options,
         (error: any, snippet: string) => {
           if (error) {
@@ -207,7 +205,7 @@ function CodeSnippets({ postman, codeSamples }: Props) {
     }
   });
 
-  // no dependencies was intentionlly set for this particular hook. it's safe as long as if conditions are set
+  // no dependencies was intentionally set for this particular hook. it's safe as long as if conditions are set
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(function onSelectedSampleUpdate() {
     if (

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

@@ -44,7 +44,7 @@ function TabList({
   tabValues,
 }: CodeTabsProps & ReturnType<typeof useTabs>) {
   const tabRefs = useRef<(HTMLLIElement | null)[]>([]);
-  const tabsScrollContainerRef = useRef<any>();
+  const tabsScrollContainerRef = useRef<any>(null);
   const { blockElementScrollPositionUntilNextRender } =
     useScrollPositionBlocker();
 
@@ -163,7 +163,11 @@ function TabList({
           tabIndex={selectedValue === value ? 0 : -1}
           aria-selected={selectedValue === value}
           key={value}
-          ref={(tabControl) => tabRefs.current.push(tabControl)}
+          ref={(tabControl) => {
+            if (tabControl) {
+              tabRefs.current.push(tabControl);
+            }
+          }}
           onKeyDown={handleKeydown}
           onClick={handleTabChange}
           {...attributes}

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React, { useEffect, useState } from "react";
+import React, { type JSX, useEffect, useState } from "react";
 
 import { usePrismTheme } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";
@@ -51,7 +51,7 @@ function App({
   ...props
 }: any): JSX.Element {
   const prismTheme = usePrismTheme();
-  const [code, setCode] = React.useState(children);
+  const [code, setCode] = React.useState(children.replace(/\n$/, ""));
 
   useEffect(() => {
     action(setStringRawBody(code));
@@ -76,7 +76,7 @@ function App({
       })}
     >
       <LiveProvider
-        code={children.replace(/\n$/, "")}
+        code={code}
         transformCode={transformCode ?? ((code) => `${code};`)}
         theme={prismTheme}
         language={language}
@@ -84,7 +84,9 @@ function App({
       >
         <Controller
           control={control}
-          rules={{ required: isRequired ? "This field is required" : false }}
+          rules={{
+            required: isRequired && !code ? "This field is required" : false,
+          }}
           name="requestBody"
           render={({ field: { onChange, name } }) => (
             <LiveComponent

package/src/theme/ApiExplorer/buildPostmanRequest.ts

@@ -298,7 +298,7 @@ function buildPostmanRequest(
       if (apiKey === undefined) {
         otherHeaders.push({
           key: a.name,
-          value: "<API_KEY_VALUE>",
+          value: `<${a.name ?? a.type}>`,
         });
         continue;
       }

package/src/theme/ApiItem/Layout/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React from "react";
+import React, { type JSX } from "react";
 
 import { useDoc } from "@docusaurus/plugin-content-docs/client";
 import { useWindowSize } from "@docusaurus/theme-common";

package/src/theme/ApiItem/index.tsx

@@ -65,7 +65,7 @@ export default function ApiItem(props: Props): JSX.Element {
   if (api) {
     try {
       api = JSON.parse(
-        zlib.inflateSync(Buffer.from(api as any, "base64")).toString()
+        zlib.inflateSync(Buffer.from(api as any, "base64") as any).toString()
       );
     } catch {}
   }

package/src/theme/ApiTabs/index.tsx

@@ -150,7 +150,9 @@ function TabList({
               tabIndex={selectedValue === value ? 0 : -1}
               aria-selected={selectedValue === value}
               key={value}
-              ref={(tabControl) => tabRefs.push(tabControl)}
+              ref={(tabControl) => {
+                tabRefs.push(tabControl);
+              }}
               onKeyDown={handleKeydown}
               onClick={handleTabChange}
               {...attributes}

package/src/theme/DiscriminatorTabs/index.tsx

@@ -136,7 +136,9 @@ function TabList({
               tabIndex={selectedValue === value ? 0 : -1}
               aria-selected={selectedValue === value}
               key={value}
-              ref={(tabControl) => tabRefs.push(tabControl)}
+              ref={(tabControl) => {
+                tabRefs.push(tabControl);
+              }}
               onKeyDown={handleKeydown}
               onClick={handleTabChange}
               {...attributes}

package/src/theme/MimeTabs/index.tsx

@@ -173,7 +173,9 @@ function TabList({
                 tabIndex={selectedValue === value ? 0 : -1}
                 aria-selected={selectedValue === value}
                 key={value}
-                ref={(tabControl) => tabRefs.push(tabControl)}
+                ref={(tabControl) => {
+                  tabRefs.push(tabControl);
+                }}
                 onKeyDown={handleKeydown}
                 onFocus={handleTabChange}
                 onClick={(e) => handleTabChange(e)}

package/src/theme/OperationTabs/index.tsx

@@ -136,7 +136,9 @@ function TabList({
                 tabIndex={selectedValue === value ? 0 : -1}
                 aria-selected={selectedValue === value}
                 key={value}
-                ref={(tabControl) => tabRefs.push(tabControl)}
+                ref={(tabControl) => {
+                  tabRefs.push(tabControl);
+                }}
                 onKeyDown={handleKeydown}
                 onFocus={handleTabChange}
                 onClick={(e) => handleTabChange(e)}

package/src/theme/ParamsDetails/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React, { Suspense } from "react";
+import React from "react";
 
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import Details from "@theme/Details";
@@ -72,14 +72,7 @@ const ParamsDetails: React.FC<Props> = (props) => {
   return (
     <BrowserOnly fallback={<SkeletonLoader size="sm" />}>
       {() => {
-        const LazyComponent = React.lazy(() =>
-          Promise.resolve({ default: ParamsDetailsComponent })
-        );
-        return (
-          <Suspense fallback={null}>
-            <LazyComponent {...props} />
-          </Suspense>
-        );
+        return <ParamsDetailsComponent {...props} />;
       }}
     </BrowserOnly>
   );

package/src/theme/RequestSchema/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React, { Suspense } from "react";
+import React from "react";
 
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import Details from "@theme/Details";
@@ -148,14 +148,7 @@ const RequestSchema: React.FC<Props> = (props) => {
   return (
     <BrowserOnly fallback={<SkeletonLoader size="sm" />}>
       {() => {
-        const LazyComponent = React.lazy(() =>
-          Promise.resolve({ default: RequestSchemaComponent })
-        );
-        return (
-          <Suspense fallback={null}>
-            <LazyComponent {...props} />
-          </Suspense>
-        );
+        return <RequestSchemaComponent {...props} />;
       }}
     </BrowserOnly>
   );

package/src/theme/ResponseSchema/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React, { Suspense } from "react";
+import React from "react";
 
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import Details from "@theme/Details";
@@ -135,14 +135,7 @@ const ResponseSchema: React.FC<Props> = (props) => {
   return (
     <BrowserOnly fallback={<SkeletonLoader size="md" />}>
       {() => {
-        const LazyComponent = React.lazy(() =>
-          Promise.resolve({ default: ResponseSchemaComponent })
-        );
-        return (
-          <Suspense fallback={null}>
-            <LazyComponent {...props} />
-          </Suspense>
-        );
+        return <ResponseSchemaComponent {...props} />;
       }}
     </BrowserOnly>
   );

package/src/theme/SchemaItem/index.tsx

@@ -72,7 +72,9 @@ export default function SchemaItem(props: Props) {
     enumDescriptions = transformEnumDescriptions(schema["x-enumDescriptions"]);
     defaultValue = schema.default;
     example = schema.example;
-    nullable = schema.nullable;
+    nullable =
+      schema.nullable ||
+      (Array.isArray(schema.type) && schema.type.includes("null")); // support JSON Schema nullable
   }
 
   const renderRequired = guard(

package/src/theme/SchemaTabs/index.tsx

@@ -142,7 +142,9 @@ function TabList({
             tabIndex={selectedValue === value ? 0 : -1}
             aria-selected={selectedValue === value}
             key={value}
-            ref={(tabControl) => tabRefs.push(tabControl)}
+            ref={(tabControl) => {
+              tabRefs.push(tabControl);
+            }}
             onKeyDown={handleKeydown}
             onClick={handleTabChange}
             {...attributes}

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/index.ts","./src/plugin-content-docs.d.ts","./src/postman-code-generators.d.ts","./src/react-magic-dropzone.d.ts","./src/theme-classic.d.ts","./src/theme-openapi.d.ts","./src/theme-translations.d.ts","./src/types.ts","./src/markdown/createDescription.ts","./src/markdown/schema.ts","./src/markdown/utils.test.ts","./src/markdown/utils.ts","./src/theme/ApiExplorer/buildPostmanRequest.ts","./src/theme/ApiExplorer/index.tsx","./src/theme/ApiExplorer/persistanceMiddleware.ts","./src/theme/ApiExplorer/postman-collection.d.ts","./src/theme/ApiExplorer/react-modal.d.ts","./src/theme/ApiExplorer/storage-utils.ts","./src/theme/ApiExplorer/Accept/index.tsx","./src/theme/ApiExplorer/Accept/slice.ts","./src/theme/ApiExplorer/ApiCodeBlock/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/Container/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/Content/Element.tsx","./src/theme/ApiExplorer/ApiCodeBlock/Content/String.tsx","./src/theme/ApiExplorer/ApiCodeBlock/CopyButton/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/ExitButton/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/ExpandButton/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/Line/index.tsx","./src/theme/ApiExplorer/ApiCodeBlock/WordWrapButton/index.tsx","./src/theme/ApiExplorer/Authorization/auth-types.ts","./src/theme/ApiExplorer/Authorization/index.tsx","./src/theme/ApiExplorer/Authorization/slice.ts","./src/theme/ApiExplorer/Body/index.tsx","./src/theme/ApiExplorer/Body/slice.ts","./src/theme/ApiExplorer/CodeSnippets/code-snippets-types.ts","./src/theme/ApiExplorer/CodeSnippets/index.tsx","./src/theme/ApiExplorer/CodeSnippets/languages.ts","./src/theme/ApiExplorer/CodeTabs/index.tsx","./src/theme/ApiExplorer/ContentType/index.tsx","./src/theme/ApiExplorer/ContentType/slice.ts","./src/theme/ApiExplorer/Export/index.tsx","./src/theme/ApiExplorer/FloatingButton/index.tsx","./src/theme/ApiExplorer/FormFileUpload/index.tsx","./src/theme/ApiExplorer/FormItem/index.tsx","./src/theme/ApiExplorer/FormMultiSelect/index.tsx","./src/theme/ApiExplorer/FormSelect/index.tsx","./src/theme/ApiExplorer/FormTextInput/index.tsx","./src/theme/ApiExplorer/LiveEditor/index.tsx","./src/theme/ApiExplorer/MethodEndpoint/index.tsx","./src/theme/ApiExplorer/ParamOptions/index.tsx","./src/theme/ApiExplorer/ParamOptions/slice.ts","./src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx","./src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx","./src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamMultiSelectFormItem.tsx","./src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem.tsx","./src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamTextFormItem.tsx","./src/theme/ApiExplorer/Request/index.tsx","./src/theme/ApiExplorer/Request/makeRequest.ts","./src/theme/ApiExplorer/Response/index.tsx","./src/theme/ApiExplorer/Response/slice.ts","./src/theme/ApiExplorer/SecuritySchemes/index.tsx","./src/theme/ApiExplorer/Server/index.tsx","./src/theme/ApiExplorer/Server/slice.ts","./src/theme/ApiItem/hooks.ts","./src/theme/ApiItem/index.tsx","./src/theme/ApiItem/store.ts","./src/theme/ApiItem/Layout/index.tsx","./src/theme/ApiLogo/index.tsx","./src/theme/ApiTabs/index.tsx","./src/theme/ArrayBrackets/index.tsx","./src/theme/DiscriminatorTabs/index.tsx","./src/theme/MimeTabs/index.tsx","./src/theme/OperationTabs/index.tsx","./src/theme/ParamsDetails/index.tsx","./src/theme/ParamsItem/index.tsx","./src/theme/RequestSchema/index.tsx","./src/theme/ResponseExamples/index.tsx","./src/theme/ResponseHeaders/index.tsx","./src/theme/ResponseSamples/index.tsx","./src/theme/ResponseSchema/index.tsx","./src/theme/Schema/index.tsx","./src/theme/SchemaItem/index.tsx","./src/theme/SchemaTabs/index.tsx","./src/theme/SkeletonLoader/index.tsx","./src/theme/StatusCodes/index.tsx"],"version":"5.7.3"}