feat: update key values

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"
 

src/components/panels/EditorPanel.tsx

@@ -1,10 +1,6 @@
-import { Button } from '@dhis2/ui'
 import React from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
-import classes from '../../App.module.css'
-import i18n from '../../locales'
-import PanelHeader from '../header/PanelHeader'
-import EditorSection from '../sections/EditorSection'
+import { useParams } from 'react-router-dom'
+import EditSection from '../sections/EditSection'
 
 const DataStoreKeyValuesQuery = {
     results: {
@@ -23,43 +19,15 @@ const UserDataStoreKeyValuesQuery = {
 }
 
 const EditorPanel = () => {
-    const { key, namespace, store } = useParams()
-    const navigate = useNavigate()
+    const { store } = useParams()
 
     return (
         <div>
-            <PanelHeader>
-                <span className={classes.editorPanelHeader}>{key}</span>
-                <div className={classes.editButtons}>
-                    <Button
-                        small
-                        aria-label={i18n.t('Close')}
-                        name="close"
-                        onClick={() => {
-                            console.log('deselect key and cancel mutation?')
-                            navigate(`/${store}/edit/${namespace}`)
-                        }}
-                        title={i18n.t('Close')}
-                    >
-                        {i18n.t('Close')}
-                    </Button>
-                    <Button
-                        small
-                        aria-label={i18n.t('Save')}
-                        name="save"
-                        onClick={() => console.log('save changes')}
-                        title={i18n.t('Save')}
-                        primary
-                    >
-                        {i18n.t('Save changes')}
-                    </Button>
-                </div>
-            </PanelHeader>
             {store === 'dataStore' && (
-                <EditorSection query={DataStoreKeyValuesQuery} />
+                <EditSection query={DataStoreKeyValuesQuery} />
             )}
             {store === 'userDataStore' && (
-                <EditorSection query={UserDataStoreKeyValuesQuery} />
+                <EditSection query={UserDataStoreKeyValuesQuery} />
             )}
         </div>
     )

src/components/sections/EditSection.tsx

@@ -0,0 +1,169 @@
+import { useAlert, useDataEngine, useDataQuery } from '@dhis2/app-runtime'
+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'
+
+const EditSection = ({ query }) => {
+    const { key, namespace, store } = useParams()
+    const engine = useDataEngine()
+    const navigate = useNavigate()
+
+    const { showError, showSuccess } = useCustomAlert()
+
+    const [editError, setEditError] = useState(null)
+    const [updateLoading, setUpdateLoading] = useState(false)
+
+    const { data, loading, refetch } = useDataQuery(query, {
+        variables: {
+            key,
+            namespace,
+        },
+        onError(error) {
+            showError(
+                i18n.t('There was a problem fetching this data - {{error}}', {
+                    error: error.message,
+                    interpolation: { escapeValue: false },
+                })
+            )
+        },
+    })
+
+    const [value, setValue] = useState(
+        JSON.stringify(data?.results, null, 4) || ''
+    )
+
+    const handleEditorChange = (value) => {
+        setValue(value)
+    }
+
+    const closeEditorAlert = useAlert(i18n.t('Do not save these changes?'), {
+        warning: true,
+        actions: [
+            {
+                label: i18n.t('Confirm'),
+                onClick: () => navigate(`/${store}/edit/${namespace}`),
+            },
+            {
+                label: i18n.t('Cancel'),
+                onClick: () => closeEditorAlert.hide(),
+            },
+        ],
+    })
+
+    const handleClose = () => {
+        if (JSON.stringify(data?.results, null, 4) === value) {
+            navigate(`/${store}/edit/${namespace}`)
+        } else {
+            closeEditorAlert.show()
+        }
+    }
+
+    const handleUpdate = async () => {
+        let body
+        const resource = `${store}`
+        setEditError(null)
+        setUpdateLoading(true)
+
+        try {
+            body = JSON.parse(value)
+            await engine.mutate(
+                {
+                    type: 'update' as const,
+                    resource: resource,
+                    id: `${namespace}/${key}`,
+                    data: body,
+                },
+                {
+                    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) {
+            setEditError(error.message)
+            showError(
+                i18n.t('There was a problem - {{error}}', {
+                    error: error.message,
+                    interpolation: { escapeValue: false },
+                })
+            )
+        }
+        setUpdateLoading(false)
+    }
+
+    useEffect(() => {
+        setValue(JSON.stringify(data?.results, null, 4))
+    }, [data])
+
+    useEffect(() => {
+        refetch({
+            key,
+            namespace,
+        })
+    }, [store, namespace, key])
+
+    return (
+        <div>
+            <PanelHeader>
+                {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}
+                handleChange={handleEditorChange}
+            />
+        </div>
+    )
+}
+
+export default EditSection

src/components/table/ItemsTable.tsx

@@ -6,7 +6,7 @@ import {
     TableBody,
     TableHead,
 } from '@dhis2/ui'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import classes from '../../App.module.css'
 import i18n from '../../locales'
@@ -39,10 +39,14 @@ const ItemsTable = ({
         setActiveRow(item)
     }
 
+    useEffect(() => {
+        setActiveRow(key)
+    }, [key])
+
     return (
         <div>
             {data && (
-                <DataTable layout="fixed">
+                <DataTable layout="fixed" scrollHeight="75vh">
                     <TableHead>
                         <DataTableRow>
                             <DataTableColumnHeader

src/routes/Router.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Navigate, createHashRouter } from 'react-router-dom'
 import ErrorComponent from '../components/error/ErrorComponent'
-import Edit from '../components/pages/Edit'
+import EditPage from '../components/pages/Edit'
 import NamespacesPage from '../components/pages/Namespaces'
 import EditorPanel from '../components/panels/EditorPanel'
 import EmptyEditorPanel from '../components/panels/EmptyEditorPanel'
@@ -20,7 +20,7 @@ export const hashRouter = createHashRouter([
             },
             {
                 path: ':store/edit/:namespace',
-                element: <Edit />,
+                element: <EditPage />,
                 children: [
                     {
                         index: true,