fix: use interpretations component from Analytics (DHIS2-15441)

cypress/integration/view/item_context_menu/show_interpretations.js

@@ -23,7 +23,7 @@ When(
 Then('the interpretations panel is displayed', () => {
     getDashboardItem(chartItemUid)
         .find(itemDetailsSel)
-        .contains('Visualization details')
+        .contains('About this')
         .scrollIntoView()
         .should('be.visible')
 

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-05-03T11:08:21.315Z\n"
-"PO-Revision-Date: 2023-05-03T11:08:21.315Z\n"
+"POT-Creation-Date: 2023-06-22T08:57:46.931Z\n"
+"PO-Revision-Date: 2023-06-22T08:57:46.931Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -62,6 +62,9 @@ msgstr "Text item"
 msgid "Add text here"
 msgstr "Add text here"
 
+msgid "Back to all interpretations"
+msgstr "Back to all interpretations"
+
 msgid "Filters are not applied to line list dashboard items"
 msgstr "Filters are not applied to line list dashboard items"
 

package.json

@@ -5,13 +5,10 @@
     "private": true,
     "license": "BSD-3-Clause",
     "dependencies": {
-        "@dhis2/analytics": "^26.2.0",
+        "@dhis2/analytics": "^26.4.0",
         "@dhis2/app-runtime": "^3.10.2",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/d2-i18n": "^1.1.3",
-        "@dhis2/d2-ui-core": "^7.4.3",
-        "@dhis2/d2-ui-interpretations": "^7.4.3",
-        "@dhis2/d2-ui-mentions-wrapper": "^7.4.3",
         "@dhis2/d2-ui-rich-text": "^7.4.3",
         "@dhis2/ui": "^8.14.0",
         "@krakenjs/post-robot": "^11.0.0",

src/components/Item/VisualizationItem/InterpretationReplyForm.js

@@ -0,0 +1,111 @@
+import { InterpretationThread } from '@dhis2/analytics'
+import { useDataQuery } from '@dhis2/app-runtime'
+import i18n from '@dhis2/d2-i18n'
+import {
+    Layer,
+    CenteredContent,
+    CircularLoader,
+    Button,
+    IconChevronLeft16,
+    spacers,
+} from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React, { useEffect } from 'react'
+
+const query = {
+    interpretation: {
+        resource: 'interpretations',
+        id: ({ id }) => id,
+        params: {
+            fields: [
+                'access',
+                'id',
+                'text',
+                'created',
+                'createdBy[id, displayName]',
+                'user[id,displayName]',
+                'likes',
+                'likedBy',
+                'comments[access,id,text,created,createdBy[id,displayName]]',
+            ],
+        },
+    },
+}
+
+export const InterpretationReplyForm = ({
+    currentUser,
+    interpretationId,
+    onGoBackClicked,
+    onInterpretationDeleted,
+    dashboardRedirectUrl,
+    initialFocus,
+}) => {
+    const { data, refetch, loading, fetching } = useDataQuery(query, {
+        lazy: true,
+    })
+    const interpretation = data?.interpretation
+
+    useEffect(() => {
+        if (interpretationId) {
+            refetch({ id: interpretationId })
+        }
+    }, [interpretationId, refetch])
+
+    const onThreadUpdated = () => refetch({ id: interpretationId })
+
+    if (loading || !interpretation) {
+        return (
+            <Layer>
+                <CenteredContent>
+                    <CircularLoader />
+                </CenteredContent>
+            </Layer>
+        )
+    }
+
+    return (
+        <div
+            style={{
+                padding: `${spacers.dp16} ${spacers.dp16} ${spacers.dp32} ${spacers.dp16}`,
+            }}
+        >
+            <div
+                style={{
+                    marginBottom: spacers.dp8,
+                }}
+            >
+                <Button
+                    small
+                    icon={<IconChevronLeft16 />}
+                    onClick={onGoBackClicked}
+                >
+                    {i18n.t('Back to all interpretations')}
+                </Button>
+            </div>
+            <InterpretationThread
+                currentUser={currentUser}
+                fetching={fetching}
+                interpretation={interpretation}
+                onInterpretationDeleted={onInterpretationDeleted}
+                onThreadUpdated={onThreadUpdated}
+                initialFocus={initialFocus}
+                dashboardRedirectUrl={dashboardRedirectUrl}
+            />
+        </div>
+    )
+}
+
+InterpretationReplyForm.displayName = 'InterpretationReplyForm'
+
+InterpretationReplyForm.defaultProps = {
+    onInterpretationDeleted: Function.prototype,
+}
+
+InterpretationReplyForm.propTypes = {
+    currentUser: PropTypes.object.isRequired,
+    interpretationId: PropTypes.string.isRequired,
+    onGoBackClicked: PropTypes.func.isRequired,
+    dashboardRedirectUrl: PropTypes.string,
+    initialFocus: PropTypes.bool,
+    onInterpretationDeleted: PropTypes.func,
+}

src/components/Item/VisualizationItem/ItemFooter.js

@@ -1,16 +1,37 @@
-import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
+import { AboutAOUnit, InterpretationsUnit } from '@dhis2/analytics'
+import { useConfig } from '@dhis2/app-runtime'
 import { useD2 } from '@dhis2/app-runtime-adapter-d2'
 import i18n from '@dhis2/d2-i18n'
-import InterpretationsComponent from '@dhis2/d2-ui-interpretations'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useState } from 'react'
 import { getVisualizationId } from '../../../modules/item.js'
+import { getItemUrl, itemTypeMap } from '../../../modules/itemTypes.js'
 import FatalErrorBoundary from './FatalErrorBoundary.js'
+import { InterpretationReplyForm } from './InterpretationReplyForm.js'
 import classes from './styles/ItemFooter.module.css'
 
-const ItemFooter = (props) => {
+const ItemFooter = ({ item }) => {
+    const { baseUrl } = useConfig()
+    const [interpretationId, setInterpretationId] = useState(null)
+    const [replyInitialFocus, setReplyInitialFocus] = useState(false)
     const { d2 } = useD2()
-    const { isDisconnected: offline } = useDhis2ConnectionStatus()
+
+    const setReplyToInterpretation = (id) => {
+        setInterpretationId(id)
+        setReplyInitialFocus(true)
+    }
+    const clearInterpretation = () => {
+        setInterpretationId(null)
+        setReplyInitialFocus(false)
+    }
+
+    const setViewInterpretation = (id) => {
+        setInterpretationId(id)
+        setReplyInitialFocus(false)
+    }
+
+    const id = getVisualizationId(item)
+    const dashboardRedirectUrl = getItemUrl(item.type, { id }, baseUrl)
 
     return (
         <div className={classes.itemFooter} data-test="dashboarditem-footer">
@@ -21,14 +42,29 @@ const ItemFooter = (props) => {
                         'There was a problem loading interpretations for this item'
                     )}
                 >
-                    <InterpretationsComponent
-                        d2={d2}
-                        item={props.item}
-                        type={props.item.type.toLowerCase()}
-                        id={getVisualizationId(props.item)}
-                        appName="dashboard"
-                        isOffline={offline}
+                    <AboutAOUnit
+                        type={itemTypeMap[item.type]?.propName}
+                        id={id}
                     />
+                    {interpretationId ? (
+                        <InterpretationReplyForm
+                            currentUser={d2.currentUser}
+                            interpretationId={interpretationId}
+                            dashboardRedirectUrl={dashboardRedirectUrl}
+                            onGoBackClicked={clearInterpretation}
+                            onInterpretationDeleted={Function.prototype}
+                            initialFocus={replyInitialFocus}
+                        />
+                    ) : (
+                        <InterpretationsUnit
+                            currentUser={d2.currentUser}
+                            type={itemTypeMap[item.type]?.propName}
+                            id={id}
+                            dashboardRedirectUrl={dashboardRedirectUrl}
+                            onInterpretationClick={setViewInterpretation}
+                            onReplyIconClick={setReplyToInterpretation}
+                        />
+                    )}
                 </FatalErrorBoundary>
             </div>
         </div>

src/components/Item/VisualizationItem/styles/ItemFooter.module.css

@@ -16,5 +16,5 @@
 .scrollContainer {
     position: relative;
     overflow-y: auto;
-    height: 334px;
+    height: 376px;
 }

src/pages/view/ItemGrid.js

@@ -31,8 +31,8 @@ import {
 } from '../../reducers/selected.js'
 import classes from './styles/ItemGrid.module.css'
 
-const EXPANDED_HEIGHT = 17
-const EXPANDED_HEIGHT_SM = 13
+const EXPANDED_HEIGHT = 19
+const EXPANDED_HEIGHT_SM = 15
 
 const ResponsiveItemGrid = ({ dashboardId, dashboardItems }) => {
     const { width } = useWindowDimensions()