(feat) O3-4040: Add delete ability to program enrollments

e2e/pages/program-page.ts

@@ -4,7 +4,8 @@ export class ProgramsPage {
   constructor(readonly page: Page) {}
 
   readonly programsTable = () => this.page.getByRole('table', { name: /program enrollments/i });
-  readonly editProgramButton = () => this.page.getByRole('button', { name: /edit program/i });
+  readonly overflowButton = () => this.page.getByRole('button', { name: /options/i });
+  readonly editProgramButton = () => this.page.getByRole('menuitem', { name: /edit/i });
 
   async goTo(patientUuid: string) {
     await this.page.goto(`patient/${patientUuid}/chart/Programs`);

e2e/specs/program-enrollment.spec.ts

@@ -63,6 +63,7 @@ test('Add and edit a program enrollment', async ({ page }) => {
   });
 
   await test.step('When I click on the `Edit` button of the created program', async () => {
+    await programsPage.overflowButton().click();
     await programsPage.editProgramButton().click();
   });
 

packages/esm-patient-programs-app/src/index.ts

@@ -34,3 +34,8 @@ export const programsDashboardLink =
 
 // t('programEnrollmentWorkspaceTitle', 'Record program enrollment')
 export const programsFormWorkspace = getAsyncLifecycle(() => import('./programs/programs-form.workspace'), options);
+
+export const deleteProgramConfirmationModal = getAsyncLifecycle(
+  () => import('./programs/delete-program.modal'),
+  options,
+);

packages/esm-patient-programs-app/src/programs/delete-program-modal.test.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { deleteProgramEnrollment, useEnrollments } from './programs.resource';
+import DeleteProgramModal from './delete-program.modal';
+import { type FetchResponse, showSnackbar } from '@openmrs/esm-framework';
+import { mockPatient } from 'tools';
+
+jest.mock('./programs.resource', () => ({
+  deleteProgramEnrollment: jest.fn(),
+  useEnrollments: jest.fn(),
+}));
+
+const mockDeleteProgramEnrollment = jest.mocked(deleteProgramEnrollment);
+const mockShowSnackbar = jest.mocked(showSnackbar);
+
+// for type safety
+const mockUseEnrollments = jest.mocked(useEnrollments);
+
+// a mock for mutation
+const mockMutateEnrollments = jest.fn();
+
+// mock the implementation
+mockUseEnrollments.mockImplementation(
+  () =>
+    ({
+      mutateEnrollments: mockMutateEnrollments,
+    }) as unknown as ReturnType<typeof useEnrollments>,
+);
+
+const testProps = {
+  programEnrollmentId: '123',
+  patientUuid: mockPatient.id,
+};
+
+const closeDeleteModalMock = jest.fn();
+
+const renderDeleteProgramModal = () => {
+  return render(
+    <DeleteProgramModal
+      closeDeleteModal={closeDeleteModalMock}
+      programEnrollmentId={testProps.programEnrollmentId}
+      patientUuid={testProps.patientUuid}
+    />,
+  );
+};
+
+describe('DeleteProgramModal', () => {
+  it('renders modal with delete confirmation text ', () => {
+    renderDeleteProgramModal();
+    expect(screen.getByRole('heading', { name: /delete program enrollment/i })).toBeInTheDocument();
+    expect(screen.getByText(/are you sure you want to delete this program enrollment?/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /confirm/i })).toBeInTheDocument();
+  });
+
+  it('Calls closeDeleteModal when cancel button is clicked', async () => {
+    const user = userEvent.setup();
+    renderDeleteProgramModal();
+    await user.click(screen.getByRole('button', { name: /cancel/i }));
+    expect(closeDeleteModalMock).toHaveBeenCalled();
+  });
+
+  it('clicking the delete button deletes the program enrollment', async () => {
+    const user = userEvent.setup();
+    mockDeleteProgramEnrollment.mockResolvedValue({ ok: true } as unknown as FetchResponse);
+    renderDeleteProgramModal();
+    await user.click(screen.getByRole('button', { name: /confirm/i }));
+    expect(mockDeleteProgramEnrollment).toHaveBeenCalledTimes(1);
+    expect(mockDeleteProgramEnrollment).toHaveBeenCalledWith(testProps.programEnrollmentId);
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      isLowContrast: true,
+      kind: 'success',
+      title: expect.stringMatching(/program enrollment deleted/i),
+    });
+  });
+
+  it('renders an error notification when the delete action fails', async () => {
+    const user = userEvent.setup();
+    mockDeleteProgramEnrollment.mockRejectedValue(new Error('Internal server error'));
+    renderDeleteProgramModal();
+    await user.click(screen.getByRole('button', { name: /confirm/i }));
+    expect(mockDeleteProgramEnrollment).toHaveBeenCalledTimes(1);
+    expect(mockDeleteProgramEnrollment).toHaveBeenCalledWith(testProps.programEnrollmentId);
+    expect(mockMutateEnrollments).not.toHaveBeenCalled();
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      isLowContrast: false,
+      kind: 'error',
+      title: expect.stringMatching(/error deleting program enrollment/i),
+      subtitle: 'Internal server error',
+    });
+  });
+});

