@dhis2/analytics 23.11.1 → 23.12.2

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
+};

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

@@ -0,0 +1,47 @@
+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 '../common/index.js';
+const mutation = {
+  resource: 'interpretations',
+  id: _ref => {
+    let {
+      interpretationId,
+      commentId
+    } = _ref;
+    return "".concat(interpretationId, "/comments/").concat(commentId);
+  },
+  type: 'delete'
+};
+
+const CommentDeleteButton = _ref2 => {
+  let {
+    commentId,
+    interpretationId,
+    onComplete
+  } = _ref2;
+  const [remove, {
+    loading
+  }] = useDataMutation(mutation, {
+    onComplete,
+    variables: {
+      commentId,
+      interpretationId
+    }
+  });
+  return /*#__PURE__*/React.createElement(MessageIconButton, {
+    tooltipContent: i18n.t('Delete'),
+    iconComponent: IconDelete16,
+    onClick: remove,
+    disabled: loading
+  });
+};
+
+CommentDeleteButton.propTypes = {
+  commentId: PropTypes.string.isRequired,
+  interpretationId: PropTypes.string.isRequired,
+  onComplete: PropTypes.func.isRequired
+};
+export { CommentDeleteButton };

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

@@ -0,0 +1,73 @@
+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, useRef } from 'react';
+import { MessageEditorContainer, RichTextEditor, MessageButtonStrip } from '../common/index.js';
+export const CommentUpdateForm = _ref => {
+  let {
+    interpretationId,
+    commentId,
+    currentUser,
+    text,
+    close,
+    onComplete
+  } = _ref;
+  const [commentText, setCommentText] = useState(text || '');
+  const updateMutationRef = useRef({
+    resource: "interpretations/".concat(interpretationId, "/comments/").concat(commentId),
+    type: 'update',
+    partial: false,
+    data: _ref2 => {
+      let {
+        commentText
+      } = _ref2;
+      return commentText;
+    }
+  });
+  const [update, {
+    loading,
+    error
+  }] = useDataMutation(updateMutationRef.current, {
+    onComplete: () => {
+      onComplete();
+      close();
+    }
+  });
+  const errorText = error ? error.message || i18n.t('Could not update comment') : '';
+  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 comment text'),
+    onChange: setCommentText,
+    value: commentText,
+    disabled: loading,
+    errorText: errorText
+  }), /*#__PURE__*/React.createElement(MessageButtonStrip, null, /*#__PURE__*/React.createElement(Button, {
+    loading: loading,
+    primary: true,
+    small: true,
+    onClick: () => update({
+      commentText
+    })
+  }, 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;}")]));
+};
+CommentUpdateForm.propTypes = {
+  close: PropTypes.func.isRequired,
+  commentId: PropTypes.string.isRequired,
+  currentUser: PropTypes.object.isRequired,
+  interpretationId: PropTypes.string.isRequired,
+  onComplete: PropTypes.func.isRequired,
+  text: PropTypes.string
+};

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

