@dhis2/analytics 20.7.0 → 21.0.0-alpha.4

package/build/es/components/OrgUnitDimension/OrgUnitDimension.js

@@ -1,220 +1,248 @@
 import _JSXStyle from "styled-jsx/style";
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-import { OrgUnitSelector, userOrgUnits } from '@dhis2/d2-ui-org-unit-dialog';
-import { CircularLoader, colors } from '@dhis2/ui';
-import sortBy from 'lodash/sortBy';
+import { useDataEngine } from '@dhis2/app-runtime';
+import { OrganisationUnitTree, Checkbox, MultiSelect, MultiSelectOption, Button } from '@dhis2/ui';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
-import { apiFetchOrganisationUnitGroups, apiFetchOrganisationUnitLevels, apiFetchOrganisationUnits } from '../../api/organisationUnits';
-import { ouIdHelper } from '../../modules/ouIdHelper';
+import React, { useEffect, useState } from 'react';
+import { apiFetchOrganisationUnitGroups, apiFetchOrganisationUnitLevels } from '../../api/organisationUnits';
+import i18n from '../../locales/index.js';
+import { formatList } from '../../modules/list';
+import { ouIdHelper, USER_ORG_UNIT, USER_ORG_UNIT_CHILDREN, USER_ORG_UNIT_GRANDCHILDREN } from '../../modules/ouIdHelper';
 import { DIMENSION_ID_ORGUNIT } from '../../modules/predefinedDimensions';
 import styles from './styles/OrgUnitDimension.style';
