Skip to content

Commit

Permalink
fix: use interpretations component from Analytics (DHIS2-15441) (#2430)
Browse files Browse the repository at this point in the history
  • Loading branch information
jenniferarnesen authored Mar 4, 2024
1 parent c3110d8 commit 3550cfa
Show file tree
Hide file tree
Showing 8 changed files with 195 additions and 635 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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')

Expand Down
7 changes: 5 additions & 2 deletions i18n/en.pot
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"

Expand Down
5 changes: 1 addition & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
111 changes: 111 additions & 0 deletions src/components/Item/VisualizationItem/InterpretationReplyForm.js
Original file line number Diff line number Diff line change
@@ -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,
}
60 changes: 48 additions & 12 deletions src/components/Item/VisualizationItem/ItemFooter.js
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,5 @@
.scrollContainer {
position: relative;
overflow-y: auto;
height: 334px;
height: 376px;
}
4 changes: 2 additions & 2 deletions src/pages/view/ItemGrid.js
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
Loading

0 comments on commit 3550cfa

Please sign in to comment.