Merge pull request #688

fix(28833): Ensure JSONSchema examples are array
hivemq · Dec 11, 2024 · 993c2aa · 993c2aa
2 parents 6ae85d0 + 5a2567c
commit 993c2aa
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 24 deletions.
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
@@ -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/...rontend/src/components/rjsf/MqttTransformation/components/schema/PropertyItem.spec.cy.tsx b/...rontend/src/components/rjsf/MqttTransformation/components/schema/PropertyItem.spec.cy.tsx
@@ -47,7 +47,7 @@ describe('PropertyItem', () => {
 
   it('should render examples properly', () => {
     cy.mountWithProviders(
-      <PropertyItem property={{ ...MOCK_PROPERTY, examples: 'this is a sample' }} isDraggable={false} hasExamples />
+      <PropertyItem property={{ ...MOCK_PROPERTY, examples: ['this is a sample'] }} isDraggable={false} hasExamples />
     )
 
     cy.getByAriaLabel('Property').should('have.attr', 'data-type', 'object')

diff --git a/...ge/src/frontend/src/components/rjsf/MqttTransformation/components/schema/PropertyItem.tsx b/...ge/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,13 +13,15 @@ interface PropertyItemProps {
   isDraggable?: boolean
   hasTooltip?: boolean
   hasExamples?: boolean
+  hasDescription?: boolean
 }
 
 const PropertyItem: FC<PropertyItemProps> = ({
   property,
   isDraggable = false,
   hasTooltip = false,
   hasExamples = false,
+  hasDescription = false,
 }) => {
   const { t } = useTranslation('components')
   const draggableRef = useRef<HTMLDivElement | null>(null)
@@ -40,6 +42,9 @@ const PropertyItem: FC<PropertyItemProps> = ({
   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 (
     <HStack
       key={path}
@@ -48,6 +53,7 @@ const PropertyItem: FC<PropertyItemProps> = ({
       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<PropertyItemProps> = ({
           </Badge>
         </Tooltip>
       </HStack>
-      {property.examples && hasExamples && (
-        <Code
-          aria-label={t('GenericSchema.structure.example')}
-          data-testid="property-example"
-          size="xs"
-          variant="none"
-          fontSize="xs"
-          overflow="hidden"
-          textOverflow="ellipsis"
-          whiteSpace="nowrap"
-        >
-          {property.examples.toString()}
-        </Code>
-      )}
+      <VStack gap={0} alignItems="flex-end">
+        {examples && hasExamples && (
+          <Code
+            aria-label={t('GenericSchema.structure.example')}
+            data-testid="property-example"
+            size="xs"
+            variant="none"
+            fontSize="xs"
+            overflow="hidden"
+            textOverflow="ellipsis"
+            whiteSpace="nowrap"
+          >
+            {examples.toString()}
+          </Code>
+        )}
+        {hasDescription && (
+          <Text fontSize="sm" textAlign="end">
+            {property.description}
+          </Text>
+        )}
+      </VStack>
     </HStack>
   )
 }

diff --git a/...-edge/src/frontend/src/components/rjsf/MqttTransformation/utils/json-schema.utils.spec.ts b/...-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
@@ -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()