From 587edc47352fa020efc27de9599221e4c2781eb8 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Wed, 21 Aug 2024 10:11:05 +0200
Subject: [PATCH 1/3] fix: [DHIS2-17651] enrollment dashboard UI changes

---
 i18n/en.pot                                   |   7 +-
 .../Stages/Stage/Stage.component.js           |   8 +-
 .../StageDetail/StageDetail.component.js      | 115 +++++++++++-------
 .../StageOverview/StageOverview.component.js  | 111 ++++++++++-------
 4 files changed, 141 insertions(+), 100 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index a24932402c..e2529780bb 100644
--- a/i18n/en.pot
+++ b/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: 2024-08-08T11:49:13.423Z\n"
-"PO-Revision-Date: 2024-08-08T11:49:13.423Z\n"
+"POT-Creation-Date: 2024-08-19T11:57:54.710Z\n"
+"PO-Revision-Date: 2024-08-19T11:57:54.710Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -1517,9 +1517,6 @@ msgstr "To open this event, please wait until saving is complete"
 msgid "Show {{ rest }} more"
 msgstr "Show {{ rest }} more"
 
-msgid "Reset list"
-msgstr "Reset list"
-
 msgid "Go to full {{ eventName }}"
 msgstr "Go to full {{ eventName }}"
 
diff --git a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/Stage.component.js b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/Stage.component.js
index d76690c7eb..62b37d9a06 100644
--- a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/Stage.component.js
+++ b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/Stage.component.js
@@ -3,7 +3,7 @@ import React, { type ComponentType, useState, useCallback } from 'react';
 import cx from 'classnames';
 import i18n from '@dhis2/d2-i18n';
 import { withStyles } from '@material-ui/core';
-import { spacersNum, colors, IconAdd16, Button } from '@dhis2/ui';
+import { spacersNum, IconAdd16, Button } from '@dhis2/ui';
 import { StageOverview } from './StageOverview';
 import type { Props } from './stage.types';
 import { Widget } from '../../../Widget';
