@dhis2/analytics 23.11.1 → 23.12.0

package/build/es/components/Interpretations/InterpretationsUnit/InterpretationList.js

@@ -0,0 +1,78 @@
+import _JSXStyle from "styled-jsx/style";
+import { IconCalendar24, colors, spacers } from '@dhis2/ui';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Interpretation } from '../common/index.js';
+
+const sortByCreatedDateDesc = (a, b) => {
+  const dateA = a.created;
+  const dateB = b.created;
+
+  if (dateA < dateB) {
+    return 1;
+  }
+
+  if (dateA > dateB) {
+    return -1;
+  }
+
+  return 0;
+};
+
+export const InterpretationList = _ref => {
+  let {
+    currentUser,
+    interpretations,
+    onInterpretationClick,
+    onReplyIconClick,
+    refresh,
+    disabled
+  } = _ref;
+  const interpretationsByDate = interpretations.reduce((groupedInterpretations, interpretation) => {
+    const date = interpretation.created.split('T')[0];
+
+    if (date in groupedInterpretations) {
+      groupedInterpretations[date].push(interpretation);
+    } else {
+      groupedInterpretations[date] = [interpretation];
+    }
+
+    return groupedInterpretations;
+  }, {});
+  return /*#__PURE__*/React.createElement("ol", {
+    className: _JSXStyle.dynamic([["4058400613", [spacers.dp8, spacers.dp8, spacers.dp16, colors.grey800, spacers.dp12, spacers.dp12, spacers.dp32, spacers.dp4]]]) + " " + "interpretation-groups"
+  }, Object.keys(interpretationsByDate).sort().reverse().map(date => /*#__PURE__*/React.createElement("li", {
+    key: date,
+    className: _JSXStyle.dynamic([["4058400613", [spacers.dp8, spacers.dp8, spacers.dp16, colors.grey800, spacers.dp12, spacers.dp12, spacers.dp32, spacers.dp4]]])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4058400613", [spacers.dp8, spacers.dp8, spacers.dp16, colors.grey800, spacers.dp12, spacers.dp12, spacers.dp32, spacers.dp4]]]) + " " + "date-section"
+  }, /*#__PURE__*/React.createElement(IconCalendar24, {
+    color: colors.grey600
+  }), /*#__PURE__*/React.createElement("time", {
+    dateTime: date,
+    className: _JSXStyle.dynamic([["4058400613", [spacers.dp8, spacers.dp8, spacers.dp16, colors.grey800, spacers.dp12, spacers.dp12, spacers.dp32, spacers.dp4]]]) + " " + "date-header"
+  }, moment(date).format('ll'))), /*#__PURE__*/React.createElement("ol", {
+    className: _JSXStyle.dynamic([["4058400613", [spacers.dp8, spacers.dp8, spacers.dp16, colors.grey800, spacers.dp12, spacers.dp12, spacers.dp32, spacers.dp4]]]) + " " + "interpretation-list"
+  }, interpretationsByDate[date].sort(sortByCreatedDateDesc).map(interpretation => /*#__PURE__*/React.createElement(Interpretation, {
+    key: interpretation.id,
+    interpretation: interpretation,
+    currentUser: currentUser,
+    onClick: onInterpretationClick,
+    onReplyIconClick: onReplyIconClick,
+    onDeleted: refresh,
+    onUpdated: refresh,
+    disabled: disabled
+  }))))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4058400613",
+    dynamic: [spacers.dp8, spacers.dp8, spacers.dp16, colors.grey800, spacers.dp12, spacers.dp12, spacers.dp32, spacers.dp4]
+  }, [".date-section.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(spacers.dp8, ";-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:").concat(spacers.dp8, ";}"), ".date-header.__jsx-style-dynamic-selector{font-size:14px;font-weight:500;line-height:".concat(spacers.dp16, ";color:").concat(colors.grey800, ";}"), ".interpretation-groups.__jsx-style-dynamic-selector{margin:0;padding:0;padding-top:".concat(spacers.dp12, ";list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:").concat(spacers.dp12, ";}"), ".interpretation-list.__jsx-style-dynamic-selector{margin:0;padding-left:".concat(spacers.dp32, ";list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:").concat(spacers.dp4, ";}")]));
+};
+InterpretationList.propTypes = {
+  currentUser: PropTypes.object.isRequired,
+  interpretations: PropTypes.array.isRequired,
+  refresh: PropTypes.func.isRequired,
+  onInterpretationClick: PropTypes.func.isRequired,
+  onReplyIconClick: PropTypes.func.isRequired,
+  disabled: PropTypes.bool
+};

