feat: implement create-update-delete functionality for namespaces and keys

i18n/en.pot

@@ -5,15 +5,90 @@ 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-30T16:31:03.946Z\n"
-"PO-Revision-Date: 2024-11-30T16:31:03.947Z\n"
+"POT-Creation-Date: 2024-12-05T03:27:06.316Z\n"
+"PO-Revision-Date: 2024-12-05T03:27:06.317Z\n"
 
-msgid "ERROR"
-msgstr "ERROR"
+msgid "View keys"
+msgstr "View keys"
+
+msgid "Click a namespace to view its keys"
+msgstr "Click a namespace to view its keys"
+
+msgid "Add New Key"
+msgstr "Add New Key"
+
+msgid "Add New Namespace"
+msgstr "Add New Namespace"
+
+msgid "Namespace"
+msgstr "Namespace"
+
+msgid "Key"
+msgstr "Key"
+
+msgid "Cancel"
+msgstr "Cancel"
+
+msgid "Add Key"
+msgstr "Add Key"
+
+msgid "Add Namespace"
+msgstr "Add Namespace"
+
+msgid "Key created successfully"
+msgstr "Key created successfully"
+
+msgid "There was an error creating the key"
+msgstr "There was an error creating the key"
+
+msgid "Add new namespace"
+msgstr "Add new namespace"
+
+msgid "New namespace"
+msgstr "New namespace"
+
+msgid "Add new key"
+msgstr "Add new key"
+
+msgid "New key"
+msgstr "New key"
+
+msgid "Delete"
+msgstr "Delete"
+
+msgid "Failed to fetch key values!"
+msgstr "Failed to fetch key values!"
+
+msgid "Key successfully updated"
+msgstr "Key successfully updated"
+
+msgid "There was an error updating the key"
+msgstr "There was an error updating the key"
+
+msgid "Loading"
+msgstr "Loading"
+
+msgid "Save changes"
+msgstr "Save changes"
+
+msgid "Key deleted successfully"
+msgstr "Key deleted successfully"
+
+msgid "There was an error deleting the key"
+msgstr "There was an error deleting the key"
+
+msgid "There was an error while deleting the key"
+msgstr "There was an error while deleting the key"
+
+msgid "Error fetching namespaces"
+msgstr "Error fetching namespaces"
 
 msgid "Namespaces"
 msgstr "Namespaces"
 
+msgid "This will delete all the keys in this namespace"
+msgstr "This will delete all the keys in this namespace"
+
 msgid "DataStore"
 msgstr "DataStore"
 
@@ -23,5 +98,11 @@ msgstr "User DataStore"
 msgid "Search"
 msgstr "Search"
 
-msgid "Namespace"
-msgstr "Namespace"
+msgid "An error has occurred"
+msgstr "An error has occurred"
+
+msgid "Back"
+msgstr "Back"
+
+msgid "Back to DataStore"
+msgstr "Back to DataStore"

package.json

@@ -24,8 +24,9 @@
         "typescript": "^5"
     },
     "dependencies": {
+        "@codemirror/lang-json": "^6.0.1",
         "@dhis2/app-runtime": "^3.11.3",
-        "@dhis2/ui": "^10.1.0",
+        "@uiw/react-codemirror": "^4.23.6",
         "prop-types": "^15.8.1"
     }
 }

src/App.module.css

@@ -6,6 +6,15 @@
     font-size: 1rem;
 }
 
+.top {
+    margin-top: 0.5em;
+}
+
+.bottom {
+    margin-bottom: 0.5em;
+}
+
+/* sidebar */
 .sidebar {
     width: 20%;
     margin: 0.1em;
@@ -16,35 +25,47 @@
     width: 20%;
 }
 
