fix: [DHIS2-18019] related stages UI tweaks

cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageForm/EnrollmentEditEventPageForm.js

@@ -61,8 +61,7 @@ Given(/^you land on the enrollment event page with selected (.*) by having typed
 When(/^the user clicks on the edit button/, () =>
     cy
         .get('[data-test="widget-enrollment-event"]')
-        .find('[data-test="dhis2-uicore-button"]')
-        .eq(1)
+        .find('[data-test="widget-enrollment-event-edit-button"]')
         .click(),
 );
 
@@ -208,8 +207,7 @@ And('you open the Birth stage event', () => {
 
 Then('the edit button should be disabled', () => {
     cy.get('[data-test="widget-enrollment-event"]')
-        .find('[data-test="dhis2-uicore-button"]')
-        .eq(1)
+        .find('[data-test="widget-enrollment-event-edit-button"]')
         .should('be.disabled');
 });
 

cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageNavigation/EnrollmentEditEventPageNavigation.js

@@ -21,10 +21,7 @@ When('the user clicks the first second antenatal care visit event', () => {
 });
 
 When(/^the user clicks the "Back to all stages and events" button/, () =>
-    cy
-        .get('[data-test="widget-enrollment-event"]')
-        .find('[data-test="dhis2-uicore-button"]')
-        .eq(0)
+    cy.get('[data-test="enrollment-edit-event-back-button"]')
         .click(),
 );
 

cypress/e2e/TopBarActions/TopBarActions.js

@@ -6,7 +6,7 @@ Given(/^you land on a enrollment page domain by having typed (.*)$/, (url) => {
 });
 
 When(/^the user clicks on the edit button/, () =>
-    cy.get('[data-test="widget-enrollment-event"]').find('[data-test="dhis2-uicore-button"]').eq(1).click(),
+    cy.get('[data-test="widget-enrollment-event"]').find('[data-test="widget-enrollment-event-edit-button"]').click(),
 );
 
 When('the user clicks the arrow button to see the dropdown', () => {

cypress/e2e/WidgetsForEnrollmentPages/WidgetAssignee/index.js

@@ -12,8 +12,7 @@ When('you assign the user Geetha in the view mode', () => {
 When('you assign the user Tracker demo User in the edit mode', () => {
     cy
         .get('[data-test="widget-enrollment-event"]')
-        .find('[data-test="dhis2-uicore-button"]')
-        .eq(1)
+        .find('[data-test="widget-enrollment-event-edit-button"]')
         .click();
 
     cy.get('[data-test="widget-assignee"]').within(() => {

cypress/e2e/WidgetsForEnrollmentPages/WidgetEventNote/index.js

@@ -5,7 +5,9 @@ Then('the enrollment widget should be loaded', () => {
 });
 
 When('you click edit mode', () => {
-    cy.contains('[data-test="dhis2-uicore-button"]', 'Edit event')
+    cy
+        .get('[data-test="widget-enrollment-event"]')
+        .find('[data-test="widget-enrollment-event-edit-button"]')
         .click();
     cy.get('[data-test="widget-enrollment-event-edit"]').should('exist');
 });

cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEnrollmentAddEventPage/WidgetsForEnrollmentAddEventPage.js

@@ -16,9 +16,7 @@ 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="widget-enrollment-event"]')
-        .contains('Back to all stages and events')
+    cy.get('[data-test="enrollment-edit-event-back-button"]')
         .click(),
 );
 

cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEnrollmentDashboard/WidgetsForEnrollmentDashboard.js

@@ -51,9 +51,7 @@ 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="widget-enrollment-event"]')
-        .contains('Back to all stages and events')
+    cy.get('[data-test="enrollment-edit-event-back-button"]')
         .click(),
 );
 

i18n/en.pot

@@ -948,6 +948,9 @@ 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"
 
@@ -1306,9 +1309,6 @@ msgstr "Event completed"
 msgid "The event cannot be edited after it has been completed"
 msgstr "The event cannot be edited after it has been completed"
 
-msgid "Back to all stages and events"
-msgstr "Back to all stages and events"
-
 msgid "Notes about this event"
 msgstr "Notes about this event"
 
@@ -1508,11 +1508,21 @@ msgstr "{{ scheduledEvents }} scheduled"
 msgid "Stages and Events"
 msgstr "Stages and Events"
 
+msgid "View linked event"
+msgstr "View linked event"
+
 msgid "An error occurred while loading the widget."
 msgstr "An error occurred while loading the widget."
 
-msgid "View linked event"
-msgstr "View linked event"
+msgid "Linked event"
+msgstr "Linked event"
+
+msgid ""
+"This {{stageName}} event is linked to a {{linkedStageName}} event. Review "
+"the linked event details before entering data below"
+msgstr ""
+"This {{stageName}} event is linked to a {{linkedStageName}} event. Review "
+"the linked event details before entering data below"
 
 msgid "Scheduled"
 msgstr "Scheduled"

src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/PageLayout/DefaultPageLayout.constants.js

@@ -22,10 +22,6 @@ export const WidgetsForEnrollmentEventEdit: $ReadOnly<{ [key: string]: WidgetCon
 
 export const DefaultPageLayout: PageLayoutConfig = {
     leftColumn: [
-        {
-            type: WidgetTypes.COMPONENT,
-            name: 'TwoEventWorkspace',
-        },
         {
             type: WidgetTypes.COMPONENT,
             name: 'EditEventWorkspace',

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

@@ -8,7 +8,6 @@ type DefaultComponents = 'QuickActions'
     | 'AssigneeWidget'
     | 'NewEventWorkspace'
     | 'EditEventWorkspace'
-    | 'TwoEventWorkspace'
     | 'EnrollmentNote'
     | 'EventNote'
     | 'TrackedEntityRelationship'

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

@@ -1,5 +1,6 @@
 // @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';
@@ -16,6 +17,7 @@ export const WidgetEventEditWrapper = ({ pageStatus, ...passOnProps }: WidgetPro
     const {
         programId,
         stageId,
+        onGoBack,
     } = passOnProps;
 
     const {
@@ -56,12 +58,20 @@ export const WidgetEventEditWrapper = ({ pageStatus, ...passOnProps }: WidgetPro
     }
 
     return (
-        <WidgetEventEdit
-            {...passOnProps}
-            stage={stage}
-            formFoundation={formFoundation}
-            programId={programId}
-            stageId={stageId}
-        />
+        <>
+            <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}
+            />
+        </>
     );
 };