@dhis2/analytics 23.11.1 → 23.12.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [23.12.0](https://github.com/dhis2/analytics/compare/v23.11.1...v23.12.0) (2022-06-15)
+
+
+### Features
+
+* implement new interpretations components ([#1250](https://github.com/dhis2/analytics/issues/1250)) ([76b223b](https://github.com/dhis2/analytics/commit/76b223b9a3514e0e110cd090bc3ede42056634e8))
+
 ## [23.11.1](https://github.com/dhis2/analytics/compare/v23.11.0...v23.11.1) (2022-06-09)
 
 

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

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Comment = 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 _index = require("../common/index.js");
+
+var _CommentDeleteButton = require("./CommentDeleteButton.js");
+
+var _CommentUpdateForm = require("./CommentUpdateForm.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 Comment = _ref => {
+  let {
+    comment,
+    currentUser,
+    interpretationId,
+    onThreadUpdated
+  } = _ref;
+  const [isUpdateMode, setIsUpdateMode] = (0, _react.useState)(false);
+  return isUpdateMode ? /*#__PURE__*/_react.default.createElement(_CommentUpdateForm.CommentUpdateForm, {
+    close: () => setIsUpdateMode(false),
+    commentId: comment.id,
+    interpretationId: interpretationId,
+    onComplete: () => onThreadUpdated(false),
+    text: comment.text,
+    currentUser: currentUser
+  }) : /*#__PURE__*/_react.default.createElement(_index.Message, {
+    text: comment.text,
+    created: comment.created,
+    username: comment.createdBy.displayName
+  }, /*#__PURE__*/_react.default.createElement(_index.MessageStatsBar, null, comment.access.update && /*#__PURE__*/_react.default.createElement(_index.MessageIconButton, {
+    iconComponent: _ui.IconEdit16,
+    tooltipContent: _d2I18n.default.t('Edit'),
+    onClick: () => setIsUpdateMode(true)
+  }), comment.access.delete && /*#__PURE__*/_react.default.createElement(_CommentDeleteButton.CommentDeleteButton, {
+    commentId: comment.id,
+    interpretationId: interpretationId,
+    onComplete: () => onThreadUpdated(true)
+  })));
+};
+
+exports.Comment = Comment;
+Comment.propTypes = {
+  comment: _propTypes.default.object.isRequired,
+  currentUser: _propTypes.default.object.isRequired,
+  interpretationId: _propTypes.default.string.isRequired,
+  onThreadUpdated: _propTypes.default.func.isRequired
+};

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

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CommentAddForm = 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 _index = require("../common/index.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 CommentAddForm = _ref => {
+  let {
+    interpretationId,
+    currentUser,
+    onSave,
+    focusRef
+  } = _ref;
+  const [showRichTextEditor, setShowRichTextEditor] = (0, _react.useState)(false);
+  const [commentText, setCommentText] = (0, _react.useState)('');
+  const saveMutationRef = (0, _react.useRef)({
+    resource: "interpretations/".concat(interpretationId, "/comments"),
+    type: 'create',
+    data: _ref2 => {
+      let {
+        commentText
+      } = _ref2;
+      return commentText;
+    }
+  });
+  const [save, {
+    loading
+  }] = (0, _appRuntime.useDataMutation)(saveMutationRef.current, {
+    onComplete: () => {
+      setShowRichTextEditor(false);
+      setCommentText('');
+      onSave();
+    }
+  });
+
+  const inputPlaceholder = _d2I18n.default.t('Write a reply');
+
+  return /*#__PURE__*/_react.default.createElement(_index.MessageEditorContainer, {
+    currentUser: currentUser
+  }, showRichTextEditor ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.RichTextEditor, {
+    inputPlaceholder: inputPlaceholder,
+    onChange: setCommentText,
+    value: commentText,
+    ref: focusRef,
+    disabled: loading
+  }), /*#__PURE__*/_react.default.createElement(_index.MessageButtonStrip, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    primary: true,
+    small: true,
+    onClick: () => save({
+      commentText
+    }),
+    loading: loading
+  }, _d2I18n.default.t('Post reply')), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    secondary: true,
+    small: true,
+    disabled: loading,
+    onClick: () => {
+      setCommentText('');
+      setShowRichTextEditor(false);
+    }
+  }, _d2I18n.default.t('Cancel')))) : /*#__PURE__*/_react.default.createElement(_index.MessageInput, {
+    onFocus: () => setShowRichTextEditor(true),
+    placeholder: inputPlaceholder,
+    ref: focusRef
+  }));
+};
+
+exports.CommentAddForm = CommentAddForm;
+CommentAddForm.propTypes = {
+  currentUser: _propTypes.default.object.isRequired,
+  focusRef: _propTypes.default.object.isRequired,
+  interpretationId: _propTypes.default.string.isRequired,
+  onSave: _propTypes.default.func
+};

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

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CommentDeleteButton = 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"));
+
+var _index = require("../common/index.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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
+  }] = (0, _appRuntime.useDataMutation)(mutation, {
+    onComplete,
+    variables: {
+      commentId,
+      interpretationId
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_index.MessageIconButton, {
+    tooltipContent: _d2I18n.default.t('Delete'),
+    iconComponent: _ui.IconDelete16,
+    onClick: remove,
+    disabled: loading
+  });
+};
+
+exports.CommentDeleteButton = CommentDeleteButton;
+CommentDeleteButton.propTypes = {
+  commentId: _propTypes.default.string.isRequired,
+  interpretationId: _propTypes.default.string.isRequired,
+  onComplete: _propTypes.default.func.isRequired
+};

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

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CommentUpdateForm = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+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 _index = require("../common/index.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 CommentUpdateForm = _ref => {
+  let {
+    interpretationId,
+    commentId,
+    currentUser,
+    text,
+    close,
+    onComplete
+  } = _ref;
+  const [commentText, setCommentText] = (0, _react.useState)(text || '');
+  const updateMutationRef = (0, _react.useRef)({
+    resource: "interpretations/".concat(interpretationId, "/comments/").concat(commentId),
+    type: 'update',
+    partial: false,
+    data: _ref2 => {
+      let {
+        commentText
+      } = _ref2;
+      return commentText;
+    }
+  });
+  const [update, {
+    loading,
+    error
+  }] = (0, _appRuntime.useDataMutation)(updateMutationRef.current, {
+    onComplete: () => {
+      onComplete();
+      close();
+    }
+  });
+  const errorText = error ? error.message || _d2I18n.default.t('Could not update comment') : '';
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["2690082310", [_ui.spacers.dp8, _ui.spacers.dp8, _ui.colors.grey100]]]) + " " + "message"
+  }, /*#__PURE__*/_react.default.createElement(_index.MessageEditorContainer, {
+    currentUser: currentUser
+  }, /*#__PURE__*/_react.default.createElement(_index.RichTextEditor, {
+    inputPlaceholder: _d2I18n.default.t('Enter comment text'),
+    onChange: setCommentText,
+    value: commentText,
+    disabled: loading,
+    errorText: errorText
+  }), /*#__PURE__*/_react.default.createElement(_index.MessageButtonStrip, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    loading: loading,
+    primary: true,
+    small: true,
+    onClick: () => update({
+      commentText
+    })
+  }, _d2I18n.default.t('Update')), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    disabled: loading,
+    secondary: true,
+    small: true,
+    onClick: close
+  }, _d2I18n.default.t('Cancel')))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2690082310",
+    dynamic: [_ui.spacers.dp8, _ui.spacers.dp8, _ui.colors.grey100]
+  }, [".message.__jsx-style-dynamic-selector{padding:0 ".concat(_ui.spacers.dp8, " ").concat(_ui.spacers.dp8, ";background-color:").concat(_ui.colors.grey100, ";border-radius:5px;}")]));
+};
+
+exports.CommentUpdateForm = CommentUpdateForm;
+CommentUpdateForm.propTypes = {
+  close: _propTypes.default.func.isRequired,
+  commentId: _propTypes.default.string.isRequired,
+  currentUser: _propTypes.default.object.isRequired,
+  interpretationId: _propTypes.default.string.isRequired,
+  onComplete: _propTypes.default.func.isRequired,
+  text: _propTypes.default.string
+};

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

