From 4e90713800297d89a34493fd7ea7c86299af0ed5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A9di-R=C3=A9mi=20Hashim?=
 <4295266+mediremi@users.noreply.github.com>
Date: Tue, 13 Apr 2021 23:00:40 +0100
Subject: [PATCH] fix: show alert if custom logo upload fails (#825)

---
 i18n/en.pot                     | 16 +++++++++++-----
 src/form-fields/file-upload.js  | 32 ++++++++++++++++++++++++--------
 src/settingsFields.component.js | 17 ++++++++++++-----
 3 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index 7fc971ac..8bad0afd 100644
--- 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: 2021-03-16T11:10:22.254Z\n"
-"PO-Revision-Date: 2021-03-16T11:10:22.254Z\n"
+"POT-Creation-Date: 2021-03-25T22:14:19.666Z\n"
+"PO-Revision-Date: 2021-03-25T22:14:19.666Z\n"
 
 msgid "Failed to load: {{error}}"
 msgstr ""
@@ -29,6 +29,12 @@ msgstr ""
 msgid "Upload image"
 msgstr ""
 
+msgid "File uploaded successfully"
+msgstr ""
+
+msgid "Error uploading file: {{error}}"
+msgstr ""
+
 msgid "Cancel upload"
 msgstr ""
 
@@ -608,13 +614,13 @@ msgstr ""
 msgid "Custom top menu logo"
 msgstr ""
 
-msgid "Allow users to switch dashboard favorite view type"
+msgid "Allow users to switch dashboard items view type"
 msgstr ""
 
-msgid "Allow users to open dashboard favorite in relevant app"
+msgid "Allow users to open dashboard items in relevant app"
 msgstr ""
 
-msgid "Allow users to show dashboard favorite interpretations and details"
+msgid "Allow users to show dashboard items interpretations and details"
 msgstr ""
 
 msgid "Allow users to view dashboard items in fullscreen"
diff --git a/src/form-fields/file-upload.js b/src/form-fields/file-upload.js
index 8a6b0a0a..cf0d3ad0 100644
--- a/src/form-fields/file-upload.js
+++ b/src/form-fields/file-upload.js
@@ -1,4 +1,4 @@
-import { useConfig } from '@dhis2/app-runtime'
+import { useConfig, useAlert } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import {
     Button,
@@ -78,6 +78,7 @@ Upload.propTypes = {
 
 class FileUpload extends React.Component {
     static propTypes = {
+        alert: PropTypes.object.isRequired,
         isEnabled: PropTypes.bool.isRequired,
         label: PropTypes.string.isRequired,
         name: PropTypes.oneOf(['logo_front', 'logo_banner']).isRequired,
@@ -112,7 +113,8 @@ class FileUpload extends React.Component {
     }
 
     onUpload = async e => {
-        if (e.target.files.length === 0) {
+        const { files } = e.target
+        if (files.length === 0) {
             return
         }
 
@@ -136,7 +138,7 @@ class FileUpload extends React.Component {
         this.xhr = xhr
 
         const data = new FormData()
-        data.append('file', e.target.files[0])
+        data.append('file', files[0])
 
         try {
             await api.post(['staticContent', this.props.name].join('/'), data)
@@ -146,12 +148,18 @@ class FileUpload extends React.Component {
                 progress: undefined,
                 isEnabled: true,
             })
-        } catch {
+        } catch (error) {
+            this.props.alert.show({
+                message: i18n.t('Error uploading file: {{error}}', {
+                    error: error.httpStatus || error.message,
+                    nsSeparator: null,
+                }),
+                critical: true,
+            })
             this.props.onChange({ target: { value: false } })
             this.setState({
                 uploading: false,
                 progress: undefined,
-                isEnabled: false,
             })
         }
     }
@@ -188,7 +196,6 @@ class FileUpload extends React.Component {
             display: 'block',
             whiteSpace: 'nowrap',
         }
-
         const checkStyle = {
             display: 'inline-block',
             whiteSpace: 'nowrap',
@@ -196,7 +203,6 @@ class FileUpload extends React.Component {
             paddingTop: 8,
             paddingBottom: 8,
         }
-
         const btnStyle = {
             display: 'inline-block',
             position: 'absolute',
@@ -244,4 +250,14 @@ class FileUpload extends React.Component {
     }
 }
 
-export default FileUpload
+const withAlerts = Component => {
+    return function ComponentWithAlerts(props) {
+        const alert = useAlert(
+            ({ message }) => message,
+            options => options
+        )
+        return <Component {...props} alert={alert} />
+    }
+}
+
+export default withAlerts(FileUpload)
diff --git a/src/settingsFields.component.js b/src/settingsFields.component.js
index 9a6ebafd..e56d3283 100644
--- a/src/settingsFields.component.js
+++ b/src/settingsFields.component.js
@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import { Button, Card } from '@dhis2/ui'
+import { Button, Card, CenteredContent, CircularLoader } from '@dhis2/ui'
 import FormBuilder from 'd2-ui/lib/forms/FormBuilder.component'
 import { wordToValidatorMap } from 'd2-ui/lib/forms/Validators'
 import IconButton from 'material-ui/IconButton'
@@ -204,9 +204,6 @@ class SettingsFields extends React.Component {
                 })
 
             case 'staticContent':
-                if (!settingsStore.state) {
-                    return null
-                }
                 return Object.assign({}, fieldBase, {
                     component: FileUpload,
                     props: {
@@ -264,7 +261,7 @@ class SettingsFields extends React.Component {
                 console.warn(
                     `Unknown control type "${mapping.type}" encountered for field "${key}"`
                 )
-                return {}
+                return null
         }
     }
 
@@ -278,6 +275,16 @@ class SettingsFields extends React.Component {
             )
         }
 
+        if (!settingsStore.state) {
+            return (
+                <Card className={classes.card} key={this.props.category}>
+                    <CenteredContent>
+                        <CircularLoader />
+                    </CenteredContent>
+                </Card>
+            )
+        }
+
         const fields = settings
             .map(key => {
                 const mapping = settingsKeyMapping[key]