@dhis2/analytics 21.1.1 → 21.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [21.2.0](https://github.com/dhis2/analytics/compare/v21.1.1...v21.2.0) (2021-12-23)
+
+
+### Features
+
+* use new translations dialog (TECH-873) ([#1105](https://github.com/dhis2/analytics/issues/1105)) ([1e1a984](https://github.com/dhis2/analytics/commit/1e1a98429663241487ad66c56d3aab3914b8cbc6))
+
 ## [21.1.1](https://github.com/dhis2/analytics/compare/v21.1.0...v21.1.1) (2021-12-22)
 
 

package/build/cjs/components/FileMenu/FileMenu.js

@@ -7,8 +7,6 @@ exports.default = exports.FileMenu = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
-var _d2UiTranslationDialog = _interopRequireDefault(require("@dhis2/d2-ui-translation-dialog"));
-
 var _ui = require("@dhis2/ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -19,6 +17,8 @@ var _index = _interopRequireDefault(require("../../locales/index.js"));
 
 var _OpenFileDialog = require("../OpenFileDialog/OpenFileDialog.js");
 
+var _index2 = require("../TranslationDialog/index.js");
+
 var _DeleteDialog = require("./DeleteDialog.js");
 
 var _FileMenuStyles = require("./FileMenu.styles.js");
@@ -95,21 +95,11 @@ const FileMenu = ({
         });
 
       case 'translate':
-        return /*#__PURE__*/_react.default.createElement(_d2UiTranslationDialog.default, {
-          open: true,
-          d2: d2,
-          objectToTranslate: { ...fileObject,
-            // mock modelDefinition to avoid an error
-            // in the TranslationDialog component
-            modelDefinition: {
-              name: fileType
-            }
-          },
+        return /*#__PURE__*/_react.default.createElement(_index2.TranslationDialog, {
+          objectToTranslate: fileObject,
           fieldsToTranslate: ['name', 'description'],
-          onRequestClose: onDialogClose,
-          onTranslationSaved: onTranslate,
-          onTranslationError: onError,
-          insertTheme: true
+          onClose: onDialogClose,
+          onTranslationSaved: onTranslate
         });
 
       case 'sharing':

package/build/cjs/components/FileMenu/__tests__/FileMenu.spec.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _d2UiTranslationDialog = _interopRequireDefault(require("@dhis2/d2-ui-translation-dialog"));
-
 var _ui = require("@dhis2/ui");
 
 var _enzyme = require("enzyme");
@@ -10,6 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _OpenFileDialog = require("../../OpenFileDialog/OpenFileDialog.js");
 
+var _index = require("../../TranslationDialog/index.js");
+
 var _DeleteDialog = require("../DeleteDialog.js");
 
 var _FileMenu = require("../FileMenu.js");
@@ -152,7 +152,7 @@ describe('The FileMenu component ', () => {
     const fileMenuComponent = getFileMenuComponent(props);
     fileMenuComponent.find('button').simulate('click');
     fileMenuComponent.findWhere(n => n.prop('label') === 'Translate…').simulate('click');
-    expect(fileMenuComponent.find(_d2UiTranslationDialog.default)).toHaveLength(1);
+    expect(fileMenuComponent.find(_index.TranslationDialog)).toHaveLength(1);
   });
   it('renders the SharingDialog when the Share button is clicked', () => {
     props.fileObject = {

package/build/cjs/components/TranslationDialog/TranslationModal/LocalesSelect.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LocalesSelect = void 0;
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _ui = require("@dhis2/ui");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const query = {
+  locales: {
+    resource: 'locales/db'
+  }
+};
+
+const LocalesSelect = ({
+  onChange,
+  selected
+}) => {
+  const {
+    data,
+    fetching
+  } = (0, _appRuntime.useDataQuery)(query);
+  return /*#__PURE__*/_react.default.createElement(_ui.SingleSelect, {
+    prefix: selected ? _d2I18n.default.t('Translating to') : _d2I18n.default.t('Choose a locale'),
+    onChange: ({
+      selected
+    }) => onChange(selected),
+    loading: fetching,
+    selected: data ? selected : undefined,
+    dense: true
+  }, data && data.locales // XXX remove duplicates ?! fr_SN - French (Senegal)
+  .reduce((locales, {
+    locale,
+    name
+  }) => {
+    if (!locales.find(entry => entry.locale === locale)) {
+      locales.push({
+        locale,
+        name
+      });
+    }
+
+    return locales;
+  }, []).map(({
+    locale,
+    name
+  }) => /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
+    key: locale,
+    value: locale,
+    label: name
+  })));
+};
+
+exports.LocalesSelect = LocalesSelect;
+LocalesSelect.propTypes = {
+  onChange: _propTypes.default.func.isRequired,
+  selected: _propTypes.default.string
+};

package/build/cjs/components/TranslationDialog/TranslationModal/TranslationForm.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TranslationForm = void 0;
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _ui = require("@dhis2/ui");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _LocalesSelect = require("./LocalesSelect.js");
+
+var _TranslationModalActions = require("./TranslationModalActions.js");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SESSION_STORAGE_TRANSLATION_LOCALE_KEY = 'translation-dialog-selected-locale';
+
+const TranslationForm = ({
+  fieldsToTranslate,
+  objectToTranslate,
+  translations,
+  resource,
+  onTranslationSaved,
+  onClose
+}) => {
+  const [newTranslations, setNewTranslations] = (0, _react.useState)();
+  const [translationLocale, setTranslationLocale] = (0, _react.useState)();
+  const {
+    show: showError
+  } = (0, _appRuntime.useAlert)(error => error, {
+    critical: true
+  });
+
+  const formatFieldLabel = field => {
+    field.replace(/[a-z][A-Z]/g, match => [match.charAt(0), match.charAt(1)].join(' ')).toLowerCase();
+    return field.charAt(0).toUpperCase() + field.slice(1);
+  };
+
+  const camelCaseToUnderscores = field => field.replace(/[a-z][A-Z]/g, match => [match.charAt(0), match.charAt(1)].join('_')).toLowerCase();
+
+  const getTranslationIndexForField = field => newTranslations.findIndex(element => element.locale === translationLocale && element.property.toLowerCase() === camelCaseToUnderscores(field));
+
+  const getTranslationForField = field => {
+    var _newTranslations$tran;
+
+    const translationIndex = getTranslationIndexForField(field);
+    return translationIndex !== -1 ? ((_newTranslations$tran = newTranslations[translationIndex]) === null || _newTranslations$tran === void 0 ? void 0 : _newTranslations$tran.value) || '' : '';
+  };
+
+  const setTranslationForField = (field, translation) => {
+    const newTranslation = {
+      locale: translationLocale,
+      property: camelCaseToUnderscores(field).toUpperCase(),
+      value: translation
+    };
+    const translationIndex = getTranslationIndexForField(field);
+    setNewTranslations(translationIndex === -1 ? [...newTranslations, newTranslation] : newTranslations.map((translation, index) => index === translationIndex ? newTranslation : translation));
+  };
+
+  const translationsMutationRef = (0, _react.useRef)({
+    resource: "".concat(resource, "/translations"),
+    type: 'update',
+    data: ({
+      translations
+    }) => ({
+      translations
+    })
+  });
+  const [saveTranslations, {
+    loading: saveInProgress
+  }] = (0, _appRuntime.useDataMutation)(translationsMutationRef.current, {
+    onComplete: () => {
+      onTranslationSaved();
+      onClose();
+    },
+    onError: error => {
+      showError(error);
+    }
+  });
+
+  const onLocaleChange = locale => {
+    setTranslationLocale(locale);
+    window.sessionStorage.setItem(SESSION_STORAGE_TRANSLATION_LOCALE_KEY, locale);
+  };
+
+  const save = () => saveTranslations({
+    translations: newTranslations
+  });
+
+  (0, _react.useEffect)(() => setTranslationLocale(window.sessionStorage.getItem(SESSION_STORAGE_TRANSLATION_LOCALE_KEY)), []);
+  (0, _react.useEffect)(() => setNewTranslations(translations), [translations]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.ModalContent, null, /*#__PURE__*/_react.default.createElement(_ui.DataTable, {
+    layout: "fixed"
+  }, /*#__PURE__*/_react.default.createElement(_ui.DataTableHead, null, /*#__PURE__*/_react.default.createElement(_ui.DataTableRow, null, /*#__PURE__*/_react.default.createElement(_ui.DataTableColumnHeader, {
+    fixed: true,
+    top: "0"
+  }, _d2I18n.default.t('Base locale reference')), /*#__PURE__*/_react.default.createElement(_ui.DataTableColumnHeader, {
+    fixed: true,
+    top: "0"
+  }, /*#__PURE__*/_react.default.createElement(_LocalesSelect.LocalesSelect, {
+    selected: translationLocale,
+    onChange: onLocaleChange
+  })))), /*#__PURE__*/_react.default.createElement(_ui.DataTableBody, null, fieldsToTranslate.map((field, index) => /*#__PURE__*/_react.default.createElement(_ui.DataTableRow, {
+    key: field
+  }, /*#__PURE__*/_react.default.createElement(_ui.DataTableCell, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: ""
+  }, /*#__PURE__*/_react.default.createElement(_ui.InputField, {
+    label: formatFieldLabel(field),
+    value: objectToTranslate[field],
+    readOnly: true
+  }))), translationLocale && /*#__PURE__*/_react.default.createElement(_ui.DataTableCell, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: ""
+  }, /*#__PURE__*/_react.default.createElement(_ui.InputField, {
+    label: formatFieldLabel(field),
+    value: getTranslationForField(field),
+    onChange: ({
+      value
+    }) => setTranslationForField(field, value)
+  }))), !translationLocale && index === 0 && /*#__PURE__*/_react.default.createElement(_ui.DataTableCell, {
+    rowSpan: String(fieldsToTranslate.length)
+  }, /*#__PURE__*/_react.default.createElement(_ui.CenteredContent, null, _d2I18n.default.t('Choose a locale to translate from the menu above')))))))), /*#__PURE__*/_react.default.createElement(_TranslationModalActions.TranslationModalActions, {
+    onClose: onClose,
+    onSave: save,
+    saveInProgress: saveInProgress,
+    saveButtonDisabled: !translationLocale
+  }));
+};
+
+exports.TranslationForm = TranslationForm;
+TranslationForm.propTypes = {
+  fieldsToTranslate: _propTypes.default.array.isRequired,
+  objectToTranslate: _propTypes.default.object.isRequired,
+  resource: _propTypes.default.string.isRequired,
+  translations: _propTypes.default.array.isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  onTranslationSaved: _propTypes.default.func.isRequired
+};

package/build/cjs/components/TranslationDialog/TranslationModal/TranslationModal.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TranslationModal = void 0;
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _ui = require("@dhis2/ui");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TranslationForm = require("./TranslationForm.js");
+
+var _TranslationModalActions = require("./TranslationModalActions.js");
+
+var _useTranslationsResults = require("./useTranslationsResults.js");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const TranslationModal = ({
+  objectToTranslate,
+  fieldsToTranslate,
+  onClose,
+  onTranslationSaved
+}) => {
+  const [translations, setTranslations] = (0, _react.useState)([]);
+  const endpointPath = new URL(objectToTranslate.href).pathname;
+  const endpointPathMatch = endpointPath.match(/api\/\d+\/(?<resource>.+)/);
+  const resource = endpointPathMatch !== null && endpointPathMatch !== void 0 && endpointPathMatch.groups ? endpointPathMatch.groups.resource : null;
+  const {
+    translationsData,
+    fetching
+  } = (0, _useTranslationsResults.useTranslationsResults)({
+    resource
+  });
+  (0, _react.useEffect)(() => {
+    if (translationsData) {
+      setTranslations(translationsData);
+    }
+  }, [translationsData]);
+  return /*#__PURE__*/_react.default.createElement(_ui.Modal, {
+    large: true,
+    position: "middle",
+    onClose: onClose
+  }, /*#__PURE__*/_react.default.createElement(_ui.ModalTitle, null, _d2I18n.default.t('Translate: {{objectName}}', {
+    objectName: objectToTranslate.name || 'TEXT',
+    // XXX
+    nsSeparator: '^^'
+  })), fetching ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.ModalContent, null, /*#__PURE__*/_react.default.createElement(_ui.CenteredContent, null, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, null))), /*#__PURE__*/_react.default.createElement(_TranslationModalActions.TranslationModalActions, {
+    onClose: onClose,
+    saveButtonDisabled: true
+  })) : /*#__PURE__*/_react.default.createElement(_TranslationForm.TranslationForm, {
+    fieldsToTranslate: fieldsToTranslate,
+    objectToTranslate: objectToTranslate,
+    translations: translations,
+    onTranslationSaved: onTranslationSaved,
+    resource: resource,
+    onClose: onClose
+  }));
+};
+
+exports.TranslationModal = TranslationModal;
+TranslationModal.propTypes = {
+  fieldsToTranslate: _propTypes.default.array.isRequired,
+  objectToTranslate: _propTypes.default.object.isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  onTranslationSaved: _propTypes.default.func.isRequired
+};

