From f29d50825b455ba90ab87ec120770e008adc88f2 Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Mon, 11 Sep 2023 14:23:43 +0100
Subject: [PATCH 01/24] feat(93): Refactor HiveMQ theme to define custom side
 panels

---
 .../frontend/src/modules/App/themes/Drawer.ts | 14 ++++++
 .../src/modules/App/themes/FormControl.ts     | 17 +++++++
 .../src/modules/App/themes/themeHiveMQ.ts     | 49 ++++++++++++++-----
 3 files changed, 68 insertions(+), 12 deletions(-)
 create mode 100644 hivemq-edge/src/frontend/src/modules/App/themes/Drawer.ts
 create mode 100644 hivemq-edge/src/frontend/src/modules/App/themes/FormControl.ts

diff --git a/hivemq-edge/src/frontend/src/modules/App/themes/Drawer.ts b/hivemq-edge/src/frontend/src/modules/App/themes/Drawer.ts
new file mode 100644
index 0000000000..6b9a0fb281
--- /dev/null
+++ b/hivemq-edge/src/frontend/src/modules/App/themes/Drawer.ts
@@ -0,0 +1,14 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+import { drawerAnatomy } from '@chakra-ui/anatomy'
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(drawerAnatomy.keys)
+
+const hivemq = definePartsStyle({
+  dialog: {
+    backgroundColor: 'gray.50',
+  },
+})
+
+export const drawerTheme = defineMultiStyleConfig({
+  variants: { hivemq },
+})
diff --git a/hivemq-edge/src/frontend/src/modules/App/themes/FormControl.ts b/hivemq-edge/src/frontend/src/modules/App/themes/FormControl.ts
new file mode 100644
index 0000000000..b241e8b410
--- /dev/null
+++ b/hivemq-edge/src/frontend/src/modules/App/themes/FormControl.ts
@@ -0,0 +1,17 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+import { formAnatomy } from '@chakra-ui/anatomy'
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(formAnatomy.keys)
+
+const hivemq = definePartsStyle({
+  container: {
+    backgroundColor: 'white',
+    padding: 4,
+    borderRadius: 6,
+    borderWidth: 1,
+  },
+})
+
+export const formControlTheme = defineMultiStyleConfig({
+  variants: { hivemq },
+})
diff --git a/hivemq-edge/src/frontend/src/modules/App/themes/themeHiveMQ.ts b/hivemq-edge/src/frontend/src/modules/App/themes/themeHiveMQ.ts
index 84be6d0bfd..3236c9405d 100644
--- a/hivemq-edge/src/frontend/src/modules/App/themes/themeHiveMQ.ts
+++ b/hivemq-edge/src/frontend/src/modules/App/themes/themeHiveMQ.ts
@@ -3,7 +3,10 @@
 import { defineStyleConfig, extendTheme, theme as baseTheme } from '@chakra-ui/react'
 import '@fontsource/roboto/400.css'
 import '@fontsource/roboto/700.css'
+
 import { statTheme } from './Stat'
