fix: pr-review

dhis2 · Feb 1, 2024 · 54f7653 · 54f7653
1 parent e0e8dde
commit 54f7653
Show file tree

Hide file tree

Showing 7 changed files with 184 additions and 9 deletions.
diff --git a/cypress/e2e/WidgetsForEnrollmentPages/WidgetTeiRelationship/index.js b/cypress/e2e/WidgetsForEnrollmentPages/WidgetTeiRelationship/index.js
@@ -0,0 +1,146 @@
+import { When, Given, Then, Before } from '@badeball/cypress-cucumber-preprocessor';
+
+Before({ tags: '@with-mocked-relationship-data' }, () => {
+    cy.intercept({
+        method: 'GET',
+        url: '**/tracker/relationships**',
+    }, {
+        statusCode: 200,
+        body: {
+            instances: [
+                {
+                    relationship: 'mwswG3RMNuu',
+                    relationshipType: 'XdP5nraLPZ0',
+                    createdAt: '2024-02-01T11:50:25.479',
+                    from: {
+                        trackedEntity: {
+                            trackedEntity: 'EaOyKGOIGRp',
+                            trackedEntityType: 'nEenWmSyUEp',
+                            orgUnit: 'DiszpKrYNg8',
+                            attributes: [
+                                {
+                                    attribute: 'cejWyOfXge6',
+                                    displayName: 'Gender',
+                                    createdAt: '2016-08-03T23:47:14.509',
+                                    updatedAt: '2016-08-03T23:47:14.509',
+                                    valueType: 'TEXT',
+                                    value: 'Female',
+                                },
+                                {
+                                    attribute: 'zDhUuAYrxNC',
+                                    displayName: 'Last name',
+                                    createdAt: '2016-08-03T23:47:14.517',
+                                    updatedAt: '2016-08-03T23:47:14.517',
+                                    valueType: 'TEXT',
+                                    value: 'Jones',
+                                },
+                                {
+                                    attribute: 'w75KJ2mc4zz',
+                                    code: 'MMD_PER_NAM',
+                                    displayName: 'First name',
+                                    createdAt: '2016-08-03T23:47:14.516',
+                                    updatedAt: '2016-08-03T23:47:14.516',
+                                    valueType: 'TEXT',
+                                    value: 'Anna',
+                                },
+                            ],
+                        },
+                    },
+                    to: {
+                        trackedEntity: {
+                            trackedEntity: 'G1NNqS1RDeO',
+                            trackedEntityType: 'nEenWmSyUEp',
+                            orgUnit: 'DiszpKrYNg8',
+                            attributes: [
+                                {
+                                    attribute: 'w75KJ2mc4zz',
+                                    code: 'MMD_PER_NAM',
+                                    displayName: 'First name',
+                                    createdAt: '2024-02-01T11:50:25.479',
+                                    updatedAt: '2024-02-01T11:50:25.479',
+                                    valueType: 'TEXT',
+                                    value: 'John',
+                                },
+                                {
+                                    attribute: 'lZGmxYbs97q',
+                                    code: 'MMD_PER_ID',
+                                    displayName: 'Unique ID',
+                                    createdAt: '2024-02-01T11:50:25.476',
+                                    updatedAt: '2024-02-01T11:50:25.476',
+                                    valueType: 'TEXT',
+                                    value: '0078200',
+                                },
+                                {
+                                    attribute: 'zDhUuAYrxNC',
+                                    displayName: 'Last name',
+                                    createdAt: '2024-02-01T11:50:25.479',
+                                    updatedAt: '2024-02-01T11:50:25.479',
+                                    valueType: 'TEXT',
+                                    value: 'Mayer',
+                                },
+                            ],
+                        },
+                    },
+                },
+            ],
+        },
+    }).as('getRelationships');
+});
+
+Given('the user can see the relationship widget', () => {
+    cy.get('[data-test="tracked-entity-relationship-widget"]')
+        .should('be.visible');
+});
+
+When('there is an existing relationship', () => {
+    cy.wait('@getRelationships');
+    cy.get('[data-test="tracked-entity-relationship-widget"]')
+        .within(() => {
+            cy.get('[data-test="relationship-table-row"]')
+                .contains('John');
+        });
+});
+
+When('the user clicks the delete button', () => {
+    cy.get('[data-test="tracked-entity-relationship-widget"]')
+        .within(() => {
+            cy.get('[data-test="relationship-table-row"]')
+                .contains('John')
+                .parent()
+                .within(() => {
+                    cy.get('[data-test="delete-relationship-button"]')
+                        .click();
+                });
+        });
+});
+
+When('the user can see the delete relationship modal', () => {
+    cy.get('[data-test="delete-relationship-modal"]').should('be.visible');
+});
+
+When('the user clicks the confirm delete button', () => {
+    cy.intercept({
+        method: 'POST',
+        url: '**/tracker?importStrategy=DELETE&async=false**',
+    }).as('deleteRelationship');
+
+    cy.get('[data-test="delete-relationship-modal"]')
+        .within(() => {
+            cy.get('[data-test="delete-relationship-confirmation-button"]')
+                .click();
+        });
+
+    cy.wait('@deleteRelationship')
+        .its('request.body')
+        .should('deep.equal', {
+            relationships: [{ relationship: 'mwswG3RMNuu' }],
+        });
+});
+
+Then('the user can see the relationship widget without the deleted relationship', () => {
+    cy.get('[data-test="tracked-entity-relationship-widget"]')
+        .within(() => {
+            cy.get('[data-test="relationship-table-body"]')
+                .should('not.exist');
+        });
+});
diff --git a/cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEnrollmentDashboard.feature b/cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEnrollmentDashboard.feature
@@ -31,7 +31,7 @@ Feature: The user interacts with the widgets on the enrollment dashboard
     And the user sets the birthday date to the current date
     Then the user see the following text: The womans age is outside the normal range. With the birthdate entered, the age would be: 0
 
