@dhis2/analytics 28.1.2 → 29.0.0

package/build/es/__fixtures__/interpretationsMockData.js

@@ -0,0 +1,198 @@
+export const currentUser = {
+  id: 'currentuserid',
+  name: 'John Traore',
+  email: 'dummy@dhis2.org',
+  settings: {
+    keyDbLocale: 'en',
+    keyMessageSmsNotification: false,
+    keyTrackerDashboardLayout: '',
+    keyCurrentStyle: 'light_blue/light_blue.css',
+    keyStyle: 'light_blue/light_blue.css',
+    keyUiLocale: 'en',
+    keyAnalysisDisplayProperty: 'name',
+    keyMessageEmailNotification: false
+  },
+  authorities: ['F_VIEW_UNAPPROVED_DATA']
+};
+export const interpretations = [{
+  id: 'interpretation1',
+  text: 'This is the first interpretation',
+  created: '2025-09-04T07:47:12.477',
+  createdBy: {
+    id: 'currentuserid',
+    code: null,
+    name: 'John Traore',
+    displayName: 'John Traore',
+    username: 'admin'
+  },
+  comments: [{
+    id: 'commentid1'
+  }, {
+    id: 'commentid2'
+  }],
+  likes: 1,
+  access: {
+    manage: true,
+    write: true
+  },
+  likedBy: [{
+    id: 'currentuserid',
+    code: null,
+    name: 'John Traore',
+    displayName: 'John Traore',
+    username: 'admin'
+  }]
+}, {
+  id: 'interpretation2',
+  text: 'Analysis shows interesting trends in the data distribution across different regions',
+  created: '2025-09-03T14:22:35.891',
+  createdBy: {
+    id: 'otheruserid1',
+    code: null,
+    name: 'Sarah Johnson',
+    displayName: 'Sarah Johnson',
+    username: 'sjohnson'
+  },
+  comments: [{
+    id: 'commentid3'
+  }],
+  likes: 3,
+  access: {
+    manage: false,
+    write: false
+  },
+  likedBy: [{
+    id: 'currentuserid',
+    code: null,
+    name: 'John Traore',
+    displayName: 'John Traore',
+    username: 'admin'
+  }, {
+    id: 'otheruserid1',
+    code: null,
+    name: 'Sarah Johnson',
+    displayName: 'Sarah Johnson',
+    username: 'sjohnson'
+  }, {
+    id: 'otheruserid2',
+    code: null,
+    name: 'Mike Chen',
+    displayName: 'Mike Chen',
+    username: 'mchen'
+  }]
+}, {
+  id: 'interpretation3',
+  text: 'The quarterly report reveals significant improvements in performance metrics',
+  created: '2025-09-02T10:15:48.123',
+  createdBy: {
+    id: 'currentuserid',
+    code: null,
+    name: 'John Traore',
+    displayName: 'John Traore',
+    username: 'admin'
+  },
+  comments: [],
+  likes: 0,
+  access: {
+    manage: true,
+    write: true
+  },
+  likedBy: []
+}, {
+  id: 'interpretation4',
+  text: 'We need to investigate the outliers in this dataset more thoroughly',
+  created: '2025-09-01T16:33:21.654',
+  createdBy: {
+    id: 'otheruserid2',
+    code: null,
+    name: 'Mike Chen',
+    displayName: 'Mike Chen',
+    username: 'mchen'
+  },
+  comments: [{
+    id: 'commentid4'
+  }, {
+    id: 'commentid5'
+  }, {
+    id: 'commentid6'
+  }],
+  likes: 2,
+  access: {
+    manage: false,
+    write: true
+  },
+  likedBy: [{
+    id: 'otheruserid1',
+    code: null,
+    name: 'Sarah Johnson',
+    displayName: 'Sarah Johnson',
+    username: 'sjohnson'
+  }, {
+    id: 'otheruserid2',
+    code: null,
+    name: 'Mike Chen',
+    displayName: 'Mike Chen',
+    username: 'mchen'
+  }]
+}];
+export const interpretationDetails = {
+  ...interpretations[0],
+  comments: [{
+    created: '2025-09-04T07:47:39.167',
+    createdBy: {
+      id: 'currentuserid',
+      code: null,
+      name: 'John Traore',
+      displayName: 'John Traore',
+      username: 'admin'
+    },
+    text: 'This is the first comment',
+    id: 'commentid1'
+  }, {
+    created: '2025-09-04T07:47:42.011',
+    createdBy: {
+      id: 'currentuserid',
+      code: null,
+      name: 'John Traore',
+      displayName: 'John Traore',
+      username: 'admin'
+    },
+    text: 'This is the second comment',
+    id: 'commentid2'
+  }]
+};
+export const newInterpretation = {
+  id: 'interpretation5',
+  text: 'This is a new interpretation for testing',
+  created: '2025-09-04T08:30:15.123',
+  createdBy: {
+    id: 'currentuserid',
+    code: null,
+    name: 'John Traore',
+    displayName: 'John Traore',
+    username: 'admin'
+  },
+  comments: [],
+  likes: 0,
+  access: {
+    manage: true,
+    write: true
+  },
+  likedBy: []
+};
+export const newComment = {
+  created: '2025-09-04T08:45:22.456',
+  createdBy: {
+    id: 'currentuserid',
+    code: null,
+    name: 'John Traore',
+    displayName: 'John Traore',
+    username: 'admin'
+  },
+  text: 'This is a new comment for testing',
+  id: 'commentid7'
+};
+export const visualization = {
+  id: 'viz123',
+  type: 'CHART'
+};

