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

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,100 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { deleteProgramEnrollment, useEnrollments } from './programs.resource';
+import DeleteProgramModal from './delete-program.modal';
+import { showSnackbar, getCoreTranslation } from '@openmrs/esm-framework';
+
+jest.mock('./programs.resource', () => ({
+  deleteProgramEnrollment: jest.fn(),
+  useEnrollments: jest.fn(),
+}));
+jest.mock('@openmrs/esm-framework', () => ({
+  showSnackbar: jest.fn(),
+  getCoreTranslation: jest.fn((key, defaultText) => defaultText),
+}));
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key, defaultText) => defaultText }),
+}));
+
+const mockMutateEnrollments = jest.fn();
+(useEnrollments as jest.Mock).mockImplementation(() => ({ mutateEnrollments: mockMutateEnrollments }));
+
+describe('DeleteProgramModal', () => {
+  const closeDeleteModalMock = jest.fn();
+  const programEnrollmentId = '123';
+  const patientUuid = 'abc';
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders modal with delete confirmation text ', () => {
+    render(
+      <DeleteProgramModal
+        closeDeleteModal={closeDeleteModalMock}
+        programEnrollmentId={programEnrollmentId}
+        patientUuid={patientUuid}
+      />,
+    );
+    expect(screen.getByText('Delete Program Enrollment')).toBeInTheDocument();
+    expect(screen.getByText('Are you sure you want to delete this program enrollment?')).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByText('Confirm')).toBeInTheDocument();
+  });
+
+  it('Calls closeDeleteModal when cancel button is clicked', () => {
+    render(
+      <DeleteProgramModal
+        closeDeleteModal={closeDeleteModalMock}
+        programEnrollmentId={programEnrollmentId}
+        patientUuid={patientUuid}
+      />,
+    );
+    fireEvent.click(screen.getByText('Cancel'));
+    expect(closeDeleteModalMock).toHaveBeenCalled();
+  });
+
+  it('handles delete action successfully', async () => {
+    (deleteProgramEnrollment as jest.Mock).mockResolvedValue({ ok: true });
+    render(
+      <DeleteProgramModal
+        closeDeleteModal={closeDeleteModalMock}
+        programEnrollmentId={programEnrollmentId}
+        patientUuid={patientUuid}
+      />,
+    );
+    fireEvent.click(screen.getByText('Confirm'));
+    expect(screen.getByText('Deleting...')).toBeInTheDocument();
+    await screen.findByText('Confirm');
+    expect(deleteProgramEnrollment).toHaveBeenCalledWith(programEnrollmentId, expect.any(AbortController));
+    expect(mockMutateEnrollments).toHaveBeenCalled();
+    expect(closeDeleteModalMock).toHaveBeenCalled();
+    expect(showSnackbar).toHaveBeenCalledWith({
+      isLowContrast: true,
+      kind: 'success',
+      title: 'Program Enrollment Deleted',
+    });
+  });
+
+  it('handles delete action error', async () => {
+    const errorMessage = 'failed to delete';
+    (deleteProgramEnrollment as jest.Mock).mockRejectedValue(new Error(errorMessage));
+
+    render(
+      <DeleteProgramModal
+        closeDeleteModal={closeDeleteModalMock}
+        programEnrollmentId={programEnrollmentId}
+        patientUuid={patientUuid}
+      />,
+    );
+    fireEvent.click(screen.getByText('Confirm'));
+    await screen.findByText('Confirm');
+
+    expect(showSnackbar).toHaveBeenCalledWith({
+      isLowContrast: false,
+      kind: 'error',
+      title: 'Error deleting program enrollment',
+      subtitle: errorMessage,
+    });
+  });
+});

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

@@ -0,0 +1,67 @@
+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 () => {
+    try {
+      setIsDeleting(true);
+      const response = await deleteProgramEnrollment(programEnrollmentId, new AbortController());
+      if (response.ok) {
+        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.component.test.tsx

@@ -0,0 +1,70 @@
+import { showModal } from '@openmrs/esm-framework';
+import { ProgramsActionsMenu } from './programs-actions-menu.component';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  showModal: jest.fn(),
+  useLayoutType: jest.fn(() => 'desktop'),
+}));
+
+jest.mock('@openmrs/esm-patient-common-lib', () => ({
+  launchPatientWorkspace: jest.fn(),
+}));
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string, defaultText: string) => defaultText }),
+}));
+
+describe('ProgramActionsMenu', () => {
+  const patientUuid = 'abc';
+  const programEnrollmentId = '123';
+
+  it('renders OverflowMenu with edit and delete actions', async () => {
+    render(<ProgramsActionsMenu patientUuid={patientUuid} programEnrollmentId={programEnrollmentId} />);
+
+    const overFlowButton = screen.getByRole('button');
+    fireEvent.click(overFlowButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Edit')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Delete')).toBeInTheDocument();
+    });
+  });
+
+  it('launches edit program form when edit button is clicked', () => {
+    render(<ProgramsActionsMenu patientUuid={patientUuid} programEnrollmentId={programEnrollmentId} />);
+
+    fireEvent.click(screen.getByRole('button'));
+    fireEvent.click(screen.getByText('Edit'));
+
+    expect(launchPatientWorkspace).toHaveBeenCalledWith('programs-form-workspace', { programEnrollmentId });
+  });
+
+  it('launches delete program dialog when delete option is clicked', async () => {
+    const disposeMock = jest.fn();
+    (showModal as jest.Mock).mockReturnValue(disposeMock);
+
+    render(<ProgramsActionsMenu patientUuid={patientUuid} programEnrollmentId={programEnrollmentId} />);
+
+    fireEvent.click(screen.getByRole('button'));
+    fireEvent.click(screen.getByText('Delete'));
+
+    expect(showModal).toHaveBeenCalledWith('program-delete-confirmation-modal', {
+      closeDeleteModal: expect.any(Function),
+      patientUuid,
+      programEnrollmentId,
+    });
+
+    /**
+     * Simulation for creating the dispose function
+     */
+    const { closeDeleteModal } = (showModal as jest.Mock).mock.calls[0][1];
+    closeDeleteModal();
+    expect(disposeMock).toHaveBeenCalled();
+  });
+});

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>();
@@ -160,8 +155,8 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
                       {row.cells.map((cell) => (
                         <TableCell 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 +171,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;

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

@@ -77,17 +77,19 @@ describe('ProgramsDetailedSummary', () => {
     expect(row).toBeInTheDocument();
     expect(within(row).getByRole('cell', { name: /16-Jan-2020/i })).toBeInTheDocument();
     expect(within(row).getByRole('cell', { name: /active$/i })).toBeInTheDocument();
-    const editButton = within(row).getByRole('button', { name: /Edit Program$/i });
-    expect(editButton).toBeInTheDocument();
+    const actionMenuButton = within(row).getByRole('button', { name: /options$/i });
+    expect(actionMenuButton).toBeInTheDocument();
+
+    await user.click(actionMenuButton);
 
     // Clicking "Add" launches the programs form in a workspace
     expect(addButton).toBeEnabled();
     await user.click(addButton);
 
     expect(launchPatientWorkspace).toHaveBeenCalledWith('programs-form-workspace');
 
-    // Clicking the edit button launches the edit form in a workspace
-    await user.click(editButton);
+    await user.click(actionMenuButton);
+    await user.click(screen.getByText('Edit'));
 
     expect(launchPatientWorkspace).toHaveBeenCalledWith('programs-form-workspace', {
       programEnrollmentId: mockEnrolledProgramsResponse[0].uuid,