Merge pull request #1588 from dhis2/bugathon-2023-kfmt

fix: combined bugathon issues

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-07-06T08:30:33.216Z\n"
-"PO-Revision-Date: 2023-07-06T08:30:33.216Z\n"
+"POT-Creation-Date: 2023-09-27T14:15:13.876Z\n"
+"PO-Revision-Date: 2023-09-27T14:15:13.876Z\n"
 
 msgid "view only"
 msgstr "view only"
@@ -374,6 +374,9 @@ msgstr "Hide interpretation"
 msgid "Write an interpretation"
 msgstr "Write an interpretation"
 
+msgid "Other people viewing this interpretation in the future may see more data."
+msgstr "Other people viewing this interpretation in the future may see more data."
+
 msgid "Post interpretation"
 msgstr "Post interpretation"
 

src/__demo__/InterpretationsUnit.stories.js

@@ -0,0 +1,51 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import { storiesOf } from '@storybook/react'
+import React from 'react'
+import { InterpretationsUnit } from '../components/Interpretations/InterpretationsUnit/index.js'
+
+storiesOf('IntepretationsUnit', module).add('Default', () => {
+    return (
+        <CustomDataProvider
+            data={{
+                interpretations: {
+                    interpretations: [],
+                },
+            }}
+        >
+            <InterpretationsUnit
+                currentUser={{
+                    name: 'Tom Wakiki',
+                }}
+                id="abcd"
+                onReplyIconClick={Function.prototype}
+                type="eventVisualization"
+                visualizationHasTimeDimension={true}
+            />
+        </CustomDataProvider>
+    )
+})
+
+storiesOf('IntepretationsUnit', module).add(
+    'With no time dimensions warning',
+    () => {
+        return (
+            <CustomDataProvider
+                data={{
+                    interpretations: {
+                        interpretations: [],
+                    },
+                }}
+            >
+                <InterpretationsUnit
+                    currentUser={{
+                        name: 'Tom Wakiki',
+                    }}
+                    id="abcd"
+                    onReplyIconClick={Function.prototype}
+                    type="eventVisualization"
+                    visualizationHasTimeDimension={false}
+                />
+            </CustomDataProvider>
+        )
+    }
+)

src/components/AboutAOUnit/AboutAOUnit.js

