docusaurus-theme-openapi-docs 0.0.0-1294 → 0.0.0-1310

package/lib/theme/utils/tabsUtils.d.ts

@@ -0,0 +1,47 @@
+import { type ReactNode } from "react";
+export interface TabValue {
+    readonly value: string;
+    readonly label?: string;
+    readonly attributes?: {
+        [key: string]: unknown;
+    };
+    readonly default?: boolean;
+}
+export interface TabsProps {
+    readonly lazy?: boolean;
+    readonly block?: boolean;
+    readonly children: ReactNode;
+    readonly defaultValue?: string | null;
+    readonly values?: readonly TabValue[];
+    readonly groupId?: string;
+    readonly className?: string;
+    readonly queryString?: string | boolean;
+}
+export interface TabProps extends TabsProps {
+    length?: number;
+}
+export interface TabItemProps {
+    readonly children: ReactNode;
+    readonly value: string;
+    readonly default?: boolean;
+    readonly label?: string;
+    readonly className?: string;
+    readonly attributes?: {
+        [key: string]: unknown;
+    };
+}
+export declare function sanitizeTabsChildren(children: ReactNode): ReactNode;
+type TabsContextValue = {
+    selectedValue: string;
+    selectValue: (value: string) => void;
+    tabValues: readonly TabValue[];
+    lazy: boolean;
+    block: boolean;
+};
+export declare function useTabsContextValue(props: TabsProps): TabsContextValue;
+export declare function useTabs(): TabsContextValue;
+export declare function TabsProvider(props: {
+    children: ReactNode;
+    value: TabsContextValue;
+}): ReactNode;
+export {};

package/lib/theme/utils/tabsUtils.js

