docusaurus-theme-openapi-docs 4.5.1 → 4.7.0

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

@@ -7,6 +7,9 @@
 
 import React from "react";
 
+import { translate } from "@docusaurus/Translate";
+import { OPENAPI_SECURITY_SCHEMES } from "@theme/translationIds";
+
 import Link from "@docusaurus/Link";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
 
@@ -22,6 +25,41 @@ function SecuritySchemes(props: any) {
   }
 
   const selectedAuth = options[selected];
+
+  const keyTranslations: Record<string, { id: string; message: string }> = {
+    description: {
+      id: OPENAPI_SECURITY_SCHEMES.DESCRIPTION,
+      message: "description:",
+    },
+    scheme: {
+      id: OPENAPI_SECURITY_SCHEMES.SCHEME,
+      message: "scheme:",
+    },
+    bearerFormat: {
+      id: OPENAPI_SECURITY_SCHEMES.BEARER_FORMAT,
+      message: "bearerFormat:",
+    },
+    openIdConnectUrl: {
+      id: OPENAPI_SECURITY_SCHEMES.OPEN_ID_CONNECT_URL,
+      message: "openIdConnectUrl:",
+    },
+  };
+
+  const renderRest = (rest: Record<string, any>) =>
+    Object.keys(rest).map((k) => {
+      const translation = keyTranslations[k];
+      const label = translation
+        ? translate({ id: translation.id, message: translation.message })
+        : `${k}:`;
+      return (
+        <span key={k}>
+          <strong>{label} </strong>
+          {typeof rest[k] === "object"
+            ? JSON.stringify(rest[k], null, 2)
+            : String(rest[k])}
+        </span>
+      );
+    });
   return (
     <details className="openapi-security__details" open={false}>
       <summary className="openapi-security__summary-container">
@@ -48,31 +86,37 @@ function SecuritySchemes(props: any) {
                   }}
                 >
                   <span>
-                    <strong>name:</strong>{" "}
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.NAME,
+                        message: "name:",
+                      })}
+                    </strong>{" "}
                     <Link to={infoAuthPath}>{name ?? key}</Link>
                   </span>
                   <span>
-                    <strong>type: </strong>
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                        message: "type:",
+                      })}
+                    </strong>{" "}
                     {type}
                   </span>
                   {scopes && scopes.length > 0 && (
                     <span>
-                      <strong>scopes: </strong>
+                      <strong>
+                        {translate({
+                          id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                          message: "scopes:",
+                        })}
+                      </strong>{" "}
                       <code>
                         {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
                       </code>
                     </span>
                   )}
-                  {Object.keys(rest).map((k, i) => {
-                    return (
-                      <span key={k}>
-                        <strong>{k}: </strong>
-                        {typeof rest[k] === "object"
-                          ? JSON.stringify(rest[k], null, 2)
-                          : String(rest[k])}
-                      </span>
-                    );
-                  })}
+                  {renderRest(rest)}
                 </pre>
               </React.Fragment>
             );
@@ -89,31 +133,37 @@ function SecuritySchemes(props: any) {
                   }}
                 >
                   <span>
-                    <strong>name:</strong>{" "}
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.NAME,
+                        message: "name:",
+                      })}
+                    </strong>{" "}
                     <Link to={infoAuthPath}>{name ?? key}</Link>
                   </span>
                   <span>
-                    <strong>type: </strong>
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                        message: "type:",
+                      })}
+                    </strong>{" "}
                     {type}
                   </span>
                   {scopes && scopes.length > 0 && (
                     <span>
-                      <strong>scopes: </strong>
+                      <strong>
+                        {translate({
+                          id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                          message: "scopes:",
+                        })}
+                      </strong>{" "}
                       <code>
                         {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
                       </code>
                     </span>
                   )}
-                  {Object.keys(rest).map((k, i) => {
-                    return (
-                      <span key={k}>
-                        <strong>{k}: </strong>
-                        {typeof rest[k] === "object"
-                          ? JSON.stringify(rest[k], null, 2)
-                          : String(rest[k])}
-                      </span>
-                    );
-                  })}
+                  {renderRest(rest)}
                 </pre>
               </React.Fragment>
             );
