fix: [DHIS2-17651] enrollment dashboard UI changes (#3767)

* fix: [DHIS2-17651] enrollment dashboard UI changes * fix: cypress tests related with enrollment dashboard UI changes * fix: cypress tests related with enrollment dashboard UI changes --------- Co-authored-by: Simona Domnisoru <[email protected]> Co-authored-by: eirikhaugstulen <[email protected]>
dhis2 · Aug 29, 2024 · 012b60d · 012b60d
1 parent 34736e0
commit 012b60d
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 144 deletions.
diff --git 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"]')
@@ -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', () => {

diff --git a/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.feature b/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.feature
@@ -29,13 +29,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
@@ -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',

diff --git a/i18n/en.pot b/i18n/en.pot
@@ -1514,9 +1514,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/...ore_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/Stage.component.js b/...ore_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/Stage.component.js
@@ -2,7 +2,7 @@
 import React, { type ComponentType, useState, useCallback } from 'react';
 import cx from 'classnames';
 import { withStyles } from '@material-ui/core';
-import { spacersNum, colors } from '@dhis2/ui';
+import { spacersNum } 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,
     },
     buttonContainer: {
-        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}

diff --git a/...e-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/StageDetail.component.js b/...e-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,
@@ -35,15 +38,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: {
@@ -54,6 +53,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) => {
@@ -188,27 +221,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
@@ -218,25 +241,25 @@ const StageDetailPlain = (props: Props) => {
         >{i18n.t('Go to full {{ eventName }}', { eventName, interpolation: { escapeValue: false } })}</Button> : null);
 
         const renderCreateNewButton = () => (
-            <StageCreateNewButton
-                eventCount={events.length}
-                onCreateNew={handleCreateNew}
-                preventAddingEventActionInEffect={hiddenProgramStage}
-                repeatable={repeatable}
-                stageWriteAccess={stage?.access?.data?.write}
-                eventName={eventName}
-            />
+            <div className={classes.newButton}>
+                <StageCreateNewButton
+                    eventCount={events.length}
+                    onCreateNew={handleCreateNew}
+                    preventAddingEventActionInEffect={hiddenProgramStage}
+                    repeatable={repeatable}
+                    stageWriteAccess={stage?.access?.data?.write}
+                    eventName={eventName}
+                />
+            </div>
         );
 
         return (
-            <DataTableRow>
-                <DataTableCell staticStyle colSpan={`${headerColumns.length}`}>
-                    {renderShowMoreButton()}
-                    {renderViewAllButton()}
-                    {renderCreateNewButton()}
-                    {renderResetButton()}
-                </DataTableCell>
-            </DataTableRow>
+            <div className={classes.footerToolbar}>
+                {renderShowMoreButton()}
+                {renderViewAllButton()}
+                {renderCreateNewButton()}
+            </div>
+
         );
     }
 
@@ -249,19 +272,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>
     );
 };