package/build/cjs/components/TranslationDialog/TranslationModal/TranslationModalActions.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TranslationModalActions = void 0;
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _ui = require("@dhis2/ui");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const TranslationModalActions = ({
+  onClose,
+  onSave,
+  saveInProgress,
+  saveButtonDisabled
+}) => /*#__PURE__*/_react.default.createElement(_ui.ModalActions, null, /*#__PURE__*/_react.default.createElement(_ui.ButtonStrip, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+  secondary: true,
+  onClick: onClose
+}, _d2I18n.default.t('Cancel')), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+  primary: true,
+  onClick: onSave,
+  loading: saveInProgress,
+  disabled: saveButtonDisabled
+}, _d2I18n.default.t('Save translations'))));
+
+exports.TranslationModalActions = TranslationModalActions;
+TranslationModalActions.propTypes = {
+  onClose: _propTypes.default.func.isRequired,
+  saveButtonDisabled: _propTypes.default.bool,
+  saveInProgress: _propTypes.default.bool,
+  onSave: _propTypes.default.func
+};

package/build/cjs/components/TranslationDialog/TranslationModal/useTranslationsResults.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTranslationsResults = void 0;
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _react = require("react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const useTranslationsResults = ({
+  resource
+}) => {
+  const translationsQueryRef = (0, _react.useRef)({
+    translations: {
+      resource: "".concat(resource, "/translations")
+    }
+  });
+  const {
+    data,
+    fetching,
+    refetch
+  } = (0, _appRuntime.useDataQuery)(translationsQueryRef.current, {
+    onError: error => showError(error)
+  });
+  const {
+    show: showError
+  } = (0, _appRuntime.useAlert)(error => error.message || _d2I18n.default.t('Could not load translations'), {
+    critical: true,
+    actions: [{
+      label: _d2I18n.default.t('Retry'),
+      onClick: refetch
+    }]
+  });
+  return {
+    translationsData: fetching ? undefined : data.translations.translations,
+    fetching
+  };
+};
+
+exports.useTranslationsResults = useTranslationsResults;