@@ -0,0 +1,165 @@
+import _JSXStyle from "styled-jsx/style";
+import { useDataQuery } from '@dhis2/app-runtime';
+import i18n from '@dhis2/d2-i18n';
+import { Modal, ModalActions, ModalContent, NoticeBox, Button, spacers, colors, Layer, CenteredContent, CircularLoader } from '@dhis2/ui';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import { InterpretationThread } from './InterpretationThread.js';
+import { useModalContentWidth } from './useModalContentWidth.js';
+const modalCSS = {
+  styles: /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "422732072"
+  }, ["aside.jsx-422732072{max-width:calc(100vw - 128px) !important;max-height:calc(100vh - 128px) !important;width:auto !important;height:auto !important;overflow-y:hidden;}", "aside.hidden.jsx-422732072{display:none;}", "aside.jsx-422732072>div>div{max-height:none;}"]),
+  className: "jsx-422732072"
+};
+
+function getModalContentCSS(width) {
+  return {
+    styles: /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: "1689110567",
+      dynamic: [width]
+    }, ["div.__jsx-style-dynamic-selector{width:".concat(width, "px;}")]),
+    className: _JSXStyle.dynamic([["1689110567", [width]]])
+  };
+}
+
+const query = {
+  interpretation: {
+    resource: 'interpretations',
+    id: _ref => {
+      let {
+        id
+      } = _ref;
+      return id;
+    },
+    params: {
+      fields: ['access', 'id', 'text', 'created', 'user[id,displayName]', 'likes', 'likedBy', 'comments[access,id,text,created,createdBy[id,displayName]]']
+    }
+  }
+};
+
+const InterpretationModal = _ref2 => {
+  let {
+    currentUser,
+    isVisualizationLoading,
+    visualization,
+    onResponsesReceived,
+    downloadMenuComponent,
+    onClose,
+    onInterpretationUpdate,
+    interpretationId,
+    initialFocus,
+    pluginComponent: VisualizationPlugin
+  } = _ref2;
+  const modalContentWidth = useModalContentWidth();
+  const modalContentCSS = getModalContentCSS(modalContentWidth);
+  const [isDirty, setIsDirty] = useState(false);
+  const {
+    data,
+    error,
+    loading,
+    fetching,
+    refetch
+  } = useDataQuery(query, {
+    lazy: true
+  });
+  const interpretation = data === null || data === void 0 ? void 0 : data.interpretation;
+  const shouldRenderModalContent = !error && interpretation;
+  const shouldCssHideModal = loading || isVisualizationLoading;
+
+  const handleClose = () => {
+    if (isDirty) {
+      onInterpretationUpdate();
+      setIsDirty(false);
+    }
+
+    onClose();
+  };
+
+  const onThreadUpdated = affectsInterpretation => {
+    if (affectsInterpretation) {
+      setIsDirty(true);
+    }
+
+    refetch({
+      id: interpretationId
+    });
+  };
+
+  const onInterpretationDeleted = () => {
+    setIsDirty(false);
+    onInterpretationUpdate();
+    onClose();
+  };
+
+  useEffect(() => {
+    if (interpretationId) {
+      refetch({
+        id: interpretationId
+      });
+    }
+  }, [interpretationId]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, shouldCssHideModal && /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement(CircularLoader, null))), /*#__PURE__*/React.createElement(Modal, {
+    fluid: true,
+    onClose: handleClose,
+    className: cx(modalCSS.className, {
+      hidden: shouldCssHideModal
+    })
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: _JSXStyle.dynamic([["3636222142", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "title"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3636222142", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "ellipsis"
+  }, i18n.t('Viewing interpretation: {{visualisationName}}', {
+    visualisationName: visualization.displayName,
+    nsSeparator: '^^'
+  }))), /*#__PURE__*/React.createElement(ModalContent, {
+    className: modalContentCSS.className
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3636222142", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "container"
+  }, error && /*#__PURE__*/React.createElement(NoticeBox, {
+    error: true,
+    title: i18n.t('Could not load interpretation')
+  }, error.message || i18n.t('The interpretation couldn’t be displayed. Try again or contact your system administrator.')), shouldRenderModalContent && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3636222142", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3636222142", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "visualisation-wrap"
+  }, /*#__PURE__*/React.createElement(VisualizationPlugin, {
+    filters: {
+      relativePeriodDate: interpretation.created
+    },
+    visualization: visualization,
+    onResponsesReceived: onResponsesReceived,
+    className: _JSXStyle.dynamic([["3636222142", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]])
+  })), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3636222142", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "thread-wrap"
+  }, /*#__PURE__*/React.createElement(InterpretationThread, {
+    currentUser: currentUser,
+    fetching: fetching,
+    interpretation: interpretation,
+    onInterpretationDeleted: onInterpretationDeleted,
+    onThreadUpdated: onThreadUpdated,
+    initialFocus: initialFocus,
+    downloadMenuComponent: downloadMenuComponent
+  }))))), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(Button, {
+    disabled: fetching,
+    onClick: handleClose
+  }, i18n.t('Hide interpretation'))), modalCSS.styles, modalContentCSS.styles, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3636222142",
+    dynamic: [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]
+  }, [".title.__jsx-style-dynamic-selector{color:".concat(colors.grey900, ";margin:0px;padding:").concat(spacers.dp24, " 0 ").concat(spacers.dp4, ";}"), ".ellipsis.__jsx-style-dynamic-selector{display:inline-block;font-size:20px;font-weight:500;line-height:24px;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis;}", ".container.__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;}", ".row.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:16px;}", ".visualisation-wrap.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".thread-wrap.__jsx-style-dynamic-selector{padding-right:".concat(spacers.dp4, ";-webkit-flex-basis:300px;-ms-flex-preferred-size:300px;flex-basis:300px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;overflow-y:auto;}")])));
+};
+
+InterpretationModal.propTypes = {
+  currentUser: PropTypes.object.isRequired,
+  downloadMenuComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,
+  interpretationId: PropTypes.string.isRequired,
+  isVisualizationLoading: PropTypes.bool.isRequired,
+  pluginComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,
+  visualization: PropTypes.object.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onResponsesReceived: PropTypes.func.isRequired,
+  initialFocus: PropTypes.bool,
+  onInterpretationUpdate: PropTypes.func
+};
+export { InterpretationModal };

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

