fix: [DHIS2-15694] Cancel button in Relationship (#3471)

dhis2 · Dec 5, 2023 · c1dfbdb · c1dfbdb
1 parent a13a766
commit c1dfbdb
Show file tree

Hide file tree

Showing 34 changed files with 104 additions and 50 deletions.
diff --git a/cypress/e2e/NewEventThroughAddRelationship.feature b/cypress/e2e/NewEventThroughAddRelationship.feature
@@ -23,3 +23,8 @@ Feature: User adds events
         And you submit the event form with the associated relationship to the already existing person
         Then the event and relationship should be sent to the server successfully
 
+    Scenario: User gets navigated correctly when clicking on the back button
+        Given you open the the new event page in Ngelehun and malaria case context
+        When you navigate to register a person relationship
+        And you click the cancel button
+        Then you should be navigated back to the event form
diff --git a/cypress/e2e/NewEventThroughAddRelationship/index.js b/cypress/e2e/NewEventThroughAddRelationship/index.js
@@ -168,3 +168,12 @@ Then('the event and relationship should be sent to the server successfully', ()
                 });
         });
 });
+
+When('you click the cancel button', () => {
+    cy.get('[data-test="cancel-button"]')
+        .click();
+});
+
+Then('you should be navigated back to the event form', () => {
+    cy.contains('New Malaria case registration');
+});
diff --git a/cypress/e2e/NewPage.feature b/cypress/e2e/NewPage.feature
@@ -94,6 +94,13 @@ Feature: User creates a new entries from the registration page
     Then you are navigated to the Antenatal care visit registration page
     Then program and organisation unit is still selected in top bar
 
+  Scenario: Clicking the cancel button should navigate with correct context
+    Given you are on the default registration page
+    And you select org unit
+    And you select Child Programme
+    When you click the cancel button
+    Then you are navigated to the working list with programId IpHINAT79UW
+
 
 ### New event in Antenatal care visit
   Scenario: New event in Antenatal care visit > Submitting the form with empty visit date throws validation error

diff --git a/...mponents/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.component.js b/...mponents/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.component.js
@@ -4,7 +4,6 @@ import { Button, spacers } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import { withStyles } from '@material-ui/core';
 import { compose } from 'redux';
-import { useHistory } from 'react-router-dom';
 import { useScopeInfo } from '../../../hooks/useScopeInfo';
 import { scopeTypes } from '../../../metaData';
 import { DiscardDialog } from '../../Dialogs/DiscardDialog.component';
@@ -14,7 +13,6 @@ import { withSaveHandler } from '../../DataEntry';
 import { withLoadingIndicator } from '../../../HOC';
 import { InfoIconText } from '../../InfoIconText';
 import { withErrorMessagePostProcessor } from '../withErrorMessagePostProcessor';
-import { buildUrlQueryString } from '../../../utils/routing';
 import { withDuplicateCheckOnSave } from '../common/TEIAndEnrollment/DuplicateCheckOnSave';
 import { defaultDialogProps } from '../../Dialogs/DiscardDialog.constants';
 
@@ -52,6 +50,7 @@ const EnrollmentRegistrationEntryPlain =
       saveButtonText,
       classes,
       onSave,
+      onCancel,
       onPostProcessErrorMessage,
       orgUnitId,
       orgUnit,
