feat: fetch and display keys in a namespace

src/components/panels/KeysPanel.tsx

@@ -5,43 +5,43 @@ import classes from '../../App.module.css'
 import i18n from '../../locales'
 import PanelHeader from '../header/PanelHeader'
 import CreateButton from '../sections/CreateButton'
-import SearchField from '../sections/SearchField'
-import ItemsTable from '../table/ItemsTable'
+import KeysDataSection from '../sections/KeysDataSection'
 
-const KeysPanel = () => {
-    const { namespace } = useParams()
+const userDataStoreKeysQuery = {
+    results: {
+        resource: 'userDataStore',
+        id: ({ id }) => id,
+    },
+}
+
+const dataStoreKeysQuery = {
+    results: {
+        resource: 'dataStore',
+        id: ({ id }) => id,
+    },
+}
 
-    const data = {
-        results: [
-            'settings',
-            'configuration',
-            'source',
-            'managed_versions',
-            'configuration_managed',
-            'settings_old',
-            'virtual_storage',
-        ],
-    }
+const KeysPanel = () => {
+    const { namespace, store } = useParams()
 
     return (
         <>
             <PanelHeader>
                 <span className={classes.keysPanelHeader}>
-                    {namespace} {i18n.t('Keys')}
+                    {namespace} {i18n.t('keys')}
                 </span>
                 <CreateButton
                     label={i18n.t('New Key')}
                     handleClick={() => console.log('create new key')}
                     icon={<IconAdd16 color={colors.grey600} />}
                 />
             </PanelHeader>
-
-            <div className={classes.keysPanelMidSection}>
-                <SearchField placeholder={i18n.t('Search keys')} />
-            </div>
-            <div>
-                {data && <ItemsTable data={data} label={i18n.t('Key')} />}
-            </div>
+            {store === 'dataStore' && (
+                <KeysDataSection query={dataStoreKeysQuery} />
+            )}
+            {store === 'userDataStore' && (
+                <KeysDataSection query={userDataStoreKeysQuery} />
+            )}
         </>
     )
 }

src/components/sections/KeysDataSection.tsx

@@ -0,0 +1,44 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import React from 'react'
+import { useParams } from 'react-router-dom'
+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 SearchField from './SearchField'
+
+interface QueryResults {
+    results: []
+}
+
+const KeysDataSection = ({ query }) => {
+    const { namespace: currentNamespace } = useParams()
+
+    const { error, loading, data } = useDataQuery<QueryResults>(query, {
+        variables: {
+            id: currentNamespace,
+        },
+    })
+
+    if (error) {
+        return <ErrorNotice />
+    }
+
+    if (loading) {
+        return <CenteredLoader />
+    }
+
+    return (
+        <>
+            <div className={classes.keysPanelMidSection}>
+                <SearchField placeholder={i18n.t('Search keys')} />
+            </div>
+            <div>
+                {data && <ItemsTable data={data} label={i18n.t('Key')} />}
+            </div>
+        </>
+    )
+}
+
+export default KeysDataSection