refactor(27766): refactor error rendering

- change layout of error items
- add link for tabs and field

hivemq-edge/src/frontend/src/components/rjsf/Templates/ErrorListTemplate.tsx

@@ -1,20 +1,87 @@
-import { ErrorListProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils'
-import { Alert, AlertTitle, List, ListIcon, ListItem } from '@chakra-ui/react'
+import { FC, useMemo } from 'react'
+import { ErrorListProps, RJSFSchema, TranslatableString, UiSchema } from '@rjsf/utils'
+import {
+  Alert,
+  AlertTitle,
+  Box,
+  Button,
+  HStack,
+  Icon,
+  IconButton,
+  List,
+  ListIcon,
+  ListItem,
+  Text,
+} from '@chakra-ui/react'
 import { WarningIcon } from '@chakra-ui/icons'
+import { IoLink } from 'react-icons/io5'
+import { RJSFValidationError } from '@rjsf/utils/src/types.ts'
+
+import { AdapterConfig, UITab } from '@/modules/ProtocolAdapters/types.ts'
+import { ChakraRJSFormContext } from '@/components/rjsf/Form/types.ts'
+import { useTranslation } from 'react-i18next'
+
+interface RJSFValidationErrorRef extends RJSFValidationError {
+  tab?: UITab
+}
+
+export const ErrorListTemplate: FC<ErrorListProps<unknown, RJSFSchema, ChakraRJSFormContext>> = (props) => {
+  const { t } = useTranslation('components')
+  const { uiSchema, errors, registry, formContext } = props
+
+  const linkedErrors = useMemo(() => {
+    return errors.map<RJSFValidationErrorRef>((error) => {
+      const { 'ui:tabs': tabs } = uiSchema as UiSchema<AdapterConfig>
+      const { property } = error
+      if (!tabs) return error
+
+      const root = property?.split('.')[1] || property
+
+      let inTab: UITab | null = null
+      for (const tab of tabs) {
+        const { properties } = tab as UITab
+        if (properties && root && properties.includes(root)) inTab = tab
+      }
+
+      if (inTab) return { ...error, tab: inTab }
+      return error
+    })
+  }, [errors, uiSchema])
 
-export const ErrorListTemplate = <T = unknown, S extends StrictRJSFSchema = RJSFSchema>({
-  errors,
-  registry,
-}: ErrorListProps<T, S>) => {
   const { translateString } = registry
+
   return (
     <Alert flexDirection="column" alignItems="flex-start" gap={3} status="error" mt={4}>
       <AlertTitle>{translateString(TranslatableString.ErrorsLabel)}</AlertTitle>
       <List>
-        {errors.map((error, i) => (
+        {linkedErrors.map((error, i) => (
           <ListItem key={i}>
-            <ListIcon as={WarningIcon} color="red.500" />
-            {error.stack}
+            <HStack>
+              <ListIcon as={WarningIcon} color="red.500" />
+              <Box>
+                {error.tab && (
+                  <>
+                    <Button
+                      colorScheme="red"
+                      variant="link"
+                      color="red.700"
+                      onClick={() => formContext?.focusOnError?.(error)}
+                    >
+                      {error.tab?.title}
+                    </Button>{' '}
+                  </>
+                )}
+                <Text as="span">{error.stack}</Text>{' '}
+                <IconButton
+                  icon={<Icon as={IoLink} />}
+                  variant="link"
+                  aria-label={t('rjsf.ErrorListTemplate.focusOnError.aria-label')}
+                  color="red.700"
+                  size="sm"
+                  onClick={() => formContext?.focusOnError?.(error)}
+                />
+              </Box>
+            </HStack>
           </ListItem>
         ))}
       </List>

hivemq-edge/src/frontend/src/locales/en/components.json

@@ -102,6 +102,11 @@
         "expanded_false": "Expand Item"
       }
     },
+    "ErrorListTemplate": {
+      "focusOnError": {
+        "aria-label": "Jump to error"
+      }
+    },
     "batchUpload": {
       "button": "Upload",
       "modal": {