@@ -128,15 +178,30 @@ function SecuritySchemes(props: any) {
                 }}
               >
                 <span>
-                  <strong>name:</strong>{" "}
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.NAME,
+                      message: "name:",
+                    })}
+                  </strong>{" "}
                   <Link to={infoAuthPath}>{auth.name ?? auth.key}</Link>
                 </span>
                 <span>
-                  <strong>type: </strong>
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                      message: "type:",
+                    })}
+                  </strong>{" "}
                   {auth.type}
                 </span>
                 <span>
-                  <strong>in: </strong>
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.IN,
+                      message: "in:",
+                    })}
+                  </strong>{" "}
                   {auth.in}
                 </span>
               </pre>
@@ -156,31 +221,37 @@ function SecuritySchemes(props: any) {
                 }}
               >
                 <span>
-                  <strong>name:</strong>{" "}
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.NAME,
+                      message: "name:",
+                    })}
+                  </strong>{" "}
                   <Link to={infoAuthPath}>{name ?? key}</Link>
                 </span>
                 <span>
-                  <strong>type: </strong>
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                      message: "type:",
+                    })}
+                  </strong>{" "}
                   {type}
                 </span>
                 {scopes && scopes.length > 0 && (
                   <span>
-                    <strong>scopes: </strong>
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                        message: "scopes:",
+                      })}
+                    </strong>{" "}
                     <code>
                       {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
                     </code>
                   </span>
                 )}
-                {Object.keys(rest).map((k, i) => {
-                  return (
-                    <span key={k}>
-                      <strong>{k}: </strong>
-                      {typeof rest[k] === "object"
-                        ? JSON.stringify(rest[k], null, 2)
-                        : String(rest[k])}
-                    </span>
-                  );
-                })}
+                {renderRest(rest)}
               </pre>
             </React.Fragment>
           );
@@ -198,35 +269,46 @@ function SecuritySchemes(props: any) {
                 }}
               >
                 <span>
-                  <strong>name:</strong>{" "}
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.NAME,
+                      message: "name:",
+                    })}
+                  </strong>{" "}
                   <Link to={infoAuthPath}>{name ?? key}</Link>
                 </span>
                 <span>
-                  <strong>type: </strong>
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                      message: "type:",
+                    })}
+                  </strong>{" "}
                   {type}
                 </span>
                 {scopes && scopes.length > 0 && (
                   <span>
-                    <strong>scopes: </strong>
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                        message: "scopes:",
+                      })}
+                    </strong>{" "}
                     <code>
                       {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
                     </code>
                   </span>
                 )}
-                {Object.keys(rest).map((k, i) => {
-                  return (
-                    <span key={k}>
-                      <strong>{k}: </strong>
-                      {typeof rest[k] === "object"
-                        ? JSON.stringify(rest[k], null, 2)
-                        : String(rest[k])}
-                    </span>
-                  );
-                })}
+                {renderRest(rest)}
                 {flows && (
                   <span>
                     <code>
-                      <strong>flows: </strong>
+                      <strong>
+                        {translate({
+                          id: OPENAPI_SECURITY_SCHEMES.FLOWS,
+                          message: "flows:",
+                        })}
+                      </strong>{" "}
                       {JSON.stringify(flows, null, 2)}
                     </code>
                   </span>
@@ -248,31 +330,37 @@ function SecuritySchemes(props: any) {
                 }}
               >
                 <span>
-                  <strong>name:</strong>{" "}
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.NAME,
+                      message: "name:",
+                    })}
+                  </strong>{" "}
                   <Link to={infoAuthPath}>{name ?? key}</Link>
                 </span>
                 <span>
-                  <strong>type: </strong>
+                  <strong>
+                    {translate({
+                      id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                      message: "type:",
+                    })}
+                  </strong>{" "}
                   {type}
                 </span>
                 {scopes && scopes.length > 0 && (
                   <span>
-                    <strong>scopes: </strong>
+                    <strong>
+                      {translate({
+                        id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                        message: "scopes:",
+                      })}
+                    </strong>{" "}
                     <code>
                       {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
                     </code>
                   </span>
                 )}
-                {Object.keys(rest).map((k, i) => {
-                  return (
-                    <span key={k}>
-                      <strong>{k}: </strong>
-                      {typeof rest[k] === "object"
-                        ? JSON.stringify(rest[k], null, 2)
-                        : String(rest[k])}
-                    </span>
-                  );
-                })}
+                {renderRest(rest)}
               </pre>
             </React.Fragment>
           );

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

