fix: [DHIS2-18978] Back buttons duplicate breadcrumbs

cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageNavigation/EnrollmentEditEventPageNavigation.feature

@@ -14,6 +14,6 @@ Feature: User interacts with Enrollment event page
     Then the view enrollment event form is in view mode
     And you see the following antenatal care visit
     And you see the following No ARV medication plan
-    When the user clicks the "Back to all stages and events" button
+    When the user clicks the "Enrollment dashboard" breadcrumb item
     Then the user is navigated to the enrollment dashboard
     And the program stages should be displayed

cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageNavigation/EnrollmentEditEventPageNavigation.js

@@ -20,8 +20,8 @@ When('the user clicks the first second antenatal care visit event', () => {
         .click();
 });
 
-When(/^the user clicks the "Back to all stages and events" button/, () =>
-    cy.get('[data-test="enrollment-edit-event-back-button"]')
+When(/^the user clicks the "Enrollment dashboard" breadcrumb item/, () =>
+    cy.get('[data-test="enrollment-breadcrumb-overview-item"]')
         .click(),
 );
 

cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEnrollmentAddEventPage/WidgetsForEnrollmentAddEventPage.js

@@ -15,8 +15,8 @@ Then('you can assign a user when scheduling the event', () => {
     });
 });
 
-When(/^the user clicks the "Back to all stages and events" button/, () =>
-    cy.get('[data-test="enrollment-edit-event-back-button"]')
+When(/^the user clicks the "Enrollment dashboard" breadcrumb item/, () =>
+    cy.get('[data-test="enrollment-breadcrumb-overview-item"]')
         .click(),
 );
 

cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEnrollmentDashboard/WidgetsForEnrollmentDashboard.feature

@@ -78,7 +78,8 @@ Feature: The user interacts with the widgets on the enrollment dashboard
 
   Scenario: You can delete a tracked entity from the profile widget
     Given you add a new tracked entity in the Malaria focus investigation program
-    When the user clicks the "Back to all stages and events" button 
+    When the user clicks the "Enrollment dashboard" breadcrumb item
+    Then the user should see the confirm dialog
     When you open the overflow menu and click the "Delete Focus area" button
     Then you see the delete tracked entity confirmation modal
     When you confirm by clicking the "Yes, delete Focus area" button

cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEnrollmentDashboard/WidgetsForEnrollmentDashboard.js

@@ -50,8 +50,18 @@ Then(/^the scope selector list contains the text (.*)$/, (name) => {
     });
 });
 
