diff --git a/hivemq-edge/src/frontend/src/api/hooks/useDomainModel/__handlers__/index.ts b/hivemq-edge/src/frontend/src/api/hooks/useDomainModel/__handlers__/index.ts index 4874ed1f7a..ba3d446fc4 100644 --- a/hivemq-edge/src/frontend/src/api/hooks/useDomainModel/__handlers__/index.ts +++ b/hivemq-edge/src/frontend/src/api/hooks/useDomainModel/__handlers__/index.ts @@ -23,7 +23,7 @@ export const GENERATE_DATA_MODELS = (short = false, title?: string): RJSFSchema type: 'string', title: short ? 'First String' : 'firstName', default: 'Chuck', - examples: 'firstName', + examples: ['firstName'], }, lastName: { type: 'string', @@ -40,11 +40,11 @@ export const GENERATE_DATA_MODELS = (short = false, title?: string): RJSFSchema subItems: { type: 'object', title: 'subItems', - examples: 'subItems', + examples: ['subItems'], properties: { name: { - examples: 'name', + examples: ['name'], type: 'string', title: 'name', default: 'Default name', diff --git a/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/components/schema/PropertyItem.spec.cy.tsx b/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/components/schema/PropertyItem.spec.cy.tsx index f860907199..f349f9ff38 100644 --- a/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/components/schema/PropertyItem.spec.cy.tsx +++ b/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/components/schema/PropertyItem.spec.cy.tsx @@ -47,7 +47,7 @@ describe('PropertyItem', () => { it('should render examples properly', () => { cy.mountWithProviders( - + ) cy.getByAriaLabel('Property').should('have.attr', 'data-type', 'object') diff --git a/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/components/schema/PropertyItem.tsx b/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/components/schema/PropertyItem.tsx index 562e3286a8..a58ea882d5 100644 --- a/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/components/schema/PropertyItem.tsx +++ b/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/components/schema/PropertyItem.tsx @@ -3,7 +3,7 @@ import type { IconType } from 'react-icons' import { useTranslation } from 'react-i18next' import type { JSONSchema7TypeName } from 'json-schema' import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter' -import { Badge, Code, HStack, Tooltip, Box, Icon } from '@chakra-ui/react' +import { Badge, Code, HStack, Tooltip, Box, Icon, Text, VStack } from '@chakra-ui/react' import { DataTypeIcon } from '@/components/rjsf/MqttTransformation/utils/data-type.utils.ts' import { FlatJSONSchema7 } from '@/components/rjsf/MqttTransformation/utils/json-schema.utils.ts' @@ -13,6 +13,7 @@ interface PropertyItemProps { isDraggable?: boolean hasTooltip?: boolean hasExamples?: boolean + hasDescription?: boolean } const PropertyItem: FC = ({ @@ -20,6 +21,7 @@ const PropertyItem: FC = ({ isDraggable = false, hasTooltip = false, hasExamples = false, + hasDescription = false, }) => { const { t } = useTranslation('components') const draggableRef = useRef(null) @@ -40,6 +42,9 @@ const PropertyItem: FC = ({ const propertyName = property.title const path = [...property.path, property.key].join('.') + // TODO[NVL] Only extracting the first value of any examples. Might want to provide something more user-friendly + const examples = Array.isArray(property.examples) ? property.examples[0] : property.examples + return ( = ({ tabIndex={isDraggable ? 0 : undefined} py="3px" justifyContent="flex-end" + alignItems="flex-start" role="group" aria-label={t('GenericSchema.structure.property')} > @@ -74,20 +80,27 @@ const PropertyItem: FC = ({ - {property.examples && hasExamples && ( - - {property.examples.toString()} - - )} + + {examples && hasExamples && ( + + {examples.toString()} + + )} + {hasDescription && ( + + {property.description} + + )} + ) } diff --git a/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/utils/json-schema.utils.spec.ts b/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/utils/json-schema.utils.spec.ts index 83c06287c6..37bd82529e 100644 --- a/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/utils/json-schema.utils.spec.ts +++ b/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/utils/json-schema.utils.spec.ts @@ -107,7 +107,7 @@ describe('reducerSchemaExamples', () => { expect.objectContaining({ properties: expect.objectContaining({ age: { - examples: 1, + examples: [1], title: 'Age', type: 'integer', }, @@ -125,13 +125,13 @@ describe('reducerSchemaExamples', () => { nestedObject: expect.objectContaining({ properties: expect.objectContaining({ age: { - examples: 100, + examples: [100], title: 'Age', type: 'integer', }, name: { default: 'Default name', - examples: 'test2', + examples: ['test2'], type: 'string', }, }), @@ -156,7 +156,7 @@ describe('payloadToSchema', () => { 'test/topic1': { properties: { age: { - examples: 1, + examples: [1], type: 'integer', }, }, diff --git a/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/utils/json-schema.utils.ts b/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/utils/json-schema.utils.ts index 4574a9eefb..5ce55e184c 100644 --- a/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/utils/json-schema.utils.ts +++ b/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/utils/json-schema.utils.ts @@ -92,7 +92,7 @@ export const reducerSchemaExamples = (state: RJSFSchema, event: JsonNode) => }) .with(P._, ([allStates, examples]) => { if (!examples) return allStates - return { ...allStates, examples: examples } + return { ...allStates, examples: [examples] } }) .exhaustive()