@@ -13,10 +13,10 @@ const styles = {
     overview: {
         marginLeft: spacersNum.dp16,
         marginRight: spacersNum.dp16,
-        borderTop: `1px solid ${colors.grey300}`,
+        marginBottom: spacersNum.dp24,
     },
     button: {
-        margin: `0 ${spacersNum.dp16}px ${spacersNum.dp16}px ${spacersNum.dp16}px`,
+        margin: `0 ${spacersNum.dp12}px ${spacersNum.dp8}px ${spacersNum.dp12}px`,
     },
     buttonRow: {
         display: 'flex',
@@ -50,7 +50,6 @@ export const StagePlain = ({ stage, events, classes, className, onCreateNew, rul
                     description={description}
                     events={events}
                 />}
-                borderless
                 onOpen={handleOpen}
                 onClose={handleClose}
                 open={open}
@@ -69,7 +68,6 @@ export const StagePlain = ({ stage, events, classes, className, onCreateNew, rul
                 /> : (
                     <Button
                         small
-                        secondary
                         icon={<IconAdd16 />}
                         className={classes.button}
                         dataTest="create-new-button"
diff --git a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/StageDetail.component.js b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/StageDetail.component.js
index 055befd20d..ffde977dc9 100644
--- a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/StageDetail.component.js
+++ b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/StageDetail.component.js
@@ -3,11 +3,14 @@ import React, { type ComponentType, useState, useCallback } from 'react';
 import { withStyles } from '@material-ui/core';
 import i18n from '@dhis2/d2-i18n';
 // $FlowFixMe
-import { colors,
+import {
+    colors,
+    spacers,
     spacersNum,
+    theme,
+    DataTableToolbar,
     DataTableBody,
     DataTableHead,
-    DataTableFoot,
     DataTable,
     DataTableRow,
     DataTableCell,
@@ -36,15 +39,11 @@ const styles = {
     },
     container: {
         display: 'flex',
-        marginRight: spacersNum.dp16,
-        marginLeft: spacersNum.dp16,
-        marginBottom: spacersNum.dp16,
-        backgroundColor: colors.grey200,
-        alignItems: 'center',
-        overflowX: 'auto',
+        flexDirection: 'column',
     },
-    button: {
-        marginRight: spacersNum.dp8,
+    scrollBox: {
+        overflowX: 'auto',
+        overflow: 'hidden',
     },
     hidenButton: { display: 'none !important' },
     icon: {
@@ -55,6 +54,40 @@ const styles = {
     label: {
         paddingLeft: spacersNum.dp32,
     },
+    table: {
+        border: 'none !important',
+    },
+    tableToolbar: {
+        borderLeft: 'none !important',
+        borderBottom: 'none !important',
+        borderRight: 'none !important',
+        borderTop: `1px solid ${colors.grey300} !important`,
+        width: '100%',
+        padding: '0 !important',
+    },
+    toolbarContent: {
+        width: '100%',
+    },
+    showMoreButton: {
+        width: '100%',
+        border: 'none',
+        background: colors.grey100,
+        color: colors.grey800,
+        fontSize: '13px',
+        height: '24px',
+        borderBottom: `1px solid ${colors.grey300}`,
+        '&:hover': {
+            background: colors.grey200,
+            color: colors.grey900,
+            cursor: 'pointer',
+        },
+        '&:focus': {
+            outline: `3px solid ${theme.focus}`,
+        },
+    },
+    newButton: {
+        margin: `${spacers.dp8} ${spacers.dp12}`,
+    },
 };
 
 const StageDetailPlain = (props: Props) => {
@@ -189,27 +222,17 @@ const StageDetailPlain = (props: Props) => {
     function renderFooter() {
         const renderShowMoreButton = () => (dataSource && !loading
             && events.length > DEFAULT_NUMBER_OF_ROW
-            && displayedRowNumber < events.length ? <Button
-                small
-                secondary
-                dataTest="show-more-button"
-                className={classes.button}
+            && displayedRowNumber < events.length ? <button
+                data-test="show-more-button"
+                className={classes.showMoreButton}
                 onClick={handleShowMore}
             >
                 {i18n.t('Show {{ rest }} more', {
                     rest: Math.min(events.length - displayedRowNumber, DEFAULT_NUMBER_OF_ROW),
                 })}
-            </Button>
+            </button>
             : null);
 
-        const renderResetButton = () => (displayedRowNumber > DEFAULT_NUMBER_OF_ROW ? <Button
-            small
-            secondary
-            dataTest="reset-button"
-            className={classes.button}
-            onClick={() => { setDisplayedRowNumber(DEFAULT_NUMBER_OF_ROW); }}
-        >{i18n.t('Reset list')}</Button> : null);
-
         const renderViewAllButton = () => (events.length > 1 ? <Button
             small
             secondary
@@ -235,8 +258,8 @@ const StageDetailPlain = (props: Props) => {
                     closeDelay={50}
                 >
                     <Button
+                        className={classes.newButton}
                         small
-                        secondary
                         icon={<IconAdd16 />}
                         disabled={shouldDisableCreateNew}
                         dataTest="create-new-button"
@@ -251,14 +274,12 @@ const StageDetailPlain = (props: Props) => {
         };
 
         return (
-            <DataTableRow>
-                <DataTableCell staticStyle colSpan={`${headerColumns.length}`}>
-                    {renderShowMoreButton()}
-                    {renderViewAllButton()}
-                    {renderCreateNewButton()}
-                    {renderResetButton()}
-                </DataTableCell>
-            </DataTableRow>
+            <div className={classes.footerToolbar}>
+                {renderShowMoreButton()}
+                {renderViewAllButton()}
+                {renderCreateNewButton()}
+            </div>
+
         );
     }
 
@@ -271,19 +292,23 @@ const StageDetailPlain = (props: Props) => {
     }
     return (
         <div className={classes.container}>
-            <DataTable
-                className={classes.table}
-            >
-                <DataTableHead>
-                    {renderHeader()}
-                </DataTableHead>
-                <DataTableBody>
-                    {renderRows()}
-                </DataTableBody>
-                <DataTableFoot>
+            <div className={classes.scrollBox}>
+                <DataTable
+                    className={classes.table}
+                >
+                    <DataTableHead>
+                        {renderHeader()}
+                    </DataTableHead>
+                    <DataTableBody>
+                        {renderRows()}
+                    </DataTableBody>
+                </DataTable>
+            </div>
+            <DataTableToolbar className={classes.tableToolbar} position="bottom">
+                <div className={classes.toolbarContent}>
                     {renderFooter()}
-                </DataTableFoot>
-            </DataTable>
+                </div>
+            </DataTableToolbar>
         </div>
     );
 };
diff --git a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageOverview/StageOverview.component.js b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageOverview/StageOverview.component.js
index b7b576500d..c2e7731421 100644
--- a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageOverview/StageOverview.component.js
+++ b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageOverview/StageOverview.component.js
@@ -3,7 +3,9 @@ import React, { type ComponentType } from 'react';
 import cx from 'classnames';
 import { withStyles } from '@material-ui/core';
 import { useTimeZoneConversion } from '@dhis2/app-runtime';
-import { colors, spacersNum, IconInfo16, IconWarning16, IconCalendar16, IconClockHistory16, Tooltip } from '@dhis2/ui';
+import {
+    colors, spacers, spacersNum, IconInfo16, IconWarning16, IconCalendar16, IconClockHistory16, Tooltip,
+} from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import moment from 'moment';
 import { statusTypes } from 'capture-core/events/statusTypes';
@@ -15,6 +17,10 @@ const styles = {
     container: {
         display: 'flex',
         alignItems: 'center',
+        padding: '0',
+        justifyContent: 'space-between',
+        width: '100%',
+        marginLeft: '-4px',
     },
     icon: {
         paddingRight: spacersNum.dp8,
@@ -24,22 +30,32 @@ const styles = {
         marginRight: spacersNum.dp8,
         height: '16px',
     },
+    infoTitles: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    infoItems: {
+        display: 'flex',
+        gap: spacers.dp12,
+    },
     indicatorIcon: {
         paddingRight: spacersNum.dp4,
         height: '16px',
     },
     title: {
-        fontSize: '14px',
+        fontSize: '18px',
         lineHeight: '19px',
         fontWeight: 500,
         color: colors.grey900,
         display: 'flex',
+        marginInlineEnd: spacers.dp4,
     },
     indicator: {
-        padding: spacersNum.dp8,
         color: colors.grey800,
-        fontSize: '14px',
+        fontSize: '12px',
+        lineHeight: '16px',
         fontWeight: 400,
+        height: '100%',
         display: 'flex',
         alignItems: 'center',
     },
@@ -76,24 +92,26 @@ export const StageOverviewPlain = ({ title, icon, description, events, classes }
     const scheduledEvents = events.filter(event => event.status === statusTypes.SCHEDULE).length;
 
     return (<div className={classes.container}>
-        {
-            icon && (
-                <div className={classes.icon}>
-                    <NonBundledDhis2Icon
-                        name={icon.name}
-                        color={icon.color}
-                        width={32}
-                        height={32}
-                        cornerRadius={5}
-                    />
-                </div>
-            )
-        }
+        <div className={classes.infoTitles}>
+            {
+                icon && (
+                    <div className={classes.icon}>
+                        <NonBundledDhis2Icon
+                            name={icon.name}
+                            color={icon.color}
+                            width={32}
+                            height={32}
+                            cornerRadius={5}
+                        />
+                    </div>
+                )
+            }
+            <div />
 
-        <div className={classes.title}>
-            {title}
-        </div>
-        { description &&
+            <div className={classes.title}>
+                {title}
+            </div>
+            { description &&
             <Tooltip
                 content={description}
                 openDelay="100"
@@ -102,32 +120,35 @@ export const StageOverviewPlain = ({ title, icon, description, events, classes }
                     <IconInfo16 />
                 </div>
             </Tooltip>
-        }
-        <div className={classes.indicator}>
-            {i18n.t('{{ count }} event', {
-                count: totalEvents,
-                defaultValue: '{{ count }} event',
-                defaultValue_plural: '{{count}} events',
-            })}
+            }
         </div>
-        {overdueEvents > 0 ? <div className={cx(classes.indicator, classes.warningIndicator)}>
-            <div className={classes.indicatorIcon}>
-                <IconWarning16 />
-            </div>
-            {i18n.t('{{ overdueEvents }} overdue', { overdueEvents })}
-        </div> : null}
-        {scheduledEvents > 0 ? <div className={classes.indicator}>
-            <div className={classes.indicatorIcon}>
-                <IconCalendar16 />
+        <div className={classes.infoItems}>
+            <div className={classes.indicator}>
+                {i18n.t('{{ count }} event', {
+                    count: totalEvents,
+                    defaultValue: '{{ count }} event',
+                    defaultValue_plural: '{{count}} events',
+                })}
             </div>
-            {i18n.t('{{ scheduledEvents }} scheduled', { scheduledEvents })}
-        </div> : null }
-        {totalEvents > 0 && <div className={cx(classes.indicator)}>
-            <div className={classes.indicatorIcon}>
-                <IconClockHistory16 />
-            </div>
-            {getLastUpdatedAt(events, fromServerDate)}
-        </div>}
+            {overdueEvents > 0 ? <div className={cx(classes.indicator, classes.warningIndicator)}>
+                <div className={classes.indicatorIcon}>
+                    <IconWarning16 />
+                </div>
+                {i18n.t('{{ overdueEvents }} overdue', { overdueEvents })}
+            </div> : null}
+            {scheduledEvents > 0 ? <div className={classes.indicator}>
+                <div className={classes.indicatorIcon}>
+                    <IconCalendar16 />
+                </div>
+                {i18n.t('{{ scheduledEvents }} scheduled', { scheduledEvents })}
+            </div> : null }
+            {totalEvents > 0 && <div className={cx(classes.indicator)}>
+                <div className={classes.indicatorIcon}>
+                    <IconClockHistory16 />
+                </div>
+                {getLastUpdatedAt(events, fromServerDate)}
+            </div>}
+        </div>
     </div>);
 };
 

From 0cc3abb0216aabb18b48035af54e3cb713aca6f3 Mon Sep 17 00:00:00 2001
From: Simona Domnisoru <sdomnisoru@dhis2.org>
Date: Wed, 21 Aug 2024 14:25:51 +0200
Subject: [PATCH 2/3] fix: cypress tests related with enrollment dashboard UI
 changes

---
 .../EnrollmentAddEventPageForm.js             |  2 +-
 .../StagesAndEventsWidget.feature             |  7 ++---
 .../StagesAndEventsWidget.js                  | 30 +------------------
 3 files changed, 4 insertions(+), 35 deletions(-)

diff --git a/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.js b/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.js
index f3a2d9f851..f51e5f71bb 100644
--- a/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.js
+++ b/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.js
@@ -38,7 +38,7 @@ const changeEnrollmentAndEventsStatus = () => (
 );
 
 const showAllEventsInProgramStage = () => {
-    cy.get('[data-test="dhis2-uicore-tablefoot"]')
+    cy.get('[data-test="dhis2-uicore-tabletoolbar"]')
         .then(($footer) => {
             if ($footer.find('[data-test="show-more-button"]').length > 0) {
                 $footer.find('[data-test="show-more-button"]')
diff --git a/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.feature b/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.feature
index bdefbaa55c..5179a84844 100644
--- a/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.feature
+++ b/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.feature
@@ -24,13 +24,10 @@ Feature: User interacts with Stages and Events Widget
         And you see the first 5 events in the table
         And you see buttons in the footer list
 
-    Scenario: User can view more events and then view less
+    Scenario: User can view more events
         Given you open the enrollment page which has multiples events and stages
         When you click show more button in stages&event list
-        Then more events should be displayed
-        And reset button should be displayed
-        And you click reset button
-        Then there should be 5 rows in the table
+        Then there should be 10 rows in the table
 
     Scenario: User can sort the list of events
         Given you open the enrollment page which has multiples events and stages
diff --git a/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.js b/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.js
index 510bbebae5..d772f41034 100644
--- a/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.js
+++ b/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.js
@@ -49,7 +49,7 @@ When('you click show more button in stages&event list', () => {
     });
 });
 
-Then('more events should be displayed', () => {
+Then('there should be 10 rows in the table', () => {
     cy.get('[data-test="stages-and-events-widget"]')
         .find('[data-test="widget-contents"]')
         .find('[data-test="stage-content"]')
@@ -61,34 +61,6 @@ Then('more events should be displayed', () => {
         });
 });
 
-Then('reset button should be displayed', () => {
-    cy.get('[data-test="stages-and-events-widget"]').within(() => {
-        cy.get('[data-test="view-all-button"]').should('exist');
-        cy.get('[data-test="show-more-button"]').should('exist');
-        cy.get('[data-test="reset-button"]').should('exist');
-        cy.get('[data-test="create-new-button"]').should('exist');
-    });
-});
-
-And('you click reset button', () => {
-    cy.get('[data-test="stages-and-events-widget"]').within(() => {
-        cy.get('[data-test="reset-button"]').click();
-        cy.wait(100);
-    });
-});
-
-Then('there should be 5 rows in the table', () => {
-    cy.get('[data-test="stages-and-events-widget"]')
-        .find('[data-test="widget-contents"]')
-        .find('[data-test="stage-content"]')
-        .eq(2)
-        .within(() => {
-            cy.get('[data-test="dhis2-uicore-datatable"]').should('exist');
-            cy.get('[data-test="dhis2-uicore-tablebody"]')
-                .find('[data-test="dhis2-uicore-datatablerow"]').should('have.length', 5);
-        });
-});
-
 Then('the default list should be displayed', () => {
     const rows = [
         '07-13|Bumbeh MCHP',

From ecedaff3c624f98ace2b6dd9cd8a2d9815f3c011 Mon Sep 17 00:00:00 2001
From: Simona Domnisoru <sdomnisoru@dhis2.org>
Date: Wed, 21 Aug 2024 14:59:29 +0200
Subject: [PATCH 3/3] fix: cypress tests related with enrollment dashboard UI
 changes

---
 .../EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.js b/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.js
index f51e5f71bb..f5369a15cf 100644
--- a/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.js
+++ b/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.js
@@ -119,11 +119,6 @@ When(/^you click the button to (.*) without post request/, (buttonText) => {
 
 When('the enrollment overview is finished loading', () => {
     cy.get('[data-test="dhis2-uicore-circularloader"]').should('not.exist');
-    cy.get('[data-test="dhis2-uicore-datatable"]')
-        .within(() => {
-            cy.get('[data-test="dhis2-uicore-datatablerow"]')
-                .should('exist');
-        });
 });
 
 When('the form is finished loading', () => {