refactor: [DHIS2-15185] use Dhis2 DataTable component in working lists (

#3386)
dhis2 · Oct 27, 2023 · be652c2 · be652c2
1 parent 64129b0
commit be652c2
Show file tree

Hide file tree

Showing 26 changed files with 666 additions and 2,308 deletions.
diff --git a/cypress/integration/WorkingLists/EventWorkingLists/EventWorkingListsDev/index.js b/cypress/integration/WorkingLists/EventWorkingLists/EventWorkingListsDev/index.js
@@ -38,7 +38,7 @@ Then('the list should display the events retrieved from the api', () => {
             cy.get('[data-test="event-working-lists"]')
                 .find('tr')
                 .each(($teiRow, index) => {
-                    const rowId = $teiRow.get(0).getAttribute('id');
+                    const rowId = $teiRow.get(0).getAttribute('data-test');
                     if (index > 1) {
                         expect(rowId).to.equal(teis[index - 1].event);
                     }
@@ -232,25 +232,27 @@ When('you click the report date column header', () => {
 
     cy.route('GET', '**/tracker/events**').as('getEvents');
 
-    cy.get('[data-test="online-list-table"]')
-        .contains('Report date')
+    cy.get('[data-test="dhis2-uicore-tableheadercellaction"]')
+        .eq(0)
+        .click()
         .click();
 });
 
 Then('events should be retrieved from the api ordered ascendingly by report date', () => {
-    cy.wait('@getEvents', { timeout: 40000 }).as('result');
+    cy.wait('@getEvents', { timeout: 40000 }).as('resultDefault');
+    cy.wait('@getEvents', { timeout: 40000 }).as('resultAsc');
 
-    cy.get('@result')
+    cy.get('@resultAsc')
         .its('status')
         .should('equal', 200);
 
-    cy.get('@result')
+    cy.get('@resultAsc')
         .its('url')
         .should('match', /order=.*asc/);
 
-    cy.get('@result')
+    cy.get('@resultAsc')
         .its('url')
         .should('include', 'page=1');
 
-    cy.get('@result').its('response.body.instances').as('events');
+    cy.get('@resultAsc').its('response.body.instances').as('events');
 });
diff --git a/cypress/integration/WorkingLists/EventWorkingLists/EventWorkingListsUser/index.js b/cypress/integration/WorkingLists/EventWorkingLists/EventWorkingListsUser/index.js
@@ -256,8 +256,9 @@ Then('the list should display 10 rows of data', () => {
 });
 
 When('you click the report date column header', () => {
-    cy.get('[data-test="online-list-table"]')
-        .contains('Report date')
+    cy.get('[data-test="dhis2-uicore-tableheadercellaction"]')
+        .eq(0)
+        .click()
         .click();
 });
 
@@ -364,8 +365,9 @@ When('you change the sharing settings', () => {
 
 
 When('you update the working list', () => {
-    cy.get('[data-test="online-list-table"]')
-        .contains('Report date')
+    cy.get('[data-test="dhis2-uicore-tableheadercellaction"]')
+        .eq(0)
+        .click()
         .click();
 
     cy.get('[data-test="list-view-menu-button"]')

diff --git a/cypress/integration/WorkingLists/TeiWorkingLists/TeiWorkingListsDev/index.js b/cypress/integration/WorkingLists/TeiWorkingLists/TeiWorkingListsDev/index.js
@@ -146,7 +146,7 @@ Then('the list should display the teis retrieved from the api', () => {
             cy.get('[data-test="tei-working-lists"]')
                 .find('tr')
                 .each(($teiRow, index) => {
-                    const rowId = $teiRow.get(0).getAttribute('id');
+                    const rowId = $teiRow.get(0).getAttribute('data-test');
                     if (index > 1) {
                         expect(rowId).to.equal(teis[index - 1].trackedEntity);
                     }
@@ -226,8 +226,8 @@ When('you click the first name column header', () => {
 
     cy.route('GET', '**/tracker/trackedEntities**').as('getTeis');
 
-    cy.get('[data-test="online-list-table"]')
-        .contains('First name')
+    cy.get('[data-test="dhis2-uicore-tableheadercellaction"]')
+        .eq(0)
         .click();
 });
 

diff --git a/cypress/integration/WorkingLists/TeiWorkingLists/TeiWorkingListsUser/index.js b/cypress/integration/WorkingLists/TeiWorkingLists/TeiWorkingListsUser/index.js
@@ -332,20 +332,21 @@ Then('the list should display 10 rows of data', () => {
 });
 
 When('you click the first name column header', () => {
-    cy.get('[data-test="online-list-table"]')
-        .contains('First name')
+    cy.get('[data-test="dhis2-uicore-tableheadercellaction"]')
+        .eq(0)
         .click();
 });
 
 When('you click the last name column header', () => {
-    cy.get('[data-test="online-list-table"]')
-        .contains('Last name')
+    cy.get('[data-test="dhis2-uicore-tableheadercellaction"]')
+        .eq(2)
         .click();
 });
 
 When('you click the WHOMCH Smoking column header', () => {
-    cy.get('[data-test="online-list-table"]')
-        .contains('WHOMCH Smoking')
+    cy.get('[data-test="dhis2-uicore-tableheadercellaction"]')
+        .eq(6)
+        .click()
         .click();
 });
 

diff --git a/cypress/integration/WorkingLists/sharedSteps.js b/cypress/integration/WorkingLists/sharedSteps.js
@@ -75,8 +75,9 @@ Then('the pagination for the tei working list should show the second page', () =
 });
 
 Then('the sort arrow should indicate ascending order', () => {
-    cy.get('[data-test="data-table-asc-sort-icon"]')
-        .should('exist');
+    cy.get('[data-test="table-row"]').within(() => {
+        cy.get('[data-test="table-row-asc"]').should('exist');
+    });
 });
 
 Then('the enrollment status filter button should show that the active filter is in effect', () => {
@@ -133,8 +134,9 @@ When('you click the first page button', () => {
 });
 
 Then('the sort arrow should indicate descending order', () => {
-    cy.get('[data-test="data-table-desc-sort-icon"]')
-        .should('exist');
+    cy.get('[data-test="table-row"]').within(() => {
+        cy.get('[data-test="table-row-desc"]').should('exist');
+    });
 });
 
 Then('rows per page should be set to 15', () => {

diff --git a/i18n/en.pot b/i18n/en.pot
@@ -373,9 +373,6 @@ msgstr "Some operations are still runnning. Please wait.."
 msgid "Operations running"
 msgstr "Operations running"
 
-msgid "Sort"
-msgstr "Sort"
-
 msgid ""
 "This event has unsaved changes. Leaving this page without saving will lose "
 "these changes. Are you sure you want to discard unsaved changes?"
@@ -1503,9 +1500,6 @@ msgstr "Error editing the event, the changes made were not saved"
 msgid "Set coordinate"
 msgstr "Set coordinate"
 
-msgid "Page {{currentPage}}"
-msgstr "Page {{currentPage}}"
-
 msgid "Date"
 msgstr "Date"
 
@@ -1524,6 +1518,9 @@ msgstr "To date"
 msgid "To time"
 msgstr "To time"
 
+msgid "Page {{currentPage}}"
+msgstr "Page {{currentPage}}"
+
 msgid "Delete polygon"
 msgstr "Delete polygon"
 

diff --git a/package.json b/package.json
@@ -11,14 +11,14 @@
     ],
     "dependencies": {
         "@dhis2/rules-engine-javascript": "100.37.0",
-        "@dhis2/app-runtime": "^3.8.0",
+        "@dhis2/app-runtime": "^3.9.3",
         "@dhis2/d2-i18n": "^1.1.0",
         "@dhis2/d2-icons": "^1.0.1",
         "@dhis2/d2-ui-app": "^2.0.0",
         "@dhis2/d2-ui-org-unit-tree": "^7.3.3",
         "@dhis2/d2-ui-rich-text": "^7.4.0",
         "@dhis2/d2-ui-sharing-dialog": "^7.3.3",
-        "@dhis2/ui": "^8.7.7",
+        "@dhis2/ui": "^8.13.8",
         "@joakim_sm/react-infinite-calendar": "^2.4.2",
         "@material-ui/core": "3.9.4",
         "@material-ui/icons": "3",

diff --git a/src/core_modules/capture-core/components/DataTable/SortLabelWrapper.component.js b/src/core_modules/capture-core/components/DataTable/SortLabelWrapper.component.js