(feat) O3-2572: Implement the new snack bar in patient management(par…

…t 1) (#921)

* implement snackbar in patient management

* fix tests

---------

Co-authored-by: Vineet Sharma <sharmava05@gmail.com>

packages/esm-appointments-app/src/admin/appointment-services/appointment-services.component.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Form, Formik, type FormikHelpers } from 'formik';
 import { validationSchema } from './appointment-services-validation';
 import { useAppointmentServices } from './appointment-services-hook';
-import { showNotification, showToast, useLocations } from '@openmrs/esm-framework';
+import { showSnackbar, useLocations } from '@openmrs/esm-framework';
 import type { AppointmentService } from '../../types';
 import { closeOverlay } from '../../hooks/useOverlay';
 import styles from './appointment-services.scss';
@@ -29,21 +29,20 @@ const AppointmentServices: React.FC<AppointmentServicesProps> = () => {
     addNewAppointmentService(payload).then(
       ({ status }) => {
         if (status === 200) {
-          showToast({
-            critical: true,
+          showSnackbar({
+            isLowContrast: true,
             kind: 'success',
-            description: t('appointmentServiceCreate', 'Appointment service created successfully'),
+            subtitle: t('appointmentServiceCreate', 'Appointment service created successfully'),
             title: t('appointmentService', 'Appointment service'),
           });
           closeOverlay();
         }
       },
       (error) => {
-        showNotification({
+        showSnackbar({
           title: t('errorCreatingAppointmentService', 'Error creating appointment service'),
           kind: 'error',
-          critical: true,
-          description: error?.message,
+          subtitle: error?.message,
         });
       },
     );

packages/esm-appointments-app/src/appointments/forms/cancel-form/cancel-appointment.component.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Layer, TextArea } from '@carbon/react';
-import { useSession, showToast, showNotification, ExtensionSlot, usePatient } from '@openmrs/esm-framework';
+import { useSession, showSnackbar, ExtensionSlot, usePatient } from '@openmrs/esm-framework';
 import { cancelAppointment } from '../forms.resource';
 import { useSWRConfig } from 'swr';
 import { useAppointmentDate } from '../../../helpers';
@@ -32,21 +32,20 @@ const CancelAppointment: React.FC<CancelAppointmentProps> = ({ appointment }) =>
     setIsSubmitting(true);
     const { status } = await cancelAppointment('Cancelled', appointment.id);
     if (status === 200) {
-      showToast({
-        critical: true,
+      showSnackbar({
+        isLowContrast: true,
         kind: 'success',
-        description: t('cancelledSuccessfully', 'It has been cancelled successfully'),
+        subtitle: t('cancelledSuccessfully', 'It has been cancelled successfully'),
         title: t('appointmentCancelled', 'Appointment cancelled'),
       });
       mutate(`/ws/rest/v1/appointment/appointmentStatus?forDate=${currentAppointmentDate}&status=Scheduled`);
       mutate(`/ws/rest/v1/appointment/appointmentStatus?forDate=${currentAppointmentDate}&status=Cancelled`);
       closeOverlay();
     } else {
-      showNotification({
+      showSnackbar({
         title: t('appointmentCancelError', 'Error cancelling appointment'),
         kind: 'error',
-        critical: true,
-        description: t('errorCancellingAppointment', 'Error cancelling the appointment'),
+        subtitle: t('errorCancellingAppointment', 'Error cancelling the appointment'),
       });
       setIsSubmitting(false);
     }

packages/esm-appointments-app/src/appointments/forms/cancel-form/cancel-appointment.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { screen, render } from '@testing-library/react';
-import { showNotification, showToast } from '@openmrs/esm-framework';
+import { showSnackbar } from '@openmrs/esm-framework';
 import { cancelAppointment } from '../forms.resource';
 import { mockMappedAppointmentsData } from '__mocks__';
 import CancelAppointment from './cancel-appointment.component';
@@ -10,9 +10,8 @@ const testProps = {
   appointment: mockMappedAppointmentsData.data[0],
 };
 
-const mockShowToast = showToast as jest.Mock;
+const mockShowSnackbar = showSnackbar as jest.Mock;
 const mockCancelAppointment = cancelAppointment as jest.Mock;
-const mockShowNotification = showNotification as jest.Mock;
 
 jest.mock('../forms.resource', () => {
   const originalModule = jest.requireActual('../forms.resource');
@@ -32,7 +31,7 @@ jest.mock('@openmrs/esm-framework', () => {
 });
 
 describe('Cancel appointment form', () => {
-  it('should update appointment status to cancelled and show toast with success message', async () => {
+  it('should update appointment status to cancelled and show snackbar with success message', async () => {
     const user = userEvent.setup();
 
     mockCancelAppointment.mockReturnValueOnce({ status: 200, statusText: 'Appointment cancelled' });
@@ -42,12 +41,12 @@ describe('Cancel appointment form', () => {
     await user.click(screen.getByRole('textbox', { name: /reason for changes/i }));
     await user.click(screen.getByRole('button', { name: /cancel appointment/i }));
 
-    expect(mockShowToast).toHaveBeenCalledTimes(1);
-    expect(mockShowToast).toHaveBeenCalledWith({
-      critical: true,
+    expect(mockShowSnackbar).toHaveBeenCalledTimes(1);
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      isLowContrast: true,
       kind: 'success',
       title: 'Appointment cancelled',
-      description: 'It has been cancelled successfully',
+      subtitle: 'It has been cancelled successfully',
     });
   });
 
@@ -62,12 +61,11 @@ describe('Cancel appointment form', () => {
 
     await user.click(screen.getByRole('textbox', { name: /reason for changes/i }));
     await user.click(screen.getByRole('button', { name: /cancel appointment/i }));
-    expect(mockShowNotification).toHaveBeenCalledTimes(1);
-    expect(mockShowNotification).toHaveBeenCalledWith({
-      critical: true,
+    expect(mockShowSnackbar).toHaveBeenCalledTimes(2);
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
       kind: 'error',
       title: 'Error cancelling appointment',
-      description: 'Error cancelling the appointment',
+      subtitle: 'Error cancelling the appointment',
     });
   });
 });

packages/esm-appointments-app/src/appointments/forms/create-edit-form/appointments-form.component.tsx

@@ -29,8 +29,7 @@ import {
 } from '@carbon/react';
 import {
   ExtensionSlot,
-  showNotification,
-  showToast,
+  showSnackbar,
   useConfig,
   useLayoutType,
   useLocations,
@@ -128,10 +127,10 @@ const AppointmentForm: React.FC<AppointmentFormProps> = ({ appointment, patientU
     saveAppointment(appointmentPayload).then(
       ({ status }) => {
         if (status === 200) {
-          showToast({
-            critical: true,
+          showSnackbar({
+            isLowContrast: true,
             kind: 'success',
-            description: t('appointmentNowVisible', 'It is now visible on the appointments page'),
+            subtitle: t('appointmentNowVisible', 'It is now visible on the appointments page'),
             title: t('appointmentScheduled', 'Appointment scheduled'),
           });
           setIsSubmitting(false);
@@ -145,11 +144,10 @@ const AppointmentForm: React.FC<AppointmentFormProps> = ({ appointment, patientU
         }
       },
       (error) => {
-        showNotification({
+        showSnackbar({
           title: t('appointmentFormError', 'Error scheduling appointment'),
           kind: 'error',
-          critical: true,
-          description: error?.message,
+          subtitle: error?.message,
         });
         setIsSubmitting(false);
       },

packages/esm-appointments-app/src/patient-queue/visit-form/visit-form.component.tsx

@@ -27,10 +27,7 @@ import {
   useVisitTypes,
   type NewVisitPayload,
   saveVisit,
-  toOmrsIsoString,
-  toDateObjectStrict,
-  showNotification,
-  showToast,
+  showSnackbar,
   usePatient,
   useConfig,
   useLocations,
@@ -138,10 +135,11 @@ const VisitForm: React.FC<VisitFormProps> = ({ patientUuid, appointment }) => {
                   ({ status }) => {
                     if (status === 201) {
                       mutate();
-                      showToast({
+                      showSnackbar({
                         kind: 'success',
+                        isLowContrast: true,
                         title: t('visitStarted', 'Visit started'),
-                        description: t(
+                        subtitle: t(
                           'queueAddedSuccessfully',
                           `Patient has been added to the queue successfully.`,
                           `${hours} : ${minutes}`,
@@ -150,11 +148,10 @@ const VisitForm: React.FC<VisitFormProps> = ({ patientUuid, appointment }) => {
                     }
                   },
                   (error) => {
-                    showNotification({
+                    showSnackbar({
                       title: t('queueEntryError', 'Error adding patient to the queue'),
                       kind: 'error',
-                      critical: true,
-                      description: error?.message,
+                      subtitle: error?.message,
                     });
                   },
                 );
@@ -165,11 +162,10 @@ const VisitForm: React.FC<VisitFormProps> = ({ patientUuid, appointment }) => {
             }
           },
           (error) => {
-            showNotification({
+            showSnackbar({
               title: t('startVisitError', 'Error starting visit'),
               kind: 'error',
-              critical: true,
-              description: error?.message,
+              subtitle: error?.message,
             });
           },
         );

packages/esm-patient-list-management-app/src/add-patient/add-patient.component.tsx

@@ -8,7 +8,7 @@ import {
   getDynamicOfflineDataEntries,
   putDynamicOfflineData,
   syncDynamicOfflineData,
-  showToast,
+  showSnackbar,
   toOmrsIsoString,
   usePagination,
   navigate,
@@ -62,17 +62,18 @@ const AddPatient: React.FC<AddPatientProps> = ({ closeModal, patientUuid }) => {
       patientList
         .addPatient()
         .then(() =>
-          showToast({
+          showSnackbar({
             title: t('successfullyAdded', 'Successfully added'),
             kind: 'success',
-            description: `${t('successAddPatientToList', 'Patient added to list')}: ${patientList.displayName}`,
+            isLowContrast: true,
+            subtitle: `${t('successAddPatientToList', 'Patient added to list')}: ${patientList.displayName}`,
           }),
         )
         .catch(() =>
-          showToast({
+          showSnackbar({
             title: t('error', 'Error'),
             kind: 'error',
-            description: `${t('errorAddPatientToList', 'Patient not added to list')}: ${patientList.displayName}`,
+            subtitle: `${t('errorAddPatientToList', 'Patient not added to list')}: ${patientList.displayName}`,
           }),
         );
     }

packages/esm-patient-list-management-app/src/create-edit-patient-list/create-edit-list.component.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, type SyntheticEvent, useEffect, useId, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ButtonSet, Layer, TextArea, TextInput } from '@carbon/react';
-import { useLayoutType, showToast, useSession, useConfig } from '@openmrs/esm-framework';
+import { useLayoutType, showSnackbar, useSession, useConfig } from '@openmrs/esm-framework';
 import type { ConfigSchema } from '../config-schema';
 import type { NewCohortData, OpenmrsCohort } from '../api/types';
 import { createPatientList, editPatientList } from '../api/api-remote';
@@ -47,21 +47,21 @@ const CreateEditPatientList: React.FC<CreateEditPatientListProps> = ({
     if (isEditing) {
       editPatientList(patientListDetails.uuid, cohortDetails)
         .then(() => {
-          showToast({
+          showSnackbar({
             title: t('updated', 'Updated'),
-            description: t('listUpdated', 'List updated successfully'),
+            subtitle: t('listUpdated', 'List updated successfully'),
             kind: 'success',
+            isLowContrast: true,
           });
 
           onSuccess();
           setIsSubmitting(false);
           close();
         })
         .catch((error) => {
-          console.error('Error updating list: ', error);
-          showToast({
+          showSnackbar({
             title: t('errorUpdatingList', 'Error updating list'),
-            description: t('problemUpdatingList', 'There was a problem updating the list'),
+            subtitle: t('problemUpdatingList', 'There was a problem updating the list'),
             kind: 'error',
           });
           setIsSubmitting(false);
@@ -75,20 +75,20 @@ const CreateEditPatientList: React.FC<CreateEditPatientListProps> = ({
         location: session?.sessionLocation?.uuid,
       })
         .then(() => {
-          showToast({
+          showSnackbar({
             title: t('created', 'Created'),
-            description: `${t('listCreated', 'List created successfully')}`,
+            subtitle: `${t('listCreated', 'List created successfully')}`,
             kind: 'success',
+            isLowContrast: true,
           });
           onSuccess();
           setIsSubmitting(false);
           close();
         })
         .catch((error) => {
-          console.error('Error creating list: ', error);
-          showToast({
+          showSnackbar({
             title: t('errorCreatingList', 'Error creating list'),
-            description: t('problemCreatingList', 'There was a problem creating the list'),
+            subtitle: t('problemCreatingList', 'There was a problem creating the list'),
             kind: 'error',
           });
           setIsSubmitting(false);

packages/esm-patient-list-management-app/src/list-details-table/list-details-table.component.tsx

@@ -21,7 +21,7 @@ import {
   Tile,
 } from '@carbon/react';
 import { ArrowLeft, TrashCan } from '@carbon/react/icons';
-import { ConfigurableLink, useLayoutType, isDesktop, showToast, useDebounce } from '@openmrs/esm-framework';
+import { ConfigurableLink, useLayoutType, isDesktop, showSnackbar, useDebounce } from '@openmrs/esm-framework';
 import { removePatientFromList } from '../api/api-remote';
 import { EmptyDataIllustration } from '../empty-state/empty-data-illustration.component';
 import styles from './list-details-table.scss';
@@ -215,17 +215,16 @@ const ListDetailsTable: React.FC<ListDetailsTableProps> = ({
       mutateListMembers();
       mutateListDetails();
 
-      showToast({
-        critical: true,
+      showSnackbar({
+        isLowContrast: true,
         kind: 'success',
-        description: t('listUpToDate', 'The list is now up to date'),
+        subtitle: t('listUpToDate', 'The list is now up to date'),
         title: t('patientRemovedFromList', 'Patient removed from list'),
       });
     } catch (error) {
-      showToast({
-        critical: true,
+      showSnackbar({
         kind: 'error',
-        description: error?.message,
+        subtitle: error?.message,
         title: t('errorRemovingPatientFromList', 'Failed to remove patient from list'),
       });
     }

packages/esm-patient-list-management-app/src/list-details/list-details.component.tsx

@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { OverflowMenuItem, Modal } from '@carbon/react';
 import { OverflowMenuVertical } from '@carbon/react/icons';
-import { navigate, formatDate, parseDate, showToast } from '@openmrs/esm-framework';
+import { navigate, formatDate, parseDate, showSnackbar } from '@openmrs/esm-framework';
 import { deletePatientList } from '../api/api-remote';
 import { usePatientListDetails, usePatientListMembers } from '../api/hooks';
 import CreateEditPatientList from '../create-edit-patient-list/create-edit-list.component';
@@ -88,18 +88,19 @@ const ListDetails = () => {
   const confirmDeletePatientList = useCallback(() => {
     deletePatientList(patientListUuid)
       .then(() => {
-        showToast({
+        showSnackbar({
           title: t('deleted', 'Deleted'),
-          description: `${t('deletedPatientList', 'Deleted patient list')}: ${listDetails?.name}`,
+          subtitle: `${t('deletedPatientList', 'Deleted patient list')}: ${listDetails?.name}`,
           kind: 'success',
+          isLowContrast: true,
         });
 
         navigate({ to: window.getOpenmrsSpaBase() + 'home/patient-lists' });
       })
       .catch((e) =>
-        showToast({
+        showSnackbar({
           title: t('errorDeletingList', 'Error deleting patient list'),
-          description: e?.message,
+          subtitle: e?.message,
           kind: 'error',
         }),
       )

packages/esm-patient-list-management-app/src/list-details/list-details.test.tsx

@@ -19,7 +19,7 @@ jest.mock('../api/api-remote');
 
 jest.mock('@openmrs/esm-framework', () => ({
   ...jest.requireActual('@openmrs/esm-framework'),
-  showToast: jest.fn(),
+  showSnackbar: jest.fn(),
   navigate: jest.fn(),
   ExtensionSlot: jest.fn(),
 }));