Merge pull request #455

feat(22339): Remove hardcoded uiSchema from UI

* chore(22339): update openAPI specs and stubs

* feat(22339): remove the hardcoded uiSchema

* feat(22339): add uiSchema defaults

* feat(22339): extract uiSchema from adapter config

* fix(22339): fix default uiSchema

* fix(22339): fix adapter uiSchema

* fix(22339): fix adapter uiSchema

* test(22339): fix mocks

* refactor(22339): refactor the handling of required uiSchema properties

* test(22339): add test

Author: vanch3d

ext/hivemq-edge-openapi-2024.5.yaml

@@ -11,7 +11,7 @@
     "lint:prettier:write": "prettier --write .",
     "lint:stylelint": "stylelint './src/**/*.css'",
     "lint:all": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && prettier --check .",
-    "dev:openAPI": "openapi --input '../../../../hivemq-edge/ext/hivemq-edge-openapi-2024.4.yaml' -o ./src/api/__generated__ -c axios --name HiveMqClient --exportSchemas true",
+    "dev:openAPI": "openapi --input '../../../../hivemq-edge/ext/hivemq-edge-openapi-2024.5.yaml' -o ./src/api/__generated__ -c axios --name HiveMqClient --exportSchemas true",
     "dev:chakra:types": "chakra-cli tokens './src/modules/Theme/themeHiveMQ.ts' --out 'node_modules/.pnpm/@[email protected]/node_modules/@chakra-ui/styled-system/dist/theming.types.d.ts'",
     "cypress:open": "cypress open",
     "cypress:open:component": "cypress open --component --browser chrome",

hivemq-edge/src/frontend/package.json

@@ -1,7 +1,43 @@
-import { Adapter, AdaptersList, JsonNode, ProtocolAdapter, ProtocolAdaptersList, Status } from '@/api/__generated__'
 import { http, HttpResponse } from 'msw'
+import { UiSchema } from '@rjsf/utils'
+
 import { MOCK_TOPIC_REF1, MOCK_TOPIC_REF2 } from '@/__test-utils__/react-flow/topics.ts'
 import { MOCK_ADAPTER_ID } from '@/__test-utils__/mocks.ts'