package/build/cjs/components/TranslationDialog/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TranslationDialog", {
+  enumerable: true,
+  get: function () {
+    return _TranslationModal.TranslationModal;
+  }
+});
+
+var _TranslationModal = require("./TranslationModal/TranslationModal.js");

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

@@ -222,6 +222,14 @@
     "Six-months": "Six-months",
     "Financial Years": "Financial Years",
     "Years": "Years",
+    "Translating to": "Translating to",
+    "Choose a locale": "Choose a locale",
+    "Base locale reference": "Base locale reference",
+    "Choose a locale to translate from the menu above": "Choose a locale to translate from the menu above",
+    "Translate: {{objectName}}": "Translate: {{objectName}}",
+    "Save translations": "Save translations",
+    "Could not load translations": "Could not load translations",
+    "Retry": "Retry",
     "Series": "Series",
     "Category": "Category",
     "Filter": "Filter",

package/build/es/components/FileMenu/FileMenu.js

@@ -1,10 +1,10 @@
 import _JSXStyle from "styled-jsx/style";
-import TranslationDialog from '@dhis2/d2-ui-translation-dialog';
 import { IconAdd24, IconLaunch24, IconSave24, IconEdit24, IconTranslate24, IconShare24, IconLink24, IconDelete24, SharingDialog, colors, FlyoutMenu, Layer, MenuItem, MenuDivider, Popper } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React, { createRef, useState } from 'react';
 import i18n from '../../locales/index.js';
 import { OpenFileDialog } from '../OpenFileDialog/OpenFileDialog.js';