package/build/es/components/Interpretations/DashboardItemInterpretations/DashboardInterpretationThread.js

@@ -0,0 +1,48 @@
+import _JSXStyle from "styled-jsx/style";
+import i18n from '@dhis2/d2-i18n';
+import { Layer, CenteredContent, CircularLoader, Button, IconChevronLeft16, NoticeBox } from '@dhis2/ui';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { InterpretationThread } from '../InterpretationModal/InterpretationThread.js';
+import { useActiveInterpretation } from '../InterpretationsProvider/hooks.js';
+export const DashboardInterpretationThread = ({
+  interpretationId,
+  onClose,
+  dashboardRedirectUrl,
+  initialFocus
+}) => {
+  const {
+    data: interpretation,
+    loading,
+    error
+  } = useActiveInterpretation(interpretationId);
+  if (loading) {
+    return /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement(CircularLoader, null)));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "jsx-95761030" + " " + "container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "jsx-95761030" + " " + "button-container"
+  }, /*#__PURE__*/React.createElement(Button, {
+    small: true,
+    icon: /*#__PURE__*/React.createElement(IconChevronLeft16, null),
+    onClick: onClose
+  }, i18n.t('Back to all interpretations'))), error && /*#__PURE__*/React.createElement(NoticeBox, {
+    error: true,
+    title: i18n.t('Could not load interpretation details')
+  }, i18n.t('The request to fetch interpretation comments failed')), interpretation && !error && /*#__PURE__*/React.createElement(InterpretationThread, {
+    loading: loading,
+    interpretation: interpretation,
+    onInterpretationDeleted: onClose,
+    initialFocus: initialFocus,
+    dashboardRedirectUrl: dashboardRedirectUrl
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "95761030"
+  }, [".container.jsx-95761030{padding:var(--spacers-dp16) var(--spacers-dp16) var(--spacers-dp32) var(--spacers-dp16);}", ".button-container.jsx-95761030{margin-bottom:var(--spacers-dp8);}"]));
+};
+DashboardInterpretationThread.propTypes = {
+  interpretationId: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  dashboardRedirectUrl: PropTypes.string,
+  initialFocus: PropTypes.bool
+};

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

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import React, { useCallback, useState } from 'react';
+import { InterpretationsProvider } from '../InterpretationsProvider/InterpretationsProvider.js';
+import { InterpretationsUnit } from '../InterpretationsUnit/InterpretationsUnit.js';
+import { DashboardInterpretationThread } from './DashboardInterpretationThread.js';
+export const DashboardItemInterpretations = ({
+  currentUser,
+  dashboardRedirectUrl,
+  id,
+  type
+}) => {
+  const [activeInterpretationId, setActiveInterpretationId] = useState(null);
+  const [initialFocus, setInitialFocus] = useState(false);
+  const onInterpretationClick = useCallback(interpretationId => {
+    setActiveInterpretationId(interpretationId);
+  }, []);
+  const onReplyIconClick = useCallback(interpretationId => {
+    setActiveInterpretationId(interpretationId);
+    setInitialFocus(true);
+  }, []);
+  const onClose = useCallback(() => {
+    setActiveInterpretationId(null);
+    setInitialFocus(false);
+  }, []);
+  return /*#__PURE__*/React.createElement(InterpretationsProvider, {
+    currentUser: currentUser
+  }, activeInterpretationId ? /*#__PURE__*/React.createElement(DashboardInterpretationThread, {
+    interpretationId: activeInterpretationId,
+    onClose: onClose,
+    dashboardRedirectUrl: dashboardRedirectUrl,
+    initialFocus: initialFocus
+  }) : /*#__PURE__*/React.createElement(InterpretationsUnit, {
+    id: id,
+    type: type,
+    dashboardRedirectUrl: dashboardRedirectUrl,
+    onInterpretationClick: onInterpretationClick,
+    onReplyIconClick: onReplyIconClick
+  }));
+};
+DashboardItemInterpretations.propTypes = {
+  currentUser: PropTypes.object.isRequired,
+  dashboardRedirectUrl: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired
+};

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

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

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

