@dhis2/analytics 23.10.4 → 23.12.0

package/build/cjs/components/Interpretations/common/UserMention/UserMentionWrapper.js

@@ -0,0 +1,226 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.UserMentionWrapper = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _ui = require("@dhis2/ui");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _UserMentionWrapperStyle = require("./styles/UserMentionWrapper.style.js");
+
+var _UserList = require("./UserList.js");
+
+var _useUserSearchResults = require("./useUserSearchResults.js");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 AT_SYMBOL_WIDTH = 14;
+
+const getVirtualPopperReference = ref => {
+  const rects = ref.current.getClientRects();
+  const lastRect = rects[rects.length - 1];
+  const left = lastRect.left + lastRect.width - AT_SYMBOL_WIDTH;
+  return {
+    getBoundingClientRect: () => ({
+      top: lastRect.top,
+      right: lastRect.right,
+      bottom: lastRect.bottom,
+      left,
+      width: AT_SYMBOL_WIDTH,
+      height: lastRect.height,
+      x: left
+    })
+  };
+};
+
+const UserMentionWrapper = _ref => {
+  let {
+    children,
+    inputReference,
+    onUserSelect
+  } = _ref;
+  const [captureText, setCaptureText] = (0, _react.useState)(false);
+  const [capturedText, setCapturedText] = (0, _react.useState)('');
+  const [cloneText, setCloneText] = (0, _react.useState)('');
+  const cloneRef = (0, _react.useRef)(null);
+  const [captureStartPosition, setCaptureStartPosition] = (0, _react.useState)(null);
+  const [selectedUserIndex, setSelectedUserIndex] = (0, _react.useState)(0);
+  const {
+    users,
+    pager,
+    fetching,
+    clear
+  } = (0, _useUserSearchResults.useUserSearchResults)({
+    searchText: capturedText
+  });
+
+  const reset = () => {
+    setCaptureText(false);
+    setCapturedText('');
+    setCloneText('');
+    setCaptureStartPosition(null);
+    setSelectedUserIndex(0);
+    clear();
+  }; // event bubbles up from the input/textarea
+
+
+  const onInput = _ref2 => {
+    let {
+      target
+    } = _ref2;
+    const {
+      selectionEnd,
+      value
+    } = target;
+
+    if (captureText) {
+      clear();
+      const spacePosition = value.indexOf(' ', captureStartPosition - 1);
+      const filterValue = value.substring(captureStartPosition, spacePosition > 0 ? spacePosition : selectionEnd + 1);
+
+      if (filterValue !== capturedText) {
+        setCapturedText(filterValue);
+      } else if (filterValue.length === 0) {
+        setCapturedText('');
+        clear();
+      }
+    }
+  }; // event bubbles up from the wrapped input/textarea
+
+
+  const onKeyDown = _ref3 => {
+    let {
+      key,
+      target
+    } = _ref3;
+    const {
+      selectionStart
+    } = target;
+
+    if (!captureText && key === '@') {
+      setCaptureText(true);
+      setCaptureStartPosition(selectionStart + 1);
+      setCloneText(target.value.substring(0, selectionStart) + '@');
+    } else if (captureText) {
+      if (key === ' ' || key === 'Backspace' && selectionStart <= captureStartPosition) {
+        reset();
+      } else if (users.length) {
+        switch (key) {
+          case 'Enter':
+            event.preventDefault();
+
+            if (selectedUserIndex >= 0) {
+              onSelect(users[selectedUserIndex]);
+            }
+
+            break;
+
+          case 'ArrowDown':
+            event.preventDefault();
+
+            if (selectedUserIndex < users.length - 1) {
+              setSelectedUserIndex(selectedUserIndex + 1);
+            }
+
+            break;
+
+          case 'ArrowUp':
+            event.preventDefault();
+
+            if (selectedUserIndex > 0) {
+              setSelectedUserIndex(selectedUserIndex - 1);
+            }
+
+            break;
+
+          default: // other key strokes, typically the text typed
+          // the onInput event handler set on the input element is triggering the user lookup
+
+        }
+      }
+    }
+  };
+
+  const onSelect = user => {
+    const originalValue = inputReference.current.value;
+    const newValue = "".concat(originalValue.slice(0, captureStartPosition - 1)).concat(originalValue.slice(captureStartPosition - 1).replace(/^@\w*/, "@".concat(user.username, " ")));
+    reset(); // typically for connected components we want the state to be updated too
+    // but the logic belongs to the wrapped component, so we just invoke the supplied callback
+
+    if (onUserSelect) {
+      onUserSelect(newValue);
+    } // need to refocus on the input/textarea
+
+
+    inputReference.current.focus(); // position the cursor at the end
+
+    requestAnimationFrame(() => inputReference.current.setSelectionRange(-1, -1), 0);
+  };
+
+  const onClick = user => () => onSelect(user);
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    onKeyDown: onKeyDown,
+    onInput: onInput,
+    className: "jsx-".concat(_UserMentionWrapperStyle.userMentionWrapperClasses.__hash) + " " + "wrapper"
+  }, children, /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_UserMentionWrapperStyle.userMentionWrapperClasses.__hash) + " " + "clone"
+  }, /*#__PURE__*/_react.default.createElement("pre", {
+    ref: cloneRef,
+    className: "jsx-".concat(_UserMentionWrapperStyle.userMentionWrapperClasses.__hash)
+  }, cloneText)), captureText && /*#__PURE__*/_react.default.createElement(_ui.Portal, null, /*#__PURE__*/_react.default.createElement(_ui.Popper, {
+    reference: getVirtualPopperReference(cloneRef),
+    placement: "top-start"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Card, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_UserMentionWrapperStyle.userMentionWrapperClasses.__hash) + " " + "container"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Menu, {
+    dense: true
+  }, /*#__PURE__*/_react.default.createElement(_ui.MenuSectionHeader, {
+    className: _UserMentionWrapperStyle.resolvedHeaderStyle.className,
+    dense: true,
+    hideDivider: true,
+    label: capturedText === '' ? _d2I18n.default.t('Search for a user') : _d2I18n.default.t('Searching for "{{searchText}}"', {
+      searchText: capturedText
+    })
+  }), fetching && /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
+    label: /*#__PURE__*/_react.default.createElement(_ui.CenteredContent, null, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, {
+      small: true
+    }))
+  }), !fetching && users.length > 0 && /*#__PURE__*/_react.default.createElement(_UserList.UserList, {
+    users: users,
+    selectedUserIndex: selectedUserIndex,
+    onUserClick: onClick,
+    pager: pager
+  }), capturedText && !fetching && users.length === 0 && /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
+    dense: true,
+    disabled: true,
+    label: _d2I18n.default.t('No results found')
+  })))))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _UserMentionWrapperStyle.userMentionWrapperClasses.__hash
+  }, _UserMentionWrapperStyle.userMentionWrapperClasses), _UserMentionWrapperStyle.resolvedHeaderStyle.styles);
+};
+
+exports.UserMentionWrapper = UserMentionWrapper;
+UserMentionWrapper.defaultProps = {
+  onUserSelect: Function.prototype
+};
+UserMentionWrapper.propTypes = {
+  inputReference: _propTypes.default.object.isRequired,
+  onUserSelect: _propTypes.default.func.isRequired,
+  children: _propTypes.default.node
+};
+var _default = UserMentionWrapper;
+exports.default = _default;