+import { TranslationDialog } from '../TranslationDialog/index.js';
 import { DeleteDialog } from './DeleteDialog.js';
 import { fileMenuStyles } from './FileMenu.styles.js';
 import { GetLinkDialog } from './GetLinkDialog.js';
@@ -70,20 +70,10 @@ export const FileMenu = ({
 
       case 'translate':
         return /*#__PURE__*/React.createElement(TranslationDialog, {
-          open: true,
-          d2: d2,
-          objectToTranslate: { ...fileObject,
-            // mock modelDefinition to avoid an error
-            // in the TranslationDialog component
-            modelDefinition: {
-              name: fileType
-            }
-          },
+          objectToTranslate: fileObject,
           fieldsToTranslate: ['name', 'description'],
-          onRequestClose: onDialogClose,
-          onTranslationSaved: onTranslate,
-          onTranslationError: onError,
-          insertTheme: true
+          onClose: onDialogClose,
+          onTranslationSaved: onTranslate
         });
 
       case 'sharing':

package/build/es/components/FileMenu/__tests__/FileMenu.spec.js

@@ -1,8 +1,8 @@
-import TranslationDialog from '@dhis2/d2-ui-translation-dialog';
 import { SharingDialog } from '@dhis2/ui';
 import { shallow } from 'enzyme';
 import React from 'react';
 import { OpenFileDialog } from '../../OpenFileDialog/OpenFileDialog.js';
+import { TranslationDialog } from '../../TranslationDialog/index.js';
 import { DeleteDialog } from '../DeleteDialog.js';
 import { FileMenu } from '../FileMenu.js';
 import { GetLinkDialog } from '../GetLinkDialog.js';

package/build/es/components/TranslationDialog/TranslationModal/LocalesSelect.js

@@ -0,0 +1,52 @@
+import { useDataQuery } from '@dhis2/app-runtime';
+import i18n from '@dhis2/d2-i18n';
+import { SingleSelect, SingleSelectOption } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React from 'react';
+const query = {
+  locales: {
+    resource: 'locales/db'
+  }
+};
+export const LocalesSelect = ({
+  onChange,
+  selected
+}) => {
+  const {
+    data,
+    fetching
+  } = useDataQuery(query);
+  return /*#__PURE__*/React.createElement(SingleSelect, {
+    prefix: selected ? i18n.t('Translating to') : i18n.t('Choose a locale'),
+    onChange: ({
+      selected
+    }) => onChange(selected),
+    loading: fetching,
+    selected: data ? selected : undefined,
+    dense: true
+  }, data && data.locales // XXX remove duplicates ?! fr_SN - French (Senegal)
+  .reduce((locales, {
+    locale,
+    name
+  }) => {
+    if (!locales.find(entry => entry.locale === locale)) {
+      locales.push({
+        locale,
+        name
+      });
+    }
+
+    return locales;
+  }, []).map(({
+    locale,
+    name
+  }) => /*#__PURE__*/React.createElement(SingleSelectOption, {
+    key: locale,
+    value: locale,
+    label: name
+  })));
+};
+LocalesSelect.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  selected: PropTypes.string
+};

package/build/es/components/TranslationDialog/TranslationModal/TranslationForm.js

@@ -0,0 +1,126 @@
+import { useAlert, useDataMutation } from '@dhis2/app-runtime';
+import i18n from '@dhis2/d2-i18n';
+import { CenteredContent, DataTable, DataTableBody, DataTableCell, DataTableColumnHeader, DataTableHead, DataTableRow, InputField, ModalContent } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+import { LocalesSelect } from './LocalesSelect.js';
+import { TranslationModalActions } from './TranslationModalActions.js';
+const SESSION_STORAGE_TRANSLATION_LOCALE_KEY = 'translation-dialog-selected-locale';
+export const TranslationForm = ({
+  fieldsToTranslate,
+  objectToTranslate,
+  translations,
+  resource,
+  onTranslationSaved,
+  onClose
+}) => {
+  const [newTranslations, setNewTranslations] = useState();
+  const [translationLocale, setTranslationLocale] = useState();
+  const {
+    show: showError
+  } = useAlert(error => error, {
+    critical: true
+  });
+
+  const formatFieldLabel = field => {
+    field.replace(/[a-z][A-Z]/g, match => [match.charAt(0), match.charAt(1)].join(' ')).toLowerCase();
+    return field.charAt(0).toUpperCase() + field.slice(1);
+  };
+
+  const camelCaseToUnderscores = field => field.replace(/[a-z][A-Z]/g, match => [match.charAt(0), match.charAt(1)].join('_')).toLowerCase();
+
+  const getTranslationIndexForField = field => newTranslations.findIndex(element => element.locale === translationLocale && element.property.toLowerCase() === camelCaseToUnderscores(field));
+
+  const getTranslationForField = field => {
+    var _newTranslations$tran;
+
+    const translationIndex = getTranslationIndexForField(field);
+    return translationIndex !== -1 ? ((_newTranslations$tran = newTranslations[translationIndex]) === null || _newTranslations$tran === void 0 ? void 0 : _newTranslations$tran.value) || '' : '';
+  };
+
+  const setTranslationForField = (field, translation) => {
+    const newTranslation = {
+      locale: translationLocale,
+      property: camelCaseToUnderscores(field).toUpperCase(),
+      value: translation
+    };
+    const translationIndex = getTranslationIndexForField(field);
+    setNewTranslations(translationIndex === -1 ? [...newTranslations, newTranslation] : newTranslations.map((translation, index) => index === translationIndex ? newTranslation : translation));
+  };
+
+  const translationsMutationRef = useRef({
+    resource: "".concat(resource, "/translations"),
+    type: 'update',
+    data: ({
+      translations
+    }) => ({
+      translations
+    })
+  });
+  const [saveTranslations, {
+    loading: saveInProgress
+  }] = useDataMutation(translationsMutationRef.current, {
+    onComplete: () => {
+      onTranslationSaved();
+      onClose();
+    },
+    onError: error => {
+      showError(error);
+    }
+  });
+
+  const onLocaleChange = locale => {
+    setTranslationLocale(locale);
+    window.sessionStorage.setItem(SESSION_STORAGE_TRANSLATION_LOCALE_KEY, locale);
+  };
+
+  const save = () => saveTranslations({
+    translations: newTranslations
+  });
+
+  useEffect(() => setTranslationLocale(window.sessionStorage.getItem(SESSION_STORAGE_TRANSLATION_LOCALE_KEY)), []);
+  useEffect(() => setNewTranslations(translations), [translations]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(DataTable, {
+    layout: "fixed"
+  }, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+    fixed: true,
+    top: "0"
+  }, i18n.t('Base locale reference')), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+    fixed: true,
+    top: "0"
+  }, /*#__PURE__*/React.createElement(LocalesSelect, {
+    selected: translationLocale,
+    onChange: onLocaleChange
+  })))), /*#__PURE__*/React.createElement(DataTableBody, null, fieldsToTranslate.map((field, index) => /*#__PURE__*/React.createElement(DataTableRow, {
+    key: field
+  }, /*#__PURE__*/React.createElement(DataTableCell, null, /*#__PURE__*/React.createElement("div", {
+    className: ""
+  }, /*#__PURE__*/React.createElement(InputField, {
+    label: formatFieldLabel(field),
+    value: objectToTranslate[field],
+    readOnly: true
+  }))), translationLocale && /*#__PURE__*/React.createElement(DataTableCell, null, /*#__PURE__*/React.createElement("div", {
+    className: ""
+  }, /*#__PURE__*/React.createElement(InputField, {
+    label: formatFieldLabel(field),
+    value: getTranslationForField(field),
+    onChange: ({
+      value
+    }) => setTranslationForField(field, value)
+  }))), !translationLocale && index === 0 && /*#__PURE__*/React.createElement(DataTableCell, {
+    rowSpan: String(fieldsToTranslate.length)
+  }, /*#__PURE__*/React.createElement(CenteredContent, null, i18n.t('Choose a locale to translate from the menu above')))))))), /*#__PURE__*/React.createElement(TranslationModalActions, {
+    onClose: onClose,
+    onSave: save,
+    saveInProgress: saveInProgress,
+    saveButtonDisabled: !translationLocale
+  }));
+};
+TranslationForm.propTypes = {
+  fieldsToTranslate: PropTypes.array.isRequired,
+  objectToTranslate: PropTypes.object.isRequired,
+  resource: PropTypes.string.isRequired,
+  translations: PropTypes.array.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onTranslationSaved: PropTypes.func.isRequired
+};