packages/esm-patient-programs-app/src/programs/delete-program.modal.tsx

@@ -0,0 +1,65 @@
+import React, { useCallback, useState } from 'react';
+import { Button, InlineLoading, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { deleteProgramEnrollment, useEnrollments } from './programs.resource';
+import { showSnackbar, getCoreTranslation } from '@openmrs/esm-framework';
+
+interface DeleteProgramProps {
+  closeDeleteModal: () => void;
+  programEnrollmentId: string;
+  patientUuid: string;
+}
+
+const DeleteProgramModal: React.FC<DeleteProgramProps> = ({ closeDeleteModal, programEnrollmentId, patientUuid }) => {
+  const { t } = useTranslation();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const { mutateEnrollments } = useEnrollments(patientUuid);
+
+  const handleDelete = useCallback(async () => {
+    setIsDeleting(true);
+    try {
+      await deleteProgramEnrollment(programEnrollmentId);
+      await mutateEnrollments();
+      closeDeleteModal();
+      showSnackbar({
+        isLowContrast: true,
+        kind: 'success',
+        title: t('programDeleted', 'Program enrollment deleted'),
+      });
+    } catch (error) {
+      showSnackbar({
+        isLowContrast: false,
+        kind: 'error',
+        title: t('errorDeletingProgram', 'Error deleting program enrollment'),
+        subtitle: error?.message,
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [closeDeleteModal, programEnrollmentId, t, mutateEnrollments]);
+  return (
+    <div>
+      <ModalHeader
+        closeModal={closeDeleteModal}
+        title={t('deletePatientProgramEnrollment', 'Delete program enrollment')}
+      />
+      <ModalBody>
+        <p>{t('deleteModalConfirmationText', 'Are you sure you want to delete this program enrollment?')}</p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeDeleteModal}>
+          {getCoreTranslation('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={handleDelete} disabled={isDeleting}>
+          {isDeleting ? (
+            <InlineLoading description={t('deleting', 'Deleting') + '...'} />
+          ) : (
+            <span>{getCoreTranslation('confirm', 'Confirm')}</span>
+          )}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default DeleteProgramModal;

packages/esm-patient-programs-app/src/programs/program-actions-menu.test.tsx

@@ -0,0 +1,72 @@
+import { showModal, useLayoutType } from '@openmrs/esm-framework';
+import { ProgramsActionsMenu } from './programs-actions-menu.component';
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { mockPatient } from 'tools';
+import userEvent from '@testing-library/user-event';
+
+const mockShowModal = jest.mocked(showModal);
+const mockUseLayoutType = jest.mocked(useLayoutType);
+
+jest.mock('@openmrs/esm-patient-common-lib', () => ({
+  launchPatientWorkspace: jest.fn(),
+}));
+
+const testProps = {
+  programEnrollmentId: '123',
+  patientUuid: mockPatient.id,
+};
+
+const renderProgramActionsMenu = () => {
+  return render(
+    <ProgramsActionsMenu patientUuid={testProps.patientUuid} programEnrollmentId={testProps.programEnrollmentId} />,
+  );
+};
+
+describe('ProgramActionsMenu', () => {
+  beforeEach(() => {
+    mockUseLayoutType.mockReturnValue('small-desktop'); // or 'large-desktop' or 'tablet'
+  });
+
+  it('renders an overflow menu with edit and delete actions', async () => {
+    const user = userEvent.setup();
+    renderProgramActionsMenu();
+
+    const overflowMenuButton = screen.getByRole('button', { name: /options/i });
+    await user.click(overflowMenuButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Edit')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Delete')).toBeInTheDocument();
+    });
+  });
+
+  it('launches edit program form when edit button is clicked', async () => {
+    const user = userEvent.setup();
+    renderProgramActionsMenu();
+    await user.click(screen.getByRole('button'));
+    await user.click(screen.getByText('Edit'));
+
+    expect(launchPatientWorkspace).toHaveBeenCalledWith('programs-form-workspace', {
+      programEnrollmentId: testProps.programEnrollmentId,
+    });
+  });
+
+  it('launches delete program dialog when delete option is clicked', async () => {
+    const user = userEvent.setup();
+    renderProgramActionsMenu();
+
+    await user.click(screen.getByRole('button'));
+    await user.click(screen.getByText('Delete'));
+
+    expect(mockShowModal).toHaveBeenCalledWith('program-delete-confirmation-modal', {
+      closeDeleteModal: expect.any(Function),
+      patientUuid: testProps.patientUuid,
+      programEnrollmentId: testProps.programEnrollmentId,
+    });
+  });
+});

packages/esm-patient-programs-app/src/programs/programs-actions-menu.component.tsx

@@ -0,0 +1,42 @@
+import { useTranslation } from 'react-i18next';
+import { showModal, useLayoutType } from '@openmrs/esm-framework';
+import { Layer, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import React, { useCallback } from 'react';
+import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+
+interface ProgramActionsProps {
+  patientUuid: string;
+  programEnrollmentId: string;
+}
+
+export const ProgramsActionsMenu = ({ patientUuid, programEnrollmentId }: ProgramActionsProps) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+
+  const launchEditProgramsForm = useCallback(
+    () => launchPatientWorkspace('programs-form-workspace', { programEnrollmentId }),
+    [programEnrollmentId],
+  );
+
+  const launchDeleteProgramDialog = () => {
+    const dispose = showModal('program-delete-confirmation-modal', {
+      closeDeleteModal: () => dispose(),
+      programEnrollmentId,
+      patientUuid,
+    });
+  };
+
+  return (
+    <Layer>
+      <OverflowMenu
+        name={t('editOrDeleteProgram', 'Edit or delete program')}
+        aria-label={t('editOrDeleteProgram', 'Edit or delete program')}
+        size={isTablet ? 'lg' : 'sm'}
+        flipped
+      >
+        <OverflowMenuItem id="editProgram" onClick={launchEditProgramsForm} itemText={t('edit', 'Edit')} />
+        <OverflowMenuItem id="deleteProgam" onClick={launchDeleteProgramDialog} itemText={t('delete', 'Delete')} />
+      </OverflowMenu>
+    </Layer>
+  );
+};

packages/esm-patient-programs-app/src/programs/programs-detailed-summary.component.tsx

@@ -1,6 +1,6 @@
 import React, { type ComponentProps, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
-import { type TFunction, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import {
   Button,
   DataTable,
@@ -19,7 +19,6 @@ import {
 import {
   AddIcon,
   type ConfigObject,
-  EditIcon,
   formatDate,
   formatDatetime,
   useConfig,
@@ -29,16 +28,12 @@ import {
 import { CardHeader, EmptyState, ErrorState, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import { findLastState, usePrograms } from './programs.resource';
 import styles from './programs-detailed-summary.scss';
+import { ProgramsActionsMenu } from './programs-actions-menu.component';
 
 interface ProgramsDetailedSummaryProps {
   patientUuid: string;
 }
 
-interface ProgramEditButtonProps {
-  programEnrollmentId: string;
-  t: TFunction;
-}
-
 const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
   const { hideAddProgramButton, showProgramStatusField } = useConfig<ConfigObject>();
@@ -158,10 +153,12 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
                   {rows.map((row, i) => (
                     <TableRow key={row.id}>
                       {row.cells.map((cell) => (
-                        <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
+                        <TableCell className="cds--table-column-menu" key={cell.id}>
+                          {cell.value?.content ?? cell.value}
+                        </TableCell>
                       ))}
-                      <TableCell className="cds--table-column-menu">
-                        <ProgramEditButton programEnrollmentId={enrollments[i]?.uuid} t={t} />
+                      <TableCell>
+                        <ProgramsActionsMenu patientUuid={patientUuid} programEnrollmentId={enrollments[i]?.uuid} />
                       </TableCell>
                     </TableRow>
                   ))}
@@ -176,25 +173,4 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
   return <EmptyState displayText={displayText} headerTitle={headerTitle} launchForm={launchProgramsForm} />;
 };
 
-function ProgramEditButton({ programEnrollmentId, t }: ProgramEditButtonProps) {
-  const isTablet = useLayoutType() === 'tablet';
-  const launchEditProgramsForm = useCallback(
-    () => launchPatientWorkspace('programs-form-workspace', { programEnrollmentId }),
-    [programEnrollmentId],
-  );
-
-  return (
-    <Button
-      aria-label="edit program"
-      kind="ghost"
-      renderIcon={(props: ComponentProps<typeof EditIcon>) => <EditIcon size={16} {...props} />}
-      iconDescription={t('editProgram', 'Edit Program')}
-      onClick={launchEditProgramsForm}
-      hasIconOnly
-      tooltipPosition="left"
-      size={isTablet ? 'lg' : 'sm'}
-    />
-  );
-}
-
 export default ProgramsDetailedSummary;