Merge pull request #708

* fix(28713): fix the generated name of array items

* test(28713): add tests

* fix(28713): add stub

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

Author: vanch3d

hivemq-edge/src/frontend/src/api/schemas/northbound.ui-schema.ts

@@ -15,6 +15,7 @@ export const northboundMappingListUISchema: UiSchema = {
       'ui:order': ['tagName', 'topic', '*'],
       'ui:collapsable': {
         titleKey: 'tagName',
+        name: 'Mapping',
       },
       tagName: {
         'ui:widget': registerEntitySelectWidget(CustomFormat.MQTT_TAG),

hivemq-edge/src/frontend/src/components/rjsf/ArrayFieldItemTemplate.tsx

@@ -7,10 +7,12 @@ import { LuPanelTopClose, LuPanelTopOpen } from 'react-icons/lu'
 import IconButton from '@/components/Chakra/IconButton.tsx'
 import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from '@/components/rjsf/__internals/IconButton.tsx'
 import { useFormControlStore } from '@/components/rjsf/Form/useFormControlStore.ts'
+import { formatItemName } from '@/components/rjsf/utils/array-items.utils.ts'
 
 // TODO[NVL] Need a better handling of the custom UISchema property, for the Adapter SDK
 interface ArrayFieldItemCollapsableUISchema {
   titleKey: string
+  name: string
 }
 
 // TODO[NVL] This is driven by subscription handling; use uiSchema to allow configuration for individual array property
@@ -49,9 +51,9 @@ export const ArrayFieldItemTemplate: FC<ArrayFieldTemplateItemType> = (props) =>
     const childrenFormData = collapsableItems?.titleKey
       ? children.props.formData[collapsableItems?.titleKey]
       : undefined
-    if (childrenFormData) return `${children.props.name} - ${childrenFormData}`
-    return children.props.name
-  }, [children.props.formData, children.props.name, collapsableItems?.titleKey])
+
+    return formatItemName(collapsableItems?.name, children.props.index, childrenFormData)
+  }, [children.props.formData, children.props.index, collapsableItems?.name, collapsableItems?.titleKey])
 
   useEffect(() => {
     if (props.children.props.idSchema.$id === expandItems.join('_')) onOpen()
@@ -82,6 +84,12 @@ export const ArrayFieldItemTemplate: FC<ArrayFieldTemplateItemType> = (props) =>
   }
   const { hidden, ...rest } = getDisclosureProps()
 
+  // This is to override the hardcoded rendering of the item's indexed names
+  const childrenWithCustomTitle = {
+    ...children,
+    props: { ...children.props, title: formatItemName(collapsableItems?.name, children.props.index) },
+  }
+
   return (
     <HStack flexDirection="row-reverse" alignItems="flex-start" py={1} role="listitem">
       {hasToolbar && (
@@ -136,7 +144,7 @@ export const ArrayFieldItemTemplate: FC<ArrayFieldTemplateItemType> = (props) =>
       )}
 
       <Box w="100%" {...rest}>
-        {!collapsableItems || isOpen ? children : renderCollapsed()}
+        {!collapsableItems || isOpen ? childrenWithCustomTitle : renderCollapsed()}
       </Box>
     </HStack>
   )

hivemq-edge/src/frontend/src/components/rjsf/utils/array-items.utils.spec.ts

@@ -0,0 +1,28 @@
+import { expect } from 'vitest'
+
+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,
+      content: undefined,
+      result: 'item #1',
+    },
+    {
+      stub: 'item',
+      index: 1,
+      content: 'the full name',
+      result: 'item #1 - the full name',
+    },
+  ])('should return $value for $path', ({ stub, index, content, result }) => {
+    expect(formatItemName(stub, index, content)).toStrictEqual(result)
+  })
+})

hivemq-edge/src/frontend/src/components/rjsf/utils/array-items.utils.ts

@@ -0,0 +1,10 @@
+const FORMAT_INDEX_MARKER = '#'
+const FORMAT_SEPARATOR = '-'
+
+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}`
+}

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"