refactor(28015): refactor mapping editor

hivemq · Nov 26, 2024 · a74875b · a74875b
1 parent facd5cb
commit a74875b
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 36 deletions.
diff --git a/hivemq-edge/src/frontend/src/components/rjsf/Fields/MqttTransformationField.tsx b/hivemq-edge/src/frontend/src/components/rjsf/Fields/MqttTransformationField.tsx
@@ -6,8 +6,11 @@ import ListMappings from '@/components/rjsf/MqttTransformation/components/ListMa
 import MappingDrawer from '@/components/rjsf/MqttTransformation/components/MappingDrawer.tsx'
 import { AdapterContext } from '@/modules/ProtocolAdapters/types.ts'
 import { OutwardMapping } from '@/modules/Mappings/types.ts'
+import { useTranslation } from 'react-i18next'
+import ErrorMessage from '@/components/ErrorMessage.tsx'
 
 export const MqttTransformationField: FC<FieldProps<OutwardMapping[], RJSFSchema, AdapterContext>> = (props) => {
+  const { t } = useTranslation('components')
   const [selectedItem, setSelectedItem] = useState<number | undefined>(undefined)
   const [subsData, setSubsData] = useState<OutwardMapping[] | undefined>(props.formData)
 
@@ -59,7 +62,6 @@ export const MqttTransformationField: FC<FieldProps<OutwardMapping[], RJSFSchema
     })
   }
 
-  if (!subsData) return null
   const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', OutwardMapping[]>(
     'ArrayFieldDescriptionTemplate',
     props.registry,
@@ -73,6 +75,9 @@ export const MqttTransformationField: FC<FieldProps<OutwardMapping[], RJSFSchema
   )
   const uiOptions = getUiOptions(props.uiSchema)
 