@@ -0,0 +1,79 @@
+import _JSXStyle from "styled-jsx/style";
+import { IconClock16, colors } from '@dhis2/ui';
+import cx from 'classnames';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React, { useRef, useEffect } from 'react';
+import { Interpretation } from '../common/index.js';
+import { Comment } from './Comment.js';
+import { CommentAddForm } from './CommentAddForm.js';
+
+const InterpretationThread = _ref => {
+  let {
+    currentUser,
+    fetching,
+    interpretation,
+    onInterpretationDeleted,
+    initialFocus,
+    onThreadUpdated,
+    downloadMenuComponent: DownloadMenu
+  } = _ref;
+  const focusRef = useRef();
+  useEffect(() => {
+    if (initialFocus && focusRef.current) {
+      window.requestAnimationFrame(() => {
+        focusRef.current.focus();
+      });
+    }
+  }, [initialFocus, focusRef.current]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "jsx-2924001448" + " " + (cx('container', {
+      fetching
+    }) || "")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "jsx-2924001448" + " " + 'scrollbox'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "jsx-2924001448" + " " + 'title'
+  }, /*#__PURE__*/React.createElement(IconClock16, {
+    color: colors.grey700
+  }), moment(interpretation.created).format('LLL')), /*#__PURE__*/React.createElement(DownloadMenu, {
+    relativePeriodDate: interpretation.created,
+    className: "jsx-2924001448"
+  }), /*#__PURE__*/React.createElement(Interpretation, {
+    currentUser: currentUser,
+    interpretation: interpretation,
+    onReplyIconClick: () => {
+      var _focusRef$current;
+
+      return (_focusRef$current = focusRef.current) === null || _focusRef$current === void 0 ? void 0 : _focusRef$current.focus();
+    },
+    onUpdated: () => onThreadUpdated(true),
+    onDeleted: onInterpretationDeleted
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "jsx-2924001448" + " " + 'comments'
+  }, interpretation.comments.map(comment => /*#__PURE__*/React.createElement(Comment, {
+    key: comment.id,
+    comment: comment,
+    currentUser: currentUser,
+    interpretationId: interpretation.id,
+    onThreadUpdated: onThreadUpdated
+  }))), /*#__PURE__*/React.createElement(CommentAddForm, {
+    currentUser: currentUser,
+    interpretationId: interpretation.id,
+    onSave: () => onThreadUpdated(true),
+    focusRef: focusRef
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2924001448"
+  }, [".container.jsx-2924001448{position:relative;overflow:hidden;max-height:calc(100vh - 285px);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".container.fetching.jsx-2924001448::before{content:'';position:absolute;inset:0px;background-color:rgba(255,255,255,0.8);}", ".container.fetching.jsx-2924001448::after{content:'';position:absolute;top:calc(50% - 12px);left:calc(50% - 12px);width:24px;height:24px;border-width:4px;border-style:solid;border-color:rgba(110,122,138,0.15) rgba(110,122,138,0.15) rgb(20,124,215);border-image:initial;border-radius:50%;-webkit-animation:1s linear 0s infinite normal none running rotation-jsx-2924001448;animation:1s linear 0s infinite normal none running rotation-jsx-2924001448;}", ".scrollbox.jsx-2924001448{overflow-y:auto;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;}", ".title.jsx-2924001448{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;gap:var(--spacers-dp8);color:var(--colors-grey900);font-size:14px;line-height:18px;}", ".comments.jsx-2924001448{padding-left:16px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-top:var(--spacers-dp4);gap:var(--spacers-dp4);}", "@-webkit-keyframes rotation-jsx-2924001448{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes rotation-jsx-2924001448{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}"]));
+};
+
+InterpretationThread.propTypes = {
+  currentUser: PropTypes.object.isRequired,
+  downloadMenuComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,
+  fetching: PropTypes.bool.isRequired,
+  interpretation: PropTypes.object.isRequired,
+  onInterpretationDeleted: PropTypes.func.isRequired,
+  initialFocus: PropTypes.bool,
+  onThreadUpdated: PropTypes.func
+};
+export { InterpretationThread };

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

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

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

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+import { useDebounce } from '../../../modules/utils.js';
+const MODAL_SIDE_PADDING = 2 * 24;
+const MODAL_SIDE_MARGINS = 2 * 128;
+
+const computeModalContentWidth = windowWidth => {
+  return windowWidth - MODAL_SIDE_MARGINS - MODAL_SIDE_PADDING;
+};
+
+export const useModalContentWidth = () => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const debouncedWindowWidth = useDebounce(windowWidth, 150);
+  const [modalContentWidth, setModalContentWidth] = useState(computeModalContentWidth(windowWidth));
+  useEffect(() => {
+    const onResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener('resize', onResize);
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, []);
+  useEffect(() => {
+    setModalContentWidth(computeModalContentWidth(debouncedWindowWidth));
+  }, [debouncedWindowWidth]);
+  return modalContentWidth;
+};

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

@@ -0,0 +1,71 @@
+import { useDataMutation } from '@dhis2/app-runtime';
+import i18n from '@dhis2/d2-i18n';
+import { Button, Input } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React, { useRef, useState } from 'react';
+import { RichTextEditor, MessageEditorContainer, MessageButtonStrip } from '../common/index.js';
+export const InterpretationForm = _ref => {
+  let {
+    type,
+    id,
+    currentUser,
+    disabled,
+    onSave
+  } = _ref;
+  const [showRichTextEditor, setShowRichTextEditor] = useState(false);
+  const [interpretationText, setInterpretationText] = useState('');
+  const saveMutationRef = useRef({
+    resource: "interpretations/".concat(type, "/").concat(id),
+    type: 'create',
+    data: _ref2 => {
+      let {
+        interpretationText
+      } = _ref2;
+      return interpretationText;
+    }
+  });
+  const [save, {
+    loading: saveMutationInProgress
+  }] = useDataMutation(saveMutationRef.current, {
+    onComplete: () => {
+      setShowRichTextEditor(false);
+      setInterpretationText('');
+      onSave();
+    }
+  });
+  const inputPlaceholder = i18n.t('Write an interpretation');
+  return /*#__PURE__*/React.createElement(MessageEditorContainer, {
+    currentUser: currentUser
+  }, showRichTextEditor ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(RichTextEditor, {
+    disabled: saveMutationInProgress,
+    inputPlaceholder: inputPlaceholder,
+    onChange: setInterpretationText,
+    value: interpretationText
+  }), /*#__PURE__*/React.createElement(MessageButtonStrip, null, /*#__PURE__*/React.createElement(Button, {
+    primary: true,
+    small: true,
+    disabled: saveMutationInProgress,
+    onClick: () => save({
+      interpretationText
+    })
+  }, i18n.t('Post interpretation')), /*#__PURE__*/React.createElement(Button, {
+    secondary: true,
+    small: true,
+    disabled: saveMutationInProgress,
+    onClick: () => {
+      setInterpretationText('');
+      setShowRichTextEditor(false);
+    }
+  }, i18n.t('Cancel')))) : /*#__PURE__*/React.createElement(Input, {
+    onFocus: () => setShowRichTextEditor(true),
+    placeholder: inputPlaceholder,
+    disabled: disabled
+  }));
+};
+InterpretationForm.propTypes = {
+  currentUser: PropTypes.object,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  type: PropTypes.string,
+  onSave: PropTypes.func
+};

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
+};