-When(/^the user clicks the "Back to all stages and events" button/, () =>
-    cy.get('[data-test="enrollment-edit-event-back-button"]')
+When(/^the user clicks the "Enrollment dashboard" breadcrumb item/, () =>
+    cy.get('[data-test="enrollment-breadcrumb-overview-item"]')
         .click(),
 );
 
+Then('the user should see the confirm dialog', () => {
+    cy.get('aside[role="dialog"]')
+        .find('[data-test="dhis2-uicore-modaltitle"]')
+        .contains('Discard unsaved changes?')
+        .should('exist');
+
+    cy.get('[role="dialog"]')
+        .find('[data-test="dhis2-uicore-button"]')
+        .contains('Yes, discard changes').click({ force: true });
+});

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2025-01-27T10:03:03.122Z\n"
-"PO-Revision-Date: 2025-01-27T10:03:03.122Z\n"
+"POT-Creation-Date: 2025-02-06T18:07:20.352Z\n"
+"PO-Revision-Date: 2025-02-06T18:07:20.352Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -896,9 +896,6 @@ msgstr "Indicators"
 msgid "Warnings"
 msgstr "Warnings"
 
-msgid "Show all events"
-msgstr "Show all events"
-
 msgid "Event could not be loaded. Are you sure it exists?"
 msgstr "Event could not be loaded. Are you sure it exists?"
 
@@ -934,9 +931,6 @@ msgstr "Loading"
 msgid "An error occurred while loading the form"
 msgstr "An error occurred while loading the form"
 
-msgid "Back to all stages and events"
-msgstr "Back to all stages and events"
-
 msgid "Possible duplicates found"
 msgstr "Possible duplicates found"
 

src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/EnrollmentBreadcrumb.js

@@ -128,6 +128,7 @@ const BreadcrumbsPlain = ({
                         label={button.label}
                         onClick={button.onClick}
                         selected={button.selected}
+                        dataTest={`enrollment-breadcrumb-${button.key}-item`}
                     />
                     {index < (breadcrumbItems.length - 1) && (
                         <IconChevronRight16 color={colors.grey800} />

src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/EventBreadcrumb.js

@@ -85,6 +85,7 @@ const EventBreadcrumbPlain = ({
                         onClick={button.onClick}
                         selected={button.selected}
                         classes={classes}
+                        dataTest={`event-breadcrumb-${button.key}-item`}
                     />
                     {index < (breadcrumbItems.length - 1) && (
                         <IconChevronRight16 color={colors.grey800} />

src/core_modules/capture-core/components/Breadcrumbs/common/BreadcrumbItem.js

@@ -8,6 +8,7 @@ type Props = {
     label: string,
     onClick: () => void,
     selected: boolean,
+    dataTest: string,
 };
 
 const styles = {
@@ -34,11 +35,12 @@ const styles = {
     },
 };
 
-const BreadcrumbItemPlain = ({ label, onClick, selected, classes }) => (
+const BreadcrumbItemPlain = ({ label, onClick, selected, dataTest, classes }) => (
     <button
         type="button"
         className={cx(classes.button, { selected })}
         onClick={onClick}
+        data-test={dataTest}
     >
         {label}
     </button>

src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.component.js

@@ -30,7 +30,6 @@ export const EnrollmentEditEventPageComponent = ({
     hideWidgets,
     onDelete,
     onAddNew,
-    onGoBack,
     onLinkedRecordClick,
     orgUnitId,
     eventDate,
@@ -84,7 +83,6 @@ export const EnrollmentEditEventPageComponent = ({
             onSaveExternal={onSaveExternal}
             trackedEntityTypeId={trackedEntityTypeId}
             programStage={programStage}
-            onGoBack={onGoBack}
             program={program}
             orgUnitId={orgUnitId}
             teiId={teiId}

src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.container.js

@@ -251,7 +251,6 @@ const EnrollmentEditEventPageWithContextPlain = ({
             mode={currentPageMode}
             pageStatus={pageStatus}
             programStage={programStage}
-            onGoBack={onGoBack}
             onBackToMainPage={onBackToMainPage}
             onBackToDashboard={onGoBack}
             onBackToViewEvent={onBackToViewEvent}

src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.types.js

@@ -28,7 +28,6 @@ export type PlainProps = {|
     enrollmentsAsOptions: Array<Object>,
     onDelete: () => void,
     onAddNew: () => void,
-    onGoBack: () => void,
     onBackToMainPage: () => void,
     onBackToDashboard: () => void,
     onBackToViewEvent: () => void,

src/core_modules/capture-core/components/Pages/ViewEvent/ViewEventComponent/ViewEvent.component.js

@@ -1,8 +1,7 @@
 // @flow
 import React, { Component } from 'react';
-import i18n from '@dhis2/d2-i18n';
 import { withStyles } from '@material-ui/core/styles';
-import { Button, IconChevronLeft24, spacers } from '@dhis2/ui';
+import { spacers } from '@dhis2/ui';
 import { EventDetails } from '../EventDetailsSection/EventDetailsSection.container';
 import { RightColumnWrapper } from '../RightColumn/RightColumnWrapper.component';
 import type { ProgramStage } from '../../../../metaData';
@@ -24,9 +23,6 @@ const getStyles = (theme: Theme) => ({
         marginBottom: theme.typography.pxToRem(10),
         padding: theme.typography.pxToRem(10),
     },
-    showAllEvents: {
-        marginBottom: spacers.dp12,
-    },
     header: {
         ...theme.typography.title,
         fontSize: 18,
@@ -72,14 +68,6 @@ class ViewEventPlain extends Component<Props, State> {
             warningOpen: false,
         };
     }
-    handleGoBackToAllEvents = () => {
-        const { isUserInteractionInProgress, onBackToAllEvents } = this.props;
-        if (!isUserInteractionInProgress) {
-            onBackToAllEvents();
-        } else {
-            this.setState({ warningOpen: true });
-        }
-    }
 
     render() {
         const {
@@ -107,31 +95,21 @@ class ViewEventPlain extends Component<Props, State> {
                     onBackToViewEvent={onBackToViewEvent}
                     onBackToMainPage={onBackToAllEvents}
                 />
-                <div>
-                    <Button
-                        className={classes.showAllEvents}
-                        onClick={this.handleGoBackToAllEvents}
-                        small
-                        icon={<IconChevronLeft24 />}
-                    >
-                        {i18n.t('Show all events')}
-                    </Button>
-                    <div className={classes.contentContainer}>
-                        <EventDetails
-                            eventAccess={eventAccess}
-                            programStage={programStage}
-                            onBackToAllEvents={onBackToAllEvents}
-                        />
-                        <RightColumnWrapper
-                            eventAccess={eventAccess}
-                            programStage={programStage}
-                            dataEntryKey={currentDataEntryKey}
-                            assignee={assignee}
-                            getAssignedUserSaveContext={getAssignedUserSaveContext}
-                            onSaveAssignee={onSaveAssignee}
-                            onSaveAssigneeError={onSaveAssigneeError}
-                        />
-                    </div>
+                <div className={classes.contentContainer}>
+                    <EventDetails
+                        eventAccess={eventAccess}
+                        programStage={programStage}
+                        onBackToAllEvents={onBackToAllEvents}
+                    />
+                    <RightColumnWrapper
+                        eventAccess={eventAccess}
+                        programStage={programStage}
+                        dataEntryKey={currentDataEntryKey}
+                        assignee={assignee}
+                        getAssignedUserSaveContext={getAssignedUserSaveContext}
+                        onSaveAssignee={onSaveAssignee}
+                        onSaveAssigneeError={onSaveAssigneeError}
+                    />
                 </div>
                 <DiscardDialog
                     {...defaultDialogProps}

src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/LayoutComponentConfig/LayoutComponentConfig.js

@@ -213,7 +213,6 @@ export const EnrollmentWidget: WidgetConfig = {
 export const EditEventWorkspace: WidgetConfig = {
     Component: WidgetEventEditWrapper,
     getProps: ({
-        onGoBack,
         program,
         orgUnitId,
         teiId,
@@ -230,7 +229,6 @@ export const EditEventWorkspace: WidgetConfig = {
         onSaveAndCompleteEnrollmentErrorActionType,
         onSaveAndCompleteEnrollmentSuccessActionType,
     }): WidgetEventEditProps => ({
-        onGoBack,
         programId: program.id,
         stageId,
         orgUnitId,

src/core_modules/capture-core/components/Pages/common/WidgetEventEditWrapper/WidgetEventEditWrapper.js

@@ -1,6 +1,5 @@
 // @flow
 import React from 'react';
-import { IconArrowLeft24, Button } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import { pageStatuses } from '../../EnrollmentEditEvent/EnrollmentEditEventPage.constants';
 import { IncompleteSelectionsMessage } from '../../../IncompleteSelectionsMessage';
@@ -17,7 +16,6 @@ export const WidgetEventEditWrapper = ({ pageStatus, ...passOnProps }: WidgetPro
     const {
         programId,
         stageId,
-        onGoBack,
     } = passOnProps;
 
     const {
@@ -58,20 +56,12 @@ export const WidgetEventEditWrapper = ({ pageStatus, ...passOnProps }: WidgetPro
     }
 
     return (
-        <>
-            <div>
-                <Button secondary onClick={onGoBack} dataTest="enrollment-edit-event-back-button">
-                    <IconArrowLeft24 />
-                    {i18n.t('Back to all stages and events')}
-                </Button>
-            </div>
-            <WidgetEventEdit
-                {...passOnProps}
-                stage={stage}
-                formFoundation={formFoundation}
-                programId={programId}
-                stageId={stageId}
-            />
-        </>
+        <WidgetEventEdit
+            {...passOnProps}
+            stage={stage}
+            formFoundation={formFoundation}
+            programId={programId}
+            stageId={stageId}
+        />
     );
 };

src/core_modules/capture-core/components/WidgetEventEdit/widgetEventEdit.types.js

@@ -4,7 +4,6 @@ import { ProgramStage, RenderFoundation } from '../../metaData';
 
 export type Props = {|
     eventStatus?: string,
-    onGoBack: () => void,
     onCancelEditEvent: (isScheduled: boolean) => void,
     onHandleScheduleSave: (eventData: Object) =>void,
     onSaveExternal: () => void,