package/build/cjs/components/Interpretations/common/UserMention/styles/UserMentionWrapper.style.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.userMentionWrapperClasses = exports.resolvedHeaderStyle = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ui = require("@dhis2/ui");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * Note that the clone and clone > pre styles have been chosen
+ * to emulate the styles of the textarea. If we decide to make
+ * changes there, they should be refelcted here too.
+ */
+const userMentionWrapperClasses = [".wrapper.jsx-1289989717{position:relative;}", ".clone.jsx-1289989717{position:absolute;visibility:hidden;inset:0;box-sizing:border-box;padding:".concat(_ui.spacers.dp8, " ").concat(_ui.spacers.dp12, ";border:1px solid ").concat(_ui.colors.grey500, ";font-size:14px;line-height:").concat(_ui.spacers.dp16, ";z-index:1;pointer-events:none;}"), ".clone.jsx-1289989717>pre.jsx-1289989717{display:inline;word-wrap:break-word;overflow-wrap:break-word;font:inherit;margin:0;}", ".container.jsx-1289989717{background-color:".concat(_ui.colors.white, ";max-height:180px;overflow:auto;}")];
+exports.userMentionWrapperClasses = userMentionWrapperClasses;
+userMentionWrapperClasses.__hash = "1289989717";
+const resolvedHeaderStyle = {
+  styles: /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "4275958396"
+  }, [".jsx-4275958396{position:-webkit-sticky;position:sticky;top:0;}"]),
+  className: "jsx-4275958396"
+};
+exports.resolvedHeaderStyle = resolvedHeaderStyle;

