diff --git a/hivemq-edge/src/frontend/src/modules/Mappings/components/MappingForm.tsx b/hivemq-edge/src/frontend/src/modules/Mappings/components/MappingForm.tsx index 4f56e64af5..58deea0cc4 100644 --- a/hivemq-edge/src/frontend/src/modules/Mappings/components/MappingForm.tsx +++ b/hivemq-edge/src/frontend/src/modules/Mappings/components/MappingForm.tsx @@ -26,9 +26,10 @@ const MappingForm: FC = ({ adapterId, adapterType, useManager, const onFormSubmit = useCallback( (data: IChangeEvent) => { - onUpdateCollection(data.formData) + const promise = onUpdateCollection(data.formData) + promise?.then(onSubmit) }, - [onUpdateCollection] + [onSubmit, onUpdateCollection] ) if (!context.schema) return diff --git a/hivemq-edge/src/frontend/src/modules/Mappings/hooks/useNorthboundMappingManager.ts b/hivemq-edge/src/frontend/src/modules/Mappings/hooks/useNorthboundMappingManager.ts index d4b266f400..c0479d75d7 100644 --- a/hivemq-edge/src/frontend/src/modules/Mappings/hooks/useNorthboundMappingManager.ts +++ b/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 => { 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, diff --git a/hivemq-edge/src/frontend/src/modules/Mappings/hooks/useSouthboundMappingManager.ts b/hivemq-edge/src/frontend/src/modules/Mappings/hooks/useSouthboundMappingManager.ts index 62bc758629..cdb60f49bc 100644 --- a/hivemq-edge/src/frontend/src/modules/Mappings/hooks/useSouthboundMappingManager.ts +++ b/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 => { 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, diff --git a/hivemq-edge/src/frontend/src/modules/Mappings/types.ts b/hivemq-edge/src/frontend/src/modules/Mappings/types.ts index 9aca0a5725..59a339fcac 100644 --- a/hivemq-edge/src/frontend/src/modules/Mappings/types.ts +++ b/hivemq-edge/src/frontend/src/modules/Mappings/types.ts @@ -17,7 +17,8 @@ export enum MappingType { export interface MappingManagerType { context: ManagerContextType data: T | undefined - onUpdateCollection: (tags: T) => void + onUpdateCollection: (tags: T) => Promise | undefined + onClose: () => void isLoading: boolean isError: boolean isPending: boolean