+import { Adapter, AdaptersList, JsonNode, ProtocolAdapter, ProtocolAdaptersList, Status } from '@/api/__generated__'
+
+export const mockUISchema: UiSchema = {
+  'ui:tabs': [
+    {
+      id: 'coreFields',
+      title: 'Settings',
+      properties: ['id'],
+    },
+    {
+      id: 'subFields',
+      title: 'Subscription',
+      properties: ['subscriptions'],
+    },
+    {
+      id: 'publishing',
+      title: 'Publishing',
+      properties: ['maxPollingErrorsBeforeRemoval', 'pollingIntervalMillis', 'minValue', 'maxValue'],
+    },
+  ],
+  'ui:submitButtonOptions': {
+    norender: true,
+  },
+  id: {
+    'ui:disabled': false,
+  },
+  subscriptions: {
+    items: {
+      'ui:order': ['destination', 'qos', '*'],
+      'ui:collapsable': {
+        titleKey: 'destination',
+      },
+    },
+  },
+}
 
 export const mockJSONSchema: JsonNode = {
   $schema: 'https://json-schema.org/draft/2020-12/schema',
@@ -65,6 +101,7 @@ export const mockProtocolAdapter: ProtocolAdapter = {
   logoUrl: 'http://localhost:8080/images/hivemq-icon.png',
   author: 'HiveMQ',
   configSchema: mockJSONSchema,
+  uiSchema: mockUISchema,
   installed: true,
   category: {
     description: 'Industrial, typically field bus protocols.',

hivemq-edge/src/frontend/src/api/__generated__/models/ProtocolAdapter.ts

@@ -1,4 +1,10 @@
 import { FC, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+import { IChangeEvent } from '@rjsf/core'
+import { RJSFSchema } from '@rjsf/utils'
+import { RJSFValidationError } from '@rjsf/utils/src/types.ts'
+import Form from '@rjsf/chakra-ui'
 import {
   Button,
   Drawer,
@@ -13,11 +19,6 @@ import {
   Image,
   Text,
 } from '@chakra-ui/react'
-import { useTranslation } from 'react-i18next'
-import { useParams } from 'react-router-dom'
-import { IChangeEvent } from '@rjsf/core'
-import { RJSFSchema } from '@rjsf/utils'
-import Form from '@rjsf/chakra-ui'
 
 import { Adapter, ApiError, ProtocolAdapter } from '@/api/__generated__'
 import { useGetAdapterTypes } from '@/api/hooks/useProtocolAdapters/useGetAdapterTypes.ts'
@@ -29,9 +30,8 @@ import { ObjectFieldTemplate } from '@/components/rjsf/ObjectFieldTemplate.tsx'
 import { BaseInputTemplate } from '@/components/rjsf/BaseInputTemplate.tsx'
 import { ArrayFieldTemplate } from '@/components/rjsf/ArrayFieldTemplate.tsx'
 import { ArrayFieldItemTemplate } from '@/components/rjsf/ArrayFieldItemTemplate.tsx'
-import useGetUiSchema from '../../hooks/useGetUISchema.ts'
-import { customFormatsValidator, customValidate } from '../../utils/validation-utils.ts'
-import { RJSFValidationError } from '@rjsf/utils/src/types.ts'
+import { customFormatsValidator, customValidate } from '@/modules/ProtocolAdapters/utils/validation-utils.ts'
+import { getRequiredUiSchema } from '@/modules/ProtocolAdapters/utils/uiSchema.utils.ts'
 
 interface AdapterInstanceDrawerProps {
   adapterType?: string
@@ -56,18 +56,22 @@ const AdapterInstanceDrawer: FC<AdapterInstanceDrawerProps> = ({
   const { data: allAdapters } = useListProtocolAdapters()
   const { adapterId } = useParams()
 
-  const { schema, name, logo } = useMemo(() => {
+  const { schema, uiSchema, name, logo } = useMemo(() => {
     const adapter: ProtocolAdapter | undefined = data?.items?.find((e) => e.id === adapterType)
-    const { configSchema } = adapter || {}
-    return { schema: configSchema, name: adapter?.name, logo: adapter?.logoUrl }
-  }, [data, adapterType])
+    const { configSchema, uiSchema } = adapter || {}
+    return {
+      schema: configSchema,
+      name: adapter?.name,
+      logo: adapter?.logoUrl,
+      uiSchema: getRequiredUiSchema(uiSchema, isNewAdapter),
+    }
+  }, [data?.items, isNewAdapter, adapterType])
 
   const defaultValues = useMemo(() => {
     if (isNewAdapter || !adapterId) return undefined
     const { config } = allAdapters?.find((e) => e.id === adapterId) || {}
     return config
   }, [allAdapters, adapterId, isNewAdapter])
-  const uiSchema = useGetUiSchema(isNewAdapter)
 
   const onValidate = (data: IChangeEvent<Adapter, RJSFSchema>) => {
     if (data.formData) onSubmit(data.formData)

hivemq-edge/src/frontend/src/api/__generated__/schemas/$ProtocolAdapter.ts

@@ -0,0 +1,59 @@
+import { describe, expect } from 'vitest'
+
+import { getRequiredUiSchema } from '@/modules/ProtocolAdapters/utils/uiSchema.utils.ts'
+import { UiSchema } from '@rjsf/utils'
+
+describe('getRequiredUiSchema', () => {
+  it('should return the mandatory properties ', () => {
+    expect(getRequiredUiSchema(undefined, true)).toStrictEqual(
+      expect.objectContaining({
+        id: {
+          'ui:disabled': false,
+        },
+        'ui:submitButtonOptions': {
+          norender: true,
+        },
+      })
+    )
+    expect(getRequiredUiSchema(undefined, false)).toStrictEqual(
+      expect.objectContaining({
+        id: {
+          'ui:disabled': true,
+        },
+        'ui:submitButtonOptions': {
+          norender: true,
+        },
+      })
+    )
+  })
+
+  it('should merge adapter with mandatory properties', () => {
+    const uiSchema: UiSchema = {
+      id: {
+        'ui:disabled': true,
+        title: 'new title',
+      },
+      'ui:submitButtonOptions': {
+        norender: false,
+        submitText: 'Submit',
+      },
+      test: {
+        'ui:disabled': true,
+      },
+    }
+
+    expect(getRequiredUiSchema(uiSchema, true)).toStrictEqual({
+      test: {
+        'ui:disabled': true,
+      },
+      id: {
+        title: 'new title',
+        'ui:disabled': false,
+      },
+      'ui:submitButtonOptions': {
+        norender: true,
+        submitText: 'Submit',
+      },
+    })
+  })
+})

hivemq-edge/src/frontend/src/api/hooks/useProtocolAdapters/__handlers__/index.ts

@@ -0,0 +1,18 @@
+import { UiSchema } from '@rjsf/utils'
+
+export const getRequiredUiSchema = (uiSchema: UiSchema | undefined, isNewAdapter: boolean): UiSchema => {
+  const { ['ui:submitButtonOptions']: submitButtonOptions, id, ...rest } = uiSchema || {}
+  return {
+    'ui:submitButtonOptions': {
+      // required to relocate the submit button outside the form
+      ...submitButtonOptions,
+      norender: true,
+    },
+    id: {
+      // required to prevent custom validation when editing an existing adapter
+      ...id,
+      'ui:disabled': !isNewAdapter,
+    },
+    ...rest,
+  }
+}