fix: format and style error messages

dhis2 · Dec 9, 2024 · 8ea2a39 · 8ea2a39
1 parent ae28856
commit 8ea2a39
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 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: 2024-11-29T14:57:51.495Z\n"
-"PO-Revision-Date: 2024-11-29T14:57:51.496Z\n"
+"POT-Creation-Date: 2024-12-09T10:23:24.850Z\n"
+"PO-Revision-Date: 2024-12-09T10:23:24.851Z\n"
 
 msgid "view only"
 msgstr "view only"
@@ -171,6 +171,9 @@ msgstr "No data"
 msgid "Expression description"
 msgstr "Expression description"
 
+msgid "Error loading value"
+msgstr "Error loading value"
+
 msgid "None"
 msgstr "None"
 
@@ -258,6 +261,9 @@ msgstr "Indicator type"
 msgid "Decimals in output"
 msgstr "Decimals in output"
 
+msgid "There was a problem loading information for this data item."
+msgstr "There was a problem loading information for this data item."
+
 msgid "Name"
 msgstr "Name"
 

diff --git a/src/components/DataDimension/Info/CalculationInfo.js b/src/components/DataDimension/Info/CalculationInfo.js
@@ -23,14 +23,15 @@ const calculationQuery = {
 export const CalculationInfo = ({ id, displayNameProp }) => {
     const [data, setData] = useState()
     const [error, setError] = useState()
+    const [expressionError, setExpressionError] = useState()
     const [loading, setLoading] = useState(true)
 
     const { baseUrl, apiVersion } = useConfig()
 
     const engine = useDataEngine()
     const [getHumanReadableExpression] = useDataMutation(
         validateIndicatorExpressionMutation,
-        { onError: setError }
+        { onError: setExpressionError }
     )
 
     const fetchData = useCallback(async () => {
@@ -74,7 +75,11 @@ export const CalculationInfo = ({ id, displayNameProp }) => {
                                 data.calculation.humanReadableExpression
                             )
                         ) : (
-                            <span className="none">{i18n.t('None')}</span>
+                            <span className="none">
+                                {expressionError
+                                    ? i18n.t('Error loading value')
+                                    : i18n.t('None')}
+                            </span>
                         )}
                     </td>
                 </tr>

diff --git a/src/components/DataDimension/Info/InfoTable.js b/src/components/DataDimension/Info/InfoTable.js
@@ -107,7 +107,15 @@ export const InfoTable = ({ data, error, loading, children }) => {
                     </Center>
                 </div>
             )}
-            {error && 'some error occured'}
+            {error && (
+                <div className="error">
+                    <span>
+                        {i18n.t(
+                            'There was a problem loading information for this data item.'
+                        )}
+                    </span>
+                </div>
+            )}
             {data && (
                 <>
                     <table className="data-table">

diff --git a/src/components/DataDimension/Info/styles/InfoPopover.style.js b/src/components/DataDimension/Info/styles/InfoPopover.style.js
@@ -13,6 +13,14 @@ export default css`
         height: 100%;
         width: 100%;
     }
+    .error {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        color: ${colors.grey700};
+    }
     .data-table {
         display: table;
         width: 100%;