@@ -1,28 +1,28 @@
 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, getCommentAccess } from '../common/index.js';
+import React, { useCallback, useState } from 'react';
+import { Message, MessageIconButton, MessageStatsBar } from '../common/index.js';
+import { useCommentAccess } from '../InterpretationsProvider/hooks.js';
 import { CommentDeleteButton } from './CommentDeleteButton.js';
 import { CommentUpdateForm } from './CommentUpdateForm.js';
 const Comment = ({
   comment,
-  currentUser,
-  interpretationId,
-  onThreadUpdated,
   canComment
 }) => {
   const [isUpdateMode, setIsUpdateMode] = useState(false);
-  const commentAccess = getCommentAccess(comment, canComment, currentUser);
+  const [commentText, setCommentText] = useState(comment.text);
+  const onUpdateComplete = useCallback(newText => {
+    setCommentText(newText);
+    setIsUpdateMode(false);
+  }, []);
+  const commentAccess = useCommentAccess(comment, canComment);
   return isUpdateMode ? /*#__PURE__*/React.createElement(CommentUpdateForm, {
-    close: () => setIsUpdateMode(false),
-    commentId: comment.id,
-    interpretationId: interpretationId,
-    onComplete: () => onThreadUpdated(false),
-    text: comment.text,
-    currentUser: currentUser
+    onComplete: onUpdateComplete,
+    id: comment.id,
+    text: comment.text
   }) : /*#__PURE__*/React.createElement(Message, {
-    text: comment.text,
+    text: commentText,
     created: comment.created,
     username: comment.createdBy.displayName
   }, commentAccess.edit && /*#__PURE__*/React.createElement(MessageStatsBar, null, /*#__PURE__*/React.createElement(MessageIconButton, {
@@ -30,16 +30,11 @@ const Comment = ({
     tooltipContent: i18n.t('Edit'),
     onClick: () => setIsUpdateMode(true)
   }), commentAccess.delete && /*#__PURE__*/React.createElement(CommentDeleteButton, {
-    commentId: comment.id,
-    interpretationId: interpretationId,
-    onComplete: () => onThreadUpdated(true)
+    id: comment.id
   })));
 };
 Comment.propTypes = {
   comment: PropTypes.object.isRequired,
-  currentUser: PropTypes.object.isRequired,
-  interpretationId: PropTypes.string.isRequired,
-  onThreadUpdated: PropTypes.func.isRequired,
   canComment: PropTypes.bool
 };
 export { Comment };

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

@@ -1,58 +1,47 @@
-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 React, { useCallback, useState } from 'react';
 import { RichTextEditor } from '../../RichText/index.js';
 import { MessageEditorContainer, MessageButtonStrip, MessageInput } from '../common/index.js';
+import { useAddCommentToActiveInterpretation, useInterpretationsCurrentUser } from '../InterpretationsProvider/hooks.js';
 export const CommentAddForm = ({
-  interpretationId,
-  currentUser,
-  onSave,
   focusRef
 }) => {
+  const currentUser = useInterpretationsCurrentUser();
   const [showRichTextEditor, setShowRichTextEditor] = useState(false);
-  const [commentText, setCommentText] = useState('');
-  const saveMutationRef = useRef({
-    resource: `interpretations/${interpretationId}/comments`,
-    type: 'create',
-    data: ({
-      commentText
-    }) => commentText
-  });
+  const [text, setText] = useState('');
+  const closeForm = useCallback(() => {
+    setShowRichTextEditor(false);
+    setText('');
+  }, []);
   const [save, {
-    loading
-  }] = useDataMutation(saveMutationRef.current, {
-    onComplete: () => {
-      setShowRichTextEditor(false);
-      setCommentText('');
-      onSave();
-    }
+    loading,
+    error
+  }] = useAddCommentToActiveInterpretation({
+    text,
+    onComplete: closeForm
   });
   const inputPlaceholder = i18n.t('Write a reply');
   return /*#__PURE__*/React.createElement(MessageEditorContainer, {
-    currentUser: currentUser
+    currentUserName: currentUser.name
   }, showRichTextEditor ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RichTextEditor, {
     inputPlaceholder: inputPlaceholder,
-    onChange: setCommentText,
-    value: commentText,
+    onChange: setText,
+    value: text,
     ref: focusRef,
-    disabled: loading
+    disabled: loading,
+    errorText: error ? i18n.t('Could not post reply') : ''
   }), /*#__PURE__*/React.createElement(MessageButtonStrip, null, /*#__PURE__*/React.createElement(Button, {
     primary: true,
     small: true,
-    onClick: () => save({
-      commentText
-    }),
+    onClick: save,
     loading: loading
   }, i18n.t('Post reply')), /*#__PURE__*/React.createElement(Button, {
     secondary: true,
     small: true,
     disabled: loading,
-    onClick: () => {
-      setCommentText('');
-      setShowRichTextEditor(false);
-    }
+    onClick: closeForm
   }, i18n.t('Cancel')))) : /*#__PURE__*/React.createElement(MessageInput, {
     onFocus: () => setShowRichTextEditor(true),
     placeholder: inputPlaceholder,
@@ -60,8 +49,5 @@ export const CommentAddForm = ({
   }));
 };
 CommentAddForm.propTypes = {
-  currentUser: PropTypes.object.isRequired,
-  focusRef: PropTypes.object.isRequired,
-  interpretationId: PropTypes.string.isRequired,
-  onSave: PropTypes.func
+  focusRef: PropTypes.object.isRequired
 };

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

@@ -1,58 +1,34 @@
 import _JSXStyle from "styled-jsx/style";
-import { useDataMutation } from '@dhis2/app-runtime';
 import i18n from '@dhis2/d2-i18n';
 import { IconDelete16, colors } from '@dhis2/ui';
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+import React from 'react';
 import { MessageIconButton } from '../common/index.js';
-const mutation = {
-  resource: 'interpretations',
-  id: ({
-    interpretationId,
-    commentId
-  }) => `${interpretationId}/comments/${commentId}`,
-  type: 'delete'
-};
+import { useDeleteCommentFromActiveInterpretation } from '../InterpretationsProvider/hooks.js';
 const CommentDeleteButton = ({
-  commentId,
-  interpretationId,
-  onComplete
+  id
 }) => {
-  const [deleteError, setDeleteError] = useState(null);
   const [remove, {
-    loading
-  }] = useDataMutation(mutation, {
-    onComplete: () => {
-      setDeleteError(null);
-      onComplete();
-    },
-    onError: () => setDeleteError(i18n.t('Delete failed')),
-    variables: {
-      commentId,
-      interpretationId
-    }
+    loading,
+    error
+  }] = useDeleteCommentFromActiveInterpretation({
+    id
   });
-  const onDelete = () => {
-    setDeleteError(null);
-    remove();
-  };
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["945681082", [colors.red500]]]) + " " + "delete-button-container"
   }, /*#__PURE__*/React.createElement(MessageIconButton, {
     tooltipContent: i18n.t('Delete'),
     iconComponent: IconDelete16,
-    onClick: onDelete,
+    onClick: remove,
     disabled: loading
-  }), deleteError && /*#__PURE__*/React.createElement("span", {
+  }), error && /*#__PURE__*/React.createElement("span", {
     className: _JSXStyle.dynamic([["945681082", [colors.red500]]]) + " " + "delete-error"
-  }, deleteError), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, i18n.t('Could not delete comment')), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "945681082",
     dynamic: [colors.red500]
   }, [".delete-button-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;gap:4px;}", `.delete-error.__jsx-style-dynamic-selector{color:${colors.red500};font-size:12px;line-height:12px;}`]));
 };
 CommentDeleteButton.propTypes = {
-  commentId: PropTypes.string.isRequired,
-  interpretationId: PropTypes.string.isRequired,
-  onComplete: PropTypes.func.isRequired
+  id: PropTypes.string.isRequired
 };
 export { CommentDeleteButton };

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