package/build/es/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js

@@ -0,0 +1,112 @@
+import _JSXStyle from "styled-jsx/style";
+import { useDataQuery } from '@dhis2/app-runtime';
+import i18n from '@dhis2/d2-i18n';
+import { CircularLoader, IconChevronDown24, IconChevronUp24, colors, spacers } from '@dhis2/ui';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState, useImperativeHandle, forwardRef } from 'react';
+import { InterpretationForm } from './InterpretationForm.js';
+import { InterpretationList } from './InterpretationList.js';
+const interpretationsQuery = {
+  interpretations: {
+    resource: 'interpretations',
+    params: _ref => {
+      let {
+        type,
+        id
+      } = _ref;
+      return {
+        fields: ['access', 'id', 'user[displayName]', 'created', 'text', 'comments[id]', 'likes', 'likedBy[id]'],
+        filter: "".concat(type, ".id:eq:").concat(id)
+      };
+    }
+  }
+};
+export const InterpretationsUnit = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    currentUser,
+    type,
+    id,
+    onInterpretationClick,
+    onReplyIconClick,
+    disabled
+  } = _ref2;
+  const [isExpanded, setIsExpanded] = useState(true);
+  const {
+    data,
+    loading,
+    fetching,
+    refetch
+  } = useDataQuery(interpretationsQuery, {
+    lazy: true
+  });
+
+  const onCompleteAction = () => {
+    refetch({
+      type,
+      id
+    });
+  };
+
+  useImperativeHandle(ref, () => ({
+    refresh: onCompleteAction
+  }), []);
+  useEffect(() => {
+    if (id) {
+      refetch({
+        type,
+        id
+      });
+    }
+  }, [type, id]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4120713286", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + (cx('container', {
+      expanded: isExpanded
+    }) || "")
+  }, fetching && !loading && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4120713286", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + "fetching-loader"
+  }, /*#__PURE__*/React.createElement(CircularLoader, {
+    small: true
+  })), /*#__PURE__*/React.createElement("div", {
+    onClick: () => setIsExpanded(!isExpanded),
+    className: _JSXStyle.dynamic([["4120713286", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + "header"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["4120713286", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + "title"
+  }, i18n.t('Interpretations')), isExpanded ? /*#__PURE__*/React.createElement(IconChevronUp24, {
+    color: colors.grey700
+  }) : /*#__PURE__*/React.createElement(IconChevronDown24, {
+    color: colors.grey700
+  })), isExpanded && /*#__PURE__*/React.createElement(React.Fragment, null, loading && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4120713286", [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]]]) + " " + "loader"
+  }, /*#__PURE__*/React.createElement(CircularLoader, {
+    small: true
+  })), data && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InterpretationForm, {
+    currentUser: currentUser,
+    type: type,
+    id: id,
+    onSave: onCompleteAction,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(InterpretationList, {
+    currentUser: currentUser,
+    interpretations: data.interpretations.interpretations,
+    onInterpretationClick: onInterpretationClick,
+    onReplyIconClick: onReplyIconClick,
+    refresh: onCompleteAction,
+    disabled: disabled
+  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4120713286",
+    dynamic: [spacers.dp16, colors.grey400, colors.white, spacers.dp32, colors.grey900]
+  }, [".container.__jsx-style-dynamic-selector{position:relative;padding:".concat(spacers.dp16, ";border-bottom:1px solid ").concat(colors.grey400, ";background-color:").concat(colors.white, ";}"), ".fetching-loader.__jsx-style-dynamic-selector{position:absolute;inset:0px;background-color:rgba(255,255,255,0.8);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;z-index:1;}", ".expanded.__jsx-style-dynamic-selector{padding-bottom:".concat(spacers.dp32, ";}"), ".loader.__jsx-style-dynamic-selector{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-style-dynamic-selector{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;cursor:pointer;}", ".title.__jsx-style-dynamic-selector{font-size:16px;font-weight:500;line-height:21px;color:".concat(colors.grey900, ";}")]));
+});
+InterpretationsUnit.displayName = 'InterpretationsUnit';
+InterpretationsUnit.defaultProps = {
+  onInterpretationClick: Function.prototype
+};
+InterpretationsUnit.propTypes = {
+  currentUser: PropTypes.object.isRequired,
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  onInterpretationClick: PropTypes.func,
+  onReplyIconClick: PropTypes.func
+};

