fix: provide useful error messages (DHIS2-5029) (#552)

packages/app/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: 2020-01-16T07:40:30.667Z\n"
-"PO-Revision-Date: 2020-01-16T07:40:30.667Z\n"
+"POT-Creation-Date: 2020-01-20T08:17:07.464Z\n"
+"PO-Revision-Date: 2020-01-20T08:17:07.464Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -122,15 +122,6 @@ msgstr ""
 msgid "Viewing interpretation from {{interpretationDate}}"
 msgstr ""
 
-msgid "Error validating layout"
-msgstr ""
-
-msgid "Visualization error"
-msgstr ""
-
-msgid "Error generating chart, please try again"
-msgstr ""
-
 msgid "Aggregation type"
 msgstr ""
 
@@ -445,55 +436,69 @@ msgstr ""
 msgid "Expected reports"
 msgstr ""
 
-msgid "Add to series"
+msgid "No data available"
 msgstr ""
 
-msgid "Add to category"
+msgid ""
+"The selected dimensions didn’t return any data. There may be no data, or\n"
+"            you may not have access to it."
 msgstr ""
 
-msgid "Add to filter"
+msgid "Series is empty"
 msgstr ""
 
-msgid "series"
+msgid "Add at least one item to Series."
 msgstr ""
 
-msgid "category"
+msgid "Category is empty"
 msgstr ""
 
-msgid "filter"
+msgid "Add at least one item to Category."
 msgstr ""
 
-msgid "Please add at least one {{series}} dimension"
+msgid "No period set"
 msgstr ""
 
-msgid "Please add at least one {{category}} dimension"
+msgid "{{visType}} must have at least one period set in {{axes}}."
 msgstr ""
 
-msgid "Please add at least one period as {{series}}, {{category}} or {{filter}}"
+msgid "No data set"
 msgstr ""
 
-msgid "Please add {{data}} as {{category}} or {{filter}}"
+msgid "{{visType}} must have at least one data item in {{axes}}."
 msgstr ""
 
-msgid "Please add at least one period as {{series}} or {{filter}}"
+msgid "There is a problem with this {{visType}} visualization."
 msgstr ""
 
-msgid "Please add at least one {{filter}} dimension"
+msgid "There was a problem getting the data from the server."
 msgstr ""
 
-msgid "Please add at least one period as a {{series}} dimension"
+msgid "Assigned Categories can only be used with data elements"
 msgstr ""
 
-msgid "Please add at least one period as a {{category}} dimension"
+msgid "Fix this problem by selecting data elements or removing Assigned Categories."
 msgstr ""
 
-msgid "Please add {{data}} as a filter dimension"
+msgid "or"
 msgstr ""
 
-msgid "Please add one {{series}} dimension"
+msgid "Add to series"
 msgstr ""
 
-msgid "Please add at least one period as {{filter}}"
+msgid "Add to category"
+msgstr ""
+
+msgid "Add to filter"
+msgstr ""
+
+msgid "series"
+msgstr ""
+
+msgid "category"
+msgstr ""
+
+msgid "filter"
 msgstr ""
 
 msgid "Today"

packages/app/src/components/UpdateButton/UpdateVisualizationContainer.js

@@ -1,12 +1,12 @@
 import { connect } from 'react-redux'
-import i18n from '@dhis2/d2-i18n'
 
 import { sGetCurrent, sGetCurrentFromUi } from '../../reducers/current'
 import * as fromActions from '../../actions'
 import { validateLayout } from '../../modules/layoutValidation'
 import { acSetLoadError, acClearLoadError } from '../../actions/loader'
 import history from '../../modules/history'
 import { CURRENT_AO_KEY } from '../../api/userDataStore'
+import { GenericClientError } from '../../modules/error'
 
 const UpdateVisualizationContainer = ({
     renderComponent,
@@ -22,14 +22,9 @@ const UpdateVisualizationContainer = ({
     const onClick = () => {
         try {
             validateLayout(getCurrentFromUi())
-
             acClearLoadError()
-        } catch (err) {
-            acSetLoadError(
-                err && err.message
-                    ? err.message
-                    : i18n.t('Error validating layout')
-            )
+        } catch (error) {
+            acSetLoadError(error || new GenericClientError())
         }
 
         onUpdate()

packages/app/src/components/Visualization/StartScreen.js

@@ -4,11 +4,12 @@ import i18n from '@dhis2/d2-i18n'
 import styles from './styles/StartScreen.style'
 import { sGetLoadError } from '../../reducers/loader'
 import PropTypes from 'prop-types'
-import visualizationErrorImg from '../../assets/chart-error-graphic.png'
 import { apiFetchMostViewedVisualizations } from '../../api/mostViewedVisualizations'
 import history from '../../modules/history'
 import { withStyles } from '@material-ui/core/styles'
 import { useDataEngine } from '@dhis2/app-runtime'
+import { VisualizationError } from '../../modules/error'
+import { GenericError } from '../../assets/ErrorIcons'
 
 const StartScreen = ({ error, classes }) => {
     const [mostViewedVisualizations, setMostViewedVisualizations] = useState([])
@@ -25,13 +26,7 @@ const StartScreen = ({ error, classes }) => {
 
     const getContent = () =>
         error ? (
-            <div style={styles.errorContainer}>
-                <img
-                    src={visualizationErrorImg}
-                    alt={i18n.t('Visualization error')}
-                />
-                <p style={styles.errorTitle}>{error}</p>
-            </div>
+            getErrorContent()
         ) : (
             <div>
                 <div style={styles.section}>
@@ -64,6 +59,24 @@ const StartScreen = ({ error, classes }) => {
             </div>
         )
 
+    const getErrorContent = () => {
+        return error instanceof VisualizationError ? (
+            <div style={styles.errorContainer}>
+                <div style={styles.errorIcon}>{error.icon()}</div>
+                <p style={styles.errorTitle}>{error.title}</p>
+                <p style={styles.errorDescription}>{error.description}</p>
+            </div>
+        ) : (
+            <div style={styles.errorContainer}>
+                <div style={styles.errorIcon}>{GenericError()}</div>
+                <p style={styles.errorTitle}>
+                    {i18n.t('Something went wrong')}
+                </p>
+                <p style={styles.errorDescription}>{error.message || error}</p>
+            </div>
+        )
+    }
+
     return (
         <div style={styles.outer}>
             <div style={styles.inner}>{getContent()}</div>