package/build/cjs/components/Interpretations/common/UserMention/useUserSearchResults.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUserSearchResults = void 0;
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _react = require("react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const usersQuery = {
+  users: {
+    resource: 'users/gist',
+    params: _ref => {
+      let {
+        searchText
+      } = _ref;
+      return {
+        fields: 'id,displayName,username',
+        order: 'firstName,surname',
+        total: true,
+        filter: "username:ilike:".concat(searchText, ",firstName:ilike:").concat(searchText, ",surname:ilike:").concat(searchText, ",email:ilike:").concat(searchText),
+        rootJunction: 'OR'
+      };
+    }
+  }
+};
+
+const useUserSearchResults = _ref2 => {
+  let {
+    searchText
+  } = _ref2;
+  const [{
+    users,
+    pager
+  }, setData] = (0, _react.useState)({
+    users: [],
+    pager: {}
+  });
+  const {
+    data,
+    fetching,
+    refetch
+  } = (0, _appRuntime.useDataQuery)(usersQuery, {
+    lazy: true
+  });
+  const debouncedRefetch = (0, _react.useCallback)((0, _debounce.default)(refetch, 250), [refetch]);
+  (0, _react.useEffect)(() => {
+    if (searchText.length) {
+      debouncedRefetch({
+        searchText
+      });
+    }
+
+    return () => debouncedRefetch.cancel();
+  }, [searchText]);
+  (0, _react.useEffect)(() => {
+    if (data) {
+      setData(data.users);
+    }
+  }, [data]);
+  return {
+    users,
+    pager,
+    fetching,
+    clear: () => setData({
+      users: [],
+      pager: {}
+    })
+  };
+};
+
+exports.useUserSearchResults = useUserSearchResults;

package/build/cjs/components/Interpretations/common/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _index = require("./Interpretation/index.js");
+
+Object.keys(_index).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _index[key];
+    }
+  });
+});
+
+var _index2 = require("./Message/index.js");
+
+Object.keys(_index2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _index2[key];
+    }
+  });
+});
+
+var _index3 = require("./RichTextEditor/index.js");
+
+Object.keys(_index3).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index3[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _index3[key];
+    }
+  });
+});

package/build/cjs/components/LegendKey/styles/LegendKey.style.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _ui = require("@dhis2/ui");
 
