fix(28441): fix handling of promise on mapping forms

hivemq-edge/src/frontend/src/modules/Mappings/components/MappingForm.tsx

@@ -26,9 +26,10 @@ const MappingForm: FC<MappingFormProps> = ({ adapterId, adapterType, useManager,
 
   const onFormSubmit = useCallback(
     (data: IChangeEvent<unknown>) => {
-      onUpdateCollection(data.formData)
+      const promise = onUpdateCollection(data.formData)
+      promise?.then(onSubmit)
     },
-    [onUpdateCollection]
+    [onSubmit, onUpdateCollection]
   )
 
   if (!context.schema) return <ErrorMessage message={t('protocolAdapter.export.error.noSchema')} />

hivemq-edge/src/frontend/src/modules/Mappings/hooks/useNorthboundMappingManager.ts

@@ -5,14 +5,17 @@ import { type NorthboundMappingList } from '@/api/__generated__'
 import { useListNorthboundMappings } from '@/api/hooks/useProtocolAdapters/useListNorthboundMappings.ts'
 import { useUpdateNorthboundMappings } from '@/api/hooks/useProtocolAdapters/useUpdateNorthboundMappings.ts'
 
-import { ManagerContextType, MappingManagerType } from '@/modules/Mappings/types.ts'
 import { northboundMappingListSchema } from '@/api/schemas/northbound.json-schema.ts'
 import { northboundMappingListUISchema } from '@/api/schemas/northbound.ui-schema.ts'
+import { DEFAULT_TOAST_OPTION } from '@/hooks/useEdgeToast/toast-utils.ts'
+import { ManagerContextType, MappingManagerType } from '@/modules/Mappings/types.ts'
 
 export const useNorthboundMappingManager = (adapterId: string): MappingManagerType<NorthboundMappingList> => {
   const { t } = useTranslation()
-  const toast = useToast()
-
+  const toast = useToast({
+    duration: DEFAULT_TOAST_OPTION.duration,
+    isClosable: DEFAULT_TOAST_OPTION.isClosable,
+  })
   const { data, isError, isLoading, error } = useListNorthboundMappings(adapterId)
 
   const updateCollectionMutator = useUpdateNorthboundMappings()
@@ -33,11 +36,10 @@ export const useNorthboundMappingManager = (adapterId: string): MappingManagerTy
   })
 
   const onUpdateCollection = (tags: NorthboundMappingList) => {
-    if (!adapterId) return
-    toast.promise(
-      updateCollectionMutator.mutateAsync({ adapterId: adapterId, requestBody: tags }),
-      formatToast('updateCollection')
-    )
+    if (!adapterId) return undefined
+    const promise = updateCollectionMutator.mutateAsync({ adapterId: adapterId, requestBody: tags })
+    toast.promise(promise, formatToast('updateCollection'))
+    return promise
   }
 
   const context: ManagerContextType = {
@@ -52,6 +54,7 @@ export const useNorthboundMappingManager = (adapterId: string): MappingManagerTy
     // The CRUD operations
     data: data,
     onUpdateCollection,
+    onClose: () => toast.closeAll(),
     // The state (as in ReactQuery)
     isLoading: isLoading,
     isError: isError,

hivemq-edge/src/frontend/src/modules/Mappings/hooks/useSouthboundMappingManager.ts

@@ -8,10 +8,14 @@ import { useUpdateSouthboundMappings } from '@/api/hooks/useProtocolAdapters/use
 import { ManagerContextType, MappingManagerType } from '@/modules/Mappings/types.ts'
 import { southboundMappingListSchema } from '@/api/schemas/southbound.json-schema.ts'
 import { southboundMappingListUISchema } from '@/api/schemas/southbound.ui-schema.ts'
+import { DEFAULT_TOAST_OPTION } from '@/hooks/useEdgeToast/toast-utils.ts'
 
 export const useSouthboundMappingManager = (adapterId: string): MappingManagerType<SouthboundMappingList> => {
   const { t } = useTranslation()
-  const toast = useToast()
+  const toast = useToast({
+    duration: DEFAULT_TOAST_OPTION.duration,
+    isClosable: DEFAULT_TOAST_OPTION.isClosable,
+  })
 
   const { data, isError, isLoading, error } = useListSouthboundMappings(adapterId)
 
@@ -34,10 +38,9 @@ export const useSouthboundMappingManager = (adapterId: string): MappingManagerTy
 
   const onUpdateCollection = (tags: SouthboundMappingList) => {
     if (!adapterId) return
-    toast.promise(
-      updateCollectionMutator.mutateAsync({ adapterId: adapterId, requestBody: tags }),
-      formatToast('updateCollection')
-    )
+    const promise = updateCollectionMutator.mutateAsync({ adapterId: adapterId, requestBody: tags })
+    toast.promise(promise, formatToast('updateCollection'))
+    return promise
   }
 
   const context: ManagerContextType = {
@@ -52,6 +55,7 @@ export const useSouthboundMappingManager = (adapterId: string): MappingManagerTy
     // The CRUD operations
     data: data,
     onUpdateCollection,
+    onClose: () => toast.closeAll(),
     // The state (as in ReactQuery)
     isLoading: isLoading,
     isError: isError,

hivemq-edge/src/frontend/src/modules/Mappings/types.ts

@@ -17,7 +17,8 @@ export enum MappingType {
 export interface MappingManagerType<T = any> {
   context: ManagerContextType
   data: T | undefined
-  onUpdateCollection: (tags: T) => void
+  onUpdateCollection: (tags: T) => Promise<unknown> | undefined
+  onClose: () => void
   isLoading: boolean
   isError: boolean
   isPending: boolean