feat: modify layout, error page and routes

src/components/EmptyArea.tsx

@@ -7,18 +7,10 @@ const EmptyArea = () => {
     const { store, namespace } = useParams()
     return (
         <>
-            {!store && (
-                <Center>
-                    <NoticeBox title={i18n.t('View namespaces')}>
-                        {i18n.t("Select a datastore to show namespaces")}
-                    </NoticeBox>
-                </Center>
-            )}
             {store && !namespace && (
                 <Center>
                     <NoticeBox title={i18n.t('View keys')}>
-                        {i18n.t("Click a namespace to show keys")}
-
+                        {i18n.t('Click a namespace to view its keys')}
                     </NoticeBox>
                 </Center>
             )}

src/components/create/CreateModal.tsx

@@ -28,44 +28,37 @@ const CreateModal = ({
             <ModalContent>
                 {addNewNamespace && (
                     <InputField
-                        label={i18n.t("Namespace")}
+                        label={i18n.t('Namespace')}
                         required
                         initialFocus
                         value={values?.namespace}
                         onChange={({ value }) => {
                             setValues({
                                 ...values,
-                                ["namespace"]: value
+                                ['namespace']: value,
                             })
-                        }
-                        }
+                        }}
                     />
                 )}
                 <InputField
-                    label={i18n.t("Key")}
+                    label={i18n.t('Key')}
                     required
                     initialFocus={addNewKey}
                     value={values?.key}
-                        onChange={({ value }) => {
-                            setValues({
-                                ...values,
-                                ["key"]: value
-                            })
-                        }
-                        }
+                    onChange={({ value }) => {
+                        setValues({
+                            ...values,
+                            ['key']: value,
+                        })
+                    }}
                 />
             </ModalContent>
             <ModalActions>
                 <ButtonStrip end>
                     <Button secondary onClick={closeModal}>
                         {i18n.t('Cancel')}
                     </Button>
-                    <Button
-                        primary
-                        onClick={() =>
-                            createFn(values)
-                        }
-                    >
+                    <Button primary onClick={() => createFn(values)}>
                         {addNewKey && i18n.t('Add Key')}
                         {addNewNamespace && i18n.t('Add Namespace')}
                     </Button>
@@ -78,10 +71,10 @@ const CreateModal = ({
 CreateModal.propTypes = {
     addNewKey: PropTypes.bool,
     addNewNamespace: PropTypes.bool,
+    closeModal: PropTypes.func,
     createFn: PropTypes.func,
-    values: PropTypes.object,
     setValues: PropTypes.func,
-    closeModal: PropTypes.func
+    values: PropTypes.object,
 }
 
 export default CreateModal

src/components/create/Toolbar.tsx

@@ -20,7 +20,7 @@ const Toolbar = () => {
         namespace?: string
         key?: unknown
     }) => {
-        let resource = ""
+        let resource = ''
         if (addNewNamespace) {
             resource = `${store}/${values?.namespace}/${values?.key}`
         } else if (addNewKey) {
@@ -37,9 +37,9 @@ const Toolbar = () => {
                 onComplete: () => {
                     let url = ''
                     if (addNewNamespace) {
-                        url = `${store}/${values?.namespace}/edit/${values?.key}`
+                        url = `${store}/edit/${values?.namespace}/${values?.key}`
                     } else if (addNewKey) {
-                        url = `${store}/${namespace}/edit/${values?.key}`
+                        url = `${store}/edit/${namespace}/${values?.key}`
                     }
                     navigate(url)
 

src/components/edit/Edit.tsx

@@ -8,18 +8,16 @@ import Editor from './Editor'
 const modifyKeyMutation = ({ store }) => ({
     type: 'update' as const,
     resource: `${store}`,
-    id: ({ key, namespace }: { key: string, namespace: string }) => `${namespace}/${key}`,
+    id: ({ key, namespace }: { key: string; namespace: string }) =>
+        `${namespace}/${key}`,
     data: ({ value }) => JSON.parse(value),
 })
 
-const keyValuesQuery = ({
-    store
-}: {
-    store: string
-}) => ({
+const keyValuesQuery = ({ store }: { store: string }) => ({
     results: {
         resource: `${store}`,
-        id: ({ key, namespace }: { key: string, namespace: string }) => `${namespace}/${key}`,
+        id: ({ key, namespace }: { key: string; namespace: string }) =>
+            `${namespace}/${key}`,
     },
 })
 
@@ -33,7 +31,7 @@ const Edit = () => {
     } = useDataQuery(keyValuesQuery({ store }), {
         variables: {
             key,
-            namespace
+            namespace,
         },
     })
 
@@ -57,7 +55,7 @@ const Edit = () => {
     const handleEditorChange = (value) => {
         setValue(value)
     }
-   
+
     useEffect(() => {
         setValue(JSON.stringify(data?.results, null, 4))
     }, [data])
@@ -66,7 +64,7 @@ const Edit = () => {
         refetch({ key, namespace })
     }, [key, namespace, store, refetch])
 
-    const loadingText = i18n.t("Loading")
+    const loadingText = i18n.t('Loading')
 
     return (
         <div

src/components/keys/keysTable.tsx

@@ -11,9 +11,9 @@ import React, { useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import classes from '../../App.module.css'
 import i18n from '../../locales'
+import DeleteButton from '../delete/DeleteButton'
 import DeleteModal from '../delete/DeleteModal'
 import CenteredLoader from '../Loader'
-import DeleteButton from '../delete/DeleteButton'
 
 interface QueryResults {
     results: []
@@ -31,7 +31,7 @@ const KeysTable = () => {
     const navigate = useNavigate()
     const engine = useDataEngine()
 
-    const { data, loading, refetch } = useDataQuery(
+    const { data, loading, refetch } = useDataQuery<QueryResults>(
         fetchNamespaceQuery({ store }),
         {
             variables: {
@@ -84,10 +84,9 @@ const KeysTable = () => {
                             <>
                                 {data.results.map((key, index) => {
                                     const handleClick = () => {
-                                        const url = `/${store}/${namespace}/edit/${key}`
+                                        const url = `/${store}/edit/${namespace}/${key}`
                                         navigate(url)
                                     }
-
                                     return (
                                         <DataTableRow key={`${key}-${index}`}>
                                             <DataTableCell

src/components/namespaces/LinksList.tsx

@@ -8,7 +8,7 @@ import DeleteModal from '../delete/DeleteModal'
 import CenteredLoader from '../Loader'
 import SidebarNavLink from '../sidebar/SidebarNavLink'
 
-function LinksList({ data, error, loading, refetch }) {
+function LinksList({ data, error, loading, refetchList }) {
     const { store, namespace, key } = useParams()
     const [openModal, setOpenModal] = useState(false)
     const [selectedNamespace, setSelectedNamespace] = useState('')
@@ -23,13 +23,14 @@ function LinksList({ data, error, loading, refetch }) {
         })
 
         setOpenModal(false)
-        refetch()
+        refetchList()
         navigate(`${store}`)
     }
 
     useEffect(() => {
-        refetch()
+        refetchList()
     }, [store, namespace, key])
+
     return (
         <div className={classes.sidebarList}>
             {error && <span>{i18n.t('ERROR')}</span>}
@@ -42,7 +43,7 @@ function LinksList({ data, error, loading, refetch }) {
                             return (
                                 <SidebarNavLink
                                     key={`${index}-${namespace}`}
-                                    to={`/${store}/${namespace}`}
+                                    to={`/${store}/edit/${namespace}`}
                                     label={namespace}
                                     handleDeleteModal={() => {
                                         setOpenModal(true)
@@ -79,7 +80,7 @@ LinksList.propTypes = {
     data: PropTypes.object,
     error: PropTypes.any,
     loading: PropTypes.any,
-    refetch: PropTypes.func,
+    refetchList: PropTypes.func,
 }
 
 export default LinksList

src/components/sidebar/DataStoreSelect.tsx

@@ -1,7 +1,6 @@
 import { SingleSelectField, SingleSelectOption } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-// import classes from '../../App.module.css'
 import i18n from '../../locales'
 
 const DataStoreSelect = ({ option, handleChange }) => {