package/build/es/components/TranslationDialog/TranslationModal/TranslationModal.js

@@ -0,0 +1,54 @@
+import i18n from '@dhis2/d2-i18n';
+import { CenteredContent, CircularLoader, Modal, ModalContent, ModalTitle } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import { TranslationForm } from './TranslationForm.js';
+import { TranslationModalActions } from './TranslationModalActions.js';
+import { useTranslationsResults } from './useTranslationsResults.js';
+export const TranslationModal = ({
+  objectToTranslate,
+  fieldsToTranslate,
+  onClose,
+  onTranslationSaved
+}) => {
+  const [translations, setTranslations] = useState([]);
+  const endpointPath = new URL(objectToTranslate.href).pathname;
+  const endpointPathMatch = endpointPath.match(/api\/\d+\/(?<resource>.+)/);
+  const resource = endpointPathMatch !== null && endpointPathMatch !== void 0 && endpointPathMatch.groups ? endpointPathMatch.groups.resource : null;
+  const {
+    translationsData,
+    fetching
+  } = useTranslationsResults({
+    resource
+  });
+  useEffect(() => {
+    if (translationsData) {
+      setTranslations(translationsData);
+    }
+  }, [translationsData]);
+  return /*#__PURE__*/React.createElement(Modal, {
+    large: true,
+    position: "middle",
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(ModalTitle, null, i18n.t('Translate: {{objectName}}', {
+    objectName: objectToTranslate.name || 'TEXT',
+    // XXX
+    nsSeparator: '^^'
+  })), fetching ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement(CircularLoader, null))), /*#__PURE__*/React.createElement(TranslationModalActions, {
+    onClose: onClose,
+    saveButtonDisabled: true
+  })) : /*#__PURE__*/React.createElement(TranslationForm, {
+    fieldsToTranslate: fieldsToTranslate,
+    objectToTranslate: objectToTranslate,
+    translations: translations,
+    onTranslationSaved: onTranslationSaved,
+    resource: resource,
+    onClose: onClose
+  }));
+};
+TranslationModal.propTypes = {
+  fieldsToTranslate: PropTypes.array.isRequired,
+  objectToTranslate: PropTypes.object.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onTranslationSaved: PropTypes.func.isRequired
+};