package/build/es/components/Interpretations/InterpretationsUnit/index.js

@@ -0,0 +1 @@
+export { InterpretationsUnit } from './InterpretationsUnit.js';

package/build/es/components/Interpretations/common/Interpretation/Interpretation.js

@@ -0,0 +1,87 @@
+import i18n from '@dhis2/d2-i18n';
+import { Button, SharingDialog, IconReply16, IconShare16, IconThumbUp16, IconEdit16 } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { Message, MessageStatsBar, MessageIconButton } from '../index.js';
+import { InterpretationDeleteButton } from './InterpretationDeleteButton.js';
+import { InterpretationUpdateForm } from './InterpretationUpdateForm.js';
+import { useLike } from './useLike.js';
+export const Interpretation = _ref => {
+  let {
+    interpretation,
+    currentUser,
+    onClick,
+    onUpdated,
+    onDeleted,
+    disabled,
+    onReplyIconClick
+  } = _ref;
+  const [isUpdateMode, setIsUpdateMode] = useState(false);
+  const [showSharingDialog, setShowSharingDialog] = useState(false);
+  const {
+    toggleLike,
+    isLikedByCurrentUser,
+    toggleLikeInProgress
+  } = useLike({
+    interpretation,
+    currentUser,
+    onComplete: onUpdated
+  });
+  const shouldShowButton = !!onClick && !disabled;
+  return isUpdateMode ? /*#__PURE__*/React.createElement(InterpretationUpdateForm, {
+    close: () => setIsUpdateMode(false),
+    id: interpretation.id,
+    showSharingLink: interpretation.access.manage,
+    onComplete: onUpdated,
+    text: interpretation.text,
+    currentUser: currentUser
+  }) : /*#__PURE__*/React.createElement(Message, {
+    text: interpretation.text,
+    created: interpretation.created,
+    username: interpretation.user.displayName
+  }, !disabled && /*#__PURE__*/React.createElement(MessageStatsBar, null, /*#__PURE__*/React.createElement(MessageIconButton, {
+    tooltipContent: isLikedByCurrentUser ? i18n.t('Unlike') : i18n.t('Like'),
+    iconComponent: IconThumbUp16,
+    onClick: toggleLike,
+    selected: isLikedByCurrentUser,
+    count: interpretation.likes,
+    disabled: toggleLikeInProgress
+  }), /*#__PURE__*/React.createElement(MessageIconButton, {
+    tooltipContent: i18n.t('Reply'),
+    iconComponent: IconReply16,
+    onClick: () => onReplyIconClick(interpretation.id),
+    count: interpretation.comments.length
+  }), interpretation.access.manage && /*#__PURE__*/React.createElement(MessageIconButton, {
+    iconComponent: IconShare16,
+    tooltipContent: i18n.t('Share'),
+    onClick: () => setShowSharingDialog(true)
+  }), showSharingDialog && /*#__PURE__*/React.createElement(SharingDialog, {
+    open: true,
+    type: 'interpretation',
+    id: interpretation.id,
+    onClose: () => setShowSharingDialog(false)
+  }), interpretation.access.update && /*#__PURE__*/React.createElement(MessageIconButton, {
+    iconComponent: IconEdit16,
+    tooltipContent: i18n.t('Edit'),
+    onClick: () => setIsUpdateMode(true)
+  }), interpretation.access.delete && /*#__PURE__*/React.createElement(InterpretationDeleteButton, {
+    id: interpretation.id,
+    onComplete: onDeleted
+  })), shouldShowButton && /*#__PURE__*/React.createElement(Button, {
+    secondary: true,
+    small: true,
+    onClick: (_, event) => {
+      event.stopPropagation();
+      onClick(interpretation.id);
+    }
+  }, i18n.t('See interpretation')));
+};
+Interpretation.propTypes = {
+  currentUser: PropTypes.object.isRequired,
+  interpretation: PropTypes.object.isRequired,
+  onDeleted: PropTypes.func.isRequired,
+  onReplyIconClick: PropTypes.func.isRequired,
+  onUpdated: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func
+};