-  Scenario: The user updates the TEI attributes. The changes are reflected in the whole page. 
+  Scenario: The user updates the TEI attributes. The changes are reflected in the whole page.
     Given you land on the enrollment dashboard page by having typed #/enrollment?enrollmentId=TjP3J9cf0z1&orgUnitId=CgunjDKbM45&programId=WSGAb5XwJ3Y&teiId=jzIwoNXIZsK
     When the user clicks the element containing the text: Edit
     And the user sees the edit profile modal
@@ -132,4 +132,15 @@ Feature: The user interacts with the widgets on the enrollment dashboard
 
   Scenario: The program rules are triggered and the effects are displayed in the sidebar widgets
     Given you land on the enrollment dashboard page by having typed #/enrollment?enrollmentId=wBU0RAsYjKE
-    Then the user can see the program rules effect in the indicator widget
+    Then the user can see the program rules effect in the indicator widget
+
+# TODO: Enable this test before merge. Blocked by a bug in the API.
+#  @with-mocked-relationship-data
+#  Scenario: The user is able to delete a relationship
+#    Given you land on the enrollment dashboard page by having typed #/enrollment?enrollmentId=wBU0RAsYjKE
+#    Then the user can see the relationship widget
+#    And there is an existing relationship
+#    When the user clicks the delete button
+#    Then the user can see the delete relationship modal
+#    When the user clicks the confirm delete button
+#    Then the user can see the relationship widget without the deleted relationship
diff --git a/cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEnrollmentDashboard/index.js b/cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEnrollmentDashboard/index.js
@@ -1,6 +1,7 @@
 import { When, Then } from '@badeball/cypress-cucumber-preprocessor';
 import moment from 'moment';
 import '../sharedSteps';
+import '../WidgetTeiRelationship';
 import '../WidgetEnrollment';
 import '../WidgetProfile';
 import '../WidgetEnrollmentComment';

diff --git a/...s/WidgetsRelationship/common/RelationshipsWidget/DeleteRelationship/DeleteRelationship.js b/...s/WidgetsRelationship/common/RelationshipsWidget/DeleteRelationship/DeleteRelationship.js
@@ -11,6 +11,7 @@ import {
     ModalActions,
     ButtonStrip,
     Button,
+    colors,
 } from '@dhis2/ui';
 import { IconButton } from 'capture-ui';
 import { withStyles } from '@material-ui/core/styles';
@@ -27,7 +28,6 @@ const styles = {
     tableCell: {
         display: 'flex',
         justifyContent: 'center',
-        zIndex: 1000,
     },
 };
 
