docusaurus-theme-openapi-docs 5.0.1 → 5.1.0

package/src/theme/ApiExplorer/CodeSnippets/languages.test.ts

@@ -0,0 +1,109 @@
+/* ============================================================================
+ * 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 { CodeSample, Language } from "./code-snippets-types";
+import { mergeCodeSampleLanguage } from "./languages";
+
+const baseLang = (
+  language: string,
+  codeSampleLanguage: Language["codeSampleLanguage"]
+): Language => ({
+  highlight: language,
+  language,
+  codeSampleLanguage,
+  logoClass: language,
+  variant: "http",
+  variants: ["http"],
+});
+
+describe("mergeCodeSampleLanguage", () => {
+  it("returns the language unchanged when no codeSamples target it", () => {
+    const langs = [baseLang("python", "Python")];
+    const result = mergeCodeSampleLanguage(langs, []);
+    expect(result[0]).toEqual(langs[0]);
+    expect(result[0].samples).toBeUndefined();
+  });
+
+  it("attaches a single sample with no label using an indexed id", () => {
+    const samples: CodeSample[] = [{ lang: "Python", source: "print('hi')" }];
+    const [py] = mergeCodeSampleLanguage(
+      [baseLang("python", "Python")],
+      samples
+    );
+    expect(py.samples).toEqual(["Python-0"]);
+    expect(py.samplesLabels).toEqual(["Python"]);
+    expect(py.samplesSources).toEqual(["print('hi')"]);
+    expect(py.sample).toBe("Python-0");
+  });
+
+  it("attaches a single sample with a label using lang-label id", () => {
+    const samples: CodeSample[] = [
+      { lang: "PHP", label: "Custom", source: "<?php" },
+    ];
+    const [php] = mergeCodeSampleLanguage([baseLang("php", "PHP")], samples);
+    expect(php.samples).toEqual(["PHP-Custom"]);
+    expect(php.samplesLabels).toEqual(["Custom"]);
+  });
+
+  it("produces unique ids for multiple samples sharing a lang with distinct labels (#1204)", () => {
+    const samples: CodeSample[] = [
+      { lang: "Python", label: "KeyPair Auth", source: "a" },
+      { lang: "Python", label: "Basic Auth", source: "b" },
+      { lang: "Python", label: "OAuth", source: "c" },
+    ];
+    const [py] = mergeCodeSampleLanguage(
+      [baseLang("python", "Python")],
+      samples
+    );
+    expect(py.samples).toEqual([
+      "Python-KeyPair Auth",
+      "Python-Basic Auth",
+      "Python-OAuth",
+    ]);
+    expect(new Set(py.samples).size).toBe(3);
+    expect(py.samplesLabels).toEqual(["KeyPair Auth", "Basic Auth", "OAuth"]);
+    expect(py.samplesSources).toEqual(["a", "b", "c"]);
+  });
+
+  it("produces unique indexed ids for multiple samples sharing a lang without labels", () => {
+    const samples: CodeSample[] = [
+      { lang: "PowerShell", source: "x" },
+      { lang: "PowerShell", source: "y" },
+    ];
+    const [ps] = mergeCodeSampleLanguage(
+      [baseLang("powershell", "PowerShell")],
+      samples
+    );
+    expect(ps.samples).toEqual(["PowerShell-0", "PowerShell-1"]);
+    expect(new Set(ps.samples).size).toBe(2);
+    expect(ps.samplesLabels).toEqual(["PowerShell", "PowerShell"]);
+  });
+
+  it("defensively suffixes ids when lang+label collides", () => {
+    const samples: CodeSample[] = [
+      { lang: "Java", label: "Auth", source: "a" },
+      { lang: "Java", label: "Auth", source: "b" },
+    ];
+    const [java] = mergeCodeSampleLanguage([baseLang("java", "Java")], samples);
+    expect(java.samples).toEqual(["Java-Auth", "Java-Auth-1"]);
+    expect(new Set(java.samples).size).toBe(2);
+    expect(java.samplesLabels).toEqual(["Auth", "Auth"]);
+  });
+
+  it("filters codeSamples by codeSampleLanguage and leaves other languages alone", () => {
+    const samples: CodeSample[] = [
+      { lang: "Python", label: "A", source: "a" },
+      { lang: "Java", label: "B", source: "b" },
+    ];
+    const result = mergeCodeSampleLanguage(
+      [baseLang("python", "Python"), baseLang("php", "PHP")],
+      samples
+    );
+    expect(result[0].samples).toEqual(["Python-A"]);
+    expect(result[1].samples).toBeUndefined();
+  });
+});

package/src/theme/ApiExplorer/CodeSnippets/languages.ts

@@ -22,12 +22,24 @@ export function mergeCodeSampleLanguage(
     );
 
     if (languageCodeSamples.length) {
-      const samples = languageCodeSamples.map(({ lang }) => lang);
       const samplesLabels = languageCodeSamples.map(
         ({ label, lang }) => label || lang
       );
       const samplesSources = languageCodeSamples.map(({ source }) => source);
 
+      // Build a unique id per sample for use as the inner Tab's `value`.
+      // Prefer `${lang}-${label}`; fall back to `${lang}-${index}` when no
+      // label is provided. Defensively suffix with `-${index}` on collision
+      // so duplicate-label specs render two visually identical tabs instead
+      // of crashing Docusaurus's unique-value check.
+      const seen = new Set<string>();
+      const samples = languageCodeSamples.map((cs, i) => {
+        const base = cs.label ? `${cs.lang}-${cs.label}` : `${cs.lang}-${i}`;
+        const id = seen.has(base) ? `${base}-${i}` : base;
+        seen.add(id);
+        return id;
+      });
+
       return {
         ...language,
         sample: samples[0],

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

@@ -7,17 +7,17 @@
 
 import React, { cloneElement, ReactElement, useEffect, useRef } from "react";
 
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import clsx from "clsx";
+
+import { useScrollPositionBlocker } from "@theme/utils/scrollUtils";
 import {
   sanitizeTabsChildren,
   type TabItemProps,
   type TabProps,
   TabsProvider,
-  useScrollPositionBlocker,
   useTabsContextValue,
-} from "@docusaurus/theme-common/internal";
-import useIsBrowser from "@docusaurus/useIsBrowser";
-import clsx from "clsx";
-
+} from "@theme/utils/tabsUtils";
 import { Language } from "../CodeSnippets/code-snippets-types";
 
 export interface Props {

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

@@ -7,6 +7,7 @@
 
 import React from "react";
 
+import { translate } from "@docusaurus/Translate";
 import fileSaver from "file-saver";
 
 const saveFile = (url: string) => {
@@ -24,7 +25,7 @@ function Export({ url, proxy }: any) {
       className="dropdown dropdown--hoverable dropdown--right"
     >
       <button className="export-button button button--sm button--secondary">
-        Export
+        {translate({ id: "theme.openapi.export.button", message: "Export" })}
       </button>
       <ul className="export-dropdown dropdown__menu">
         <li>
@@ -36,7 +37,10 @@ function Export({ url, proxy }: any) {
             className="dropdown__link"
             href={`${url}`}
           >
-            OpenAPI Spec
+            {translate({
+              id: "theme.openapi.export.openapiSpec",
+              message: "OpenAPI Spec",
+            })}
           </a>
         </li>
       </ul>

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

@@ -9,7 +9,6 @@ import React, { useState } from "react";
 
 import { translate } from "@docusaurus/Translate";
 import FloatingButton from "@theme/ApiExplorer/FloatingButton";
-import { OPENAPI_FORM_FILE_UPLOAD } from "@theme/translationIds";
 import MagicDropzone from "react-magic-dropzone";
 
 type PreviewFile = { preview: string } & File;
@@ -105,7 +104,7 @@ function FormFileUpload({ placeholder, onChange }: Props) {
               }}
             >
               {translate({
-                id: OPENAPI_FORM_FILE_UPLOAD.CLEAR_BUTTON,
+                id: "theme.openapi.formFileUpload.clearButton",
                 message: "Clear",
               })}
             </button>

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

@@ -8,7 +8,6 @@
 import React from "react";
 
 import { translate } from "@docusaurus/Translate";
-import { OPENAPI_SCHEMA_ITEM } from "@theme/translationIds";
 
 export interface Props {
   htmlFor?: string;
@@ -31,7 +30,7 @@ function FormLabel({ htmlFor, label, type, required }: Props) {
       {required && (
         <span className="openapi-schema__required">
           {translate({
-            id: OPENAPI_SCHEMA_ITEM.REQUIRED,
+            id: "theme.openapi.schemaItem.required",
             message: "required",
           })}
         </span>

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

@@ -11,7 +11,6 @@ import React, { useId } from "react";
 import { translate } from "@docusaurus/Translate";
 import { ErrorMessage } from "@hookform/error-message";
 import FormLabel from "@theme/ApiExplorer/FormLabel";
-import { OPENAPI_FORM } from "@theme/translationIds";
 import clsx from "clsx";
 import { useFormContext } from "react-hook-form";
 
@@ -59,7 +58,7 @@ function FormTextInput({
           {...register(paramName, {
             required: isRequired
               ? translate({
-                  id: OPENAPI_FORM.FIELD_REQUIRED,
+                  id: "theme.openapi.form.fieldRequired",
                   message: "This field is required",
                 })
               : false,

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

@@ -11,7 +11,6 @@ import { usePrismTheme } from "@docusaurus/theme-common";
 import { translate } from "@docusaurus/Translate";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import { ErrorMessage } from "@hookform/error-message";
-import { OPENAPI_FORM } from "@theme/translationIds";
 import clsx from "clsx";
 import { Controller, useFormContext } from "react-hook-form";
 import { LiveProvider, LiveEditor, withLive } from "react-live";
@@ -89,7 +88,7 @@ function App({
             required:
               isRequired && !code
                 ? translate({
-                    id: OPENAPI_FORM.FIELD_REQUIRED,
+                    id: "theme.openapi.form.fieldRequired",
                     message: "This field is required",
                   })
                 : false,

package/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx

@@ -15,7 +15,6 @@ import FormSelect from "@theme/ApiExplorer/FormSelect";
 import FormTextInput from "@theme/ApiExplorer/FormTextInput";
 import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch } from "@theme/ApiItem/hooks";
-import { OPENAPI_FORM } from "@theme/translationIds";
 import { Controller, useFormContext } from "react-hook-form";
 
 export interface ParamProps {
@@ -138,7 +137,7 @@ export default function ParamArrayFormItem({
         rules={{
           required: param.required
             ? translate({
-                id: OPENAPI_FORM.FIELD_REQUIRED,
+                id: "theme.openapi.form.fieldRequired",
                 message: "This field is required",
               })
             : false,
@@ -177,7 +176,10 @@ export default function ParamArrayFormItem({
               className="openapi-explorer__thin-btn"
               onClick={handleAddItem}
             >
-              Add item
+              {translate({
+                id: "theme.openapi.paramArray.addItem",
+                message: "Add item",
+              })}
             </button>
           </>
         )}

package/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx

@@ -5,14 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React from "react";
+import React, { useEffect } from "react";
 
 import { translate } from "@docusaurus/Translate";
 import { ErrorMessage } from "@hookform/error-message";
 import FormSelect from "@theme/ApiExplorer/FormSelect";
 import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch } from "@theme/ApiItem/hooks";
-import { OPENAPI_FORM } from "@theme/translationIds";
 import { Controller, useFormContext } from "react-hook-form";
 
 export interface ParamProps {
@@ -33,10 +32,26 @@ export default function ParamBooleanFormItem({
   const {
     control,
     formState: { errors },
+    setValue,
   } = useFormContext();
 
   const showErrorMessage = errors?.paramBoolean;
 
+  useEffect(() => {
+    if (param.value === undefined) return;
+    const initial =
+      typeof param.value === "boolean" ? String(param.value) : param.value;
+    if (initial === "true" || initial === "false") {
+      setValue("paramBoolean", initial);
+      // Boolean defaults arrive in redux as actual booleans; normalize to the
+      // string form the rest of the form uses.
+      if (typeof param.value === "boolean") {
+        dispatch(setParam({ ...param, value: initial }));
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <>
       <Controller
@@ -44,17 +59,18 @@ export default function ParamBooleanFormItem({
         rules={{
           required: param.required
             ? translate({
-                id: OPENAPI_FORM.FIELD_REQUIRED,
+                id: "theme.openapi.form.fieldRequired",
                 message: "This field is required",
               })
             : false,
         }}
         name="paramBoolean"
-        render={({ field: { onChange } }) => (
+        render={({ field: { onChange, value } }) => (
           <FormSelect
             label={label}
             type={type}
             required={required}
+            value={value ?? "---"}
             options={["---", "true", "false"]}
             onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
               const val = e.target.value;

package/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamMultiSelectFormItem.tsx

@@ -13,7 +13,6 @@ import FormMultiSelect from "@theme/ApiExplorer/FormMultiSelect";
 import { getSchemaEnum } from "@theme/ApiExplorer/ParamOptions";
 import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
-import { OPENAPI_FORM } from "@theme/translationIds";
 import { Controller, useFormContext } from "react-hook-form";
 
 export interface ParamProps {
@@ -75,7 +74,7 @@ export default function ParamMultiSelectFormItem({
         rules={{
           required: param.required
             ? translate({
-                id: OPENAPI_FORM.FIELD_REQUIRED,
+                id: "theme.openapi.form.fieldRequired",
                 message: "This field is required",
               })
             : false,

package/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React from "react";
+import React, { useEffect } from "react";
 
 import { translate } from "@docusaurus/Translate";
 import { ErrorMessage } from "@hookform/error-message";
@@ -13,7 +13,6 @@ import FormSelect from "@theme/ApiExplorer/FormSelect";
 import { getSchemaEnum } from "@theme/ApiExplorer/ParamOptions";
 import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch } from "@theme/ApiItem/hooks";
-import { OPENAPI_FORM } from "@theme/translationIds";
 import { Controller, useFormContext } from "react-hook-form";
 
 export interface ParamProps {
@@ -32,6 +31,7 @@ export default function ParamSelectFormItem({
   const {
     control,
     formState: { errors },
+    setValue,
   } = useFormContext();
 
   const showErrorMessage = errors?.paramSelect;
@@ -40,6 +40,16 @@ export default function ParamSelectFormItem({
 
   const options = getSchemaEnum(param.schema) ?? [];
 
+  useEffect(() => {
+    if (
+      typeof param.value === "string" &&
+      (options as string[]).includes(param.value)
+    ) {
+      setValue("paramSelect", param.value);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <>
       <Controller
@@ -47,17 +57,18 @@ export default function ParamSelectFormItem({
         rules={{
           required: param.required
             ? translate({
-                id: OPENAPI_FORM.FIELD_REQUIRED,
+                id: "theme.openapi.form.fieldRequired",
                 message: "This field is required",
               })
             : false,
         }}
         name="paramSelect"
-        render={({ field: { onChange } }) => (
+        render={({ field: { onChange, value } }) => (
           <FormSelect
             label={label}
             type={type}
             required={required}
+            value={value ?? "---"}
             options={["---", ...(options as string[])]}
             onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
               const val = e.target.value;

package/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamTextFormItem.tsx

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React from "react";
+import React, { useEffect } from "react";
 
 import FormTextInput from "@theme/ApiExplorer/FormTextInput";
 import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch } from "@theme/ApiItem/hooks";
+import { useFormContext } from "react-hook-form";
 
 export interface ParamProps {
   param: Param;
@@ -25,6 +26,15 @@ export default function ParamTextFormItem({
   required,
 }: ParamProps) {
   const dispatch = useTypedDispatch();
+  const { setValue } = useFormContext();
+
+  useEffect(() => {
+    if (param.value !== undefined && !Array.isArray(param.value)) {
+      setValue(param.name, param.value);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <FormTextInput
       label={label}

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

@@ -15,7 +15,6 @@ import ParamMultiSelectFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormI
 import ParamSelectFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem";
 import ParamTextFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamTextFormItem";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
-import { OPENAPI_PARAM_OPTIONS } from "@theme/translationIds";
 
 import { Param } from "./slice";
 
@@ -207,11 +206,11 @@ function ParamOptions() {
             </span>
             {showOptional
               ? translate({
-                  id: OPENAPI_PARAM_OPTIONS.HIDE_OPTIONAL,
+                  id: "theme.openapi.paramOptions.hideOptional",
                   message: "Hide optional parameters",
                 })
               : translate({
-                  id: OPENAPI_PARAM_OPTIONS.SHOW_OPTIONAL,
+                  id: "theme.openapi.paramOptions.showOptional",
                   message: "Show optional parameters",
                 })}
           </button>

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

@@ -16,6 +16,7 @@ import Authorization from "@theme/ApiExplorer/Authorization";
 import Body from "@theme/ApiExplorer/Body";
 import buildPostmanRequest from "@theme/ApiExplorer/buildPostmanRequest";
 import ContentType from "@theme/ApiExplorer/ContentType";
+import { useResolvedEncoding } from "@theme/ApiExplorer/EncodingSelection/useResolvedEncoding";
 import ParamOptions from "@theme/ApiExplorer/ParamOptions";
 import {
   setResponse,
@@ -25,9 +26,7 @@ import {
   clearHeaders,
 } from "@theme/ApiExplorer/Response/slice";
 import Server from "@theme/ApiExplorer/Server";
-import { useResolvedEncoding } from "@theme/ApiExplorer/EncodingSelection/useResolvedEncoding";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
-import { OPENAPI_REQUEST } from "@theme/translationIds";
 import type { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import type { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 import type { ThemeConfig } from "docusaurus-theme-openapi-docs/src/types";
@@ -137,26 +136,26 @@ function Request({ item }: { item: ApiItem }) {
     switch (errorType) {
       case "timeout":
         return translate({
-          id: OPENAPI_REQUEST.ERROR_TIMEOUT,
+          id: "theme.openapi.request.error.timeout",
           message:
             "The request timed out waiting for the server to respond. Please try again. If the issue persists, try using a different client (e.g., curl) with a longer timeout.",
         });
       case "network":
         return translate({
-          id: OPENAPI_REQUEST.ERROR_NETWORK,
+          id: "theme.openapi.request.error.network",
           message:
             "Unable to reach the server. Please check your network connection and verify the server URL is correct. If the server is running, this may be a CORS issue.",
         });
       case "cors":
         return translate({
-          id: OPENAPI_REQUEST.ERROR_CORS,
+          id: "theme.openapi.request.error.cors",
           message:
             "The request was blocked, possibly due to CORS restrictions. Ensure the server allows requests from this origin, or try using a proxy.",
         });
       case "unknown":
       default:
         return translate({
-          id: OPENAPI_REQUEST.ERROR_UNKNOWN,
+          id: "theme.openapi.request.error.unknown",
           message:
             "An unexpected error occurred while making the request. Please try again.",
         });
@@ -167,7 +166,7 @@ function Request({ item }: { item: ApiItem }) {
     dispatch(
       setResponse(
         translate({
-          id: OPENAPI_REQUEST.FETCHING_MESSAGE,
+          id: "theme.openapi.request.fetchingMessage",
           message: "Fetching...",
         })
       )
@@ -195,7 +194,7 @@ function Request({ item }: { item: ApiItem }) {
         errorMessage = getErrorMessage(e.type);
       } else {
         errorMessage = translate({
-          id: OPENAPI_REQUEST.CONNECTION_FAILED,
+          id: "theme.openapi.request.connectionFailed",
           message: "Connection failed",
         });
       }
@@ -253,7 +252,7 @@ function Request({ item }: { item: ApiItem }) {
         <div className="openapi-explorer__request-header-container">
           <span className="openapi-explorer__request-title">
             {translate({
-              id: OPENAPI_REQUEST.REQUEST_TITLE,
+              id: "theme.openapi.request.title",
               message: "Request",
             })}
           </span>
@@ -264,7 +263,7 @@ function Request({ item }: { item: ApiItem }) {
               onClick={collapseAllDetails}
             >
               {translate({
-                id: OPENAPI_REQUEST.COLLAPSE_ALL,
+                id: "theme.openapi.request.collapseAll",
                 message: "Collapse all",
               })}
             </button>
@@ -275,7 +274,7 @@ function Request({ item }: { item: ApiItem }) {
               onClick={expandAllDetails}
             >
               {translate({
-                id: OPENAPI_REQUEST.EXPAND_ALL,
+                id: "theme.openapi.request.expandAll",
                 message: "Expand all",
               })}
             </button>
@@ -296,7 +295,7 @@ function Request({ item }: { item: ApiItem }) {
                 }}
               >
                 {translate({
-                  id: OPENAPI_REQUEST.BASE_URL_TITLE,
+                  id: "theme.openapi.request.baseUrl.title",
                   message: "Base URL",
                 })}
               </summary>
@@ -315,7 +314,10 @@ function Request({ item }: { item: ApiItem }) {
                   setExpandAuth(!expandAuth);
                 }}
               >
-                {translate({ id: OPENAPI_REQUEST.AUTH_TITLE, message: "Auth" })}
+                {translate({
+                  id: "theme.openapi.request.auth.title",
+                  message: "Auth",
+                })}
               </summary>
               <Authorization />
             </details>
@@ -335,7 +337,7 @@ function Request({ item }: { item: ApiItem }) {
                 }}
               >
                 {translate({
-                  id: OPENAPI_REQUEST.PARAMETERS_TITLE,
+                  id: "theme.openapi.request.parameters.title",
                   message: "Parameters",
                 })}
               </summary>
@@ -354,12 +356,15 @@ function Request({ item }: { item: ApiItem }) {
                   setExpandBody(!expandBody);
                 }}
               >
-                {translate({ id: OPENAPI_REQUEST.BODY_TITLE, message: "Body" })}
+                {translate({
+                  id: "theme.openapi.request.body.title",
+                  message: "Body",
+                })}
                 {requestBodyRequired && (
                   <span className="openapi-schema__required">
                     &nbsp;
                     {translate({
-                      id: OPENAPI_REQUEST.REQUIRED_LABEL,
+                      id: "theme.openapi.request.requiredLabel",
                       message: "required",
                     })}
                   </span>
@@ -388,7 +393,7 @@ function Request({ item }: { item: ApiItem }) {
                 }}
               >
                 {translate({
-                  id: OPENAPI_REQUEST.ACCEPT_TITLE,
+                  id: "theme.openapi.request.accept.title",
                   message: "Accept",
                 })}
               </summary>
@@ -398,7 +403,7 @@ function Request({ item }: { item: ApiItem }) {
           {showRequestButton && item.method !== "event" && (
             <button className="openapi-explorer__request-btn" type="submit">
               {translate({
-                id: OPENAPI_REQUEST.SEND_BUTTON,
+                id: "theme.openapi.request.sendButton",
                 message: "Send API Request",
               })}
             </button>