feat: display namespaces and keys from selected datastore

i18n/en.pot

@@ -5,17 +5,104 @@ 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-21T12:50:12.197Z\n"
-"PO-Revision-Date: 2024-11-21T12:50:12.198Z\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 "Loading..."
-msgstr "Loading..."
+msgid "Click a namespace to view its keys"
+msgstr "Click a namespace to view its keys"
 
-msgid "Hello {{name}}"
-msgstr "Hello {{name}}"
+msgid "Add New Key"
+msgstr "Add New Key"
 
-msgid "Welcome to DHIS2 with TypeScript!"
-msgstr "Welcome to DHIS2 with TypeScript!"
+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"
+
+msgid "User DataStore"
+msgstr "User DataStore"
+
+msgid "Search"
+msgstr "Search"
+
+msgid "An error has occurred"
+msgstr "An error has occurred"
+
+msgid "Back"
+msgstr "Back"
+
+msgid "Back to DataStore"
+msgstr "Back to DataStore"

package.json

@@ -20,9 +20,13 @@
         "@types/jest": "^29.5.14",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
+        "react-router-dom": "^7.0.1",
         "typescript": "^5"
     },
     "dependencies": {
-        "@dhis2/app-runtime": "^3.11.3"
+        "@codemirror/lang-json": "^6.0.1",
+        "@dhis2/app-runtime": "^3.11.3",
+        "@uiw/react-codemirror": "^4.23.6",
+        "prop-types": "^15.8.1"
     }
 }

src/App.module.css

@@ -2,8 +2,112 @@
     width: 100%;
     height: 100%;
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    flex-direction: row;
     font-size: 1rem;
 }
+
+.top {
+    margin-top: 0.5em;
+}
+
+.bottom {
+    margin-bottom: 0.5em;
+}
+
+/* sidebar */
+.sidebar {
+    width: 20%;
+    margin: 0.1em;
+}
+
+.sidebarContent {
+    padding: 0.3em;
+    width: 20%;
+}
+
+.sidebarList h4 {
+    padding: 0;
+    margin: 0.5em;
+}
+
+.sidebarList ul {
+    margin: 0;
+    padding: 0;
+}
+
+.select {
+    height: 70px;
+    padding: 0;
+    margin: 0;
+}
+
+/* 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;
+    min-height: 36px;
+    padding: 10px;
+    /* background: var(--colors-grey100); */
+    text-decoration: none;
+    color: var(--colors-grey900);
+    font-size: 15px;
+    display: flex;
+    align-items: center;
+}
+.navLink:hover,
+.navLink a:hover {
+    background: var(--colors-grey300);
+}
+.navLink:focus,
+.navLink a:focus {
+    outline: 2px solid white;
+    background: var(--colors-grey200);
+    outline-offset: -2px;
+}
+
+.navLink a.active,
+.navLink :global(.active) {
+    font-weight: 500;
+    background: var(--colors-grey200);
+    box-shadow: inset 6px 0px 0px 0px var(--colors-grey500);
+}
+.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,37 +1,14 @@
-import { useDataQuery } from '@dhis2/app-runtime'
-import i18n from '@dhis2/d2-i18n'
 import React, { FC } from 'react'
-import classes from './App.module.css'
-
-interface QueryResults {
-    me: {
-        name: string
-    }
-}
-
-const query = {
-    me: {
-        resource: 'me',
-    },
-}
-
-const MyApp: FC = () => {
-    const { error, loading, data } = useDataQuery<QueryResults>(query)
-
-    if (error) {
-        return <span>{i18n.t('ERROR')}</span>
-    }
-
-    if (loading) {
-        return <span>{i18n.t('Loading...')}</span>
-    }
+import { RouterProvider } from 'react-router-dom'
+import AppWrapper from './components/appWrapper'
+import { router } from './routes/router'
 
+const App: FC = () => {
     return (
-        <div className={classes.container}>
-            <h1>{i18n.t('Hello {{name}}', { name: data?.me?.name })}</h1>
-            <h3>{i18n.t('Welcome to DHIS2 with TypeScript!')}</h3>
-        </div>
+        <AppWrapper>
+            <RouterProvider router={router} />
+        </AppWrapper>
     )
 }
 
-export default MyApp
+export default App

src/components/EmptyArea.tsx

@@ -0,0 +1,20 @@
+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 && !namespace && (
+                <Center>
+                    <NoticeBox title={i18n.t('View keys')}>
+                        {i18n.t('Click a namespace to view its keys')}
+                    </NoticeBox>
+                </Center>
+            )}
+        </>
+    )
+}
+export default EmptyArea