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

PiusKariuki · 2024-12-05T10:52:31Z

Requirements

This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
My work includes tests or is validated by existing tests.

Summary

This PR adds DELETE ability to program enrollments

Screenshots

Related Issue

https://openmrs.atlassian.net/browse/O3-4040

Other

…dit" and "delete" options for individual programs

…delete workflows

…t button and the new delete button

…ved(clicking on the overflow menu) to get to the "edit" button

PiusKariuki · 2024-12-05T10:53:22Z

@vasharma05 @denniskigen can you please review this for me

brandones

Nice work, @PiusKariuki ! The main thing is to clean up the user-facing text. We don't want to scare users by making them think they might be deleting a whole program, when they are in fact just deleting the patient's enrollment.

packages/esm-patient-programs-app/src/routes.json

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

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

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

…kbar

PiusKariuki · 2025-01-04T00:09:21Z

@brandones @denniskigen . I resolved the failing E2E and suggestions too. Please review and revert incase of any more feedback

NethmiRodrigo

Thank you @PiusKariuki! A few minor nitpicks

e2e/pages/program-page.ts

NethmiRodrigo · 2025-01-07T16:40:11Z

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

+  beforeEach(() => {
+    jest.clearAllMocks();
+  });


Also please note this.

NethmiRodrigo · 2025-01-07T16:40:26Z

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

+jest.mock('@openmrs/esm-framework', () => ({
+  showSnackbar: jest.fn(),
+  getCoreTranslation: jest.fn((key, defaultText) => defaultText),
+}));


And please update the mocks

…to feat/delete-programs-feature

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

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

…for getting the said button in the spec

denniskigen · 2025-01-09T08:43:39Z

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

@@ -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';


I think the correct name for this component and file should be ProgramsActionMenu and programs-action-menu.component respectively.

denniskigen · 2025-01-09T08:43:58Z

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

@@ -158,10 +153,12 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
                  {rows.map((row, i) => (
                    <TableRow key={row.id}>


Suggested change

<TableRow key={row.id}>

<TableRow key={row.id} {...getRowProps({ row })}>

denniskigen · 2025-01-09T08:44:38Z

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

@@ -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}>


Suggested change

<TableCell className="cds--table-column-menu" key={cell.id}>

<TableCell key={cell.id}>

cds--table-column-menu isn't strictly necessary here.

denniskigen · 2025-01-09T08:45:18Z

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

                      ))}
-                      <TableCell className="cds--table-column-menu">
-                        <ProgramEditButton programEnrollmentId={enrollments[i]?.uuid} t={t} />
+                      <TableCell>


But it is here to ensure the OverflowMenu takes up the appropriate amount of space.

Suggested change

<TableCell>

<TableCell className="cds--table-column-menu">

denniskigen · 2025-01-09T08:46:08Z

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

This and all it's related files should be renamed to programs-action-menu for consistency.

denniskigen · 2025-01-09T08:46:33Z

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

