@dhis2/analytics 21.0.0-alpha.1 → 21.0.0

package/build/es/components/AboutAOUnit/AboutAOUnit.js

@@ -0,0 +1,203 @@
+import _JSXStyle from "styled-jsx/style";
+import { useDataQuery, useDataMutation } from '@dhis2/app-runtime';
+import i18n from '@dhis2/d2-i18n';
+import { Button, CircularLoader, IconChevronDown24, IconChevronUp24, IconClock16, IconShare16, IconSubscribe24, IconSubscribeOff24, IconUser16, IconView16, colors } from '@dhis2/ui';
+import cx from 'classnames';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React, { useEffect, useMemo, useState } from 'react';
+import styles from './styles/AboutAOUnit.style';
+const READ_ONLY = 'r';
+const READ_AND_WRITE = 'rw';
+
+const getQueries = type => ({
+  ao: {
+    resource: type,
+    id: ({
+      id
+    }) => id,
+    params: {
+      fields: 'id,displayDescription,created,createdBy[displayName],lastUpdated,subscribed,publicAccess,userAccesses[displayName,access],userGroupAccesses[displayName,access]'
+    }
+  },
+  dataStatistics: {
+    resource: 'dataStatistics/favorites',
+    id: ({
+      id
+    }) => id
+  }
+});
+
+const getSubscribeMutation = (type, id) => ({
+  resource: "".concat(type, "/").concat(id, "/subscriber"),
+  type: 'create'
+});
+
+const getUnsubscribeMutation = (type, id) => ({
+  resource: "".concat(type, "/").concat(id, "/subscriber"),
+  type: 'delete'
+});
+
+const AboutAOUnit = ({
+  type,
+  id
+}) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const queries = useMemo(() => getQueries(type), []);
+  const {
+    data,
+    loading: dataIsLoading,
+    refetch
+  } = useDataQuery(queries, {
+    lazy: true
+  });
+  const subscribeMutation = useMemo(() => getSubscribeMutation(type, id), []);
+  const unsubscribeMutation = useMemo(() => getUnsubscribeMutation(type, id), []);
+  const [subscribe, {
+    loading: subscribeIsLoading
+  }] = useDataMutation(subscribeMutation, {
+    onComplete: res => {
+      if (res.status === 'OK') {
+        refetch({
+          id
+        });
+      }
+    }
+  });
+  const [unsubscribe, {
+    loading: unsubscribeIsLoading
+  }] = useDataMutation(unsubscribeMutation, {
+    onComplete: res => {
+      if (res.status === 'OK') {
+        refetch({
+          id
+        });
+      }
+    }
+  });
+  useEffect(() => {
+    if (id) {
+      refetch({
+        id
+      });
+    }
+  }, [type, id]);
+
+  const getAccessLevelString = access => {
+    const re = new RegExp("(?<accessLevel>".concat(READ_AND_WRITE, "?)"));
+    const accessMatch = re.exec(access);
+
+    switch (accessMatch.groups.accessLevel) {
+      case READ_ONLY:
+        return i18n.t('view only');
+
+      case READ_AND_WRITE:
+        return i18n.t('view and edit');
+    }
+  };
+
+  const getSharingSummary = ao => {
+    const sharingText = [];
+    const re = new RegExp("^".concat(READ_AND_WRITE, "?"));
+
+    if (re.test(ao.publicAccess)) {
+      sharingText.push(i18n.t('all users ({{accessLevel}})', {
+        accessLevel: getAccessLevelString(ao.publicAccess)
+      }));
+    }
+
+    const userAccesses = ao.userAccesses;
+    const groupAccesses = ao.userGroupAccesses;
+    userAccesses.concat(groupAccesses).forEach(accessRule => {
+      sharingText.push(i18n.t('{{userOrGroup}} ({{accessLevel}})', {
+        userOrGroup: accessRule.displayName,
+        accessLevel: getAccessLevelString(accessRule.access)
+      }));
+    });
+    return sharingText.length ? i18n.t('Shared with {{commaSeparatedListOfUsersAndGroups}}', {
+      commaSeparatedListOfUsersAndGroups: sharingText.join(', ')
+    }) : i18n.t('Not shared with any users or groups');
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + (cx('container', {
+      expanded: isExpanded
+    }) || "")
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: () => setIsExpanded(!isExpanded),
+    className: "jsx-".concat(styles.__hash) + " " + "header"
+  }, i18n.t('About this visualization'), isExpanded ? /*#__PURE__*/React.createElement(IconChevronUp24, {
+    color: colors.grey700
+  }) : /*#__PURE__*/React.createElement(IconChevronDown24, {
+    color: colors.grey700
+  })), isExpanded && /*#__PURE__*/React.createElement(React.Fragment, null, dataIsLoading && /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "loader"
+  }, /*#__PURE__*/React.createElement(CircularLoader, {
+    small: true
+  })), data && /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "content"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "jsx-".concat(styles.__hash) + " " + (cx('detailLine', {
+      noDescription: !data.ao.displayDescription
+    }) || "")
+  }, data.ao.displayDescription ? data.ao.displayDescription : i18n.t('No description')), /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash)
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "jsx-".concat(styles.__hash) + " " + "detailLine"
+  }, /*#__PURE__*/React.createElement(IconShare16, {
+    color: colors.grey700
+  }), getSharingSummary(data.ao)), /*#__PURE__*/React.createElement("p", {
+    className: "jsx-".concat(styles.__hash) + " " + "detailLine"
+  }, /*#__PURE__*/React.createElement(IconClock16, {
+    color: colors.grey700
+  }), i18n.t('Last updated {{time}}', {
+    time: moment(data.ao.lastUpdated).fromNow()
+  })), /*#__PURE__*/React.createElement("p", {
+    className: "jsx-".concat(styles.__hash) + " " + "detailLine"
+  }, /*#__PURE__*/React.createElement(IconUser16, {
+    color: colors.grey700
+  }), i18n.t('Created {{time}} by {{author}}', {
+    time: moment(data.ao.created).fromNow(),
+    author: data.ao.createdBy.displayName
+  })), /*#__PURE__*/React.createElement("p", {
+    className: "jsx-".concat(styles.__hash) + " " + "detailLine"
+  }, /*#__PURE__*/React.createElement(IconView16, {
+    color: colors.grey700
+  }), i18n.t('Viewed {{count}} times', {
+    count: data.dataStatistics.views,
+    defaultValue: 'Viewed 1 time',
+    defaultValue_plural: 'Viewed {{count}} times'
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "subsection"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "jsx-".concat(styles.__hash) + " " + "subsectionTitle"
+  }, i18n.t('Notifications')), data.ao.subscribed ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
+    className: "jsx-".concat(styles.__hash) + " " + "subscriptionLabel"
+  }, i18n.t("You're subscribed and getting updates about new interpretations.")), /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(IconSubscribeOff24, {
+      color: colors.grey700
+    }),
+    secondary: true,
+    small: true,
+    disabled: unsubscribeIsLoading,
+    onClick: unsubscribe
+  }, i18n.t('Unsubscribe'))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
+    className: "jsx-".concat(styles.__hash) + " " + "subscriptionLabel"
+  }, i18n.t('Subscribe to get updates about new interpretations.')), /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(IconSubscribe24, {
+      color: colors.grey700
+    }),
+    secondary: true,
+    small: true,
+    disabled: subscribeIsLoading,
+    onClick: subscribe
+  }, i18n.t('Subscribe')))))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles));
+};
+
+AboutAOUnit.propTypes = {
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired
+};
+export default AboutAOUnit;

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

