(feat) O3-2571: Using the new snackbar in programs app (#1503)

openmrs · Nov 24, 2023 · af203e3 · af203e3
1 parent 0ec7d19
commit af203e3
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 23 deletions.
diff --git a/packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx b/packages/esm-patient-medications-app/src/components/medications-details-table.component.tsx
@@ -252,7 +252,7 @@ const MedicationsDetailsTable: React.FC<ActiveMedicationsProps> = ({
         >
           {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
             <TableContainer>
-              <Table {...getTableProps()}>
+              <Table aria-role="medications" {...getTableProps()}>
                 <TableHead>
                   <TableRow>
                     {headers.map((header) => (

diff --git a/packages/esm-patient-programs-app/src/programs/programs-form.component.tsx b/packages/esm-patient-programs-app/src/programs/programs-form.component.tsx
@@ -22,8 +22,7 @@ import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
   createErrorHandler,
-  showNotification,
-  showToast,
+  showSnackbar,
   useSession,
   useLocations,
   useLayoutType,
@@ -109,10 +108,10 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({ closeWorkspace, patientUuid
                 mutateEnrollments();
                 closeWorkspace();
 
-                showToast({
-                  critical: true,
+                showSnackbar({
+                  isLowContrast: true,
                   kind: 'success',
-                  description: t(
+                  subtitle: t(
                     'enrollmentUpdatesNowVisible',
                     'Changes to the program are now visible in the Programs table',
                   ),
@@ -123,11 +122,11 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({ closeWorkspace, patientUuid
             (err) => {
               createErrorHandler();
 
-              showNotification({
+              showSnackbar({
                 title: t('programEnrollmentSaveError', 'Error saving program enrollment'),
                 kind: 'error',
-                critical: true,
-                description: err?.message,
+                isLowContrast: false,
+                subtitle: err?.message,
               });
             },
           )
@@ -137,22 +136,22 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({ closeWorkspace, patientUuid
                 mutateEnrollments();
                 closeWorkspace();
 
-                showToast({
-                  critical: true,
+                showSnackbar({
+                  isLowContrast: true,
                   kind: 'success',
-                  description: t('enrollmentNowVisible', 'It is now visible in the Programs table'),
+                  subtitle: t('enrollmentNowVisible', 'It is now visible in the Programs table'),
                   title: t('enrollmentSaved', 'Program enrollment saved'),
                 });
               }
             },
             (err) => {
               createErrorHandler();
 
-              showNotification({
+              showSnackbar({
                 title: t('programEnrollmentSaveError', 'Error saving program enrollment'),
                 kind: 'error',
-                critical: true,
-                description: err?.message,
+                isLowContrast: false,
+                subtitle: err?.message,
               });
             },
           );

diff --git a/packages/esm-patient-programs-app/src/programs/programs-form.test.tsx b/packages/esm-patient-programs-app/src/programs/programs-form.test.tsx
@@ -3,7 +3,7 @@ import { throwError } from 'rxjs';
 import { of } from 'rxjs/internal/observable/of';
 import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { createErrorHandler, openmrsFetch, showNotification, showToast } from '@openmrs/esm-framework';
+import { createErrorHandler, openmrsFetch, showSnackbar } from '@openmrs/esm-framework';
 import {
   mockCareProgramsResponse,
   mockEnrolledProgramsResponse,
@@ -25,8 +25,7 @@ const mockCreateErrorHandler = createErrorHandler as jest.Mock;
 const mockCreateProgramEnrollment = createProgramEnrollment as jest.Mock;
 const mockUpdateProgramEnrollment = updateProgramEnrollment as jest.Mock;
 const mockOpenmrsFetch = openmrsFetch as jest.Mock;
-const mockShowNotification = showNotification as jest.Mock;
-const mockShowToast = showToast as jest.Mock;
+const mockShowSnackbar = showSnackbar as jest.Mock;
 
 jest.mock('@openmrs/esm-framework', () => {
   const originalModule = jest.requireActual('@openmrs/esm-framework');
@@ -35,7 +34,7 @@ jest.mock('@openmrs/esm-framework', () => {
     ...originalModule,
     createErrorHandler: jest.fn(),
     showNotification: jest.fn(),
-    showToast: jest.fn(),
+    showSnackbar: jest.fn(),
     useLocations: jest.fn().mockImplementation(() => mockLocationsResponse),
   };
 });
@@ -87,8 +86,8 @@ describe('ProgramsForm', () => {
       new AbortController(),
     );
 
-    expect(mockShowToast).toHaveBeenCalledTimes(1);
-    expect(mockShowToast).toHaveBeenCalledWith({
+    expect(mockShowSnackbar).toHaveBeenCalledTimes(1);
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
       critical: true,
       description: 'It is now visible in the Programs table',
       kind: 'success',
@@ -130,7 +129,7 @@ describe('ProgramsForm', () => {
       new AbortController(),
     );
 
-    expect(mockShowToast).toHaveBeenCalledWith(
+    expect(mockShowSnackbar).toHaveBeenCalledWith(
       expect.objectContaining({
         critical: true,
         description: 'Changes to the program are now visible in the Programs table',
@@ -174,7 +173,7 @@ describe('ProgramsForm', () => {
     await waitFor(() => user.click(enrollButton));
 
     expect(mockCreateErrorHandler).toHaveBeenCalledTimes(1);
-    expect(mockShowNotification).toHaveBeenCalledWith({
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
       critical: true,
       description: 'Internal Server Error',
       kind: 'error',