package/build/es/components/Interpretations/common/Interpretation/InterpretationDeleteButton.js

@@ -0,0 +1,43 @@
+import { useDataMutation } from '@dhis2/app-runtime';
+import i18n from '@dhis2/d2-i18n';
+import { IconDelete16 } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { MessageIconButton } from '../index.js';
+const mutation = {
+  resource: 'interpretations',
+  id: _ref => {
+    let {
+      id
+    } = _ref;
+    return id;
+  },
+  type: 'delete'
+};
+
+const InterpretationDeleteButton = _ref2 => {
+  let {
+    id,
+    onComplete
+  } = _ref2;
+  const [remove, {
+    loading
+  }] = useDataMutation(mutation, {
+    onComplete,
+    variables: {
+      id
+    }
+  });
+  return /*#__PURE__*/React.createElement(MessageIconButton, {
+    tooltipContent: i18n.t('Delete'),
+    iconComponent: IconDelete16,
+    onClick: remove,
+    disabled: loading
+  });
+};
+
+InterpretationDeleteButton.propTypes = {
+  id: PropTypes.string.isRequired,
+  onComplete: PropTypes.func.isRequired
+};
+export { InterpretationDeleteButton };

package/build/es/components/Interpretations/common/Interpretation/InterpretationSharingLink.js

@@ -0,0 +1,33 @@
+import _JSXStyle from "styled-jsx/style";
+import i18n from '@dhis2/d2-i18n';
+import { SharingDialog, colors, spacers } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+
+const InterpretationSharingLink = _ref => {
+  let {
+    type,
+    id
+  } = _ref;
+  const [showSharingDialog, setShowSharingDialog] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3990725326", [spacers.dp4, spacers.dp8, colors.grey800]]]) + " " + "container"
+  }, /*#__PURE__*/React.createElement("span", {
+    onClick: () => setShowSharingDialog(true),
+    className: _JSXStyle.dynamic([["3990725326", [spacers.dp4, spacers.dp8, colors.grey800]]]) + " " + "link"
+  }, i18n.t('Manage sharing'))), showSharingDialog && /*#__PURE__*/React.createElement(SharingDialog, {
+    open: true,
+    type: type,
+    id: id,
+    onClose: () => setShowSharingDialog(false)
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3990725326",
+    dynamic: [spacers.dp4, spacers.dp8, colors.grey800]
+  }, [".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;gap:".concat(spacers.dp4, ";margin-top:").concat(spacers.dp8, ";font-size:13px;color:").concat(colors.grey800, ";cursor:pointer;}"), ".link.__jsx-style-dynamic-selector{-webkit-text-decoration:underline;text-decoration:underline;}"]));
+};
+
+InterpretationSharingLink.propTypes = {
+  id: PropTypes.string,
+  type: PropTypes.string
+};
+export { InterpretationSharingLink };

package/build/es/components/Interpretations/common/Interpretation/InterpretationUpdateForm.js

