fix: use locked dimensions rule from analytics (#444)

* fix: use locked dimensions rule from Analytics in chip * fix: show locked in tooltip * fix: use axis constants * fix: Updated Analytics dep to v2.6.6
dhis2 · Nov 20, 2019 · 883304f · 883304f
1 parent ded0ee9
commit 883304f
Show file tree

Hide file tree

Showing 12 changed files with 122 additions and 75 deletions.
diff --git a/packages/app/i18n/en.pot b/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: 2019-11-18T15:52:18.128Z\n"
-"PO-Revision-Date: 2019-11-18T15:52:18.128Z\n"
+"POT-Creation-Date: 2019-11-20T14:39:06.658Z\n"
+"PO-Revision-Date: 2019-11-20T14:39:06.658Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -104,15 +104,6 @@ msgstr ""
 msgid "{{total}} selected"
 msgstr ""
 
-msgid "Series"
-msgstr ""
-
-msgid "Category"
-msgstr ""
-
-msgid "Filter"
-msgstr ""
-
 msgid "Move to"
 msgstr ""
 

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.6.5",
+        "@dhis2/analytics": "^2.6.6",
         "@dhis2/d2-i18n": "^1.0.6",
         "@dhis2/d2-ui-core": "^6.2.1",
         "@dhis2/d2-ui-file-menu": "^6.2.1",

diff --git a/packages/app/src/components/DimensionsPanel/Dialogs/__tests__/DialogManager.spec.js b/packages/app/src/components/DimensionsPanel/Dialogs/__tests__/DialogManager.spec.js
@@ -37,11 +37,9 @@ jest.mock('@dhis2/analytics', () => {
             [periodId]: {},
             [ouId]: {},
         },
-        axisLabels: {
-            columns: 'columns',
-        },
         getMaxNumberOfItemsPerAxis: () => {},
         filterOutFixedDimensions: () => [],
+        getAxisDisplayName: () => {},
     };
 });
 

diff --git a/packages/app/src/components/DimensionsPanel/DimensionsPanel.js b/packages/app/src/components/DimensionsPanel/DimensionsPanel.js
@@ -4,6 +4,7 @@ import {
     DimensionsPanel,
     DimensionMenu,
     getDisallowedDims,
+    getLockedDims,
 } from '@dhis2/analytics';
 
 import DialogManager from './Dialogs/DialogManager';