@@ -1,42 +1,31 @@
 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 React, { useState } from 'react';
 import { RichTextEditor } from '../../RichText/index.js';
 import { MessageEditorContainer, MessageButtonStrip } from '../common/index.js';
+import { useInterpretationsCurrentUser, useUpdateCommentForActiveInterpretation } from '../InterpretationsProvider/hooks.js';
 export const CommentUpdateForm = ({
-  interpretationId,
-  commentId,
-  currentUser,
+  id,
   text,
-  close,
   onComplete
 }) => {
+  const currentUser = useInterpretationsCurrentUser();
   const [commentText, setCommentText] = useState(text || '');
-  const updateMutationRef = useRef({
-    resource: `interpretations/${interpretationId}/comments/${commentId}`,
-    type: 'update',
-    partial: false,
-    data: ({
-      commentText
-    }) => commentText
-  });
   const [update, {
     loading,
     error
-  }] = useDataMutation(updateMutationRef.current, {
-    onComplete: () => {
-      onComplete();
-      close();
-    }
+  }] = useUpdateCommentForActiveInterpretation({
+    id,
+    text: commentText,
+    onComplete
   });
   const errorText = error ? 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
+    currentUserName: currentUser.name
   }, /*#__PURE__*/React.createElement(RichTextEditor, {
     inputPlaceholder: i18n.t('Enter comment text'),
     onChange: setCommentText,
@@ -47,24 +36,19 @@ export const CommentUpdateForm = ({
     loading: loading,
     primary: true,
     small: true,
-    onClick: () => update({
-      commentText
-    })
+    onClick: update
   }, i18n.t('Update')), /*#__PURE__*/React.createElement(Button, {
     disabled: loading,
     secondary: true,
     small: true,
-    onClick: close
+    onClick: onComplete
   }, i18n.t('Cancel')))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2690082310",
     dynamic: [spacers.dp8, spacers.dp8, colors.grey100]
   }, [`.message.__jsx-style-dynamic-selector{padding:0 ${spacers.dp8} ${spacers.dp8};background-color:${colors.grey100};border-radius:5px;}`]));
 };
 CommentUpdateForm.propTypes = {
-  close: PropTypes.func.isRequired,
-  commentId: PropTypes.string.isRequired,
-  currentUser: PropTypes.object.isRequired,
-  interpretationId: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
   onComplete: PropTypes.func.isRequired,
   text: PropTypes.string
 };