From 421879061d4963268ad83a6a6a5e30462c72d2be Mon Sep 17 00:00:00 2001 From: Nicolas Van Labeke Date: Mon, 16 Dec 2024 08:50:55 +0000 Subject: [PATCH 1/4] fix(28713): fix the generated name of array items --- .../components/rjsf/ArrayFieldItemTemplate.tsx | 16 ++++++++++++---- .../components/rjsf/utils/array-items.utils.ts | 7 +++++++ 2 files changed, 19 insertions(+), 4 deletions(-) create mode 100644 hivemq-edge/src/frontend/src/components/rjsf/utils/array-items.utils.ts diff --git a/hivemq-edge/src/frontend/src/components/rjsf/ArrayFieldItemTemplate.tsx b/hivemq-edge/src/frontend/src/components/rjsf/ArrayFieldItemTemplate.tsx index e3116d7df..71906df8b 100644 --- a/hivemq-edge/src/frontend/src/components/rjsf/ArrayFieldItemTemplate.tsx +++ b/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 = (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 as string, 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 = (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 as string, children.props.index) }, + } + return ( {hasToolbar && ( @@ -136,7 +144,7 @@ export const ArrayFieldItemTemplate: FC = (props) => )} - {!collapsableItems || isOpen ? children : renderCollapsed()} + {!collapsableItems || isOpen ? childrenWithCustomTitle : renderCollapsed()} ) 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 new file mode 100644 index 000000000..f2627f94f --- /dev/null +++ b/hivemq-edge/src/frontend/src/components/rjsf/utils/array-items.utils.ts @@ -0,0 +1,7 @@ +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}` +} From 3b4b167871ab4354785a205ab5c278d3b5c75512 Mon Sep 17 00:00:00 2001 From: Nicolas Van Labeke Date: Mon, 16 Dec 2024 08:51:13 +0000 Subject: [PATCH 2/4] test(28713): add tests --- .../rjsf/utils/array-items.utils.spec.ts | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 hivemq-edge/src/frontend/src/components/rjsf/utils/array-items.utils.spec.ts 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 new file mode 100644 index 000000000..067172ab7 --- /dev/null +++ b/hivemq-edge/src/frontend/src/components/rjsf/utils/array-items.utils.spec.ts @@ -0,0 +1,22 @@ +import { expect } from 'vitest' + +import { formatItemName } from '@/components/rjsf/utils/array-items.utils.ts' + +describe('formatItemName', () => { + it.each([ + { + 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) + }) +}) From c93a581362cab34fa6d57923013a3fe8f2d81c2b Mon Sep 17 00:00:00 2001 From: Nicolas Van Labeke Date: Mon, 16 Dec 2024 08:52:00 +0000 Subject: [PATCH 3/4] fix(28713): add stub --- hivemq-edge/src/frontend/src/api/schemas/northbound.ui-schema.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/hivemq-edge/src/frontend/src/api/schemas/northbound.ui-schema.ts b/hivemq-edge/src/frontend/src/api/schemas/northbound.ui-schema.ts index dadd31779..5fa996281 100644 --- a/hivemq-edge/src/frontend/src/api/schemas/northbound.ui-schema.ts +++ b/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), From 5220b80f04679831e1a80da33d8a28416fc581f9 Mon Sep 17 00:00:00 2001 From: Nicolas Van Labeke Date: Mon, 16 Dec 2024 09:05:00 +0000 Subject: [PATCH 4/4] fix(28713): fix default name when no ui:name given --- .../src/components/rjsf/ArrayFieldItemTemplate.tsx | 4 ++-- .../src/components/rjsf/utils/array-items.utils.spec.ts | 6 ++++++ .../src/components/rjsf/utils/array-items.utils.ts | 9 ++++++--- hivemq-edge/src/frontend/src/locales/en/components.json | 1 + 4 files changed, 15 insertions(+), 5 deletions(-) diff --git a/hivemq-edge/src/frontend/src/components/rjsf/ArrayFieldItemTemplate.tsx b/hivemq-edge/src/frontend/src/components/rjsf/ArrayFieldItemTemplate.tsx index 71906df8b..4fe38b4c0 100644 --- 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 = (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(() => { @@ -87,7 +87,7 @@ export const ArrayFieldItemTemplate: FC = (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 index 067172ab7..e87149d7a 100644 --- 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 index f2627f94f..f9629b318 100644 --- 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 index 528619e0f..ba78a1b06 100755 --- 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"