@@ -0,0 +1,85 @@
+import _JSXStyle from "styled-jsx/style";
+import { useDataMutation } from '@dhis2/app-runtime';
+import i18n from '@dhis2/d2-i18n';
+import { Button, spacers, colors } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { MessageEditorContainer, RichTextEditor, MessageButtonStrip, InterpretationSharingLink } from '../index.js';
+const mutation = {
+  resource: 'interpretations',
+  type: 'update',
+  partial: false,
+  id: _ref => {
+    let {
+      id
+    } = _ref;
+    return id;
+  },
+  data: _ref2 => {
+    let {
+      interpretationText
+    } = _ref2;
+    return interpretationText;
+  }
+};
+export const InterpretationUpdateForm = _ref3 => {
+  let {
+    close,
+    currentUser,
+    id,
+    onComplete,
+    showSharingLink,
+    text
+  } = _ref3;
+  const [interpretationText, setInterpretationText] = useState(text || '');
+  const [update, {
+    loading,
+    error
+  }] = useDataMutation(mutation, {
+    onComplete: () => {
+      onComplete();
+      close();
+    },
+    variables: {
+      id
+    }
+  });
+  const errorText = error ? error.message || i18n.t('Could not update interpretation') : '';
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2690082310", [spacers.dp8, spacers.dp8, colors.grey100]]]) + " " + "message"
+  }, /*#__PURE__*/React.createElement(MessageEditorContainer, {
+    currentUser: currentUser
+  }, /*#__PURE__*/React.createElement(RichTextEditor, {
+    inputPlaceholder: i18n.t('Enter interpretation text'),
+    onChange: setInterpretationText,
+    value: interpretationText,
+    disabled: loading,
+    errorText: errorText
+  }), showSharingLink && /*#__PURE__*/React.createElement(InterpretationSharingLink, {
+    id: id,
+    type: "interpretation"
+  }), /*#__PURE__*/React.createElement(MessageButtonStrip, null, /*#__PURE__*/React.createElement(Button, {
+    loading: loading,
+    primary: true,
+    small: true,
+    onClick: () => update({
+      interpretationText
+    })
+  }, i18n.t('Update')), /*#__PURE__*/React.createElement(Button, {
+    disabled: loading,
+    secondary: true,
+    small: true,
+    onClick: close
+  }, i18n.t('Cancel')))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2690082310",
+    dynamic: [spacers.dp8, spacers.dp8, colors.grey100]
+  }, [".message.__jsx-style-dynamic-selector{padding:0 ".concat(spacers.dp8, " ").concat(spacers.dp8, ";background-color:").concat(colors.grey100, ";border-radius:5px;}")]));
+};
+InterpretationUpdateForm.propTypes = {
+  close: PropTypes.func.isRequired,
+  currentUser: PropTypes.object.isRequired,
+  id: PropTypes.string.isRequired,
+  onComplete: PropTypes.func.isRequired,
+  showSharingLink: PropTypes.bool,
+  text: PropTypes.string
+};

package/build/es/components/Interpretations/common/Interpretation/index.js

@@ -0,0 +1,2 @@
+export { Interpretation } from './Interpretation.js';
+export { InterpretationSharingLink } from './InterpretationSharingLink.js';

package/build/es/components/Interpretations/common/Interpretation/useLike.js

