fix: show warning text below RichTextEditor when unable to show snaps…

…hot (DHIS2-15781)
dhis2 · Oct 16, 2023 · f27bc38 · f27bc38
1 parent 8e60f26
commit f27bc38
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 4 deletions.
diff --git a/i18n/en.pot b/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"
 

diff --git a/src/__demo__/InterpretationsUnit.stories.js b/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>
+        )
+    }
+)
diff --git a/src/components/Interpretations/InterpretationsUnit/InterpretationForm.js b/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,
 }
diff --git a/src/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js b/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,
 }
diff --git a/src/components/Interpretations/common/RichTextEditor/RichTextEditor.js b/src/components/Interpretations/common/RichTextEditor/RichTextEditor.js
@@ -192,7 +192,7 @@ Toolbar.propTypes = {
 
 export const RichTextEditor = forwardRef(
     (
-        { value, disabled, inputPlaceholder, onChange, errorText },
+        { value, disabled, inputPlaceholder, onChange, errorText, helpText },
         externalRef
     ) => {
         const [previewMode, setPreviewMode] = useState(false)
@@ -234,7 +234,11 @@ export const RichTextEditor = forwardRef(
                         <RichTextParser>{value}</RichTextParser>
                     </div>
                 ) : (
-                    <Field error={!!errorText} validationText={errorText}>
+                    <Field
+                        error={!!errorText}
+                        validationText={errorText}
+                        helpText={helpText}
+                    >
                         <UserMentionWrapper
                             onUserSelect={onChange}
                             inputReference={textareaRef}
@@ -268,5 +272,6 @@ RichTextEditor.propTypes = {
     onChange: PropTypes.func.isRequired,
     disabled: PropTypes.bool,
     errorText: PropTypes.string,
+    helpText: PropTypes.string,
     inputPlaceholder: PropTypes.string,
 }