fix: rename axis name constants

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-20T14:39:06.658Z\n"
-"PO-Revision-Date: 2019-11-20T14:39:06.658Z\n"
+"POT-Creation-Date: 2019-11-20T20:35:32.765Z\n"
+"PO-Revision-Date: 2019-11-20T20:35:32.765Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -98,6 +98,9 @@ msgstr ""
 msgid "Interpretations"
 msgstr ""
 
+msgid "{{dimensionName}} is locked to {{axisDisplayName}} for {{visTypeName}}"
+msgstr ""
+
 msgid "{{total}} of {{maxNumberOfItemsPerAxis}} selected"
 msgstr ""
 

packages/app/package.json

@@ -25,7 +25,7 @@
         "webpack-bundle-analyzer": "^3.0.3"
     },
     "dependencies": {
-        "@dhis2/analytics": "^2.6.6",
+        "@dhis2/analytics": "^2.6.8",
         "@dhis2/d2-i18n": "^1.0.6",
         "@dhis2/d2-ui-core": "^6.2.1",
         "@dhis2/d2-ui-file-menu": "^6.2.1",

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

@@ -37,20 +37,20 @@ export class AddToLayoutButton extends Component {
             ? this.onClose()
             : this.setState({ anchorEl: event.currentTarget });
 
-    onUpdate = axisName => {
+    onUpdate = axisId => {
         this.props.onAddDimension({
-            [this.props.dialogId]: axisName,
+            [this.props.dialogId]: axisId,
         });
 
         this.props.onUpdate();
 
         this.props.closeDialog(null);
     };
 
-    getAxisMeta = axisNameArray =>
-        axisNameArray.map(axisName =>
+    getAxisMeta = axisIdArray =>
+        axisIdArray.map(axisId =>
             ADD_TO_LAYOUT_OPTIONS.find(
-                axisMetaObj => axisMetaObj.axisName === axisName
+                axisMetaObj => axisMetaObj.axisId === axisId
             )
         );
 
@@ -61,8 +61,8 @@ export class AddToLayoutButton extends Component {
                 <MenuItem
                     className={this.props.classes.menuItem}
                     component="li"
-                    key={axisMetaObj.axisName}
-                    onClick={() => this.onUpdate(axisMetaObj.axisName)}
+                    key={axisMetaObj.axisId}
+                    onClick={() => this.onUpdate(axisMetaObj.axisId)}
                 >
                     {axisMetaObj.name}
                 </MenuItem>
@@ -81,7 +81,7 @@ export class AddToLayoutButton extends Component {
                     color="primary"
                     disableRipple
                     disableFocusRipple
-                    onClick={() => this.onUpdate(availableAxisMeta[0].axisName)}
+                    onClick={() => this.onUpdate(availableAxisMeta[0].axisId)}
                 >
                     {availableAxisMeta[0].name}
                 </Button>

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Button from '@material-ui/core/Button';
 
 import { AddToLayoutButton } from '../AddToLayoutButton';
 
@@ -15,6 +14,9 @@ describe('The AddToLayoutButton component ', () => {
         return shallowButton;
     };
 
+    // TODO remove
+    console.log('getShallowAddToLayoutButton', getShallowAddToLayoutButton);
+
     beforeEach(() => {
         props = {
             classes: {},

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

@@ -56,7 +56,7 @@ describe('The DropDownButton component ', () => {
         props.anchorEl = { getBoundingClientRect: () => ({ bottom: 100 }) };
 
         props.menuItems = ADD_TO_LAYOUT_OPTIONS.map((option, i) => (
-            <MenuItem key={i} value={option.axisName} />
+            <MenuItem key={i} value={option.axisId} />
         ));
 
         const menu = dropDown()

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

@@ -40,7 +40,7 @@ import {
     sGetUiActiveModalDialog,
     sGetUiParentGraphMap,
     sGetUiType,
-    getAxisNameByDimensionId,
+    getAxisIdByDimensionId,
 } from '../../../reducers/ui';
 import { sGetDimensions } from '../../../reducers/dimensions';
 import { sGetMetadata } from '../../../reducers/metadata';
@@ -206,13 +206,13 @@ export class DialogManager extends Component {
             const selectedItems = this.getSelectedItems(dialogId);
             let infoBoxMessage;
 
-            const axisName = this.props.getAxisNameByDimensionId(dialogId);
+            const axisId = this.props.getAxisIdByDimensionId(dialogId);
             const visType = type;
             const numberOfItems = selectedItems.length;
 
             const maxNumberOfItemsPerAxis = getMaxNumberOfItemsPerAxis(
                 visType,
-                axisName
+                axisId
             );
 
             const hasMaxNumberOfItemsRule = !!maxNumberOfItemsPerAxis;
@@ -350,8 +350,8 @@ const mapStateToProps = state => ({
     ouIds: sGetUiItemsByDimension(state, DIMENSION_ID_ORGUNIT),
     selectedItems: sGetUiItems(state),
     type: sGetUiType(state),
-    getAxisNameByDimensionId: dimensionId =>
-        getAxisNameByDimensionId(state, dimensionId),
+    getAxisIdByDimensionId: dimensionId =>
+        getAxisIdByDimensionId(state, dimensionId),
 });
 
 export default connect(

packages/app/src/components/DimensionsPanel/Dialogs/__tests__/DialogManager.spec.js

@@ -39,7 +39,7 @@ jest.mock('@dhis2/analytics', () => {
         },
         getMaxNumberOfItemsPerAxis: () => {},
         filterOutFixedDimensions: () => [],
-        getAxisDisplayName: () => {},
+        getAxisName: () => {},
     };
 });
 
@@ -76,7 +76,7 @@ describe('The DialogManager component', () => {
             metadata: {},
             closeDialog: jest.fn(),
             setRecommendedIds: jest.fn(),
-            getAxisNameByDimensionId: () => {},
+            getAxisIdByDimensionId: () => {},
         };
         shallowDialog = undefined;
     });

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

@@ -57,7 +57,7 @@ export class Dimensions extends Component {
     lockedDimension = dimension =>
         this.props.lockedDimensions.includes(dimension.id);
 
-    getUiAxisName = () => {
+    getUiAxisId = () => {
         const adaptedUi = getAdaptedUiByType(this.props.ui);
         const inverseLayout = getInverseLayout(adaptedUi.layout);
 
@@ -85,7 +85,7 @@ export class Dimensions extends Component {
                 {/* {this.state.dimensionMenuAnchorEl && ( */}
                 <DimensionMenu
                     dimensionId={this.state.dimensionId}
-                    currentAxisName={this.getUiAxisName()}
+                    currentAxisId={this.getUiAxisId()}
                     visType={this.props.ui.type}
                     numberOfDimensionItems={this.getNumberOfDimensionItems()}
                     dualAxisItemHandler={this.props.dualAxisItemHandler}
@@ -131,8 +131,8 @@ const mapDispatchToProps = dispatch => ({
         dispatch(fromActions.fromUi.acSetUiActiveModalDialog(id)),
     dualAxisItemHandler: () =>
         dispatch(acSetUiActiveModalDialog(AXIS_SETUP_DIALOG_ID)),
-    axisItemHandler: (dimensionId, targetAxisName, numberOfDimensionItems) => {
-        dispatch(acAddUiLayoutDimensions({ [dimensionId]: targetAxisName }));
+    axisItemHandler: (dimensionId, targetAxisId, numberOfDimensionItems) => {
+        dispatch(acAddUiLayoutDimensions({ [dimensionId]: targetAxisId }));
 
         if (numberOfDimensionItems > 0) {
             dispatch(acSetUiActiveModalDialog(dimensionId));

packages/app/src/components/Layout/Chip.js

@@ -9,7 +9,7 @@ import {
     hasTooManyItemsPerAxis,
     getLockedDimensionAxis,
     getDisplayNameByVisType,
-    getAxisDisplayName,
+    getAxisName,
 } from '@dhis2/analytics';
 
 import Menu from './Menu';
@@ -81,29 +81,29 @@ class Chip extends React.Component {
 
     // TODO refactor this very long function
     renderChip = () => {
-        const axisName = this.props.axisName;
+        const axisId = this.props.axisId;
         const visType = this.props.type;
         const numberOfItems = this.props.items.length;
 
         const isLocked = getLockedDimensionAxis(
             visType,
             this.props.dimensionId
-        ).includes(axisName);
+        ).includes(axisId);
 
         const lockedMessage = isLocked
             ? i18n.t(
-                  `{{dimensionName}} is locked to {{axisDisplayName}} for {{visTypeName}}`,
+                  `{{dimensionName}} is locked to {{axisName}} for {{visTypeName}}`,
                   {
                       dimensionName: this.props.dimensionName,
-                      axisDisplayName: getDisplayNameByVisType(visType),
-                      visTypeName: getAxisDisplayName(axisName),
+                      axisName: getDisplayNameByVisType(visType),
+                      visTypeName: getAxisName(axisId),
                   }
               )
             : null;
 
         const maxNumberOfItemsPerAxis = getMaxNumberOfItemsPerAxis(
             visType,
-            axisName
+            axisId
         );
 
         const hasMaxNumberOfItemsRule = !!maxNumberOfItemsPerAxis;
@@ -133,7 +133,7 @@ class Chip extends React.Component {
         };
         const warningIcon = hasTooManyItemsPerAxis(
             visType,
-            axisName,
+            axisId,
             numberOfItems
         ) ? (
             <div style={styles.warningIconWrapper}>
@@ -152,7 +152,7 @@ class Chip extends React.Component {
                 style={wrapperStyle}
                 data-dimensionid={this.props.dimensionId}
                 draggable={!isLocked}
-                onDragStart={this.getDragStartHandler(this.props.axisName)}
+                onDragStart={this.getDragStartHandler(this.props.axisId)}
             >
                 <div
                     id={this.id}
@@ -170,7 +170,7 @@ class Chip extends React.Component {
                     <div style={styles.chipRight}>
                         <Menu
                             dimensionId={this.props.dimensionId}
-                            currentAxisName={this.props.axisName}
+                            currentAxisId={this.props.axisId}
                             visType={this.props.type}
                             numberOfDimensionItems={this.props.items.length}
                         />

packages/app/src/components/Layout/DefaultLayout/DefaultAxis.js

@@ -4,12 +4,12 @@ import i18n from '@dhis2/d2-i18n';
 import MenuItem from '@material-ui/core/MenuItem';
 import Divider from '@material-ui/core/Divider';
 import {
-    AXIS_NAME_COLUMNS,
-    DEFAULT_AXIS_NAMES,
+    AXIS_ID_COLUMNS,
+    DEFAULT_AXIS_IDS,
     DIMENSION_ID_DATA,
     isYearOverYear,
     isDualAxisType,
-    getAxisDisplayName,
+    getAxisName,
 } from '@dhis2/analytics';
 
 import Chip from '../Chip';
@@ -34,7 +34,7 @@ class Axis extends React.Component {
         const { dimensionId, source } = decodeDataTransfer(e);
 
         this.props.onAddDimension({
-            [dimensionId]: this.props.axisName,
+            [dimensionId]: this.props.axisId,
         });
 
         const items = this.props.itemsByDimension[dimensionId];
@@ -48,16 +48,14 @@ class Axis extends React.Component {
     isMoveSupported = () => !isYearOverYear(this.props.type);
 
     getAxisMenuItems = dimensionId =>
-        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>
-            )
-        );
+        DEFAULT_AXIS_IDS.filter(key => key !== this.props.axisId).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;
+    isSeries = () => this.props.axisId === AXIS_ID_COLUMNS;
 
     isData = dimensionId => dimensionId === DIMENSION_ID_DATA;
 
@@ -106,20 +104,18 @@ class Axis extends React.Component {
     render() {
         return (
             <div
-                id={this.props.axisName}
+                id={this.props.axisId}
                 style={{ ...styles.axisContainer, ...this.props.style }}
                 onDragOver={this.onDragOver}
                 onDrop={this.onDrop}
             >
-                <div style={styles.label}>
-                    {getAxisDisplayName(this.props.axisName)}
-                </div>
+                <div style={styles.label}>{getAxisName(this.props.axisId)}</div>
                 <div style={styles.content}>
                     {this.props.axis.map(dimensionId => (
                         <Chip
-                            key={`${this.props.axisName}-${dimensionId}`}
+                            key={`${this.props.axisId}-${dimensionId}`}
                             onClick={this.props.getOpenHandler(dimensionId)}
-                            axisName={this.props.axisName}
+                            axisId={this.props.axisId}
                             dimensionId={dimensionId}
                         />
                     ))}
@@ -145,7 +141,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     const adaptedUi = getAdaptedUiByType(stateProps.ui);
 
     return {
-        axis: adaptedUi.layout[ownProps.axisName],
+        axis: adaptedUi.layout[ownProps.axisId],
         itemsByDimension: adaptedUi.itemsByDimension,
         type: adaptedUi.type,
         ...dispatchProps,

packages/app/src/components/Layout/DefaultLayout/DefaultLayout.js

@@ -11,14 +11,14 @@ const Layout = () => (
             style={{ ...styles.axisGroup, ...styles.axisGroupLeft }}
         >
             <DefaultAxis
-                axisName="columns"
+                axisId="columns"
                 style={{
                     ...styles.columns,
                     ...defaultAxisStyles.axisContainerLeft,
                 }}
             />
             <DefaultAxis
-                axisName="rows"
+                axisId="rows"
                 style={{
                     ...styles.rows,
                     ...defaultAxisStyles.axisContainerLeft,
@@ -29,7 +29,7 @@ const Layout = () => (
             id="axis-group-2"
             style={{ ...styles.axisGroup, ...styles.axisGroupRight }}
         >
-            <DefaultAxis axisName="filters" style={styles.filters} />
+            <DefaultAxis axisId="filters" style={styles.filters} />
         </div>
     </div>
 );

packages/app/src/components/Layout/Menu.js

@@ -42,7 +42,7 @@ class ChipMenu extends React.Component {
                 </IconButton>
                 <DimensionMenu
                     dimensionId={this.props.dimensionId}
-                    currentAxisName={this.props.currentAxisName}
+                    currentAxisId={this.props.currentAxisId}
                     visType={this.props.visType}
                     numberOfDimensionItems={this.props.numberOfDimensionItems}
                     dualAxisItemHandler={this.props.dualAxisItemHandler}
@@ -59,8 +59,8 @@ class ChipMenu extends React.Component {
 const mapDispatchToProps = dispatch => ({
     dualAxisItemHandler: () =>
         dispatch(acSetUiActiveModalDialog(AXIS_SETUP_DIALOG_ID)),
-    axisItemHandler: (dimensionId, targetAxisName, numberOfDimensionItems) => {
-        dispatch(acAddUiLayoutDimensions({ [dimensionId]: targetAxisName }));
+    axisItemHandler: (dimensionId, targetAxisId, numberOfDimensionItems) => {
+        dispatch(acAddUiLayoutDimensions({ [dimensionId]: targetAxisId }));
     },
     removeItemHandler: dimensionId => {
         dispatch(acRemoveUiLayoutDimensions(dimensionId));