fix: show unsaved changes leaves page

Author: steveninhle

ui/dashboard/src/@queries/notification-details.ts

@@ -50,6 +50,15 @@ export const prefetchNotification = (
   });
 };
 
+export const invalidateNotificationDetails = (
+  queryClient: QueryClient,
+  params: NotificationFetcherPayload
+) => {
+  queryClient.invalidateQueries({
+    queryKey: [NOTIFICATION_DETAILS_QUERY_KEY, params]
+  });
+};
+
 export const invalidateNotification = (queryClient: QueryClient) => {
   queryClient.invalidateQueries({
     queryKey: [NOTIFICATION_DETAILS_QUERY_KEY]

ui/dashboard/src/hooks/use-action-with-url.tsx

@@ -20,7 +20,7 @@ const useActionWithURL = ({ idKey = '*', addPath, closeModalPath }: Props) => {
   }, [location.pathname]);
 
   const isAdd = useMemo(() => lastPath === ID_NEW, [lastPath]);
-  const isClone = useMemo(() => lastPath?.includes('clone'), [lastPath]);
+  const isClone = useMemo(() => path?.includes('clone'), [path]);
   const isEdit = useMemo(
     () => id && path && !isAdd && !isClone,
     [path, isAdd, isClone, idKey]

ui/dashboard/src/pages/notifications/notification-modal/notification-create-update-modal/index.tsx

@@ -11,6 +11,7 @@ import {
   notificationUpdater
 } from '@api/notification';
 import { yupResolver } from '@hookform/resolvers/yup';
+import { invalidateNotificationDetails } from '@queries/notification-details';
 import { invalidateNotifications } from '@queries/notifications';
 import { useQueryClient } from '@tanstack/react-query';
 import { useAuth } from 'auth';
@@ -56,7 +57,9 @@ interface NotificationCreateUpdateModalProps {
   isOpen: boolean;
   isLoadingNotification: boolean;
   notification?: Notification;
-  onClose: () => void;
+  notificationEnvironmentId?: string;
+  resetNotification: () => void;
+  onClose: (isRefresh?: boolean) => void;
 }
 
 export interface NotificationCreateUpdateForm {
@@ -91,6 +94,8 @@ const NotificationCreateUpdateModal = ({
   isOpen,
   isLoadingNotification,
   notification,
+  notificationEnvironmentId,
+  resetNotification,
   onClose
 }: NotificationCreateUpdateModalProps) => {
   const { notify, errorNotify } = useToast();
@@ -208,6 +213,10 @@ const NotificationCreateUpdateModal = ({
             })
           });
           invalidateNotifications(queryClient);
+          invalidateNotificationDetails(queryClient, {
+            id: notificationId as string,
+            environmentId: notificationEnvironmentId as string
+          });
           onClose();
         }
       } catch (error) {
@@ -217,12 +226,15 @@ const NotificationCreateUpdateModal = ({
     [notification, isEditNotification]
   );
 
-  useUnsavedLeavePage({ isShow: isDirty && !isSubmitting });
+  useUnsavedLeavePage({
+    isShow: isDirty && !isSubmitting,
+    callBackCancel: resetNotification
+  });
   return (
     <SlideModal
       title={t(isEditNotification ? 'update-notification' : 'new-notification')}
       isOpen={isOpen}
-      onClose={onClose}
+      onClose={() => onClose(false)}
     >
       {isLoadingNotification ? (
         <FormLoading />
@@ -521,7 +533,11 @@ const NotificationCreateUpdateModal = ({
               <div className="absolute left-0 bottom-0 bg-gray-50 w-full rounded-b-lg">
                 <ButtonBar
                   primaryButton={
-                    <Button type="button" variant="secondary" onClick={onClose}>
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      onClick={() => onClose(false)}
+                    >
                       {t(`cancel`)}
                     </Button>
                   }

ui/dashboard/src/pages/notifications/page-loader.tsx

@@ -92,10 +92,13 @@ const PageLoader = () => {
     [commonPath]
   );
 
-  const handleOnCloseModal = useCallback(() => {
+  const handleOnCloseModal = useCallback((isRefresh?: boolean) => {
+    const isResetNotification = isRefresh ?? true;
     onCloseConfirmModal();
     setIsDeleteNotification(false);
-    setSelectedNotification(undefined);
+    if (isResetNotification) {
+      setSelectedNotification(undefined);
+    }
     onCloseActionModal();
   }, []);
 
@@ -132,6 +135,11 @@ const PageLoader = () => {
     }
   }, [selectedNotification]);
 
+  const onHandleAddNew = useCallback(() => {
+    setSelectedNotification(undefined);
+    onOpenAddModal();
+  }, []);
+
   useEffect(() => {
     if (notificationCollection) {
       setSelectedNotification(notificationCollection.subscription);
@@ -149,7 +157,7 @@ const PageLoader = () => {
     <>
       <PageContent
         disabled={!editable}
-        onAdd={onOpenAddModal}
+        onAdd={onHandleAddNew}
         onHandleActions={onHandleActions}
       />
 
@@ -160,6 +168,8 @@ const PageLoader = () => {
           isOpen={!!isAdd || !!isEdit}
           isLoadingNotification={isLoadingNotification}
           notification={selectedNotification}
+          notificationEnvironmentId={notificationEnvironmentId as string}
+          resetNotification={() => setSelectedNotification(undefined)}
           onClose={handleOnCloseModal}
         />
       )}

ui/dashboard/src/pages/organizations/organization-modal/organization-create-update-modal/index.tsx

@@ -313,7 +313,7 @@ const OrganizationCreateUpdateModal = ({
               <div className="absolute left-0 bottom-0 bg-gray-50 w-full rounded-b-lg">
                 <ButtonBar
                   primaryButton={
-                    <Button variant="secondary" onClick={onClose}>
+                    <Button type="button" variant="secondary" onClick={onClose}>
                       {t(`cancel`)}
                     </Button>
                   }

ui/dashboard/src/pages/pushes/page-loader.tsx

@@ -80,6 +80,11 @@ const PageLoader = () => {
     [commonPath]
   );
 
+  const onHandleAddNew = useCallback(() => {
+    setSelectedPush(undefined);
+    onOpenAddModal();
+  }, [commonPath]);
+
   const handleOnCloseModal = useCallback((isRefresh?: boolean) => {
     const checkReset = isRefresh ?? true;
     onCloseActionModal();
@@ -141,7 +146,7 @@ const PageLoader = () => {
     <>
       <PageContent
         disabled={!editable}
-        onAdd={onOpenAddModal}
+        onAdd={onHandleAddNew}
         onHandleActions={onHandleActions}
       />
       {(!!isAdd || !!isEdit) && (