feat: update interpretations component so it can be used in dashboard items

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"
 

src/components/Interpretations/InterpretationModal/InterpretationThread.js

@@ -16,6 +16,7 @@ const InterpretationThread = ({
     initialFocus,
     onThreadUpdated,
     downloadMenuComponent: DownloadMenu,
+    dashboardRedirectUrl,
 }) => {
     const { fromServerDate } = useTimeZoneConversion()
     const focusRef = useRef()
@@ -34,7 +35,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')}
@@ -53,6 +59,7 @@ const InterpretationThread = ({
                     }
                     onUpdated={() => onThreadUpdated(true)}
                     onDeleted={onInterpretationDeleted}
+                    dashboardRedirectUrl={dashboardRedirectUrl}
                     isInThread={true}
                 />
                 <div className={'comments'}>
@@ -83,6 +90,10 @@ const InterpretationThread = ({
                     scroll-behavior: smooth;
                 }
 
+                .dashboard .thread {
+                    overflow-y: hidden;
+                }
+
                 .container {
                     position: relative;
                     overflow: auto;
@@ -91,6 +102,10 @@ const InterpretationThread = ({
                     flex-direction: column;
                 }
 
+                .container.dashboard {
+                    max-height: none;
+                }
+
                 .container.fetching::before {
                     content: '';
                     position: absolute;
@@ -151,6 +166,7 @@ InterpretationThread.propTypes = {
     fetching: PropTypes.bool.isRequired,
     interpretation: PropTypes.object.isRequired,
     onInterpretationDeleted: 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

@@ -25,6 +25,7 @@ export const InterpretationList = ({
     onReplyIconClick,
     refresh,
     disabled,
+    dashboardRedirectUrl,
 }) => {
     const { fromServerDate } = useTimeZoneConversion()
     const interpretationsByDate = interpretations.reduce(
@@ -68,6 +69,9 @@ export const InterpretationList = ({
                                         onDeleted={refresh}
                                         onUpdated={refresh}
                                         disabled={disabled}
+                                        dashboardRedirectUrl={
+                                            dashboardRedirectUrl
+                                        }
                                     />
                                 ))}
                         </ol>
@@ -117,5 +121,6 @@ InterpretationList.propTypes = {
     refresh: PropTypes.func.isRequired,
     onInterpretationClick: 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
     ) => {
@@ -133,6 +134,7 @@ export const InterpretationsUnit = forwardRef(
                                     onReplyIconClick={onReplyIconClick}
                                     refresh={onCompleteAction}
                                     disabled={disabled}
+                                    dashboardRedirectUrl={dashboardRedirectUrl}
                                 />
                             </>
                         )}
@@ -194,6 +196,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,
 }) => {
     const [isUpdateMode, setIsUpdateMode] = useState(false)
@@ -36,7 +39,9 @@ export const Interpretation = ({
         currentUser,
         onComplete: onUpdated,
     })
-    const shouldShowButton = !!onClick && !disabled
+    const shouldShowButton = Boolean(
+        !!onClick && !disabled & !dashboardRedirectUrl
+    )
 
     const interpretationAccess = getInterpretationAccess(
         interpretation,
@@ -56,6 +61,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)}
@@ -97,6 +108,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}
@@ -153,6 +182,7 @@ Interpretation.propTypes = {
     onDeleted: 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'