feat: fetch and display namespaces from a selected datastore

src/components/error/ErrorNotice.tsx

@@ -0,0 +1,27 @@
+import { NoticeBox } from '@dhis2/ui'
+import React from 'react'
+import i18n from '../../locales'
+
+interface ErrorNoticeProps {
+    error?: string
+}
+
+const ErrorNotice = ({ error }: ErrorNoticeProps) => {
+    console.error(error)
+    return (
+        <div
+            style={{
+                width: '100%',
+                padding: '2em',
+                display: 'flex',
+                justifyContent: 'center',
+            }}
+        >
+            <NoticeBox warning>
+                <p>{i18n.t('An error has occurred. Try again')}</p>
+            </NoticeBox>
+        </div>
+    )
+}
+
+export default ErrorNotice

src/components/pages/Namespaces.tsx

@@ -1,27 +1,32 @@
-import { IconAdd24, colors } from '@dhis2/ui'
 import React, { useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import classes from '../../App.module.css'
 import i18n from '../../locales'
-import CreateButton from '../sections/CreateButton'
-import DataStoreTabBar from '../sections/DataStoreTabBar'
 import PageHeader from '../header/PageHeader'
-import SearchField from '../sections/SearchField'
-import ItemsTable from '../table/ItemsTable'
+import DataStoreTabBar from '../sections/DataStoreTabBar'
+import NamespaceDataSection from '../sections/NamespaceDataSection'
+
+const userDataStoreNamespacesQuery = {
+    results: {
+        resource: 'userDataStore',
+    },
+}
+
+const dataStoreNamespacesQuery = {
+    results: {
+        resource: 'dataStore',
+    },
+}
+
+export type FieldValues = {
+    namespace?: string
+    key?: string
+}
 
 const NamespacesPage = () => {
     const navigate = useNavigate()
     const { store } = useParams()
 
-    const data = {
-        results: [
-            'AUTO_CONFIG',
-            'CLIMATE_DATA',
-            'DHIS2_MAPS_APP',
-            'METADATASTORE',
-        ],
-    }
-
     const [activeTab, setActiveTab] = useState(store || 'dataStore')
 
     const handleSwitchTab = (selectedTab) => {
@@ -40,30 +45,22 @@ const NamespacesPage = () => {
         <div className={classes.firstPage}>
             <PageHeader>
                 <span className={classes.firstPageHeader}>
-                    Configure Namespaces
+                    {i18n.t('Configure Namespaces')}
                 </span>
             </PageHeader>
-
             <div className={classes.firstPageContainer}>
-                <div>
-                    <DataStoreTabBar
-                        activeTab={activeTab}
-                        switchTab={handleSwitchTab}
-                    />
-                </div>
-                <div className={classes.midSection}>
-                    <SearchField placeholder={i18n.t('Search namespaces')} />
-                    <CreateButton
-                        label={i18n.t('New Namespace')}
-                        handleClick={() => console.log('create new namespace')}
-                        icon={<IconAdd24 color={colors.grey600} />}
+                <DataStoreTabBar
+                    activeTab={activeTab}
+                    switchTab={handleSwitchTab}
+                />
+                {store === 'dataStore' && (
+                    <NamespaceDataSection query={dataStoreNamespacesQuery} />
+                )}
+                {store === 'userDataStore' && (
+                    <NamespaceDataSection
+                        query={userDataStoreNamespacesQuery}
                     />
-                </div>
-                <div>
-                    {data && (
-                        <ItemsTable data={data} label={i18n.t('Namespace')} />
-                    )}
-                </div>
+                )}
             </div>
         </div>
     )

src/components/sections/NamespaceDataSection.tsx

@@ -0,0 +1,44 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import { IconAdd24, colors } from '@dhis2/ui'
+import React from 'react'
+import classes from '../../App.module.css'
+import i18n from '../../locales'
+import ErrorNotice from '../error/ErrorNotice'
+import CenteredLoader from '../loader/Loader'
+import ItemsTable from '../table/ItemsTable'
+import CreateButton from './CreateButton'
+import SearchField from './SearchField'
+
+interface QueryResults {
+    results: []
+}
+
+const NamespaceDataSection = ({ query }) => {
+    const { error, loading, data } = useDataQuery<QueryResults>(query)
+
+    if (error) {
+        return <ErrorNotice />
+    }
+
+    if (loading) {
+        return <CenteredLoader />
+    }
+
+    return (
+        <>
+            <div className={classes.midSection}>
+                <SearchField placeholder={i18n.t('Search namespaces')} />
+                <CreateButton
+                    label={i18n.t('New Namespace')}
+                    handleClick={() => console.log('create new namespace')}
+                    icon={<IconAdd24 color={colors.grey600} />}
+                />
+            </div>
+            <div>
+                {data && <ItemsTable data={data} label={i18n.t('Namespace')} />}
+            </div>
+        </>
+    )
+}
+
+export default NamespaceDataSection