@@ -60,26 +59,16 @@ const EnrollmentRegistrationEntryPlain =
       isSavingInProgress,
       ...rest
   }: PlainProps) => {
-      const { push } = useHistory();
       const [showWarning, setShowWarning] = useState(false);
       const { scopeType, trackedEntityName, programName } = useScopeInfo(selectedScopeId);
 
       const handleOnCancel = () => {
           if (!isUserInteractionInProgress) {
-              navigateToWorkingListsPage();
+              onCancel();
           } else {
               setShowWarning(true);
           }
       };
-      const navigateToWorkingListsPage = () => {
-          const url =
-            scopeType === scopeTypes.TRACKER_PROGRAM
-                ?
-                buildUrlQueryString({ programId: selectedScopeId, orgUnitId })
-                :
-                buildUrlQueryString({ orgUnitId });
-          return push(`/?${url}`);
-      };
 
       return (
           <>
@@ -130,7 +119,7 @@ const EnrollmentRegistrationEntryPlain =
               }
               <DiscardDialog
                   {...defaultDialogProps}
-                  onDestroy={navigateToWorkingListsPage}
+                  onDestroy={onCancel}
                   open={!!showWarning}
                   onCancel={() => { setShowWarning(false); }}
               />

diff --git a/...mponents/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.container.js b/...mponents/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.container.js
@@ -19,6 +19,7 @@ export const EnrollmentRegistrationEntry: ComponentType<OwnProps> = ({
     orgUnitId,
     teiId,
     onSave,
+    onCancel,
     ...passOnProps
 }) => {
     const { orgUnit, error } = useCoreOrgUnit(orgUnitId);
@@ -68,6 +69,7 @@ export const EnrollmentRegistrationEntry: ComponentType<OwnProps> = ({
             formId={formId}
             formFoundation={formFoundation}
             id={id}
+            onCancel={onCancel}
             saveButtonText={saveButtonText(trackedEntityTypeNameLC)}
             ready={ready && !!enrollmentMetadata}
             teiId={teiId}

diff --git a/...e/components/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.types.js b/...e/components/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.types.js
@@ -40,6 +40,7 @@ export type OwnProps = $ReadOnly<{|
     selectedScopeId: string,
     fieldOptions?: Object,
     onSave: SaveForDuplicateCheck,
+    onCancel: () => void,
     duplicatesReviewPageSize: number,
     renderDuplicatesCardActions?: RenderCustomCardActions,
     renderDuplicatesDialogActions?: (onCancel: () => void, onSave: SaveForDuplicateCheck) => Node,
@@ -55,6 +56,7 @@ type ContainerProps = {|
     ready: boolean,
     orgUnitId: string,
     orgUnit: ?OrgUnit,
+    onCancel: () => void,
     isUserInteractionInProgress: boolean,
     isSavingInProgress: boolean,
     enrollmentMetadata: RegistrationFormMetadata,

diff --git a/...EventRegistrationEntry/NewRelationshipWrapper/NewEventNewRelationshipWrapper.component.js b/...EventRegistrationEntry/NewRelationshipWrapper/NewEventNewRelationshipWrapper.component.js
@@ -115,6 +115,7 @@ class NewEventNewRelationshipWrapper extends React.Component<Props, State> {
                     <NewRelationship
                         header={i18n.t('New event relationship')}
                         onGetUnsavedAttributeValues={this.onGetUnsavedAttributeValues}
+                        onCancel={onCancel}
                         {...passOnProps}
                     />
                 </Paper>

diff --git a/...onents/DataEntries/SingleEventRegistrationEntry/SingleEventRegistrationEntry.container.js b/...onents/DataEntries/SingleEventRegistrationEntry/SingleEventRegistrationEntry.container.js
@@ -24,8 +24,7 @@ const makeMapStateToProps = (): MapStateToProps => {
     });
 };
 
-const mapDispatchToProps = () => ({
-});
+const mapDispatchToProps = () => ({});
 
 const mergeProps = (stateProps: StateProps): StateProps => (stateProps);
 

diff --git a/...components/DataEntries/SingleEventRegistrationEntry/SingleEventRegistrationEntry.types.js b/...components/DataEntries/SingleEventRegistrationEntry/SingleEventRegistrationEntry.types.js
@@ -16,4 +16,8 @@ export type ContainerProps = {|
     id: string,
 |};
 
+export type DispatchProps = {|
+    onCancel: () => void,
+|};
+
 export type MapStateToProps = (ReduxState, ContainerProps) => StateProps;
diff --git a/...apture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.component.js b/...apture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.component.js
@@ -4,7 +4,6 @@ import { compose } from 'redux';
 import { Button, spacers } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import { withStyles } from '@material-ui/core';
-import { useHistory } from 'react-router-dom';
 import { useScopeInfo } from '../../../hooks/useScopeInfo';
 import { scopeTypes } from '../../../metaData';
 import { TrackedEntityInstanceDataEntry } from '../TrackedEntityInstance';
@@ -15,7 +14,6 @@ import { DiscardDialog } from '../../Dialogs/DiscardDialog.component';
 import { withSaveHandler } from '../../DataEntry';
 import { InfoIconText } from '../../InfoIconText';
 import { withErrorMessagePostProcessor } from '../withErrorMessagePostProcessor';
-import { buildUrlQueryString } from '../../../utils/routing';
 import { withDuplicateCheckOnSave } from '../common/TEIAndEnrollment/DuplicateCheckOnSave';
 import { defaultDialogProps } from '../../Dialogs/DiscardDialog.constants';
 import { useMetadataForRegistrationForm } from '../common/TEIAndEnrollment/useMetadataForRegistrationForm';
@@ -49,9 +47,9 @@ const TeiRegistrationEntryPlain =
       trackedEntityName,
       isUserInteractionInProgress,
       isSavingInProgress,
+      onCancel,
       ...rest
   }: PlainProps) => {
-      const { push } = useHistory();
       const [showWarning, setShowWarning] = useState(false);
       const { scopeType } = useScopeInfo(selectedScopeId);
       const { formId, formFoundation } = useMetadataForRegistrationForm({ selectedScopeId });
@@ -60,22 +58,12 @@ const TeiRegistrationEntryPlain =
 
       const handleOnCancel = () => {
           if (!isUserInteractionInProgress) {
-              navigateToWorkingListsPage();
+              onCancel();
           } else {
               setShowWarning(true);
           }
       };
 
-      const navigateToWorkingListsPage = () => {
-          const url =
-            scopeType === scopeTypes.TRACKER_PROGRAM
-                ?
-                buildUrlQueryString({ programId: selectedScopeId, orgUnitId })
-                :
-                buildUrlQueryString({ orgUnitId });
-          return push(`/?${url}`);
-      };
-
       return (
           <>
               {
@@ -120,7 +108,7 @@ const TeiRegistrationEntryPlain =
 
                       <DiscardDialog
                           {...defaultDialogProps}
-                          onDestroy={navigateToWorkingListsPage}
+                          onDestroy={onCancel}
                           open={!!showWarning}
                           onCancel={() => { setShowWarning(false); }}
                       />

diff --git a/...es/capture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.types.js b/...es/capture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.types.js
@@ -15,6 +15,7 @@ export type OwnProps = $ReadOnly<{|
     saveButtonText: string,
     fieldOptions?: Object,
     onSave: (TeiPayload) => void,
+    onCancel: () => void,
     duplicatesReviewPageSize: number,
     isSavingInProgress?: boolean,
     inheritedAttributes?: Array<InputAttribute>,

diff --git a/...apture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js b/...apture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js
@@ -1,6 +1,7 @@
 // @flow
 import React, { type ComponentType, useContext, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
+import { useHistory } from 'react-router';
 import i18n from '@dhis2/d2-i18n';
 import { Button, colors, spacers } from '@dhis2/ui';
 import { Grid, withStyles } from '@material-ui/core';
@@ -13,7 +14,7 @@ import { TrackedEntityTypeSelector } from '../../../TrackedEntityTypeSelector';
 import { DataEntryWidgetOutput } from '../../../DataEntryWidgetOutput/DataEntryWidgetOutput.container';
 import { ResultsPageSizeContext } from '../../shared-contexts';
 import { navigateToEnrollmentOverview } from '../../../../actions/navigateToEnrollmentOverview/navigateToEnrollmentOverview.actions';
-import { useLocationQuery } from '../../../../utils/routing';
+import { buildUrlQueryString, useLocationQuery } from '../../../../utils/routing';
 import { EnrollmentRegistrationEntryWrapper } from '../EnrollmentRegistrationEntryWrapper.component';
 import { useCurrentOrgUnitId } from '../../../../hooks/useCurrentOrgUnitId';
 
@@ -94,18 +95,29 @@ const RegistrationDataEntryPlain = ({
     teiId,
     trackedEntityInstanceAttributes,
 }: Props) => {
+    const { push } = useHistory();
     const { resultsPageSize } = useContext(ResultsPageSizeContext);
     const { scopeType, programName, trackedEntityName } = useScopeInfo(selectedScopeId);
     const titleText = useScopeTitleText(selectedScopeId);
     const currentOrgUnitId = useCurrentOrgUnitId();
 
+    const onCancel = useCallback(() => {
+        let url;
+        if (scopeType === scopeTypes.TRACKER_PROGRAM) {
+            url = buildUrlQueryString({ programId: selectedScopeId, orgUnitId: currentOrgUnitId });
+        } else {
+            url = buildUrlQueryString({ orgUnitId: currentOrgUnitId });
+        }
+        return push(`/?${url}`);
+    }, [currentOrgUnitId, push, scopeType, selectedScopeId]);
+
     const handleRegistrationScopeSelection = (id) => {
         setScopeId(id);
     };
 
-    const renderDuplicatesDialogActions = useCallback((onCancel, onSave) => (
+    const renderDuplicatesDialogActions = useCallback((callbackOnCancel, onSave) => (
         <DialogButtons
-            onCancel={onCancel}
+            onCancel={callbackOnCancel}
             onSave={onSave}
         />
     ), []);
@@ -180,6 +192,7 @@ const RegistrationDataEntryPlain = ({
                                     teiId={teiId}
                                     selectedScopeId={selectedScopeId}
                                     onSave={onSaveWithEnrollment}
+                                    onCancel={onCancel}
                                     saveButtonText={(trackedEntityTypeNameLC: string) => i18n.t('Save {{trackedEntityTypeName}}', {
                                         trackedEntityTypeName: trackedEntityTypeNameLC,
                                         interpolation: { escapeValue: false },
@@ -232,6 +245,7 @@ const RegistrationDataEntryPlain = ({
                                     id={dataEntryId}
                                     selectedScopeId={selectedScopeId}
                                     orgUnitId={currentOrgUnitId}
+                                    onCancel={onCancel}
                                     saveButtonText={i18n.t('Save {{trackedEntityName}}', {
                                         trackedEntityName,
                                         interpolation: { escapeValue: false },

diff --git a/...es/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.types.js b/...es/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.types.js
@@ -17,7 +17,7 @@ export type OwnProps = $ReadOnly<{|
   selectedScopeId: string,
   dataEntryId: string,
   teiId?: ?string,
-  trackedEntityInstanceAttributes?: Array<InputAttribute>
+  trackedEntityInstanceAttributes?: Array<InputAttribute>,
 |}>;
 
 type ContainerProps = {|

diff --git a/src/core_modules/capture-core/components/Pages/NewRelationship/NewRelationship.component.js b/src/core_modules/capture-core/components/Pages/NewRelationship/NewRelationship.component.js
@@ -9,6 +9,7 @@ import { RelationshipNavigation } from './RelationshipNavigation/RelationshipNav
 
 type Props = {
     onAddRelationship: (relationshipType: { id: string, name: string }, entity: Object, entityType: string) => void,
+    onCancel: () => {},
     classes: {
         container: string,
     },

diff --git a/...s/Pages/NewRelationship/RegisterTei/DataEntry/Enrollment/DataEntryEnrollment.component.js b/...s/Pages/NewRelationship/RegisterTei/DataEntry/Enrollment/DataEntryEnrollment.component.js
@@ -12,6 +12,7 @@ const NewEnrollmentRelationshipPlain =
     ({
         theme,
         onSave,
+        onCancel,
         programId,
         duplicatesReviewPageSize,
         renderDuplicatesDialogActions,
@@ -33,6 +34,7 @@ const NewEnrollmentRelationshipPlain =
                     interpolation: { escapeValue: false },
                 })}
                 onSave={onSave}
+                onCancel={onCancel}
                 duplicatesReviewPageSize={duplicatesReviewPageSize}
                 renderDuplicatesDialogActions={renderDuplicatesDialogActions}
                 renderDuplicatesCardActions={renderDuplicatesCardActions}

diff --git a/...nents/Pages/NewRelationship/RegisterTei/DataEntry/Enrollment/dataEntryEnrollment.types.js b/...nents/Pages/NewRelationship/RegisterTei/DataEntry/Enrollment/dataEntryEnrollment.types.js
@@ -12,6 +12,7 @@ export type Props = {|
     programId: string,
     enrollmentMetadata?: Enrollment,
     onSave: SaveForEnrollmentAndTeiRegistration,
+    onCancel: () => void,
     duplicatesReviewPageSize: number,
     renderDuplicatesCardActions?: RenderCustomCardActions,
     renderDuplicatesDialogActions?: (onCancel: () => void, onSave: SaveForEnrollmentAndTeiRegistration) => Node,

diff --git a/...p/RegisterTei/DataEntry/TrackedEntityInstance/DataEntryTrackedEntityInstance.component.js b/...p/RegisterTei/DataEntry/TrackedEntityInstance/DataEntryTrackedEntityInstance.component.js
@@ -12,6 +12,7 @@ const RelationshipTrackedEntityInstancePlain =
     ({
         theme,
         onSave,
+        onCancel,
         teiRegistrationMetadata = {},
         duplicatesReviewPageSize,
         renderDuplicatesDialogActions,
@@ -35,6 +36,7 @@ const RelationshipTrackedEntityInstancePlain =
                 })}
                 fieldOptions={fieldOptions}
                 onSave={onSave}
+                onCancel={onCancel}
                 duplicatesReviewPageSize={duplicatesReviewPageSize}
                 renderDuplicatesDialogActions={renderDuplicatesDialogActions}
                 renderDuplicatesCardActions={renderDuplicatesCardActions}

diff --git a/...nship/RegisterTei/DataEntry/TrackedEntityInstance/dataEntryTrackedEntityInstance.types.js b/...nship/RegisterTei/DataEntry/TrackedEntityInstance/dataEntryTrackedEntityInstance.types.js
@@ -12,6 +12,7 @@ import type {
 export type Props = {|
     theme: Theme,
     onSave: (TeiPayload) => void,
+    onCancel: () => void,
     teiRegistrationMetadata?: TeiRegistration,
     duplicatesReviewPageSize: number,
     renderDuplicatesCardActions?: RenderCustomCardActions,

diff --git a/...odules/capture-core/components/Pages/NewRelationship/RegisterTei/RegisterTei.component.js b/...odules/capture-core/components/Pages/NewRelationship/RegisterTei/RegisterTei.component.js
@@ -60,6 +60,7 @@ const RegisterTeiPlain = ({
     itemId,
     onLink,
     onSave,
+    onCancel,
     onGetUnsavedAttributeValues,
     trackedEntityName,
     newRelationshipProgramId,
@@ -75,9 +76,9 @@ const RegisterTeiPlain = ({
         />
     ), [onLink]);
 
-    const renderDuplicatesDialogActions = useCallback((onCancel, onSaveArgument) => (
+    const renderDuplicatesDialogActions = useCallback((callbackOnCancel, onSaveArgument) => (
         <DialogButtons
-            onCancel={onCancel}
+            onCancel={callbackOnCancel}
             onSave={onSaveArgument}
             trackedEntityName={trackedEntityName}
         />
@@ -104,6 +105,7 @@ const RegisterTeiPlain = ({
                 <RegisterTeiDataEntry
                     onLink={onLink}
                     onSave={handleSave}
+                    onCancel={onCancel}
                     onGetUnsavedAttributeValues={onGetUnsavedAttributeValues}
                     duplicatesReviewPageSize={resultsPageSize}
                     renderDuplicatesDialogActions={renderDuplicatesDialogActions}

diff --git a/...odules/capture-core/components/Pages/NewRelationship/RegisterTei/RegisterTei.container.js b/...odules/capture-core/components/Pages/NewRelationship/RegisterTei/RegisterTei.container.js
@@ -17,7 +17,7 @@ const useNewRelationshipScopeId = (): string =>
         }) => (programId || trackedEntityTypeId),
     );
 
-export const RegisterTei = ({ onLink, onSave, onGetUnsavedAttributeValues }: OwnProps) => {
+export const RegisterTei = ({ onLink, onSave, onCancel, onGetUnsavedAttributeValues }: OwnProps) => {
     const dataEntryId = 'relationship';
     const itemId = useSelector(({ dataEntries }) => dataEntries[dataEntryId]?.itemId);
     const error = useSelector(({ newRelationshipRegisterTei }) => (newRelationshipRegisterTei.error));
@@ -30,6 +30,7 @@ export const RegisterTei = ({ onLink, onSave, onGetUnsavedAttributeValues }: Own
             itemId={itemId}
             onLink={onLink}
             onSave={onSave}
+            onCancel={onCancel}
             onGetUnsavedAttributeValues={onGetUnsavedAttributeValues}
             trackedEntityName={trackedEntityName}
             newRelationshipProgramId={newRelationshipProgramId}
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,8 +24,7 @@ const makeMapStateToProps = (): MapStateToProps => { @@
         });
     };
-    const mapDispatchToProps = () => ({
-    });
+    const mapDispatchToProps = () => ({});
     const mergeProps = (stateProps: StateProps): StateProps => (stateProps);
@@ Expand Down @@