-const _defaultExport = [".container.jsx-3203773516{width:180px;background:".concat(_ui.colors.white, ";padding:").concat(_ui.spacers.dp8, ";border:1px solid ").concat(_ui.colors.grey400, ";}"), ".legendSet.jsx-3203773516{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-left:".concat(_ui.spacers.dp4, ";}"), ".legendSetName.jsx-3203773516{display:inline-block;font-size:13px;color:".concat(_ui.colors.grey700, ";margin-bottom:2px;}"), ".legend.jsx-3203773516{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:".concat(_ui.spacers.dp4, " 0 ").concat(_ui.spacers.dp4, " 6px;white-space:break-spaces;text-align:left;font-size:13px;}"), ".values.jsx-3203773516{color:".concat(_ui.colors.grey600, ";font-size:12px;padding-top:2px;}"), ".divider.jsx-3203773516{border-top:1px solid ".concat(_ui.colors.grey400, ";padding-top:").concat(_ui.spacers.dp8, ";margin-top:").concat(_ui.spacers.dp8, ";}")];
-_defaultExport.__hash = "3203773516";
+const _defaultExport = [".container.jsx-2467849725{width:180px;background:".concat(_ui.colors.white, ";padding:").concat(_ui.spacers.dp8, ";}"), ".legendSet.jsx-2467849725{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-left:".concat(_ui.spacers.dp4, ";}"), ".legendSetName.jsx-2467849725{display:inline-block;font-size:13px;color:".concat(_ui.colors.grey700, ";margin-bottom:2px;}"), ".legend.jsx-2467849725{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:".concat(_ui.spacers.dp4, " 0 ").concat(_ui.spacers.dp4, " 6px;white-space:break-spaces;text-align:left;font-size:13px;}"), ".values.jsx-2467849725{color:".concat(_ui.colors.grey600, ";font-size:12px;padding-top:2px;}"), ".divider.jsx-2467849725{border-top:1px solid ".concat(_ui.colors.grey400, ";padding-top:").concat(_ui.spacers.dp8, ";margin-top:").concat(_ui.spacers.dp8, ";}")];
+_defaultExport.__hash = "2467849725";
 var _default = _defaultExport;
 exports.default = _default;

package/build/cjs/index.js

@@ -453,6 +453,18 @@ Object.defineProperty(exports, "ITEM_PROP_ID", {
     return _item.ITEM_PROP_ID;
   }
 });