package/build/es/components/TranslationDialog/TranslationModal/TranslationModalActions.js

@@ -0,0 +1,24 @@
+import i18n from '@dhis2/d2-i18n';
+import { Button, ButtonStrip, ModalActions } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React from 'react';
+export const TranslationModalActions = ({
+  onClose,
+  onSave,
+  saveInProgress,
+  saveButtonDisabled
+}) => /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, null, /*#__PURE__*/React.createElement(Button, {
+  secondary: true,
+  onClick: onClose
+}, i18n.t('Cancel')), /*#__PURE__*/React.createElement(Button, {
+  primary: true,
+  onClick: onSave,
+  loading: saveInProgress,
+  disabled: saveButtonDisabled
+}, i18n.t('Save translations'))));
+TranslationModalActions.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  saveButtonDisabled: PropTypes.bool,
+  saveInProgress: PropTypes.bool,
+  onSave: PropTypes.func
+};

package/build/es/components/TranslationDialog/TranslationModal/useTranslationsResults.js

@@ -0,0 +1,32 @@
+import { useAlert, useDataQuery } from '@dhis2/app-runtime';
+import i18n from '@dhis2/d2-i18n';
+import { useRef } from 'react';
+export const useTranslationsResults = ({
+  resource
+}) => {
+  const translationsQueryRef = useRef({
+    translations: {
+      resource: "".concat(resource, "/translations")
+    }
+  });
+  const {
+    data,
+    fetching,
+    refetch
+  } = useDataQuery(translationsQueryRef.current, {
+    onError: error => showError(error)
+  });
+  const {
+    show: showError
+  } = useAlert(error => error.message || i18n.t('Could not load translations'), {
+    critical: true,
+    actions: [{
+      label: i18n.t('Retry'),
+      onClick: refetch
+    }]
+  });
+  return {
+    translationsData: fetching ? undefined : data.translations.translations,
+    fetching
+  };
+};

package/build/es/components/TranslationDialog/index.js

@@ -0,0 +1,2 @@
+import { TranslationModal as TranslationDialog } from './TranslationModal/TranslationModal.js';
+export { TranslationDialog };

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

@@ -222,6 +222,14 @@
     "Six-months": "Six-months",
     "Financial Years": "Financial Years",
     "Years": "Years",
+    "Translating to": "Translating to",
+    "Choose a locale": "Choose a locale",
+    "Base locale reference": "Base locale reference",
+    "Choose a locale to translate from the menu above": "Choose a locale to translate from the menu above",
+    "Translate: {{objectName}}": "Translate: {{objectName}}",
+    "Save translations": "Save translations",
+    "Could not load translations": "Could not load translations",
+    "Retry": "Retry",
     "Series": "Series",
     "Category": "Category",
     "Filter": "Filter",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "21.1.1",
+    "version": "21.2.0",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {