fix: APIKey Component validation and React Element handling inside getTranslation

packages/next/src/views/Edit/Default/Auth/APIKey.tsx

@@ -6,6 +6,7 @@ import {
   GenerateConfirmation,
   Label,
   fieldBaseClass,
+  useConfig,
   useField,
   useFormFields,
   useTranslation,
@@ -21,6 +22,7 @@ const APIKey: React.FC<{ readOnly?: boolean }> = ({ readOnly }) => {
   const [initialAPIKey, setInitialAPIKey] = useState(null)
   const [highlightedField, setHighlightedField] = useState(false)
   const { t } = useTranslation()
+  const config = useConfig()
 
   const apiKey = useFormFields(([fields]) => fields[path])
 
@@ -31,7 +33,12 @@ const APIKey: React.FC<{ readOnly?: boolean }> = ({ readOnly }) => {
       data: {},
       maxLength: 48,
       minLength: 24,
-      req: { t } as PayloadRequest,
+      req: {
+        payload: {
+          config,
+        },
+        t,
+      } as PayloadRequest,
       siblingData: {},
     })
 

packages/translations/src/utilities/getTranslation.ts

@@ -5,8 +5,9 @@ import type { I18n } from '../types.js'
 export const getTranslation = (
   label: JSX.Element | Record<string, string> | string,
   i18n: Pick<I18n, 'fallbackLanguage' | 'language'>,
-): string => {
-  if (typeof label === 'object') {
+): JSX.Element | string => {
+  // If it's a Record, look for translation. If string or React Element, pass through
+  if (typeof label === 'object' && !Object.prototype.hasOwnProperty.call(label, '$$typeof')) {
     if (label[i18n.language]) {
       return label[i18n.language]
     }
@@ -22,5 +23,6 @@ export const getTranslation = (
     return fallbackLang && label[fallbackLang] ? fallbackLang : label[Object.keys(label)[0]]
   }
 
-  return label
+  // If it's a React Element or string, then we should just pass it through
+  return label as JSX.Element | string
 }