fix: org unit/period filter, PT plugin, ItemSelector (v39) (#2135)

* fix: fix ItemSelector overflow issue DHIS2-13811 (#2112) Fixes an overflow issue in the ItemSelector,the actual fix is in @dhis2/ui, so a bump to latest version solves the issue. (cherry picked from commit 45435b8) * fix: org unit filter dialog crash (DHIS2-13816) (#2118) Fixes https://dhis2.atlassian.net/browse/DHIS2-13816. The OrgUnitDialog from analytics had a breaking change in v21.0.0, a different set of props is needed to make it work. Several Cypress tests were updated to work with the new OrgUnitDimension component. There are still 4 cypress tests failing because of a real bug in the app. (cherry picked from commit c1ce958) * chore: bump DV plugin and analytics deps DHIS2-13812 (#2123) (cherry picked from commit 7926d5a)
dhis2 · Oct 13, 2022 · 1ffe326 · 1ffe326
1 parent 578c3ca
commit 1ffe326
Show file tree

Hide file tree

Showing 20 changed files with 586 additions and 560 deletions.
diff --git a/cypress/elements/dashboardFilter.js b/cypress/elements/dashboardFilter.js
@@ -5,6 +5,6 @@ export const filterDimensionsPanelSel = '[data-test="dashboard-filter-popover"]'
 export const unselectedItemsSel =
     '[data-test*="dimension-transfer-sourceoptions"]'
 
-export const orgUnitCheckboxesSel = '*[role="button"]'
+export const orgUnitTreeSel = '[data-test="org-unit-tree"]'
 
 export const dimensionsModalSel = '[data-test="dimension-modal"]'
diff --git a/cypress/integration/common/view/add_a_FILTERTYPE_filter.js b/cypress/integration/common/view/add_a_FILTERTYPE_filter.js
@@ -2,13 +2,12 @@ import { When } from 'cypress-cucumber-preprocessor/steps'
 import {
     unselectedItemsSel,
     filterDimensionsPanelSel,
-    dimensionsModalSel,
-    orgUnitCheckboxesSel,
+    orgUnitTreeSel,
 } from '../../../elements/dashboardFilter.js'
 import { EXTENDED_TIMEOUT } from '../../../support/utils.js'
 
 const PERIOD = 'Last 6 months'
-const OU = 'Sierra Leone'
+const OU_ID = 'ImspTQPwCqd' //Sierra Leone
 const FACILITY_TYPE = 'Clinic'
 
 When('I add a {string} filter', (dimensionType) => {
@@ -20,12 +19,10 @@ When('I add a {string} filter', (dimensionType) => {
     // select an item in the modal
     if (dimensionType === 'Period') {
         cy.get(unselectedItemsSel).contains(PERIOD).dblclick()
-    } else if (dimensionType === 'Organisation Unit') {
-        cy.get(dimensionsModalSel, EXTENDED_TIMEOUT).find('.arrow').click()
-        cy.get(dimensionsModalSel, EXTENDED_TIMEOUT)
-            .find(orgUnitCheckboxesSel, EXTENDED_TIMEOUT)
-            .contains(OU, EXTENDED_TIMEOUT)
-            .click()
+    } else if (dimensionType === 'Organisation unit') {
+        cy.get(orgUnitTreeSel, EXTENDED_TIMEOUT)
+            .find('[type="checkbox"]', EXTENDED_TIMEOUT)
+            .check(OU_ID)
     } else {
         cy.get(unselectedItemsSel).contains(FACILITY_TYPE).dblclick()
     }

diff --git a/cypress/integration/edit/edit_dashboard/edit_dashboard.js b/cypress/integration/edit/edit_dashboard/edit_dashboard.js
@@ -14,14 +14,17 @@ import {
     dashboardChipSel,
     dashboardTitleSel,
 } from '../../../elements/viewDashboard.js'
-import { EXTENDED_TIMEOUT } from '../../../support/utils.js'
+import {
+    EXTENDED_TIMEOUT,
+    createDashboardTitle,
+} from '../../../support/utils.js'
 
 // the length of the root route of the app (after the slash): #/
 const ROOT_ROUTE_LENGTH = 0
 // the length of UIDs (after the slash): '#/nghVC4wtyzi'
 const UID_LENGTH = 11
 
-export const TEST_DASHBOARD_TITLE = 'aa' + new Date().toUTCString()
+export const TEST_DASHBOARD_TITLE = createDashboardTitle('aa')
 
 const ROUTE_EDIT = 'edit'
 const ROUTE_NEW = 'new'

diff --git a/cypress/integration/edit/filter_restrict.feature b/cypress/integration/edit/filter_restrict.feature
@@ -17,11 +17,11 @@ Feature: Editing Filter Restrictions
         Then Filter Restrictions are not restricted
 
     @nonmutating
-    Scenario: I see Period and Organisation Unit if newly choosing to restrict dimensions
+    Scenario: I see Period and Organisation unit if newly choosing to restrict dimensions
         Given I open an existing dashboard with non-restricted Filter settings in edit mode
         And I click on Filter settings
         And I click to restrict Filter settings
-        Then Period and Organisation Unit are displayed as selected by default
+        Then Period and Organisation unit are displayed as selected by default
 
     @nonmutating
     Scenario: I change Filter Restrictions and the changes persist while editing Filter settings

diff --git a/cypress/integration/edit/filter_restrict/filter_restrict.js b/cypress/integration/edit/filter_restrict/filter_restrict.js
@@ -9,8 +9,9 @@ import {
     dashboardTitleSel,
     clickViewActionButton,
 } from '../../../elements/viewDashboard.js'
+import { createDashboardTitle } from '../../../support/utils.js'
 
-const TEST_DASHBOARD_TITLE = `aaa-${new Date().toUTCString()}`
+const TEST_DASHBOARD_TITLE = createDashboardTitle('aaa')
 
 let dashboardId
 
@@ -74,17 +75,17 @@ Then('Filter Restrictions are not restricted', () => {
 })
 
 /*
-Scenario: I see Period and Organisation Unit if newly choosing to restrict dimensions
+Scenario: I see Period and Organisation unit if newly choosing to restrict dimensions
 */
 
 Then(
-    'Period and Organisation Unit are displayed as selected by default',
+    'Period and Organisation unit are displayed as selected by default',
     () => {
         cy.get('[data-test="dhis2-uicore-transfer-rightside"]')
             .contains('Period')
             .should('be.visible')
         cy.get('[data-test="dhis2-uicore-transfer-rightside"]')
-            .contains('Organisation Unit')
+            .contains('Organisation unit')
             .should('be.visible')
     }
 )

diff --git a/cypress/integration/view/dashboard_filter.feature b/cypress/integration/view/dashboard_filter.feature
@@ -7,11 +7,11 @@ Feature: Dashboard filter
         When I add a "Period" filter
         Then the Period filter is applied to the dashboard
 
-    Scenario: I add a Organisation Unit filter
+    Scenario: I add a Organisation unit filter
         Given I open existing dashboard
         Then the dashboard displays in view mode
-        When I add a "Organisation Unit" filter
-        Then the Organisation Unit filter is applied to the dashboard
+        When I add a "Organisation unit" filter
+        Then the Organisation unit filter is applied to the dashboard
 
     Scenario: I add a Facility Type filter
         Given I open existing dashboard

diff --git a/cypress/integration/view/dashboard_filter/create_dashboard.js b/cypress/integration/view/dashboard_filter/create_dashboard.js
@@ -9,9 +9,12 @@ import {
     dashboardChipSel,
     dashboardTitleSel,
 } from '../../../elements/viewDashboard.js'
-import { EXTENDED_TIMEOUT } from '../../../support/utils.js'
+import {
+    EXTENDED_TIMEOUT,
+    createDashboardTitle,
+} from '../../../support/utils.js'
 
-const TEST_DASHBOARD_TITLE = 'a filter ' + new Date().toUTCString()
+const TEST_DASHBOARD_TITLE = createDashboardTitle('af')
 
 When('I add a MAP and a CHART and save', () => {
     //add the title

diff --git a/cypress/integration/view/dashboard_filter/dashboard_filter.js b/cypress/integration/view/dashboard_filter/dashboard_filter.js
@@ -26,10 +26,12 @@ Then('the Period filter is applied to the dashboard', () => {
 
     // check the CHART
     cy.get(`${gridItemSel}.VISUALIZATION`)
-        .find(chartSubtitleSel, EXTENDED_TIMEOUT)
-        .scrollIntoView()
-        .contains(PERIOD, EXTENDED_TIMEOUT)
-        .should('be.visible')
+        .find(`${chartSubtitleSel} > title`, EXTENDED_TIMEOUT)
+        .invoke('text')
+        .then((text) => {
+            const commas = (text.match(/,/g) || []).length
+            expect(commas).to.equal(5) // a list of 6 months has 5 commas
+        })
 
     cy.get(innerScrollContainerSel).scrollTo('top')
     // check the MAP
@@ -40,12 +42,12 @@ Then('the Period filter is applied to the dashboard', () => {
 })
 
 /*
-Scenario: I add an Organisation Unit filter
+Scenario: I add an Organisation unit filter
 */
 
-Then('the Organisation Unit filter is applied to the dashboard', () => {
+Then('the Organisation unit filter is applied to the dashboard', () => {
     cy.get(filterBadgeSel)
-        .contains(`Organisation Unit: ${OU}`)
+        .contains(`Organisation unit: ${OU}`)
         .should('be.visible')
 
     cy.get(innerScrollContainerSel).scrollTo('bottom')

diff --git a/cypress/integration/view/offline/offline.js b/cypress/integration/view/offline/offline.js
@@ -19,6 +19,7 @@ import {
     EXTENDED_TIMEOUT,
     goOnline,
     goOffline,
+    createDashboardTitle,
 } from '../../../support/utils.js'
 
 beforeEach(() => {
@@ -33,9 +34,8 @@ const CACHED_DASHBOARD_ITEM_NAME = 'ANC: 1 and 3 coverage Yearly'
 const UNCACHED_DASHBOARD_ITEM_NAME = 'ANC: 1-3 trend lines last 12 months'
 const MAKE_AVAILABLE_OFFLINE_TEXT = 'Make available offline'
 
-const UNCACHED_DASHBOARD_TITLE =
-    'aa un' + new Date().toUTCString().slice(-12, -4)
-const CACHED_DASHBOARD_TITLE = 'aa ca' + new Date().toUTCString().slice(-12, -4)
+const UNCACHED_DASHBOARD_TITLE = createDashboardTitle('aa un')
+const CACHED_DASHBOARD_TITLE = createDashboardTitle('aa ca')
 
 const createDashboard = (cacheState) => {
     const cachedDashboard = cacheState === CACHED

diff --git a/cypress/integration/view/view_errors/item_chart_fails_to_render.js b/cypress/integration/view/view_errors/item_chart_fails_to_render.js
@@ -19,10 +19,12 @@ import {
     dashboardChipSel,
     dashboardTitleSel,
 } from '../../../elements/viewDashboard.js'
-import { EXTENDED_TIMEOUT } from '../../../support/utils.js'
+import {
+    EXTENDED_TIMEOUT,
+    createDashboardTitle,
+} from '../../../support/utils.js'
 
-const TEST_DASHBOARD_TITLE =
-    '0filterfail' + new Date().toUTCString().slice(-12, -4)
+export const TEST_DASHBOARD_TITLE = createDashboardTitle('0ff')
 
 // Scenario: Item visualization fails when filter applied [DHIS2-11303]
 

diff --git a/cypress/support/utils.js b/cypress/support/utils.js
@@ -40,3 +40,7 @@ export const goOnline = () => {
             })
         })
 }
+
+export const createDashboardTitle = (prefix) => {
+    return prefix + new Date().toUTCString().slice(-12, -4)
+}
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
     "private": true,
     "license": "BSD-3-Clause",
     "dependencies": {
-        "@dhis2/analytics": "^24.0.6",
+        "@dhis2/analytics": "^24.1.1",
         "@dhis2/app-runtime": "^3.4.4",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/d2-i18n": "^1.1.0",
@@ -14,8 +14,8 @@
         "@dhis2/d2-ui-mentions-wrapper": "^7.3.3",
         "@dhis2/d2-ui-rich-text": "^7.3.3",
         "@dhis2/d2-ui-translation-dialog": "^7.3.3",
-        "@dhis2/data-visualizer-plugin": "^39.2.6",
-        "@dhis2/ui": "^8.4.12",
+        "@dhis2/data-visualizer-plugin": "^39.2.10",
+        "@dhis2/ui": "^8.4.16",
         "classnames": "^2.3.1",
         "d2": "^31.10.0",
         "d2-utilizr": "^0.2.16",

diff --git a/src/AppWrapper.js b/src/AppWrapper.js
@@ -1,3 +1,4 @@
+import { CachedDataQueryProvider } from '@dhis2/analytics'
 import { useDataEngine } from '@dhis2/app-runtime'
 import { D2Shim } from '@dhis2/app-runtime-adapter-d2'
 import React from 'react'
@@ -30,28 +31,48 @@ if (authorization) {
     d2Config.headers = { Authorization: authorization }
 }
 
+const query = {
+    rootOrgUnits: {
+        resource: 'organisationUnits',
+        params: {
+            fields: 'id,displayName,name',
+            userDataViewFallback: true,
+            paging: false,
+        },
+    },
+}
+
+const providerDataTransformation = ({ rootOrgUnits }) => ({
+    rootOrgUnits: rootOrgUnits.organisationUnits,
+})
+
 const AppWrapper = () => {
     const dataEngine = useDataEngine()
 
     return (
         <ReduxProvider store={configureStore(dataEngine)}>
-            <D2Shim d2Config={d2Config} i18nRoot="./i18n">
-                {({ d2 }) => {
-                    if (!d2) {
-                        // TODO: Handle errors in d2 initialization
-                        return null
-                    }
-                    return (
-                        <SystemSettingsProvider>
-                            <UserSettingsProvider>
-                                <WindowDimensionsProvider>
-                                    <App />
-                                </WindowDimensionsProvider>
-                            </UserSettingsProvider>
-                        </SystemSettingsProvider>
-                    )
-                }}
-            </D2Shim>
+            <CachedDataQueryProvider
+                query={query}
+                dataTransformation={providerDataTransformation}
+            >
+                <D2Shim d2Config={d2Config} i18nRoot="./i18n">
+                    {({ d2 }) => {
+                        if (!d2) {
+                            // TODO: Handle errors in d2 initialization
+                            return null
+                        }
+                        return (
+                            <SystemSettingsProvider>
+                                <UserSettingsProvider>
+                                    <WindowDimensionsProvider>
+                                        <App />
+                                    </WindowDimensionsProvider>
+                                </UserSettingsProvider>
+                            </SystemSettingsProvider>
+                        )
+                    }}
+                </D2Shim>
+            </CachedDataQueryProvider>
         </ReduxProvider>
     )
 }

diff --git a/src/__tests__/AppWrapper.spec.js b/src/__tests__/AppWrapper.spec.js
@@ -2,6 +2,10 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import AppWrapper from '../AppWrapper.js'
 
+jest.mock('@dhis2/analytics', () => ({
+    ...jest.requireActual('@dhis2/analytics'),
+    CachedDataQueryProvider: () => <div className="CachedDataQueryProvider" />,
+}))
 jest.mock('@dhis2/app-runtime-adapter-d2', () => {
     return {
         D2Shim: ({ children }) => children({ d2: {} }),

diff --git a/src/components/DashboardsBar/Chip.js b/src/components/DashboardsBar/Chip.js
@@ -39,9 +39,7 @@ const Chip = ({ starred, selected, label, dashboardId, onClick }) => {
             className={classes.link}
             to={`/${dashboardId}`}
             onClick={handleClick}
-            data-testid={`dashboard-chip${selected ? '-selected' : ''}${
-                starred ? '-starred' : ''
-            }`}
+            data-test="dashboard-chip"
         >
             <UiChip {...chipProps}>
                 <span

diff --git a/src/components/DashboardsBar/__tests__/Chip.spec.js b/src/components/DashboardsBar/__tests__/Chip.spec.js
@@ -12,9 +12,14 @@ jest.mock('@dhis2/ui', () => {
     return {
         __esModule: true,
         ...originalModule,
-        Chip: function Mock({ children, ...props }) {
+        Chip: function Mock({ children, icon, selected }) {
+            const componentProps = {
+                starred: icon ? 'yes' : 'no',
+                isselected: selected ? 'yes' : 'no',
+            }
+
             return (
-                <div className="ui-Chip" {...props}>
+                <div className="mock-ui-Chip" {...componentProps}>
                     {children}
                 </div>
             )
@@ -60,7 +65,7 @@ const defaultProps = {
     },
 }
 
-test('renders an unstarred chip for a non-cached dashboard', () => {
+test('renders an unstarred, unselected chip for a non-cached dashboard', () => {
     useCacheableSection.mockImplementation(() => mockNonOfflineDashboard)
     const { container } = render(
         <Router history={createMemoryHistory()}>
@@ -71,7 +76,7 @@ test('renders an unstarred chip for a non-cached dashboard', () => {
     expect(container).toMatchSnapshot()
 })
 
-test('renders an unstarred chip for cached dashboard', () => {
+test('renders an unstarred, unselected chip for cached dashboard', () => {
     useCacheableSection.mockImplementation(() => mockOfflineDashboard)
     const { container } = render(
         <Router history={createMemoryHistory()}>
@@ -82,7 +87,7 @@ test('renders an unstarred chip for cached dashboard', () => {
     expect(container).toMatchSnapshot()
 })
 
-test('renders a starred chip for a non-cached dashboard', () => {
+test('renders a starred, unselected chip for a non-cached dashboard', () => {
     useCacheableSection.mockImplementation(() => mockNonOfflineDashboard)
     const props = Object.assign({}, defaultProps, { starred: true })
     const { container } = render(
@@ -94,7 +99,7 @@ test('renders a starred chip for a non-cached dashboard', () => {
     expect(container).toMatchSnapshot()
 })
 
-test('renders a starred chip for a cached dashboard', () => {
+test('renders a starred, unselected chip for a cached dashboard', () => {
     useCacheableSection.mockImplementation(() => mockOfflineDashboard)
     const props = Object.assign({}, defaultProps, { starred: true })
     const { container } = render(