fix: translations need to be determined at render time [v33] [DHIS2-8…

…638] (#967)

Fixes: https://jira.dhis2.org/browse/DHIS2-8638

Translations need to be figured at render-time, rather than just being consts outside of functions. 3rd party libs (analytics, d2-ui components) also updated with the same type of changes.
Also, datasets.js and datatypes.js were removed as they had previously been migrated to the analytics library (but forgotten to delete in DV). This resulted in removal of some translations from en.pot

packages/app/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: 2020-04-29T13:47:48.626Z\n"
-"PO-Revision-Date: 2020-04-29T13:47:48.626Z\n"
+"POT-Creation-Date: 2020-05-13T12:10:52.295Z\n"
+"PO-Revision-Date: 2020-05-13T12:10:52.295Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -69,12 +69,33 @@ msgstr ""
 msgid "Metadata ID scheme"
 msgstr ""
 
+msgid "ID"
+msgstr ""
+
+msgid "Code"
+msgstr ""
+
+msgid "Name"
+msgstr ""
+
 msgid "Data value set"
 msgstr ""
 
+msgid "JSON"
+msgstr ""
+
+msgid "XML"
+msgstr ""
+
 msgid "Other formats"
 msgstr ""
 
+msgid "JRXML"
+msgstr ""
+
+msgid "Raw data SQL"
+msgstr ""
+
 msgid "An error occurred in the DHIS2 Data Visualizer application."
 msgstr ""
 
@@ -111,9 +132,6 @@ msgstr ""
 msgid "Filter"
 msgstr ""
 
-msgid "Move to"
-msgstr ""
-
 msgid "None selected"
 msgstr ""
 
@@ -138,10 +156,10 @@ msgstr ""
 msgid "Error validating layout"
 msgstr ""
 
-msgid "Create a new visualization by adding dimensions to the layout"
+msgid "Chart error"
 msgstr ""
 
-msgid "Chart error"
+msgid "Create a new visualization by adding dimensions to the layout"
 msgstr ""
 
 msgid "Error generating chart, please try again"
@@ -345,73 +363,22 @@ msgstr ""
 msgid "Open as Map"
 msgstr ""
 
-msgid "Reporting rate"
-msgstr ""
-
-msgid "Reporting rate on time"
-msgstr ""
-
-msgid "Actual reports"
-msgstr ""
-
-msgid "Actual reports on time"
-msgstr ""
-
-msgid "Expected reports"
-msgstr ""
-
-msgid "Program"
-msgstr ""
-
-msgid "Select a program"
-msgstr ""
-
-msgid "Indicators"
-msgstr ""
-
-msgid "Select indicator group"
-msgstr ""
-
-msgid "[ All groups ]"
-msgstr ""
-
-msgid "Data elements"
-msgstr ""
-
-msgid "Select data element group"
-msgstr ""
-
-msgid "[ All data elements ]"
-msgstr ""
-
-msgid "Totals"
-msgstr ""
-
-msgid "Details"
-msgstr ""
-
-msgid "Data sets"
-msgstr ""
-
-msgid "Select data sets"
-msgstr ""
-
-msgid "[ All metrics ]"
+msgid "Add to series"
 msgstr ""
 
-msgid "Event data items"
+msgid "Add to category"
 msgstr ""
 
-msgid "Program indicators"
+msgid "Add to filter"
 msgstr ""
 
-msgid "Add to series"
+msgid "Move to series"
 msgstr ""
 
-msgid "Add to category"
+msgid "Move to category"
 msgstr ""
 
-msgid "Add to filter"
+msgid "Move to filter"
 msgstr ""
 
 msgid "series"
@@ -558,15 +525,6 @@ msgstr ""
 msgid "Last 5 years"
 msgstr ""
 
-msgid "User org unit"
-msgstr ""
-
-msgid "User org unit children"
-msgstr ""
-
-msgid "User org unit grand children"
-msgstr ""
-
 msgid "Weeks per year"
 msgstr ""
 

packages/app/package.json

@@ -25,12 +25,12 @@
         "webpack-bundle-analyzer": "^3.0.3"
     },
     "dependencies": {
-        "@dhis2/analytics": "2.4.9",
+        "@dhis2/analytics": "~2.4.12",
         "@dhis2/d2-i18n": "^1.0.6",
-        "@dhis2/d2-ui-core": "^6.2.1",
-        "@dhis2/d2-ui-file-menu": "^6.2.1",
-        "@dhis2/d2-ui-interpretations": "^6.2.1",
-        "@dhis2/data-visualizer-plugin": "^33.1.7",
+        "@dhis2/d2-ui-core": "^7.0.2",
+        "@dhis2/d2-ui-file-menu": "^7.0.2",
+        "@dhis2/d2-ui-interpretations": "^7.0.2",
+        "@dhis2/data-visualizer-plugin": "^33.1.11",
         "@dhis2/ui": "^1.0.0-beta.11",
         "@dhis2/ui-core": "^3.4.0",
         "@material-ui/core": "^3.1.2",
@@ -97,7 +97,7 @@
         "lint": "eslint --config=../../.eslintrc.json src",
         "prettier-ci": "prettier \"./src/{**/*,*}.js\" --list-different",
         "prettier-write": "prettier \"./src/{**/*,*}.js\" --write",
-        "localize": "npm run extract-pot && d2-i18n-generate -n data-visualizer-app -p ./i18n/ -o ./src/locales/",
+        "localize": "npm run extract-pot && d2-i18n-generate -n default -p ./i18n/ -o ./src/locales/",
         "extract-pot": "d2-i18n-extract -p src/ -o i18n/",
         "manifest": "d2-manifest package.json build/manifest.webapp",
         "test": "node scripts/test.js --config=../../jest.config.js",

packages/app/src/components/DimensionsPanel/Dialogs/AddToLayoutButton/AddToLayoutButton.js

@@ -4,7 +4,11 @@ import { connect } from 'react-redux';
 import Button from '@material-ui/core/Button';
 import MenuItem from '@material-ui/core/Button';
 import { withStyles } from '@material-ui/core/styles';
-import { AXIS_NAME_COLUMNS } from '@dhis2/analytics';
+import {
+    AXIS_NAME_COLUMNS,
+    AXIS_NAME_ROWS,
+    AXIS_NAME_FILTERS,
+} from '@dhis2/analytics';
 
 import UpdateButton from '../../../UpdateButton/UpdateButton';
 import Menu from './Menu';
@@ -21,15 +25,10 @@ import {
 import { acSetCurrentFromUi } from '../../../../actions/current';
 
 import { isYearOverYear } from '../../../../modules/chartTypes';
-import { ADD_TO_LAYOUT_OPTIONS } from '../../../../modules/layout';
+import { getAddToAxisLabel } from '../../../../modules/layout';
 import styles from './styles/AddToLayoutButton.style';
 
 const UNSELECTED_BUTTON_TYPE = -1;
-const seriesItem = ADD_TO_LAYOUT_OPTIONS[0];
-const filterItem = ADD_TO_LAYOUT_OPTIONS[2];
-const itemsWithoutSeries = ADD_TO_LAYOUT_OPTIONS.filter(
-    option => option.axisKey !== AXIS_NAME_COLUMNS
-);
 
 export class AddToLayoutButton extends Component {
     constructor(props) {
@@ -63,14 +62,14 @@ export class AddToLayoutButton extends Component {
     };
 
     renderMenuItems = () =>
-        itemsWithoutSeries.map(option => (
+        [AXIS_NAME_ROWS, AXIS_NAME_FILTERS].map(axisKey => (
             <MenuItem
                 className={this.props.classes.menuItem}
                 component="li"
-                key={option.axisKey}
-                onClick={() => this.onUpdate(option.axisKey)}
+                key={axisKey}
+                onClick={() => this.onUpdate(axisKey)}
             >
-                {option.name}
+                {getAddToAxisLabel(axisKey)}
             </MenuItem>
         ));
 
@@ -82,9 +81,9 @@ export class AddToLayoutButton extends Component {
                 color="primary"
                 disableRipple
                 disableFocusRipple
-                onClick={() => this.onUpdate(filterItem.axisKey)}
+                onClick={() => this.onUpdate(AXIS_NAME_FILTERS)}
             >
-                {filterItem.name}
+                {getAddToAxisLabel(AXIS_NAME_FILTERS)}
             </Button>
         ) : (
             <div ref={addToRef => (this.buttonRef = addToRef)}>
@@ -94,9 +93,9 @@ export class AddToLayoutButton extends Component {
                     color="primary"
                     disableRipple
                     disableFocusRipple
-                    onClick={() => this.onUpdate(seriesItem.axisKey)}
+                    onClick={() => this.onUpdate(AXIS_NAME_COLUMNS)}
                 >
-                    {seriesItem.name}
+                    {getAddToAxisLabel(AXIS_NAME_COLUMNS)}
                 </Button>
                 <Menu
                     onClose={this.onClose}

packages/app/src/components/DimensionsPanel/Dialogs/AddToLayoutButton/__tests__/Menu.spec.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
-import { ADD_TO_LAYOUT_OPTIONS } from '../../../../../modules/layout';
 
 import { DropDown } from '../Menu';
 import DropDownButton from '../DropDownButton';
@@ -55,8 +54,8 @@ describe('The DropDownButton component ', () => {
     it('renders a Menu with children if prop anchorel is equal to a truthy value', () => {
         props.anchorEl = { getBoundingClientRect: () => ({ bottom: 100 }) };
 
-        props.menuItems = ADD_TO_LAYOUT_OPTIONS.map((option, i) => (
-            <MenuItem key={i} value={option.axisName} />
+        props.menuItems = ['columns', 'rows', 'filters'].map((option, i) => (
+            <MenuItem key={i} value={option} />
         ));
 
         const menu = dropDown()

packages/app/src/components/DimensionsPanel/DimensionOptions/DimensionOptions.js

@@ -3,17 +3,21 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import i18n from '@dhis2/d2-i18n';
 import MenuItem from '@material-ui/core/MenuItem';
+import {
+    AXIS_NAME_COLUMNS,
+    AXIS_NAME_ROWS,
+    AXIS_NAME_FILTERS,
+} from '@dhis2/analytics';
 import ContextMenu from './ContextMenu';
 import {
     acAddUiLayoutDimensions,
     acRemoveUiLayoutDimensions,
     acSetUiActiveModalDialog,
 } from '../../../actions/ui';
 import { sGetUiLayout, sGetUiItemsByDimension } from '../../../reducers/ui';
-import { menuLabels, ADD_TO_LAYOUT_OPTIONS } from '../../../modules/layout';
+import { getAddToAxisLabel, getMoveToAxisLabel } from '../../../modules/layout';
 import { isYearOverYear } from '../../../modules/chartTypes';
 
-const FILTER = 2;
 const emptyItems = [];
 
 export class DimensionOptions extends Component {
@@ -38,21 +42,20 @@ export class DimensionOptions extends Component {
             items = [
                 this.renderMenuItem({
                     key: `add-to-${this.props.id}`,
-                    id: ADD_TO_LAYOUT_OPTIONS[FILTER].axisKey,
+                    id: AXIS_NAME_FILTERS,
                     onClick: this.addDimension,
-                    displayName: ADD_TO_LAYOUT_OPTIONS[FILTER].name,
+                    displayName: getAddToAxisLabel(AXIS_NAME_FILTERS),
                 }),
             ];
         } else {
-            items = Object.values(
-                ADD_TO_LAYOUT_OPTIONS.map(axis =>
+            items = [AXIS_NAME_COLUMNS, AXIS_NAME_ROWS, AXIS_NAME_FILTERS].map(
+                axis =>
                     this.renderMenuItem({
-                        key: `add-to-${axis.axisKey}`,
-                        id: axis.axisKey,
+                        key: `add-to-${axis}`,
+                        id: axis,
                         onClick: this.addDimension,
-                        displayName: axis.name,
+                        displayName: getAddToAxisLabel(axis),
                     })
-                )
             );
         }
         return items;
@@ -69,13 +72,11 @@ export class DimensionOptions extends Component {
         );
 
         return items.map(([key, axisIds]) => {
-            const label = menuLabels[key];
-
             return this.renderMenuItem({
                 key: `${this.props.id}-to-${key}`,
                 id: key,
                 onClick: this.addDimension,
-                displayName: `${i18n.t(`Move to ${label}`, { label })}`,
+                displayName: getMoveToAxisLabel(key),
             });
         });
     };