@@ -0,0 +1,45 @@
+import { useDataMutation } from '@dhis2/app-runtime';
+import { useEffect, useRef, useState } from 'react';
+
+const useLike = _ref => {
+  let {
+    interpretation,
+    currentUser,
+    onComplete
+  } = _ref;
+  const resource = "interpretations/".concat(interpretation.id, "/like");
+  const likeMutationRef = useRef({
+    resource,
+    type: 'create'
+  });
+  const unlikeMutationRef = useRef({
+    resource,
+    type: 'delete'
+  });
+  const [like, {
+    loading: likeLoading
+  }] = useDataMutation(likeMutationRef.current, {
+    onComplete
+  });
+  const [unlike, {
+    loading: unlikeLoading
+  }] = useDataMutation(unlikeMutationRef.current, {
+    onComplete
+  });
+  const [isLikedByCurrentUser, setIsLikedByCurrentUser] = useState(false);
+
+  const toggleLike = () => {
+    isLikedByCurrentUser ? unlike() : like();
+  };
+
+  useEffect(() => {
+    setIsLikedByCurrentUser(interpretation.likedBy.some(likedBy => likedBy.id === currentUser.id));
+  }, [currentUser, interpretation]);
+  return {
+    isLikedByCurrentUser,
+    toggleLike,
+    toggleLikeInProgress: likeLoading || unlikeLoading
+  };
+};
+
+export { useLike };

package/build/es/components/Interpretations/common/Message/Message.js

@@ -0,0 +1,41 @@
+import _JSXStyle from "styled-jsx/style";
+import { Parser as RichTextParser } from '@dhis2/d2-ui-rich-text';
+import { UserAvatar, spacers, colors } from '@dhis2/ui';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const Message = _ref => {
+  let {
+    children,
+    text,
+    created,
+    username
+  } = _ref;
+  return /*#__PURE__*/React.createElement("li", {
+    className: _JSXStyle.dynamic([["2436588813", [spacers.dp8, colors.grey100, spacers.dp8, colors.grey900, colors.grey600, colors.grey900, spacers.dp8]]]) + " " + "container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2436588813", [spacers.dp8, colors.grey100, spacers.dp8, colors.grey900, colors.grey600, colors.grey900, spacers.dp8]]]) + " " + "header"
+  }, /*#__PURE__*/React.createElement(UserAvatar, {
+    name: username,
+    extrasmall: true
+  }), username, /*#__PURE__*/React.createElement("time", {
+    dateTime: created,
+    className: _JSXStyle.dynamic([["2436588813", [spacers.dp8, colors.grey100, spacers.dp8, colors.grey900, colors.grey600, colors.grey900, spacers.dp8]]])
+  }, moment(created).format('lll'))), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2436588813", [spacers.dp8, colors.grey100, spacers.dp8, colors.grey900, colors.grey600, colors.grey900, spacers.dp8]]]) + " " + "content"
+  }, /*#__PURE__*/React.createElement(RichTextParser, null, text)), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2436588813", [spacers.dp8, colors.grey100, spacers.dp8, colors.grey900, colors.grey600, colors.grey900, spacers.dp8]]]) + " " + "footer"
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2436588813",
+    dynamic: [spacers.dp8, colors.grey100, spacers.dp8, colors.grey900, colors.grey600, colors.grey900, spacers.dp8]
+  }, [".container.__jsx-style-dynamic-selector{padding:".concat(spacers.dp8, ";background-color:").concat(colors.grey100, ";border-radius:5px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:").concat(spacers.dp8, ";}"), ".header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:6px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:13px;line-height:16px;color:".concat(colors.grey900, ";}"), ".header.__jsx-style-dynamic-selector time.__jsx-style-dynamic-selector{font-size:12px;color:".concat(colors.grey600, ";}"), ".content.__jsx-style-dynamic-selector{font-size:14px;line-height:19px;color:".concat(colors.grey900, ";}"), ".content.__jsx-style-dynamic-selector p:first-child{margin:0;}", ".footer.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:".concat(spacers.dp8, ";}")]));
+};
+
+Message.propTypes = {
+  children: PropTypes.node.isRequired,
+  created: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  username: PropTypes.string.isRequired
+};
+export { Message };

package/build/es/components/Interpretations/common/Message/MessageButtonStrip.js

@@ -0,0 +1,21 @@
+import _JSXStyle from "styled-jsx/style";
+import { spacers } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const MessageButtonStrip = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1819118406", [spacers.dp8, spacers.dp8]]]) + " " + "container"
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1819118406",
+    dynamic: [spacers.dp8, spacers.dp8]
+  }, [".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(spacers.dp8, ";margin-top:").concat(spacers.dp8, ";}")]));
+};
+
+MessageButtonStrip.propTypes = {
+  children: PropTypes.node.isRequired
+};
+export { MessageButtonStrip };

