fix(28713): fix default name when no ui:name given

hivemq · Dec 16, 2024 · b4ef66d · b4ef66d
1 parent cb876c1
commit b4ef66d
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/hivemq-edge/src/frontend/src/components/rjsf/ArrayFieldItemTemplate.tsx b/hivemq-edge/src/frontend/src/components/rjsf/ArrayFieldItemTemplate.tsx
@@ -52,7 +52,7 @@ export const ArrayFieldItemTemplate: FC<ArrayFieldTemplateItemType> = (props) =>
       ? children.props.formData[collapsableItems?.titleKey]
       : undefined
 
-    return formatItemName(collapsableItems?.name as string, children.props.index, childrenFormData)
+    return formatItemName(collapsableItems?.name, children.props.index, childrenFormData)
   }, [children.props.formData, children.props.index, collapsableItems?.name, collapsableItems?.titleKey])
 
   useEffect(() => {
@@ -83,7 +83,7 @@ export const ArrayFieldItemTemplate: FC<ArrayFieldTemplateItemType> = (props) =>
   // This is to override the hardcoded rendering of the item's indexed names
   const childrenWithCustomTitle = {
     ...children,
-    props: { ...children.props, title: formatItemName(collapsableItems?.name as string, children.props.index) },
+    props: { ...children.props, title: formatItemName(collapsableItems?.name, children.props.index) },
   }
 
   return (

diff --git a/hivemq-edge/src/frontend/src/components/rjsf/utils/array-items.utils.spec.ts b/hivemq-edge/src/frontend/src/components/rjsf/utils/array-items.utils.spec.ts
@@ -4,6 +4,12 @@ import { formatItemName } from '@/components/rjsf/utils/array-items.utils.ts'
 
 describe('formatItemName', () => {
   it.each([
+    {
+      stub: undefined,
+      index: 1,
+      content: undefined,
+      result: 'item #1',
+    },
     {
       stub: 'item',
       index: 1,

diff --git a/hivemq-edge/src/frontend/src/components/rjsf/utils/array-items.utils.ts b/hivemq-edge/src/frontend/src/components/rjsf/utils/array-items.utils.ts
@@ -1,7 +1,10 @@
 const FORMAT_INDEX_MARKER = '#'
 const FORMAT_SEPARATOR = '-'
 
-export const formatItemName = (stub: string, index: number, description?: string) => {
-  if (!description) return `${stub} ${FORMAT_INDEX_MARKER}${index}`
-  return `${stub} ${FORMAT_INDEX_MARKER}${index} ${FORMAT_SEPARATOR} ${description}`
+import i18n from '@/config/i18n.config.ts'
+
+export const formatItemName = (stub: string | undefined, index: number, description?: string) => {
+  const token = stub || i18n.t('rjsf.ArrayFieldItem.item', { ns: 'components' })
+  if (!description) return `${token} ${FORMAT_INDEX_MARKER}${index}`
+  return `${token} ${FORMAT_INDEX_MARKER}${index} ${FORMAT_SEPARATOR} ${description}`
 }
diff --git a/hivemq-edge/src/frontend/src/locales/en/components.json b/hivemq-edge/src/frontend/src/locales/en/components.json
@@ -118,6 +118,7 @@
       }
     },
     "ArrayFieldItem": {
+      "item": "item",
       "Buttons": {
         "expanded_true": "Collapse Item",
         "expanded_false": "Expand Item"