feat: display namespaces and keys from selected datastore

i18n/en.pot

@@ -5,17 +5,23 @@ 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-11-30T16:31:03.946Z\n"
+"PO-Revision-Date: 2024-11-30T16:31:03.947Z\n"
 
 msgid "ERROR"
 msgstr "ERROR"
 
-msgid "Loading..."
-msgstr "Loading..."
+msgid "Namespaces"
+msgstr "Namespaces"
 
-msgid "Hello {{name}}"
-msgstr "Hello {{name}}"
+msgid "DataStore"
+msgstr "DataStore"
 
-msgid "Welcome to DHIS2 with TypeScript!"
-msgstr "Welcome to DHIS2 with TypeScript!"
+msgid "User DataStore"
+msgstr "User DataStore"
+
+msgid "Search"
+msgstr "Search"
+
+msgid "Namespace"
+msgstr "Namespace"

package.json

@@ -20,9 +20,12 @@
         "@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"
+        "@dhis2/app-runtime": "^3.11.3",
+        "@dhis2/ui": "^10.1.0",
+        "prop-types": "^15.8.1"
     }
 }

src/App.module.css

@@ -2,8 +2,78 @@
     width: 100%;
     height: 100%;
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    flex-direction: row;
     font-size: 1rem;
 }
+
+.sidebar {
+    width: 20%;
+    margin: 0.1em;
+}
+
+.sidebarContent {
+    padding: 0.3em;
+    width: 20%;
+}
+
+.sidebarList {
+    margin-top: 1em;
+}
+
+.sidebarList ul {
+    list-style-type: 'none';
+    margin: 0;
+    padding: 0;
+}
+
+.top {
+    margin-top: 0.5em;
+}
+
+.bottom {
+    margin-bottom: 0.5em;
+}
+
+.main {
+    width: 80%;
+    margin: 0.1em;
+}
+
+.keysTable {
+    margin-top: 10px;
+    padding: 0.2em;
+}
+
+/* sourced and adapted from https://github.com/dhis2/design-specs/blob/b65e6518dcc7c16733379cd80688e67a422fc742/src/components/sidenav.css#L73 (-> 104) */
+
+.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);
+}

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,22 @@
+import { Center } from '@dhis2/ui'
+import React from 'react'
+import { useParams } from 'react-router-dom'
+
+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>
+                </Center>
+            )}
+        </>
+    )
+}
+export default EmptyArea

src/components/Loader.tsx

@@ -0,0 +1,17 @@
+import { CircularLoader } from '@dhis2/ui'
+import React from 'react'
+
+const CenteredLoader = () => {
+    return (
+        <div
+            style={{
+                display: 'flex',
+                justifyContent: 'center',
+            }}
+        >
+            <CircularLoader />
+        </div>
+    )
+}
+
+export default CenteredLoader

src/components/appWrapper.tsx

@@ -0,0 +1,19 @@
+import { CssReset, CssVariables } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+function AppWrapper({ children }) {
+    return (
+        <>
+            <CssReset />
+            <CssVariables theme spacers colors />
+            {children}
+        </>
+    )
+}
+
+AppWrapper.propTypes = {
+    children: PropTypes.node,
+}
+
+export default AppWrapper

src/components/keys/keysTable.tsx

@@ -0,0 +1,77 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import {
+    DataTable,
+    DataTableCell,
+    DataTableColumnHeader,
+    DataTableRow,
+    TableBody,
+    TableHead,
+} from '@dhis2/ui'
+import React, { useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import classes from '../../App.module.css'
+import CenteredLoader from '../Loader'
+
+interface QueryResults {
+    results: []
+}
+
+const useNameSpaceQuery = ({ store, namespace }) => {
+    return useDataQuery<QueryResults>(
+        {
+            results: {
+                resource: `${store}`,
+                id: ({ id }) => id,
+            },
+        },
+        {
+            variables: {
+                id: namespace,
+            },
+        }
+    )
+}
+
+const KeysTable = () => {
+    const { store, namespace } = useParams()
+    const { data, loading, refetch } = useNameSpaceQuery({ store, namespace })
+
+    useEffect(() => {
+        refetch({ id: namespace })
+    }, [namespace])
+
+    if (loading) {
+        return <CenteredLoader />
+    }
+
+    return (
+        <div className={classes.keysTable}>
+            <DataTable>
+                <TableHead>
+                    <DataTableRow>
+                        <DataTableColumnHeader>Keys</DataTableColumnHeader>
+                        <DataTableColumnHeader>Actions</DataTableColumnHeader>
+                    </DataTableRow>
+                </TableHead>
+                <TableBody>
+                    {data?.results?.length && (
+                        <>
+                            {data.results.map((key, index) => (
+                                <DataTableRow key={`${key}-${index}`}>
+                                    <DataTableCell bordered>
+                                        {key}
+                                    </DataTableCell>
+                                    <DataTableCell bordered>
+                                        Edit, Delete
+                                    </DataTableCell>
+                                </DataTableRow>
+                            ))}
+                        </>
+                    )}
+                </TableBody>
+            </DataTable>
+        </div>
+    )
+}
+
+export default KeysTable

src/components/namespaces/DataStoreLinks.tsx

@@ -0,0 +1,28 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import PropTypes from 'prop-types'
+import React from 'react'
+import LinksList from './LinksList'
+
+interface QueryResults {
+    results: []
+}
+
+const dataStoreQuery = {
+    results: {
+        resource: 'dataStore',
+    },
+}
+
+function DataStoreLinks({ store }) {
+    const { error, loading, data } = useDataQuery<QueryResults>(dataStoreQuery)
+
+    return (
+        <LinksList store={store} error={error} data={data} loading={loading} />
+    )
+}
+
+DataStoreLinks.propTypes = {
+    store: PropTypes.string,
+}
+
+export default DataStoreLinks

src/components/namespaces/LinksList.tsx

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import classes from '../../App.module.css'
+import i18n from '../../locales'
+import CenteredLoader from '../Loader'
+import SidebarNavLink from '../sidebar/SidebarNavLink'
+
+function LinksList({ data, error, loading, store }) {
+    return (
+        <div className={classes.sidebarList}>
+            {error && <span>{i18n.t('ERROR')}</span>}
+            {loading && <CenteredLoader />}
+            {data && (
+                <>
+                    <h4 className={classes.bottom}>{i18n.t('Namespaces')}</h4>
+                    <ul>
+                        {data.results.map((namespace: string, index) => {
+                            return (
+                                <SidebarNavLink
+                                    key={`${index}-${namespace}`}
+                                    to={`/${store}/${namespace}`}
+                                    label={namespace}
+                                />
+                            )
+                        })}
+                    </ul>
+                </>
+            )}
+        </div>
+    )
+}
+
+LinksList.propTypes = {
+    data: PropTypes.object,
+    error: PropTypes.any,
+    loading: PropTypes.any,
+    store: PropTypes.string,
+}
+
+export default LinksList