package/build/es/components/Interpretations/common/Message/MessageEditorContainer.js

@@ -0,0 +1,30 @@
+import _JSXStyle from "styled-jsx/style";
+import { UserAvatar, spacers } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const MessageEditorContainer = _ref => {
+  let {
+    children,
+    currentUser
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3807884305", [spacers.dp8, spacers.dp12]]]) + " " + "container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3807884305", [spacers.dp8, spacers.dp12]]]) + " " + "avatar"
+  }, /*#__PURE__*/React.createElement(UserAvatar, {
+    name: currentUser.name,
+    medium: true
+  })), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3807884305", [spacers.dp8, spacers.dp12]]]) + " " + "editor"
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3807884305",
+    dynamic: [spacers.dp8, spacers.dp12]
+  }, [".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(spacers.dp8, ";margin-top:").concat(spacers.dp12, ";}"), ".avatar.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}", ".editor.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}"]));
+};
+
+MessageEditorContainer.propTypes = {
+  currentUser: PropTypes.object.isRequired,
+  children: PropTypes.node
+};
+export { MessageEditorContainer };

package/build/es/components/Interpretations/common/Message/MessageIconButton.js

@@ -0,0 +1,54 @@
+import _JSXStyle from "styled-jsx/style";
+import { Tooltip, colors, spacers } from '@dhis2/ui';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const MessageIconButton = _ref => {
+  let {
+    tooltipContent,
+    disabled,
+    onClick,
+    selected,
+    count,
+    iconComponent: Icon
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    closeDelay: 200,
+    content: tooltipContent
+  }, _ref2 => {
+    let {
+      ref,
+      onMouseOver,
+      onMouseOut
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("span", {
+      ref: ref,
+      onMouseOver: onMouseOver,
+      onMouseOut: onMouseOut,
+      className: _JSXStyle.dynamic([["3807261824", [spacers.dp4, colors.grey700, colors.teal600, colors.grey900, colors.teal800, colors.teal500, colors.teal700]]]) + " " + "wrapper"
+    }, /*#__PURE__*/React.createElement("button", {
+      onClick: event => {
+        event.stopPropagation();
+        onClick();
+      },
+      disabled: disabled,
+      className: _JSXStyle.dynamic([["3807261824", [spacers.dp4, colors.grey700, colors.teal600, colors.grey900, colors.teal800, colors.teal500, colors.teal700]]]) + " " + (cx('button', {
+        selected
+      }) || "")
+    }, count && count, /*#__PURE__*/React.createElement(Icon, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: "3807261824",
+      dynamic: [spacers.dp4, colors.grey700, colors.teal600, colors.grey900, colors.teal800, colors.teal500, colors.teal700]
+    }, [".wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".button.__jsx-style-dynamic-selector{all:unset;cursor:pointer;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:".concat(spacers.dp4, ";-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:12px;line-height:14px;color:").concat(colors.grey700, ";}"), ".button.selected.__jsx-style-dynamic-selector{color:".concat(colors.teal600, ";font-weight:500;}"), ".button.__jsx-style-dynamic-selector:hover{color:".concat(colors.grey900, ";}"), ".button.selected.__jsx-style-dynamic-selector:hover{color:".concat(colors.teal800, ";}"), ".button.selected.__jsx-style-dynamic-selector svg{color:".concat(colors.teal500, ";}"), ".button.selected.__jsx-style-dynamic-selector:hover svg{color:".concat(colors.teal700, ";}")]));
+  });
+};
+
+MessageIconButton.propTypes = {
+  iconComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,
+  tooltipContent: PropTypes.string.isRequired,
+  count: PropTypes.number,
+  disabled: PropTypes.bool,
+  selected: PropTypes.bool,
+  onClick: PropTypes.func
+};
+export { MessageIconButton };