+    [programEnrollmentId],
+  );
+
+  const launchDeleteProgramDialog = () => {


We can wrap this in a useCallback.

denniskigen · 2025-01-09T08:47:55Z

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

+  };
+
+  return (
+    <Layer>


Suggested change

<Layer>

<Layer className={styles.layer}>

And then the associated styles would look something like this:

.layer { height: 100%; :global(.cds--overflow-menu) { min-height: unset; } } .menuItem { max-width: none; }

This will make your UI visually consistent with other flows like the Conditions edit experience.

denniskigen · 2025-01-09T08:49:44Z

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

+      <OverflowMenu
+        name={t('editOrDeleteProgram', 'Edit or delete program')}
+        aria-label={t('editOrDeleteProgram', 'Edit or delete program')}
+        size={isTablet ? 'lg' : 'sm'}
+        flipped
+      >


Suggested change

<OverflowMenu

name={t('editOrDeleteProgram', 'Edit or delete program')}

aria-label={t('editOrDeleteProgram', 'Edit or delete program')}

size={isTablet ? 'lg' : 'sm'}

flipped

>

<OverflowMenu

align="left"

aria-label={t('editOrDeleteProgram', 'Edit or delete program')}

flipped

size={isTablet ? 'lg' : 'sm'}

>

The OverflowMenu should be left-aligned so it's content does not flow over the width of the datatable. Additionally, we should remove the name prop as it's not a known prop of the OverflowMenu component.

denniskigen · 2025-01-09T08:50:11Z

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

+        <OverflowMenuItem id="editProgram" onClick={launchEditProgramsForm} itemText={t('edit', 'Edit')} />
+        <OverflowMenuItem id="deleteProgam" onClick={launchDeleteProgramDialog} itemText={t('delete', 'Delete')} />


Suggested change

<OverflowMenuItem id="editProgram" onClick={launchEditProgramsForm} itemText={t('edit', 'Edit')} />

<OverflowMenuItem id="deleteProgam" onClick={launchDeleteProgramDialog} itemText={t('delete', 'Delete')} />

<OverflowMenuItem

className={styles.menuItem}

id="editProgram"

onClick={launchEditProgramsForm}

itemText={t('edit', 'Edit')}

/>

<OverflowMenuItem

className={styles.menuItem}

hasDivider

id="deleteProgam"

isDelete

onClick={launchDeleteProgramDialog}

itemText={t('delete', 'Delete')}

/>

denniskigen · 2025-01-09T08:51:01Z

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

-                      <TableCell className="cds--table-column-menu">
-                        <ProgramEditButton programEnrollmentId={enrollments[i]?.uuid} t={t} />
+                      <TableCell>
+                        <ProgramsActionsMenu patientUuid={patientUuid} programEnrollmentId={enrollments[i]?.uuid} />


We should add this to the ProgramsOverview component as well for consistency.

denniskigen · 2025-01-09T08:59:55Z

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

+      showSnackbar({
+        isLowContrast: true,
+        kind: 'success',
+        title: t('programDeleted', 'Program enrollment deleted'),


Suggested change

title: t('programDeleted', 'Program enrollment deleted'),

title: t('programEnrollmentDeleted', 'Program enrollment deleted'),

denniskigen · 2025-01-09T09:35:21Z

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

+        <Button kind="secondary" onClick={closeDeleteModal}>
+          {getCoreTranslation('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={handleDelete} disabled={isDeleting}>


Suggested change

<Button kind="danger" onClick={handleDelete} disabled={isDeleting}>

<Button className={styles.deleteButton} kind="danger" onClick={handleDelete} disabled={isDeleting}>

And the styles for that would be:

@use '@carbon/layout'; @use '@carbon/type'; .deleteButton { :global(.cds--inline-loading) { min-height: layout.$spacing-05; } :global(.cds--inline-loading__text) { @include type.type-style('body-01'); } }

denniskigen · 2025-01-09T19:06:59Z

packages/esm-patient-programs-app/src/programs/programs.resource.tsx

+export function deleteProgramEnrollment(programEnrollmentUuid: string) {
+  return openmrsFetch(`${restBaseUrl}/programenrollment/${programEnrollmentUuid}`, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}


Suggested change

export function deleteProgramEnrollment(programEnrollmentUuid: string) {

return openmrsFetch(`${restBaseUrl}/programenrollment/${programEnrollmentUuid}`, {

method: 'DELETE',

headers: {

'Content-Type': 'application/json',

},

});

}

export function deleteProgramEnrollment(programEnrollmentUuid: string) {

const abortController = new AbortController();

return openmrsFetch(`${restBaseUrl}/programenrollment/${programEnrollmentUuid}`, {

method: 'DELETE',

headers: {

'Content-Type': 'application/json',

},

signal: abortController.signal

});

}

PiusKariuki added 16 commits December 5, 2024 11:09

(chore) Created a program actions menu component that displays the "e…

cbbff83

…dit" and "delete" options for individual programs

feat: created a program actions menu test component testing edit and …

b81e251

…delete workflows

feat: created a delete modal test component

80c62ed

(feat) registered the delete confirmation dialog

14e044a

(chore) generated translation keys

2ede494

(feat) created a HTTP request function to delete programs

a66f460

(feat): created a dialog that shows up when deleting a program

a6684fa

(feat) added a React component to render the edit-program button

576c2ad

(feat) swapped the edit button for an Action menu that houses the edi…

ac33454

…t button and the new delete button

(feat) added styles for the action table cell

8ddee66

(chore) edited the modal prop name to ensure the test runs correctly

4ee37bb

(chore) included a name for the overflow menu item for testing purposes

a683be1

(chore) typo fix

470f200

(chore) edited the test component to accommodate the extra step invol…

5ea6b91

…ved(clicking on the overflow menu) to get to the "edit" button

(chore) optimize imports

f4b550f

(chore) removed styling that caused overflow

3236b0d

brandones changed the title ~~(feat) Add delete ability to program enrollments#4040~~ (feat) O3-4040: Add delete ability to program enrollments Dec 15, 2024

brandones requested changes Dec 15, 2024

View reviewed changes

PiusKariuki added 11 commits December 16, 2024 11:05

chore: moved the delete enrollment component to the modals array

7ab780f

chore: removed useless styling

de252d4

chore: renamed Dialog to Modal

9d444b6

chore: more descriptive text for a successful deletion on the snackbar

49e52d3

chore: more descriptive text for an error during deletion on the snac…

847261c

…kbar

chore: more descriptive modal header for deleting a program

4352fe8

chore: more descriptive modal body for deleting a program

17a7079

chore: updated tests

7840ee8

chore: updated tests

9869444

chore: using getCoreTranslation

421d61f

chore: updated the modal name

f871f46

PiusKariuki added 2 commits January 4, 2025 02:15

chore: returned the classname in the "action" table cell

92d545c

fix: fixed failing e2e tests

26d2a49

Merge branch 'main' into feat/delete-programs-feature

1876c76

PiusKariuki requested a review from NethmiRodrigo January 6, 2025 19:23

NethmiRodrigo reviewed Jan 7, 2025

View reviewed changes

PiusKariuki added 6 commits January 8, 2025 10:06

chore: regex of matching case instead of strict typing it.

53bbbe2

Merge remote-tracking branch 'origin/feat/delete-programs-feature' in…

6da388d

…to feat/delete-programs-feature

chore: removed redundant block to clear all mocks

529b542

chore: removed partial mock

4dd1699

chore: removed partial mock

fbc226a

chore: using jest.mocked for type safety

5262ad8

PiusKariuki requested a review from NethmiRodrigo January 8, 2025 11:33

chore: ensure type safety in mock implementation for useEnrollments

4990847

denniskigen reviewed Jan 8, 2025

View reviewed changes

PiusKariuki added 4 commits January 9, 2025 09:12

refactor: removed repeated lines of code

f9db4ff

refactor: renamed the "program-actions-menu.test.tsx"

bd588b9

refactor: renamed the spec to a friendlier name

4363f81

refactor: renamed the "overflowMenuButton" and added a name argument …

cf60eeb

…for getting the said button in the spec

PiusKariuki requested a review from denniskigen January 9, 2025 06:20

denniskigen reviewed Jan 9, 2025

View reviewed changes

PiusKariuki added 6 commits January 9, 2025 14:13

refactor: renamed the "ProgramsActionMenu" component

902454b

refactor: passing down row props to the datatable rows

be6cfb9

refactor: remove unnecessary classname

d71d7f3

refactor: added necessary classname

72826b1

refactor: renamed test file for consistency

7dad9e1

refactor: renamed test file for consistency

218b024

denniskigen reviewed Jan 9, 2025

View reviewed changes

Merge branch 'main' into feat/delete-programs-feature

e7db186

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

PiusKariuki commented Dec 5, 2024 •

edited by denniskigen

Loading

PiusKariuki commented Dec 5, 2024

brandones left a comment

PiusKariuki commented Jan 4, 2025

NethmiRodrigo left a comment

NethmiRodrigo Jan 7, 2025

NethmiRodrigo Jan 7, 2025

denniskigen Jan 9, 2025

denniskigen Jan 9, 2025

denniskigen Jan 9, 2025

denniskigen Jan 9, 2025

denniskigen Jan 9, 2025

denniskigen Jan 9, 2025

denniskigen Jan 9, 2025 •

edited

Loading

denniskigen Jan 9, 2025

denniskigen Jan 9, 2025 •

edited

Loading

denniskigen Jan 9, 2025

denniskigen Jan 9, 2025

denniskigen Jan 9, 2025

denniskigen Jan 9, 2025

		@@ -158,10 +153,12 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = ({ patie
		{rows.map((row, i) => (
		<TableRow key={row.id}>

	<TableRow key={row.id}>
	<TableRow key={row.id} {...getRowProps({ row })}>

	<TableCell className="cds--table-column-menu" key={cell.id}>
	<TableCell key={cell.id}>

		<OverflowMenuItem id="editProgram" onClick={launchEditProgramsForm} itemText={t('edit', 'Edit')} />
		<OverflowMenuItem id="deleteProgam" onClick={launchDeleteProgramDialog} itemText={t('delete', 'Delete')} />

	title: t('programDeleted', 'Program enrollment deleted'),
	title: t('programEnrollmentDeleted', 'Program enrollment deleted'),

	<Button kind="danger" onClick={handleDelete} disabled={isDeleting}>
	<Button className={styles.deleteButton} kind="danger" onClick={handleDelete} disabled={isDeleting}>

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

Are you sure you want to change the base?

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

Conversation

PiusKariuki commented Dec 5, 2024 • edited by denniskigen Loading

Requirements

Summary

Screenshots

Related Issue

Other

PiusKariuki commented Dec 5, 2024

brandones left a comment

Choose a reason for hiding this comment

PiusKariuki commented Jan 4, 2025

NethmiRodrigo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

denniskigen Jan 9, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

denniskigen Jan 9, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PiusKariuki commented Dec 5, 2024 •

edited by denniskigen

Loading

denniskigen Jan 9, 2025 •

edited

Loading

denniskigen Jan 9, 2025 •

edited

Loading