@@ -1,4 +1,8 @@
-import { useDataQuery, useDataMutation } from '@dhis2/app-runtime'
+import {
+    useDataQuery,
+    useDataMutation,
+    useTimeZoneConversion,
+} from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { Parser as RichTextParser } from '@dhis2/d2-ui-rich-text'
 import {
@@ -57,6 +61,7 @@ const getUnsubscribeMutation = (type, id) => ({
 
 const AboutAOUnit = forwardRef(({ type, id, renderId }, ref) => {
     const [isExpanded, setIsExpanded] = useState(true)
+    const { fromServerDate } = useTimeZoneConversion()
 
     const queries = useMemo(() => getQueries(type), [type])
 
@@ -208,7 +213,7 @@ const AboutAOUnit = forwardRef(({ type, id, renderId }, ref) => {
                                     <IconClock16 color={colors.grey700} />
                                     {i18n.t('Last updated {{time}}', {
                                         time: moment(
-                                            data.ao.lastUpdated
+                                            fromServerDate(data.ao.lastUpdated)
                                         ).fromNow(),
                                     })}
                                 </p>
@@ -219,15 +224,19 @@ const AboutAOUnit = forwardRef(({ type, id, renderId }, ref) => {
                                               'Created {{time}} by {{author}}',
                                               {
                                                   time: moment(
-                                                      data.ao.created
+                                                      fromServerDate(
+                                                          data.ao.created
+                                                      )
                                                   ).fromNow(),
                                                   author: data.ao.createdBy
                                                       .displayName,
                                               }
                                           )
                                         : i18n.t('Created {{time}}', {
                                               time: moment(
-                                                  data.ao.created
+                                                  fromServerDate(
+                                                      data.ao.created
+                                                  )
                                               ).fromNow(),
                                           })}
                                 </p>

src/components/Interpretations/InterpretationModal/InterpretationModal.js

@@ -24,21 +24,22 @@ const modalCSS = css.resolve`
         max-width: calc(100vw - 128px) !important;
         max-height: calc(100vh - 128px) !important;
         width: auto !important;
-        height: auto !important;
+        height: calc(100vh - 128px) !important;
         overflow-y: hidden;
     }
     aside.hidden {
         display: none;
     }
     aside > :global(div) > :global(div) {
-        max-height: none;
+        height: 100%;
     }
 `
 
 function getModalContentCSS(width) {
     return css.resolve`
         div {
             width: ${width}px;
+            overflow-y: visible;
         }
     `
 }
@@ -216,12 +217,14 @@ const InterpretationModal = ({
                     .container {
                         display: flex;
                         flex-direction: column;
+                        height: 100%;
                     }
 
                     .row {
                         display: flex;
                         flex-direction: row;
                         gap: 16px;
+                        height: 100%;
                     }
 
                     .visualisation-wrap {
@@ -233,7 +236,6 @@ const InterpretationModal = ({
                         padding-right: ${spacers.dp4};
                         flex-basis: 300px;
                         flex-shrink: 0;
-                        overflow-y: auto;
                     }
                 `}</style>
             </Modal>

src/components/Interpretations/InterpretationModal/InterpretationThread.js

@@ -1,3 +1,4 @@
+import { useTimeZoneConversion } from '@dhis2/app-runtime'
 import { IconClock16, colors } from '@dhis2/ui'
 import cx from 'classnames'
 import moment from 'moment'
@@ -16,6 +17,7 @@ const InterpretationThread = ({
     onThreadUpdated,
     downloadMenuComponent: DownloadMenu,
 }) => {
+    const { fromServerDate } = useTimeZoneConversion()
     const focusRef = useRef()
 
     useEffect(() => {
@@ -33,57 +35,57 @@ const InterpretationThread = ({
 
     return (
         <div className={cx('container', { fetching })}>
-            <div className={'scrollbox'}>
-                <div className={'title'}>
-                    <IconClock16 color={colors.grey700} />
-                    {moment(interpretation.created).format('LLL')}
-                </div>
-                {DownloadMenu && (
-                    <DownloadMenu relativePeriodDate={interpretation.created} />
-                )}
-                <div className={'thread'}>
-                    <Interpretation
-                        currentUser={currentUser}
-                        interpretation={interpretation}
-                        onReplyIconClick={
-                            interpretationAccess.comment
-                                ? () => focusRef.current?.focus()
-                                : null
-                        }
-                        onUpdated={() => onThreadUpdated(true)}
-                        onDeleted={onInterpretationDeleted}
-                        isInThread={true}
-                    />
-                    <div className={'comments'}>
-                        {interpretation.comments.map((comment) => (
-                            <Comment
-                                key={comment.id}
-                                comment={comment}
-                                currentUser={currentUser}
-                                interpretationId={interpretation.id}
-                                onThreadUpdated={onThreadUpdated}
-                                canComment={interpretationAccess.comment}
-                            />
-                        ))}
-                    </div>
-                    {interpretationAccess.comment && (
-                        <CommentAddForm
+            <div className={'title'}>
+                <IconClock16 color={colors.grey700} />
+                {moment(fromServerDate(interpretation.created)).format('LLL')}
+            </div>
+            {DownloadMenu && (
+                <DownloadMenu relativePeriodDate={interpretation.created} />
+            )}
+            <div className={'thread'}>
+                <Interpretation
+                    currentUser={currentUser}
+                    interpretation={interpretation}
+                    onReplyIconClick={
+                        interpretationAccess.comment
+                            ? () => focusRef.current?.focus()
+                            : null
+                    }
+                    onUpdated={() => onThreadUpdated(true)}
+                    onDeleted={onInterpretationDeleted}
+                    isInThread={true}
+                />
+                <div className={'comments'}>
+                    {interpretation.comments.map((comment) => (
+                        <Comment
+                            key={comment.id}
+                            comment={comment}
                             currentUser={currentUser}
                             interpretationId={interpretation.id}
-                            onSave={() => onThreadUpdated(true)}
-                            focusRef={focusRef}
+                            onThreadUpdated={onThreadUpdated}
+                            canComment={interpretationAccess.comment}
                         />
-                    )}
+                    ))}
                 </div>
             </div>
+            {interpretationAccess.comment && (
+                <CommentAddForm
+                    currentUser={currentUser}
+                    interpretationId={interpretation.id}
+                    onSave={() => onThreadUpdated(true)}
+                    focusRef={focusRef}
+                />
+            )}
             <style jsx>{`
                 .thread {
                     margin-top: var(--spacers-dp16);
+                    overflow-y: auto;
+                    scroll-behavior: smooth;
                 }
 
                 .container {
                     position: relative;
-                    overflow: hidden;
+                    overflow: auto;
                     max-height: calc(100vh - 285px);
                     display: flex;
                     flex-direction: column;
@@ -113,11 +115,6 @@ const InterpretationThread = ({
                         rotation;
                 }
 
-                .scrollbox {
-                    overflow-y: auto;
-                    scroll-behavior: smooth;
-                }
-
                 .title {
                     display: flex;
                     align-items: center;

src/components/Interpretations/InterpretationsUnit/InterpretationForm.js

@@ -14,6 +14,7 @@ export const InterpretationForm = ({
     id,
     currentUser,
     disabled,
+    showNoTimeDimensionHelpText,
     onSave,
 }) => {
     const [showRichTextEditor, setShowRichTextEditor] = useState(false)
@@ -51,6 +52,13 @@ export const InterpretationForm = ({
                         inputPlaceholder={inputPlaceholder}
                         onChange={setInterpretationText}
                         value={interpretationText}
+                        helpText={
+                            showNoTimeDimensionHelpText
+                                ? i18n.t(
+                                      'Other people viewing this interpretation in the future may see more data.'
+                                  )
+                                : undefined
+                        }
                     />
                     <MessageButtonStrip>
                         <Button
@@ -89,6 +97,7 @@ InterpretationForm.propTypes = {
     currentUser: PropTypes.object,
     disabled: PropTypes.bool,
     id: PropTypes.string,
+    showNoTimeDimensionHelpText: PropTypes.bool,
     type: PropTypes.string,
     onSave: PropTypes.func,
 }

src/components/Interpretations/InterpretationsUnit/InterpretationList.js

@@ -1,3 +1,4 @@
+import { useTimeZoneConversion } from '@dhis2/app-runtime'
 import { IconCalendar24, colors, spacers } from '@dhis2/ui'
 import moment from 'moment'
 import PropTypes from 'prop-types'
@@ -25,6 +26,7 @@ export const InterpretationList = ({
     refresh,
     disabled,
 }) => {
+    const { fromServerDate } = useTimeZoneConversion()
     const interpretationsByDate = interpretations.reduce(
         (groupedInterpretations, interpretation) => {
             const date = interpretation.created.split('T')[0]
@@ -50,7 +52,7 @@ export const InterpretationList = ({
                         <div className="date-section">
                             <IconCalendar24 color={colors.grey600} />
                             <time dateTime={date} className="date-header">
-                                {moment(date).format('ll')}
+                                {moment(fromServerDate(date)).format('ll')}
                             </time>
                         </div>
                         <ol className="interpretation-list">

src/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js

@@ -44,6 +44,7 @@ export const InterpretationsUnit = forwardRef(
             currentUser,
             type,
             id,
+            visualizationHasTimeDimension,
             onInterpretationClick,
             onReplyIconClick,
             disabled,
@@ -52,6 +53,8 @@ export const InterpretationsUnit = forwardRef(
         ref
     ) => {
         const [isExpanded, setIsExpanded] = useState(true)
+        const showNoTimeDimensionHelpText =
+            type === 'eventVisualization' && !visualizationHasTimeDimension
 
         const { data, loading, fetching, refetch } = useDataQuery(
             interpretationsQuery,
@@ -115,6 +118,9 @@ export const InterpretationsUnit = forwardRef(
                                     id={id}
                                     onSave={onCompleteAction}
                                     disabled={disabled}
+                                    showNoTimeDimensionHelpText={
+                                        showNoTimeDimensionHelpText
+                                    }
                                 />
                                 <InterpretationList
                                     currentUser={currentUser}
@@ -181,6 +187,7 @@ InterpretationsUnit.displayName = 'InterpretationsUnit'
 
 InterpretationsUnit.defaultProps = {
     onInterpretationClick: Function.prototype,
+    visualizationHasTimeDimension: true,
 }
 
 InterpretationsUnit.propTypes = {
@@ -189,6 +196,7 @@ InterpretationsUnit.propTypes = {
     type: PropTypes.string.isRequired,
     disabled: PropTypes.bool,
     renderId: PropTypes.number,
+    visualizationHasTimeDimension: PropTypes.bool,
     onInterpretationClick: PropTypes.func,
     onReplyIconClick: PropTypes.func,
 }