Merge pull request #105 from hivemq/fix/93/jsonschema-form-theme

feat(93): Improve rendering of the JSONSchema form and match Adapter and Bridge
hivemq · Sep 13, 2023 · 4ba6f84 · 4ba6f84
2 parents bcc84fe + c52f2d8
commit 4ba6f84
Show file tree

Hide file tree

Showing 25 changed files with 552 additions and 161 deletions.
diff --git 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/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": {

diff --git 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/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}>

diff --git a/...dge/src/frontend/src/modules/ProtocolAdapters/components/adapters/ObjectFieldTemplate.tsx b/...dge/src/frontend/src/modules/ProtocolAdapters/components/adapters/ObjectFieldTemplate.tsx
diff --git a/...rontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.spec.cy.tsx b/...rontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.spec.cy.tsx
@@ -1,8 +1,8 @@
 /// <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 AdapterInstanceDrawer from './AdapterInstanceDrawer.tsx'
 
 describe('AdapterInstanceDrawer', () => {
   beforeEach(() => {
@@ -51,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')

diff --git a/...ge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx b/...ge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx
@@ -26,8 +26,10 @@ 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 { 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'
 
 interface AdapterInstanceDrawerProps {
   adapterType?: string
@@ -70,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 />}
@@ -95,13 +104,14 @@ const AdapterInstanceDrawer: FC<AdapterInstanceDrawerProps> = ({
                     id="adapter-instance-form"
                     schema={schema}
                     uiSchema={uiSchema}
-                    templates={{ ObjectFieldTemplate }}
+                    templates={{ ObjectFieldTemplate, FieldTemplate }}
                     liveValidate
                     onSubmit={onValidate}
                     validator={validator}
                     showErrorList={'bottom'}
                     onError={(errors) => console.log('XXXXXXX', errors)}
                     formData={defaultValues}
+                    customValidate={customValidate(schema, allAdapters, t)}
                   />
                 </>
               )}