+import { drawerTheme } from './Drawer.ts'
+import { formControlTheme } from './FormControl.ts'
 
 const Button = defineStyleConfig({
   defaultProps: {
@@ -17,17 +20,38 @@ export const formStyles = {
   baseStyle: {
     container: {
       label: {
-        fontWeight: 'bold',
+        fontWeight: 'medium',
       },
       h5: {
         fontSize: 'lg',
       },
-      p: {
-        margin: '4px',
-        '.chakra-text': {
-          fontSize: 'sm',
-        },
+      // p: {
+      //   margin: '4px',
+      //   '.chakra-text': {
+      //     fontSize: 'sm',
+      //   },
+      // },
+    },
+  },
+}
+
+export const TestStyles = {
+  parts: ['container', 'requiredIndicator', 'helperText'],
+  baseStyle: {
+    container: {
+      backgroundColor: 'red',
+      label: {
+        fontWeight: 'medium',
+      },
+      h5: {
+        fontSize: 'lg',
       },
+      // p: {
+      //   margin: '4px',
+      //   '.chakra-text': {
+      //     fontSize: 'sm',
+      //   },
+      // },
     },
   },
 }
@@ -38,11 +62,11 @@ export const themeHiveMQ = extendTheme({
     body: `'Roboto', sans-serif`,
   },
 
-  fontSizes: {
-    lg: '16px',
-    md: '14px',
-    sm: '12px',
-  },
+  // fontSizes: {
+  //   lg: '16px',
+  //   md: '14px',
+  //   sm: '12px',
+  // },
 
   colors: {
     status: {
@@ -73,6 +97,7 @@ export const themeHiveMQ = extendTheme({
   components: {
     Button,
     Stat: statTheme,
-    Form: formStyles,
+    Drawer: drawerTheme,
+    Form: formControlTheme,
   },
 })

From 715be1805da51e8140553f979190eed861d45ed4 Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Mon, 11 Sep 2023 14:28:00 +0100
Subject: [PATCH 02/24] refactor(93): reorganise HiveMQ theme as a proper
 module

---
 hivemq-edge/src/frontend/cypress/support/component.tsx      | 2 +-
 hivemq-edge/src/frontend/src/modules/App/MainApp.tsx        | 3 ++-
 .../src/modules/{App/themes => Theme/styles}/Drawer.ts      | 0
 .../src/modules/{App/themes => Theme/styles}/FormControl.ts | 0
 .../src/modules/{App/themes => Theme/styles}/Stat.ts        | 0
 .../src/modules/{App/themes => Theme}/themeHiveMQ.ts        | 6 +++---
 6 files changed, 6 insertions(+), 5 deletions(-)
 rename hivemq-edge/src/frontend/src/modules/{App/themes => Theme/styles}/Drawer.ts (100%)
 rename hivemq-edge/src/frontend/src/modules/{App/themes => Theme/styles}/FormControl.ts (100%)
 rename hivemq-edge/src/frontend/src/modules/{App/themes => Theme/styles}/Stat.ts (100%)
 rename hivemq-edge/src/frontend/src/modules/{App/themes => Theme}/themeHiveMQ.ts (93%)

diff --git a/hivemq-edge/src/frontend/cypress/support/component.tsx b/hivemq-edge/src/frontend/cypress/support/component.tsx
index 900c443bce..481bf42069 100644
--- a/hivemq-edge/src/frontend/cypress/support/component.tsx
+++ b/hivemq-edge/src/frontend/cypress/support/component.tsx
@@ -27,7 +27,7 @@ import { ChakraProvider, VisuallyHidden } from '@chakra-ui/react'
 import { QueryClientProvider } from '@tanstack/react-query'
 
 import { AuthProvider } from '@/modules/Auth/AuthProvider.tsx'
-import { themeHiveMQ } from '@/modules/App/themes/themeHiveMQ.ts'
+import { themeHiveMQ } from '@/modules/Theme/themeHiveMQ.ts'
 import queryClient from '@/api/queryClient.ts'
 import '@/config/i18n.config.ts'
 
diff --git a/hivemq-edge/src/frontend/src/modules/App/MainApp.tsx b/hivemq-edge/src/frontend/src/modules/App/MainApp.tsx
index ab78d27ae1..d4d26784f4 100644
--- a/hivemq-edge/src/frontend/src/modules/App/MainApp.tsx
+++ b/hivemq-edge/src/frontend/src/modules/App/MainApp.tsx
@@ -2,8 +2,9 @@ import { FC } from 'react'
 import { RouterProvider } from 'react-router-dom'
 import { ChakraProvider } from '@chakra-ui/react'
 
+import { themeHiveMQ } from '@/modules/Theme/themeHiveMQ.ts'
+
 import { routes } from './routes.tsx'
-import { themeHiveMQ } from './themes/themeHiveMQ.ts'
 import { AuthProvider } from '../Auth/AuthProvider.tsx'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
diff --git a/hivemq-edge/src/frontend/src/modules/App/themes/Drawer.ts b/hivemq-edge/src/frontend/src/modules/Theme/styles/Drawer.ts
similarity index 100%
rename from hivemq-edge/src/frontend/src/modules/App/themes/Drawer.ts
rename to hivemq-edge/src/frontend/src/modules/Theme/styles/Drawer.ts
diff --git a/hivemq-edge/src/frontend/src/modules/App/themes/FormControl.ts b/hivemq-edge/src/frontend/src/modules/Theme/styles/FormControl.ts
similarity index 100%
rename from hivemq-edge/src/frontend/src/modules/App/themes/FormControl.ts
rename to hivemq-edge/src/frontend/src/modules/Theme/styles/FormControl.ts
diff --git a/hivemq-edge/src/frontend/src/modules/App/themes/Stat.ts b/hivemq-edge/src/frontend/src/modules/Theme/styles/Stat.ts
similarity index 100%
rename from hivemq-edge/src/frontend/src/modules/App/themes/Stat.ts
rename to hivemq-edge/src/frontend/src/modules/Theme/styles/Stat.ts
diff --git a/hivemq-edge/src/frontend/src/modules/App/themes/themeHiveMQ.ts b/hivemq-edge/src/frontend/src/modules/Theme/themeHiveMQ.ts
similarity index 93%
rename from hivemq-edge/src/frontend/src/modules/App/themes/themeHiveMQ.ts
rename to hivemq-edge/src/frontend/src/modules/Theme/themeHiveMQ.ts
index 3236c9405d..30a0161515 100644
--- a/hivemq-edge/src/frontend/src/modules/App/themes/themeHiveMQ.ts
+++ b/hivemq-edge/src/frontend/src/modules/Theme/themeHiveMQ.ts
@@ -4,9 +4,9 @@ import { defineStyleConfig, extendTheme, theme as baseTheme } from '@chakra-ui/r
 import '@fontsource/roboto/400.css'
 import '@fontsource/roboto/700.css'
 
-import { statTheme } from './Stat'
-import { drawerTheme } from './Drawer.ts'
-import { formControlTheme } from './FormControl.ts'
+import { statTheme } from './styles/Stat'
+import { drawerTheme } from './styles/Drawer.ts'
+import { formControlTheme } from './styles/FormControl.ts'
 
 const Button = defineStyleConfig({
   defaultProps: {

From c2715ac129e22d69443414e3a3b6f7bcc3f8938e Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Mon, 11 Sep 2023 17:03:38 +0100
Subject: [PATCH 03/24] refactor(93): restructure the bridge side panel - add
 custom variant to drawer - add custom variant panel designed as fieldset

---
 .../components/panels/BridgeMainDrawer.tsx    |  9 +++-
 .../components/panels/ConnectionPanel.tsx     | 47 +++++++++----------
 .../Bridges/components/panels/NamePanel.tsx   |  2 +-
 .../components/panels/OptionsPanel.tsx        |  5 +-
 .../components/panels/SecurityPanel.tsx       |  6 +--
 .../components/panels/SubscriptionsPanel.tsx  |  2 +-
 6 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/BridgeMainDrawer.tsx b/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/BridgeMainDrawer.tsx
index cb3a469b36..d2f741aae4 100644
--- a/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/BridgeMainDrawer.tsx
+++ b/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/BridgeMainDrawer.tsx
@@ -61,7 +61,14 @@ const BridgeMainDrawer: FC<BridgeMainDrawerProps> = ({
 
   return (
     <>
-      <Drawer closeOnOverlayClick={false} size={'lg'} isOpen={isOpen} placement="right" onClose={onClose}>
+      <Drawer
+        variant={'hivemq'}
+        closeOnOverlayClick={false}
+        size={'lg'}
+        isOpen={isOpen}
+        placement="right"
+        onClose={onClose}
+      >
         <DrawerOverlay />
         <DrawerContent aria-label={t('bridge.drawer.label') as string}>
           <DrawerCloseButton />
diff --git a/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/ConnectionPanel.tsx b/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/ConnectionPanel.tsx
index cd817c5f94..6d665d3880 100644
--- a/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/ConnectionPanel.tsx
+++ b/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/ConnectionPanel.tsx
@@ -27,31 +27,28 @@ const ConnectionPanel: FC<BridgePanelType> = ({ form }) => {
   } = form
 
   return (
-    <Flex flexDirection={'column'} w={'80%'} m={'auto'} mt={1} mb={4} maxW={600} gap={4}>
-      <Flex>
-        <Box flexGrow={1}>
-          <FormControl isInvalid={!!errors.host} isRequired>
-            <FormLabel htmlFor="host">{t('bridge.connection.host')}</FormLabel>
-            <Input id="host" type="text" required {...register('host', getRulesForProperty($Bridge.properties.host))} />
-            <FormErrorMessage>{errors.host && errors.host.message}</FormErrorMessage>
-          </FormControl>
-        </Box>
-        <Box flexGrow={0}>
-          <FormControl isInvalid={!!errors.port} isRequired>
-            <FormLabel htmlFor="port">{t('bridge.connection.port')}</FormLabel>
-            <NumberInput allowMouseWheel focusInputOnChange w={'100px'} id="port" step={1} min={1}>
-              <NumberInputField {...register('port', getRulesForProperty($Bridge.properties.port))} />
-              <NumberInputStepper>
-                <NumberIncrementStepper />
-                <NumberDecrementStepper />
-              </NumberInputStepper>
-            </NumberInput>
-            <FormErrorMessage>{errors.port && errors.port.message}</FormErrorMessage>
-          </FormControl>
-        </Box>
-      </Flex>
+    <Flex flexDirection={'column'} m={'auto'} mt={4} mb={4} gap={4}>
+      <FormControl variant={'hivemq'} flex={1} display={'flex'} gap={4} as={'fieldset'}>
+        <FormControl isInvalid={!!errors.host} isRequired>
+          <FormLabel htmlFor="host">{t('bridge.connection.host')}</FormLabel>
+          <Input id="host" type="text" required {...register('host', getRulesForProperty($Bridge.properties.host))} />
+          <FormErrorMessage>{errors.host && errors.host.message}</FormErrorMessage>
+        </FormControl>
+
+        <FormControl isInvalid={!!errors.port} isRequired w={'unset'}>
+          <FormLabel htmlFor="port">{t('bridge.connection.port')}</FormLabel>
+          <NumberInput allowMouseWheel focusInputOnChange w={'100px'} id="port" step={1} min={1}>
+            <NumberInputField {...register('port', getRulesForProperty($Bridge.properties.port))} />
+            <NumberInputStepper>
+              <NumberIncrementStepper />
+              <NumberDecrementStepper />
+            </NumberInputStepper>
+          </NumberInput>
+          <FormErrorMessage>{errors.port && errors.port.message}</FormErrorMessage>
+        </FormControl>
+      </FormControl>
 
-      <Flex gap={2}>
+      <FormControl variant={'hivemq'} flexGrow={1} display={'flex'} gap={4} as={'fieldset'}>
         <Box flexGrow={1}>
           <FormControl isInvalid={!!errors.username}>
             <FormLabel htmlFor="username">{t('bridge.connection.username')}</FormLabel>
@@ -76,7 +73,7 @@ const ConnectionPanel: FC<BridgePanelType> = ({ form }) => {
             <FormErrorMessage>{errors.password && errors.password.message}</FormErrorMessage>
           </FormControl>
         </Box>
-      </Flex>
+      </FormControl>
       {/*<Flex justifyContent={'flex-end'}>*/}
       {/*  <Button isDisabled size={'sm'} variant="outline" leftIcon={<FaConnectdevelop />}>*/}
       {/*    {t('bridge.connection.testConnection')}*/}
diff --git a/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/NamePanel.tsx b/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/NamePanel.tsx
index 722ac5f420..4b77c4ec1e 100644
--- a/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/NamePanel.tsx
+++ b/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/NamePanel.tsx
@@ -17,7 +17,7 @@ const NamePanel: FC<BridgePanelType> = ({ form, isNewBridge = false }) => {
   const getRulesForProperty = useValidationRules()
 
   return (
-    <FormControl isInvalid={!!validationErrors.id} isRequired={isNewBridge}>
+    <FormControl as={'fieldset'} variant={'hivemq'} isInvalid={!!validationErrors.id} isRequired={isNewBridge}>
       <FormLabel htmlFor="name">{t('bridge.options.id.label')}</FormLabel>
       <Input
         isDisabled={!isNewBridge}
diff --git a/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/OptionsPanel.tsx b/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/OptionsPanel.tsx
index 6a268e5148..98121393ad 100644
--- a/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/OptionsPanel.tsx
+++ b/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/OptionsPanel.tsx
@@ -2,7 +2,6 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   Checkbox,
-  Flex,
   FormControl,
   FormErrorMessage,
   FormHelperText,
@@ -27,7 +26,7 @@ const OptionsPanel: FC<BridgePanelType> = ({ form }) => {
   const getRulesForProperty = useValidationRules()
 
   return (
-    <Flex flexDirection={'column'} gap={4}>
+    <FormControl variant={'hivemq'} flexGrow={1} display={'flex'} flexDirection={'column'} gap={4} as={'fieldset'}>
       <FormControl isInvalid={!!errors.cleanStart}>
         <Checkbox defaultChecked {...register('cleanStart')}>
           {t('bridge.options.cleanStart.label')}
@@ -110,7 +109,7 @@ const OptionsPanel: FC<BridgePanelType> = ({ form }) => {
         <FormHelperText> {t('bridge.options.clientid.helper')}</FormHelperText>
         <FormErrorMessage>{errors.clientId && errors.clientId.message}</FormErrorMessage>
       </FormControl>
-    </Flex>
+    </FormControl>
   )
 }
 
diff --git a/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/SecurityPanel.tsx b/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/SecurityPanel.tsx
index 0020784035..ec72fa2da1 100644
--- a/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/SecurityPanel.tsx
+++ b/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/SecurityPanel.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Flex, FormControl, FormHelperText, FormLabel, Input, HStack, Switch } from '@chakra-ui/react'
+import { FormControl, FormHelperText, FormLabel, Input, HStack, Switch } from '@chakra-ui/react'
 import { Select } from 'chakra-react-select'
 import { useTranslation } from 'react-i18next'
 import { Controller, useWatch } from 'react-hook-form'
@@ -21,7 +21,7 @@ const SecurityPanel: FC<BridgePanelType> = ({ form }) => {
   const isTlsEnabled = useWatch({ name: 'tlsConfiguration.enabled', control: form.control })
 
   return (
-    <Flex flexDirection={'column'} mt={8} maxW={600} gap={4}>
+    <FormControl variant={'hivemq'} flexGrow={1} display={'flex'} flexDirection={'column'} gap={4} as={'fieldset'}>
       <FormControl>
         <FormLabel htmlFor={'tlsConfiguration.enabled'}>{t('bridge.security.enabled.label')}</FormLabel>
         <Switch
@@ -188,7 +188,7 @@ const SecurityPanel: FC<BridgePanelType> = ({ form }) => {
           </FormControl>
         </>
       )}
-    </Flex>
+    </FormControl>
   )
 }
 
diff --git a/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/SubscriptionsPanel.tsx b/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/SubscriptionsPanel.tsx
index 5d0ea9055a..01d7017773 100644
--- a/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/SubscriptionsPanel.tsx
+++ b/hivemq-edge/src/frontend/src/modules/Bridges/components/panels/SubscriptionsPanel.tsx
@@ -51,7 +51,7 @@ const SubscriptionsPanel: FC<BridgeSubscriptionsProps> = ({ form, type }) => {
       <VStack spacing={4} align="stretch" mt={4}>
         {fields.map((field, index) => {
           return (
-            <Card shadow="md" borderWidth="1px" flexDirection={'column'} key={field.id}>
+            <Card shadow="xs" flexDirection={'column'} key={field.id}>
               <HStack>
                 <CardBody>
                   <Flex gap={4}>

From 158e2856a3d6396a68cee6f7c745b91dd39de250 Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Mon, 11 Sep 2023 17:19:18 +0100
Subject: [PATCH 04/24] refactor(93): add type

---
 .../src/frontend/src/modules/ProtocolAdapters/types.ts        | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/types.ts b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/types.ts
index dfef6afff0..a0b900f72b 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/types.ts
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/types.ts
@@ -1,5 +1,5 @@
 import { UseFormReturn, FieldValues } from 'react-hook-form'
-import { ProtocolAdapter } from '@/api/__generated__'
+import { Adapter, ProtocolAdapter } from '@/api/__generated__'
 
 export type SubscriptionType = 'remoteSubscriptions' | 'localSubscriptions'
 
@@ -22,3 +22,5 @@ export interface UIGroup {
   title: string
   children: string[]
 }
+
+export type AdapterConfig = NonNullable<Adapter['config']>

From 47871d069042936dec43f6c94b2f0b16623288dd Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Mon, 11 Sep 2023 17:21:03 +0100
Subject: [PATCH 05/24] feat(93): add custom validation handler - add
 validation for unique identifier - add tests

---
 .../drawers/AdapterInstanceDrawer.spec.cy.tsx |  5 +-
 .../drawers/AdapterInstanceDrawer.tsx         |  6 +-
 .../utils/validation-utils.spec.ts            | 94 +++++++++++++++++++
 .../utils/validation-utils.ts                 | 36 +++++++
 4 files changed, 137 insertions(+), 4 deletions(-)
 create mode 100644 hivemq-edge/src/frontend/src/modules/ProtocolAdapters/utils/validation-utils.spec.ts
 create mode 100644 hivemq-edge/src/frontend/src/modules/ProtocolAdapters/utils/validation-utils.ts

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.spec.cy.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.spec.cy.tsx
index 7ca135f8fc..de56e632e4 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.spec.cy.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.spec.cy.tsx
@@ -1,8 +1,9 @@
 /// <reference types="cypress" />
 
-import AdapterInstanceDrawer from './AdapterInstanceDrawer.tsx'
-import { mockAdapter, mockProtocolAdapter } from '@/api/hooks/useProtocolAdapters/__handlers__'
 import { MOCK_ADAPTER_ID } from '@/__test-utils__/mocks.ts'
+import { mockAdapter, mockProtocolAdapter } from '@/api/hooks/useProtocolAdapters/__handlers__'
+
+import AdapterInstanceDrawer from './AdapterInstanceDrawer.tsx'
 
 describe('AdapterInstanceDrawer', () => {
   beforeEach(() => {
diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
index f221be79d6..2b0f2b9cab 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
@@ -26,8 +26,9 @@ import { useListProtocolAdapters } from '@/api/hooks/useProtocolAdapters/useList
 import ButtonCTA from '@/components/Chakra/ButtonCTA.tsx'
 import LoaderSpinner from '@/components/Chakra/LoaderSpinner.tsx'
 
-import { ObjectFieldTemplate } from '@/modules/ProtocolAdapters/components/adapters/ObjectFieldTemplate.tsx'
-import useGetUiSchema from '@/modules/ProtocolAdapters/hooks/useGetUISchema.ts'
+import { ObjectFieldTemplate } from '../../components/adapters/ObjectFieldTemplate.tsx'
+import useGetUiSchema from '../../hooks/useGetUISchema.ts'
+import { customValidate } from '../../utils/validation-utils.ts'
 
 interface AdapterInstanceDrawerProps {
   adapterType?: string
@@ -102,6 +103,7 @@ const AdapterInstanceDrawer: FC<AdapterInstanceDrawerProps> = ({
                     showErrorList={'bottom'}
                     onError={(errors) => console.log('XXXXXXX', errors)}
                     formData={defaultValues}
+                    customValidate={customValidate(schema, allAdapters, t)}
                   />
                 </>
               )}
diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/utils/validation-utils.spec.ts b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/utils/validation-utils.spec.ts
new file mode 100644
index 0000000000..581b2ac00f
--- /dev/null
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/utils/validation-utils.spec.ts
@@ -0,0 +1,94 @@
+import { describe, expect, vi } from 'vitest'
+import { FormValidation, RJSFSchema, UiSchema } from '@rjsf/utils'
+
+import { customValidate } from './validation-utils.ts'
+import { Adapter } from '@/api/__generated__'
+import { mockAdapter } from '@/api/hooks/useProtocolAdapters/__handlers__'
+import { MOCK_ADAPTER_ID } from '@/__test-utils__/mocks.ts'
+import { AdapterConfig } from '@/modules/ProtocolAdapters/types.ts'
+
+describe('customValidate()', () => {
+  it('should detect duplication of id', () => {
+    const mockT = (e: string): string => e
+    const mockJSONSchemaId: RJSFSchema = {
+      properties: {
+        id: {
+          format: 'identifier',
+        },
+      },
+    }
+    const mockUiSchemaId: UiSchema<AdapterConfig> = {
+      id: {
+        'ui:disabled': false,
+      },
+    }
+    const mockExistingAdapters: Adapter[] | undefined = [mockAdapter]
+
+    const addError = vi.fn()
+    const errors: FormValidation<AdapterConfig> = {
+      addError: () => undefined,
+      // @ts-ignore
+      id: { addError },
+    }
+
+    // @ts-ignore
+    const customValidateFn = customValidate(mockJSONSchemaId, mockExistingAdapters, mockT)
+    expect(customValidateFn).toBeTypeOf('function')
+    customValidateFn({ id: MOCK_ADAPTER_ID }, errors, mockUiSchemaId)
+    expect(addError).toHaveBeenCalledWith('validation.jsonSchema.identifier.unique')
+  })
+
+  it('should NOT check for id', () => {
+    const mockT = (e: string): string => e
+    const mockJSONSchemaId: RJSFSchema = {
+      properties: {},
+    }
+    const mockUiSchemaId: UiSchema<AdapterConfig> = {
+      id: {},
+    }
+    const mockExistingAdapters: Adapter[] | undefined = [mockAdapter]
+
+    const addError = vi.fn()
+    const errors: FormValidation<AdapterConfig> = {
+      addError: () => undefined,
+      // @ts-ignore
+      id: { addError },
+    }
+
+    // @ts-ignore
+    const customValidateFn = customValidate(mockJSONSchemaId, mockExistingAdapters, mockT)
+    expect(customValidateFn).toBeTypeOf('function')
+    customValidateFn({ id: MOCK_ADAPTER_ID }, errors, mockUiSchemaId)
+    expect(addError).not.toHaveBeenCalledWith('validation.jsonSchema.identifier.unique')
+  })
+
+  it('should NOT throw error when id is unique', () => {
+    const mockT = (e: string): string => e
+    const mockJSONSchemaId: RJSFSchema = {
+      properties: {
+        id: {
+          format: 'identifier',
+        },
+      },
+    }
+    const mockUiSchemaId: UiSchema<AdapterConfig> = {
+      id: {
+        'ui:disabled': false,
+      },
+    }
+    const mockExistingAdapters: Adapter[] | undefined = []
+
+    const addError = vi.fn()
+    const errors: FormValidation<AdapterConfig> = {
+      addError: () => undefined,
+      // @ts-ignore
+      id: { addError },
+    }
+
+    // @ts-ignore
+    const customValidateFn = customValidate(mockJSONSchemaId, mockExistingAdapters, mockT)
+    expect(customValidateFn).toBeTypeOf('function')
+    customValidateFn({ id: MOCK_ADAPTER_ID }, errors, mockUiSchemaId)
+    expect(addError).not.toHaveBeenCalled()
+  })
+})
diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/utils/validation-utils.ts b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/utils/validation-utils.ts
new file mode 100644
index 0000000000..fc0c71b850
--- /dev/null
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/utils/validation-utils.ts
@@ -0,0 +1,36 @@
+import { FormValidation, UiSchema, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils'
+import { Adapter } from '@/api/__generated__'
+import { TFunction } from 'i18next'
+
+import { AdapterConfig } from '@/modules/ProtocolAdapters/types.ts'
+
+/**
+ *
+ * @param jsonSchema
+ * @param existingAdapters
+ * @param t
+ *
+ * The custom validation only exposes the form data and the UISchema configuration, NOT the JSONSchema.
+ * This is potentially a gap when trying to create custom validation rules.
+ *
+ * TODO[#93] Principle: custom validation should be based
+ *   - first on conditions from the JSONSchema
+ *   - second on conditions from the uiSchema
+ *   - then (last stand) on conditions from the property name (i.e. formData)
+ *
+ */
+export const customValidate =
+  (jsonSchema: RJSFSchema, existingAdapters: Adapter[] | undefined, t: TFunction) =>
+  (formData: Record<string, unknown>, errors: FormValidation<AdapterConfig>, uiSchema?: UiSchema<AdapterConfig>) => {
+    // Check for uniqueness of `id` ONLY if `format` = `identifier` and not `ui:disabled`
+
+    if (
+      !uiSchema?.id?.['ui:disabled'] &&
+      (jsonSchema.properties?.['id'] as StrictRJSFSchema)?.format === 'identifier'
+    ) {
+      if (existingAdapters?.map((e) => e.id).includes(formData.id as string)) {
+        errors.id?.addError(t('validation.jsonSchema.identifier.unique'))
+      }
+    }
+    return errors
+  }

From 5a67880744aa5c8762de06327b0970f2ef02e93a Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Mon, 11 Sep 2023 17:21:14 +0100
Subject: [PATCH 06/24] feat(93): update translations

---
 hivemq-edge/src/frontend/src/locales/en/translation.json | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/hivemq-edge/src/frontend/src/locales/en/translation.json b/hivemq-edge/src/frontend/src/locales/en/translation.json
index ccd10a0995..1ca77a9c50 100755
--- a/hivemq-edge/src/frontend/src/locales/en/translation.json
+++ b/hivemq-edge/src/frontend/src/locales/en/translation.json
@@ -579,7 +579,12 @@
     "maxLength": "No more than {{ count }} characters allowed for the property",
     "minimum": "Should be at least {{ count }}",
     "maximum": "Should not be more than {{ count }}",
-    "pattern": "Should match the regular expression {{ pattern }}"
+    "pattern": "Should match the regular expression {{ pattern }}",
+    "jsonSchema": {
+      "identifier": {
+        "unique": "must be unique"
+      }
+    }
   },
   "metrics": {
     "protocolAdapters": {

From 8f9ba608e27d24d1c35a6aea214d9c888c7e685a Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Mon, 11 Sep 2023 17:43:41 +0100
Subject: [PATCH 07/24] test(93): fix test

---
 .../components/drawers/AdapterInstanceDrawer.spec.cy.tsx       | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.spec.cy.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.spec.cy.tsx
index de56e632e4..e89d52081c 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.spec.cy.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.spec.cy.tsx
@@ -1,6 +1,5 @@
 /// <reference types="cypress" />
 
-import { MOCK_ADAPTER_ID } from '@/__test-utils__/mocks.ts'
 import { mockAdapter, mockProtocolAdapter } from '@/api/hooks/useProtocolAdapters/__handlers__'
 
 import AdapterInstanceDrawer from './AdapterInstanceDrawer.tsx'
@@ -52,7 +51,7 @@ describe('AdapterInstanceDrawer', () => {
       />
     )
 
-    cy.get('#root_id').type(MOCK_ADAPTER_ID)
+    cy.get('#root_id').type('a new identifier')
 
     cy.get('button[type="submit"]').click()
     cy.get('@onSubmit').should('have.been.called')

From 37f0d91986be0bb46f7df550c41f8d97008e3472 Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Mon, 11 Sep 2023 17:57:09 +0100
Subject: [PATCH 08/24] feat(93): add custom field template to handle error and
 help text

---
 .../drawers/AdapterInstanceDrawer.tsx         |  3 +-
 .../templates/CustomFieldTemplate.tsx         | 76 +++++++++++++++++++
 2 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/CustomFieldTemplate.tsx

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
index 2b0f2b9cab..df44c537c7 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
@@ -26,6 +26,7 @@ import { useListProtocolAdapters } from '@/api/hooks/useProtocolAdapters/useList
 import ButtonCTA from '@/components/Chakra/ButtonCTA.tsx'
 import LoaderSpinner from '@/components/Chakra/LoaderSpinner.tsx'
 
+import CustomFieldTemplate from '../templates/CustomFieldTemplate.tsx'
 import { ObjectFieldTemplate } from '../../components/adapters/ObjectFieldTemplate.tsx'
 import useGetUiSchema from '../../hooks/useGetUISchema.ts'
 import { customValidate } from '../../utils/validation-utils.ts'
@@ -96,7 +97,7 @@ const AdapterInstanceDrawer: FC<AdapterInstanceDrawerProps> = ({
                     id="adapter-instance-form"
                     schema={schema}
                     uiSchema={uiSchema}
-                    templates={{ ObjectFieldTemplate }}
+                    templates={{ ObjectFieldTemplate, FieldTemplate: CustomFieldTemplate }}
                     liveValidate
                     onSubmit={onValidate}
                     validator={validator}
diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/CustomFieldTemplate.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/CustomFieldTemplate.tsx
new file mode 100644
index 0000000000..9e93545257
--- /dev/null
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/CustomFieldTemplate.tsx
@@ -0,0 +1,76 @@
+import { FC } from 'react'
+import { FieldTemplateProps, getTemplate, getUiOptions } from '@rjsf/utils'
+import { FormControl, FormErrorMessage, FormHelperText } from '@chakra-ui/react'
+
+/**
+ * This is a redesign of the original ChakraUI template for fields.
+ * See https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/chakra-ui/src/FieldTemplate/FieldTemplate.tsx
+ *
+ * @changelog:
+ *  - use FormErrorMessage and FormHelperText appropriately
+ *  - both help text and error message are mutually exclusive
+ */
+const CustomFieldTemplate: FC<FieldTemplateProps> = (props) => {
+  const {
+    id,
+    children,
+    classNames,
+    style,
+    disabled,
+    displayLabel,
+    hidden,
+    label,
+    onDropPropertyClick,
+    onKeyChange,
+    readonly,
+    registry,
+    required,
+    rawErrors = [],
+    errors,
+    help,
+    description,
+    rawDescription,
+    schema,
+    uiSchema,
+  } = props
+
+  const uiOptions = getUiOptions(uiSchema)
+  const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate'>(
+    'WrapIfAdditionalTemplate',
+    registry,
+    uiOptions
+  )
+
+  if (hidden) {
+    return <div style={{ display: 'none' }}>{children}</div>
+  }
+
+  return (
+    <WrapIfAdditionalTemplate
+      classNames={classNames}
+      style={style}
+      disabled={disabled}
+      id={id}
+      label={label}
+      onDropPropertyClick={onDropPropertyClick}
+      onKeyChange={onKeyChange}
+      readonly={readonly}
+      required={required}
+      schema={schema}
+      uiSchema={uiSchema}
+      registry={registry}
+    >
+      <FormControl isRequired={required} isInvalid={rawErrors && rawErrors.length > 0}>
+        {children}
+        {rawErrors && rawErrors.length > 0 ? (
+          <FormErrorMessage mt={0}>{errors}</FormErrorMessage>
+        ) : (
+          <FormHelperText>{displayLabel && rawDescription ? description : null}</FormHelperText>
+        )}
+        {help}
+      </FormControl>
+    </WrapIfAdditionalTemplate>
+  )
+}
+
+export default CustomFieldTemplate

From 2a1e401c33b421002c4c22cdb590c972d99e41f8 Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Mon, 11 Sep 2023 21:57:53 +0100
Subject: [PATCH 09/24] refactor(93): refactor template to allow testing of key
 logic - add tests

---
 .../drawers/AdapterInstanceDrawer.tsx         |  2 +-
 .../templates/CustomFieldTemplate.tsx         | 23 ++------
 .../RenderFieldTemplate.spec.cy.tsx           | 58 +++++++++++++++++++
 .../__internals/RenderFieldTemplate.tsx       | 26 +++++++++
 4 files changed, 89 insertions(+), 20 deletions(-)
 create mode 100644 hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.spec.cy.tsx
 create mode 100644 hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.tsx

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
index df44c537c7..7676fd5a7d 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
@@ -26,7 +26,7 @@ import { useListProtocolAdapters } from '@/api/hooks/useProtocolAdapters/useList
 import ButtonCTA from '@/components/Chakra/ButtonCTA.tsx'
 import LoaderSpinner from '@/components/Chakra/LoaderSpinner.tsx'
 
-import CustomFieldTemplate from '../templates/CustomFieldTemplate.tsx'
+import { CustomFieldTemplate } from '../templates/CustomFieldTemplate.tsx'
 import { ObjectFieldTemplate } from '../../components/adapters/ObjectFieldTemplate.tsx'
 import useGetUiSchema from '../../hooks/useGetUISchema.ts'
 import { customValidate } from '../../utils/validation-utils.ts'
diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/CustomFieldTemplate.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/CustomFieldTemplate.tsx
index 9e93545257..d310d456ff 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/CustomFieldTemplate.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/CustomFieldTemplate.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react'
 import { FieldTemplateProps, getTemplate, getUiOptions } from '@rjsf/utils'
-import { FormControl, FormErrorMessage, FormHelperText } from '@chakra-ui/react'
+
+import { RenderFieldTemplate } from './__internals/RenderFieldTemplate.tsx'
 
 /**
  * This is a redesign of the original ChakraUI template for fields.
@@ -10,14 +11,13 @@ import { FormControl, FormErrorMessage, FormHelperText } from '@chakra-ui/react'
  *  - use FormErrorMessage and FormHelperText appropriately
  *  - both help text and error message are mutually exclusive
  */
-const CustomFieldTemplate: FC<FieldTemplateProps> = (props) => {
+export const CustomFieldTemplate: FC<FieldTemplateProps> = (props) => {
   const {
     id,
     children,
     classNames,
     style,
     disabled,
-    displayLabel,
     hidden,
     label,
     onDropPropertyClick,
@@ -25,11 +25,6 @@ const CustomFieldTemplate: FC<FieldTemplateProps> = (props) => {
     readonly,
     registry,
     required,
-    rawErrors = [],
-    errors,
-    help,
-    description,
-    rawDescription,
     schema,
     uiSchema,
   } = props
@@ -60,17 +55,7 @@ const CustomFieldTemplate: FC<FieldTemplateProps> = (props) => {
       uiSchema={uiSchema}
       registry={registry}
     >
-      <FormControl isRequired={required} isInvalid={rawErrors && rawErrors.length > 0}>
-        {children}
-        {rawErrors && rawErrors.length > 0 ? (
-          <FormErrorMessage mt={0}>{errors}</FormErrorMessage>
-        ) : (
-          <FormHelperText>{displayLabel && rawDescription ? description : null}</FormHelperText>
-        )}
-        {help}
-      </FormControl>
+      <RenderFieldTemplate {...props} children={children} />
     </WrapIfAdditionalTemplate>
   )
 }
-
-export default CustomFieldTemplate
diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.spec.cy.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.spec.cy.tsx
new file mode 100644
index 0000000000..f176117c52
--- /dev/null
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.spec.cy.tsx
@@ -0,0 +1,58 @@
+/// <reference types="cypress" />
+
+import { FieldTemplateProps } from '@rjsf/utils'
+import { RenderFieldTemplate } from './RenderFieldTemplate.tsx'
+import { FormLabel, Input, Text } from '@chakra-ui/react'
+
+const MOCK_TEXT = 'You will have to type something'
+const MOCK_ERROR = 'This is an error message'
+const makeMockProps = (props: Partial<FieldTemplateProps>): Partial<FieldTemplateProps> => {
+  return {
+    ...props,
+    children: (
+      <>
+        <FormLabel>{props.label}</FormLabel>
+        <Input value={'a dumb value'} />
+      </>
+    ),
+    errors: <Text>{props.rawErrors?.join(', ')}</Text>,
+    description: <div>{props.rawDescription}</div>,
+  }
+}
+
+const ff: Partial<FieldTemplateProps> = {
+  id: 'my-id',
+  label: 'A dummy form control',
+  readonly: false,
+  rawErrors: [MOCK_ERROR],
+  rawDescription: MOCK_TEXT,
+  displayLabel: true,
+}
+
+describe('CustomFieldTemplate', () => {
+  beforeEach(() => {
+    cy.viewport(800, 900)
+  })
+
+  it('should render the error message ', () => {
+    const { children, ...rest } = makeMockProps(ff)
+    cy.injectAxe()
+
+    // @ts-ignore
+    cy.mountWithProviders(<RenderFieldTemplate {...rest} children={children} />)
+    cy.get('[role="group"]').should('not.contain.text', MOCK_TEXT)
+    cy.get('[role="group"]').should('contain.text', MOCK_ERROR)
+    cy.checkAccessibility()
+  })
+
+  it('should render the helper text', () => {
+    const { children, ...rest } = makeMockProps({ ...ff, rawErrors: undefined })
+    cy.injectAxe()
+
+    // @ts-ignore
+    cy.mountWithProviders(<RenderFieldTemplate {...rest} children={children} />)
+    cy.get('[role="group"]').should('contain.text', MOCK_TEXT)
+    cy.get('[role="group"]').should('not.contain.text', MOCK_ERROR)
+    cy.checkAccessibility()
+  })
+})
diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.tsx
new file mode 100644
index 0000000000..99b826a0bf
--- /dev/null
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.tsx
@@ -0,0 +1,26 @@
+import { FC } from 'react'
+import { FieldTemplateProps } from '@rjsf/utils'
+import { FormControl, FormErrorMessage, FormHelperText } from '@chakra-ui/react'
+
+export const RenderFieldTemplate: FC<FieldTemplateProps> = ({
+  required,
+  rawErrors,
+  children,
+  errors,
+  displayLabel,
+  rawDescription,
+  description,
+  help,
+}) => {
+  return (
+    <FormControl isRequired={required} isInvalid={rawErrors && rawErrors.length > 0}>
+      {children}
+      {rawErrors && rawErrors.length > 0 ? (
+        <FormErrorMessage>{errors}</FormErrorMessage>
+      ) : (
+        <FormHelperText>{displayLabel && rawDescription ? description : null}</FormHelperText>
+      )}
+      {help}
+    </FormControl>
+  )
+}

From 6184f7bfaf9a76f3bb8b2c7bfe8a3d3fa5c4e560 Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Mon, 11 Sep 2023 21:59:23 +0100
Subject: [PATCH 10/24] feat(93): add custom theme for FormErrorMessage

---
 .../src/modules/Theme/styles/FormErrorMessage.ts   | 14 ++++++++++++++
 .../src/frontend/src/modules/Theme/themeHiveMQ.ts  |  2 ++
 2 files changed, 16 insertions(+)
 create mode 100644 hivemq-edge/src/frontend/src/modules/Theme/styles/FormErrorMessage.ts

diff --git a/hivemq-edge/src/frontend/src/modules/Theme/styles/FormErrorMessage.ts b/hivemq-edge/src/frontend/src/modules/Theme/styles/FormErrorMessage.ts
new file mode 100644
index 0000000000..609dc8c05d
--- /dev/null
+++ b/hivemq-edge/src/frontend/src/modules/Theme/styles/FormErrorMessage.ts
@@ -0,0 +1,14 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+import { formErrorAnatomy } from '@chakra-ui/anatomy'
+
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(formErrorAnatomy.keys)
+
+const hivemq = definePartsStyle({
+  text: {
+    color: 'red.700',
+  },
+})
+
+export const formErrorMessageTheme = defineMultiStyleConfig({
+  baseStyle: hivemq,
+})
diff --git a/hivemq-edge/src/frontend/src/modules/Theme/themeHiveMQ.ts b/hivemq-edge/src/frontend/src/modules/Theme/themeHiveMQ.ts
index 30a0161515..2fdb9d5038 100644
--- a/hivemq-edge/src/frontend/src/modules/Theme/themeHiveMQ.ts
+++ b/hivemq-edge/src/frontend/src/modules/Theme/themeHiveMQ.ts
@@ -7,6 +7,7 @@ import '@fontsource/roboto/700.css'
 import { statTheme } from './styles/Stat'
 import { drawerTheme } from './styles/Drawer.ts'
 import { formControlTheme } from './styles/FormControl.ts'
+import { formErrorMessageTheme } from './styles/FormErrorMessage.ts'
 
 const Button = defineStyleConfig({
   defaultProps: {
@@ -99,5 +100,6 @@ export const themeHiveMQ = extendTheme({
     Stat: statTheme,
     Drawer: drawerTheme,
     Form: formControlTheme,
+    FormErrorMessage: formErrorMessageTheme,
   },
 })

From fba46665615c0261d3f64bf92c2ae083c49e4eee Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Mon, 11 Sep 2023 22:02:39 +0100
Subject: [PATCH 11/24] fix(93): disable contrast test until scheme sorted out

---
 .../templates/__internals/RenderFieldTemplate.spec.cy.tsx  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.spec.cy.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.spec.cy.tsx
index f176117c52..ce73c09589 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.spec.cy.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.spec.cy.tsx
@@ -42,7 +42,12 @@ describe('CustomFieldTemplate', () => {
     cy.mountWithProviders(<RenderFieldTemplate {...rest} children={children} />)
     cy.get('[role="group"]').should('not.contain.text', MOCK_TEXT)
     cy.get('[role="group"]').should('contain.text', MOCK_ERROR)
-    cy.checkAccessibility()
+    cy.checkAccessibility(undefined, {
+      rules: {
+        // TODO[93] Need to change the default colour of the error message. See https://discord.com/channels/660863154703695893/1150880181356089374
+        'color-contrast': { enabled: false },
+      },
+    })
   })
 
   it('should render the helper text', () => {

From 2e64f6dfae9fe3a762fdb400865e15ebaf96c612 Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Mon, 11 Sep 2023 22:06:57 +0100
Subject: [PATCH 12/24] chore(93): restructure component files

---
 .../components/drawers/AdapterInstanceDrawer.tsx                | 2 +-
 .../components/{adapters => templates}/ObjectFieldTemplate.tsx  | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/{adapters => templates}/ObjectFieldTemplate.tsx (100%)

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
index 7676fd5a7d..b04ecd17e5 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
@@ -27,7 +27,7 @@ import ButtonCTA from '@/components/Chakra/ButtonCTA.tsx'
 import LoaderSpinner from '@/components/Chakra/LoaderSpinner.tsx'
 
 import { CustomFieldTemplate } from '../templates/CustomFieldTemplate.tsx'
-import { ObjectFieldTemplate } from '../../components/adapters/ObjectFieldTemplate.tsx'
+import { ObjectFieldTemplate } from '../../components/templates/ObjectFieldTemplate.tsx'
 import useGetUiSchema from '../../hooks/useGetUISchema.ts'
 import { customValidate } from '../../utils/validation-utils.ts'
 
diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/adapters/ObjectFieldTemplate.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
similarity index 100%
rename from hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/adapters/ObjectFieldTemplate.tsx
rename to hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx

From f52bd545662ba1586eb0a27c376a9b2494969c5f Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Tue, 12 Sep 2023 12:49:48 +0100
Subject: [PATCH 13/24] refactor(93): change wrapper for non-described elements

---
 .../templates/__internals/RenderFieldTemplate.tsx         | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.tsx
index 99b826a0bf..f221b7dfdf 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { FieldTemplateProps } from '@rjsf/utils'
-import { FormControl, FormErrorMessage, FormHelperText } from '@chakra-ui/react'
+import { Box, FormControl, FormHelperText } from '@chakra-ui/react'
 
 export const RenderFieldTemplate: FC<FieldTemplateProps> = ({
   required,
@@ -11,7 +11,13 @@ export const RenderFieldTemplate: FC<FieldTemplateProps> = ({
   rawDescription,
   description,
   help,
+  label,
 }) => {
+  if (!displayLabel && !rawDescription && !label) {
+    // This is assuming that no label/description means a mainly structuring element
+    return <Box>{children}</Box>
+  }
+
   return (
     <FormControl isRequired={required} isInvalid={rawErrors && rawErrors.length > 0}>
       {children}

From 704e1bc681a92ec716d3dc87db5f6041b7c31084 Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Tue, 12 Sep 2023 12:50:10 +0100
Subject: [PATCH 14/24] fix(93): change variant for FormControl

---
 .../components/templates/__internals/RenderFieldTemplate.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.tsx
index f221b7dfdf..923d192094 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.tsx
@@ -19,7 +19,7 @@ export const RenderFieldTemplate: FC<FieldTemplateProps> = ({
   }
 
   return (
-    <FormControl isRequired={required} isInvalid={rawErrors && rawErrors.length > 0}>
+    <FormControl variant={'hivemq'} isRequired={required} isInvalid={rawErrors && rawErrors.length > 0}>
       {children}
       {rawErrors && rawErrors.length > 0 ? (
         <FormErrorMessage>{errors}</FormErrorMessage>

From aaa126ec0318e53fc3819dd880b3fddccca1deef Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Tue, 12 Sep 2023 12:50:31 +0100
Subject: [PATCH 15/24] fix(93): fix duplicated Error Message wrapper

---
 .../components/templates/__internals/RenderFieldTemplate.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.tsx
index 923d192094..a0c72e13b8 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/__internals/RenderFieldTemplate.tsx
@@ -22,7 +22,7 @@ export const RenderFieldTemplate: FC<FieldTemplateProps> = ({
     <FormControl variant={'hivemq'} isRequired={required} isInvalid={rawErrors && rawErrors.length > 0}>
       {children}
       {rawErrors && rawErrors.length > 0 ? (
-        <FormErrorMessage>{errors}</FormErrorMessage>
+        errors
       ) : (
         <FormHelperText>{displayLabel && rawDescription ? description : null}</FormHelperText>
       )}

From dfbf3484aa92c0e7e114bcc4c6d3870d10884f62 Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Tue, 12 Sep 2023 12:52:26 +0100
Subject: [PATCH 16/24] fix(93): fix wrapper for elements

---
 .../templates/ObjectFieldTemplate.tsx         | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
index 8beae8a649..8099d9c443 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
@@ -7,7 +7,7 @@ import {
   StrictRJSFSchema,
   titleId,
 } from '@rjsf/utils'
-import { Card, CardBody, CardHeader, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react'
+import { Box, Card, CardBody, CardHeader, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react'
 import { UIGroup } from '@/modules/ProtocolAdapters/types.ts'
 
 export const ObjectFieldTemplate = <
@@ -41,9 +41,9 @@ export const ObjectFieldTemplate = <
         </CardHeader>
         <CardBody p={2}>
           {properties.map((prop) => (
-            <div className="x0" key={prop.content.key}>
+            <Box _notLast={{ marginBottom: '24px' }} className="x0" key={prop.content.key}>
               {prop.content}
-            </div>
+            </Box>
           ))}
         </CardBody>
       </Card>
@@ -70,13 +70,13 @@ export const ObjectFieldTemplate = <
             if (!filteredProps.length) return null
             return (
               <TabPanel key={e.id} p={0} pt={'1px'} mb={6}>
-                <Card variant={'outline'} borderTopStyle={'none'} p={2}>
-                  <CardBody p={2}>
-                    {filteredProps.map((prop) => (
-                      <div key={prop.content.key}>{prop.content}</div>
-                    ))}
-                  </CardBody>
-                </Card>
+                <>
+                  {filteredProps.map((prop) => (
+                    <Box _first={{ marginTop: '24px' }} _notLast={{ marginBottom: '24px' }} key={prop.content.key}>
+                      {prop.content}
+                    </Box>
+                  ))}
+                </>
               </TabPanel>
             )
           })}
@@ -84,7 +84,7 @@ export const ObjectFieldTemplate = <
         {properties
           .filter((e) => !allGrouped.includes(e.name))
           .map((prop) => (
-            <div key={prop.content.key}>{prop.content}</div>
+            <Box key={prop.content.key}>{prop.content}</Box>
           ))}
       </Tabs>
     </>

From 69c733f5c65ca67286fbd23a3ecfeb44558e3ae5 Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Tue, 12 Sep 2023 12:54:21 +0100
Subject: [PATCH 17/24] fix(93): fix tabs

---
 .../components/templates/ObjectFieldTemplate.tsx          | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
index 8099d9c443..5835b8bc62 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
@@ -55,12 +55,16 @@ export const ObjectFieldTemplate = <
 
   return (
     <>
-      <Tabs variant="enclosed">
+      <Tabs>
         <TabList>
           {groups.map((e) => {
             const filteredProps = properties.filter((p) => e.children.includes(p.name))
             if (!filteredProps.length) return null
-            return <Tab key={e.id}>{e.title}</Tab>
+            return (
+              <Tab fontSize="md" fontWeight={'semibold'} key={e.id}>
+                {e.title}
+              </Tab>
+            )
           })}
         </TabList>
 

From 7ab6d43bbdd2f6200391030ab5c1e113a90bc273 Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Tue, 12 Sep 2023 12:54:45 +0100
Subject: [PATCH 18/24] fix(93): fix variant for drawer

---
 .../components/drawers/AdapterInstanceDrawer.tsx         | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
index b04ecd17e5..e2f4340924 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
@@ -72,7 +72,14 @@ const AdapterInstanceDrawer: FC<AdapterInstanceDrawerProps> = ({
   }
 
   return (
-    <Drawer closeOnOverlayClick={false} size={'lg'} isOpen={isOpen} placement="right" onClose={onClose}>
+    <Drawer
+      variant={'hivemq'}
+      closeOnOverlayClick={false}
+      size={'lg'}
+      isOpen={isOpen}
+      placement="right"
+      onClose={onClose}
+    >
       <DrawerOverlay />
       <DrawerContent aria-label={t('protocolAdapter.drawer.label') as string}>
         {!schema && <LoaderSpinner />}

From 664524f3dfce494cf91943a436612e2cf5aef633 Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Tue, 12 Sep 2023 12:55:10 +0100
Subject: [PATCH 19/24] fix(93): fix style for internal title

---
 .../src/frontend/src/modules/Theme/styles/FormControl.ts      | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/hivemq-edge/src/frontend/src/modules/Theme/styles/FormControl.ts b/hivemq-edge/src/frontend/src/modules/Theme/styles/FormControl.ts
index b241e8b410..e6d2a3780f 100644
--- a/hivemq-edge/src/frontend/src/modules/Theme/styles/FormControl.ts
+++ b/hivemq-edge/src/frontend/src/modules/Theme/styles/FormControl.ts
@@ -9,6 +9,10 @@ const hivemq = definePartsStyle({
     padding: 4,
     borderRadius: 6,
     borderWidth: 1,
+
+    h5: {
+      fontSize: 'lg',
+    },
   },
 })
 

From 8d680060180fee6dee9b64721689a68e9e58b812 Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Tue, 12 Sep 2023 13:55:36 +0100
Subject: [PATCH 20/24] refactor(93): rename `tag` for the tabbing schema

---
 .../templates/ObjectFieldTemplate.tsx         | 16 ++++++-------
 .../ProtocolAdapters/hooks/useGetUISchema.ts  | 24 ++++++++++++-------
 .../src/modules/ProtocolAdapters/types.ts     |  4 ++--
 3 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
index 5835b8bc62..81543b334e 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
@@ -8,7 +8,7 @@ import {
   titleId,
 } from '@rjsf/utils'
 import { Box, Card, CardBody, CardHeader, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react'
-import { UIGroup } from '@/modules/ProtocolAdapters/types.ts'
+import { UITab } from '@/modules/ProtocolAdapters/types.ts'
 
 export const ObjectFieldTemplate = <
   T = never,
@@ -22,8 +22,8 @@ export const ObjectFieldTemplate = <
   const TitleFieldTemplate = getTemplate<'TitleFieldTemplate', T, S, F>('TitleFieldTemplate', registry, options)
 
   // @ts-ignore Type will need to be corrected
-  const { groups }: { groups: UIGroup[] } = options
-  if (!groups) {
+  const { tabs }: { tabs: UITab[] } = options
+  if (!tabs) {
     return (
       <Card m={2}>
         <CardHeader p={2}>
@@ -51,14 +51,14 @@ export const ObjectFieldTemplate = <
   }
 
   // TODO[NVL] Not efficient. Build a cluster
-  const allGrouped = groups.map((e) => e.children).flat()
+  const allGrouped = tabs.map((e) => e.properties).flat()
 
   return (
     <>
       <Tabs>
         <TabList>
-          {groups.map((e) => {
-            const filteredProps = properties.filter((p) => e.children.includes(p.name))
+          {tabs.map((e) => {
+            const filteredProps = properties.filter((p) => e.properties.includes(p.name))
             if (!filteredProps.length) return null
             return (
               <Tab fontSize="md" fontWeight={'semibold'} key={e.id}>
@@ -69,8 +69,8 @@ export const ObjectFieldTemplate = <
         </TabList>
 
         <TabPanels>
-          {groups.map((e) => {
-            const filteredProps = properties.filter((p) => e.children.includes(p.name))
+          {tabs.map((e) => {
+            const filteredProps = properties.filter((p) => e.properties.includes(p.name))
             if (!filteredProps.length) return null
             return (
               <TabPanel key={e.id} p={0} pt={'1px'} mb={6}>
diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/hooks/useGetUISchema.ts b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/hooks/useGetUISchema.ts
index 46ba2a3ee2..778829c04f 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/hooks/useGetUISchema.ts
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/hooks/useGetUISchema.ts
@@ -1,40 +1,46 @@
-import { UIGroup } from '@/modules/ProtocolAdapters/types.ts'
+import { UITab } from '@/modules/ProtocolAdapters/types.ts'
 import { useTranslation } from 'react-i18next'
 import { UiSchema } from '@rjsf/utils'
 
 const useGetUiSchema = (isNewAdapter = true) => {
   const { t } = useTranslation()
 
-  const groups: UIGroup[] = [
+  const tabs: UITab[] = [
     {
       id: 'coreFields',
       title: t('protocolAdapter.uiSchema.groups.coreFields'),
-      children: ['id', 'port', 'host', 'uri', 'url', 'pollingIntervalMillis'],
+      properties: ['id', 'port', 'host', 'uri', 'url', 'pollingIntervalMillis'],
     },
     {
       id: 'subFields',
       title: 'Subscription',
-      children: ['subscriptions'],
+      properties: ['subscriptions'],
     },
     {
       id: 'security',
       title: t('protocolAdapter.uiSchema.groups.security'),
-      children: ['security', 'tls'],
+      properties: ['security', 'tls'],
     },
     {
       id: 'publishing',
       title: t('protocolAdapter.uiSchema.groups.publishing'),
-      children: ['maxPollingErrorsBeforeRemoval', 'publishChangedDataOnly', 'publishingInterval', 'destination', 'qos'],
+      properties: [
+        'maxPollingErrorsBeforeRemoval',
+        'publishChangedDataOnly',
+        'publishingInterval',
+        'destination',
+        'qos',
+      ],
     },
     {
       id: 'authentication',
       title: t('protocolAdapter.uiSchema.groups.authentication'),
-      children: ['auth'],
+      properties: ['auth'],
     },
     {
       id: 'http',
       title: t('protocolAdapter.uiSchema.groups.http'),
-      children: [
+      properties: [
         'httpRequestMethod',
         'httpRequestBodyContentType',
         'httpRequestBody',
@@ -46,7 +52,7 @@ const useGetUiSchema = (isNewAdapter = true) => {
   ]
 
   const uiSchema: UiSchema = {
-    'ui:groups': groups,
+    'ui:tabs': tabs,
 
     'ui:submitButtonOptions': {
       norender: true,
diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/types.ts b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/types.ts
index a0b900f72b..dd8280e17b 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/types.ts
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/types.ts
@@ -17,10 +17,10 @@ export interface ProtocolFacetType {
   filter?: { key: keyof ProtocolAdapter; value: string } | null
 }
 
-export interface UIGroup {
+export interface UITab {
   id: string
   title: string
-  children: string[]
+  properties: string[]
 }
 
 export type AdapterConfig = NonNullable<Adapter['config']>

From eac46ff58e33933efb106145fb0a415742aa9e6e Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Tue, 12 Sep 2023 15:23:44 +0100
Subject: [PATCH 21/24] refactor(93): removing the card from the regular
 elements

---
 .../templates/ObjectFieldTemplate.tsx         | 42 +++++++++----------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
index 81543b334e..aee2989925 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
@@ -7,7 +7,7 @@ import {
   StrictRJSFSchema,
   titleId,
 } from '@rjsf/utils'
-import { Box, Card, CardBody, CardHeader, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react'
+import { Box, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react'
 import { UITab } from '@/modules/ProtocolAdapters/types.ts'
 
 export const ObjectFieldTemplate = <
@@ -25,28 +25,24 @@ export const ObjectFieldTemplate = <
   const { tabs }: { tabs: UITab[] } = options
   if (!tabs) {
     return (
-      <Card m={2}>
-        <CardHeader p={2}>
-          {title && (
-            <TitleFieldTemplate
-              id={titleId<T>(idSchema)}
-              title={title}
-              required={required}
-              schema={schema}
-              uiSchema={uiSchema}
-              registry={registry}
-            />
-          )}
-          {description}
-        </CardHeader>
-        <CardBody p={2}>
-          {properties.map((prop) => (
-            <Box _notLast={{ marginBottom: '24px' }} className="x0" key={prop.content.key}>
-              {prop.content}
-            </Box>
-          ))}
-        </CardBody>
-      </Card>
+      <Box>
+        {title && (
+          <TitleFieldTemplate
+            id={titleId<T>(idSchema)}
+            title={title}
+            required={required}
+            schema={schema}
+            uiSchema={uiSchema}
+            registry={registry}
+          />
+        )}
+        {description}
+        {properties.map((prop) => (
+          <Box _notLast={{ marginBottom: '24px' }} className="x0" key={prop.content.key}>
+            {prop.content}
+          </Box>
+        ))}
+      </Box>
     )
   }
 

From c46ee50fb4ce5d06949246d12a5d5939d10849a6 Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Tue, 12 Sep 2023 15:23:58 +0100
Subject: [PATCH 22/24] fix(93): fixing tabs style

---
 .../components/templates/ObjectFieldTemplate.tsx                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
index aee2989925..e94b7ecd5a 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
@@ -57,7 +57,7 @@ export const ObjectFieldTemplate = <
             const filteredProps = properties.filter((p) => e.properties.includes(p.name))
             if (!filteredProps.length) return null
             return (
-              <Tab fontSize="md" fontWeight={'semibold'} key={e.id}>
+              <Tab fontSize="md" key={e.id}>
                 {e.title}
               </Tab>
             )

From 6bce1285e30e3a0a1b05e93c167d9f3ae4070d77 Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Tue, 12 Sep 2023 15:45:55 +0100
Subject: [PATCH 23/24] refactor(93): rename component

---
 .../components/drawers/AdapterInstanceDrawer.tsx              | 4 ++--
 .../templates/{CustomFieldTemplate.tsx => FieldTemplate.tsx}  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/{CustomFieldTemplate.tsx => FieldTemplate.tsx} (95%)

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
index e2f4340924..211686c008 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
@@ -26,7 +26,7 @@ import { useListProtocolAdapters } from '@/api/hooks/useProtocolAdapters/useList
 import ButtonCTA from '@/components/Chakra/ButtonCTA.tsx'
 import LoaderSpinner from '@/components/Chakra/LoaderSpinner.tsx'
 
-import { CustomFieldTemplate } from '../templates/CustomFieldTemplate.tsx'
+import { FieldTemplate } from '../templates/FieldTemplate.tsx'
 import { ObjectFieldTemplate } from '../../components/templates/ObjectFieldTemplate.tsx'
 import useGetUiSchema from '../../hooks/useGetUISchema.ts'
 import { customValidate } from '../../utils/validation-utils.ts'
@@ -104,7 +104,7 @@ const AdapterInstanceDrawer: FC<AdapterInstanceDrawerProps> = ({
                     id="adapter-instance-form"
                     schema={schema}
                     uiSchema={uiSchema}
-                    templates={{ ObjectFieldTemplate, FieldTemplate: CustomFieldTemplate }}
+                    templates={{ ObjectFieldTemplate, FieldTemplate }}
                     liveValidate
                     onSubmit={onValidate}
                     validator={validator}
diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/CustomFieldTemplate.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/FieldTemplate.tsx
similarity index 95%
rename from hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/CustomFieldTemplate.tsx
rename to hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/FieldTemplate.tsx
index d310d456ff..82cd27279a 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/CustomFieldTemplate.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/FieldTemplate.tsx
@@ -11,7 +11,7 @@ import { RenderFieldTemplate } from './__internals/RenderFieldTemplate.tsx'
  *  - use FormErrorMessage and FormHelperText appropriately
  *  - both help text and error message are mutually exclusive
  */
-export const CustomFieldTemplate: FC<FieldTemplateProps> = (props) => {
+export const FieldTemplate: FC<FieldTemplateProps> = (props) => {
   const {
     id,
     children,

From c52f2d8ae96b301c76adc90b175d5c52fe7cf132 Mon Sep 17 00:00:00 2001
From: Nicolas Van Labeke <nicolas.vanlabeke@hivemq.com>
Date: Tue, 12 Sep 2023 15:46:18 +0100
Subject: [PATCH 24/24] fix(93): fix style of untabbed components

---
 .../components/templates/ObjectFieldTemplate.tsx              | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
index e94b7ecd5a..8d278a6978 100644
--- a/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
+++ b/hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/templates/ObjectFieldTemplate.tsx
@@ -84,7 +84,9 @@ export const ObjectFieldTemplate = <
         {properties
           .filter((e) => !allGrouped.includes(e.name))
           .map((prop) => (
-            <Box key={prop.content.key}>{prop.content}</Box>
+            <Box _first={{ marginTop: '24px' }} _notLast={{ marginBottom: '24px' }} key={prop.content.key}>
+              {prop.content}
+            </Box>
           ))}
       </Tabs>
     </>