-export const defaultState = {
-  root: undefined,
-  roots: undefined,
-  // use "selected" property for cloning org units while user org unit(s) is (are) selected
-  selected: [],
-  ouLevels: [],
-  ouGroups: [],
-  showOrgUnitsTree: true
-};
-
-class OrgUnitDimension extends Component {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "showOrgUnitsTree", () => {
-      this.setState({
-        showOrgUnitsTree: true
-      });
-    });
-
-    _defineProperty(this, "hideOrgUnitsTree", () => {
-      this.setState({
-        showOrgUnitsTree: false
-      });
-    });
-
-    _defineProperty(this, "getUserOrgUnitsFromIds", ids => {
-      return userOrgUnits.filter(ou => ids.includes(ou.id));
-    });
-
-    _defineProperty(this, "onLevelChange", event => {
-      const levelIds = event.target.value.filter(id => !!id);
-      this.props.onSelect({
-        dimensionId: DIMENSION_ID_ORGUNIT,
-        items: [...this.props.ouItems.filter(ou => !ouIdHelper.hasLevelPrefix(ou.id)), ...levelIds.map(id => {
-          const levelOu = this.state.ouLevels.find(ou => ou.id === id);
-          return { ...levelOu,
-            id: ouIdHelper.addLevelPrefix(levelOu.id)
-          };
-        })]
+const DYNAMIC_ORG_UNITS = [USER_ORG_UNIT, USER_ORG_UNIT_CHILDREN, USER_ORG_UNIT_GRANDCHILDREN];
+
+const OrgUnitDimension = ({
+  roots,
+  selected,
+  onSelect
+}) => {
+  const [ouLevels, setOuLevels] = useState([]);
+  const [ouGroups, setOuGroups] = useState([]);
+  const dataEngine = useDataEngine();
+
+  const onSelectItems = selectedItem => {
+    const {
+      id,
+      checked,
+      displayName,
+      path
+    } = selectedItem;
+    let result = [...selected];
+
+    if (checked && DYNAMIC_ORG_UNITS.includes(id)) {
+      result = [...result.filter(item => DYNAMIC_ORG_UNITS.includes(item.id) || ouIdHelper.hasLevelPrefix(item.id) || ouIdHelper.hasGroupPrefix(item.id)), {
+        id,
+        displayName
+      }];
+    } else if (checked) {
+      result.push({
+        id,
+        path,
+        name: displayName
       });
-    });
-
-    _defineProperty(this, "onGroupChange", event => {
-      const groupIds = event.target.value.filter(id => !!id);
-      this.props.onSelect({
-        dimensionId: DIMENSION_ID_ORGUNIT,
-        items: [...this.props.ouItems.filter(ou => !ouIdHelper.hasGroupPrefix(ou.id)), ...groupIds.map(id => {
-          const groupOu = this.state.ouGroups.find(ou => ou.id === id);
-          return { ...groupOu,
-            id: ouIdHelper.addGroupPrefix(id)
-          };
-        })]
-      });
-    });
+    } else {
+      result = [...result.filter(item => item.id !== id)];
+    }
 
-    _defineProperty(this, "onDeselectAllClick", () => this.props.onDeselect({
+    onSelect({
       dimensionId: DIMENSION_ID_ORGUNIT,
-      itemIdsToRemove: this.props.ouItems.map(ou => ou.id)
-    }));
-
-    _defineProperty(this, "loadOrgUnitTree", (d2, displayNameProperty) => {
-      apiFetchOrganisationUnits(d2, displayNameProperty).then(rootLevel => rootLevel.toArray()).then(roots => {
-        this.setState({
-          roots,
-          root: roots[0]
-        });
-      });
+      items: result
     });
-
-    _defineProperty(this, "loadOrgUnitGroups", (d2, displayNameProperty) => {
-      apiFetchOrganisationUnitGroups(d2, displayNameProperty).then(organisationUnitGroups => this.setState({
-        ouGroups: organisationUnitGroups
-      }));
+  };
+
+  const clearSelection = () => onSelect({
+    dimensionId: DIMENSION_ID_ORGUNIT,
+    items: []
+  });
+
+  useEffect(() => {
+    const doFetchOuLevels = async () => {
+      const result = await apiFetchOrganisationUnitLevels(dataEngine);
+      result.sort((a, b) => a.level > b.level ? 1 : -1);
+      setOuLevels(result);
+    };
+
+    const doFetchOuGroups = async () => {
+      const result = await apiFetchOrganisationUnitGroups(dataEngine);
+      setOuGroups(result);
+    };
+
+    doFetchOuLevels();
+    doFetchOuGroups();
+  }, [dataEngine]);
+
+  const onLevelChange = ids => {
+    const items = ids.map(id => ({
+      id: ouIdHelper.addLevelPrefix(id),
+      name: ouLevels.find(level => level.id === id).displayName
+    }));
+    onSelect({
+      dimensionId: DIMENSION_ID_ORGUNIT,
+      items: [...selected.filter(ou => !ouIdHelper.hasLevelPrefix(ou.id)), ...items]
     });
+  };
 
-    _defineProperty(this, "loadOrgUnitLevels", d2 => {
-      apiFetchOrganisationUnitLevels(d2).then(organisationUnitLevels => this.setState({
-        ouLevels: sortBy(organisationUnitLevels, ['level'])
-      }));
+  const onGroupChange = ids => {
+    const items = ids.map(id => ({
+      id: ouIdHelper.addGroupPrefix(id),
+      name: ouGroups.find(group => group.id === id).displayName
+    }));
+    onSelect({
+      dimensionId: DIMENSION_ID_ORGUNIT,
+      items: [...selected.filter(ou => !ouIdHelper.hasGroupPrefix(ou.id)), ...items]
     });
+  };
+
+  const getSummary = () => {
+    let summary;
+
+    if (selected.length) {
+      const numberOfOrgUnits = selected.filter(item => !DYNAMIC_ORG_UNITS.includes(item.id) && !ouIdHelper.hasLevelPrefix(item.id) && !ouIdHelper.hasGroupPrefix(item.id)).length;
+      const numberOfLevels = selected.filter(item => ouIdHelper.hasLevelPrefix(item.id)).length;
+      const numberOfGroups = selected.filter(item => ouIdHelper.hasGroupPrefix(item.id)).length;
+      const userOrgUnits = selected.filter(item => DYNAMIC_ORG_UNITS.includes(item.id));
+      const parts = [];
+
+      if (numberOfOrgUnits) {
+        parts.push(i18n.t('{{count}} org units', {
+          count: numberOfOrgUnits,
+          defaultValue: '{{count}} org unit',
+          defaultValue_plural: '{{count}} org units'
+        }));
+      }
 
-    _defineProperty(this, "handleOrgUnitClick", (event, orgUnit) => {
-      const selected = this.props.ouItems;
-
-      if (selected.some(ou => ou.path === orgUnit.path)) {
-        this.props.onDeselect({
-          dimensionId: DIMENSION_ID_ORGUNIT,
-          itemIdsToRemove: [orgUnit.id]
-        });
-      } else {
-        this.props.onSelect({
-          dimensionId: DIMENSION_ID_ORGUNIT,
-          items: [...selected, { ...orgUnit,
-            name: orgUnit.name || orgUnit.displayName
-          }]
-        });
+      if (numberOfLevels) {
+        parts.push(i18n.t('{{count}} levels', {
+          count: numberOfLevels,
+          defaultValue: '{{count}} level',
+          defaultValue_plural: '{{count}} levels'
+        }));
       }
-    });
 
-    _defineProperty(this, "handleUserOrgUnitClick", (event, checked) => {
-      if (checked) {
-        if (!this.state.selected.length) {
-          this.setState({
-            selected: this.props.ouItems.slice()
-          });
-        }
-
-        this.props.onSelect({
-          dimensionId: DIMENSION_ID_ORGUNIT,
-          items: [...this.props.ouItems.filter(ou => this.userOrgUnitIds.includes(ou.id)), userOrgUnits.find(ou => ou.id === event.target.name)]
-        });
-      } else {
-        if (this.props.ouItems.length === 1 && this.state.selected.length > 0) {
-          this.props.onSelect({
-            dimensionId: DIMENSION_ID_ORGUNIT,
-            items: this.state.selected
-          });
-        } else {
-          this.props.onDeselect({
-            dimensionId: DIMENSION_ID_ORGUNIT,
-            itemIdsToRemove: [event.target.name]
-          });
-        }
+      if (numberOfGroups) {
+        parts.push(i18n.t('{{count}} groups', {
+          count: numberOfGroups,
+          defaultValue: '{{count}} group',
+          defaultValue_plural: '{{count}} groups'
+        }));
       }
-    });
 
-    _defineProperty(this, "handleMultipleOrgUnitsSelect", orgUnits => {
-      const selected = this.props.ouItems;
-      this.props.onSelect({
-        dimensionId: DIMENSION_ID_ORGUNIT,
-        items: [...selected, ...orgUnits.reduce((obj, ou) => {
-          // avoid duplicates when clicking "Select children" multiple times
-          if (!selected.find(i => i.id === ou.id)) {
-            obj.push({ ...ou,
-              name: ou.name || ou.displayName
-            });
-          }
-
-          return obj;
-        }, [])]
+      userOrgUnits.forEach(orgUnit => {
+        parts.push(orgUnit.name || orgUnit.displayName);
       });
-    });
-
-    _defineProperty(this, "render", () => {
-      const ids = this.props.ouItems.map(ou => ou.id);
-      const selected = this.props.ouItems.filter(ou => !this.userOrgUnitIds.includes(ou.id) && !ouIdHelper.hasLevelPrefix(ou.id) && !ouIdHelper.hasGroupPrefix(ou.id));
-      const userOrgUnits = this.getUserOrgUnitsFromIds(ids);
-      const level = ids.filter(ouIdHelper.hasLevelPrefix).map(ouIdHelper.removePrefix);
-      const group = ids.filter(ouIdHelper.hasGroupPrefix).map(ouIdHelper.removePrefix);
-      return /*#__PURE__*/React.createElement(Fragment, null, this.state.root && this.state.showOrgUnitsTree && /*#__PURE__*/React.createElement(OrgUnitSelector, {
-        d2: this.props.d2,
-        root: this.state.root,
-        roots: this.state.roots,
-        selected: selected,
-        userOrgUnits: userOrgUnits,
-        level: level,
-        group: group,
-        levelOptions: this.state.ouLevels,
-        groupOptions: this.state.ouGroups,
-        onLevelChange: this.onLevelChange,
-        onGroupChange: this.onGroupChange,
-        onDeselectAllClick: this.onDeselectAllClick,
-        handleUserOrgUnitClick: this.handleUserOrgUnitClick,
-        handleOrgUnitClick: this.handleOrgUnitClick,
-        handleMultipleOrgUnitsSelect: this.handleMultipleOrgUnitsSelect,
-        checkboxColor: "secondary",
-        deselectAllTooltipFontColor: colors.grey900,
-        deselectAllTooltipBackgroundColor: colors.grey300,
-        displayNameProperty: this.props.displayNameProperty,
-        isUserDataViewFallback: true
-      }), !this.state.root && /*#__PURE__*/React.createElement("div", {
-        className: "jsx-".concat(styles.__hash) + " " + "loader"
-      }, /*#__PURE__*/React.createElement(CircularLoader, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
-        id: styles.__hash
-      }, styles));
-    });
-
-    this.state = defaultState;
-    this.userOrgUnitIds = userOrgUnits.map(ou => ou.id);
-    this.loadOrgUnitTree(props.d2, props.displayNameProperty);
-    this.loadOrgUnitGroups(props.d2, props.displayNameProperty);
-    this.loadOrgUnitLevels(props.d2);
-  }
-
-  componentDidUpdate(prevProps) {
-    const previousId = prevProps.current ? prevProps.current.id : null;
-    const currentId = this.props.current ? this.props.current.id : null; // remount org units selector component to ensure
-    // only selected org units are expanded
-
-    if (previousId !== currentId) {
-      this.hideOrgUnitsTree();
-      setTimeout(this.showOrgUnitsTree, 0);
+      summary = i18n.t('Selected: {{commaSeparatedListOfOrganisationUnits}}', {
+        keySeparator: '>',
+        nsSeparator: '|',
+        commaSeparatedListOfOrganisationUnits: formatList(parts)
+      });
+    } else {
+      summary = i18n.t('Nothing selected');
     }
-  }
 
-}
+    return summary;
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "userOrgUnitsWrapper"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    label: i18n.t('User organisation unit'),
+    checked: selected.some(item => item.id === USER_ORG_UNIT),
+    onChange: ({
+      checked
+    }) => onSelectItems({
+      id: USER_ORG_UNIT,
+      checked,
+      displayName: i18n.t('User organisation unit')
+    }),
+    dense: true
+  }), /*#__PURE__*/React.createElement(Checkbox, {
+    label: i18n.t('User sub-units'),
+    checked: selected.some(item => item.id === USER_ORG_UNIT_CHILDREN),
+    onChange: ({
+      checked
+    }) => onSelectItems({
+      id: USER_ORG_UNIT_CHILDREN,
+      checked,
+      displayName: i18n.t('User sub-units')
+    }),
+    dense: true
+  }), /*#__PURE__*/React.createElement(Checkbox, {
+    label: i18n.t('User sub-x2-units'),
+    checked: selected.some(item => item.id === USER_ORG_UNIT_GRANDCHILDREN),
+    onChange: ({
+      checked
+    }) => onSelectItems({
+      id: USER_ORG_UNIT_GRANDCHILDREN,
+      checked,
+      displayName: i18n.t('User sub-x2-units')
+    }),
+    dense: true
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + (cx('orgUnitTreeWrapper', {
+      disabled: selected.some(item => DYNAMIC_ORG_UNITS.includes(item.id))
+    }) || "")
+  }, /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+    roots: roots,
+    initiallyExpanded: [...(roots.length === 1 ? ["/".concat(roots[0])] : []), ...selected.filter(item => !DYNAMIC_ORG_UNITS.includes(item.id) && !ouIdHelper.hasLevelPrefix(item.id) && !ouIdHelper.hasGroupPrefix(item.id)).map(item => item.path.substring(0, item.path.lastIndexOf('/'))).filter(path => path)],
+    selected: selected.filter(item => !DYNAMIC_ORG_UNITS.includes(item.id) && !ouIdHelper.hasLevelPrefix(item.id) && !ouIdHelper.hasGroupPrefix(item.id)).map(item => item.path),
+    onChange: onSelectItems,
+    dataTest: 'org-unit-tree'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "selectsWrapper"
+  }, /*#__PURE__*/React.createElement(MultiSelect, {
+    selected: ouLevels.length ? selected.filter(item => ouIdHelper.hasLevelPrefix(item.id)).map(item => ouIdHelper.removePrefix(item.id)) : [],
+    onChange: ({
+      selected
+    }) => onLevelChange(selected),
+    placeholder: i18n.t('Select a level'),
+    loading: !ouLevels.length,
+    dense: true,
+    dataTest: 'org-unit-level-select'
+  }, ouLevels.map(level => /*#__PURE__*/React.createElement(MultiSelectOption, {
+    key: level.id,
+    value: level.id,
+    label: level.displayName,
+    dataTest: "org-unit-level-select-option-".concat(level.id)
+  }))), /*#__PURE__*/React.createElement(MultiSelect, {
+    selected: ouGroups.length ? selected.filter(item => ouIdHelper.hasGroupPrefix(item.id)).map(item => ouIdHelper.removePrefix(item.id)) : [],
+    onChange: ({
+      selected
+    }) => onGroupChange(selected),
+    placeholder: i18n.t('Select a group'),
+    loading: !ouGroups.length,
+    dense: true,
+    dataTest: 'org-unit-group-select'
+  }, ouGroups.map(group => /*#__PURE__*/React.createElement(MultiSelectOption, {
+    key: group.id,
+    value: group.id,
+    label: group.displayName,
+    dataTest: "org-unit-group-select-option-".concat(group.id)
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "summaryWrapper"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "jsx-".concat(styles.__hash) + " " + "summaryText"
+  }, getSummary()), /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "deselectButton"
+  }, /*#__PURE__*/React.createElement(Button, {
+    secondary: true,
+    small: true,
+    onClick: clearSelection,
+    disabled: !selected.length
+  }, i18n.t('Deselect all')))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
 
 OrgUnitDimension.propTypes = {
-  current: PropTypes.object,
-  d2: PropTypes.object,
-  displayNameProperty: PropTypes.string,
-  ouItems: PropTypes.array,
-  onDeselect: PropTypes.func,
+  roots: PropTypes.arrayOf(PropTypes.string),
+  selected: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    path: PropTypes.string
+  })),
   onSelect: PropTypes.func
 };
 export default OrgUnitDimension;

package/build/es/components/OrgUnitDimension/styles/OrgUnitDimension.style.js

@@ -1,3 +1,4 @@
-const _defaultExport = [".loader.jsx-3308394077{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;min-height:100px;}"];
-_defaultExport.__hash = "3308394077";
+import { colors, spacers } from '@dhis2/ui';
+const _defaultExport = [".container.jsx-3879278432{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".orgUnitTreeWrapper.jsx-3879278432{height:382px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:auto;}", ".orgUnitTreeWrapper.jsx-3879278432>*{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".disabled.jsx-3879278432{cursor:not-allowed;opacity:0.5;}", ".disabled.jsx-3879278432>*{pointer-events:none;}", ".userOrgUnitsWrapper.jsx-3879278432{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:".concat(colors.grey200, ";padding:").concat(spacers.dp8, " ").concat(spacers.dp8, " ").concat(spacers.dp8, " ").concat(spacers.dp24, ";margin-bottom:").concat(spacers.dp12, ";}"), ".userOrgUnitsWrapper.jsx-3879278432>*{margin-right:".concat(spacers.dp48, ";}"), ".selectsWrapper.jsx-3879278432{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:".concat(spacers.dp8, ";margin-top:").concat(spacers.dp12, ";}"), ".selectsWrapper.jsx-3879278432>*{width:50%;}", ".summaryWrapper.jsx-3879278432{margin-top:".concat(spacers.dp8, ";}"), ".summaryText.jsx-3879278432{font-size:14px;line-height:18px;color:".concat(colors.grey700, ";}"), ".deselectButton.jsx-3879278432{display:inline-block;margin-left:".concat(spacers.dp8, ";}")];
+_defaultExport.__hash = "3879278432";
 export default _defaultExport;

package/build/es/components/PeriodDimension/FixedPeriodSelect.js

@@ -2,8 +2,8 @@ import _JSXStyle from "styled-jsx/style";
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import propTypes from '@dhis2/prop-types';
 import { SingleSelectField, SingleSelectOption } from '@dhis2/ui';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import i18n from '../../locales/index.js';
 import FixedPeriodFilter from './FixedPeriodFilter.js';
@@ -103,10 +103,10 @@ FixedPeriodSelect.defaultProps = {
   value: ''
 };
 FixedPeriodSelect.propTypes = {
-  onChange: propTypes.func.isRequired,
-  allowedPeriodTypes: propTypes.arrayOf(propTypes.string),
-  className: propTypes.string,
-  dataTest: propTypes.string,
-  value: propTypes.string
+  onChange: PropTypes.func.isRequired,
+  allowedPeriodTypes: PropTypes.arrayOf(PropTypes.string),
+  className: PropTypes.string,
+  dataTest: PropTypes.string,
+  value: PropTypes.string
 };
 export default FixedPeriodSelect;

package/build/es/components/TransferOption.js

@@ -1,7 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
-import propTypes from '@dhis2/prop-types';
 import { Tooltip } from '@dhis2/ui';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './styles/TransferOption.style';
 export const TransferOption = ({
@@ -60,15 +60,15 @@ export const TransferOption = ({
   }, renderContent()) : renderContent());
 };
 TransferOption.propTypes = {
-  label: propTypes.string.isRequired,
-  value: propTypes.string.isRequired,
-  active: propTypes.bool,
-  dataTest: propTypes.string,
-  disabled: propTypes.bool,
-  highlighted: propTypes.bool,
-  icon: propTypes.node,
-  selected: propTypes.bool,
-  tooltipText: propTypes.string,
-  onClick: propTypes.func,
-  onDoubleClick: propTypes.func
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  active: PropTypes.bool,
+  dataTest: PropTypes.string,
+  disabled: PropTypes.bool,
+  highlighted: PropTypes.bool,
+  icon: PropTypes.node,
+  selected: PropTypes.bool,
+  tooltipText: PropTypes.string,
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func
 };

package/build/es/index.js

@@ -17,13 +17,13 @@ export { default as AboutAOUnit } from './components/AboutAOUnit/AboutAOUnit'; /
 
 export { default as Analytics } from './api/analytics/Analytics';
 export { apiFetchDimensions, apiFetchRecommendedIds } from './api/dimensions';
-export { apiFetchOrganisationUnitLevels, apiFetchOrganisationUnitRoots, apiFetchOrganisationUnit } from './api/organisationUnits-dataEngine'; // Modules: axis
+export { apiFetchOrganisationUnitLevels, apiFetchOrganisationUnitRoots, apiFetchOrganisationUnit } from './api/organisationUnits'; // Modules: axis
 
 export { getAxisName, getAxisNameByLayoutType, hasCustomAxes } from './modules/axis'; // Modules: predefined dimensions
 
 export { DIMENSION_ID_DATA, DIMENSION_ID_PERIOD, DIMENSION_ID_ORGUNIT, DIMENSION_ID_ASSIGNED_CATEGORIES, DIMENSION_PROP_NO_ITEMS, filterOutPredefinedDimensions, getPredefinedDimensionProp, getDimensionById, getPredefinedDimensions, getFixedDimensions, getDynamicDimensions } from './modules/predefinedDimensions'; // Modules: ou utils
 
-export { ouIdHelper } from './modules/ouIdHelper';
+export { ouIdHelper, USER_ORG_UNIT, USER_ORG_UNIT_CHILDREN, USER_ORG_UNIT_GRANDCHILDREN } from './modules/ouIdHelper';
 export { convertOuLevelsToUids } from './modules/ouLevelUtils'; // Modules: adapted ui layout
 
 export { getAdaptedUiLayoutByType } from './modules/getAdaptedUiLayoutByType'; // Modules: relativeItems

package/build/es/locales/en/translations.json

@@ -118,6 +118,20 @@
     "Options": "Options",
     "Hide": "Hide",
     "Update": "Update",
+    "{{count}} org units": "{{count}} org unit",
+    "{{count}} org units_plural": "{{count}} org units",
+    "{{count}} levels": "{{count}} level",
+    "{{count}} levels_plural": "{{count}} levels",
+    "{{count}} groups": "{{count}} group",
+    "{{count}} groups_plural": "{{count}} groups",
+    "Selected: {{commaSeparatedListOfOrganisationUnits}}": "Selected: {{commaSeparatedListOfOrganisationUnits}}",
+    "Nothing selected": "Nothing selected",
+    "User organisation unit": "User organisation unit",
+    "User sub-units": "User sub-units",
+    "User sub-x2-units": "User sub-x2-units",
+    "Select a level": "Select a level",
+    "Select a group": "Select a group",
+    "Deselect all": "Deselect all",
     "Period type": "Period type",
     "Year": "Year",
     "Select year": "Select year",

package/build/es/modules/list.js

@@ -0,0 +1,13 @@
+import i18n from '../locales/index.js';
+export const formatList = items => {
+  // Wrap Intl.ListFormat in try/catch as DHIS2 locales are not always ISO 639 compliant
+  try {
+    const formatter = new Intl.ListFormat(i18n.language, {
+      style: 'long',
+      type: 'conjunction'
+    });
+    return formatter.format(items);
+  } catch (error) {
+    return items.join(', ');
+  }
+};

package/build/es/modules/ouIdHelper/index.js

@@ -1,5 +1,8 @@
 const LEVEL_ID_PREFIX = 'LEVEL';
 const GROUP_ID_PREFIX = 'OU_GROUP';
+export const USER_ORG_UNIT = 'USER_ORGUNIT';
+export const USER_ORG_UNIT_CHILDREN = 'USER_ORGUNIT_CHILDREN';
+export const USER_ORG_UNIT_GRANDCHILDREN = 'USER_ORGUNIT_GRANDCHILDREN';
 
 const hasGroupPrefix = id => id.substr(0, GROUP_ID_PREFIX.length) === GROUP_ID_PREFIX;
 

package/build/es/modules/relativeItems/index.js

@@ -1,4 +1,4 @@
 import { getRelativePeriodIds } from '../../components/PeriodDimension/utils/relativePeriods';
-import { ouIdHelper } from '../ouIdHelper';
+import { ouIdHelper, USER_ORG_UNIT, USER_ORG_UNIT_CHILDREN, USER_ORG_UNIT_GRANDCHILDREN } from '../ouIdHelper';
 import { DIMENSION_ID_ASSIGNED_CATEGORIES, DIMENSION_ID_ORGUNIT, DIMENSION_ID_PERIOD } from '../predefinedDimensions';
-export const hasRelativeItems = (dimension, itemIds = []) => dimension === DIMENSION_ID_ASSIGNED_CATEGORIES || dimension === DIMENSION_ID_ORGUNIT && Array.isArray(itemIds) && itemIds.some(id => ouIdHelper.hasLevelPrefix(id) || ouIdHelper.hasGroupPrefix(id) || ['USER_ORGUNIT', 'USER_ORGUNIT_CHILDREN', 'USER_ORGUNIT_GRAND_CHILDREN'].includes(id)) || dimension === DIMENSION_ID_PERIOD && Array.isArray(itemIds) && itemIds.some(id => getRelativePeriodIds().includes(id));
+export const hasRelativeItems = (dimension, itemIds = []) => dimension === DIMENSION_ID_ASSIGNED_CATEGORIES || dimension === DIMENSION_ID_ORGUNIT && Array.isArray(itemIds) && itemIds.some(id => ouIdHelper.hasLevelPrefix(id) || ouIdHelper.hasGroupPrefix(id) || [USER_ORG_UNIT, USER_ORG_UNIT_CHILDREN, USER_ORG_UNIT_GRANDCHILDREN].includes(id)) || dimension === DIMENSION_ID_PERIOD && Array.isArray(itemIds) && itemIds.some(id => getRelativePeriodIds().includes(id));

package/build/es/visualizations/util/__tests__/getFilterText.spec.js

@@ -128,7 +128,7 @@ describe('getFilterText', () => {
         name: '02 of 2018',
         uid: '_201802_'
       };
-      expect(getFilterText(filters, metaData)).toEqual('Clinics, Hospital - Last 2 months');
+      expect(getFilterText(filters, metaData)).toEqual('Clinics, Hospital - 01 of 2018, 02 of 2018');
     });
   });
 });

package/build/es/visualizations/util/getFilterText.js

@@ -2,7 +2,7 @@ import { getOuLevelAndGroupText } from '../../modules/getOuLevelAndGroupText';
 import { dimensionGetItems } from '../../modules/layout/dimensionGetItems';
 import { dimensionIs } from '../../modules/layout/dimensionIs';
 import { ouIdHelper } from '../../modules/ouIdHelper';
-import { DIMENSION_ID_ORGUNIT, DIMENSION_ID_PERIOD } from '../../modules/predefinedDimensions';
+import { DIMENSION_ID_ORGUNIT } from '../../modules/predefinedDimensions';
 export default function (filters, metaData) {
   if (!Array.isArray(filters) || !filters.length) {
     return '';
@@ -19,15 +19,7 @@ export default function (filters, metaData) {
     }) => ouIdHelper.hasGroupPrefix(id) || ouIdHelper.hasLevelPrefix(id))) {
       titleFragments.push(getOuLevelAndGroupText(filter, metaData));
     } else {
-      let filterItems = [];
-
-      if (dimensionIs(filter, DIMENSION_ID_PERIOD)) {
-        filterItems = items.map(({
-          id
-        }) => id);
-      } else {
-        filterItems = metaData.dimensions[filter.dimension];
-      }
+      const filterItems = metaData.dimensions[filter.dimension];
 
       if (Array.isArray(filterItems)) {
         l = filterItems.length;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "20.7.0",
+    "version": "21.0.0-alpha.4",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
@@ -35,7 +35,7 @@
         "@dhis2/cli-app-scripts": "^6.2.0",
         "@dhis2/cli-style": "^9.0.1",
         "@dhis2/d2-i18n": "^1.1.0",
-        "@dhis2/ui": "^6.23.5",
+        "@dhis2/ui": "^7.7.2",
         "@sambego/storybook-state": "^2.0.1",
         "@storybook/addons": "^6.1.14",
         "@storybook/preset-create-react-app": "^3.1.7",
@@ -44,6 +44,7 @@
         "enzyme-adapter-react-16": "^1.15.6",
         "fs-extra": "^10.0.0",
         "jest-enzyme": "^7.0.2",
+        "prop-types": "^15",
         "styled-jsx": "3.3.2",
         "typeface-roboto": "^0.0.75"
     },