+  if (!subsData || !adapterId || !adapterType)
+    return <ErrorMessage message={t('rjsf.MqttTransformationField.error.internalError')} status="error" />
+
   return (
     <>
       <ArrayFieldTitleTemplate

diff --git a/...e/src/frontend/src/components/rjsf/MqttTransformation/components/DataModelDestination.tsx b/...e/src/frontend/src/components/rjsf/MqttTransformation/components/DataModelDestination.tsx
@@ -3,21 +3,23 @@ import type { JSONSchema7 } from 'json-schema'
 import { useTranslation } from 'react-i18next'
 import { Card, CardBody, CardHeader, CardProps, Heading, HStack } from '@chakra-ui/react'
 
+import { useGetWritingSchema } from '@/api/hooks/useProtocolAdapters/useGetWritingSchema.ts'
 import ErrorMessage from '@/components/ErrorMessage.tsx'
 import LoaderSpinner from '@/components/Chakra/LoaderSpinner.tsx'
 import JsonSchemaBrowser from '@/components/rjsf/MqttTransformation/JsonSchemaBrowser.tsx'
 import ValidationStatus from '@/components/rjsf/MqttTransformation/components/mapping/ValidationStatus.tsx'
 import { MappingValidation } from '@/modules/Mappings/types.ts'
-import { useGetTagSchema } from '@/api/hooks/_deprecated/useGetTagSchema.ts'
 
 interface DataModelDestinationProps extends CardProps {
   topic: string
+  adapterType: string
+  adapterId: string
   validation: MappingValidation
 }
 
-const DataModelDestination: FC<DataModelDestinationProps> = ({ topic, validation, ...props }) => {
+const DataModelDestination: FC<DataModelDestinationProps> = ({ topic, adapterId, validation, ...props }) => {
   const { t } = useTranslation()
-  const { data, isLoading, isError, error } = useGetTagSchema(topic)
+  const { data, isLoading, isError, error } = useGetWritingSchema(adapterId, topic)
 
   return (
     <Card {...props} size="sm">

diff --git a/...-edge/src/frontend/src/components/rjsf/MqttTransformation/components/DataModelSources.tsx b/...-edge/src/frontend/src/components/rjsf/MqttTransformation/components/DataModelSources.tsx
@@ -16,7 +16,6 @@ interface DataModelSourcesProps extends CardProps {
 
 const DataModelSources: FC<DataModelSourcesProps> = ({ topic, ...props }) => {
   const { t } = useTranslation()
-
   const { schema, isLoading, isError, error } = useSamplingForTopic(topic)
 
   const structuredSchema = useMemo(() => {

diff --git a/...mq-edge/src/frontend/src/components/rjsf/MqttTransformation/components/EntitySelector.tsx b/...mq-edge/src/frontend/src/components/rjsf/MqttTransformation/components/EntitySelector.tsx
@@ -5,8 +5,8 @@ import { FormControl, FormLabel } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
 
 interface SourceSelectorProps {
-  adapterType?: string
-  adapterId?: string
+  adapterType: string
+  adapterId: string
   value: string | undefined
   onChange: (v: string | readonly string[] | null) => void
 }
@@ -30,12 +30,7 @@ export const SelectDestinationTag: FC<SourceSelectorProps> = ({ adapterId, value
       <FormLabel htmlFor={`react-select-${SelectEntityType.TAG}-input`}>
         {t('rjsf.MqttTransformationField.destination.selector.formLabel')}
       </FormLabel>
-      <SelectTag
-        adapterId={adapterId as string}
-        id="mapping-select-destination"
-        onChange={onChange}
-        value={value || null}
-      />
+      <SelectTag adapterId={adapterId} id="mapping-select-destination" onChange={onChange} value={value || null} />
     </FormControl>
   )
 }
diff --git a/...-edge/src/frontend/src/components/rjsf/MqttTransformation/components/MappingContainer.tsx b/...-edge/src/frontend/src/components/rjsf/MqttTransformation/components/MappingContainer.tsx
@@ -1,6 +1,6 @@
 import { FC, useCallback, useState } from 'react'
 import { FaRightFromBracket } from 'react-icons/fa6'
-import { HStack, Icon, Stack, VStack } from '@chakra-ui/react'
+import { Card, CardBody, HStack, Icon, Stack, VStack } from '@chakra-ui/react'
 
 import { JsonNode } from '@/api/__generated__'
 import DataModelSources from '@/components/rjsf/MqttTransformation/components/DataModelSources.tsx'
@@ -11,6 +11,8 @@ import {
 } from '@/components/rjsf/MqttTransformation/components/EntitySelector.tsx'
 import { FlatJSONSchema7 } from '@/components/rjsf/MqttTransformation/utils/json-schema.utils.ts'
 import { OutwardMapping } from '@/modules/Mappings/types.ts'
+import ErrorMessage from '@/components/ErrorMessage.tsx'
+import { useTranslation } from 'react-i18next'
 
 export enum MappingStrategy {
   EXACT = 'EXACT',
@@ -20,14 +22,15 @@ export enum MappingStrategy {
 
 interface SubscriptionContainerProps {
   item: OutwardMapping
-  adapterType?: string
-  adapterId?: string
+  adapterType: string
+  adapterId: string
   onClose: () => void
   onSubmit: (newItem: OutwardMapping) => void
   onChange: (id: keyof OutwardMapping, v: JsonNode | string | string[] | null) => void
 }
 
 const MappingContainer: FC<SubscriptionContainerProps> = ({ adapterId, adapterType, item, onChange }) => {
+  const { t } = useTranslation('components')
   const [strategy] = useState<MappingStrategy>(MappingStrategy.TYPED)
 
   const onSchemaReadyHandler = useCallback(
@@ -41,8 +44,20 @@ const MappingContainer: FC<SubscriptionContainerProps> = ({ adapterId, adapterTy
     <VStack alignItems="stretch" gap={4}>
       <Stack gap={2} flexDirection="row">
         <VStack flex={1} alignItems="stretch" maxW="40vw">
-          <SelectSourceTopics value={item.mqttTopicFilter} onChange={(v) => onChange('mqttTopicFilter', v)} />
-          <DataModelSources flex={1} topic={item.mqttTopicFilter} minH={250} />
+          <SelectSourceTopics
+            adapterId={adapterId}
+            adapterType={adapterType}
+            value={item.mqttTopicFilter}
+            onChange={(v) => onChange('mqttTopicFilter', v)}
+          />
+          {!item.mqttTopicFilter && (
+            <Card size="sm" h="25vh">
+              <CardBody pt="50px">
+                <ErrorMessage message={t('rjsf.MqttTransformationField.sources.prompt')} status="info" />
+              </CardBody>
+            </Card>
+          )}
+          {item.mqttTopicFilter && <DataModelSources flex={1} topic={item.mqttTopicFilter} minH={250} />}
         </VStack>
         <VStack justifyContent="center">
           <HStack height={38}>
@@ -56,19 +71,31 @@ const MappingContainer: FC<SubscriptionContainerProps> = ({ adapterId, adapterTy
             value={item.tag}
             onChange={(v) => onChange('tag', v)}
           />
-          <MappingEditor
-            flex={1}
-            topic={item.tag}
-            mapping={item.fieldMapping}
-            showTransformation={strategy === MappingStrategy.TRANSFORMED}
-            onChange={(mappings) => {
-              if (!mappings) {
-                return
-              }
-              onChange('fieldMapping', mappings)
-            }}
-            onSchemaReady={onSchemaReadyHandler}
-          />
+          {!item.tag && (
+            <Card size="sm" h="25vh">
+              <CardBody pt="50px">
+                <ErrorMessage message={t('rjsf.MqttTransformationField.destination.prompt')} status="info" />
+              </CardBody>
+            </Card>
+          )}
+
+          {item.tag && (
+            <MappingEditor
+              flex={1}
+              adapterId={adapterId}
+              adapterType={adapterType}
+              topic={item.tag}
+              mapping={item.fieldMapping}
+              showTransformation={strategy === MappingStrategy.TRANSFORMED}
+              onChange={(mappings) => {
+                if (!mappings) {
+                  return
+                }
+                onChange('fieldMapping', mappings)
+              }}
+              onSchemaReady={onSchemaReadyHandler}
+            />
+          )}
         </VStack>
       </Stack>
     </VStack>

diff --git a/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/components/MappingDrawer.tsx b/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/components/MappingDrawer.tsx
@@ -19,8 +19,8 @@ import { OutwardMapping } from '@/modules/Mappings/types.ts'
 import { useTranslation } from 'react-i18next'
 
 interface MappingDrawerProps {
-  adapterId?: string
-  adapterType?: string
+  adapterId: string
+  adapterType: string
   item: OutwardMapping
   onSubmit: (newItem: OutwardMapping) => void
   onChange: (id: keyof OutwardMapping, v: JsonNode | string | string[] | null) => void

diff --git a/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/components/MappingEditor.tsx b/hivemq-edge/src/frontend/src/components/rjsf/MqttTransformation/components/MappingEditor.tsx
@@ -3,16 +3,18 @@ import { useTranslation } from 'react-i18next'
 import { Button, Card, CardBody, CardHeader, CardProps, Heading, HStack, List, ListItem } from '@chakra-ui/react'
 import { LuWand } from 'react-icons/lu'
 
+import { useGetWritingSchema } from '@/api/hooks/useProtocolAdapters/useGetWritingSchema.ts'
 import ErrorMessage from '@/components/ErrorMessage.tsx'
 import LoaderSpinner from '@/components/Chakra/LoaderSpinner.tsx'
 import { filterSupportedProperties } from '@/components/rjsf/MqttTransformation/utils/data-type.utils.ts'
 import MappingInstruction from '@/components/rjsf/MqttTransformation/components/mapping/MappingInstruction.tsx'
 import { FlatJSONSchema7, getPropertyListFrom } from '@/components/rjsf/MqttTransformation/utils/json-schema.utils.ts'
 import { FieldMapping } from '@/modules/Mappings/types.ts'
-import { useGetTagSchema } from '@/api/hooks/_deprecated/useGetTagSchema.ts'
 
 interface MappingEditorProps extends Omit<CardProps, 'onChange'> {
-  topic: string | undefined
+  topic: string
+  adapterType: string
+  adapterId: string
   showTransformation?: boolean
   mapping?: FieldMapping[]
   onChange?: (v: FieldMapping[] | undefined) => void
@@ -25,10 +27,11 @@ const MappingEditor: FC<MappingEditorProps> = ({
   mapping,
   onChange,
   onSchemaReady,
+  adapterId,
   ...props
 }) => {
   const { t } = useTranslation('components')
-  const { data, isLoading, isError, error, isSuccess } = useGetTagSchema(topic)
+  const { data, isLoading, isError, error, isSuccess } = useGetWritingSchema(adapterId, topic)
 
   const properties = useMemo(() => {
     const allProperties = data ? getPropertyListFrom(data) : []

diff --git a/hivemq-edge/src/frontend/src/locales/en/components.json b/hivemq-edge/src/frontend/src/locales/en/components.json
@@ -218,6 +218,9 @@
       }
     },
     "MqttTransformationField": {
+      "error": {
+        "internalError": "The form cannot be created"
+      },
       "tabs": {
         "list": "List of mappings",
         "editor": "Mapping Editor"