+Object.defineProperty(exports, "InterpretationModal", {
+  enumerable: true,
+  get: function () {
+    return _InterpretationModal.InterpretationModal;
+  }
+});
+Object.defineProperty(exports, "InterpretationsUnit", {
+  enumerable: true,
+  get: function () {
+    return _InterpretationsUnit.InterpretationsUnit;
+  }
+});
 Object.defineProperty(exports, "LAYOUT", {
   enumerable: true,
   get: function () {
@@ -1131,6 +1143,12 @@ Object.defineProperty(exports, "getAxisPerLockedDimension", {
     return _index5.getAxisPerLockedDimension;
   }
 });
+Object.defineProperty(exports, "getColorByValueFromLegendSet", {
+  enumerable: true,
+  get: function () {
+    return _legends.getColorByValueFromLegendSet;
+  }
+});
 Object.defineProperty(exports, "getDimensionById", {
   enumerable: true,
   get: function () {
@@ -1444,6 +1462,10 @@ var _LegendKey = _interopRequireDefault(require("./components/LegendKey/LegendKe
 
 var _AboutAOUnit = _interopRequireDefault(require("./components/AboutAOUnit/AboutAOUnit.js"));
 
+var _InterpretationsUnit = require("./components/Interpretations/InterpretationsUnit/InterpretationsUnit.js");
+
+var _InterpretationModal = require("./components/Interpretations/InterpretationModal/InterpretationModal.js");
+
 var _CachedDataQueryProvider = require("./components/CachedDataQueryProvider.js");
 
 var _Analytics = _interopRequireDefault(require("./api/analytics/Analytics.js"));

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

@@ -83,6 +83,38 @@
     "line list": "line list",
     "map": "map",
     "visualization": "visualization",
+    "Edit": "Edit",
+    "Write a reply": "Write a reply",
+    "Post reply": "Post reply",
+    "Could not update comment": "Could not update comment",
+    "Enter comment text": "Enter comment text",
+    "Update": "Update",
+    "Viewing interpretation: {{visualisationName}}": "Viewing interpretation: {{visualisationName}}",
+    "Could not load interpretation": "Could not load interpretation",
+    "The interpretation couldn’t be displayed. Try again or contact your system administrator.": "The interpretation couldn’t be displayed. Try again or contact your system administrator.",
+    "Hide interpretation": "Hide interpretation",
+    "Write an interpretation": "Write an interpretation",
+    "Post interpretation": "Post interpretation",
+    "Interpretations": "Interpretations",
+    "Unlike": "Unlike",
+    "Like": "Like",
+    "Reply": "Reply",
+    "Share": "Share",
+    "See interpretation": "See interpretation",
+    "Manage sharing": "Manage sharing",
+    "Could not update interpretation": "Could not update interpretation",
+    "Enter interpretation text": "Enter interpretation text",
+    "Bold text": "Bold text",
+    "Italic text": "Italic text",
+    "Link to a URL": "Link to a URL",
+    "Mention a user": "Mention a user",
+    "Add emoji": "Add emoji",
+    "Preview": "Preview",
+    "Back to write mode": "Back to write mode",
+    "Too many results. Try refining the search.": "Too many results. Try refining the search.",
+    "Search for a user": "Search for a user",
+    "Searching for \"{{searchText}}\"": "Searching for \"{{searchText}}\"",
+    "No results found": "No results found",
     "Created by": "Created by",
     "Anyone": "Anyone",
     "Only you": "Only you",
@@ -123,7 +155,6 @@
     "New line list": "New line list",
     "Options": "Options",
     "Hide": "Hide",
-    "Update": "Update",
     "{{count}} org units": "{{count}} org unit",
     "{{count}} org units_plural": "{{count}} org units",
     "{{count}} levels": "{{count}} level",

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

@@ -61,7 +61,7 @@
     "Nothing found for {{searchTerm}}": "",
     "Delete {{fileType}}": "",
     "This {{fileType}} and related interpretations will be deleted. Continue?": "",
-    "Cancel": "",
+    "Cancel": "Anulare",
     "Delete": "Lichidare",
     "File": "Fişier",
     "New": "Nou",
@@ -193,7 +193,7 @@
     "This week": "Săptămâna aceasta",
     "Last week": "Săptămâna trecută",
     "Last 4 weeks": "Ultimele 4 săptămâni",
-    "Last 12 weeks": "",
+    "Last 12 weeks": "Ultimele 12 săptămâni",
     "Last 52 weeks": "Ultimele 52 de săptămâni",
     "Weeks this year": "Săptămâni în anul curent",
     "This bi-week": "",
@@ -251,21 +251,21 @@
     "Actual reports": "",
     "Actual reports on time": "",
     "Expected reports": "",
-    "Program": "",
+    "Program": "Program",
     "Select a program": "",
     "Indicators": "Indicatori",
-    "Indicator group": "",
+    "Indicator group": "Grup de indicatori",
     "All groups": "",
     "Indicator": "Indicator",
     "No indicator groups found": "",
     "Loading indicator groups": "",
-    "Data elements": "",
+    "Data elements": "Elemente de date",
     "Data element group": "",
     "Data element": "",
     "No data element groups found": "",
     "Loading data element groups": "",
     "Data sets": "",
-    "Data set": "",
+    "Data set": "Set de date",
     "All data sets": "",
     "Loading data sets": "",
     "Event data items": "",

package/build/cjs/modules/legends.js

@@ -13,8 +13,12 @@ exports.LEGEND_DISPLAY_STYLE_FILL = LEGEND_DISPLAY_STYLE_FILL;
 const LEGEND_DISPLAY_STYLE_TEXT = 'TEXT';
 exports.LEGEND_DISPLAY_STYLE_TEXT = LEGEND_DISPLAY_STYLE_TEXT;
 
-const getLegendByValueFromLegendSet = (legendSet, value) => legendSet.legends.find(legend => value >= legend.startValue && value < legend.endValue // TODO: Confirm inclusive/exclusive bounds
-);
+const getLegendByValueFromLegendSet = (legendSet, value) => {
+  var _legendSet$legends;
+
+  return legendSet === null || legendSet === void 0 ? void 0 : (_legendSet$legends = legendSet.legends) === null || _legendSet$legends === void 0 ? void 0 : _legendSet$legends.find(legend => value >= legend.startValue && value < legend.endValue // TODO: Confirm inclusive/exclusive bounds
+  );
+};
 
 exports.getLegendByValueFromLegendSet = getLegendByValueFromLegendSet;
 

package/build/es/components/Interpretations/InterpretationModal/Comment.js

@@ -0,0 +1,45 @@
+import i18n from '@dhis2/d2-i18n';
+import { IconEdit16 } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { Message, MessageIconButton, MessageStatsBar } from '../common/index.js';
+import { CommentDeleteButton } from './CommentDeleteButton.js';
+import { CommentUpdateForm } from './CommentUpdateForm.js';
+
+const Comment = _ref => {
+  let {
+    comment,
+    currentUser,
+    interpretationId,
+    onThreadUpdated
+  } = _ref;
+  const [isUpdateMode, setIsUpdateMode] = useState(false);
+  return isUpdateMode ? /*#__PURE__*/React.createElement(CommentUpdateForm, {
+    close: () => setIsUpdateMode(false),
+    commentId: comment.id,
+    interpretationId: interpretationId,
+    onComplete: () => onThreadUpdated(false),
+    text: comment.text,
+    currentUser: currentUser
+  }) : /*#__PURE__*/React.createElement(Message, {
+    text: comment.text,
+    created: comment.created,
+    username: comment.createdBy.displayName
+  }, /*#__PURE__*/React.createElement(MessageStatsBar, null, comment.access.update && /*#__PURE__*/React.createElement(MessageIconButton, {
+    iconComponent: IconEdit16,
+    tooltipContent: i18n.t('Edit'),
+    onClick: () => setIsUpdateMode(true)
+  }), comment.access.delete && /*#__PURE__*/React.createElement(CommentDeleteButton, {
+    commentId: comment.id,
+    interpretationId: interpretationId,
+    onComplete: () => onThreadUpdated(true)
+  })));
+};
+
+Comment.propTypes = {
+  comment: PropTypes.object.isRequired,
+  currentUser: PropTypes.object.isRequired,
+  interpretationId: PropTypes.string.isRequired,
+  onThreadUpdated: PropTypes.func.isRequired
+};
+export { Comment };

package/build/es/components/Interpretations/InterpretationModal/CommentAddForm.js

@@ -0,0 +1,70 @@
+import { useDataMutation } from '@dhis2/app-runtime';
+import i18n from '@dhis2/d2-i18n';
+import { Button } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React, { useRef, useState } from 'react';
+import { RichTextEditor, MessageEditorContainer, MessageButtonStrip, MessageInput } from '../common/index.js';
+export const CommentAddForm = _ref => {
+  let {
+    interpretationId,
+    currentUser,
+    onSave,
+    focusRef
+  } = _ref;
+  const [showRichTextEditor, setShowRichTextEditor] = useState(false);
+  const [commentText, setCommentText] = useState('');
+  const saveMutationRef = useRef({
+    resource: "interpretations/".concat(interpretationId, "/comments"),
+    type: 'create',
+    data: _ref2 => {
+      let {
+        commentText
+      } = _ref2;
+      return commentText;
+    }
+  });
+  const [save, {
+    loading
+  }] = useDataMutation(saveMutationRef.current, {
+    onComplete: () => {
+      setShowRichTextEditor(false);
+      setCommentText('');
+      onSave();
+    }
+  });
+  const inputPlaceholder = i18n.t('Write a reply');
+  return /*#__PURE__*/React.createElement(MessageEditorContainer, {
+    currentUser: currentUser
+  }, showRichTextEditor ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RichTextEditor, {
+    inputPlaceholder: inputPlaceholder,
+    onChange: setCommentText,
+    value: commentText,
+    ref: focusRef,
+    disabled: loading
+  }), /*#__PURE__*/React.createElement(MessageButtonStrip, null, /*#__PURE__*/React.createElement(Button, {
+    primary: true,
+    small: true,
+    onClick: () => save({
+      commentText
+    }),
+    loading: loading
+  }, i18n.t('Post reply')), /*#__PURE__*/React.createElement(Button, {
+    secondary: true,
+    small: true,
+    disabled: loading,
+    onClick: () => {
+      setCommentText('');
+      setShowRichTextEditor(false);
+    }
+  }, i18n.t('Cancel')))) : /*#__PURE__*/React.createElement(MessageInput, {
+    onFocus: () => setShowRichTextEditor(true),
+    placeholder: inputPlaceholder,
+    ref: focusRef
+  }));
+};
+CommentAddForm.propTypes = {
+  currentUser: PropTypes.object.isRequired,
+  focusRef: PropTypes.object.isRequired,
+  interpretationId: PropTypes.string.isRequired,
+  onSave: PropTypes.func
+};