-.sidebarList {
-    margin-top: 1em;
+.sidebarList h4 {
+    padding: 0;
+    margin: 0.5em;
 }
 
 .sidebarList ul {
-    list-style-type: 'none';
     margin: 0;
     padding: 0;
 }
 
-.top {
-    margin-top: 0.5em;
+.select {
+    height: 70px;
+    padding: 0;
+    margin: 0;
 }
 
-.bottom {
-    margin-bottom: 0.5em;
-}
+/* main area */
 
 .main {
     width: 80%;
     margin: 0.1em;
 }
 
+/* --- keys */
+
 .keysTable {
     margin-top: 10px;
     padding: 0.2em;
 }
 
+/* nav link */
+
 /* sourced and adapted from https://github.com/dhis2/design-specs/blob/b65e6518dcc7c16733379cd80688e67a422fc742/src/components/sidenav.css#L73 (-> 104) */
+.navLink {
+    display: grid;
+    grid-template-columns: 2.5fr 0.5fr;
+}
+
+.navLink button {
+    border: 0;
+}
 
 .navLink a {
     display: block;
@@ -77,3 +98,16 @@
 .navLink.active:hover {
     background: var(--colors-grey300);
 }
+
+/* Toolbar */
+.toolbar {
+    margin-top: 5px;
+    height: 70px;
+    display: flex;
+    flex-direction: row;
+}
+
+.toolbar button {
+    align-self: center;
+    margin: 0 0 0 15px;
+}

src/App.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { RouterProvider } from 'react-router-dom'
-import AppWrapper from './components/AppWrapper'
-import { router } from './routes/Router'
+import AppWrapper from './components/appWrapper'
+import { router } from './routes/router'
 
 const App: FC = () => {
     return (

src/components/EmptyArea.tsx

@@ -1,19 +1,17 @@
-import { Center } from '@dhis2/ui'
+import { Center, NoticeBox } from '@dhis2/ui'
 import React from 'react'
 import { useParams } from 'react-router-dom'
+import i18n from '../locales'
 
 const EmptyArea = () => {
     const { store, namespace } = useParams()
     return (
         <>
-            {!store && (
-                <Center>
-                    <p>Select a datastore to show namespaces</p>
-                </Center>
-            )}
             {store && !namespace && (
                 <Center>
-                    <p>Click a namespace to show keys</p>
+                    <NoticeBox title={i18n.t('View keys')}>
+                        {i18n.t('Click a namespace to view its keys')}
+                    </NoticeBox>
                 </Center>
             )}
         </>

src/components/Error.tsx

@@ -0,0 +1,74 @@
+import { Card, Center, NoticeBox } from '@dhis2/ui'
+import React from 'react'
+import { Link, isRouteErrorResponse, useRouteError } from 'react-router-dom'
+import i18n from '../locales'
+
+interface Error {
+    status?: number
+    statusText?: string
+    internal?: boolean
+    data?: string
+    message?: string
+}
+
+type PassedErrorProps = {
+    err?: {
+        httpStatus?: string
+        httpStatusCode?: number
+        status?: string
+        message?: string
+        errorCode?: string
+    }
+}
+
+export default function Error({ err }: PassedErrorProps) {
+    const error: Error = useRouteError()
+
+    return (
+        <div
+            id="error-page"
+            className=""
+            style={{
+                height: '100vh',
+                padding: '1em',
+                display: 'flex',
+                flexDirection: 'row',
+            }}
+        >
+            <Card>
+                <Center>
+                    <NoticeBox title={i18n.t('An error occurred')} error>
+                        {isRouteErrorResponse(error) ? (
+                            <>
+                                <p>
+                                    <b>
+                                        {error.status} {error.statusText}{' '}
+                                    </b>
+                                    <span>- {error.data}</span>
+                                </p>
+                                <Link to={'/dataStore'}>Back to datastore</Link>
+                            </>
+                        ) : (
+                            <p>
+                                <b>
+                                    {error.status} {error.statusText}{' '}
+                                </b>
+                                {error?.message && (
+                                    <span>- {error.message}</span>
+                                )}
+                            </p>
+                        )}
+                        {err && (
+                            <p>
+                                <b>
+                                    {err.httpStatusCode} {err.httpStatus}{' '}
+                                </b>
+                                {err?.message && <span>- {err.message}</span>}
+                            </p>
+                        )}
+                    </NoticeBox>
+                </Center>
+            </Card>
+        </div>
+    )
+}