Merge pull request #680 from AppQuality/add-notification-toast

added notification toast on drawer close

Author: marcbon

src/locales/en/translation.json

@@ -112,6 +112,7 @@
   "__BUGS_PAGE_CUSTOM_STATUS_CLOSE_DRAWER_MODAL_QUIT_BUTTON": "Quit and discard",
   "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_BODY_DESCRIPTION": "Here you can create and add a new status to those in process or edit it",
   "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CONFIRM_BUTTON": "Save changes",
+  "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CONFIRM_TOAST": "Changes saved",
   "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CREATE_CUSTOM_STATUS_BUTTON": "Create a new status",
   "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CUSTOM_STATUS_MAX": "This name is a bit long. We recommend sticking to a maximum of 17 characters including spaces.",
   "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CUSTOM_STATUS_REQUIRED": "Choose a name up to 17 characters including spaces.",

src/locales/it/translation.json

@@ -117,6 +117,7 @@
   "__BUGS_PAGE_CUSTOM_STATUS_CLOSE_DRAWER_MODAL_QUIT_BUTTON": "Esci",
   "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_BODY_DESCRIPTION": "",
   "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CONFIRM_BUTTON": "",
+  "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CONFIRM_TOAST": "Modifiche salvate",
   "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CREATE_CUSTOM_STATUS_BUTTON": "",
   "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CUSTOM_STATUS_MAX": "",
   "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CUSTOM_STATUS_REQUIRED": "",

src/pages/Bug/Drawer/index.tsx

@@ -1,4 +1,10 @@
-import { Button, Drawer, MD } from '@appquality/unguess-design-system';
+import {
+  Button,
+  Drawer,
+  MD,
+  Notification,
+  useToast,
+} from '@appquality/unguess-design-system';
 import { useTranslation } from 'react-i18next';
 import { useAppDispatch, useAppSelector } from 'src/app/hooks';
 import {
@@ -20,6 +26,7 @@ import { MigrationModal } from '../Modals/MigrationModal';
 
 export const CustomStatusDrawer = () => {
   const { campaignId } = useParams();
+  const { addToast } = useToast();
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const {
@@ -99,7 +106,18 @@ export const CustomStatusDrawer = () => {
         })),
       });
     }
-
+    addToast(
+      ({ close }) => (
+        <Notification
+          onClose={close}
+          type="success"
+          message={t('__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CONFIRM_TOAST')}
+          closeText={t('__TOAST_CLOSE_TEXT')}
+          isPrimary
+        />
+      ),
+      { placement: 'top' }
+    );
     dispatch(setCustomStatusDrawerOpen(false));
   };
 

src/pages/Bug/Modals/MigrationModal/index.tsx

@@ -9,6 +9,8 @@ import {
   Span,
   Dropdown,
   Select,
+  useToast,
+  Notification,
 } from '@appquality/unguess-design-system';
 import { Label, MediaInput } from '@zendeskgarden/react-forms';
 import { Trans, useTranslation } from 'react-i18next';
@@ -61,6 +63,7 @@ export const MigrationModal = ({
   setIsMigrationModalOpen: (isOpen: boolean) => void;
 }) => {
   const { t } = useTranslation();
+  const { addToast } = useToast();
   const { campaignId } = useParams();
   const dispatch = useAppDispatch();
   const [patchCustomStatuses] = usePatchCampaignsByCidCustomStatusesMutation();
@@ -134,7 +137,18 @@ export const MigrationModal = ({
         ],
       });
     }
-
+    addToast(
+      ({ close }) => (
+        <Notification
+          onClose={close}
+          type="success"
+          message={t('__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CONFIRM_TOAST')}
+          closeText={t('__TOAST_CLOSE_TEXT')}
+          isPrimary
+        />
+      ),
+      { placement: 'top' }
+    );
     setIsMigrationModalOpen(false);
     dispatch(setCustomStatusDrawerOpen(false));
   };