feat: add update and fetch alerts for key values

dhis2 · Dec 19, 2024 · b2062e2 · b2062e2
1 parent 3f8b391
commit b2062e2
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 40 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-12-19T22:29:04.401Z\n"
-"PO-Revision-Date: 2024-12-19T22:29:04.402Z\n"
+"POT-Creation-Date: 2024-12-19T22:30:05.381Z\n"
+"PO-Revision-Date: 2024-12-19T22:30:05.382Z\n"
 
 msgid "An error has occurred"
 msgstr "An error has occurred"
@@ -41,15 +41,6 @@ msgstr "Back to all namespaces"
 msgid "Configure Namespaces"
 msgstr "Configure Namespaces"
 
-msgid "Close"
-msgstr "Close"
-
-msgid "Save"
-msgstr "Save"
-
-msgid "Save changes"
-msgstr "Save changes"
-
 msgid "Choose a key to start editing"
 msgstr "Choose a key to start editing"
 
@@ -59,6 +50,33 @@ msgstr "DataStore"
 msgid "UserDataStore"
 msgstr "UserDataStore"
 
+msgid "There was a problem fetching this data - {{error}}"
+msgstr "There was a problem fetching this data - {{error}}"
+
+msgid "Do not save these changes?"
+msgstr "Do not save these changes?"
+
+msgid "Confirm"
+msgstr "Confirm"
+
+msgid "Key '{{key}}' updated successfully"
+msgstr "Key '{{key}}' updated successfully"
+
+msgid "There was a problem updating the key - {{error}}"
+msgstr "There was a problem updating the key - {{error}}"
+
+msgid "There was a problem - {{error}}"
+msgstr "There was a problem - {{error}}"
+
+msgid "Close"
+msgstr "Close"
+
+msgid "Save"
+msgstr "Save"
+
+msgid "Save changes"
+msgstr "Save changes"
+
 msgid "Key '{{key}}' added successfully"
 msgstr "Key '{{key}}' added successfully"
 

diff --git a/src/components/sections/EditSection.tsx b/src/components/sections/EditSection.tsx
@@ -3,6 +3,7 @@ import { Button } from '@dhis2/ui'
 import React, { useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import classes from '../../App.module.css'
+import useCustomAlert from '../../hooks/useCustomAlert'
 import i18n from '../../locales'
 import PanelHeader from '../header/PanelHeader'
 import Editor from './Editor'
@@ -11,18 +12,25 @@ const EditSection = ({ query }) => {
     const { key, namespace, store } = useParams()
     const engine = useDataEngine()
     const navigate = useNavigate()
-    const { show: showError } = useAlert('An error fetching this data', {
-        critical: true,
-    })
-    const [setEditError] = useState(null)
+
+    const { showError, showSuccess } = useCustomAlert()
+
+    const [editError, setEditError] = useState(null)
     const [updateLoading, setUpdateLoading] = useState(false)
 
     const { data, loading, refetch } = useDataQuery(query, {
         variables: {
             key,
             namespace,
         },
-        onError: () => showError(),
+        onError(error) {
+            showError(
+                i18n.t('There was a problem fetching this data - {{error}}', {
+                    error: error.message,
+                    interpolation: { escapeValue: false },
+                })
+            )
+        },
     })
 
     const [value, setValue] = useState(
@@ -72,16 +80,37 @@ const EditSection = ({ query }) => {
                 },
                 {
                     onComplete: () => {
+                        showSuccess(
+                            i18n.t("Key '{{key}}' updated successfully", {
+                                key,
+                            })
+                        )
                         refetch({
                             key,
                             namespace,
                         })
                     },
+                    onError(error) {
+                        showError(
+                            i18n.t(
+                                'There was a problem updating the key - {{error}}',
+                                {
+                                    error: error.message,
+                                    interpolation: { escapeValue: false },
+                                }
+                            )
+                        )
+                    },
                 }
             )
         } catch (error) {
-            console.error(error)
             setEditError(error.message)
+            showError(
+                i18n.t('There was a problem - {{error}}', {
+                    error: error.message,
+                    interpolation: { escapeValue: false },
+                })
+            )
         }
         setUpdateLoading(false)
     }
@@ -100,29 +129,34 @@ const EditSection = ({ query }) => {
     return (
         <div>
             <PanelHeader>
-                <span className={classes.editorPanelHeader}>{key}</span>
-                <div className={classes.editButtons}>
-                    <Button
-                        small
-                        aria-label={i18n.t('Close')}
-                        name="close"
-                        onClick={() => handleClose()}
-                        title={i18n.t('Close')}
-                        disabled={updateLoading}
-                    >
-                        {i18n.t('Close')}
-                    </Button>
-                    <Button
-                        small
-                        aria-label={i18n.t('Save')}
-                        name="save"
-                        onClick={() => handleUpdate()}
-                        title={i18n.t('Save')}
-                        primary
-                    >
-                        {i18n.t('Save changes')}
-                    </Button>
-                </div>
+                {data && (
+                    <>
+                        <span className={classes.editorPanelHeader}>{key}</span>
+                        <div className={classes.editButtons}>
+                            <Button
+                                small
+                                aria-label={i18n.t('Close')}
+                                name="close"
+                                onClick={() => handleClose()}
+                                title={i18n.t('Close')}
+                                disabled={updateLoading}
+                            >
+                                {i18n.t('Close')}
+                            </Button>
+                            <Button
+                                small
+                                aria-label={i18n.t('Save')}
+                                name="save"
+                                onClick={() => handleUpdate()}
+                                title={i18n.t('Save')}
+                                primary
+                                loading={!editError && updateLoading}
+                            >
+                                {i18n.t('Save changes')}
+                            </Button>
+                        </div>
+                    </>
+                )}
             </PanelHeader>
             <Editor
                 value={loading ? 'Loading...' : value}