@@ -0,0 +1,4 @@
+import { colors, spacers } from '@dhis2/ui';
+const _defaultExport = [".container.jsx-633421833{padding:".concat(spacers.dp16, ";border-bottom:1px solid ").concat(colors.grey400, ";background-color:").concat(colors.white, ";}"), ".expanded.jsx-633421833{padding-bottom:".concat(spacers.dp32, ";}"), ".loader.jsx-633421833{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".header.jsx-633421833{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;font-size:".concat(spacers.dp16, ";font-weight:500;line-height:21px;color:").concat(colors.grey900, ";}"), ".content.jsx-633421833{font-size:14px;line-height:18px;color:".concat(colors.grey900, ";}"), ".detailLine.jsx-633421833{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0;padding:".concat(spacers.dp12, " 0 0 0;gap:").concat(spacers.dp8, ";}"), ".detailLine.jsx-633421833 svg.jsx-633421833{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".noDescription.jsx-633421833{color:".concat(colors.grey600, ";}"), ".subsection.jsx-633421833{margin-top:".concat(spacers.dp24, ";}"), ".subsectionTitle.jsx-633421833{color:".concat(colors.grey700, ";font-weight:500;}"), ".subscriptionLabel.jsx-633421833{margin:".concat(spacers.dp12, " 0 ").concat(spacers.dp8, " 0;}"), ".subsection.jsx-633421833 button.jsx-633421833{margin-top:".concat(spacers.dp8, ";}")];
+_defaultExport.__hash = "633421833";
+export default _defaultExport;

package/build/es/components/DataDimension/DataTypesSelector.js

@@ -14,7 +14,7 @@ const DataTypes = ({
   var _dataTypes$currentDat;
 
   return /*#__PURE__*/React.createElement("div", {
-    className: `jsx-${styles.__hash}` + " " + "container"
+    className: "jsx-".concat(styles.__hash) + " " + "container"
   }, /*#__PURE__*/React.createElement(SingleSelectField, {
     label: i18n.t('Data Type'),
     dataTest: dataTest,
@@ -25,12 +25,12 @@ const DataTypes = ({
     value: ALL_ID,
     key: ALL_ID,
     label: i18n.t('All types'),
-    dataTest: `${dataTest}-option-all`
+    dataTest: "".concat(dataTest, "-option-all")
   }), Object.values(dataTypes).map(type => /*#__PURE__*/React.createElement(SingleSelectOption, {
     value: type.id,
     key: type.id,
     label: type.getName(),
-    dataTest: `${dataTest}-option-${type.id}`
+    dataTest: "".concat(dataTest, "-option-").concat(type.id)
   }))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));

package/build/es/components/DataDimension/DetailSelector.js

@@ -18,7 +18,7 @@ export const DetailSelector = ({
 }) => {
   const options = getOptions();
   return /*#__PURE__*/React.createElement("div", {
-    className: `jsx-${styles.__hash}` + " " + "detail-container"
+    className: "jsx-".concat(styles.__hash) + " " + "detail-container"
   }, /*#__PURE__*/React.createElement(SingleSelectField, {
     dataTest: dataTest,
     label: i18n.t('Disaggregation'),
@@ -29,7 +29,7 @@ export const DetailSelector = ({
     value: option[0],
     key: option[0],
     label: option[1],
-    dataTest: `${dataTest}-option-${option[0]}`
+    dataTest: "".concat(dataTest, "-option-").concat(option[0])
   }))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));

package/build/es/components/DataDimension/GroupSelector.js

@@ -38,14 +38,14 @@ const GroupsSelector = ({
     fetchGroups();
   }, [dataType]);
   return /*#__PURE__*/React.createElement("div", {
-    className: `jsx-${styles.__hash}` + " " + "container"
+    className: "jsx-".concat(styles.__hash) + " " + "container"
   }, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles), /*#__PURE__*/React.createElement("div", {
-    className: `jsx-${styles.__hash}` + " " + "group-container"
+    className: "jsx-".concat(styles.__hash) + " " + "group-container"
   }, /*#__PURE__*/React.createElement(SingleSelectField, {
     label: (_dataTypes$dataType3 = dataTypes[dataType]) === null || _dataTypes$dataType3 === void 0 ? void 0 : _dataTypes$dataType3.getGroupLabel(),
-    dataTest: `${dataTest}-groups-select-field`,
+    dataTest: "".concat(dataTest, "-groups-select-field"),
     selected: currentGroup || defaultGroup.id,
     placeholder: !currentGroup && (_dataTypes$dataType4 = dataTypes[dataType]) !== null && _dataTypes$dataType4 !== void 0 && _dataTypes$dataType4.getPlaceholder ? dataTypes[dataType].getPlaceholder() : null,
     onChange: ref => onGroupChange(ref.selected),
@@ -57,20 +57,20 @@ const GroupsSelector = ({
     value: defaultGroup.id,
     key: defaultGroup.id,
     label: defaultGroup.getName(),
-    dataTest: `${dataTest}-groups-select-field-option-${defaultGroup.id}`
+    dataTest: "".concat(dataTest, "-groups-select-field-option-").concat(defaultGroup.id)
   }) : null, !isLoading ? groups.map(item => /*#__PURE__*/React.createElement(SingleSelectOption, {
     value: item.id,
     key: item.id,
     label: item.name,
-    dataTest: `${dataTest}-groups-select-field-option-${item.id}`
+    dataTest: "".concat(dataTest, "-groups-select-field-option-").concat(item.id)
   })) : null)), subGroupType === SUB_GROUP_DETAIL && /*#__PURE__*/React.createElement(DetailSelector, {
     currentValue: currentSubGroup,
     onChange: onSubGroupChange,
-    dataTest: `${dataTest}-sub-group-select-field`
+    dataTest: "".concat(dataTest, "-sub-group-select-field")
   }), subGroupType === SUB_GROUP_METRIC && /*#__PURE__*/React.createElement(MetricSelector, {
     currentValue: currentSubGroup,
     onChange: onSubGroupChange,
-    dataTest: `${dataTest}-sub-group-select-field`
+    dataTest: "".concat(dataTest, "-sub-group-select-field")
   }));
 };
 

package/build/es/components/DataDimension/ItemSelector.js

@@ -31,21 +31,21 @@ const LeftHeader = ({
   displayNameProp,
   dataTest
 }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-  className: `jsx-${styles.__hash}` + " " + "leftHeader"
+  className: "jsx-".concat(styles.__hash) + " " + "leftHeader"
 }, /*#__PURE__*/React.createElement(InputField, {
   value: searchTerm,
   onChange: ({
     value
   }) => setSearchTerm(value),
   placeholder: i18n.t('Search by data item name'),
-  dataTest: `${dataTest}-filter-input-field`,
+  dataTest: "".concat(dataTest, "-filter-input-field"),
   dense: true,
   initialFocus: true,
   type: 'search'
 }), /*#__PURE__*/React.createElement(DataTypeSelector, {
   currentDataType: dataType,
   onChange: setDataType,
-  dataTest: `${dataTest}-data-types-select-field`
+  dataTest: "".concat(dataTest, "-data-types-select-field")
 }), dataTypes[dataType] && /*#__PURE__*/React.createElement(GroupSelector, {
   dataType: dataType,
   displayNameProp: displayNameProp,
@@ -72,7 +72,7 @@ LeftHeader.propTypes = {
 };
 
 const EmptySelection = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-  className: `jsx-${styles.__hash}` + " " + "emptyList"
+  className: "jsx-".concat(styles.__hash) + " " + "emptyList"
 }, i18n.t('No items selected')), /*#__PURE__*/React.createElement(_JSXStyle, {
   id: styles.__hash
 }, styles));
@@ -80,13 +80,13 @@ const EmptySelection = () => /*#__PURE__*/React.createElement(React.Fragment, nu
 const RightHeader = ({
   infoText
 }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-  className: `jsx-${styles.__hash}` + " " + "rightHeader"
+  className: "jsx-".concat(styles.__hash) + " " + "rightHeader"
 }, i18n.t('Selected Items')), infoText && /*#__PURE__*/React.createElement("div", {
-  className: `jsx-${styles.__hash}` + " " + "info-container"
+  className: "jsx-".concat(styles.__hash) + " " + "info-container"
 }, /*#__PURE__*/React.createElement("div", {
-  className: `jsx-${styles.__hash}`
+  className: "jsx-".concat(styles.__hash)
 }, /*#__PURE__*/React.createElement(IconInfo16, null)), /*#__PURE__*/React.createElement("span", {
-  className: `jsx-${styles.__hash}` + " " + "info-text"
+  className: "jsx-".concat(styles.__hash) + " " + "info-text"
 }, infoText)), /*#__PURE__*/React.createElement(_JSXStyle, {
   id: styles.__hash
 }, styles));
@@ -177,7 +177,7 @@ const SourceEmptyPlaceholder = ({
 
   return message && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
     "data-test": dataTest,
-    className: `jsx-${styles.__hash}` + " " + "emptyList"
+    className: "jsx-".concat(styles.__hash) + " " + "emptyList"
   }, message), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));