@@ -41,15 +41,17 @@ export const DeleteRelationshipPlain = ({ handleDeleteRelationship, disabled, cl
                         if (disabled) return;
                         setIsModalOpen(true);
                     }}
+                    dataTest={'delete-relationship-button'}
                 >
-                    <IconDelete16 />
+                    <IconDelete16 color={colors.red600} />
                 </IconButton>
             </DataTableCell>
 
             {isModalOpen && (
                 <Modal
                     hide={!isModalOpen}
                     onClose={() => setIsModalOpen(false)}
+                    dataTest={'delete-relationship-modal'}
                 >
                     <ModalTitle>{i18n.t('Delete relationship')}</ModalTitle>
                     <ModalContent>
@@ -64,6 +66,7 @@ export const DeleteRelationshipPlain = ({ handleDeleteRelationship, disabled, cl
 
                             <Button
                                 destructive
+                                dataTest={'delete-relationship-confirmation-button'}
                                 onClick={() => {
                                     handleDeleteRelationship();
                                     setIsModalOpen(false);

diff --git a/...idgetsRelationship/common/RelationshipsWidget/DeleteRelationship/useDeleteRelationship.js b/...idgetsRelationship/common/RelationshipsWidget/DeleteRelationship/useDeleteRelationship.js
@@ -1,5 +1,7 @@
 // @flow
 import i18n from '@dhis2/d2-i18n';
+import log from 'loglevel';
+import { errorCreator } from 'capture-core-utils';
 import { useMutation, useQueryClient } from 'react-query';
 import { useAlert, useDataEngine } from '@dhis2/app-runtime';
 import { ReactQueryAppNamespace } from '../../../../../utils/reactQueryHelpers';
@@ -34,18 +36,29 @@ export const useDeleteRelationship = ({ sourceId }: Props): { onDeleteRelationsh
         ({ relationshipId }) => dataEngine.mutate(deleteRelationshipMutation, { variables: { relationshipId } }),
         {
             onMutate: ({ relationshipId }) => {
-                const currentRelationships = queryClient
+                const prevRelationships = queryClient
                     .getQueryData([ReactQueryAppNamespace, 'relationships', sourceId]);
 
-                const newRelationships = currentRelationships
+                const newRelationships = prevRelationships
                     ?.instances
                     .filter(({ relationship }) => relationship !== relationshipId);
 
                 queryClient.setQueryData(
                     [ReactQueryAppNamespace, 'relationships', sourceId],
                     { instances: newRelationships });
+
+                return { prevRelationships };
+            },
+            onError: (error, { relationshipId }, context) => {
+                log.error(errorCreator('An error occurred while deleting the relationship')({ error, relationshipId }));
+                showError();
+
+                if (!context?.prevRelationships) return;
+                queryClient.setQueryData(
+                    [ReactQueryAppNamespace, 'relationships', sourceId],
+                    context.prevRelationships,
+                );
             },
-            onError: showError,
         },
     );
 

diff --git a/...ponents/WidgetsRelationship/common/RelationshipsWidget/LinkedEntityTableBody.component.js b/...ponents/WidgetsRelationship/common/RelationshipsWidget/LinkedEntityTableBody.component.js
@@ -30,14 +30,15 @@ const LinkedEntityTableBodyPlain = ({
     onDeleteRelationship,
     classes,
 }: StyledProps) => (
-    <DataTableBody>
+    <DataTableBody dataTest="relationship-table-body">
         {
             linkedEntities
                 .map(({ id: entityId, values, baseValues, navigation }) => {
                     const { pendingApiResponse, relationshipId } = baseValues || {};
                     return (
                         <DataTableRow
                             key={entityId}
+                            dataTest={'relationship-table-row'}
                             className={pendingApiResponse ? classes.rowDisabled : classes.row}
                         >
                             {

diff --git a/...omponents/WidgetsRelationship/common/RelationshipsWidget/RelationshipsWidget.component.js b/...omponents/WidgetsRelationship/common/RelationshipsWidget/RelationshipsWidget.component.js
@@ -56,7 +56,7 @@ const RelationshipsWidgetPlain = ({
 
     return (
         <div
-            data-test="relationship-widget"
+            data-test="tracked-entity-relationship-widget"
         >
             <Widget
                 header={(