@@ -7,11 +7,13 @@
 
 import React, { useState } from "react";
 
+import { translate } from "@docusaurus/Translate";
 import FloatingButton from "@theme/ApiExplorer/FloatingButton";
 import FormItem from "@theme/ApiExplorer/FormItem";
 import FormSelect from "@theme/ApiExplorer/FormSelect";
 import FormTextInput from "@theme/ApiExplorer/FormTextInput";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
+import { OPENAPI_SERVER } from "@theme/translationIds";
 
 import { setServer, setServerVariable } from "./slice";
 
@@ -57,7 +59,10 @@ function Server() {
       }
     }
     return (
-      <FloatingButton onClick={() => setIsEditing(true)} label="Edit">
+      <FloatingButton
+        onClick={() => setIsEditing(true)}
+        label={translate({ id: OPENAPI_SERVER.EDIT_BUTTON, message: "Edit" })}
+      >
         <FormItem>
           <span className="openapi-explorer__server-url" title={url}>
             {url}
@@ -68,11 +73,14 @@ function Server() {
   }
   return (
     <div className="openapi-explorer__server-container">
-      <FloatingButton onClick={() => setIsEditing(false)} label="Hide">
+      <FloatingButton
+        onClick={() => setIsEditing(false)}
+        label={translate({ id: OPENAPI_SERVER.HIDE_BUTTON, message: "Hide" })}
+      >
         <FormItem>
           <FormSelect
             options={options.map((s: any) => s.url)}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
               dispatch(
                 setServer(
                   JSON.stringify(
@@ -94,7 +102,7 @@ function Server() {
                 <FormItem label={key}>
                   <FormSelect
                     options={value.variables[key].enum}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
                       dispatch(
                         setServerVariable(
                           JSON.stringify({ key, value: e.target.value })

package/src/theme/ApiExplorer/buildPostmanRequest.ts

@@ -55,20 +55,10 @@ function setQueryParams(postman: sdk.Request, queryParams: Param[]) {
         }
       }
 
-      const decodedValue = decodeURI(param.value);
-      const tryJson = () => {
-        try {
-          return JSON.parse(decodedValue);
-        } catch (e) {
-          return false;
-        }
-      };
-
-      const jsonResult = tryJson();
-
       // Handle object values
-      if (jsonResult && typeof jsonResult === "object") {
-        if (param.style === "deepObject") {
+      if (param.style === "deepObject") {
+        const jsonResult = tryDecodeJsonParam(param.value);
+        if (jsonResult && typeof jsonResult === "object") {
           return Object.entries(jsonResult).map(
             ([key, val]) =>
               new sdk.QueryParam({
@@ -76,7 +66,10 @@ function setQueryParams(postman: sdk.Request, queryParams: Param[]) {
                 value: String(val),
               })
           );
-        } else if (param.explode) {
+        }
+      } else if (param.explode) {
+        const jsonResult = tryDecodeJsonParam(param.value);
+        if (jsonResult && typeof jsonResult === "object") {
           return Object.entries(jsonResult).map(
             ([key, val]) =>
               new sdk.QueryParam({
@@ -94,17 +87,9 @@ function setQueryParams(postman: sdk.Request, queryParams: Param[]) {
         }
       }
 
-      // Handle boolean values
-      if (typeof decodedValue === "boolean") {
-        return new sdk.QueryParam({
-          key: param.name,
-          value: decodedValue ? "true" : "false",
-        });
-      }
-
       // Parameter allows empty value: "/hello?extended"
       if (param.allowEmptyValue) {
-        if (decodedValue === "true") {
+        if (param.value === "true") {
           return new sdk.QueryParam({
             key: param.name,
             value: null,
@@ -150,18 +135,9 @@ function setPathParams(postman: sdk.Request, pathParams: Param[]) {
       });
     }
 
-    const decodedValue = decodeURI(param.value);
-    const tryJson = () => {
-      try {
-        return JSON.parse(decodedValue);
-      } catch (e) {
-        return false;
-      }
-    };
+    const jsonResult = tryDecodeJsonParam(param.value);
 
-    const jsonResult = tryJson();
-
-    if (typeof jsonResult === "object") {
+    if (jsonResult && typeof jsonResult === "object") {
       if (param.style === "matrix") {
         serializedValue = Object.entries(jsonResult)
           .map(([key, val]) => `;${key}=${val}`)
@@ -172,7 +148,7 @@ function setPathParams(postman: sdk.Request, pathParams: Param[]) {
           .join(",");
       }
     } else {
-      serializedValue = decodedValue || `:${param.name}`;
+      serializedValue = param.value;
     }
 
     return new sdk.Variable({
@@ -191,17 +167,8 @@ function buildCookie(cookieParams: Param[]) {
   const cookies = cookieParams
     .map((param) => {
       if (param.value) {
-        const decodedValue = decodeURI(param.value as string);
-        const tryJson = () => {
-          try {
-            return JSON.parse(decodedValue);
-          } catch (e) {
-            return false;
-          }
-        };
-
-        const jsonResult = tryJson();
-        if (typeof jsonResult === "object") {
+        const jsonResult = tryDecodeJsonParam(param.value as string);
+        if (jsonResult && typeof jsonResult === "object") {
           if (param.style === "form") {
             // Handle form style
             if (param.explode) {
@@ -266,16 +233,9 @@ function setHeaders(
 
   headerParams.forEach((param) => {
     if (param.value) {
-      const decodedValue = decodeURI(param.value as string);
-      const tryJson = () => {
-        try {
-          return JSON.parse(decodedValue);
-        } catch (e) {
-          return false;
-        }
-      };
-
-      const jsonResult = tryJson();
+      const jsonResult = Array.isArray(param.value)
+        ? param.value.map(tryDecodeJsonParam)
+        : tryDecodeJsonParam(param.value);
       if (Array.isArray(param.value)) {
         if (param.style === "simple") {
           if (param.explode) {
@@ -324,6 +284,14 @@ function setHeaders(
   }
 }
 
+function tryDecodeJsonParam(value: string): any {
+  try {
+    return JSON.parse(decodeURI(value));
+  } catch (e) {
+    return false;
+  }
+}
+
 // TODO: this is all a bit hacky
 function setBody(clonedPostman: sdk.Request, body: Body) {
   if (clonedPostman.body === undefined) {
@@ -345,7 +313,11 @@ function setBody(clonedPostman: sdk.Request, body: Body) {
   switch (clonedPostman.body.mode) {
     case "raw": {
       // check file even though it should already be set from above
-      if (body.type !== "raw" || body.content?.type === "file") {
+      if (
+        body.type !== "raw" ||
+        body.content?.type === "file" ||
+        body.content?.type === "file[]"
+      ) {
         clonedPostman.body = undefined;
         return;
       }
@@ -360,15 +332,23 @@ function setBody(clonedPostman: sdk.Request, body: Body) {
         clonedPostman.body.raw = `${body.content?.value}`;
         return;
       }
-      const params = Object.entries(body.content)
+      const params: sdk.FormParam[] = [];
+      Object.entries(body.content)
         .filter((entry): entry is [string, NonNullable<Content>] => !!entry[1])
-        .map(([key, content]) => {
+        .forEach(([key, content]) => {
           if (content.type === "file") {
-            return new sdk.FormParam({ key: key, ...content });
+            params.push(new sdk.FormParam({ key: key, ...content }));
+          } else if (content.type === "file[]") {
+            content.value.forEach((file) =>
+              params.push(new sdk.FormParam({ key, value: file }))
+            );
+          } else {
+            params.push(new sdk.FormParam({ key: key, value: content.value }));
           }
-          return new sdk.FormParam({ key: key, value: content.value });
         });
-      clonedPostman.body.formdata?.assimilate(params, false);
+      params.forEach((param) => {
+        clonedPostman.body?.formdata?.add(param);
+      });
       return;
     }
     case "urlencoded": {
@@ -382,7 +362,11 @@ function setBody(clonedPostman: sdk.Request, body: Body) {
       const params = Object.entries(body.content)
         .filter((entry): entry is [string, NonNullable<Content>] => !!entry[1])
         .map(([key, content]) => {
-          if (content.type !== "file" && content.value) {
+          if (
+            content.type !== "file" &&
+            content.type !== "file[]" &&
+            content.value
+          ) {
             return new sdk.QueryParam({ key: key, value: content.value });
           }
           return undefined;

package/src/theme/ApiExplorer/index.tsx

@@ -7,6 +7,7 @@
 
 import React from "react";
 
+import { useDoc } from "@docusaurus/plugin-content-docs/client";
 import CodeSnippets from "@theme/ApiExplorer/CodeSnippets";
 import Request from "@theme/ApiExplorer/Request";
 import Response from "@theme/ApiExplorer/Response";
@@ -21,6 +22,9 @@ function ApiExplorer({
   item: NonNullable<ApiItem>;
   infoPath: string;
 }) {
+  const metadata = useDoc();
+  const { mask_credentials } = metadata.frontMatter;
+
   const postman = new sdk.Request(
     item.postman
       ? sdk.Request.isRequest(item.postman)
@@ -36,6 +40,7 @@ function ApiExplorer({
         <CodeSnippets
           postman={postman}
           codeSamples={(item as any)["x-codeSamples"] ?? []}
+          maskCredentials={mask_credentials}
         />
       )}
       <Request item={item} />

package/src/theme/ApiExplorer/{persistanceMiddleware.ts → persistenceMiddleware.ts}

@@ -5,25 +5,29 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import { Middleware } from "@reduxjs/toolkit";
+import type { Middleware } from "@reduxjs/toolkit";
 import {
   setAuthData,
   setSelectedAuth,
 } from "@theme/ApiExplorer/Authorization/slice";
-import { AppDispatch, RootState } from "@theme/ApiItem/store";
-/* eslint-disable import/no-extraneous-dependencies*/
-import { ThemeConfig } from "docusaurus-theme-openapi-docs/src/types";
+import type { AppDispatch, RootState } from "@theme/ApiItem/store";
+import type { ServerObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
+import type { ThemeConfig } from "docusaurus-theme-openapi-docs/src/types";
 
 import { createStorage, hashArray } from "./storage-utils";
 
-export function createPersistanceMiddleware(options: ThemeConfig["api"]) {
-  const persistanceMiddleware: Middleware<{}, RootState, AppDispatch> =
-    (storeAPI) => (next) => (action) => {
+export function createPersistenceMiddleware(options: ThemeConfig["api"]) {
+  const persistenceMiddleware: Middleware<{}, RootState, AppDispatch> =
+    (storeAPI) =>
+    (next) =>
+    (action: ReturnType<typeof setAuthData | typeof setSelectedAuth> | any) => {
       const result = next(action);
 
       const state = storeAPI.getState();
 
-      const storage = createStorage("sessionStorage");
+      const storage = createStorage(
+        options?.authPersistence ?? "sessionStorage"
+      );
 
       if (action.type === setAuthData.type) {
         for (const [key, value] of Object.entries(state.auth.data)) {
@@ -58,14 +62,20 @@ export function createPersistanceMiddleware(options: ThemeConfig["api"]) {
       }
 
       if (action.type === "server/setServerVariable") {
-        const server = storage.getItem("server") ?? "{}";
+        const server = storage.getItem("server");
+        if (!server) {
+          return result;
+        }
         const variables = JSON.parse(action.payload);
-        let serverObject = JSON.parse(server);
-        serverObject.variables[variables.key].default = variables.value;
-        storage.setItem("server", JSON.stringify(serverObject));
+
+        const serverObject = (JSON.parse(server) as ServerObject) ?? {};
+        if (serverObject.variables?.[variables.key]) {
+          serverObject.variables[variables.key].default = variables.value;
+          storage.setItem("server", JSON.stringify(serverObject));
+        }
       }
 
       return result;
     };
-  return persistanceMiddleware;
+  return persistenceMiddleware;
 }