Merge branch 'master' into fix/like-causing-flashing-interp-panel

CHANGELOG.md

@@ -1,3 +1,10 @@
+# [26.4.0](https://github.com/dhis2/analytics/compare/v26.3.1...v26.4.0) (2024-03-04)
+
+
+### Features
+
+* update interpretations component so it can be used in dashboard items ([#1510](https://github.com/dhis2/analytics/issues/1510)) ([163abf6](https://github.com/dhis2/analytics/commit/163abf60326a97248daa019c65b4658c78701780))
+
 ## [26.3.1](https://github.com/dhis2/analytics/compare/v26.3.0...v26.3.1) (2024-02-28)
 
 

i18n/en.pot

@@ -400,12 +400,15 @@ msgstr "Unlike"
 msgid "Like"
 msgstr "Like"
 
-msgid "Share"
-msgstr "Share"
-
 msgid "See interpretation"
 msgstr "See interpretation"
 
+msgid "Open in app"
+msgstr "Open in app"
+
+msgid "Share"
+msgstr "Share"
+
 msgid "Manage sharing"
 msgstr "Manage sharing"
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "26.3.1",
+    "version": "26.4.0",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {

src/components/Interpretations/InterpretationModal/InterpretationThread.js

@@ -17,6 +17,7 @@ const InterpretationThread = ({
     initialFocus,
     onThreadUpdated,
     downloadMenuComponent: DownloadMenu,
+    dashboardRedirectUrl,
 }) => {
     const { fromServerDate } = useTimeZoneConversion()
     const focusRef = useRef()
@@ -35,7 +36,12 @@ const InterpretationThread = ({
     )
 
     return (
-        <div className={cx('container', { fetching })}>
+        <div
+            className={cx('container', {
+                fetching,
+                dashboard: !!dashboardRedirectUrl,
+            })}
+        >
             <div className={'title'}>
                 <IconClock16 color={colors.grey700} />
                 {moment(fromServerDate(interpretation.created)).format('LLL')}
@@ -55,6 +61,7 @@ const InterpretationThread = ({
                     }
                     onUpdated={() => onThreadUpdated(true)}
                     onDeleted={onInterpretationDeleted}
+                    dashboardRedirectUrl={dashboardRedirectUrl}
                     isInThread={true}
                 />
                 <div className={'comments'}>
@@ -85,6 +92,10 @@ const InterpretationThread = ({
                     scroll-behavior: smooth;
                 }
 
+                .dashboard .thread {
+                    overflow-y: hidden;
+                }
+
                 .container {
                     position: relative;
                     overflow: auto;
@@ -93,6 +104,10 @@ const InterpretationThread = ({
                     flex-direction: column;
                 }
 
+                .container.dashboard {
+                    max-height: none;
+                }
+
                 .container.fetching::before {
                     content: '';
                     position: absolute;
@@ -154,6 +169,7 @@ InterpretationThread.propTypes = {
     interpretation: PropTypes.object.isRequired,
     onInterpretationDeleted: PropTypes.func.isRequired,
     onLikeToggled: PropTypes.func.isRequired,
+    dashboardRedirectUrl: PropTypes.string,
     downloadMenuComponent: PropTypes.oneOfType([
         PropTypes.object,
         PropTypes.func,

src/components/Interpretations/InterpretationModal/index.js

@@ -1 +1,2 @@
 export { InterpretationModal } from './InterpretationModal.js'
+export { InterpretationThread } from './InterpretationThread.js'

src/components/Interpretations/InterpretationsUnit/InterpretationList.js

@@ -26,6 +26,7 @@ export const InterpretationList = ({
     onReplyIconClick,
     refresh,
     disabled,
+    dashboardRedirectUrl,
 }) => {
     const { fromServerDate } = useTimeZoneConversion()
     const interpretationsByDate = interpretations.reduce(
@@ -70,6 +71,9 @@ export const InterpretationList = ({
                                         onDeleted={refresh}
                                         onUpdated={refresh}
                                         disabled={disabled}
+                                        dashboardRedirectUrl={
+                                            dashboardRedirectUrl
+                                        }
                                     />
                                 ))}
                         </ol>
@@ -120,5 +124,6 @@ InterpretationList.propTypes = {
     onInterpretationClick: PropTypes.func.isRequired,
     onLikeToggled: PropTypes.func.isRequired,
     onReplyIconClick: PropTypes.func.isRequired,
+    dashboardRedirectUrl: PropTypes.string,
     disabled: PropTypes.bool,
 }

src/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js

@@ -49,6 +49,7 @@ export const InterpretationsUnit = forwardRef(
             onReplyIconClick,
             disabled,
             renderId,
+            dashboardRedirectUrl,
         },
         ref
     ) => {
@@ -143,6 +144,7 @@ export const InterpretationsUnit = forwardRef(
                                     onReplyIconClick={onReplyIconClick}
                                     refresh={onCompleteAction}
                                     disabled={disabled}
+                                    dashboardRedirectUrl={dashboardRedirectUrl}
                                 />
                             </>
                         )}
@@ -204,6 +206,7 @@ InterpretationsUnit.propTypes = {
     currentUser: PropTypes.object.isRequired,
     id: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,
+    dashboardRedirectUrl: PropTypes.string,
     disabled: PropTypes.bool,
     renderId: PropTypes.number,
     visualizationHasTimeDimension: PropTypes.bool,

src/components/Interpretations/common/Interpretation/Interpretation.js

@@ -6,6 +6,8 @@ import {
     IconShare16,
     IconThumbUp16,
     IconEdit16,
+    IconLaunch16,
+    IconView16,
 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
@@ -27,6 +29,7 @@ export const Interpretation = ({
     onDeleted,
     disabled,
     onReplyIconClick,
+    dashboardRedirectUrl,
     isInThread,
     onLikeToggled,
 }) => {
@@ -41,7 +44,9 @@ export const Interpretation = ({
                 likedBy,
             }),
     })
-    const shouldShowButton = !!onClick && !disabled
+    const shouldShowButton = Boolean(
+        !!onClick && !disabled & !dashboardRedirectUrl
+    )
 
     const interpretationAccess = getInterpretationAccess(
         interpretation,
@@ -61,6 +66,12 @@ export const Interpretation = ({
         }
     }
 
+    // Maps still uses old url style /?id= instead of hash
+    const getAppInterpretationUrl = () =>
+        dashboardRedirectUrl.includes('?')
+            ? `${dashboardRedirectUrl}&interpretationId=${interpretation.id}`
+            : `${dashboardRedirectUrl}?interpretationId=${interpretation.id}`
+
     return isUpdateMode ? (
         <InterpretationUpdateForm
             close={() => setIsUpdateMode(false)}
@@ -102,6 +113,24 @@ export const Interpretation = ({
                         dataTest="interpretation-reply-button"
                         viewOnly={isInThread && !interpretationAccess.comment}
                     />
+                    {dashboardRedirectUrl && !isInThread && (
+                        <MessageIconButton
+                            tooltipContent={i18n.t('See interpretation')}
+                            iconComponent={IconView16}
+                            onClick={() => onClick(interpretation.id)}
+                            dataTest="interpretation-view-button"
+                        />
+                    )}
+                    {dashboardRedirectUrl && (
+                        <MessageIconButton
+                            tooltipContent={i18n.t('Open in app')}
+                            iconComponent={IconLaunch16}
+                            onClick={() =>
+                                window.open(getAppInterpretationUrl(), '_blank')
+                            }
+                            dataTest="interpretation-launch-in-app-button"
+                        />
+                    )}
                     {interpretationAccess.share && (
                         <MessageIconButton
                             iconComponent={IconShare16}
@@ -159,6 +188,7 @@ Interpretation.propTypes = {
     onLikeToggled: PropTypes.func.isRequired,
     onReplyIconClick: PropTypes.func.isRequired,
     onUpdated: PropTypes.func.isRequired,
+    dashboardRedirectUrl: PropTypes.string,
     disabled: PropTypes.bool,
     isInThread: PropTypes.bool,
     onClick: PropTypes.func,

src/index.js

@@ -30,8 +30,11 @@ export { default as LegendKey } from './components/LegendKey/LegendKey.js'
 
 export { default as AboutAOUnit } from './components/AboutAOUnit/AboutAOUnit.js'
 
-export { InterpretationsUnit } from './components/Interpretations/InterpretationsUnit/InterpretationsUnit.js'
-export { InterpretationModal } from './components/Interpretations/InterpretationModal/InterpretationModal.js'
+export { InterpretationsUnit } from './components/Interpretations/InterpretationsUnit/index.js'
+export {
+    InterpretationModal,
+    InterpretationThread,
+} from './components/Interpretations/InterpretationModal/index.js'
 
 export * from './components/Toolbar/index.js'