@@ -241,16 +241,16 @@ const ItemSelector = ({
         if (state.filter.subGroup && state.filter.subGroup !== ALL_ID) {
           const metric = DATA_SETS_CONSTANTS.find(item => item.id === state.filter.subGroup);
           newOptions.push({
-            label: `${item.name} - ${metric.getName()}`,
-            value: `${item.id}.${metric.id}`,
+            label: "".concat(item.name, " - ").concat(metric.getName()),
+            value: "".concat(item.id, ".").concat(metric.id),
             disabled: item.disabled,
             type: item.dimensionItemType
           });
         } else {
           DATA_SETS_CONSTANTS.forEach(metric => {
             newOptions.push({
-              label: `${item.name} - ${metric.getName()}`,
-              value: `${item.id}.${metric.id}`,
+              label: "".concat(item.name, " - ").concat(metric.getName()),
+              value: "".concat(item.id, ".").concat(metric.id),
               disabled: item.disabled,
               type: item.dimensionItemType
             });
@@ -379,7 +379,7 @@ const ItemSelector = ({
       options: state.options,
       noItemsMessage: noItemsMessage,
       dataType: state.filter.dataType,
-      dataTest: `${dataTest}-empty-source`
+      dataTest: "".concat(dataTest, "-empty-source")
     }),
     onEndReached: onEndReached,
     leftHeader: /*#__PURE__*/React.createElement(LeftHeader, {
@@ -406,7 +406,7 @@ const ItemSelector = ({
       searchTerm: state.searchTerm,
       setSearchTerm: setSearchTerm,
       displayNameProp: displayNameProp,
-      dataTest: `${dataTest}-left-header`
+      dataTest: "".concat(dataTest, "-left-header")
     }),
     enableOrderChange: true,
     height: TRANSFER_HEIGHT,
@@ -427,9 +427,9 @@ const ItemSelector = ({
       tooltipText: state.filter.dataType === ALL_ID ? getTooltipText(getItemType(props.value
       /* eslint-disable-line react/prop-types */
       )) : undefined,
-      dataTest: `${dataTest}-transfer-option`
+      dataTest: "".concat(dataTest, "-transfer-option")
     })),
-    dataTest: `${dataTest}-transfer`
+    dataTest: "".concat(dataTest, "-transfer")
   });
 };
 

package/build/es/components/DataDimension/MetricSelector.js

@@ -12,7 +12,7 @@ export const MetricSelector = ({
   dataTest
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: `jsx-${styles.__hash}` + " " + "metric-container"
+    className: "jsx-".concat(styles.__hash) + " " + "metric-container"
   }, /*#__PURE__*/React.createElement(SingleSelectField, {
     label: i18n.t('Metric type'),
     selected: currentValue || ALL_ID,
@@ -23,12 +23,12 @@ export const MetricSelector = ({
     value: ALL_ID,
     key: ALL_ID,
     label: i18n.t('All metrics'),
-    dataTest: `${dataTest}-option-${ALL_ID}`
+    dataTest: "".concat(dataTest, "-option-").concat(ALL_ID)
   }), DATA_SETS_CONSTANTS.map(option => /*#__PURE__*/React.createElement(SingleSelectOption, {
     value: option.id,
     key: option.id,
     label: option.getName(),
-    dataTest: `${dataTest}-option-${option.id}`
+    dataTest: "".concat(dataTest, "-option-").concat(option.id)
   }))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));

package/build/es/components/DataDimension/styles/DataTypesSelector.style.js

@@ -1,4 +1,4 @@
 import { spacers } from '@dhis2/ui';
-const _defaultExport = [`.container.jsx-3368926978{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;border-bottom:0;padding:${spacers.dp12} 0 0;}`];
+const _defaultExport = [".container.jsx-3368926978{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;border-bottom:0;padding:".concat(spacers.dp12, " 0 0;}")];
 _defaultExport.__hash = "3368926978";
 export default _defaultExport;

package/build/es/components/DataDimension/styles/DetailSelector.style.js

@@ -1,4 +1,4 @@
 import { spacers } from '@dhis2/ui';
-const _defaultExport = [`.detail-container.jsx-2733301753{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;padding-left:${spacers.dp4};width:40%;}`];
+const _defaultExport = [".detail-container.jsx-2733301753{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;padding-left:".concat(spacers.dp4, ";width:40%;}")];
 _defaultExport.__hash = "2733301753";
 export default _defaultExport;

package/build/es/components/DataDimension/styles/GroupSelector.style.js

@@ -1,4 +1,4 @@
 import { spacers } from '@dhis2/ui';
-const _defaultExport = [`.container.jsx-2205421678{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:53px;padding-left:${spacers.dp16};margin-top:${spacers.dp12};}`, ".group-container.jsx-2205421678{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}"];
+const _defaultExport = [".container.jsx-2205421678{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:53px;padding-left:".concat(spacers.dp16, ";margin-top:").concat(spacers.dp12, ";}"), ".group-container.jsx-2205421678{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}"];
 _defaultExport.__hash = "2205421678";
 export default _defaultExport;

package/build/es/components/DataDimension/styles/MetricSelector.style.js

@@ -1,4 +1,4 @@
 import { spacers } from '@dhis2/ui';
-const _defaultExport = [`.metric-container.jsx-3752467532{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;padding-left:${spacers.dp4};width:50%;}`];
+const _defaultExport = [".metric-container.jsx-3752467532{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;padding-left:".concat(spacers.dp4, ";width:50%;}")];
 _defaultExport.__hash = "3752467532";
 export default _defaultExport;

package/build/es/components/DimensionMenu.js

@@ -49,7 +49,7 @@ const DimensionMenu = ({
     key: "remove-menu-item",
     onClick: onClick,
     label: i18n.t('Remove'),
-    dataTest: `${dataTest}-item-remove-${dimensionId}`
+    dataTest: "".concat(dataTest, "-item-remove-").concat(dimensionId)
   }); // Assigned categories
 
 
@@ -58,8 +58,8 @@ const DimensionMenu = ({
       if (!isAssignedCategoriesInLayout) {
         menuItems.push( /*#__PURE__*/React.createElement(MenuItem, {
           label: assignedCategoriesItemLabel,
-          key: `assigned-categories-item-${dimensionId}`,
-          dataTest: `${dataTest}-item-co-menu`
+          key: "assigned-categories-item-".concat(dimensionId),
+          dataTest: "".concat(dataTest, "-item-co-menu")
         }, assignedCategoriesAvailableDestinations.map(destination => /*#__PURE__*/React.createElement(MenuItem, {
           key: destination,
           onClick: () => {
@@ -67,22 +67,22 @@ const DimensionMenu = ({
             onClose();
           },
           label: getAxisItemLabel(getAxisNameByLayoutType(destination, getLayoutTypeByVisType(visType))),
-          dataTest: `${dataTest}-item-action-co-to-${destination}`
+          dataTest: "".concat(dataTest, "-item-action-co-to-").concat(destination)
         }))));
       } else {
         menuItems.push( /*#__PURE__*/React.createElement(MenuItem, {
-          key: `assigned-categories-item-${dimensionId}`,
+          key: "assigned-categories-item-".concat(dimensionId),
           onClick: () => {
             assignedCategoriesItemHandler();
             onClose();
           },
           label: assignedCategoriesItemLabel,
-          dataTest: `${dataTest}-item-remove-co`
+          dataTest: "".concat(dataTest, "-item-remove-co")
         }));
       }
     } else {
       menuItems.push( /*#__PURE__*/React.createElement(Tooltip, {
-        key: `assigned-categories-item-${dimensionId}`,
+        key: "assigned-categories-item-".concat(dimensionId),
         content: getUnavailableLabel(visType),
         "aria-label": "disabled",
         classes: classes
@@ -90,7 +90,7 @@ const DimensionMenu = ({
         disabled: true,
         dense: true,
         label: assignedCategoriesItemLabel,
-        dataTest: `${dataTest}-item-co-menu`
+        dataTest: "".concat(dataTest, "-item-co-menu")
       })));
     }
   } // divider
@@ -98,7 +98,7 @@ const DimensionMenu = ({
 
   menuItems.length && menuItems.push(getDividerItem('assigned-categories-divider'));
   menuItems.push(...applicableAxisIds.map(axisId => /*#__PURE__*/React.createElement(MenuItem, {
-    key: `${dimensionId}-to-${axisId}`,
+    key: "".concat(dimensionId, "-to-").concat(axisId),
     onClick: () => {
       axisItemHandler({
         dimensionId,
@@ -110,7 +110,7 @@ const DimensionMenu = ({
       onClose();
     },
     label: getAxisItemLabel(getAxisNameByLayoutType(axisId, getLayoutTypeByVisType(visType)), isDimensionInLayout),
-    dataTest: `${dataTest}-item-action-${dimensionId}-to-${axisId}`
+    dataTest: "".concat(dataTest, "-item-action-").concat(dimensionId, "-to-").concat(axisId)
   }))); // remove item
 
   if (isDimensionInLayout) {

package/build/es/components/DimensionsPanel/List/DimensionItem.js

@@ -88,20 +88,20 @@ class DimensionItem extends Component {
       id: id,
       isDeactivated: isDeactivated,
       onClick: onClick,
-      dataTest: `${dataTest}-button-${id}`
+      dataTest: "".concat(dataTest, "-button-").concat(id)
     }, /*#__PURE__*/React.createElement("div", {
       style: styles.iconWrapper
     }, Icon), /*#__PURE__*/React.createElement("div", {
       style: styles.labelWrapper
     }, Label, /*#__PURE__*/React.createElement(RecommendedIcon, {
       isRecommended: isRecommended,
-      dataTest: `${dataTest}-recommended-icon`
+      dataTest: "".concat(dataTest, "-recommended-icon")
     })), isLocked && /*#__PURE__*/React.createElement("div", {
       style: styles.iconWrapper
     }, /*#__PURE__*/React.createElement(IconLock16, null))), onOptionsClick ? /*#__PURE__*/React.createElement("div", {
       style: styles.optionsWrapper,
       ref: optionsRef,
-      "data-test": `${dataTest}-menu-${id}`
+      "data-test": "".concat(dataTest, "-menu-").concat(id)
     }, this.state.mouseOver && !isDeactivated && !isLocked ? /*#__PURE__*/React.createElement(OptionsButton, {
       style: styles.optionsButton,
       onClick: this.onOptionsClick(id, optionsRef)

package/build/es/components/DimensionsPanel/List/DimensionList.js

@@ -41,21 +41,21 @@ class DimensionList extends Component {
     const fixedDimensions = this.getDimensionItemsByFilter(dimension => Object.values(getFixedDimensions()).some(fixedDim => fixedDim.id === dimension.id));
     const nonPredefinedDimensions = this.getDimensionItemsByFilter(dimension => !Object.values(getPredefinedDimensions()).some(predefDim => predefDim.id === dimension.id));
     return /*#__PURE__*/React.createElement("div", {
-      className: `jsx-${styles.__hash}` + " " + "container"
+      className: "jsx-".concat(styles.__hash) + " " + "container"
     }, /*#__PURE__*/React.createElement("div", {
-      className: `jsx-${styles.__hash}` + " " + "wrapper"
+      className: "jsx-".concat(styles.__hash) + " " + "wrapper"
     }, fixedDimensions !== null && fixedDimensions !== void 0 && fixedDimensions.length ? /*#__PURE__*/React.createElement("div", {
-      className: `jsx-${styles.__hash}` + " " + "section"
+      className: "jsx-".concat(styles.__hash) + " " + "section"
     }, /*#__PURE__*/React.createElement("h3", {
-      className: `jsx-${styles.__hash}` + " " + "header"
+      className: "jsx-".concat(styles.__hash) + " " + "header"
     }, i18n.t('Main dimensions')), /*#__PURE__*/React.createElement("ul", {
-      className: `jsx-${styles.__hash}` + " " + "list"
+      className: "jsx-".concat(styles.__hash) + " " + "list"
     }, fixedDimensions)) : null, nonPredefinedDimensions !== null && nonPredefinedDimensions !== void 0 && nonPredefinedDimensions.length ? /*#__PURE__*/React.createElement("div", {
-      className: `jsx-${styles.__hash}` + " " + "section"
+      className: "jsx-".concat(styles.__hash) + " " + "section"
     }, /*#__PURE__*/React.createElement("h3", {
-      className: `jsx-${styles.__hash}` + " " + "header"
+      className: "jsx-".concat(styles.__hash) + " " + "header"
     }, i18n.t('Your dimensions')), /*#__PURE__*/React.createElement("ul", {
-      className: `jsx-${styles.__hash}` + " " + "list"
+      className: "jsx-".concat(styles.__hash) + " " + "list"
     }, nonPredefinedDimensions)) : null), /*#__PURE__*/React.createElement(_JSXStyle, {
       id: styles.__hash
     }, styles));

package/build/es/components/DimensionsPanel/List/styles/DimensionList.style.js

@@ -1,5 +1,5 @@
 import { colors, spacers } from '@dhis2/ui';
-const _defaultExport = [".container.jsx-2067921157{position:relative;-webkit-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%;min-height:30vh;}", ".wrapper.jsx-2067921157{position:absolute;width:100%;height:100%;overflow:auto;margin-top:0;padding:0;}", ".list.jsx-2067921157{margin:0;padding:0;}", `.header.jsx-2067921157{text-transform:uppercase;font-size:11px;color:${colors.grey700};margin:5px 0;-webkit-letter-spacing:0.3px;-moz-letter-spacing:0.3px;-ms-letter-spacing:0.3px;letter-spacing:0.3px;}`, `.section.jsx-2067921157:not(:last-child){margin-bottom:${spacers.dp24};}`];
+const _defaultExport = [".container.jsx-2067921157{position:relative;-webkit-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%;min-height:30vh;}", ".wrapper.jsx-2067921157{position:absolute;width:100%;height:100%;overflow:auto;margin-top:0;padding:0;}", ".list.jsx-2067921157{margin:0;padding:0;}", ".header.jsx-2067921157{text-transform:uppercase;font-size:11px;color:".concat(colors.grey700, ";margin:5px 0;-webkit-letter-spacing:0.3px;-moz-letter-spacing:0.3px;-ms-letter-spacing:0.3px;letter-spacing:0.3px;}"), ".section.jsx-2067921157:not(:last-child){margin-bottom:".concat(spacers.dp24, ";}")];
 _defaultExport.__hash = "2067921157";
 // Fix for vertical flex scrolling in Firefox/Safari:
 // Wrap the list in a div with position:relative (and flex:1 instead of on the list)

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

@@ -11,7 +11,7 @@ export const styles = {
   textField: {
     marginBottom: '6px',
     background: colors.white,
-    border: `1px solid ${colors.grey400}`,
+    border: "1px solid ".concat(colors.grey400),
     borderRadius: '5px'
   }
 };