@@ -0,0 +1,187 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InterpretationModal = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _ui = require("@dhis2/ui");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _InterpretationThread = require("./InterpretationThread.js");
+
+var _useModalContentWidth = require("./useModalContentWidth.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 modalCSS = {
+  styles: /*#__PURE__*/_react.default.createElement(_style.default, {
+    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.default.createElement(_style.default, {
+      id: "1689110567",
+      dynamic: [width]
+    }, ["div.__jsx-style-dynamic-selector{width:".concat(width, "px;}")]),
+    className: _style.default.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 = (0, _useModalContentWidth.useModalContentWidth)();
+  const modalContentCSS = getModalContentCSS(modalContentWidth);
+  const [isDirty, setIsDirty] = (0, _react.useState)(false);
+  const {
+    data,
+    error,
+    loading,
+    fetching,
+    refetch
+  } = (0, _appRuntime.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();
+  };
+
+  (0, _react.useEffect)(() => {
+    if (interpretationId) {
+      refetch({
+        id: interpretationId
+      });
+    }
+  }, [interpretationId]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, shouldCssHideModal && /*#__PURE__*/_react.default.createElement(_ui.Layer, null, /*#__PURE__*/_react.default.createElement(_ui.CenteredContent, null, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, null))), /*#__PURE__*/_react.default.createElement(_ui.Modal, {
+    fluid: true,
+    onClose: handleClose,
+    className: (0, _classnames.default)(modalCSS.className, {
+      hidden: shouldCssHideModal
+    })
+  }, /*#__PURE__*/_react.default.createElement("h1", {
+    className: _style.default.dynamic([["3636222142", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "title"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.dynamic([["3636222142", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "ellipsis"
+  }, _d2I18n.default.t('Viewing interpretation: {{visualisationName}}', {
+    visualisationName: visualization.displayName,
+    nsSeparator: '^^'
+  }))), /*#__PURE__*/_react.default.createElement(_ui.ModalContent, {
+    className: modalContentCSS.className
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["3636222142", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "container"
+  }, error && /*#__PURE__*/_react.default.createElement(_ui.NoticeBox, {
+    error: true,
+    title: _d2I18n.default.t('Could not load interpretation')
+  }, error.message || _d2I18n.default.t('The interpretation couldn’t be displayed. Try again or contact your system administrator.')), shouldRenderModalContent && /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["3636222142", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["3636222142", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "visualisation-wrap"
+  }, /*#__PURE__*/_react.default.createElement(VisualizationPlugin, {
+    filters: {
+      relativePeriodDate: interpretation.created
+    },
+    visualization: visualization,
+    onResponsesReceived: onResponsesReceived,
+    className: _style.default.dynamic([["3636222142", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]])
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["3636222142", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "thread-wrap"
+  }, /*#__PURE__*/_react.default.createElement(_InterpretationThread.InterpretationThread, {
+    currentUser: currentUser,
+    fetching: fetching,
+    interpretation: interpretation,
+    onInterpretationDeleted: onInterpretationDeleted,
+    onThreadUpdated: onThreadUpdated,
+    initialFocus: initialFocus,
+    downloadMenuComponent: downloadMenuComponent
+  }))))), /*#__PURE__*/_react.default.createElement(_ui.ModalActions, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    disabled: fetching,
+    onClick: handleClose
+  }, _d2I18n.default.t('Hide interpretation'))), modalCSS.styles, modalContentCSS.styles, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3636222142",
+    dynamic: [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]
+  }, [".title.__jsx-style-dynamic-selector{color:".concat(_ui.colors.grey900, ";margin:0px;padding:").concat(_ui.spacers.dp24, " 0 ").concat(_ui.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(_ui.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;}")])));
+};
+
+exports.InterpretationModal = InterpretationModal;
+InterpretationModal.propTypes = {
+  currentUser: _propTypes.default.object.isRequired,
+  downloadMenuComponent: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]).isRequired,
+  interpretationId: _propTypes.default.string.isRequired,
+  isVisualizationLoading: _propTypes.default.bool.isRequired,
+  pluginComponent: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]).isRequired,
+  visualization: _propTypes.default.object.isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  onResponsesReceived: _propTypes.default.func.isRequired,
+  initialFocus: _propTypes.default.bool,
+  onInterpretationUpdate: _propTypes.default.func
+};

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

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InterpretationThread = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _ui = require("@dhis2/ui");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _index = require("../common/index.js");
+
+var _Comment = require("./Comment.js");
+
+var _CommentAddForm = require("./CommentAddForm.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 InterpretationThread = _ref => {
+  let {
+    currentUser,
+    fetching,
+    interpretation,
+    onInterpretationDeleted,
+    initialFocus,
+    onThreadUpdated,
+    downloadMenuComponent: DownloadMenu
+  } = _ref;
+  const focusRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    if (initialFocus && focusRef.current) {
+      window.requestAnimationFrame(() => {
+        focusRef.current.focus();
+      });
+    }
+  }, [initialFocus, focusRef.current]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-2924001448" + " " + ((0, _classnames.default)('container', {
+      fetching
+    }) || "")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-2924001448" + " " + 'scrollbox'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-2924001448" + " " + 'title'
+  }, /*#__PURE__*/_react.default.createElement(_ui.IconClock16, {
+    color: _ui.colors.grey700
+  }), (0, _moment.default)(interpretation.created).format('LLL')), /*#__PURE__*/_react.default.createElement(DownloadMenu, {
+    relativePeriodDate: interpretation.created,
+    className: "jsx-2924001448"
+  }), /*#__PURE__*/_react.default.createElement(_index.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.default.createElement("div", {
+    className: "jsx-2924001448" + " " + 'comments'
+  }, interpretation.comments.map(comment => /*#__PURE__*/_react.default.createElement(_Comment.Comment, {
+    key: comment.id,
+    comment: comment,
+    currentUser: currentUser,
+    interpretationId: interpretation.id,
+    onThreadUpdated: onThreadUpdated
+  }))), /*#__PURE__*/_react.default.createElement(_CommentAddForm.CommentAddForm, {
+    currentUser: currentUser,
+    interpretationId: interpretation.id,
+    onSave: () => onThreadUpdated(true),
+    focusRef: focusRef
+  })), /*#__PURE__*/_react.default.createElement(_style.default, {
+    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);}}"]));
+};
+
+exports.InterpretationThread = InterpretationThread;
+InterpretationThread.propTypes = {
+  currentUser: _propTypes.default.object.isRequired,
+  downloadMenuComponent: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]).isRequired,
+  fetching: _propTypes.default.bool.isRequired,
+  interpretation: _propTypes.default.object.isRequired,
+  onInterpretationDeleted: _propTypes.default.func.isRequired,
+  initialFocus: _propTypes.default.bool,
+  onThreadUpdated: _propTypes.default.func
+};

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

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

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useModalContentWidth = void 0;
+
+var _react = require("react");
+
+var _utils = require("../../../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;
+};
+
+const useModalContentWidth = () => {
+  const [windowWidth, setWindowWidth] = (0, _react.useState)(window.innerWidth);
+  const debouncedWindowWidth = (0, _utils.useDebounce)(windowWidth, 150);
+  const [modalContentWidth, setModalContentWidth] = (0, _react.useState)(computeModalContentWidth(windowWidth));
+  (0, _react.useEffect)(() => {
+    const onResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener('resize', onResize);
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    setModalContentWidth(computeModalContentWidth(debouncedWindowWidth));
+  }, [debouncedWindowWidth]);
+  return modalContentWidth;
+};
+
+exports.useModalContentWidth = useModalContentWidth;