@@ -53,6 +54,9 @@ export class Dimensions extends Component {
     disabledDimension = dimension =>
         this.props.disallowedDimensions.includes(dimension.id);
 
+    lockedDimension = dimension =>
+        this.props.lockedDimensions.includes(dimension.id);
+
     getUiAxisName = () => {
         const adaptedUi = getAdaptedUiByType(this.props.ui);
         const inverseLayout = getInverseLayout(adaptedUi.layout);
@@ -70,6 +74,7 @@ export class Dimensions extends Component {
                     dimensions={this.props.dimensions}
                     selectedIds={this.props.selectedIds}
                     disabledDimension={this.disabledDimension}
+                    lockedDimension={this.lockedDimension}
                     recommendedDimension={dimension =>
                         this.props.recommendedIds.includes(dimension.id)
                     }
@@ -101,6 +106,11 @@ const getDisallowedDimensions = createSelector(
     type => getDisallowedDims(type)
 );
 
+const getLockedDimensions = createSelector(
+    [sGetUiType],
+    type => getLockedDims(type)
+);
+
 const mapStateToProps = state => {
     return {
         ui: fromReducers.fromUi.sGetUi(state),
@@ -112,6 +122,7 @@ const mapStateToProps = state => {
         layout: fromReducers.fromUi.sGetUiLayout(state),
         itemsByDimension: fromReducers.fromUi.sGetUiItems(state),
         disallowedDimensions: getDisallowedDimensions(state),
+        lockedDimensions: getLockedDimensions(state),
     };
 };
 

diff --git a/packages/app/src/components/Layout/Chip.js b/packages/app/src/components/Layout/Chip.js
@@ -1,11 +1,15 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import WarningIcon from '@material-ui/icons/Warning';
+import LockIcon from '@material-ui/icons/Lock';
 import i18n from '@dhis2/d2-i18n';
 import {
     FIXED_DIMENSIONS,
     getMaxNumberOfItemsPerAxis,
     hasTooManyItemsPerAxis,
+    getLockedDimensionAxis,
+    getDisplayNameByVisType,
+    getAxisDisplayName,
 } from '@dhis2/analytics';
 
 import Menu from './Menu';
@@ -75,11 +79,28 @@ class Chip extends React.Component {
         return <DynamicDimensionIcon style={styles.dynamicDimensionIcon} />;
     };
 
+    // TODO refactor this very long function
     renderChip = () => {
         const axisName = this.props.axisName;
         const visType = this.props.type;
         const numberOfItems = this.props.items.length;
 
+        const isLocked = getLockedDimensionAxis(
+            visType,
+            this.props.dimensionId
+        ).includes(axisName);
+
+        const lockedMessage = isLocked
+            ? i18n.t(
+                  `{{dimensionName}} is locked to {{axisDisplayName}} for {{visTypeName}}`,
+                  {
+                      dimensionName: this.props.dimensionName,
+                      axisDisplayName: getDisplayNameByVisType(visType),
+                      visTypeName: getAxisDisplayName(axisName),
+                  }
+              )
+            : null;
+
         const maxNumberOfItemsPerAxis = getMaxNumberOfItemsPerAxis(
             visType,
             axisName
@@ -120,11 +141,17 @@ class Chip extends React.Component {
             </div>
         ) : null;
 
+        const lockIcon = isLocked ? (
+            <div style={styles.lockIconWrapper}>
+                <LockIcon style={styles.lockIcon} />
+            </div>
+        ) : null;
+
         return (
             <div
                 style={wrapperStyle}
                 data-dimensionid={this.props.dimensionId}
-                draggable="true"
+                draggable={!isLocked}
                 onDragStart={this.getDragStartHandler(this.props.axisName)}
             >
                 <div
@@ -137,19 +164,23 @@ class Chip extends React.Component {
                     <div style={styles.iconWrapper}>{icon}</div>
                     {chipLabel}
                     {warningIcon}
+                    {lockIcon}
                 </div>
-                <div style={styles.chipRight}>
-                    <Menu
-                        dimensionId={this.props.dimensionId}
-                        currentAxisName={this.props.axisName}
-                        visType={this.props.type}
-                        numberOfDimensionItems={this.props.items.length}
-                    />
-                </div>
+                {!isLocked && (
+                    <div style={styles.chipRight}>
+                        <Menu
+                            dimensionId={this.props.dimensionId}
+                            currentAxisName={this.props.axisName}
+                            visType={this.props.type}
+                            numberOfDimensionItems={this.props.items.length}
+                        />
+                    </div>
+                )}
                 {anchorEl && (
                     <Tooltip
                         dimensionId={this.props.dimensionId}
                         itemIds={activeItemIds}
+                        lockedLabel={lockedMessage}
                         displayLimitedAmount={
                             this.props.items.length > activeItemIds.length
                         }

diff --git a/packages/app/src/components/Layout/DefaultLayout/DefaultAxis.js b/packages/app/src/components/Layout/DefaultLayout/DefaultAxis.js
@@ -5,10 +5,11 @@ import MenuItem from '@material-ui/core/MenuItem';
 import Divider from '@material-ui/core/Divider';
 import {
     AXIS_NAME_COLUMNS,
-    AXIS_NAMES,
+    DEFAULT_AXIS_NAMES,
     DIMENSION_ID_DATA,
     isYearOverYear,
     isDualAxisType,
+    getAxisDisplayName,
 } from '@dhis2/analytics';
 
 import Chip from '../Chip';
@@ -22,13 +23,6 @@ import { SOURCE_DIMENSIONS, menuLabels } from '../../../modules/layout';
 import { getAdaptedUiByType } from '../../../modules/ui';
 
 import styles from './styles/DefaultAxis.style';
-
-const axisLabels = {
-    columns: i18n.t('Series'),
-    rows: i18n.t('Category'),
-    filters: i18n.t('Filter'),
-};
-
 class Axis extends React.Component {
     onDragOver = e => {
         e.preventDefault();
@@ -54,12 +48,14 @@ class Axis extends React.Component {
     isMoveSupported = () => !isYearOverYear(this.props.type);
 
     getAxisMenuItems = dimensionId =>
-        AXIS_NAMES.filter(key => key !== this.props.axisName).map(key => (
-            <MenuItem
-                key={`${dimensionId}-to-${key}`}
-                onClick={this.props.getMoveHandler({ [dimensionId]: key })}
-            >{`${i18n.t('Move to')} ${menuLabels[key]}`}</MenuItem>
-        ));
+        DEFAULT_AXIS_NAMES.filter(key => key !== this.props.axisName).map(
+            key => (
+                <MenuItem
+                    key={`${dimensionId}-to-${key}`}
+                    onClick={this.props.getMoveHandler({ [dimensionId]: key })}
+                >{`${i18n.t('Move to')} ${menuLabels[key]}`}</MenuItem>
+            )
+        );
 
     isSeries = () => this.props.axisName === AXIS_NAME_COLUMNS;
 
@@ -116,7 +112,7 @@ class Axis extends React.Component {
                 onDrop={this.onDrop}
             >
                 <div style={styles.label}>
-                    {axisLabels[this.props.axisName]}
+                    {getAxisDisplayName(this.props.axisName)}
                 </div>
                 <div style={styles.content}>
                     {this.props.axis.map(dimensionId => (

diff --git a/packages/app/src/components/Layout/Tooltip.js b/packages/app/src/components/Layout/Tooltip.js
@@ -37,23 +37,34 @@ export class Tooltip extends React.Component {
     );
 
     render() {
-        const { itemIds, metadata, displayLimitedAmount } = this.props;
+        const {
+            itemIds,
+            metadata,
+            displayLimitedAmount,
+            lockedLabel,
+        } = this.props;
 
-        let names = [];
+        const names = [];
+
+        if (lockedLabel) {
+            names.push(lockedLabel);
+        }
 
         if (itemIds.length && displayLimitedAmount) {
             if (itemIds.length === 1) {
                 const id = itemIds[0];
-                names = [
-                    labels.onlyOneInUse(metadata[id] ? metadata[id].name : id),
-                ];
+                names.push(
+                    labels.onlyOneInUse(metadata[id] ? metadata[id].name : id)
+                );
             } else {
-                names = [labels.onlyLimitedNumberInUse(itemIds.length)];
+                names.push(labels.onlyLimitedNumberInUse(itemIds.length));
             }
         } else if (itemIds.length) {
-            names = itemIds.map(id => (metadata[id] ? metadata[id].name : id));
+            names.push(
+                ...itemIds.map(id => (metadata[id] ? metadata[id].name : id))
+            );
         } else {
-            names = [labels.noneSelected];
+            names.push(labels.noneSelected);
         }
 
         return names.length ? this.renderTooltip(names) : '';
@@ -64,6 +75,7 @@ Tooltip.propTypes = {
     open: PropTypes.bool.isRequired,
     anchorEl: PropTypes.object.isRequired,
     dimensionId: PropTypes.string.isRequired,
+    lockedLabel: PropTypes.string,
     itemIds: PropTypes.array,
     displayLimitedAmount: PropTypes.bool,
 };

diff --git a/packages/app/src/components/Layout/YearOverYearLayout/YearOverYearAxis.js b/packages/app/src/components/Layout/YearOverYearLayout/YearOverYearAxis.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import i18n from '@dhis2/d2-i18n';
+import { getAxisDisplayName } from '@dhis2/analytics';
 
 import {
     sGetUiYearOverYearSeries,
@@ -9,18 +9,13 @@ import {
 import defaultAxisStyles from '../DefaultLayout/styles/DefaultAxis.style';
 import YearOverYearAxisStyles from './styles/YearOverYearAxis.style';
 
-const axisLabels = {
-    yearOverYearSeries: i18n.t('Series'),
-    yearOverYearCategory: i18n.t('Category'),
-};
-
 const YearOverYearAxis = props => (
     <div
         id={props.axisName}
         style={{ ...defaultAxisStyles.axisContainer, ...props.style }}
     >
         <div className="label" style={defaultAxisStyles.label}>
-            {axisLabels[props.axisName]}
+            {getAxisDisplayName(props.axisName)}
         </div>
         <div
             className="content"

diff --git a/packages/app/src/components/Layout/styles/Chip.style.js b/packages/app/src/components/Layout/styles/Chip.style.js
@@ -19,6 +19,8 @@ export const styles = {
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
+        minHeight: 24,
+        userSelect: 'none',
     },
     chipEmpty: {
         backgroundColor: colors.grey300,
@@ -32,13 +34,21 @@ export const styles = {
         alignItems: 'center',
     },
     warningIcon: {
-        fontSize: 12,
+        fontSize: layoutStyle.CHIP_FONT_SIZE,
     },
     warningIconWrapper: {
         paddingLeft: '6px',
         display: 'flex',
         alignItems: 'center',
     },
+    lockIcon: {
+        fontSize: layoutStyle.CHIP_FONT_SIZE,
+    },
+    lockIconWrapper: {
+        paddingLeft: '6px',
+        display: 'flex',
+        alignItems: 'center',
+    },
 };
 
 styles.chipLeft = {