feat: summarize chart filters that have orgunit levels and/or groups (#…

…298) If a chart filter contains orgUnit levels and or groups, then the filter text will be summarized instead of listing each ou in the level/group. This is to avoid having very long chart filter texts. Changes include: * request ou levels once at app startup, and store as prop in the App component * convert numeric ou ids to uids, which may be used when generating the chart title, as well as correctly populating the orgunit dialog * update apiVersion to current * convert args for tDoLoadVisualization to an object, since it had reached 4 args * remove unused functions: apiFetchOrganisationUnits, apiFetchOrganisationUnitGroups * moved getOrgUnitsFromIds to the DialogManager since it is only relevant for DialogManager [DHIS2-6990]
dhis2 · Aug 20, 2019 · e5e0a7b · e5e0a7b
1 parent 1001d75
commit e5e0a7b
Show file tree

Hide file tree

Showing 11 changed files with 433 additions and 273 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -25,7 +25,7 @@
         "webpack-bundle-analyzer": "^3.0.3"
     },
     "dependencies": {
-        "@dhis2/analytics": "2.1.1",
+        "@dhis2/analytics": "2.3.4",
         "@dhis2/d2-i18n": "^1.0.3",
         "@dhis2/d2-ui-core": "6.1.0",
         "@dhis2/d2-ui-file-menu": "6.1.0",
@@ -120,7 +120,7 @@
             "name": "DHIS2"
         },
         "dhis2": {
-            "apiVersion": "31"
+            "apiVersion": "32"
         },
         "activities": {
             "dhis": {

diff --git a/packages/app/src/actions/__tests__/index.spec.js b/packages/app/src/actions/__tests__/index.spec.js
@@ -30,6 +30,20 @@ const relativePeriod = 'xyzpdq';
 selectors.sGetRootOrgUnit = () => rootOrganisationUnit;
 selectors.sGetRelativePeriod = () => relativePeriod;
 
+jest.mock('../../modules/orgUnit', () => ({
+    convertOuLevelsToUids: (ouLevels, vis) => vis,
+}));
+
+jest.mock('../../api/organisationUnits', () => ({
+    apiFetchOrganisationUnitLevels: () =>
+        Promise.resolve([
+            {
+                level: 2,
+                id: '2nd-floor',
+            },
+        ]),
+}));
+
 describe('index', () => {
     describe('tDoLoadVisualization', () => {
         it('dispatches the correct actions after successfully fetching visualization', () => {
@@ -59,7 +73,12 @@ describe('index', () => {
             const store = mockStore({});
 
             return store
-                .dispatch(fromActions.tDoLoadVisualization())
+                .dispatch(
+                    fromActions.tDoLoadVisualization({
+                        type: 'test',
+                        id: 1,
+                    })
+                )
                 .then(() => {
                     expect(store.getActions()).toEqual(expectedActions);
                 });
@@ -101,7 +120,14 @@ describe('index', () => {
             const store = mockStore({});
 
             return store
-                .dispatch(fromActions.tDoLoadVisualization('test', 1, 1))
+                .dispatch(
+                    fromActions.tDoLoadVisualization({
+                        type: 'test',
+                        id: 1,
+                        interpretationId: 1,
+                        ouLevels: [],
+                    })
+                )
                 .then(() => {
                     expect(store.getActions()).toEqual(expectedActions);
                 });
@@ -117,7 +143,12 @@ describe('index', () => {
             const store = mockStore({});
 
             return store
-                .dispatch(fromActions.tDoLoadVisualization())
+                .dispatch(
+                    fromActions.tDoLoadVisualization({
+                        type: 'test',
+                        id: 1,
+                    })
+                )
                 .then(() => {
                     expect(store.getActions().slice(-1)[0].type).toEqual(
                         CLEAR_LOAD_ERROR
@@ -146,7 +177,12 @@ describe('index', () => {
             const store = mockStore({});
 
             return store
-                .dispatch(fromActions.tDoLoadVisualization())
+                .dispatch(
+                    fromActions.tDoLoadVisualization({
+                        type: 'test',
+                        id: 1,
+                    })
+                )
                 .then(() => {
                     expect(store.getActions()).toEqual(expectedActions);
                 });

diff --git a/packages/app/src/actions/index.js b/packages/app/src/actions/index.js
@@ -22,6 +22,7 @@ import { sGetVisualization } from '../reducers/visualization';
 import { sGetRootOrgUnit, sGetRelativePeriod } from '../reducers/settings';
 
 import history from '../modules/history';
+import { convertOuLevelsToUids } from '../modules/orgUnit';
 
 export {
     fromVisualization,
@@ -44,12 +45,14 @@ export const onError = (action, error) => {
 
 // visualization, current, ui
 
-export const tDoLoadVisualization = (type, id, interpretationId) => async (
-    dispatch,
-    getState
-) => {
-    const onSuccess = model => {
-        const visualization = model.toJSON();
+export const tDoLoadVisualization = ({
+    type,
+    id,
+    interpretationId,
+    ouLevels,
+}) => async (dispatch, getState) => {
+    const onSuccess = async model => {
+        const visualization = convertOuLevelsToUids(ouLevels, model.toJSON());
 
         if (interpretationId) {
             const interpretation = visualization.interpretations.find(

diff --git a/packages/app/src/api/organisationUnits.js b/packages/app/src/api/organisationUnits.js
@@ -14,49 +14,13 @@ export const apiFetchOrganisationUnitRoot = () => {
         .catch(onError);
 };
 
-/**
- * Fetch organisation units
- * @returns {Promise<T | never>}
- */
-export const apiFetchOrganisationUnits = displayNameProperty => {
-    const fields = [
-        'id',
-        'path',
-        `${displayNameProperty}~rename(displayName)`,
-        'children::isNotEmpty',
-    ];
-
-    return getInstance().then(d2 =>
-        d2.models.organisationUnits.list({
-            paging: false,
-            level: 1,
-            fields: fields.join(','),
-        })
-    );
-};
-
-/**
- * Fetch organisation unit groups
- * @returns {*}
- */
-export const apiFetchOrganisationUnitGroups = displayNameProperty => {
-    const endPoint = '/organisationUnitGroups';
-    const fields = ['id', `${displayNameProperty}~rename(displayName)`, 'name'];
-    const url = `${endPoint}?paging=false&fields=${fields.join(',')}`;
-
-    return getInstance()
-        .then(d2 => d2.Api.getApi().get(url))
-        .then(({ organisationUnitGroups }) => organisationUnitGroups)
-        .catch(onError);
-};
-
 /**
  * Fetch organisation unit levels
- * @returns {*}
+ * @returns {Promise}
  */
 export const apiFetchOrganisationUnitLevels = () => {
     const endPoint = '/organisationUnitLevels';
-    const fields = ['id', 'displayName', 'name', 'level'];
+    const fields = ['id', 'name', 'displayName', 'level'];
     const url = `${endPoint}?paging=false&fields=${fields.join(',')}`;
 
     return getInstance()

diff --git a/packages/app/src/components/App.js b/packages/app/src/components/App.js
@@ -87,11 +87,12 @@ export class App extends Component {
 
             if (!urlContainsCurrentAOKey && this.refetch(location)) {
                 await store.dispatch(
-                    fromActions.tDoLoadVisualization(
-                        this.props.apiObjectName,
+                    fromActions.tDoLoadVisualization({
+                        type: this.props.apiObjectName,
                         id,
-                        interpretationId
-                    )
+                        interpretationId,
+                        ouLevels: this.props.ouLevels,
+                    })
                 );
             }
 

diff --git a/packages/app/src/components/DimensionsPanel/Dialogs/DialogManager.js b/packages/app/src/components/DimensionsPanel/Dialogs/DialogManager.js
@@ -1,7 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-
 import debounce from 'lodash-es/debounce';
 import isEqual from 'lodash-es/isEqual';
 
@@ -13,6 +12,7 @@ import {
     DynamicDimension,
     PeriodDimension,
     OrgUnitDimension,
+    ouIdHelper,
     DIMENSION_ID_DATA,
     DIMENSION_ID_PERIOD,
     DIMENSION_ID_ORGUNIT,
@@ -42,10 +42,7 @@ import { sGetDimensions } from '../../../reducers/dimensions';
 import { sGetMetadata } from '../../../reducers/metadata';
 import { sGetSettingsDisplayNameProperty } from '../../../reducers/settings';
 import { apiFetchRecommendedIds } from '../../../api/dimensions';
-import {
-    getOrgUnitsFromIds,
-    removeLastPathSegment,
-} from '../../../modules/orgUnit';
+import { removeLastPathSegment, getOuPath } from '../../../modules/orgUnit';
 
 export class DialogManager extends Component {
     state = {
@@ -90,8 +87,9 @@ export class DialogManager extends Component {
                 const forParentGraphMap = {};
 
                 items.forEach(ou => {
-                    forMetadata[ou.id] = {
-                        id: ou.id,
+                    const id = ouIdHelper.removePrefix(ou.id);
+                    forMetadata[id] = {
+                        id,
                         name: ou.name || ou.displayName,
                         displayName: ou.displayName,
                     };
@@ -136,6 +134,18 @@ export class DialogManager extends Component {
             : [];
     };
 
+    getOrgUnitsFromIds = (ids, metadata, parentGraphMap) =>
+        ids
+            .filter(id => metadata[ouIdHelper.removePrefix(id)] !== undefined)
+            .map(id => {
+                const ouUid = ouIdHelper.removePrefix(id);
+                return {
+                    id,
+                    name: metadata[ouUid].displayName || metadata[ouUid].name,
+                    path: getOuPath(ouUid, metadata, parentGraphMap),
+                };
+            });
+
     // The OU content is persisted as mounted in order
     // to cache the org unit tree data
     renderPersistedContent = dimensionProps => {
@@ -148,7 +158,11 @@ export class DialogManager extends Component {
         } = this.props;
 
         if (this.state.ouMounted) {
-            const ouItems = getOrgUnitsFromIds(ouIds, metadata, parentGraphMap);
+            const ouItems = this.getOrgUnitsFromIds(
+                ouIds,
+                metadata,
+                parentGraphMap
+            );
 
             const display =
                 DIMENSION_ID_ORGUNIT === dialogId ? 'block' : 'none';

diff --git a/packages/app/src/index.js b/packages/app/src/index.js
@@ -16,6 +16,7 @@ import metadataMiddleware from './middleware/metadata';
 import App from './components/App';
 import muiTheme from './modules/theme';
 import { extractUserSettings } from './modules/settings';
+import { apiFetchOrganisationUnitLevels } from './api/organisationUnits';
 
 const apiObjectName = 'chart';
 
@@ -32,7 +33,7 @@ const configI18n = async userSettings => {
     i18n.changeLanguage(uiLocale);
 };
 
-const render = (location, baseUrl, d2, userSettings) => {
+const render = props => {
     const store = configureStore(metadataMiddleware);
 
     if (window.Cypress) {
@@ -42,13 +43,7 @@ const render = (location, baseUrl, d2, userSettings) => {
     ReactDOM.render(
         <Provider store={store}>
             <MuiThemeProvider theme={muiTheme}>
-                <App
-                    location={location}
-                    baseUrl={baseUrl}
-                    d2={d2}
-                    userSettings={userSettings}
-                    apiObjectName={apiObjectName}
-                />
+                <App apiObjectName={apiObjectName} {...props} />
             </MuiThemeProvider>
         </Provider>,
         document.getElementById('root')
@@ -78,7 +73,9 @@ const init = async () => {
         baseUrl: config.baseUrl,
     });
 
-    render(history.location, baseUrl, d2, userSettings);
+    const ouLevels = await apiFetchOrganisationUnitLevels();
+
+    render({ location: history.location, baseUrl, d2, userSettings, ouLevels });
 };
 
 init();