@@ -0,0 +1,299 @@
+"use strict";
+/* ============================================================================
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Portions Copyright (c) Palo Alto Networks
+ *
+ * Vendored from @docusaurus/theme-common/src/utils/tabsUtils.tsx (MIT) to
+ * remove the dependency on @docusaurus/theme-common/internal. The
+ * useQueryStringValue dependency from theme-common's historyUtils is inlined
+ * below to avoid pulling another internal module.
+ * See: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/1140
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (
+          !desc ||
+          ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)
+        ) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o["default"] = v;
+      });
+var __importStar =
+  (this && this.__importStar) ||
+  (function () {
+    var ownKeys = function (o) {
+      ownKeys =
+        Object.getOwnPropertyNames ||
+        function (o) {
+          var ar = [];
+          for (var k in o)
+            if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+          return ar;
+        };
+      return ownKeys(o);
+    };
+    return function (mod) {
+      if (mod && mod.__esModule) return mod;
+      var result = {};
+      if (mod != null)
+        for (var k = ownKeys(mod), i = 0; i < k.length; i++)
+          if (k[i] !== "default") __createBinding(result, mod, k[i]);
+      __setModuleDefault(result, mod);
+      return result;
+    };
+  })();
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sanitizeTabsChildren = sanitizeTabsChildren;
+exports.useTabsContextValue = useTabsContextValue;
+exports.useTabs = useTabs;
+exports.TabsProvider = TabsProvider;
+const react_1 = __importStar(require("react"));
+const router_1 = require("@docusaurus/router");
+const theme_common_1 = require("@docusaurus/theme-common");
+const useIsomorphicLayoutEffect_1 = __importDefault(
+  require("@docusaurus/useIsomorphicLayoutEffect")
+);
+const scrollUtils_1 = require("./scrollUtils");
+function sanitizeTabsChildren(children) {
+  return react_1.default.Children.toArray(children).filter(
+    (child) => child !== "\n"
+  );
+}
+function extractChildrenTabValues(children) {
+  function isTabItemWithValueProp(comp) {
+    const { props } = comp;
+    return !!props && typeof props === "object" && "value" in props;
+  }
+  const elements = react_1.default.Children.toArray(children).flatMap(
+    (child) => {
+      if (!child) {
+        return [];
+      }
+      if ((0, react_1.isValidElement)(child) && isTabItemWithValueProp(child)) {
+        return [child];
+      }
+      const badChildTypeName =
+        // @ts-expect-error: guarding against unexpected cases
+        typeof child.type === "string" ? child.type : child.type.name;
+      throw new Error(`Docusaurus error: Bad <Tabs> child <${badChildTypeName}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.
+If you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`);
+    }
+  );
+  return elements.map(
+    ({ props: { value, label, attributes, default: isDefault } }) => ({
+      value,
+      label,
+      attributes,
+      default: isDefault,
+    })
+  );
+}
+function ensureNoDuplicateValue(values) {
+  const dup = (0, theme_common_1.duplicates)(
+    values,
+    (a, b) => a.value === b.value
+  );
+  if (dup.length > 0) {
+    throw new Error(
+      `Docusaurus error: Duplicate values "${dup
+        .map((a) => `'${a.value}'`)
+        .join(", ")}" found in <Tabs>. Every value needs to be unique.`
+    );
+  }
+}
+function useTabValues(props) {
+  const { values: valuesProp, children } = props;
+  return (0, react_1.useMemo)(() => {
+    const values = valuesProp ?? extractChildrenTabValues(children);
+    ensureNoDuplicateValue(values);
+    return values;
+  }, [valuesProp, children]);
+}
+function isValidValue({ value, tabValues }) {
+  return tabValues.some((a) => a.value === value);
+}
+function getInitialStateValue({ defaultValue, tabValues }) {
+  if (tabValues.length === 0) {
+    throw new Error(
+      "Docusaurus error: the <Tabs> component requires at least one <TabItem> children component"
+    );
+  }
+  if (defaultValue) {
+    if (!isValidValue({ value: defaultValue, tabValues })) {
+      throw new Error(
+        `Docusaurus error: The <Tabs> has a defaultValue "${defaultValue}" but none of its children has the corresponding value. Available values are: ${tabValues
+          .map((a) => a.value)
+          .join(
+            ", "
+          )}. If you intend to show no default tab, use defaultValue={null} instead.`
+      );
+    }
+    return defaultValue;
+  }
+  const defaultTabValue =
+    tabValues.find((tabValue) => tabValue.default) ?? tabValues[0];
+  if (!defaultTabValue) {
+    throw new Error("Unexpected error: 0 tabValues");
+  }
+  return defaultTabValue.value;
+}
+function getStorageKey(groupId) {
+  if (!groupId) {
+    return null;
+  }
+  return `docusaurus.tab.${groupId}`;
+}
+function getQueryStringKey({ queryString = false, groupId }) {
+  if (typeof queryString === "string") {
+    return queryString;
+  }
+  if (queryString === false) {
+    return null;
+  }
+  if (queryString === true && !groupId) {
+    throw new Error(
+      `Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".`
+    );
+  }
+  return groupId ?? null;
+}
+// Inlined from @docusaurus/theme-common/internal historyUtils.useQueryStringValue
+function useQueryStringValue(key) {
+  const history = (0, router_1.useHistory)();
+  return (0, react_1.useSyncExternalStore)(
+    history.listen,
+    () =>
+      key === null
+        ? null
+        : new URLSearchParams(history.location.search).get(key),
+    () => null
+  );
+}
+function useTabQueryString({ queryString = false, groupId }) {
+  const history = (0, router_1.useHistory)();
+  const key = getQueryStringKey({ queryString, groupId });
+  const value = useQueryStringValue(key);
+  const setValue = (0, react_1.useCallback)(
+    (newValue) => {
+      if (!key) {
+        return;
+      }
+      const searchParams = new URLSearchParams(history.location.search);
+      searchParams.set(key, newValue);
+      history.replace({ ...history.location, search: searchParams.toString() });
+    },
+    [key, history]
+  );
+  return [value, setValue];
+}
+function useTabStorage({ groupId }) {
+  const key = getStorageKey(groupId);
+  const [value, storageSlot] = (0, theme_common_1.useStorageSlot)(key);
+  const setValue = (0, react_1.useCallback)(
+    (newValue) => {
+      if (!key) {
+        return;
+      }
+      storageSlot.set(newValue);
+    },
+    [key, storageSlot]
+  );
+  return [value, setValue];
+}
+function useTabsContextValue(props) {
+  const { defaultValue, queryString = false, groupId } = props;
+  const tabValues = useTabValues(props);
+  const [selectedValue, setSelectedValue] = (0, react_1.useState)(() =>
+    getInitialStateValue({ defaultValue, tabValues })
+  );
+  const [queryStringValue, setQueryString] = useTabQueryString({
+    queryString,
+    groupId,
+  });
+  const [storageValue, setStorageValue] = useTabStorage({
+    groupId,
+  });
+  const valueToSync = (() => {
+    const value = queryStringValue ?? storageValue;
+    if (!isValidValue({ value, tabValues })) {
+      return null;
+    }
+    return value;
+  })();
+  (0, useIsomorphicLayoutEffect_1.default)(() => {
+    if (valueToSync) {
+      setSelectedValue(valueToSync);
+    }
+  }, [valueToSync]);
+  const selectValue = (0, react_1.useCallback)(
+    (newValue) => {
+      if (!isValidValue({ value: newValue, tabValues })) {
+        throw new Error(`Can't select invalid tab value=${newValue}`);
+      }
+      setSelectedValue(newValue);
+      setQueryString(newValue);
+      setStorageValue(newValue);
+    },
+    [setQueryString, setStorageValue, tabValues]
+  );
+  return {
+    selectedValue,
+    selectValue,
+    tabValues,
+    lazy: props.lazy ?? false,
+    block: props.block ?? false,
+  };
+}
+const TabsContext = (0, react_1.createContext)(null);
+function useTabs() {
+  const contextValue = react_1.default.useContext(TabsContext);
+  if (!contextValue) {
+    throw new Error("useTabsContext() must be used within a Tabs component");
+  }
+  return contextValue;
+}
+function TabsProvider(props) {
+  // ScrollControllerProvider is mounted here so every tab consumer
+  // (our six OpenAPI tab variants + the swizzled @theme/Tabs) gets a working
+  // useScrollPositionBlocker without callers needing a separate provider.
+  return react_1.default.createElement(
+    scrollUtils_1.ScrollControllerProvider,
+    null,
+    react_1.default.createElement(
+      TabsContext.Provider,
+      { value: props.value },
+      props.children
+    )
+  );
+}

package/lib/theme/utils/useCodeWordWrap.d.ts

@@ -0,0 +1,8 @@
+import type { RefObject } from "react";
+export type WordWrap = {
+    readonly codeBlockRef: RefObject<HTMLPreElement | null>;
+    readonly isEnabled: boolean;
+    readonly isCodeScrollable: boolean;
+    readonly toggle: () => void;
+};
+export declare function useCodeWordWrap(): WordWrap;

package/lib/theme/utils/useCodeWordWrap.js

@@ -0,0 +1,84 @@
+"use strict";
+/* ============================================================================
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Portions Copyright (c) Palo Alto Networks
+ *
+ * Vendored from @docusaurus/theme-common/src/hooks/useCodeWordWrap.ts (MIT)
+ * to remove the dependency on @docusaurus/theme-common/internal.
+ * See: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/1140
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCodeWordWrap = useCodeWordWrap;
+const react_1 = require("react");
+const useMutationObserver_1 = require("./useMutationObserver");
+// Callback fires when the "hidden" attribute of a tabpanel changes
+// See https://github.com/facebook/docusaurus/pull/7485
+function useTabBecameVisibleCallback(codeBlockRef, callback) {
+  const [hiddenTabElement, setHiddenTabElement] = (0, react_1.useState)();
+  const updateHiddenTabElement = (0, react_1.useCallback)(() => {
+    setHiddenTabElement(
+      codeBlockRef.current?.closest("[role=tabpanel][hidden]")
+    );
+  }, [codeBlockRef, setHiddenTabElement]);
+  (0, react_1.useEffect)(() => {
+    updateHiddenTabElement();
+  }, [updateHiddenTabElement]);
+  (0, useMutationObserver_1.useMutationObserver)(
+    hiddenTabElement,
+    (mutations) => {
+      mutations.forEach((mutation) => {
+        if (
+          mutation.type === "attributes" &&
+          mutation.attributeName === "hidden"
+        ) {
+          callback();
+          updateHiddenTabElement();
+        }
+      });
+    },
+    {
+      attributes: true,
+      characterData: false,
+      childList: false,
+      subtree: false,
+    }
+  );
+}
+function useCodeWordWrap() {
+  const [isEnabled, setIsEnabled] = (0, react_1.useState)(false);
+  const [isCodeScrollable, setIsCodeScrollable] = (0, react_1.useState)(false);
+  const codeBlockRef = (0, react_1.useRef)(null);
+  const toggle = (0, react_1.useCallback)(() => {
+    const codeElement = codeBlockRef.current.querySelector("code");
+    if (isEnabled) {
+      codeElement.removeAttribute("style");
+    } else {
+      codeElement.style.whiteSpace = "pre-wrap";
+      codeElement.style.overflowWrap = "anywhere";
+    }
+    setIsEnabled((value) => !value);
+  }, [codeBlockRef, isEnabled]);
+  const updateCodeIsScrollable = (0, react_1.useCallback)(() => {
+    const { scrollWidth, clientWidth } = codeBlockRef.current;
+    const isScrollable =
+      scrollWidth > clientWidth ||
+      codeBlockRef.current.querySelector("code").hasAttribute("style");
+    setIsCodeScrollable(isScrollable);
+  }, [codeBlockRef]);
+  useTabBecameVisibleCallback(codeBlockRef, updateCodeIsScrollable);
+  (0, react_1.useEffect)(() => {
+    updateCodeIsScrollable();
+  }, [isEnabled, updateCodeIsScrollable]);
+  (0, react_1.useEffect)(() => {
+    window.addEventListener("resize", updateCodeIsScrollable, {
+      passive: true,
+    });
+    return () => {
+      window.removeEventListener("resize", updateCodeIsScrollable);
+    };
+  }, [updateCodeIsScrollable]);
+  return { codeBlockRef, isEnabled, isCodeScrollable, toggle };
+}

package/lib/theme/utils/useMutationObserver.d.ts

@@ -0,0 +1,3 @@
+type Options = MutationObserverInit;
+export declare function useMutationObserver(target: Element | undefined | null, callback: MutationCallback, options?: Options): void;
+export {};

package/lib/theme/utils/useMutationObserver.js

@@ -0,0 +1,34 @@
+"use strict";
+/* ============================================================================
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Portions Copyright (c) Palo Alto Networks
+ *
+ * Vendored from @docusaurus/theme-common/src/hooks/useMutationObserver.ts (MIT)
+ * to remove the dependency on @docusaurus/theme-common/internal.
+ * See: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/1140
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMutationObserver = useMutationObserver;
+const react_1 = require("react");
+const theme_common_1 = require("@docusaurus/theme-common");
+const reactUtils_1 = require("./reactUtils");
+const DefaultOptions = {
+  attributes: true,
+  characterData: true,
+  childList: true,
+  subtree: true,
+};
+function useMutationObserver(target, callback, options = DefaultOptions) {
+  const stableCallback = (0, theme_common_1.useEvent)(callback);
+  const stableOptions = (0, reactUtils_1.useShallowMemoObject)(options);
+  (0, react_1.useEffect)(() => {
+    const observer = new MutationObserver(stableCallback);
+    if (target) {
+      observer.observe(target, stableOptions);
+    }
+    return () => observer.disconnect();
+  }, [target, stableCallback, stableOptions]);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "0.0.0-1294",
+  "version": "0.0.0-1310",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -37,8 +37,8 @@
     "@types/pako": "^2.0.3",
     "@types/postman-collection": "^3.5.11",
     "@types/react-modal": "^3.16.3",
-    "concurrently": "^9.2.0",
-    "docusaurus-plugin-openapi-docs": "0.0.0-1294",
+    "concurrently": "^10.0.3",
+    "docusaurus-plugin-openapi-docs": "0.0.0-1310",
     "docusaurus-plugin-sass": "^0.2.6",
     "eslint-plugin-prettier": "^5.5.1"
   },
@@ -82,5 +82,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "dcce97d6a3cae4f76af8f02e81571e8ce5a394ac"
+  "gitHead": "349c9aa5c4072ee8a0d36c848b55bd121dbfdb85"
 }

package/src/markdown/schema.ts

@@ -7,7 +7,6 @@
 
 import { translate } from "@docusaurus/Translate";
 
-import { OPENAPI_SCHEMA_ITEM } from "../theme/translationIds";
 import { SchemaObject } from "../types";
 
 /**
@@ -158,7 +157,7 @@ export function getQualifierMessage(schema?: SchemaObject): string | undefined {
   }
 
   let message = `**${translate({
-    id: OPENAPI_SCHEMA_ITEM.POSSIBLE_VALUES,
+    id: "theme.openapi.schemaItem.possibleValues",
     message: "Possible values:",
   })}** `;
 
@@ -177,11 +176,11 @@ export function getQualifierMessage(schema?: SchemaObject): string | undefined {
     let minLength;
     let maxLength;
     const charactersMessage = translate({
-      id: OPENAPI_SCHEMA_ITEM.CHARACTERS,
+      id: "theme.openapi.schemaItem.characters",
       message: "characters",
     });
     const nonEmptyMessage = translate({
-      id: OPENAPI_SCHEMA_ITEM.NON_EMPTY,
+      id: "theme.openapi.schemaItem.nonEmpty",
       message: "non-empty",
     });
     if (schema.minLength && schema.minLength > 1) {
@@ -246,7 +245,7 @@ export function getQualifierMessage(schema?: SchemaObject): string | undefined {
 
   if (schema.pattern) {
     const expressionMessage = translate({
-      id: OPENAPI_SCHEMA_ITEM.EXPRESSION,
+      id: "theme.openapi.schemaItem.expression",
       message: "Value must match regular expression",
     });
     qualifierGroups.push(`${expressionMessage} \`${schema.pattern}\``);

package/src/theme/ApiExplorer/ApiCodeBlock/Container/index.tsx

@@ -8,9 +8,10 @@
 import React, { ComponentProps } from "react";
 
 import { ThemeClassNames, usePrismTheme } from "@docusaurus/theme-common";
-import { getPrismCssVariables } from "@docusaurus/theme-common/internal";
 import clsx from "clsx";
 
+import { getPrismCssVariables } from "@theme/utils/codeBlockUtils";
+
 export default function CodeBlockContainer<T extends "div" | "pre">({
   as: As,
   ...props

package/src/theme/ApiExplorer/ApiCodeBlock/Content/String.tsx

@@ -8,13 +8,6 @@
 import React from "react";
 
 import { useThemeConfig, usePrismTheme } from "@docusaurus/theme-common";
-import {
-  parseCodeBlockTitle,
-  parseLanguage,
-  parseLines,
-  containsLineNumbers,
-  useCodeWordWrap,
-} from "@docusaurus/theme-common/internal";
 import Container from "@theme/ApiExplorer/ApiCodeBlock/Container";
 import CopyButton from "@theme/ApiExplorer/ApiCodeBlock/CopyButton";
 import ExpandButton from "@theme/ApiExplorer/ApiCodeBlock/ExpandButton";
@@ -24,6 +17,14 @@ import type { Props } from "@theme/CodeBlock/Content/String";
 import clsx from "clsx";
 import { Highlight, Language } from "prism-react-renderer";
 
+import {
+  containsLineNumbers,
+  parseCodeBlockTitle,
+  parseLanguage,
+  parseLines,
+} from "@theme/utils/codeBlockUtils";
+import { useCodeWordWrap } from "@theme/utils/useCodeWordWrap";
+
 export default function CodeBlockString({
   children,
   className: blockClassName = "",

package/src/theme/ApiExplorer/ApiCodeBlock/Line/index.tsx

@@ -7,7 +7,7 @@
 
 import React from "react";
 
-import { LineProps } from "@docusaurus/theme-common/internal";
+import type { Props as LineProps } from "@theme/CodeBlock/Line";
 import clsx from "clsx";
 
 export default function CodeBlockLine({

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

@@ -7,8 +7,8 @@
 
 import React, { isValidElement, ReactNode } from "react";
 
-import { CodeBlockProps } from "@docusaurus/theme-common/internal";
 import useIsBrowser from "@docusaurus/useIsBrowser";
+import type { Props as CodeBlockProps } from "@theme/CodeBlock";
 import ElementContent from "@theme/ApiExplorer/ApiCodeBlock/Content/Element";
 import StringContent from "@theme/ApiExplorer/ApiCodeBlock/Content/String";
 

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

@@ -12,7 +12,6 @@ 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_AUTH } from "@theme/translationIds";
 
 import { setAuthData, setSelectedAuth } from "./slice";
 
@@ -37,7 +36,7 @@ function Authorization() {
         <FormItem>
           <FormSelect
             label={translate({
-              id: OPENAPI_AUTH.SECURITY_SCHEME,
+              id: "theme.openapi.auth.securityScheme",
               message: "Security Scheme",
             })}
             options={optionKeys}
@@ -54,11 +53,11 @@ function Authorization() {
             <FormItem key={a.key + "-bearer"}>
               <FormTextInput
                 label={translate({
-                  id: OPENAPI_AUTH.BEARER_TOKEN,
+                  id: "theme.openapi.auth.bearerToken",
                   message: "Bearer Token",
                 })}
                 placeholder={translate({
-                  id: OPENAPI_AUTH.BEARER_TOKEN,
+                  id: "theme.openapi.auth.bearerToken",
                   message: "Bearer Token",
                 })}
                 password
@@ -83,11 +82,11 @@ function Authorization() {
             <FormItem key={a.key + "-oauth2"}>
               <FormTextInput
                 label={translate({
-                  id: OPENAPI_AUTH.BEARER_TOKEN,
+                  id: "theme.openapi.auth.bearerToken",
                   message: "Bearer Token",
                 })}
                 placeholder={translate({
-                  id: OPENAPI_AUTH.BEARER_TOKEN,
+                  id: "theme.openapi.auth.bearerToken",
                   message: "Bearer Token",
                 })}
                 password
@@ -113,11 +112,11 @@ function Authorization() {
               <FormItem>
                 <FormTextInput
                   label={translate({
-                    id: OPENAPI_AUTH.USERNAME,
+                    id: "theme.openapi.auth.username",
                     message: "Username",
                   })}
                   placeholder={translate({
-                    id: OPENAPI_AUTH.USERNAME,
+                    id: "theme.openapi.auth.username",
                     message: "Username",
                   })}
                   value={data[a.key].username ?? ""}
@@ -136,11 +135,11 @@ function Authorization() {
               <FormItem>
                 <FormTextInput
                   label={translate({
-                    id: OPENAPI_AUTH.PASSWORD,
+                    id: "theme.openapi.auth.password",
                     message: "Password",
                   })}
                   placeholder={translate({
-                    id: OPENAPI_AUTH.PASSWORD,
+                    id: "theme.openapi.auth.password",
                     message: "Password",
                   })}
                   password