From 6991dd57111690b7fea3a31c88b9c4fc8b95a4a2 Mon Sep 17 00:00:00 2001
From: Diana Nanyanzi <diana@dhis2.org>
Date: Fri, 6 Dec 2024 21:58:25 +0300
Subject: [PATCH 1/8] feat: implement three panel design layout

---
 i18n/en.pot                                  |  28 ++--
 src/App.tsx                                  |   6 +-
 src/components/keys/keysTable.tsx            |   2 +-
 src/components/namespaces/LinksList.tsx      |   2 +-
 src/components/panel/CreateButton.tsx        |  25 ++++
 src/components/panel/DataStoreControl.tsx    |  30 ++++
 src/components/panel/EmptyPanelEditor.tsx    |  25 ++++
 src/components/panel/KeysSidePanel.tsx       | 109 ++++++++++++++
 src/components/panel/Main.tsx                |  17 +++
 src/components/panel/NamespacesSidePanel.tsx | 103 ++++++++++++++
 src/components/panel/Panel.module.css        | 141 +++++++++++++++++++
 src/components/panel/PanelEdit.tsx           | 136 ++++++++++++++++++
 src/components/panel/PanelEditor.tsx         |  21 +++
 src/components/panel/PanelEmptyArea.tsx      |  29 ++++
 src/components/panel/PanelError.tsx          |  68 +++++++++
 src/components/panel/PanelErrorPage.tsx      |  13 ++
 src/components/panel/PanelHeader.tsx         |  10 ++
 src/components/panel/PanelLink.tsx           |  55 ++++++++
 src/components/panel/PanelLinksList.tsx      |  62 ++++++++
 src/components/panel/PanelRouter.tsx         |  48 +++++++
 src/components/panel/SearchField.tsx         |  14 ++
 src/components/panel/SidebarPanel.tsx        |  39 +++++
 src/components/panel/ThreePanelLayout.tsx    |  19 +++
 src/components/sidebar/sidebar.tsx           |   2 +-
 24 files changed, 985 insertions(+), 19 deletions(-)
 create mode 100644 src/components/panel/CreateButton.tsx
 create mode 100644 src/components/panel/DataStoreControl.tsx
 create mode 100644 src/components/panel/EmptyPanelEditor.tsx
 create mode 100644 src/components/panel/KeysSidePanel.tsx
 create mode 100644 src/components/panel/Main.tsx
 create mode 100644 src/components/panel/NamespacesSidePanel.tsx
 create mode 100644 src/components/panel/Panel.module.css
 create mode 100644 src/components/panel/PanelEdit.tsx
 create mode 100644 src/components/panel/PanelEditor.tsx
 create mode 100644 src/components/panel/PanelEmptyArea.tsx
 create mode 100644 src/components/panel/PanelError.tsx
 create mode 100644 src/components/panel/PanelErrorPage.tsx
 create mode 100644 src/components/panel/PanelHeader.tsx
 create mode 100644 src/components/panel/PanelLink.tsx
 create mode 100644 src/components/panel/PanelLinksList.tsx
 create mode 100644 src/components/panel/PanelRouter.tsx
 create mode 100644 src/components/panel/SearchField.tsx
 create mode 100644 src/components/panel/SidebarPanel.tsx
 create mode 100644 src/components/panel/ThreePanelLayout.tsx

diff --git a/i18n/en.pot b/i18n/en.pot
index f3cc6aa..45add9d 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ 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-12-05T03:27:06.316Z\n"
-"PO-Revision-Date: 2024-12-05T03:27:06.317Z\n"
+"POT-Creation-Date: 2024-12-06T19:16:44.628Z\n"
+"PO-Revision-Date: 2024-12-06T19:16:44.628Z\n"
 
 msgid "View keys"
 msgstr "View keys"
@@ -14,6 +14,9 @@ msgstr "View keys"
 msgid "Click a namespace to view its keys"
 msgstr "Click a namespace to view its keys"
 
+msgid "An error occurred"
+msgstr "An error occurred"
+
 msgid "Add New Key"
 msgstr "Add New Key"
 
@@ -56,9 +59,6 @@ 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"
 
@@ -89,20 +89,20 @@ msgstr "Namespaces"
 msgid "This will delete all the keys in this namespace"
 msgstr "This will delete all the keys in this namespace"
 
+msgid "New"
+msgstr "New"
+
 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 "Select a namespace and key to edit its values"
+msgstr "Select a namespace and key to edit its values"
 
-msgid "Back"
-msgstr "Back"
+msgid "Error"
+msgstr "Error"
 
-msgid "Back to DataStore"
-msgstr "Back to DataStore"
+msgid "Search"
+msgstr "Search"
diff --git a/src/App.tsx b/src/App.tsx
index bdfee63..b993b01 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,14 @@
 import React, { FC } from 'react'
 import { RouterProvider } from 'react-router-dom'
 import AppWrapper from './components/AppWrapper'
-import { router } from './routes/Router'
+import { threePanelRouter } from './components/panel/PanelRouter'
+// import { router } from './routes/Router'
 
 const App: FC = () => {
     return (
         <AppWrapper>
-            <RouterProvider router={router} />
+            {/* <RouterProvider router={router} /> */}
+            <RouterProvider router={threePanelRouter} />
         </AppWrapper>
     )
 }
diff --git a/src/components/keys/keysTable.tsx b/src/components/keys/keysTable.tsx
index 17b8b81..f0d049b 100644
--- a/src/components/keys/keysTable.tsx
+++ b/src/components/keys/keysTable.tsx
@@ -49,7 +49,7 @@ const KeysTable = () => {
 
     useEffect(() => {
         refetch({ id: namespace })
-    }, [namespace])
+    }, [namespace, refetch])
 
     const handleDeleteAction = async (key) => {
         await engine.mutate(
diff --git a/src/components/namespaces/LinksList.tsx b/src/components/namespaces/LinksList.tsx
index c866f20..8133c26 100644
--- a/src/components/namespaces/LinksList.tsx
+++ b/src/components/namespaces/LinksList.tsx
@@ -50,7 +50,7 @@ function LinksList({ data, error, loading, refetchList }) {
 
     useEffect(() => {
         refetchList()
-    }, [store, namespace, key])
+    }, [store, namespace, key, refetchList])
 
     return (
         <div className={classes.sidebarList}>
diff --git a/src/components/panel/CreateButton.tsx b/src/components/panel/CreateButton.tsx
new file mode 100644
index 0000000..9a0f307
--- /dev/null
+++ b/src/components/panel/CreateButton.tsx
@@ -0,0 +1,25 @@
+import { Button } from '@dhis2/ui'
+import { IconAdd16 } from '@dhis2/ui-icons'
+import React from 'react'
+import i18n from '../../locales'
+import classes from './Panel.module.css'
+
+const CreateButton = () => {
+    return (
+        <div className={classes.createButton}>
+            <Button
+                aria-label={i18n.t('New')}
+                icon={<IconAdd16 />}
+                name="New button"
+                onClick={() => {
+                    console.log('Launch create modal')
+                }}
+                title={i18n.t('New')}
+            >
+                {i18n.t('New')}
+            </Button>
+        </div>
+    )
+}
+
+export default CreateButton
diff --git a/src/components/panel/DataStoreControl.tsx b/src/components/panel/DataStoreControl.tsx
new file mode 100644
index 0000000..83c7e51
--- /dev/null
+++ b/src/components/panel/DataStoreControl.tsx
@@ -0,0 +1,30 @@
+import { SegmentedControl } from '@dhis2/ui'
+import React from 'react'
+import i18n from '../../locales'
+
+type DataStoreControlProps = {
+    option: string
+    handleChange: (payload, event) => void
+}
+
+export default function DataStoreControl({
+    option,
+    handleChange,
+}: DataStoreControlProps) {
+    return (
+        <SegmentedControl
+            onChange={handleChange}
+            options={[
+                {
+                    label: i18n.t('DataStore'),
+                    value: 'dataStore',
+                },
+                {
+                    label: i18n.t('User DataStore'),
+                    value: 'userDataStore',
+                },
+            ]}
+            selected={option}
+        />
+    )
+}
diff --git a/src/components/panel/EmptyPanelEditor.tsx b/src/components/panel/EmptyPanelEditor.tsx
new file mode 100644
index 0000000..5bccba5
--- /dev/null
+++ b/src/components/panel/EmptyPanelEditor.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import i18n from '../../locales'
+import PanelEditor from './PanelEditor'
+import { PanelHeader } from './PanelHeader'
+
+export default function EmptyPanelEditor({
+    placeholder,
+}: {
+    placeholder?: string
+}) {
+    const defaultMessage = i18n.t(
+        'Select a namespace and key to edit its values'
+    )
+    return (
+        <div>
+            <PanelHeader>
+                <span>Editor</span>
+            </PanelHeader>
+            <PanelEditor
+                value={placeholder || defaultMessage}
+                handleChange={() => console.log('')}
+            />
+        </div>
+    )
+}
diff --git a/src/components/panel/KeysSidePanel.tsx b/src/components/panel/KeysSidePanel.tsx
new file mode 100644
index 0000000..57f58a9
--- /dev/null
+++ b/src/components/panel/KeysSidePanel.tsx
@@ -0,0 +1,109 @@
+import { useDataQuery } from '@dhis2/app-service-data'
+import React, { useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import { PanelHeader } from './PanelHeader'
+import SidebarPanel from './SidebarPanel'
+
+interface QueryResults {
+    results: []
+}
+
+const dataStoreQuery = {
+    results: {
+        resource: 'dataStore',
+        id: ({ id }) => id,
+    },
+}
+
+const userDataStoreQuery = {
+    results: {
+        resource: 'userDataStore',
+        id: ({ id }) => id,
+    },
+}
+
+const KeysSidePanel = () => {
+    // const navigate = useNavigate()
+    const { store, namespace } = useParams()
+    // const [option, setOption] = useState(store || '')
+
+    const RenderDataStoreKeys = () => {
+        const {
+            error: dataStoreQueryError,
+            loading: dataStoreQueryLoading,
+            data: dataStoreQueryData,
+            refetch: refetchDataStore,
+        } = useDataQuery<QueryResults>(dataStoreQuery, {
+            variables: {
+                id: namespace,
+            },
+        })
+
+        useEffect(() => {
+            refetchDataStore()
+        }, [store])
+
+        return (
+            <SidebarPanel
+                data={dataStoreQueryData}
+                error={dataStoreQueryError}
+                loading={dataStoreQueryLoading}
+                refetchList={refetchDataStore}
+                type="keys"
+            />
+        )
+    }
+
+    const RenderUserDataStoreKeys = () => {
+        const {
+            error: userDataStoreQueryError,
+            loading: userDataStoreQueryLoading,
+            data: userDataStoreQueryData,
+            refetch: refetchUserDataStore,
+        } = useDataQuery<QueryResults>(userDataStoreQuery, {
+            variables: {
+                id: namespace,
+            },
+        })
+
+        useEffect(() => {
+            refetchUserDataStore()
+        }, [store])
+
+        return (
+            <SidebarPanel
+                data={userDataStoreQueryData}
+                error={userDataStoreQueryError}
+                loading={userDataStoreQueryLoading}
+                refetchList={refetchUserDataStore}
+                type="keys"
+            />
+        )
+    }
+
+    return (
+        <>
+            {namespace && (
+                <>
+                    <PanelHeader>
+                        <>
+                            {' '}
+                            <b>{namespace}</b>
+                        </>
+                    </PanelHeader>
+
+                    {store && (
+                        <>
+                            {store === 'userDataStore' && (
+                                <RenderUserDataStoreKeys />
+                            )}
+                            {store === 'dataStore' && <RenderDataStoreKeys />}
+                        </>
+                    )}
+                </>
+            )}
+        </>
+    )
+}
+
+export default KeysSidePanel
diff --git a/src/components/panel/Main.tsx b/src/components/panel/Main.tsx
new file mode 100644
index 0000000..bfad11d
--- /dev/null
+++ b/src/components/panel/Main.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Outlet } from 'react-router-dom'
+import KeysSidePanel from './KeysSidePanel'
+import classes from './Panel.module.css'
+
+export default function Main() {
+    return (
+        <>
+            <div className={classes.sidebar}>
+                <KeysSidePanel />
+            </div>
+            <div>
+                <Outlet />
+            </div>
+        </>
+    )
+}
diff --git a/src/components/panel/NamespacesSidePanel.tsx b/src/components/panel/NamespacesSidePanel.tsx
new file mode 100644
index 0000000..d76ec6e
--- /dev/null
+++ b/src/components/panel/NamespacesSidePanel.tsx
@@ -0,0 +1,103 @@
+import { useDataQuery } from '@dhis2/app-service-data'
+import React, { useEffect, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import DataStoreControl from './DataStoreControl'
+import { PanelHeader } from './PanelHeader'
+import SidebarPanel from './SidebarPanel'
+
+interface QueryResults {
+    results: []
+}
+
+const dataStoreQuery = {
+    results: {
+        resource: 'dataStore',
+    },
+}
+
+const userDataStoreQuery = {
+    results: {
+        resource: 'userDataStore',
+    },
+}
+
+const NamespacesSidePanel = () => {
+    const navigate = useNavigate()
+    const { store } = useParams()
+    const [option, setOption] = useState(store || '')
+
+    const RenderUserDataStorePanel = () => {
+        const {
+            error: userDataStoreQueryError,
+            loading: userDataStoreQueryLoading,
+            data: userDataStoreQueryData,
+            refetch: refetchUserDataStore,
+        } = useDataQuery<QueryResults>(userDataStoreQuery)
+
+        useEffect(() => {
+            refetchUserDataStore()
+        }, [store])
+
+        return (
+            <SidebarPanel
+                data={userDataStoreQueryData}
+                error={userDataStoreQueryError}
+                loading={userDataStoreQueryLoading}
+                refetchList={refetchUserDataStore}
+                type="namespace"
+            />
+        )
+    }
+
+    const RenderDataStorePanel = () => {
+        const {
+            error: dataStoreQueryError,
+            loading: dataStoreQueryLoading,
+            data: dataStoreQueryData,
+            refetch: refetchDataStore,
+        } = useDataQuery<QueryResults>(dataStoreQuery)
+
+        useEffect(() => {
+            refetchDataStore()
+        }, [store])
+
+        return (
+            <SidebarPanel
+                data={dataStoreQueryData}
+                error={dataStoreQueryError}
+                loading={dataStoreQueryLoading}
+                refetchList={refetchDataStore}
+                type="namespace"
+            />
+        )
+    }
+
+    const handleDataStoreSelect = ({ value }) => {
+        setOption(value)
+        navigate(`/${value}`)
+    }
+
+    useEffect(() => {
+        const storeOptions = ['dataStore', 'userDataStore']
+        if (!storeOptions.includes(store)) {
+            navigate('/dataStore')
+        } else {
+            setOption(store)
+        }
+    }, [store])
+
+    return (
+        <>
+            <PanelHeader>
+                <DataStoreControl
+                    option={option}
+                    handleChange={handleDataStoreSelect}
+                />
+            </PanelHeader>
+            {store === 'userDataStore' && <RenderUserDataStorePanel />}
+            {store === 'dataStore' && <RenderDataStorePanel />}
+        </>
+    )
+}
+
+export default NamespacesSidePanel
diff --git a/src/components/panel/Panel.module.css b/src/components/panel/Panel.module.css
new file mode 100644
index 0000000..8d8971d
--- /dev/null
+++ b/src/components/panel/Panel.module.css
@@ -0,0 +1,141 @@
+.container {
+    /* width: 100%; */
+    /* height: 100vh; */
+    box-sizing: border-box;
+    /* height: 100%; */
+    /* display: flex; */
+    /* flex-direction: row; */
+    /* font-size: 1rem; */
+    display: grid;
+    grid-template-columns: 400px auto;
+    border-bottom: 1px solid var(--colors-grey100);
+}
+
+.panelHeader {
+    height: 5vh;
+    padding: 0.3em;
+    border-bottom: 1px solid var(--colors-grey300);
+}
+
+.sidebar {
+    border-right: 1px solid var(--colors-grey300);
+    /* margin-top: 0.5em */
+    /* padding: 0.5em; */
+    /* width: 30%; */
+    /* margin: 0.1em; */
+}
+
+.sidebarContent {
+    padding: 0.5em;
+    margin-top: 0.5em;
+    /* margin: 0; */
+    /* padding: 0.3em; */
+    /* width: 20%; */
+}
+
+.createButton {
+    width: 100%;
+}
+
+.createButton button {
+    margin: 0.5em 0 0.3em 0;
+    width: 100%;
+    border: none;
+}
+
+.top {
+    /* margin-top: 0.5em; */
+}
+
+.bottom {
+    /* margin-bottom: 0.5em; */
+}
+
+.sidebarList h4 {
+    /* padding: 0; */
+    /* margin: 0.5em; */
+}
+
+.sidebarList ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.select {
+    /* height: 70px; */
+    /* padding: 0; */
+    /* margin: 0; */
+}
+
+/* main area */
+
+.main {
+    display: grid;
+    grid-template-columns: 400px auto;
+}
+
+/* --- 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 {
+    width: 100%;
+    /* display: grid; */
+    /* grid-template-rows: 1fr 2fr 1fr; */
+    /* background-color: aliceblue; */
+    /* border: 1px solid red; */
+    /* height: 50px; */
+    min-height: 36px;
+    border-radius: 10px;
+}
+
+.navLink button {
+    /* border: 0; */
+}
+
+.navLink a {
+    /* display: block;   */
+    /* min-height: 36px; */
+    padding: 5px;
+    /* background: var(--colors-grey100);  */
+    text-decoration: none;
+    color: var(--colors-grey900);
+    font-size: 15px;
+    display: grid;
+    grid-template-columns: 25px auto 30px;
+    border-radius: 10px;
+    /* display: flex; */
+    /* align-items: center; */
+}
+
+.navLink a button {
+    border: none;
+    background-color: transparent;
+}
+.navLink:hover,
+.navLink a:hover {
+    background: var(--colors-grey100);
+}
+.navLink:focus,
+.navLink a:focus {
+    outline: 2px solid white;
+    background: var(--colors-teal050);
+    outline-offset: -2px;
+}
+
+.navLink a.active,
+.navLink :global(.active) {
+    /* font-weight: 500; */
+    background: var(--colors-teal050);
+    /* box-shadow: inset 6px 0px 0px 0px var(--colors-grey500); */
+}
+.navLink.active:hover {
+    background: var(--colors-teal050);
+}
diff --git a/src/components/panel/PanelEdit.tsx b/src/components/panel/PanelEdit.tsx
new file mode 100644
index 0000000..b7883c9
--- /dev/null
+++ b/src/components/panel/PanelEdit.tsx
@@ -0,0 +1,136 @@
+import { useDataMutation, useDataQuery } from '@dhis2/app-runtime'
+import { Button } from '@dhis2-ui/button'
+import React, { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import useCustomAlert from '../../hooks/useCustomAlert'
+import i18n from '../../locales'
+import Error from '../Error'
+import PanelEditor from './PanelEditor'
+import { PanelHeader } from './PanelHeader'
+
+const modifyKeyMutation = ({ store }) => ({
+    type: 'update' as const,
+    resource: `${store}`,
+    id: ({ key, namespace }: { key: string; namespace: string }) =>
+        `${namespace}/${key}`,
+    data: ({ value }) => JSON.parse(value),
+})
+
+const keyValuesQuery = ({ store }: { store: string }) => ({
+    results: {
+        resource: `${store}`,
+        id: ({ key, namespace }: { key: string; namespace: string }) =>
+            `${namespace}/${key}`,
+    },
+})
+
+// const useKeyValuesQuery = ({ store, key, namespace }) => {
+//     if (key && namespace) {
+//         return useDataQuery(keyValuesQuery({ store }), {
+//             variables: {
+//                 key,
+//                 namespace,
+//             },
+//         })
+//     } else {
+//         return {
+//             data: null,
+//             loading: false,
+//             error: null,
+//             refetch: () => Promise.resolve(),
+//         }
+//     }
+// }
+
+const PanelEdit = () => {
+    const { key, namespace, store } = useParams()
+    const { showSuccess, showError } = useCustomAlert()
+
+    const {
+        data,
+        loading: queryLoading,
+        error,
+        refetch,
+    } = useDataQuery(keyValuesQuery({ store }), {
+        variables: {
+            key,
+            namespace,
+        },
+    })
+
+    const [value, setValue] = useState(
+        'Select a namespace and key to edit its values'
+    )
+
+    const [updateKey, { loading }] = useDataMutation(
+        // @ts-expect-error("")
+        modifyKeyMutation({ store }),
+        {
+            onComplete: () => {
+                const message = i18n.t('Key successfully updated')
+                showSuccess(message)
+            },
+            onError: () => {
+                const message = i18n.t('There was an error updating the key')
+                showError(message)
+            },
+        }
+    )
+
+    const handleEditorChange = (value) => {
+        setValue(value)
+    }
+
+    useEffect(() => {
+        setValue(JSON.stringify(data?.results, null, 4))
+    }, [data])
+
+    useEffect(() => {
+        refetch({ key, namespace })
+    }, [key, namespace, store, refetch])
+
+    if (error) {
+        return <Error err={error.details} />
+    }
+
+    const loadingText = `${i18n.t('Loading')}...`
+
+    return (
+        <>
+            <PanelHeader>
+                <div
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                    }}
+                >
+                    <span>{key && key}</span>
+
+                    <Button
+                        aria-label="Save"
+                        name="save"
+                        onClick={async () => {
+                            await updateKey({
+                                key,
+                                namespace,
+                                value,
+                            })
+                        }}
+                        title="Save"
+                        primary
+                        loading={loading}
+                    >
+                        {i18n.t('Save changes')}
+                    </Button>
+                </div>
+            </PanelHeader>
+            <PanelEditor
+                value={queryLoading ? loadingText : value}
+                handleChange={handleEditorChange}
+            />
+        </>
+    )
+}
+
+export default PanelEdit
diff --git a/src/components/panel/PanelEditor.tsx b/src/components/panel/PanelEditor.tsx
new file mode 100644
index 0000000..5fbefa0
--- /dev/null
+++ b/src/components/panel/PanelEditor.tsx
@@ -0,0 +1,21 @@
+import { json } from '@codemirror/lang-json'
+import CodeMirror, { ViewUpdate } from '@uiw/react-codemirror'
+import React from 'react'
+
+type PanelEditorProps = {
+    handleChange?: (value: string, viewUpdate: ViewUpdate) => void
+    value: string
+}
+
+const PanelEditor = ({ value, handleChange }: PanelEditorProps) => {
+    return (
+        <CodeMirror
+            value={value}
+            height="90vh"
+            extensions={[json()]}
+            onChange={handleChange}
+        />
+    )
+}
+
+export default PanelEditor
diff --git a/src/components/panel/PanelEmptyArea.tsx b/src/components/panel/PanelEmptyArea.tsx
new file mode 100644
index 0000000..f297431
--- /dev/null
+++ b/src/components/panel/PanelEmptyArea.tsx
@@ -0,0 +1,29 @@
+import { NoticeBox } from '@dhis2/ui'
+import React from 'react'
+import { useParams } from 'react-router-dom'
+import i18n from '../../locales'
+import EmptyPanelEditor from './EmptyPanelEditor'
+import classes from './Panel.module.css'
+import { PanelHeader } from './PanelHeader'
+
+const PanelEmptyArea = () => {
+    const { store, namespace } = useParams()
+    return (
+        <>
+            <div className={classes.sidebar}>
+                <PanelHeader>
+                    <span>Keys Panel</span>
+                </PanelHeader>
+                {store && !namespace && (
+                    <div className={classes.sidebarContent}>
+                        <NoticeBox title={i18n.t('View keys')}>
+                            {i18n.t('Click a namespace to view its keys')}
+                        </NoticeBox>
+                    </div>
+                )}
+            </div>
+            <EmptyPanelEditor />
+        </>
+    )
+}
+export default PanelEmptyArea
diff --git a/src/components/panel/PanelError.tsx b/src/components/panel/PanelError.tsx
new file mode 100644
index 0000000..b9b0c8d
--- /dev/null
+++ b/src/components/panel/PanelError.tsx
@@ -0,0 +1,68 @@
+import { NoticeBox } from '@dhis2/ui'
+import React from 'react'
+import { Link, isRouteErrorResponse, useRouteError } from 'react-router-dom'
+import i18n from '../../locales'
+import classes from './Panel.module.css'
+import { PanelHeader } from './PanelHeader'
+
+interface Error {
+    status?: number
+    statusText?: string
+    internal?: boolean
+    data?: string
+    message?: string
+}
+
+export type ErrorResponse = {
+    httpStatus?: string
+    httpStatusCode?: number
+    status?: string
+    message?: string
+    errorCode?: string
+}
+
+type PassedErrorProps = {
+    err?: ErrorResponse
+}
+
+export default function PanelError({ err }: PassedErrorProps) {
+    const error: Error = useRouteError()
+
+    return (
+        <div id="error-page" className={classes.sidebar}>
+            <PanelHeader>
+                <span>Error</span>
+            </PanelHeader>
+            <div className={classes.sidebarContent}>
+                <NoticeBox title={i18n.t('An error occurred')} error>
+                    {isRouteErrorResponse(error) ? (
+                        <>
+                            <p>
+                                <b>
+                                    {error.status} {error.statusText}{' '}
+                                </b>
+                                <span>- {error.data}</span>
+                            </p>
+                        </>
+                    ) : (
+                        <p>
+                            <b>
+                                {error.status} {error.statusText}{' '}
+                            </b>
+                            {error?.message && <span>- {error.message}</span>}
+                        </p>
+                    )}
+                    {err && (
+                        <p>
+                            <b>
+                                {err.httpStatusCode} {err.httpStatus}{' '}
+                            </b>
+                            {err?.message && <span>- {err.message}</span>}
+                        </p>
+                    )}
+                    <Link to={'/dataStore'}>Back to datastore</Link>
+                </NoticeBox>
+            </div>
+        </div>
+    )
+}
diff --git a/src/components/panel/PanelErrorPage.tsx b/src/components/panel/PanelErrorPage.tsx
new file mode 100644
index 0000000..d97bf08
--- /dev/null
+++ b/src/components/panel/PanelErrorPage.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import i18n from '../../locales'
+import EmptyPanelEditor from './EmptyPanelEditor'
+import PanelError from './PanelError'
+
+export default function PanelErrorPage() {
+    return (
+        <>
+            <PanelError />
+            <EmptyPanelEditor placeholder={i18n.t('Error')} />
+        </>
+    )
+}
diff --git a/src/components/panel/PanelHeader.tsx b/src/components/panel/PanelHeader.tsx
new file mode 100644
index 0000000..afa8c22
--- /dev/null
+++ b/src/components/panel/PanelHeader.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import classes from './Panel.module.css'
+
+type PanelHeaderProps = {
+    children?: React.ReactElement
+}
+
+export function PanelHeader({ children }: PanelHeaderProps) {
+    return <div className={classes.panelHeader}>{children}</div>
+}
diff --git a/src/components/panel/PanelLink.tsx b/src/components/panel/PanelLink.tsx
new file mode 100644
index 0000000..d662aa7
--- /dev/null
+++ b/src/components/panel/PanelLink.tsx
@@ -0,0 +1,55 @@
+import { Button } from '@dhis2/ui'
+import {
+    IconFile16,
+    IconMore16,
+    IconFolder16,
+    IconFolderOpen16,
+} from '@dhis2/ui-icons'
+import React from 'react'
+import { NavLink } from 'react-router-dom'
+import classes from './Panel.module.css'
+
+type SidebarPanelLinkProps = {
+    label: string
+    to: string
+    type: string
+}
+
+const SidebarPanelLink = ({ to, label, type }: SidebarPanelLinkProps) => {
+    const renderIcon = ({ isActive }) =>
+        type === 'namespace' ? (
+            isActive ? (
+                <IconFolderOpen16 />
+            ) : (
+                <IconFolder16 />
+            )
+        ) : (
+            <IconFile16 />
+        )
+    return (
+        <li className={classes.navLink}>
+            <NavLink
+                to={to}
+                className={({ isActive }) => {
+                    return isActive ? 'active' : ''
+                }}
+            >
+                {({ isActive }) => (
+                    <>
+                        {renderIcon({ isActive })}
+                        <span>{label}</span>
+                        <Button
+                            aria-label="More"
+                            icon={<IconMore16 />}
+                            name="more"
+                            // onClick={}
+                            title="More"
+                        />
+                    </>
+                )}
+            </NavLink>
+        </li>
+    )
+}
+
+export default SidebarPanelLink
diff --git a/src/components/panel/PanelLinksList.tsx b/src/components/panel/PanelLinksList.tsx
new file mode 100644
index 0000000..8992164
--- /dev/null
+++ b/src/components/panel/PanelLinksList.tsx
@@ -0,0 +1,62 @@
+import React, { useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import CenteredLoader from '../Loader'
+import classes from './Panel.module.css'
+import { ErrorResponse } from './PanelError'
+import SidebarPanelLink from './PanelLink'
+
+type PanelLinksListProps = {
+    data: { results: [] }
+    error: { details: ErrorResponse }
+    loading: boolean
+    refetchList: () => void
+    type: string
+}
+
+function PanelLinksList({
+    data,
+    error,
+    loading,
+    refetchList,
+    type,
+}: PanelLinksListProps) {
+    const { store, namespace, key } = useParams()
+    // const [selectedLink, setSelectedLink] = useState('')
+
+    useEffect(() => {
+        refetchList()
+    }, [store, namespace, key, refetchList])
+
+    if (error) {
+        throw new Response('', {
+            status: error?.details.httpStatusCode,
+            statusText: error?.details.status || error.details.message,
+        })
+    }
+
+    return (
+        <div className={classes.sidebarList}>
+            {loading && <CenteredLoader />}
+            {data && (
+                <ul>
+                    {data.results.map((value: string, index) => {
+                        const path =
+                            type === 'namespace'
+                                ? `/${store}/edit/${value}`
+                                : `/${store}/edit/${namespace}/${value}`
+                        return (
+                            <SidebarPanelLink
+                                key={`${index}-${value}`}
+                                to={path}
+                                label={value}
+                                type={type}
+                            />
+                        )
+                    })}
+                </ul>
+            )}
+        </div>
+    )
+}
+
+export default PanelLinksList
diff --git a/src/components/panel/PanelRouter.tsx b/src/components/panel/PanelRouter.tsx
new file mode 100644
index 0000000..61caa08
--- /dev/null
+++ b/src/components/panel/PanelRouter.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { Navigate, createHashRouter } from 'react-router-dom'
+import EmptyPanelEditor from './EmptyPanelEditor'
+import Main from './Main'
+import PanelEdit from './PanelEdit'
+import PanelEmptyArea from './PanelEmptyArea'
+import PanelError from './PanelError'
+import PanelErrorPage from './PanelErrorPage'
+import ThreePanelLayout from './ThreePanelLayout'
+
+export const threePanelRouter = createHashRouter([
+    {
+        path: '/',
+        errorElement: <PanelError />,
+        element: <ThreePanelLayout />,
+        children: [
+            { index: true, element: <Navigate to={'dataStore'} replace /> },
+            {
+                path: ':store',
+                children: [
+                    {
+                        errorElement: <PanelErrorPage />,
+                        children: [
+                            {
+                                index: true,
+                                element: <PanelEmptyArea />,
+                            },
+                            {
+                                path: 'edit/:namespace',
+                                element: <Main />,
+                                children: [
+                                    {
+                                        index: true,
+                                        element: <EmptyPanelEditor />,
+                                    },
+                                    {
+                                        path: ':key',
+                                        element: <PanelEdit />,
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    },
+])
diff --git a/src/components/panel/SearchField.tsx b/src/components/panel/SearchField.tsx
new file mode 100644
index 0000000..76e464c
--- /dev/null
+++ b/src/components/panel/SearchField.tsx
@@ -0,0 +1,14 @@
+import { InputField } from '@dhis2/ui'
+import React from 'react'
+import i18n from '../../locales'
+import classes from './Panel.module.css'
+
+const PanelSearchField = () => {
+    return (
+        <div className={classes.bottom}>
+            <InputField name="search" placeholder={i18n.t('Search')} />
+        </div>
+    )
+}
+
+export default PanelSearchField
diff --git a/src/components/panel/SidebarPanel.tsx b/src/components/panel/SidebarPanel.tsx
new file mode 100644
index 0000000..87a1210
--- /dev/null
+++ b/src/components/panel/SidebarPanel.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import CreateButton from './CreateButton'
+import classes from './Panel.module.css'
+import { ErrorResponse } from './PanelError'
+import PanelLinksList from './PanelLinksList'
+import PanelSearchField from './SearchField'
+
+type SidebarPanelProps = {
+    data: { results: [] }
+    error: { details: ErrorResponse }
+    loading: boolean
+    refetchList: () => void
+    type: string
+}
+
+const SidebarPanel = ({
+    data,
+    error,
+    loading,
+    refetchList,
+    type,
+}: SidebarPanelProps) => {
+    console.log(data, type, 'sidebar panel')
+    return (
+        <div className={classes.sidebarContent}>
+            <PanelSearchField />
+            <CreateButton />
+            <PanelLinksList
+                data={data}
+                error={error}
+                loading={loading}
+                refetchList={refetchList}
+                type={type}
+            />
+        </div>
+    )
+}
+
+export default SidebarPanel
diff --git a/src/components/panel/ThreePanelLayout.tsx b/src/components/panel/ThreePanelLayout.tsx
new file mode 100644
index 0000000..bd627ab
--- /dev/null
+++ b/src/components/panel/ThreePanelLayout.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { Outlet } from 'react-router-dom'
+import NamespacesSidePanel from './NamespacesSidePanel'
+import classes from './Panel.module.css'
+
+function ThreePanelLayout() {
+    return (
+        <div className={classes.container}>
+            <div id="sidebar" className={classes.sidebar}>
+                <NamespacesSidePanel />
+            </div>
+            <main id="main" className={classes.main}>
+                <Outlet />
+            </main>
+        </div>
+    )
+}
+
+export default ThreePanelLayout
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
index 106830a..9487089 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -49,7 +49,7 @@ const Sidebar = () => {
         } else {
             setOption(store)
         }
-    }, [store])
+    }, [store, navigate])
 
     const handleDataStoreSelect = ({ selected }) => {
         setOption(selected)

From 29af7dde9ce0222b64b45d2964a69c9431112188 Mon Sep 17 00:00:00 2001
From: Diana Nanyanzi <diana@dhis2.org>
Date: Sat, 7 Dec 2024 00:18:03 +0300
Subject: [PATCH 2/8] chore: reorganise files

---
 i18n/en.pot                                      | 16 ++++++++--------
 src/App.tsx                                      |  2 +-
 .../panel/{PanelEdit.tsx => EditPanel.tsx}       |  0
 .../panel/{KeysSidePanel.tsx => KeysPanel.tsx}   |  6 +++---
 ...mespacesSidePanel.tsx => NamespacesPanel.tsx} | 12 +++++++-----
 src/components/panel/Panel.module.css            |  2 +-
 src/components/panel/PanelErrorPage.tsx          | 13 -------------
 .../{PanelEmptyArea.tsx => empty/EmptyArea.tsx}  | 14 +++++++-------
 .../EmptyEditor.tsx}                             | 14 +++++---------
 .../{PanelError.tsx => error/ErrorComponent.tsx} | 10 +++++-----
 src/components/panel/error/ErrorPanel.tsx        | 13 +++++++++++++
 src/components/panel/{ => routes}/Main.tsx       |  4 ++--
 .../panel/{ => routes}/PanelRouter.tsx           | 10 +++++-----
 .../panel/{ => routes}/ThreePanelLayout.tsx      |  4 ++--
 .../panel/{ => sidepanel}/CreateButton.tsx       |  4 ++--
 .../panel/{ => sidepanel}/DataStoreControl.tsx   |  2 +-
 .../panel/{ => sidepanel}/PanelLink.tsx          |  2 +-
 .../panel/{ => sidepanel}/PanelLinksList.tsx     |  6 +++---
 .../panel/{ => sidepanel}/SearchField.tsx        |  4 ++--
 .../SidePanel.tsx}                               | 12 ++++++------
 20 files changed, 74 insertions(+), 76 deletions(-)
 rename src/components/panel/{PanelEdit.tsx => EditPanel.tsx} (100%)
 rename src/components/panel/{KeysSidePanel.tsx => KeysPanel.tsx} (96%)
 rename src/components/panel/{NamespacesSidePanel.tsx => NamespacesPanel.tsx} (89%)
 delete mode 100644 src/components/panel/PanelErrorPage.tsx
 rename src/components/panel/{PanelEmptyArea.tsx => empty/EmptyArea.tsx} (71%)
 rename src/components/panel/{EmptyPanelEditor.tsx => empty/EmptyEditor.tsx} (60%)
 rename src/components/panel/{PanelError.tsx => error/ErrorComponent.tsx} (89%)
 create mode 100644 src/components/panel/error/ErrorPanel.tsx
 rename src/components/panel/{ => routes}/Main.tsx (78%)
 rename src/components/panel/{ => routes}/PanelRouter.tsx (86%)
 rename src/components/panel/{ => routes}/ThreePanelLayout.tsx (81%)
 rename src/components/panel/{ => sidepanel}/CreateButton.tsx (88%)
 rename src/components/panel/{ => sidepanel}/DataStoreControl.tsx (95%)
 rename src/components/panel/{ => sidepanel}/PanelLink.tsx (97%)
 rename src/components/panel/{ => sidepanel}/PanelLinksList.tsx (92%)
 rename src/components/panel/{ => sidepanel}/SearchField.tsx (78%)
 rename src/components/panel/{SidebarPanel.tsx => sidepanel/SidePanel.tsx} (79%)

diff --git a/i18n/en.pot b/i18n/en.pot
index 45add9d..d09fdc0 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ 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-12-06T19:16:44.628Z\n"
-"PO-Revision-Date: 2024-12-06T19:16:44.628Z\n"
+"POT-Creation-Date: 2024-12-06T20:56:19.444Z\n"
+"PO-Revision-Date: 2024-12-06T20:56:19.445Z\n"
 
 msgid "View keys"
 msgstr "View keys"
@@ -89,6 +89,12 @@ msgstr "Namespaces"
 msgid "This will delete all the keys in this namespace"
 msgstr "This will delete all the keys in this namespace"
 
+msgid "Select a namespace and key to edit its values"
+msgstr "Select a namespace and key to edit its values"
+
+msgid "Error"
+msgstr "Error"
+
 msgid "New"
 msgstr "New"
 
@@ -98,11 +104,5 @@ msgstr "DataStore"
 msgid "User DataStore"
 msgstr "User DataStore"
 
-msgid "Select a namespace and key to edit its values"
-msgstr "Select a namespace and key to edit its values"
-
-msgid "Error"
-msgstr "Error"
-
 msgid "Search"
 msgstr "Search"
diff --git a/src/App.tsx b/src/App.tsx
index b993b01..b3c9254 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { RouterProvider } from 'react-router-dom'
 import AppWrapper from './components/AppWrapper'
-import { threePanelRouter } from './components/panel/PanelRouter'
+import { threePanelRouter } from './components/panel/routes/PanelRouter'
 // import { router } from './routes/Router'
 
 const App: FC = () => {
diff --git a/src/components/panel/PanelEdit.tsx b/src/components/panel/EditPanel.tsx
similarity index 100%
rename from src/components/panel/PanelEdit.tsx
rename to src/components/panel/EditPanel.tsx
diff --git a/src/components/panel/KeysSidePanel.tsx b/src/components/panel/KeysPanel.tsx
similarity index 96%
rename from src/components/panel/KeysSidePanel.tsx
rename to src/components/panel/KeysPanel.tsx
index 57f58a9..6866365 100644
--- a/src/components/panel/KeysSidePanel.tsx
+++ b/src/components/panel/KeysPanel.tsx
@@ -2,7 +2,7 @@ import { useDataQuery } from '@dhis2/app-service-data'
 import React, { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 import { PanelHeader } from './PanelHeader'
-import SidebarPanel from './SidebarPanel'
+import SidebarPanel from './sidepanel/SidePanel'
 
 interface QueryResults {
     results: []
@@ -22,7 +22,7 @@ const userDataStoreQuery = {
     },
 }
 
-const KeysSidePanel = () => {
+const KeysPanel = () => {
     // const navigate = useNavigate()
     const { store, namespace } = useParams()
     // const [option, setOption] = useState(store || '')
@@ -106,4 +106,4 @@ const KeysSidePanel = () => {
     )
 }
 
-export default KeysSidePanel
+export default KeysPanel
diff --git a/src/components/panel/NamespacesSidePanel.tsx b/src/components/panel/NamespacesPanel.tsx
similarity index 89%
rename from src/components/panel/NamespacesSidePanel.tsx
rename to src/components/panel/NamespacesPanel.tsx
index d76ec6e..a89a747 100644
--- a/src/components/panel/NamespacesSidePanel.tsx
+++ b/src/components/panel/NamespacesPanel.tsx
@@ -1,9 +1,9 @@
 import { useDataQuery } from '@dhis2/app-service-data'
 import React, { useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
-import DataStoreControl from './DataStoreControl'
 import { PanelHeader } from './PanelHeader'
-import SidebarPanel from './SidebarPanel'
+import DataStoreControl from './sidepanel/DataStoreControl'
+import SidebarPanel from './sidepanel/SidePanel'
 
 interface QueryResults {
     results: []
@@ -21,10 +21,10 @@ const userDataStoreQuery = {
     },
 }
 
-const NamespacesSidePanel = () => {
+const NamespacesPanel = () => {
     const navigate = useNavigate()
     const { store } = useParams()
-    const [option, setOption] = useState(store || '')
+    const [option, setOption] = useState(store || 'dataStore')
 
     const RenderUserDataStorePanel = () => {
         const {
@@ -77,8 +77,10 @@ const NamespacesSidePanel = () => {
         navigate(`/${value}`)
     }
 
+    console.log('store', store)
     useEffect(() => {
         const storeOptions = ['dataStore', 'userDataStore']
+        // console.log("store", store)
         if (!storeOptions.includes(store)) {
             navigate('/dataStore')
         } else {
@@ -100,4 +102,4 @@ const NamespacesSidePanel = () => {
     )
 }
 
-export default NamespacesSidePanel
+export default NamespacesPanel
diff --git a/src/components/panel/Panel.module.css b/src/components/panel/Panel.module.css
index 8d8971d..b7ca098 100644
--- a/src/components/panel/Panel.module.css
+++ b/src/components/panel/Panel.module.css
@@ -8,7 +8,7 @@
     /* font-size: 1rem; */
     display: grid;
     grid-template-columns: 400px auto;
-    border-bottom: 1px solid var(--colors-grey100);
+    border: 1px solid var(--colors-grey300);
 }
 
 .panelHeader {
diff --git a/src/components/panel/PanelErrorPage.tsx b/src/components/panel/PanelErrorPage.tsx
deleted file mode 100644
index d97bf08..0000000
--- a/src/components/panel/PanelErrorPage.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import i18n from '../../locales'
-import EmptyPanelEditor from './EmptyPanelEditor'
-import PanelError from './PanelError'
-
-export default function PanelErrorPage() {
-    return (
-        <>
-            <PanelError />
-            <EmptyPanelEditor placeholder={i18n.t('Error')} />
-        </>
-    )
-}
diff --git a/src/components/panel/PanelEmptyArea.tsx b/src/components/panel/empty/EmptyArea.tsx
similarity index 71%
rename from src/components/panel/PanelEmptyArea.tsx
rename to src/components/panel/empty/EmptyArea.tsx
index f297431..ad6c706 100644
--- a/src/components/panel/PanelEmptyArea.tsx
+++ b/src/components/panel/empty/EmptyArea.tsx
@@ -1,18 +1,18 @@
 import { NoticeBox } from '@dhis2/ui'
 import React from 'react'
 import { useParams } from 'react-router-dom'
-import i18n from '../../locales'
-import EmptyPanelEditor from './EmptyPanelEditor'
-import classes from './Panel.module.css'
-import { PanelHeader } from './PanelHeader'
+import i18n from '../../../locales'
+import classes from '../Panel.module.css'
+import { PanelHeader } from '../PanelHeader'
+import EmptyPanelEditor from './EmptyEditor'
 
-const PanelEmptyArea = () => {
+const EmptyArea = () => {
     const { store, namespace } = useParams()
     return (
         <>
             <div className={classes.sidebar}>
                 <PanelHeader>
-                    <span>Keys Panel</span>
+                    <span>{''}</span>
                 </PanelHeader>
                 {store && !namespace && (
                     <div className={classes.sidebarContent}>
@@ -26,4 +26,4 @@ const PanelEmptyArea = () => {
         </>
     )
 }
-export default PanelEmptyArea
+export default EmptyArea
diff --git a/src/components/panel/EmptyPanelEditor.tsx b/src/components/panel/empty/EmptyEditor.tsx
similarity index 60%
rename from src/components/panel/EmptyPanelEditor.tsx
rename to src/components/panel/empty/EmptyEditor.tsx
index 5bccba5..b3774ae 100644
--- a/src/components/panel/EmptyPanelEditor.tsx
+++ b/src/components/panel/empty/EmptyEditor.tsx
@@ -1,20 +1,16 @@
 import React from 'react'
-import i18n from '../../locales'
-import PanelEditor from './PanelEditor'
-import { PanelHeader } from './PanelHeader'
+import i18n from '../../../locales'
+import PanelEditor from '../PanelEditor'
+import { PanelHeader } from '../PanelHeader'
 
-export default function EmptyPanelEditor({
-    placeholder,
-}: {
-    placeholder?: string
-}) {
+export default function EmptyEditor({ placeholder }: { placeholder?: string }) {
     const defaultMessage = i18n.t(
         'Select a namespace and key to edit its values'
     )
     return (
         <div>
             <PanelHeader>
-                <span>Editor</span>
+                <span>{''}</span>
             </PanelHeader>
             <PanelEditor
                 value={placeholder || defaultMessage}
diff --git a/src/components/panel/PanelError.tsx b/src/components/panel/error/ErrorComponent.tsx
similarity index 89%
rename from src/components/panel/PanelError.tsx
rename to src/components/panel/error/ErrorComponent.tsx
index b9b0c8d..babec59 100644
--- a/src/components/panel/PanelError.tsx
+++ b/src/components/panel/error/ErrorComponent.tsx
@@ -1,9 +1,9 @@
 import { NoticeBox } from '@dhis2/ui'
 import React from 'react'
 import { Link, isRouteErrorResponse, useRouteError } from 'react-router-dom'
-import i18n from '../../locales'
-import classes from './Panel.module.css'
-import { PanelHeader } from './PanelHeader'
+import i18n from '../../../locales'
+import classes from '../Panel.module.css'
+import { PanelHeader } from '../PanelHeader'
 
 interface Error {
     status?: number
@@ -25,13 +25,13 @@ type PassedErrorProps = {
     err?: ErrorResponse
 }
 
-export default function PanelError({ err }: PassedErrorProps) {
+export default function ErrorComponent({ err }: PassedErrorProps) {
     const error: Error = useRouteError()
 
     return (
         <div id="error-page" className={classes.sidebar}>
             <PanelHeader>
-                <span>Error</span>
+                <span>{''}</span>
             </PanelHeader>
             <div className={classes.sidebarContent}>
                 <NoticeBox title={i18n.t('An error occurred')} error>
diff --git a/src/components/panel/error/ErrorPanel.tsx b/src/components/panel/error/ErrorPanel.tsx
new file mode 100644
index 0000000..6d2ee20
--- /dev/null
+++ b/src/components/panel/error/ErrorPanel.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import i18n from '../../../locales'
+import EmptyPanelEditor from '../empty/EmptyEditor'
+import ErrorComponent from './ErrorComponent'
+
+export default function ErrorPanel() {
+    return (
+        <>
+            <ErrorComponent />
+            <EmptyPanelEditor placeholder={i18n.t('Error')} />
+        </>
+    )
+}
diff --git a/src/components/panel/Main.tsx b/src/components/panel/routes/Main.tsx
similarity index 78%
rename from src/components/panel/Main.tsx
rename to src/components/panel/routes/Main.tsx
index bfad11d..38cbf5a 100644
--- a/src/components/panel/Main.tsx
+++ b/src/components/panel/routes/Main.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
-import KeysSidePanel from './KeysSidePanel'
-import classes from './Panel.module.css'
+import KeysSidePanel from '../KeysPanel'
+import classes from '../Panel.module.css'
 
 export default function Main() {
     return (
diff --git a/src/components/panel/PanelRouter.tsx b/src/components/panel/routes/PanelRouter.tsx
similarity index 86%
rename from src/components/panel/PanelRouter.tsx
rename to src/components/panel/routes/PanelRouter.tsx
index 61caa08..b210e3f 100644
--- a/src/components/panel/PanelRouter.tsx
+++ b/src/components/panel/routes/PanelRouter.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Navigate, createHashRouter } from 'react-router-dom'
-import EmptyPanelEditor from './EmptyPanelEditor'
+import PanelEdit from '../EditPanel'
+import PanelEmptyArea from '../empty/EmptyArea'
+import EmptyPanelEditor from '../empty/EmptyEditor'
+import PanelError from '../error/ErrorComponent'
+import PanelErrorPage from '../error/ErrorPanel'
 import Main from './Main'
-import PanelEdit from './PanelEdit'
-import PanelEmptyArea from './PanelEmptyArea'
-import PanelError from './PanelError'
-import PanelErrorPage from './PanelErrorPage'
 import ThreePanelLayout from './ThreePanelLayout'
 
 export const threePanelRouter = createHashRouter([
diff --git a/src/components/panel/ThreePanelLayout.tsx b/src/components/panel/routes/ThreePanelLayout.tsx
similarity index 81%
rename from src/components/panel/ThreePanelLayout.tsx
rename to src/components/panel/routes/ThreePanelLayout.tsx
index bd627ab..e4edc35 100644
--- a/src/components/panel/ThreePanelLayout.tsx
+++ b/src/components/panel/routes/ThreePanelLayout.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
-import NamespacesSidePanel from './NamespacesSidePanel'
-import classes from './Panel.module.css'
+import NamespacesSidePanel from '../NamespacesPanel'
+import classes from '../Panel.module.css'
 
 function ThreePanelLayout() {
     return (
diff --git a/src/components/panel/CreateButton.tsx b/src/components/panel/sidepanel/CreateButton.tsx
similarity index 88%
rename from src/components/panel/CreateButton.tsx
rename to src/components/panel/sidepanel/CreateButton.tsx
index 9a0f307..03ffbbb 100644
--- a/src/components/panel/CreateButton.tsx
+++ b/src/components/panel/sidepanel/CreateButton.tsx
@@ -1,8 +1,8 @@
 import { Button } from '@dhis2/ui'
 import { IconAdd16 } from '@dhis2/ui-icons'
 import React from 'react'
-import i18n from '../../locales'
-import classes from './Panel.module.css'
+import i18n from '../../../locales'
+import classes from '../Panel.module.css'
 
 const CreateButton = () => {
     return (
diff --git a/src/components/panel/DataStoreControl.tsx b/src/components/panel/sidepanel/DataStoreControl.tsx
similarity index 95%
rename from src/components/panel/DataStoreControl.tsx
rename to src/components/panel/sidepanel/DataStoreControl.tsx
index 83c7e51..995c6c5 100644
--- a/src/components/panel/DataStoreControl.tsx
+++ b/src/components/panel/sidepanel/DataStoreControl.tsx
@@ -1,6 +1,6 @@
 import { SegmentedControl } from '@dhis2/ui'
 import React from 'react'
-import i18n from '../../locales'
+import i18n from '../../../locales'
 
 type DataStoreControlProps = {
     option: string
diff --git a/src/components/panel/PanelLink.tsx b/src/components/panel/sidepanel/PanelLink.tsx
similarity index 97%
rename from src/components/panel/PanelLink.tsx
rename to src/components/panel/sidepanel/PanelLink.tsx
index d662aa7..41f6997 100644
--- a/src/components/panel/PanelLink.tsx
+++ b/src/components/panel/sidepanel/PanelLink.tsx
@@ -7,7 +7,7 @@ import {
 } from '@dhis2/ui-icons'
 import React from 'react'
 import { NavLink } from 'react-router-dom'
-import classes from './Panel.module.css'
+import classes from '../Panel.module.css'
 
 type SidebarPanelLinkProps = {
     label: string
diff --git a/src/components/panel/PanelLinksList.tsx b/src/components/panel/sidepanel/PanelLinksList.tsx
similarity index 92%
rename from src/components/panel/PanelLinksList.tsx
rename to src/components/panel/sidepanel/PanelLinksList.tsx
index 8992164..0cc5a2a 100644
--- a/src/components/panel/PanelLinksList.tsx
+++ b/src/components/panel/sidepanel/PanelLinksList.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
-import CenteredLoader from '../Loader'
-import classes from './Panel.module.css'
-import { ErrorResponse } from './PanelError'
+import CenteredLoader from '../../Loader'
+import { ErrorResponse } from '../error/ErrorComponent'
+import classes from '../Panel.module.css'
 import SidebarPanelLink from './PanelLink'
 
 type PanelLinksListProps = {
diff --git a/src/components/panel/SearchField.tsx b/src/components/panel/sidepanel/SearchField.tsx
similarity index 78%
rename from src/components/panel/SearchField.tsx
rename to src/components/panel/sidepanel/SearchField.tsx
index 76e464c..6e51b56 100644
--- a/src/components/panel/SearchField.tsx
+++ b/src/components/panel/sidepanel/SearchField.tsx
@@ -1,7 +1,7 @@
 import { InputField } from '@dhis2/ui'
 import React from 'react'
-import i18n from '../../locales'
-import classes from './Panel.module.css'
+import i18n from '../../../locales'
+import classes from '../Panel.module.css'
 
 const PanelSearchField = () => {
     return (
diff --git a/src/components/panel/SidebarPanel.tsx b/src/components/panel/sidepanel/SidePanel.tsx
similarity index 79%
rename from src/components/panel/SidebarPanel.tsx
rename to src/components/panel/sidepanel/SidePanel.tsx
index 87a1210..f499d7c 100644
--- a/src/components/panel/SidebarPanel.tsx
+++ b/src/components/panel/sidepanel/SidePanel.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
+import { ErrorResponse } from '../error/ErrorComponent'
+import classes from '../Panel.module.css'
 import CreateButton from './CreateButton'
-import classes from './Panel.module.css'
-import { ErrorResponse } from './PanelError'
 import PanelLinksList from './PanelLinksList'
 import PanelSearchField from './SearchField'
 
-type SidebarPanelProps = {
+type SidePanelProps = {
     data: { results: [] }
     error: { details: ErrorResponse }
     loading: boolean
@@ -13,13 +13,13 @@ type SidebarPanelProps = {
     type: string
 }
 
-const SidebarPanel = ({
+const SidePanel = ({
     data,
     error,
     loading,
     refetchList,
     type,
-}: SidebarPanelProps) => {
+}: SidePanelProps) => {
     console.log(data, type, 'sidebar panel')
     return (
         <div className={classes.sidebarContent}>
@@ -36,4 +36,4 @@ const SidebarPanel = ({
     )
 }
 
-export default SidebarPanel
+export default SidePanel

From c62f5368109e51abaaa83e24a64e77eb79eb4beb Mon Sep 17 00:00:00 2001
From: Diana Nanyanzi <diana@dhis2.org>
Date: Sat, 7 Dec 2024 01:17:30 +0300
Subject: [PATCH 3/8] feat: implement add namespace and key functionality

---
 src/components/panel/modals/CreateModal.tsx   | 79 ++++++++++++++++++
 .../panel/sidepanel/CreateButton.tsx          | 14 ++--
 src/components/panel/sidepanel/SidePanel.tsx  | 81 ++++++++++++++++++-
 3 files changed, 163 insertions(+), 11 deletions(-)
 create mode 100644 src/components/panel/modals/CreateModal.tsx

diff --git a/src/components/panel/modals/CreateModal.tsx b/src/components/panel/modals/CreateModal.tsx
new file mode 100644
index 0000000..f908fb2
--- /dev/null
+++ b/src/components/panel/modals/CreateModal.tsx
@@ -0,0 +1,79 @@
+import {
+    Modal,
+    ModalTitle,
+    ModalContent,
+    ModalActions,
+    Button,
+    ButtonStrip,
+    InputField,
+} from '@dhis2/ui'
+import React from 'react'
+import i18n from '../../../locales'
+import { CreateFieldValues } from '../sidepanel/SidePanel'
+
+type CreateModalProps = {
+    createFn: (values) => void,
+    values: CreateFieldValues,
+    setValues: (values) => void,
+    closeModal: () => void,
+    title: string,
+    type: string,
+    buttonLabel: string
+}
+
+const CreateModal = ({
+    createFn,
+    values,
+    setValues,
+    closeModal,
+    title,
+    type,
+    buttonLabel
+}: CreateModalProps) => {
+    return (
+        <Modal>
+            <ModalTitle>
+                {title}
+            </ModalTitle>
+            <ModalContent>
+                {type === 'namespace' && (
+                    <InputField
+                        label={i18n.t('Namespace')}
+                        required
+                        initialFocus
+                        value={values?.namespace}
+                        onChange={({ value }) => {
+                            setValues({
+                                ...values,
+                                ['namespace']: value,
+                            })
+                        }}
+                    />
+                )}
+                <InputField
+                    label={i18n.t('Key')}
+                    required
+                    initialFocus={type !== 'namespace'}
+                    value={values?.key}
+                    onChange={({ value }) => {
+                        setValues({
+                            ...values,
+                            ['key']: value,
+                        })
+                    }}
+                />
+            </ModalContent>
+            <ModalActions>
+                <ButtonStrip end>
+                    <Button secondary onClick={closeModal}>
+                        {i18n.t('Cancel')}
+                    </Button>
+                    <Button primary onClick={() => createFn(values)}>
+                        {buttonLabel}
+                    </Button>
+                </ButtonStrip>
+            </ModalActions>
+        </Modal>
+    )
+}
+export default CreateModal
diff --git a/src/components/panel/sidepanel/CreateButton.tsx b/src/components/panel/sidepanel/CreateButton.tsx
index 03ffbbb..67cf2e9 100644
--- a/src/components/panel/sidepanel/CreateButton.tsx
+++ b/src/components/panel/sidepanel/CreateButton.tsx
@@ -4,19 +4,17 @@ import React from 'react'
 import i18n from '../../../locales'
 import classes from '../Panel.module.css'
 
-const CreateButton = () => {
+const CreateButton = ({ label, handleClick }) => {
     return (
         <div className={classes.createButton}>
             <Button
-                aria-label={i18n.t('New')}
+                aria-label={label}
                 icon={<IconAdd16 />}
-                name="New button"
-                onClick={() => {
-                    console.log('Launch create modal')
-                }}
-                title={i18n.t('New')}
+                name="create"
+                onClick={handleClick}
+                title={label}
             >
-                {i18n.t('New')}
+                {label}
             </Button>
         </div>
     )
diff --git a/src/components/panel/sidepanel/SidePanel.tsx b/src/components/panel/sidepanel/SidePanel.tsx
index f499d7c..f41221d 100644
--- a/src/components/panel/sidepanel/SidePanel.tsx
+++ b/src/components/panel/sidepanel/SidePanel.tsx
@@ -1,9 +1,13 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { ErrorResponse } from '../error/ErrorComponent'
 import classes from '../Panel.module.css'
 import CreateButton from './CreateButton'
 import PanelLinksList from './PanelLinksList'
 import PanelSearchField from './SearchField'
+import i18n from '../../../locales'
+import CreateModal from '../modals/CreateModal'
+import { useDataEngine } from '@dhis2/app-service-data'
+import { useNavigate, useParams } from 'react-router'
 
 type SidePanelProps = {
     data: { results: [] }
@@ -13,6 +17,11 @@ type SidePanelProps = {
     type: string
 }
 
+export type CreateFieldValues = {
+    namespace?: string,
+    key?: string
+}
+
 const SidePanel = ({
     data,
     error,
@@ -20,11 +29,66 @@ const SidePanel = ({
     refetchList,
     type,
 }: SidePanelProps) => {
-    console.log(data, type, 'sidebar panel')
+    const engine = useDataEngine()
+    const navigate = useNavigate()
+    const { store, namespace: currentNamespace } = useParams()
+    const [openModal, setOpenModal] = useState(false)
+    const [values, setValues] = useState({})
+
+    // const { showSuccess, showError } = useCustomAlert()
+
+    const handleCreate = async (values: CreateFieldValues) => {
+        let resource = ''
+        if (type === 'namespace') {
+            resource = `${store}/${values?.namespace}/${values?.key}`
+        } else {
+            resource = `${store}/${currentNamespace}/${values?.key}`
+        }
+
+        await engine.mutate(
+            {
+                type: 'create',
+                resource,
+                data: () => ({}),
+            },
+            {
+                onComplete: () => {
+                    let url = ''
+                    if (type === 'namespace') {
+                        url = `${store}/edit/${values?.namespace}/${values?.key}`
+                    } else {
+                        url = `${values?.key}`
+                    }
+                    const message = i18n.t('Key created successfully')
+                    // showSuccess(message)
+                    navigate(url)
+                    setValues({})
+                },
+                onError: () => {
+                    const message = i18n.t(
+                        'There was an error creating the key'
+                    )
+                    // showError(message)
+                },
+            }
+        )
+        setOpenModal(false)
+    }
+
+    const derivedModalProps = {
+        title: type === "namespace" ? i18n.t("Add New Namespace") : i18n.t("Add New Key"),
+        buttonLabel: type === "namespace" ? i18n.t("Add Namespace") : i18n.t("Add Key"),
+    }
+    const createButtonLabel = type === "namespace" ? i18n.t("New namespace") : i18n.t("New key");
+
     return (
+        <>
         <div className={classes.sidebarContent}>
             <PanelSearchField />
-            <CreateButton />
+            <CreateButton
+                label={createButtonLabel}
+                handleClick={() => setOpenModal(true)}
+             />
             <PanelLinksList
                 data={data}
                 error={error}
@@ -33,6 +97,17 @@ const SidePanel = ({
                 type={type}
             />
         </div>
+        {openModal && (
+            <CreateModal
+                createFn={handleCreate}
+                values={values}
+                setValues={setValues}
+                closeModal={() => setOpenModal(false)}
+                type={type}
+                {...derivedModalProps}
+            />
+        )}
+        </>
     )
 }
 

From 59877d9fea821f42e47831ed99303a79f5044143 Mon Sep 17 00:00:00 2001
From: Diana Nanyanzi <diana@dhis2.org>
Date: Sat, 7 Dec 2024 01:41:20 +0300
Subject: [PATCH 4/8] refactor: error handling in editing panel

---
 src/components/panel/EditPanel.tsx       | 40 +++++++++---------------
 src/components/panel/NamespacesPanel.tsx |  2 --
 2 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/src/components/panel/EditPanel.tsx b/src/components/panel/EditPanel.tsx
index b7883c9..ef74ceb 100644
--- a/src/components/panel/EditPanel.tsx
+++ b/src/components/panel/EditPanel.tsx
@@ -24,24 +24,6 @@ const keyValuesQuery = ({ store }: { store: string }) => ({
     },
 })
 
-// const useKeyValuesQuery = ({ store, key, namespace }) => {
-//     if (key && namespace) {
-//         return useDataQuery(keyValuesQuery({ store }), {
-//             variables: {
-//                 key,
-//                 namespace,
-//             },
-//         })
-//     } else {
-//         return {
-//             data: null,
-//             loading: false,
-//             error: null,
-//             refetch: () => Promise.resolve(),
-//         }
-//     }
-// }
-
 const PanelEdit = () => {
     const { key, namespace, store } = useParams()
     const { showSuccess, showError } = useCustomAlert()
@@ -81,6 +63,20 @@ const PanelEdit = () => {
         setValue(value)
     }
 
+    const handleUpdate = async () => {
+        try {
+            await updateKey({
+                key,
+                namespace,
+                value,
+            })  
+        } catch (error) {
+            const message = i18n.t('There was an error updating the key')
+            showError(message)
+        }
+       
+    }
+
     useEffect(() => {
         setValue(JSON.stringify(data?.results, null, 4))
     }, [data])
@@ -110,13 +106,7 @@ const PanelEdit = () => {
                     <Button
                         aria-label="Save"
                         name="save"
-                        onClick={async () => {
-                            await updateKey({
-                                key,
-                                namespace,
-                                value,
-                            })
-                        }}
+                        onClick={handleUpdate}
                         title="Save"
                         primary
                         loading={loading}
diff --git a/src/components/panel/NamespacesPanel.tsx b/src/components/panel/NamespacesPanel.tsx
index a89a747..39355d6 100644
--- a/src/components/panel/NamespacesPanel.tsx
+++ b/src/components/panel/NamespacesPanel.tsx
@@ -77,10 +77,8 @@ const NamespacesPanel = () => {
         navigate(`/${value}`)
     }
 
-    console.log('store', store)
     useEffect(() => {
         const storeOptions = ['dataStore', 'userDataStore']
-        // console.log("store", store)
         if (!storeOptions.includes(store)) {
             navigate('/dataStore')
         } else {

From c080598e71ef6fc6d53a1d26436a076ce9d6eac8 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 10 Dec 2024 09:30:26 +0100
Subject: [PATCH 5/8] fix: adjust styles

---
 src/components/panel/EditPanel.tsx    | 15 ++++++++++++---
 src/components/panel/KeysPanel.tsx    |  2 +-
 src/components/panel/Panel.module.css | 21 ++++++++++++++-------
 src/components/panel/PanelEditor.tsx  |  1 +
 4 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/components/panel/EditPanel.tsx b/src/components/panel/EditPanel.tsx
index ef74ceb..f2a30c7 100644
--- a/src/components/panel/EditPanel.tsx
+++ b/src/components/panel/EditPanel.tsx
@@ -69,12 +69,11 @@ const PanelEdit = () => {
                 key,
                 namespace,
                 value,
-            })  
+            })
         } catch (error) {
             const message = i18n.t('There was an error updating the key')
             showError(message)
         }
-       
     }
 
     useEffect(() => {
@@ -96,12 +95,21 @@ const PanelEdit = () => {
             <PanelHeader>
                 <div
                     style={{
+                        width: '100%',
                         display: 'flex',
                         flexDirection: 'row',
+                        alignItems: 'center',
                         justifyContent: 'space-between',
                     }}
                 >
-                    <span>{key && key}</span>
+                    <span
+                        style={{
+                            fontSize: '15px',
+                            fontWeight: '700',
+                        }}
+                    >
+                        {key && key}
+                    </span>
 
                     <Button
                         aria-label="Save"
@@ -109,6 +117,7 @@ const PanelEdit = () => {
                         onClick={handleUpdate}
                         title="Save"
                         primary
+                        small
                         loading={loading}
                     >
                         {i18n.t('Save changes')}
diff --git a/src/components/panel/KeysPanel.tsx b/src/components/panel/KeysPanel.tsx
index 6866365..01387a2 100644
--- a/src/components/panel/KeysPanel.tsx
+++ b/src/components/panel/KeysPanel.tsx
@@ -88,7 +88,7 @@ const KeysPanel = () => {
                     <PanelHeader>
                         <>
                             {' '}
-                            <b>{namespace}</b>
+                            <span>{namespace}</span>
                         </>
                     </PanelHeader>
 
diff --git a/src/components/panel/Panel.module.css b/src/components/panel/Panel.module.css
index b7ca098..47dbef8 100644
--- a/src/components/panel/Panel.module.css
+++ b/src/components/panel/Panel.module.css
@@ -7,27 +7,34 @@
     /* flex-direction: row; */
     /* font-size: 1rem; */
     display: grid;
-    grid-template-columns: 400px auto;
+    grid-template-columns: 296px auto;
     border: 1px solid var(--colors-grey300);
 }
 
 .panelHeader {
-    height: 5vh;
-    padding: 0.3em;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    padding: 0 0.5em;
     border-bottom: 1px solid var(--colors-grey300);
 }
+.panelHeader span {
+    font-size: 15px;
+    font-weight: 700;
+}
 
 .sidebar {
-    border-right: 1px solid var(--colors-grey300);
+    border-right: 1px solid var(--colors-grey400);
+    /* background: yellow; */
     /* margin-top: 0.5em */
     /* padding: 0.5em; */
-    /* width: 30%; */
+    /* width: 290px; */
     /* margin: 0.1em; */
 }
 
 .sidebarContent {
     padding: 0.5em;
-    margin-top: 0.5em;
+    margin-top: 0.2em;
     /* margin: 0; */
     /* padding: 0.3em; */
     /* width: 20%; */
@@ -72,7 +79,7 @@
 
 .main {
     display: grid;
-    grid-template-columns: 400px auto;
+    grid-template-columns: 296px auto;
 }
 
 /* --- keys */
diff --git a/src/components/panel/PanelEditor.tsx b/src/components/panel/PanelEditor.tsx
index 5fbefa0..8119ec1 100644
--- a/src/components/panel/PanelEditor.tsx
+++ b/src/components/panel/PanelEditor.tsx
@@ -10,6 +10,7 @@ type PanelEditorProps = {
 const PanelEditor = ({ value, handleChange }: PanelEditorProps) => {
     return (
         <CodeMirror
+            theme="dark"
             value={value}
             height="90vh"
             extensions={[json()]}

From 26867e5f15a37cd98deaa900916b70e075f913f7 Mon Sep 17 00:00:00 2001
From: Diana Nanyanzi <diana@dhis2.org>
Date: Wed, 11 Dec 2024 03:13:51 +0300
Subject: [PATCH 6/8] chore: restructure directory

- Remove redundant ui files
- organise component files
- correct imports
---
 i18n/en.pot                                   |  88 +++------
 src/App.module.css                            | 113 ------------
 src/App.tsx                                   |   4 +-
 src/components/EmptyArea.tsx                  |  20 ---
 src/components/Error.tsx                      |  74 --------
 src/components/{panel => }/Panel.module.css   |  61 +------
 src/components/create/CreateModal.tsx         |  80 ---------
 src/components/create/Toolbar.tsx             | 112 ------------
 src/components/delete/DeleteButton.tsx        |  21 ---
 src/components/delete/DeleteModal.tsx         |  36 ----
 src/components/edit/Edit.tsx                  | 120 -------------
 src/components/edit/Editor.tsx                |  22 ---
 .../{panel => }/empty/EmptyArea.tsx           |   4 +-
 .../{panel => }/empty/EmptyEditor.tsx         |   6 +-
 .../{panel => }/error/ErrorComponent.tsx      |   4 +-
 .../{panel => }/error/ErrorPanel.tsx          |   2 +-
 src/components/keys/Keys.tsx                  |  10 --
 src/components/keys/keysTable.tsx             | 169 ------------------
 .../{panel => }/modals/CreateModal.tsx        |  20 +--
 src/components/namespaces/LinksList.tsx       | 107 -----------
 .../{panel => panels}/EditPanel.tsx           |  20 ++-
 .../{panel => panels}/KeysPanel.tsx           |  10 +-
 .../{panel => panels}/NamespacesPanel.tsx     |  12 +-
 src/components/sidebar/DataStoreSelect.tsx    |  32 ----
 src/components/sidebar/SidebarNavLink.tsx     |  36 ----
 src/components/sidebar/searchField.tsx        |  18 --
 src/components/sidebar/sidebar.tsx            |  92 ----------
 .../{panel => }/sidepanel/CreateButton.tsx    |  11 +-
 .../sidepanel/DataStoreControl.tsx            |   4 +-
 src/components/{ => sidepanel}/Loader.tsx     |   0
 .../{panel => sidepanel}/PanelEditor.tsx      |   0
 .../{panel => sidepanel}/PanelHeader.tsx      |   2 +-
 .../{panel => }/sidepanel/PanelLink.tsx       |   6 +-
 .../{panel => }/sidepanel/PanelLinksList.tsx  |   6 +-
 .../{panel => }/sidepanel/SearchField.tsx     |   2 +-
 .../{panel => }/sidepanel/SidePanel.tsx       |  76 ++++----
 src/hooks/useCustomAlert.tsx                  |   2 +-
 .../routes/Main.tsx => routes/MainLayout.tsx} |   8 +-
 .../panel => }/routes/PanelRouter.tsx         |  14 +-
 .../panel => }/routes/ThreePanelLayout.tsx    |   6 +-
 src/routes/layout.tsx                         |  25 ---
 src/routes/router.tsx                         |  40 -----
 42 files changed, 150 insertions(+), 1345 deletions(-)
 delete mode 100644 src/App.module.css
 delete mode 100644 src/components/EmptyArea.tsx
 delete mode 100644 src/components/Error.tsx
 rename src/components/{panel => }/Panel.module.css (58%)
 delete mode 100644 src/components/create/CreateModal.tsx
 delete mode 100644 src/components/create/Toolbar.tsx
 delete mode 100644 src/components/delete/DeleteButton.tsx
 delete mode 100644 src/components/delete/DeleteModal.tsx
 delete mode 100644 src/components/edit/Edit.tsx
 delete mode 100644 src/components/edit/Editor.tsx
 rename src/components/{panel => }/empty/EmptyArea.tsx (90%)
 rename src/components/{panel => }/empty/EmptyEditor.tsx (77%)
 rename src/components/{panel => }/error/ErrorComponent.tsx (95%)
 rename src/components/{panel => }/error/ErrorPanel.tsx (89%)
 delete mode 100644 src/components/keys/Keys.tsx
 delete mode 100644 src/components/keys/keysTable.tsx
 rename src/components/{panel => }/modals/CreateModal.tsx (86%)
 delete mode 100644 src/components/namespaces/LinksList.tsx
 rename src/components/{panel => panels}/EditPanel.tsx (86%)
 rename src/components/{panel => panels}/KeysPanel.tsx (93%)
 rename src/components/{panel => panels}/NamespacesPanel.tsx (90%)
 delete mode 100644 src/components/sidebar/DataStoreSelect.tsx
 delete mode 100644 src/components/sidebar/SidebarNavLink.tsx
 delete mode 100644 src/components/sidebar/searchField.tsx
 delete mode 100644 src/components/sidebar/sidebar.tsx
 rename src/components/{panel => }/sidepanel/CreateButton.tsx (68%)
 rename src/components/{panel => }/sidepanel/DataStoreControl.tsx (87%)
 rename src/components/{ => sidepanel}/Loader.tsx (100%)
 rename src/components/{panel => sidepanel}/PanelEditor.tsx (100%)
 rename src/components/{panel => sidepanel}/PanelHeader.tsx (83%)
 rename src/components/{panel => }/sidepanel/PanelLink.tsx (90%)
 rename src/components/{panel => }/sidepanel/PanelLinksList.tsx (92%)
 rename src/components/{panel => }/sidepanel/SearchField.tsx (89%)
 rename src/components/{panel => }/sidepanel/SidePanel.tsx (61%)
 rename src/{components/panel/routes/Main.tsx => routes/MainLayout.tsx} (57%)
 rename src/{components/panel => }/routes/PanelRouter.tsx (78%)
 rename src/{components/panel => }/routes/ThreePanelLayout.tsx (71%)
 delete mode 100644 src/routes/layout.tsx
 delete mode 100644 src/routes/router.tsx

diff --git a/i18n/en.pot b/i18n/en.pot
index d09fdc0..a46ec1f 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ 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-12-06T20:56:19.444Z\n"
-"PO-Revision-Date: 2024-12-06T20:56:19.445Z\n"
+"POT-Creation-Date: 2024-12-11T00:48:22.223Z\n"
+"PO-Revision-Date: 2024-12-11T00:48:22.223Z\n"
 
 msgid "View keys"
 msgstr "View keys"
@@ -14,14 +14,14 @@ msgstr "View keys"
 msgid "Click a namespace to view its keys"
 msgstr "Click a namespace to view its keys"
 
+msgid "Select a namespace and key to edit its values"
+msgstr "Select a namespace and key to edit its values"
+
 msgid "An error occurred"
 msgstr "An error occurred"
 
-msgid "Add New Key"
-msgstr "Add New Key"
-
-msgid "Add New Namespace"
-msgstr "Add New Namespace"
+msgid "Error"
+msgstr "Error"
 
 msgid "Namespace"
 msgstr "Namespace"
@@ -32,33 +32,6 @@ 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 "Key successfully updated"
 msgstr "Key successfully updated"
 
@@ -71,38 +44,35 @@ 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 "create"
+msgstr "create"
 
-msgid "There was an error while deleting the key"
-msgstr "There was an error while deleting the key"
+msgid "DataStore"
+msgstr "DataStore"
 
-msgid "Error fetching namespaces"
-msgstr "Error fetching namespaces"
+msgid "UserDataStore"
+msgstr "UserDataStore"
 
-msgid "Namespaces"
-msgstr "Namespaces"
+msgid "Search"
+msgstr "Search"
 
-msgid "This will delete all the keys in this namespace"
-msgstr "This will delete all the keys in this namespace"
+msgid "Key created successfully"
+msgstr "Key created successfully"
 
-msgid "Select a namespace and key to edit its values"
-msgstr "Select a namespace and key to edit its values"
+msgid "Add New Namespace"
+msgstr "Add New Namespace"
 
-msgid "Error"
-msgstr "Error"
+msgid "Add New Key"
+msgstr "Add New Key"
 
-msgid "New"
-msgstr "New"
+msgid "Add Namespace"
+msgstr "Add Namespace"
 
-msgid "DataStore"
-msgstr "DataStore"
+msgid "Add Key"
+msgstr "Add Key"
 
-msgid "User DataStore"
-msgstr "User DataStore"
+msgid "New namespace"
+msgstr "New namespace"
 
-msgid "Search"
-msgstr "Search"
+msgid "New key"
+msgstr "New key"
diff --git a/src/App.module.css b/src/App.module.css
deleted file mode 100644
index 97f1344..0000000
--- a/src/App.module.css
+++ /dev/null
@@ -1,113 +0,0 @@
-.container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    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;
-}
diff --git a/src/App.tsx b/src/App.tsx
index b3c9254..91dd082 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,11 @@
 import React, { FC } from 'react'
 import { RouterProvider } from 'react-router-dom'
 import AppWrapper from './components/AppWrapper'
-import { threePanelRouter } from './components/panel/routes/PanelRouter'
-// import { router } from './routes/Router'
+import { threePanelRouter } from './routes/PanelRouter'
 
 const App: FC = () => {
     return (
         <AppWrapper>
-            {/* <RouterProvider router={router} /> */}
             <RouterProvider router={threePanelRouter} />
         </AppWrapper>
     )
diff --git a/src/components/EmptyArea.tsx b/src/components/EmptyArea.tsx
deleted file mode 100644
index aaf7687..0000000
--- a/src/components/EmptyArea.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-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
diff --git a/src/components/Error.tsx b/src/components/Error.tsx
deleted file mode 100644
index 4f6883e..0000000
--- a/src/components/Error.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Card, Center, NoticeBox } from '@dhis2/ui'
-import React from 'react'
-import { Link, isRouteErrorResponse, useRouteError } from 'react-router-dom'
-import i18n from '../locales'
-
-interface Error {
-    status?: number
-    statusText?: string
-    internal?: boolean
-    data?: string
-    message?: string
-}
-
-type PassedErrorProps = {
-    err?: {
-        httpStatus?: string
-        httpStatusCode?: number
-        status?: string
-        message?: string
-        errorCode?: string
-    }
-}
-
-export default function Error({ err }: PassedErrorProps) {
-    const error: Error = useRouteError()
-
-    return (
-        <div
-            id="error-page"
-            className=""
-            style={{
-                height: '100vh',
-                padding: '1em',
-                display: 'flex',
-                flexDirection: 'row',
-            }}
-        >
-            <Card>
-                <Center>
-                    <NoticeBox title={i18n.t('An error occurred')} error>
-                        {isRouteErrorResponse(error) ? (
-                            <>
-                                <p>
-                                    <b>
-                                        {error.status} {error.statusText}{' '}
-                                    </b>
-                                    <span>- {error.data}</span>
-                                </p>
-                                <Link to={'/dataStore'}>Back to datastore</Link>
-                            </>
-                        ) : (
-                            <p>
-                                <b>
-                                    {error.status} {error.statusText}{' '}
-                                </b>
-                                {error?.message && (
-                                    <span>- {error.message}</span>
-                                )}
-                            </p>
-                        )}
-                        {err && (
-                            <p>
-                                <b>
-                                    {err.httpStatusCode} {err.httpStatus}{' '}
-                                </b>
-                                {err?.message && <span>- {err.message}</span>}
-                            </p>
-                        )}
-                    </NoticeBox>
-                </Center>
-            </Card>
-        </div>
-    )
-}
diff --git a/src/components/panel/Panel.module.css b/src/components/Panel.module.css
similarity index 58%
rename from src/components/panel/Panel.module.css
rename to src/components/Panel.module.css
index 47dbef8..05d03f1 100644
--- a/src/components/panel/Panel.module.css
+++ b/src/components/Panel.module.css
@@ -1,11 +1,5 @@
 .container {
-    /* width: 100%; */
-    /* height: 100vh; */
     box-sizing: border-box;
-    /* height: 100%; */
-    /* display: flex; */
-    /* flex-direction: row; */
-    /* font-size: 1rem; */
     display: grid;
     grid-template-columns: 296px auto;
     border: 1px solid var(--colors-grey300);
@@ -25,19 +19,11 @@
 
 .sidebar {
     border-right: 1px solid var(--colors-grey400);
-    /* background: yellow; */
-    /* margin-top: 0.5em */
-    /* padding: 0.5em; */
-    /* width: 290px; */
-    /* margin: 0.1em; */
 }
 
 .sidebarContent {
     padding: 0.5em;
     margin-top: 0.2em;
-    /* margin: 0; */
-    /* padding: 0.3em; */
-    /* width: 20%; */
 }
 
 .createButton {
@@ -50,31 +36,12 @@
     border: none;
 }
 
-.top {
-    /* margin-top: 0.5em; */
-}
-
-.bottom {
-    /* margin-bottom: 0.5em; */
-}
-
-.sidebarList h4 {
-    /* padding: 0; */
-    /* margin: 0.5em; */
-}
-
 .sidebarList ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
 }
 
-.select {
-    /* height: 70px; */
-    /* padding: 0; */
-    /* margin: 0; */
-}
-
 /* main area */
 
 .main {
@@ -82,44 +49,30 @@
     grid-template-columns: 296px auto;
 }
 
-/* --- 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 {
     width: 100%;
-    /* display: grid; */
-    /* grid-template-rows: 1fr 2fr 1fr; */
-    /* background-color: aliceblue; */
-    /* border: 1px solid red; */
-    /* height: 50px; */
+    display: grid;
+    grid-template-columns: 2fr auto;
     min-height: 36px;
     border-radius: 10px;
 }
 
 .navLink button {
-    /* border: 0; */
+    border: 0;
+    background-color: transparent;
 }
 
 .navLink a {
-    /* display: block;   */
-    /* min-height: 36px; */
-    padding: 5px;
-    /* background: var(--colors-grey100);  */
+    padding: 10px 5px;
     text-decoration: none;
     color: var(--colors-grey900);
     font-size: 15px;
     display: grid;
-    grid-template-columns: 25px auto 30px;
+    grid-template-columns: 25px auto;
     border-radius: 10px;
-    /* display: flex; */
-    /* align-items: center; */
 }
 
 .navLink a button {
@@ -139,9 +92,7 @@
 
 .navLink a.active,
 .navLink :global(.active) {
-    /* font-weight: 500; */
     background: var(--colors-teal050);
-    /* box-shadow: inset 6px 0px 0px 0px var(--colors-grey500); */
 }
 .navLink.active:hover {
     background: var(--colors-teal050);
diff --git a/src/components/create/CreateModal.tsx b/src/components/create/CreateModal.tsx
deleted file mode 100644
index dc12481..0000000
--- a/src/components/create/CreateModal.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import {
-    Modal,
-    ModalTitle,
-    ModalContent,
-    ModalActions,
-    Button,
-    ButtonStrip,
-    InputField,
-} from '@dhis2/ui'
-import PropTypes from 'prop-types'
-import React from 'react'
-import i18n from '../../locales'
-
-const CreateModal = ({
-    addNewKey,
-    addNewNamespace,
-    createFn,
-    values,
-    setValues,
-    closeModal,
-}) => {
-    return (
-        <Modal>
-            <ModalTitle>
-                {addNewKey && i18n.t('Add New Key')}
-                {addNewNamespace && i18n.t('Add New Namespace')}
-            </ModalTitle>
-            <ModalContent>
-                {addNewNamespace && (
-                    <InputField
-                        label={i18n.t('Namespace')}
-                        required
-                        initialFocus
-                        value={values?.namespace}
-                        onChange={({ value }) => {
-                            setValues({
-                                ...values,
-                                ['namespace']: value,
-                            })
-                        }}
-                    />
-                )}
-                <InputField
-                    label={i18n.t('Key')}
-                    required
-                    initialFocus={addNewKey}
-                    value={values?.key}
-                    onChange={({ value }) => {
-                        setValues({
-                            ...values,
-                            ['key']: value,
-                        })
-                    }}
-                />
-            </ModalContent>
-            <ModalActions>
-                <ButtonStrip end>
-                    <Button secondary onClick={closeModal}>
-                        {i18n.t('Cancel')}
-                    </Button>
-                    <Button primary onClick={() => createFn(values)}>
-                        {addNewKey && i18n.t('Add Key')}
-                        {addNewNamespace && i18n.t('Add Namespace')}
-                    </Button>
-                </ButtonStrip>
-            </ModalActions>
-        </Modal>
-    )
-}
-
-CreateModal.propTypes = {
-    addNewKey: PropTypes.bool,
-    addNewNamespace: PropTypes.bool,
-    closeModal: PropTypes.func,
-    createFn: PropTypes.func,
-    setValues: PropTypes.func,
-    values: PropTypes.object,
-}
-
-export default CreateModal
diff --git a/src/components/create/Toolbar.tsx b/src/components/create/Toolbar.tsx
deleted file mode 100644
index 172b5f6..0000000
--- a/src/components/create/Toolbar.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { useDataEngine } from '@dhis2/app-service-data'
-import { Button, Divider } from '@dhis2/ui'
-import React, { useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
-import classes from '../../App.module.css'
-import useCustomAlert from '../../hooks/useCustomAlert'
-import i18n from '../../locales'
-import CreateModal from './CreateModal'
-
-const Toolbar = () => {
-    const { store, namespace } = useParams()
-    const engine = useDataEngine()
-    const navigate = useNavigate()
-
-    const [addNewNamespace, setAddNewNamespace] = useState(false)
-    const [addNewKey, setAddNewKey] = useState(false)
-    const [values, setValues] = useState({})
-
-    const { showSuccess, showError } = useCustomAlert()
-
-    const handleAddNamespaceOrKey = async (values: {
-        namespace?: string
-        key?: unknown
-    }) => {
-        let resource = ''
-        if (addNewNamespace) {
-            resource = `${store}/${values?.namespace}/${values?.key}`
-        } else if (addNewKey) {
-            resource = `${store}/${namespace}/${values?.key}`
-        }
-
-        await engine.mutate(
-            {
-                type: 'create',
-                resource,
-                data: () => ({}),
-            },
-            {
-                onComplete: () => {
-                    let url = ''
-                    if (addNewNamespace) {
-                        url = `${store}/edit/${values?.namespace}/${values?.key}`
-                    } else if (addNewKey) {
-                        url = `${store}/edit/${namespace}/${values?.key}`
-                    }
-                    const message = i18n.t('Key created successfully')
-                    showSuccess(message)
-                    navigate(url)
-                    setValues({})
-                },
-                onError: () => {
-                    const message = i18n.t(
-                        'There was an error creating the key'
-                    )
-                    showError(message)
-                },
-            }
-        )
-        closeModal()
-    }
-
-    const closeModal = () => {
-        setAddNewKey(false)
-        setAddNewNamespace(false)
-    }
-
-    return (
-        <>
-            {store && (
-                <>
-                    <div className={classes.toolbar}>
-                        <Button
-                            aria-label={i18n.t('Add new namespace')}
-                            name="New namespace button"
-                            onClick={() => {
-                                setAddNewNamespace(true)
-                            }}
-                            title={i18n.t('New namespace')}
-                        >
-                            {i18n.t('Add new namespace')}
-                        </Button>
-                        {namespace && (
-                            <Button
-                                aria-label={i18n.t('Add new key')}
-                                name="New key button"
-                                onClick={() => {
-                                    setAddNewKey(true)
-                                }}
-                                title={i18n.t('New key')}
-                            >
-                                {i18n.t('Add new key')}
-                            </Button>
-                        )}
-                    </div>
-                    <Divider />
-                </>
-            )}
-            {(addNewKey || addNewNamespace) && (
-                <CreateModal
-                    addNewKey={addNewKey}
-                    addNewNamespace={addNewNamespace}
-                    createFn={handleAddNamespaceOrKey}
-                    closeModal={closeModal}
-                    values={values}
-                    setValues={setValues}
-                />
-            )}
-        </>
-    )
-}
-
-export default Toolbar
diff --git a/src/components/delete/DeleteButton.tsx b/src/components/delete/DeleteButton.tsx
deleted file mode 100644
index a2fe5e6..0000000
--- a/src/components/delete/DeleteButton.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Button } from '@dhis2-ui/button'
-import PropTypes from 'prop-types'
-import React from 'react'
-import i18n from '../../locales'
-
-export default function DeleteButton({ openModal }) {
-    return (
-        <Button
-            aria-label={i18n.t('Delete')}
-            name="Delete"
-            onClick={openModal}
-            title={i18n.t('Delete')}
-        >
-            {i18n.t('Delete')}
-        </Button>
-    )
-}
-
-DeleteButton.propTypes = {
-    openModal: PropTypes.func,
-}
diff --git a/src/components/delete/DeleteModal.tsx b/src/components/delete/DeleteModal.tsx
deleted file mode 100644
index 14ef64c..0000000
--- a/src/components/delete/DeleteModal.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import {
-    Modal,
-    ModalContent,
-    ModalActions,
-    Button,
-    ButtonStrip,
-} from '@dhis2/ui'
-import PropTypes from 'prop-types'
-import React from 'react'
-import i18n from '../../locales'
-
-const DeleteModal = ({ children, deleteFn, closeModal }) => {
-    return (
-        <Modal position="middle">
-            <ModalContent>{children}</ModalContent>
-            <ModalActions>
-                <ButtonStrip end>
-                    <Button secondary onClick={closeModal}>
-                        Cancel
-                    </Button>
-                    <Button destructive onClick={() => deleteFn()}>
-                        {i18n.t('Delete')}
-                    </Button>
-                </ButtonStrip>
-            </ModalActions>
-        </Modal>
-    )
-}
-
-DeleteModal.propTypes = {
-    children: PropTypes.node,
-    closeModal: PropTypes.func,
-    deleteFn: PropTypes.func,
-}
-
-export default DeleteModal
diff --git a/src/components/edit/Edit.tsx b/src/components/edit/Edit.tsx
deleted file mode 100644
index 3591c9c..0000000
--- a/src/components/edit/Edit.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { useDataMutation, useDataQuery } from '@dhis2/app-runtime'
-import { Button } from '@dhis2-ui/button'
-import React, { useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
-import useCustomAlert from '../../hooks/useCustomAlert'
-import i18n from '../../locales'
-import Error from '../Error'
-import Editor from './Editor'
-
-const modifyKeyMutation = ({ store }) => ({
-    type: 'update' as const,
-    resource: `${store}`,
-    id: ({ key, namespace }: { key: string; namespace: string }) =>
-        `${namespace}/${key}`,
-    data: ({ value }) => JSON.parse(value),
-})
-
-const keyValuesQuery = ({ store }: { store: string }) => ({
-    results: {
-        resource: `${store}`,
-        id: ({ key, namespace }: { key: string; namespace: string }) =>
-            `${namespace}/${key}`,
-    },
-})
-
-const Edit = () => {
-    const { key, namespace, store } = useParams()
-    const { showSuccess, showError } = useCustomAlert()
-
-    const {
-        data,
-        loading: queryLoading,
-        error,
-        refetch,
-    } = useDataQuery(keyValuesQuery({ store }), {
-        variables: {
-            key,
-            namespace,
-        },
-    })
-
-    const [value, setValue] = useState(
-        JSON.stringify(data?.results, null, 4) || ''
-    )
-
-    const [updateKey, { loading }] = useDataMutation(
-        // @ts-expect-error("")
-        modifyKeyMutation({ store }),
-        {
-            onComplete: () => {
-                const message = i18n.t('Key successfully updated')
-                showSuccess(message)
-            },
-            onError: () => {
-                const message = i18n.t('There was an error updating the key')
-                showError(message)
-            },
-        }
-    )
-
-    const handleEditorChange = (value) => {
-        setValue(value)
-    }
-
-    useEffect(() => {
-        setValue(JSON.stringify(data?.results, null, 4))
-    }, [data])
-
-    useEffect(() => {
-        refetch({ key, namespace })
-    }, [key, namespace, store, refetch])
-
-    if (error) {
-        // throw new Response(error.message, {
-        //     status: error.details.httpStatusCode,
-        //     statusText: error.details.httpStatus,
-        // })
-        return <Error err={error.details} />
-    }
-
-    const loadingText = i18n.t('Loading')
-
-    return (
-        <div
-            style={{
-                border: '1px solid grey',
-            }}
-        >
-            <Editor
-                value={queryLoading ? `${loadingText}...` : value}
-                handleChange={handleEditorChange}
-            />
-            <div
-                style={{
-                    position: 'absolute',
-                    right: '0',
-                }}
-            >
-                <Button
-                    aria-label="Save"
-                    name="save"
-                    onClick={async () => {
-                        await updateKey({
-                            key,
-                            namespace,
-                            value,
-                        })
-                    }}
-                    title="Save"
-                    primary
-                    loading={loading}
-                >
-                    {i18n.t('Save changes')}
-                </Button>
-            </div>
-        </div>
-    )
-}
-
-export default Edit
diff --git a/src/components/edit/Editor.tsx b/src/components/edit/Editor.tsx
deleted file mode 100644
index fa6ea01..0000000
--- a/src/components/edit/Editor.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { json } from '@codemirror/lang-json'
-import CodeMirror from '@uiw/react-codemirror'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-const Editor = ({ value, handleChange }) => {
-    return (
-        <CodeMirror
-            value={value}
-            height="80vh"
-            extensions={[json()]}
-            onChange={handleChange}
-        />
-    )
-}
-
-Editor.propTypes = {
-    handleChange: PropTypes.func,
-    value: PropTypes.string,
-}
-
-export default Editor
diff --git a/src/components/panel/empty/EmptyArea.tsx b/src/components/empty/EmptyArea.tsx
similarity index 90%
rename from src/components/panel/empty/EmptyArea.tsx
rename to src/components/empty/EmptyArea.tsx
index ad6c706..d00f736 100644
--- a/src/components/panel/empty/EmptyArea.tsx
+++ b/src/components/empty/EmptyArea.tsx
@@ -1,9 +1,9 @@
 import { NoticeBox } from '@dhis2/ui'
 import React from 'react'
 import { useParams } from 'react-router-dom'
-import i18n from '../../../locales'
+import i18n from '../../locales'
 import classes from '../Panel.module.css'
-import { PanelHeader } from '../PanelHeader'
+import { PanelHeader } from '../sidepanel/PanelHeader'
 import EmptyPanelEditor from './EmptyEditor'
 
 const EmptyArea = () => {
diff --git a/src/components/panel/empty/EmptyEditor.tsx b/src/components/empty/EmptyEditor.tsx
similarity index 77%
rename from src/components/panel/empty/EmptyEditor.tsx
rename to src/components/empty/EmptyEditor.tsx
index b3774ae..a189b36 100644
--- a/src/components/panel/empty/EmptyEditor.tsx
+++ b/src/components/empty/EmptyEditor.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import i18n from '../../../locales'
-import PanelEditor from '../PanelEditor'
-import { PanelHeader } from '../PanelHeader'
+import i18n from '../../locales'
+import PanelEditor from '../sidepanel/PanelEditor'
+import { PanelHeader } from '../sidepanel/PanelHeader'
 
 export default function EmptyEditor({ placeholder }: { placeholder?: string }) {
     const defaultMessage = i18n.t(
diff --git a/src/components/panel/error/ErrorComponent.tsx b/src/components/error/ErrorComponent.tsx
similarity index 95%
rename from src/components/panel/error/ErrorComponent.tsx
rename to src/components/error/ErrorComponent.tsx
index babec59..4c5d42d 100644
--- a/src/components/panel/error/ErrorComponent.tsx
+++ b/src/components/error/ErrorComponent.tsx
@@ -1,9 +1,9 @@
 import { NoticeBox } from '@dhis2/ui'
 import React from 'react'
 import { Link, isRouteErrorResponse, useRouteError } from 'react-router-dom'
-import i18n from '../../../locales'
+import i18n from '../../locales'
 import classes from '../Panel.module.css'
-import { PanelHeader } from '../PanelHeader'
+import { PanelHeader } from '../sidepanel/PanelHeader'
 
 interface Error {
     status?: number
diff --git a/src/components/panel/error/ErrorPanel.tsx b/src/components/error/ErrorPanel.tsx
similarity index 89%
rename from src/components/panel/error/ErrorPanel.tsx
rename to src/components/error/ErrorPanel.tsx
index 6d2ee20..7e29525 100644
--- a/src/components/panel/error/ErrorPanel.tsx
+++ b/src/components/error/ErrorPanel.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import i18n from '../../../locales'
+import i18n from '../../locales'
 import EmptyPanelEditor from '../empty/EmptyEditor'
 import ErrorComponent from './ErrorComponent'
 
diff --git a/src/components/keys/Keys.tsx b/src/components/keys/Keys.tsx
deleted file mode 100644
index 1eaa45c..0000000
--- a/src/components/keys/Keys.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import KeysTable from './KeysTable'
-
-export default function Keys() {
-    return (
-        <div>
-            <KeysTable />
-        </div>
-    )
-}
diff --git a/src/components/keys/keysTable.tsx b/src/components/keys/keysTable.tsx
deleted file mode 100644
index f0d049b..0000000
--- a/src/components/keys/keysTable.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import { useDataEngine, useDataQuery } from '@dhis2/app-runtime'
-import {
-    DataTable,
-    DataTableCell,
-    DataTableColumnHeader,
-    DataTableRow,
-    TableBody,
-    TableHead,
-} from '@dhis2/ui'
-import React, { useEffect, useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
-import classes from '../../App.module.css'
-import useCustomAlert from '../../hooks/useCustomAlert'
-import i18n from '../../locales'
-import DeleteButton from '../delete/DeleteButton'
-import DeleteModal from '../delete/DeleteModal'
-import Error from '../Error'
-import CenteredLoader from '../Loader'
-
-interface QueryResults {
-    results: []
-}
-
-const fetchNamespaceQuery = ({ store }) => ({
-    results: {
-        resource: `${store}`,
-        id: ({ id }) => id,
-    },
-})
-
-const KeysTable = () => {
-    const { store, namespace } = useParams()
-    const navigate = useNavigate()
-    const engine = useDataEngine()
-    const { showError, showSuccess } = useCustomAlert()
-
-    const { data, loading, refetch, error } = useDataQuery<QueryResults>(
-        fetchNamespaceQuery({ store }),
-        {
-            variables: {
-                id: namespace,
-            },
-        }
-    )
-
-    const [deleteNamespace, setDeleteNamespace] = useState(false)
-    const [selectedKey, setSelectedKey] = useState('')
-    const [openModal, setOpenModal] = useState(false)
-
-    useEffect(() => {
-        refetch({ id: namespace })
-    }, [namespace, refetch])
-
-    const handleDeleteAction = async (key) => {
-        await engine.mutate(
-            {
-                type: 'delete',
-                resource: `${store}/${namespace}`,
-                id: key,
-            },
-            {
-                onComplete: () => {
-                    const message = i18n.t('Key deleted successfully')
-                    showSuccess(message)
-                },
-                onError: (error) => {
-                    const message = i18n.t(
-                        'There was an error deleting the key',
-                        {
-                            error: error.message,
-                        }
-                    )
-                    showError(message)
-                },
-            }
-        )
-        setOpenModal(false)
-
-        if (deleteNamespace) {
-            navigate(`/${store}`)
-        } else {
-            refetch({ id: namespace })
-        }
-    }
-
-    if (loading) {
-        return <CenteredLoader />
-    }
-
-    if (error) {
-        // throw new Response(error.message, {
-        //     status: error.details.httpStatusCode,
-        //     statusText: error.details.httpStatus,
-        // })
-        return <Error err={error.details} />
-    }
-
-    return (
-        <div className={classes.keysTable}>
-            {data && (
-                <DataTable>
-                    <TableHead>
-                        <DataTableRow>
-                            <DataTableColumnHeader>Keys</DataTableColumnHeader>
-                            <DataTableColumnHeader>
-                                Actions
-                            </DataTableColumnHeader>
-                        </DataTableRow>
-                    </TableHead>
-                    <TableBody>
-                        {data?.results?.length && (
-                            <>
-                                {data.results.map((key, index) => {
-                                    const handleClick = () => {
-                                        const url = `/${store}/edit/${namespace}/${key}`
-                                        navigate(url)
-                                    }
-                                    return (
-                                        <DataTableRow key={`${key}-${index}`}>
-                                            <DataTableCell
-                                                bordered
-                                                onClick={handleClick}
-                                            >
-                                                {key}
-                                            </DataTableCell>
-                                            <DataTableCell bordered>
-                                                <DeleteButton
-                                                    openModal={() => {
-                                                        setOpenModal(true)
-                                                        setDeleteNamespace(
-                                                            data?.results
-                                                                ?.length < 2
-                                                        )
-                                                        setSelectedKey(key)
-                                                    }}
-                                                />
-                                            </DataTableCell>
-                                        </DataTableRow>
-                                    )
-                                })}
-                            </>
-                        )}
-                    </TableBody>
-                </DataTable>
-            )}
-            {openModal && (
-                <DeleteModal
-                    deleteFn={() => handleDeleteAction(selectedKey)}
-                    closeModal={() => setOpenModal(false)}
-                >
-                    <p>
-                        {i18n.t(
-                            `Are you sure you want to delete '${selectedKey}' in ${namespace}?`
-                        )}
-                    </p>
-                    {deleteNamespace && (
-                        <p>
-                            {i18n.t(
-                                `This will also delete the namespace '${namespace}'`
-                            )}
-                        </p>
-                    )}
-                </DeleteModal>
-            )}
-        </div>
-    )
-}
-
-export default KeysTable
diff --git a/src/components/panel/modals/CreateModal.tsx b/src/components/modals/CreateModal.tsx
similarity index 86%
rename from src/components/panel/modals/CreateModal.tsx
rename to src/components/modals/CreateModal.tsx
index f908fb2..acff421 100644
--- a/src/components/panel/modals/CreateModal.tsx
+++ b/src/components/modals/CreateModal.tsx
@@ -8,16 +8,16 @@ import {
     InputField,
 } from '@dhis2/ui'
 import React from 'react'
-import i18n from '../../../locales'
+import i18n from '../../locales'
 import { CreateFieldValues } from '../sidepanel/SidePanel'
 
 type CreateModalProps = {
-    createFn: (values) => void,
-    values: CreateFieldValues,
-    setValues: (values) => void,
-    closeModal: () => void,
-    title: string,
-    type: string,
+    createFn: (values) => void
+    values: CreateFieldValues
+    setValues: (values) => void
+    closeModal: () => void
+    title: string
+    type: string
     buttonLabel: string
 }
 
@@ -28,13 +28,11 @@ const CreateModal = ({
     closeModal,
     title,
     type,
-    buttonLabel
+    buttonLabel,
 }: CreateModalProps) => {
     return (
         <Modal>
-            <ModalTitle>
-                {title}
-            </ModalTitle>
+            <ModalTitle>{title}</ModalTitle>
             <ModalContent>
                 {type === 'namespace' && (
                     <InputField
diff --git a/src/components/namespaces/LinksList.tsx b/src/components/namespaces/LinksList.tsx
deleted file mode 100644
index 8133c26..0000000
--- a/src/components/namespaces/LinksList.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { useDataEngine } from '@dhis2/app-service-data'
-import PropTypes from 'prop-types'
-import React, { useEffect, useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
-import classes from '../../App.module.css'
-import useCustomAlert from '../../hooks/useCustomAlert'
-import i18n from '../../locales'
-import DeleteModal from '../delete/DeleteModal'
-import CenteredLoader from '../Loader'
-import SidebarNavLink from '../sidebar/SidebarNavLink'
-
-function LinksList({ data, error, loading, refetchList }) {
-    const { store, namespace, key } = useParams()
-    const [openModal, setOpenModal] = useState(false)
-    const [selectedNamespace, setSelectedNamespace] = useState('')
-    const engine = useDataEngine()
-    const navigate = useNavigate()
-    const { showError, showSuccess } = useCustomAlert()
-
-    const handleDeleteAction = async (selectedNamespace) => {
-        await engine.mutate(
-            {
-                type: 'delete',
-                resource: `${store}/${selectedNamespace}`,
-                id: key,
-            },
-            {
-                onComplete: () => {
-                    const message = i18n.t('Key deleted successfully', {
-                        key,
-                    })
-                    showSuccess(message)
-                },
-                onError: (error) => {
-                    const message = i18n.t(
-                        'There was an error while deleting the key',
-                        {
-                            error: error.message,
-                        }
-                    )
-                    showError(message)
-                },
-            }
-        )
-
-        setOpenModal(false)
-        refetchList()
-        navigate(`${store}`)
-    }
-
-    useEffect(() => {
-        refetchList()
-    }, [store, namespace, key, refetchList])
-
-    return (
-        <div className={classes.sidebarList}>
-            {error && <span>{i18n.t('Error fetching namespaces')}</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}/edit/${namespace}`}
-                                    label={namespace}
-                                    handleDeleteModal={() => {
-                                        setOpenModal(true)
-                                        setSelectedNamespace(namespace)
-                                    }}
-                                />
-                            )
-                        })}
-                    </ul>
-                </>
-            )}
-            {openModal && (
-                <DeleteModal
-                    deleteFn={() => handleDeleteAction(selectedNamespace)}
-                    closeModal={() => setOpenModal(false)}
-                >
-                    <p>
-                        {i18n.t(
-                            `Are you sure you want to delete '${namespace}'?`
-                        )}
-                    </p>
-                    <p>
-                        {i18n.t(
-                            `This will delete all the keys in this namespace`
-                        )}
-                    </p>
-                </DeleteModal>
-            )}
-        </div>
-    )
-}
-
-LinksList.propTypes = {
-    data: PropTypes.object,
-    error: PropTypes.any,
-    loading: PropTypes.any,
-    refetchList: PropTypes.func,
-}
-
-export default LinksList
diff --git a/src/components/panel/EditPanel.tsx b/src/components/panels/EditPanel.tsx
similarity index 86%
rename from src/components/panel/EditPanel.tsx
rename to src/components/panels/EditPanel.tsx
index f2a30c7..741ee0d 100644
--- a/src/components/panel/EditPanel.tsx
+++ b/src/components/panels/EditPanel.tsx
@@ -4,9 +4,9 @@ import React, { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import useCustomAlert from '../../hooks/useCustomAlert'
 import i18n from '../../locales'
-import Error from '../Error'
-import PanelEditor from './PanelEditor'
-import { PanelHeader } from './PanelHeader'
+import ErrorComponent from '../error/ErrorComponent'
+import PanelEditor from '../sidepanel/PanelEditor'
+import { PanelHeader } from '../sidepanel/PanelHeader'
 
 const modifyKeyMutation = ({ store }) => ({
     type: 'update' as const,
@@ -24,9 +24,10 @@ const keyValuesQuery = ({ store }: { store: string }) => ({
     },
 })
 
-const PanelEdit = () => {
+const EditPanel = () => {
     const { key, namespace, store } = useParams()
     const { showSuccess, showError } = useCustomAlert()
+    // const [ updateError, setUpdateError ] = useState(null)
 
     const {
         data,
@@ -44,7 +45,7 @@ const PanelEdit = () => {
         'Select a namespace and key to edit its values'
     )
 
-    const [updateKey, { loading }] = useDataMutation(
+    const [updateKey, { loading: mutationLoading }] = useDataMutation(
         // @ts-expect-error("")
         modifyKeyMutation({ store }),
         {
@@ -61,9 +62,11 @@ const PanelEdit = () => {
 
     const handleEditorChange = (value) => {
         setValue(value)
+        // setUpdateError(null)
     }
 
     const handleUpdate = async () => {
+        // setUpdateError(null)
         try {
             await updateKey({
                 key,
@@ -71,6 +74,7 @@ const PanelEdit = () => {
                 value,
             })
         } catch (error) {
+            // setUpdateError(error.message)
             const message = i18n.t('There was an error updating the key')
             showError(message)
         }
@@ -85,7 +89,7 @@ const PanelEdit = () => {
     }, [key, namespace, store, refetch])
 
     if (error) {
-        return <Error err={error.details} />
+        return <ErrorComponent err={error.details} />
     }
 
     const loadingText = `${i18n.t('Loading')}...`
@@ -118,7 +122,7 @@ const PanelEdit = () => {
                         title="Save"
                         primary
                         small
-                        loading={loading}
+                        loading={mutationLoading}
                     >
                         {i18n.t('Save changes')}
                     </Button>
@@ -132,4 +136,4 @@ const PanelEdit = () => {
     )
 }
 
-export default PanelEdit
+export default EditPanel
diff --git a/src/components/panel/KeysPanel.tsx b/src/components/panels/KeysPanel.tsx
similarity index 93%
rename from src/components/panel/KeysPanel.tsx
rename to src/components/panels/KeysPanel.tsx
index 01387a2..726e5f9 100644
--- a/src/components/panel/KeysPanel.tsx
+++ b/src/components/panels/KeysPanel.tsx
@@ -1,8 +1,8 @@
-import { useDataQuery } from '@dhis2/app-service-data'
+import { useDataQuery } from '@dhis2/app-runtime'
 import React, { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
-import { PanelHeader } from './PanelHeader'
-import SidebarPanel from './sidepanel/SidePanel'
+import { PanelHeader } from '../sidepanel/PanelHeader'
+import SidePanel from '../sidepanel/SidePanel'
 
 interface QueryResults {
     results: []
@@ -44,7 +44,7 @@ const KeysPanel = () => {
         }, [store])
 
         return (
-            <SidebarPanel
+            <SidePanel
                 data={dataStoreQueryData}
                 error={dataStoreQueryError}
                 loading={dataStoreQueryLoading}
@@ -71,7 +71,7 @@ const KeysPanel = () => {
         }, [store])
 
         return (
-            <SidebarPanel
+            <SidePanel
                 data={userDataStoreQueryData}
                 error={userDataStoreQueryError}
                 loading={userDataStoreQueryLoading}
diff --git a/src/components/panel/NamespacesPanel.tsx b/src/components/panels/NamespacesPanel.tsx
similarity index 90%
rename from src/components/panel/NamespacesPanel.tsx
rename to src/components/panels/NamespacesPanel.tsx
index 39355d6..3dd04df 100644
--- a/src/components/panel/NamespacesPanel.tsx
+++ b/src/components/panels/NamespacesPanel.tsx
@@ -1,9 +1,9 @@
-import { useDataQuery } from '@dhis2/app-service-data'
+import { useDataQuery } from '@dhis2/app-runtime'
 import React, { useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
-import { PanelHeader } from './PanelHeader'
-import DataStoreControl from './sidepanel/DataStoreControl'
-import SidebarPanel from './sidepanel/SidePanel'
+import DataStoreControl from '../sidepanel/DataStoreControl'
+import { PanelHeader } from '../sidepanel/PanelHeader'
+import SidePanel from '../sidepanel/SidePanel'
 
 interface QueryResults {
     results: []
@@ -39,7 +39,7 @@ const NamespacesPanel = () => {
         }, [store])
 
         return (
-            <SidebarPanel
+            <SidePanel
                 data={userDataStoreQueryData}
                 error={userDataStoreQueryError}
                 loading={userDataStoreQueryLoading}
@@ -62,7 +62,7 @@ const NamespacesPanel = () => {
         }, [store])
 
         return (
-            <SidebarPanel
+            <SidePanel
                 data={dataStoreQueryData}
                 error={dataStoreQueryError}
                 loading={dataStoreQueryLoading}
diff --git a/src/components/sidebar/DataStoreSelect.tsx b/src/components/sidebar/DataStoreSelect.tsx
deleted file mode 100644
index 62fd8e4..0000000
--- a/src/components/sidebar/DataStoreSelect.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { SingleSelectField, SingleSelectOption } from '@dhis2/ui'
-import PropTypes from 'prop-types'
-import React from 'react'
-import i18n from '../../locales'
-
-const DataStoreSelect = ({ option, handleChange }) => {
-    return (
-        <div>
-            <SingleSelectField
-                label="Select Datastore"
-                selected={option}
-                onChange={handleChange}
-            >
-                <SingleSelectOption
-                    label={i18n.t('DataStore')}
-                    value={'dataStore'}
-                />
-                <SingleSelectOption
-                    label={i18n.t('User DataStore')}
-                    value={'userDataStore'}
-                />
-            </SingleSelectField>
-        </div>
-    )
-}
-
-DataStoreSelect.propTypes = {
-    handleChange: PropTypes.func,
-    option: PropTypes.string,
-}
-
-export default DataStoreSelect
diff --git a/src/components/sidebar/SidebarNavLink.tsx b/src/components/sidebar/SidebarNavLink.tsx
deleted file mode 100644
index 10e2a83..0000000
--- a/src/components/sidebar/SidebarNavLink.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Button } from '@dhis2/ui'
-import { IconDelete16 } from '@dhis2/ui-icons'
-import PropTypes from 'prop-types'
-import React from 'react'
-import { NavLink } from 'react-router-dom'
-import classes from '../../App.module.css'
-
-const SidebarNavLink = ({ to, label, handleDeleteModal }) => {
-    return (
-        <li className={classes.navLink}>
-            <NavLink
-                to={to}
-                className={({ isActive, isPending }) =>
-                    isActive ? 'active' : isPending ? 'pending' : ''
-                }
-            >
-                {label}
-            </NavLink>
-            <Button
-                aria-label="Delete"
-                icon={<IconDelete16 />}
-                name="delete button"
-                onClick={handleDeleteModal}
-                title="Delete"
-            />
-        </li>
-    )
-}
-
-SidebarNavLink.propTypes = {
-    handleDeleteModal: PropTypes.func,
-    label: PropTypes.string,
-    to: PropTypes.string,
-}
-
-export default SidebarNavLink
diff --git a/src/components/sidebar/searchField.tsx b/src/components/sidebar/searchField.tsx
deleted file mode 100644
index c2a0cf4..0000000
--- a/src/components/sidebar/searchField.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { InputField } from '@dhis2/ui'
-import React from 'react'
-import classes from '../../App.module.css'
-import i18n from '../../locales'
-
-const SearchField = () => {
-    return (
-        <div className={classes.bottom}>
-            <InputField
-                label={i18n.t('Search')}
-                name="search-namespace"
-                placeholder={i18n.t('Namespace')}
-            />
-        </div>
-    )
-}
-
-export default SearchField
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
deleted file mode 100644
index 9487089..0000000
--- a/src/components/sidebar/sidebar.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { useDataQuery } from '@dhis2/app-service-data'
-import { Card, Divider } from '@dhis2/ui'
-import React, { useEffect, useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
-import classes from '../../App.module.css'
-import LinksList from '../namespaces/LinksList'
-import DataStoreSelect from './DataStoreSelect'
-// import SearchField from './SearchField'
-
-interface QueryResults {
-    results: []
-}
-
-const userDataStoreQuery = {
-    results: {
-        resource: 'userDataStore',
-    },
-}
-
-const dataStoreQuery = {
-    results: {
-        resource: 'dataStore',
-    },
-}
-
-const Sidebar = () => {
-    const navigate = useNavigate()
-    const { store } = useParams()
-    const [option, setOption] = useState(store || '')
-
-    const {
-        error: dataStoreQueryError,
-        loading: dataStoreQueryLoading,
-        data: dataStoreQueryData,
-        refetch: refetchDataStore,
-    } = useDataQuery<QueryResults>(dataStoreQuery)
-
-    const {
-        error: userDataStoreQueryError,
-        loading: userDataStoreQueryLoading,
-        data: userDataStoreQueryData,
-        refetch: refetchUserDataStore,
-    } = useDataQuery<QueryResults>(userDataStoreQuery)
-
-    useEffect(() => {
-        const storeOptions = ['dataStore', 'userDataStore']
-        if (!storeOptions.includes(store)) {
-            navigate('/dataStore')
-        } else {
-            setOption(store)
-        }
-    }, [store, navigate])
-
-    const handleDataStoreSelect = ({ selected }) => {
-        setOption(selected)
-        navigate(`/${selected}`)
-    }
-    return (
-        <Card className={classes.sidebarContent}>
-            <div className={classes.select}>
-                <DataStoreSelect
-                    option={option}
-                    handleChange={handleDataStoreSelect}
-                />
-            </div>
-            <Divider />
-            {store && (
-                <>
-                    {/* <SearchField /> */}
-                    {store === 'userDataStore' && (
-                        <LinksList
-                            error={userDataStoreQueryError}
-                            data={userDataStoreQueryData}
-                            loading={userDataStoreQueryLoading}
-                            refetchList={refetchUserDataStore}
-                        />
-                    )}
-                    {store === 'dataStore' && (
-                        <LinksList
-                            error={dataStoreQueryError}
-                            data={dataStoreQueryData}
-                            loading={dataStoreQueryLoading}
-                            refetchList={refetchDataStore}
-                        />
-                    )}
-                </>
-            )}
-        </Card>
-    )
-}
-
-export default Sidebar
diff --git a/src/components/panel/sidepanel/CreateButton.tsx b/src/components/sidepanel/CreateButton.tsx
similarity index 68%
rename from src/components/panel/sidepanel/CreateButton.tsx
rename to src/components/sidepanel/CreateButton.tsx
index 67cf2e9..071bfd3 100644
--- a/src/components/panel/sidepanel/CreateButton.tsx
+++ b/src/components/sidepanel/CreateButton.tsx
@@ -1,16 +1,21 @@
 import { Button } from '@dhis2/ui'
 import { IconAdd16 } from '@dhis2/ui-icons'
 import React from 'react'
-import i18n from '../../../locales'
+import i18n from '../../locales'
 import classes from '../Panel.module.css'
 
-const CreateButton = ({ label, handleClick }) => {
+type CreateButtonProps = {
+    label: string
+    handleClick: () => void
+}
+
+const CreateButton = ({ label, handleClick }: CreateButtonProps) => {
     return (
         <div className={classes.createButton}>
             <Button
                 aria-label={label}
                 icon={<IconAdd16 />}
-                name="create"
+                name={i18n.t('create')}
                 onClick={handleClick}
                 title={label}
             >
diff --git a/src/components/panel/sidepanel/DataStoreControl.tsx b/src/components/sidepanel/DataStoreControl.tsx
similarity index 87%
rename from src/components/panel/sidepanel/DataStoreControl.tsx
rename to src/components/sidepanel/DataStoreControl.tsx
index 995c6c5..fce6c02 100644
--- a/src/components/panel/sidepanel/DataStoreControl.tsx
+++ b/src/components/sidepanel/DataStoreControl.tsx
@@ -1,6 +1,6 @@
 import { SegmentedControl } from '@dhis2/ui'
 import React from 'react'
-import i18n from '../../../locales'
+import i18n from '../../locales'
 
 type DataStoreControlProps = {
     option: string
@@ -20,7 +20,7 @@ export default function DataStoreControl({
                     value: 'dataStore',
                 },
                 {
-                    label: i18n.t('User DataStore'),
+                    label: i18n.t('UserDataStore'),
                     value: 'userDataStore',
                 },
             ]}
diff --git a/src/components/Loader.tsx b/src/components/sidepanel/Loader.tsx
similarity index 100%
rename from src/components/Loader.tsx
rename to src/components/sidepanel/Loader.tsx
diff --git a/src/components/panel/PanelEditor.tsx b/src/components/sidepanel/PanelEditor.tsx
similarity index 100%
rename from src/components/panel/PanelEditor.tsx
rename to src/components/sidepanel/PanelEditor.tsx
diff --git a/src/components/panel/PanelHeader.tsx b/src/components/sidepanel/PanelHeader.tsx
similarity index 83%
rename from src/components/panel/PanelHeader.tsx
rename to src/components/sidepanel/PanelHeader.tsx
index afa8c22..f652451 100644
--- a/src/components/panel/PanelHeader.tsx
+++ b/src/components/sidepanel/PanelHeader.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import classes from './Panel.module.css'
+import classes from '../Panel.module.css'
 
 type PanelHeaderProps = {
     children?: React.ReactElement
diff --git a/src/components/panel/sidepanel/PanelLink.tsx b/src/components/sidepanel/PanelLink.tsx
similarity index 90%
rename from src/components/panel/sidepanel/PanelLink.tsx
rename to src/components/sidepanel/PanelLink.tsx
index 41f6997..d808858 100644
--- a/src/components/panel/sidepanel/PanelLink.tsx
+++ b/src/components/sidepanel/PanelLink.tsx
@@ -9,13 +9,13 @@ import React from 'react'
 import { NavLink } from 'react-router-dom'
 import classes from '../Panel.module.css'
 
-type SidebarPanelLinkProps = {
+type SidePanelLinkProps = {
     label: string
     to: string
     type: string
 }
 
-const SidebarPanelLink = ({ to, label, type }: SidebarPanelLinkProps) => {
+const SidePanelLink = ({ to, label, type }: SidePanelLinkProps) => {
     const renderIcon = ({ isActive }) =>
         type === 'namespace' ? (
             isActive ? (
@@ -52,4 +52,4 @@ const SidebarPanelLink = ({ to, label, type }: SidebarPanelLinkProps) => {
     )
 }
 
-export default SidebarPanelLink
+export default SidePanelLink
diff --git a/src/components/panel/sidepanel/PanelLinksList.tsx b/src/components/sidepanel/PanelLinksList.tsx
similarity index 92%
rename from src/components/panel/sidepanel/PanelLinksList.tsx
rename to src/components/sidepanel/PanelLinksList.tsx
index 0cc5a2a..df612af 100644
--- a/src/components/panel/sidepanel/PanelLinksList.tsx
+++ b/src/components/sidepanel/PanelLinksList.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
-import CenteredLoader from '../../Loader'
 import { ErrorResponse } from '../error/ErrorComponent'
 import classes from '../Panel.module.css'
-import SidebarPanelLink from './PanelLink'
+import CenteredLoader from './Loader'
+import SidePanelLink from './PanelLink'
 
 type PanelLinksListProps = {
     data: { results: [] }
@@ -45,7 +45,7 @@ function PanelLinksList({
                                 ? `/${store}/edit/${value}`
                                 : `/${store}/edit/${namespace}/${value}`
                         return (
-                            <SidebarPanelLink
+                            <SidePanelLink
                                 key={`${index}-${value}`}
                                 to={path}
                                 label={value}
diff --git a/src/components/panel/sidepanel/SearchField.tsx b/src/components/sidepanel/SearchField.tsx
similarity index 89%
rename from src/components/panel/sidepanel/SearchField.tsx
rename to src/components/sidepanel/SearchField.tsx
index 6e51b56..bd2ed9d 100644
--- a/src/components/panel/sidepanel/SearchField.tsx
+++ b/src/components/sidepanel/SearchField.tsx
@@ -1,6 +1,6 @@
 import { InputField } from '@dhis2/ui'
 import React from 'react'
-import i18n from '../../../locales'
+import i18n from '../../locales'
 import classes from '../Panel.module.css'
 
 const PanelSearchField = () => {
diff --git a/src/components/panel/sidepanel/SidePanel.tsx b/src/components/sidepanel/SidePanel.tsx
similarity index 61%
rename from src/components/panel/sidepanel/SidePanel.tsx
rename to src/components/sidepanel/SidePanel.tsx
index f41221d..7104ab2 100644
--- a/src/components/panel/sidepanel/SidePanel.tsx
+++ b/src/components/sidepanel/SidePanel.tsx
@@ -1,13 +1,14 @@
+import { useDataEngine } from '@dhis2/app-service-data'
 import React, { useState } from 'react'
+import { useNavigate, useParams } from 'react-router'
+import i18n from '../../locales'
 import { ErrorResponse } from '../error/ErrorComponent'
+import CreateModal from '../modals/CreateModal'
 import classes from '../Panel.module.css'
 import CreateButton from './CreateButton'
 import PanelLinksList from './PanelLinksList'
 import PanelSearchField from './SearchField'
-import i18n from '../../../locales'
-import CreateModal from '../modals/CreateModal'
-import { useDataEngine } from '@dhis2/app-service-data'
-import { useNavigate, useParams } from 'react-router'
+import useCustomAlert from '../../hooks/useCustomAlert'
 
 type SidePanelProps = {
     data: { results: [] }
@@ -18,7 +19,7 @@ type SidePanelProps = {
 }
 
 export type CreateFieldValues = {
-    namespace?: string,
+    namespace?: string
     key?: string
 }
 
@@ -35,7 +36,7 @@ const SidePanel = ({
     const [openModal, setOpenModal] = useState(false)
     const [values, setValues] = useState({})
 
-    // const { showSuccess, showError } = useCustomAlert()
+    const { showSuccess, showError } = useCustomAlert()
 
     const handleCreate = async (values: CreateFieldValues) => {
         let resource = ''
@@ -60,7 +61,7 @@ const SidePanel = ({
                         url = `${values?.key}`
                     }
                     const message = i18n.t('Key created successfully')
-                    // showSuccess(message)
+                    showSuccess(message)
                     navigate(url)
                     setValues({})
                 },
@@ -68,7 +69,7 @@ const SidePanel = ({
                     const message = i18n.t(
                         'There was an error creating the key'
                     )
-                    // showError(message)
+                    showError(message)
                 },
             }
         )
@@ -76,37 +77,42 @@ const SidePanel = ({
     }
 
     const derivedModalProps = {
-        title: type === "namespace" ? i18n.t("Add New Namespace") : i18n.t("Add New Key"),
-        buttonLabel: type === "namespace" ? i18n.t("Add Namespace") : i18n.t("Add Key"),
+        title:
+            type === 'namespace'
+                ? i18n.t('Add New Namespace')
+                : i18n.t('Add New Key'),
+        buttonLabel:
+            type === 'namespace' ? i18n.t('Add Namespace') : i18n.t('Add Key'),
     }
-    const createButtonLabel = type === "namespace" ? i18n.t("New namespace") : i18n.t("New key");
+    const createButtonLabel =
+        type === 'namespace' ? i18n.t('New namespace') : i18n.t('New key')
 
     return (
         <>
-        <div className={classes.sidebarContent}>
-            <PanelSearchField />
-            <CreateButton
-                label={createButtonLabel}
-                handleClick={() => setOpenModal(true)}
-             />
-            <PanelLinksList
-                data={data}
-                error={error}
-                loading={loading}
-                refetchList={refetchList}
-                type={type}
-            />
-        </div>
-        {openModal && (
-            <CreateModal
-                createFn={handleCreate}
-                values={values}
-                setValues={setValues}
-                closeModal={() => setOpenModal(false)}
-                type={type}
-                {...derivedModalProps}
-            />
-        )}
+            <div className={classes.sidebarContent}>
+                <PanelSearchField />
+                <CreateButton
+                    label={createButtonLabel}
+                    handleClick={() => setOpenModal(true)}
+                />
+                <PanelLinksList
+                    data={data}
+                    error={error}
+                    loading={loading}
+                    refetchList={refetchList}
+                    type={type}
+                />
+            </div>
+            {openModal && (
+                <CreateModal
+                    createFn={handleCreate}
+                    values={values}
+                    setValues={setValues}
+                    closeModal={() => setOpenModal(false)}
+                    type={type}
+                    {...derivedModalProps}
+                />
+            )}
         </>
     )
 }
diff --git a/src/hooks/useCustomAlert.tsx b/src/hooks/useCustomAlert.tsx
index 56b3c9d..2d40f0b 100644
--- a/src/hooks/useCustomAlert.tsx
+++ b/src/hooks/useCustomAlert.tsx
@@ -1,4 +1,4 @@
-import { useAlert } from '@dhis2/app-service-alerts'
+import { useAlert } from "@dhis2/app-runtime"
 
 const useCustomAlert = () => {
     const { show } = useAlert(
diff --git a/src/components/panel/routes/Main.tsx b/src/routes/MainLayout.tsx
similarity index 57%
rename from src/components/panel/routes/Main.tsx
rename to src/routes/MainLayout.tsx
index 38cbf5a..57144fe 100644
--- a/src/components/panel/routes/Main.tsx
+++ b/src/routes/MainLayout.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
-import KeysSidePanel from '../KeysPanel'
-import classes from '../Panel.module.css'
+import classes from '../components/Panel.module.css'
+import KeysPanel from '../components/panels/KeysPanel'
 
-export default function Main() {
+export default function MainLayout() {
     return (
         <>
             <div className={classes.sidebar}>
-                <KeysSidePanel />
+                <KeysPanel />
             </div>
             <div>
                 <Outlet />
diff --git a/src/components/panel/routes/PanelRouter.tsx b/src/routes/PanelRouter.tsx
similarity index 78%
rename from src/components/panel/routes/PanelRouter.tsx
rename to src/routes/PanelRouter.tsx
index b210e3f..7d20505 100644
--- a/src/components/panel/routes/PanelRouter.tsx
+++ b/src/routes/PanelRouter.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Navigate, createHashRouter } from 'react-router-dom'
-import PanelEdit from '../EditPanel'
-import PanelEmptyArea from '../empty/EmptyArea'
-import EmptyPanelEditor from '../empty/EmptyEditor'
-import PanelError from '../error/ErrorComponent'
-import PanelErrorPage from '../error/ErrorPanel'
-import Main from './Main'
+import PanelEmptyArea from '../components/empty/EmptyArea'
+import EmptyPanelEditor from '../components/empty/EmptyEditor'
+import PanelError from '../components/error/ErrorComponent'
+import PanelErrorPage from '../components/error/ErrorPanel'
+import EditPanel from '../components/panels/EditPanel'
+import Main from './MainLayout'
 import ThreePanelLayout from './ThreePanelLayout'
 
 export const threePanelRouter = createHashRouter([
@@ -35,7 +35,7 @@ export const threePanelRouter = createHashRouter([
                                     },
                                     {
                                         path: ':key',
-                                        element: <PanelEdit />,
+                                        element: <EditPanel />,
                                     },
                                 ],
                             },
diff --git a/src/components/panel/routes/ThreePanelLayout.tsx b/src/routes/ThreePanelLayout.tsx
similarity index 71%
rename from src/components/panel/routes/ThreePanelLayout.tsx
rename to src/routes/ThreePanelLayout.tsx
index e4edc35..9717db7 100644
--- a/src/components/panel/routes/ThreePanelLayout.tsx
+++ b/src/routes/ThreePanelLayout.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
-import NamespacesSidePanel from '../NamespacesPanel'
-import classes from '../Panel.module.css'
+import classes from '../components/Panel.module.css'
+import NamespacesPanel from '../components/panels/NamespacesPanel'
 
 function ThreePanelLayout() {
     return (
         <div className={classes.container}>
             <div id="sidebar" className={classes.sidebar}>
-                <NamespacesSidePanel />
+                <NamespacesPanel />
             </div>
             <main id="main" className={classes.main}>
                 <Outlet />
diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx
deleted file mode 100644
index ceb0dc1..0000000
--- a/src/routes/layout.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Card } from '@dhis2/ui'
-import React from 'react'
-import { Outlet, useParams } from 'react-router-dom'
-import classes from '../App.module.css'
-import Toolbar from '../components/create/Toolbar'
-import Sidebar from '../components/sidebar/Sidebar'
-
-function Layout() {
-    const { store } = useParams()
-    return (
-        <div className={classes.container}>
-            <nav id="sidebar" className={classes.sidebar}>
-                <Sidebar />
-            </nav>
-            <main id="main" className={classes.main}>
-                <Card>
-                    {store && <Toolbar />}
-                    <Outlet />
-                </Card>
-            </main>
-        </div>
-    )
-}
-
-export default Layout
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
deleted file mode 100644
index 11cbc1e..0000000
--- a/src/routes/router.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react'
-import { Navigate, createHashRouter } from 'react-router-dom'
-import Edit from '../components/edit/Edit'
-import EmptyArea from '../components/EmptyArea'
-import Error from '../components/Error'
-import Keys from '../components/keys/Keys'
-import Layout from './Layout'
-
-export const router = createHashRouter([
-    {
-        path: '/',
-        errorElement: <Error />,
-        element: <Layout />,
-        children: [
-            { index: true, element: <Navigate to={'dataStore'} replace /> },
-            {
-                path: ':store',
-                children: [
-                    {
-                        errorElement: <Error />,
-                        children: [
-                            {
-                                index: true,
-                                element: <EmptyArea />,
-                            },
-                            {
-                                path: 'edit/:namespace',
-                                element: <Keys />,
-                            },
-                            {
-                                path: 'edit/:namespace/:key',
-                                element: <Edit />,
-                            },
-                        ],
-                    },
-                ],
-            },
-        ],
-    },
-])

From b603eb3aa2d543582e5981cc57349fb743430b5a Mon Sep 17 00:00:00 2001
From: Diana Nanyanzi <diana@dhis2.org>
Date: Wed, 11 Dec 2024 08:58:17 +0300
Subject: [PATCH 7/8] feat: add deletion functionality

- use context for Side Panel components
- add delete modal to handle deletion of namespaces and keys
- add context menu button on every rendered link
`
---
 i18n/en.pot                                 | 56 +++++++++-----
 src/components/Panel.module.css             |  9 +++
 src/components/modals/CreateModal.tsx       | 18 +++--
 src/components/modals/DeleteModal.tsx       | 84 +++++++++++++++++++++
 src/components/panels/EditPanel.tsx         |  1 +
 src/components/sidepanel/ContextButton.tsx  | 62 +++++++++++++++
 src/components/sidepanel/CreateButton.tsx   |  7 +-
 src/components/sidepanel/PanelLink.tsx      | 31 ++++----
 src/components/sidepanel/PanelLinksList.tsx | 70 +++++++++++------
 src/components/sidepanel/SidePanel.tsx      | 51 ++++++-------
 src/context/SidePanelContext.tsx            | 35 +++++++++
 src/hooks/useCustomAlert.tsx                |  2 +-
 src/hooks/useDeleteMutation.tsx             | 31 ++++++++
 13 files changed, 359 insertions(+), 98 deletions(-)
 create mode 100644 src/components/modals/DeleteModal.tsx
 create mode 100644 src/components/sidepanel/ContextButton.tsx
 create mode 100644 src/context/SidePanelContext.tsx
 create mode 100644 src/hooks/useDeleteMutation.tsx

diff --git a/i18n/en.pot b/i18n/en.pot
index a46ec1f..fd0c754 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ 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-12-11T00:48:22.223Z\n"
-"PO-Revision-Date: 2024-12-11T00:48:22.223Z\n"
+"POT-Creation-Date: 2024-12-20T17:43:52.507Z\n"
+"PO-Revision-Date: 2024-12-20T17:43:52.508Z\n"
 
 msgid "View keys"
 msgstr "View keys"
@@ -23,6 +23,18 @@ msgstr "An error occurred"
 msgid "Error"
 msgstr "Error"
 
+msgid "Add New Namespace"
+msgstr "Add New Namespace"
+
+msgid "Add New Key"
+msgstr "Add New Key"
+
+msgid "Add Namespace"
+msgstr "Add Namespace"
+
+msgid "Add Key"
+msgstr "Add Key"
+
 msgid "Namespace"
 msgstr "Namespace"
 
@@ -32,6 +44,18 @@ msgstr "Key"
 msgid "Cancel"
 msgstr "Cancel"
 
+msgid "Delete Namespace"
+msgstr "Delete Namespace"
+
+msgid "Delete Key"
+msgstr "Delete Key"
+
+msgid "This will delete all the keys in this namespace"
+msgstr "This will delete all the keys in this namespace"
+
+msgid "Delete"
+msgstr "Delete"
+
 msgid "Key successfully updated"
 msgstr "Key successfully updated"
 
@@ -44,6 +68,15 @@ msgstr "Loading"
 msgid "Save changes"
 msgstr "Save changes"
 
+msgid "delete"
+msgstr "delete"
+
+msgid "New namespace"
+msgstr "New namespace"
+
+msgid "New key"
+msgstr "New key"
+
 msgid "create"
 msgstr "create"
 
@@ -59,20 +92,5 @@ msgstr "Search"
 msgid "Key created successfully"
 msgstr "Key created successfully"
 
-msgid "Add New Namespace"
-msgstr "Add New Namespace"
-
-msgid "Add New Key"
-msgstr "Add New Key"
-
-msgid "Add Namespace"
-msgstr "Add Namespace"
-
-msgid "Add Key"
-msgstr "Add Key"
-
-msgid "New namespace"
-msgstr "New namespace"
-
-msgid "New key"
-msgstr "New key"
+msgid "There was an error creating the key"
+msgstr "There was an error creating the key"
diff --git a/src/components/Panel.module.css b/src/components/Panel.module.css
index 05d03f1..fa496b7 100644
--- a/src/components/Panel.module.css
+++ b/src/components/Panel.module.css
@@ -34,6 +34,7 @@
     margin: 0.5em 0 0.3em 0;
     width: 100%;
     border: none;
+    justify-content: start;
 }
 
 .sidebarList ul {
@@ -97,3 +98,11 @@
 .navLink.active:hover {
     background: var(--colors-teal050);
 }
+
+/* context menu */
+.contextMenu button {
+    background-color: transparent;
+    border: none;
+    width: 100%;
+    justify-content: start;
+}
diff --git a/src/components/modals/CreateModal.tsx b/src/components/modals/CreateModal.tsx
index acff421..dc872b5 100644
--- a/src/components/modals/CreateModal.tsx
+++ b/src/components/modals/CreateModal.tsx
@@ -8,6 +8,7 @@ import {
     InputField,
 } from '@dhis2/ui'
 import React from 'react'
+import { useSidePanelContext } from '../../context/SidePanelContext'
 import i18n from '../../locales'
 import { CreateFieldValues } from '../sidepanel/SidePanel'
 
@@ -16,9 +17,6 @@ type CreateModalProps = {
     values: CreateFieldValues
     setValues: (values) => void
     closeModal: () => void
-    title: string
-    type: string
-    buttonLabel: string
 }
 
 const CreateModal = ({
@@ -26,12 +24,18 @@ const CreateModal = ({
     values,
     setValues,
     closeModal,
-    title,
-    type,
-    buttonLabel,
 }: CreateModalProps) => {
+    const { panelType: type } = useSidePanelContext()
+
+    const title =
+        type === 'namespace'
+            ? i18n.t('Add New Namespace')
+            : i18n.t('Add New Key')
+    const buttonLabel =
+        type === 'namespace' ? i18n.t('Add Namespace') : i18n.t('Add Key')
+
     return (
-        <Modal>
+        <Modal position="middle">
             <ModalTitle>{title}</ModalTitle>
             <ModalContent>
                 {type === 'namespace' && (
diff --git a/src/components/modals/DeleteModal.tsx b/src/components/modals/DeleteModal.tsx
new file mode 100644
index 0000000..5d8b7b0
--- /dev/null
+++ b/src/components/modals/DeleteModal.tsx
@@ -0,0 +1,84 @@
+import {
+    Modal,
+    ModalContent,
+    ModalActions,
+    ModalTitle,
+    Button,
+    ButtonStrip,
+} from '@dhis2/ui'
+import React from 'react'
+import { useParams } from 'react-router-dom'
+import { useSidePanelContext } from '../../context/SidePanelContext'
+import i18n from '../../locales'
+
+const DeleteModal = ({
+    handleDeleteAction,
+}: {
+    handleDeleteAction: () => void
+}) => {
+    const {
+        panelType: type,
+        totalItems,
+        selectedLinkItem: value,
+        setOpenDeleteModal,
+    } = useSidePanelContext()
+    const { namespace: currentNamespace } = useParams()
+
+    const title =
+        type === 'namespace' ? i18n.t('Delete Namespace') : i18n.t('Delete Key')
+
+    return (
+        <Modal position="middle">
+            <ModalTitle>{title}</ModalTitle>
+            <ModalContent>
+                {type === 'namespace' && (
+                    <>
+                        <p>
+                            {i18n.t(
+                                `Are you sure you want to delete '${value}'?`
+                            )}
+                        </p>
+                        <p>
+                            {i18n.t(
+                                `This will delete all the keys in this namespace`
+                            )}
+                        </p>
+                    </>
+                )}
+                {type === 'keys' && (
+                    <>
+                        <p>
+                            {i18n.t(
+                                `Are you sure you want to delete '${value}' in ${currentNamespace}?`
+                            )}
+                        </p>
+                        {totalItems < 2 && (
+                            <p>
+                                {i18n.t(
+                                    `This will also delete the namespace '${currentNamespace}'`
+                                )}
+                            </p>
+                        )}
+                    </>
+                )}
+            </ModalContent>
+            <ModalActions>
+                <ButtonStrip end>
+                    <Button secondary onClick={() => setOpenDeleteModal(false)}>
+                        {i18n.t('Cancel')}
+                    </Button>
+                    <Button
+                        destructive
+                        onClick={() => {
+                            handleDeleteAction()
+                            setOpenDeleteModal(false)
+                        }}
+                    >
+                        {i18n.t('Delete')}
+                    </Button>
+                </ButtonStrip>
+            </ModalActions>
+        </Modal>
+    )
+}
+export default DeleteModal
diff --git a/src/components/panels/EditPanel.tsx b/src/components/panels/EditPanel.tsx
index 741ee0d..4156b58 100644
--- a/src/components/panels/EditPanel.tsx
+++ b/src/components/panels/EditPanel.tsx
@@ -75,6 +75,7 @@ const EditPanel = () => {
             })
         } catch (error) {
             // setUpdateError(error.message)
+            console.error(error.message)
             const message = i18n.t('There was an error updating the key')
             showError(message)
         }
diff --git a/src/components/sidepanel/ContextButton.tsx b/src/components/sidepanel/ContextButton.tsx
new file mode 100644
index 0000000..4d9603a
--- /dev/null
+++ b/src/components/sidepanel/ContextButton.tsx
@@ -0,0 +1,62 @@
+import { Button, IconMore16, Popover, IconDelete16 } from '@dhis2/ui'
+import React, { useRef } from 'react'
+import { useSidePanelContext } from '../../context/SidePanelContext'
+import i18n from '../../locales'
+import classes from '../Panel.module.css'
+
+type ContextMenuButtonProps = {
+    handleContextMenu: () => void
+    openContextMenu: boolean
+    setOpenContextMenu: (boolean) => void
+}
+
+const ContextMenuButton = ({
+    handleContextMenu,
+    openContextMenu,
+    setOpenContextMenu,
+}: ContextMenuButtonProps) => {
+    const ref = useRef(null)
+    const { setOpenDeleteModal } = useSidePanelContext()
+
+    return (
+        <div ref={ref}>
+            <Button
+                aria-label="More"
+                icon={<IconMore16 />}
+                name="more"
+                onClick={handleContextMenu}
+                title="More"
+            />
+            {openContextMenu && (
+                <Popover
+                    reference={ref}
+                    placement="right-start"
+                    onClickOutside={() => setOpenContextMenu(false)}
+                >
+                    <div
+                        className={classes.contextMenu}
+                        style={{
+                            width: '150px',
+                            padding: 6,
+                        }}
+                    >
+                        <Button
+                            aria-label={i18n.t('delete')}
+                            icon={<IconDelete16 />}
+                            name={i18n.t('delete')}
+                            onClick={() => {
+                                setOpenContextMenu(false)
+                                setOpenDeleteModal(true)
+                            }}
+                            title={i18n.t('delete')}
+                        >
+                            {i18n.t('Delete')}
+                        </Button>
+                    </div>
+                </Popover>
+            )}
+        </div>
+    )
+}
+
+export default ContextMenuButton
diff --git a/src/components/sidepanel/CreateButton.tsx b/src/components/sidepanel/CreateButton.tsx
index 071bfd3..6736dbd 100644
--- a/src/components/sidepanel/CreateButton.tsx
+++ b/src/components/sidepanel/CreateButton.tsx
@@ -1,15 +1,18 @@
 import { Button } from '@dhis2/ui'
 import { IconAdd16 } from '@dhis2/ui-icons'
 import React from 'react'
+import { useSidePanelContext } from '../../context/SidePanelContext'
 import i18n from '../../locales'
 import classes from '../Panel.module.css'
 
 type CreateButtonProps = {
-    label: string
     handleClick: () => void
 }
 
-const CreateButton = ({ label, handleClick }: CreateButtonProps) => {
+const CreateButton = ({ handleClick }: CreateButtonProps) => {
+    const { panelType: type } = useSidePanelContext()
+    const label =
+        type === 'namespace' ? i18n.t('New namespace') : i18n.t('New key')
     return (
         <div className={classes.createButton}>
             <Button
diff --git a/src/components/sidepanel/PanelLink.tsx b/src/components/sidepanel/PanelLink.tsx
index d808858..e4e9500 100644
--- a/src/components/sidepanel/PanelLink.tsx
+++ b/src/components/sidepanel/PanelLink.tsx
@@ -1,13 +1,9 @@
-import { Button } from '@dhis2/ui'
-import {
-    IconFile16,
-    IconMore16,
-    IconFolder16,
-    IconFolderOpen16,
-} from '@dhis2/ui-icons'
-import React from 'react'
+import { IconFile16, IconFolder16, IconFolderOpen16 } from '@dhis2/ui-icons'
+import React, { useState } from 'react'
 import { NavLink } from 'react-router-dom'
+import { useSidePanelContext } from '../../context/SidePanelContext'
 import classes from '../Panel.module.css'
+import ContextMenuButton from './ContextButton'
 
 type SidePanelLinkProps = {
     label: string
@@ -16,6 +12,13 @@ type SidePanelLinkProps = {
 }
 
 const SidePanelLink = ({ to, label, type }: SidePanelLinkProps) => {
+    const { setSelectedLinkItem } = useSidePanelContext()
+    const [openContextMenu, setOpenContextMenu] = useState(false)
+
+    const handleContextMenu = () => {
+        setSelectedLinkItem(label)
+        setOpenContextMenu((prev) => !prev)
+    }
     const renderIcon = ({ isActive }) =>
         type === 'namespace' ? (
             isActive ? (
@@ -38,16 +41,14 @@ const SidePanelLink = ({ to, label, type }: SidePanelLinkProps) => {
                     <>
                         {renderIcon({ isActive })}
                         <span>{label}</span>
-                        <Button
-                            aria-label="More"
-                            icon={<IconMore16 />}
-                            name="more"
-                            // onClick={}
-                            title="More"
-                        />
                     </>
                 )}
             </NavLink>
+            <ContextMenuButton
+                handleContextMenu={handleContextMenu}
+                openContextMenu={openContextMenu}
+                setOpenContextMenu={setOpenContextMenu}
+            />
         </li>
     )
 }
diff --git a/src/components/sidepanel/PanelLinksList.tsx b/src/components/sidepanel/PanelLinksList.tsx
index df612af..e35a869 100644
--- a/src/components/sidepanel/PanelLinksList.tsx
+++ b/src/components/sidepanel/PanelLinksList.tsx
@@ -1,49 +1,68 @@
 import React, { useEffect } from 'react'
-import { useParams } from 'react-router-dom'
-import { ErrorResponse } from '../error/ErrorComponent'
+import { useNavigate, useParams } from 'react-router-dom'
+import { useSidePanelContext } from '../../context/SidePanelContext'
+import {
+    useDeleteKeyMutation,
+    useDeleteNamespaceMutation,
+} from '../../hooks/useDeleteMutation'
+import DeleteModal from '../modals/DeleteModal'
 import classes from '../Panel.module.css'
-import CenteredLoader from './Loader'
 import SidePanelLink from './PanelLink'
 
 type PanelLinksListProps = {
     data: { results: [] }
-    error: { details: ErrorResponse }
-    loading: boolean
     refetchList: () => void
-    type: string
 }
 
-function PanelLinksList({
-    data,
-    error,
-    loading,
-    refetchList,
-    type,
-}: PanelLinksListProps) {
-    const { store, namespace, key } = useParams()
-    // const [selectedLink, setSelectedLink] = useState('')
+function PanelLinksList({ data, refetchList }: PanelLinksListProps) {
+    const { store, namespace: currentNamespace, key } = useParams()
+    const navigate = useNavigate()
+    const {
+        panelType: type,
+        openDeleteModal,
+        selectedLinkItem,
+    } = useSidePanelContext()
 
     useEffect(() => {
         refetchList()
-    }, [store, namespace, key, refetchList])
+    }, [store, currentNamespace, key, refetchList])
 
-    if (error) {
-        throw new Response('', {
-            status: error?.details.httpStatusCode,
-            statusText: error?.details.status || error.details.message,
-        })
-    }
+    const handleDeleteAction =
+        type === 'namespace'
+            ? useDeleteNamespaceMutation({
+                  namespace: selectedLinkItem,
+                  store,
+                  refetch: () => {
+                      refetchList()
+                      navigate(`${store}`)
+                  },
+              })
+            : type === 'keys'
+            ? data?.results?.length < 2
+                ? useDeleteNamespaceMutation({
+                      namespace: currentNamespace,
+                      store,
+                      refetch: () => {
+                          navigate(`/${store}`)
+                      },
+                  })
+                : useDeleteKeyMutation({
+                      namespace: currentNamespace,
+                      key: selectedLinkItem,
+                      store,
+                      refetch: refetchList,
+                  })
+            : null
 
     return (
         <div className={classes.sidebarList}>
-            {loading && <CenteredLoader />}
             {data && (
                 <ul>
                     {data.results.map((value: string, index) => {
                         const path =
                             type === 'namespace'
                                 ? `/${store}/edit/${value}`
-                                : `/${store}/edit/${namespace}/${value}`
+                                : `/${store}/edit/${currentNamespace}/${value}`
                         return (
                             <SidePanelLink
                                 key={`${index}-${value}`}
@@ -55,6 +74,9 @@ function PanelLinksList({
                     })}
                 </ul>
             )}
+            {openDeleteModal && (
+                <DeleteModal handleDeleteAction={handleDeleteAction} />
+            )}
         </div>
     )
 }
diff --git a/src/components/sidepanel/SidePanel.tsx b/src/components/sidepanel/SidePanel.tsx
index 7104ab2..7ad2b3e 100644
--- a/src/components/sidepanel/SidePanel.tsx
+++ b/src/components/sidepanel/SidePanel.tsx
@@ -1,14 +1,16 @@
-import { useDataEngine } from '@dhis2/app-service-data'
+import { useDataEngine } from '@dhis2/app-runtime'
 import React, { useState } from 'react'
 import { useNavigate, useParams } from 'react-router'
+import { SidePanelContextProvider } from '../../context/SidePanelContext'
+import useCustomAlert from '../../hooks/useCustomAlert'
 import i18n from '../../locales'
 import { ErrorResponse } from '../error/ErrorComponent'
 import CreateModal from '../modals/CreateModal'
 import classes from '../Panel.module.css'
 import CreateButton from './CreateButton'
+import CenteredLoader from './Loader'
 import PanelLinksList from './PanelLinksList'
 import PanelSearchField from './SearchField'
-import useCustomAlert from '../../hooks/useCustomAlert'
 
 type SidePanelProps = {
     data: { results: [] }
@@ -33,7 +35,7 @@ const SidePanel = ({
     const engine = useDataEngine()
     const navigate = useNavigate()
     const { store, namespace: currentNamespace } = useParams()
-    const [openModal, setOpenModal] = useState(false)
+    const [openCreateModal, setOpenCreateModal] = useState(false)
     const [values, setValues] = useState({})
 
     const { showSuccess, showError } = useCustomAlert()
@@ -73,47 +75,36 @@ const SidePanel = ({
                 },
             }
         )
-        setOpenModal(false)
+        setOpenCreateModal(false)
     }
 
-    const derivedModalProps = {
-        title:
-            type === 'namespace'
-                ? i18n.t('Add New Namespace')
-                : i18n.t('Add New Key'),
-        buttonLabel:
-            type === 'namespace' ? i18n.t('Add Namespace') : i18n.t('Add Key'),
+    if (error) {
+        throw new Response('', {
+            status: error?.details.httpStatusCode,
+            statusText: error?.details.status || error.details.message,
+        })
     }
-    const createButtonLabel =
-        type === 'namespace' ? i18n.t('New namespace') : i18n.t('New key')
 
     return (
-        <>
+        <SidePanelContextProvider
+            panelType={type}
+            totalItems={data?.results?.length}
+        >
             <div className={classes.sidebarContent}>
                 <PanelSearchField />
-                <CreateButton
-                    label={createButtonLabel}
-                    handleClick={() => setOpenModal(true)}
-                />
-                <PanelLinksList
-                    data={data}
-                    error={error}
-                    loading={loading}
-                    refetchList={refetchList}
-                    type={type}
-                />
+                <CreateButton handleClick={() => setOpenCreateModal(true)} />
+                {loading && <CenteredLoader />}
+                <PanelLinksList data={data} refetchList={refetchList} />
             </div>
-            {openModal && (
+            {openCreateModal && (
                 <CreateModal
                     createFn={handleCreate}
                     values={values}
                     setValues={setValues}
-                    closeModal={() => setOpenModal(false)}
-                    type={type}
-                    {...derivedModalProps}
+                    closeModal={() => setOpenCreateModal(false)}
                 />
             )}
-        </>
+        </SidePanelContextProvider>
     )
 }
 
diff --git a/src/context/SidePanelContext.tsx b/src/context/SidePanelContext.tsx
new file mode 100644
index 0000000..8ab122e
--- /dev/null
+++ b/src/context/SidePanelContext.tsx
@@ -0,0 +1,35 @@
+import React, { createContext, useContext, useState } from 'react'
+
+type SidePanelContextProps = {
+    panelType: string
+    children: React.ReactElement[]
+    totalItems: number
+}
+
+export const SidePanelContext = createContext(null)
+
+export const SidePanelContextProvider = ({
+    panelType,
+    children,
+    totalItems,
+}: SidePanelContextProps) => {
+    const [selectedLinkItem, setSelectedLinkItem] = useState(null)
+    const [openDeleteModal, setOpenDeleteModal] = useState(false)
+
+    return (
+        <SidePanelContext.Provider
+            value={{
+                panelType,
+                selectedLinkItem,
+                setSelectedLinkItem,
+                totalItems,
+                openDeleteModal,
+                setOpenDeleteModal,
+            }}
+        >
+            {children}
+        </SidePanelContext.Provider>
+    )
+}
+
+export const useSidePanelContext = () => useContext(SidePanelContext)
diff --git a/src/hooks/useCustomAlert.tsx b/src/hooks/useCustomAlert.tsx
index 2d40f0b..687728b 100644
--- a/src/hooks/useCustomAlert.tsx
+++ b/src/hooks/useCustomAlert.tsx
@@ -1,4 +1,4 @@
-import { useAlert } from "@dhis2/app-runtime"
+import { useAlert } from '@dhis2/app-runtime'
 
 const useCustomAlert = () => {
     const { show } = useAlert(
diff --git a/src/hooks/useDeleteMutation.tsx b/src/hooks/useDeleteMutation.tsx
new file mode 100644
index 0000000..4c82089
--- /dev/null
+++ b/src/hooks/useDeleteMutation.tsx
@@ -0,0 +1,31 @@
+import { useDataEngine } from '@dhis2/app-runtime'
+
+export const useDeleteKeyMutation = ({ key, namespace, store, refetch }) => {
+    const engine = useDataEngine()
+
+    const handleDeleteAction = async () => {
+        await engine.mutate({
+            type: 'delete' as const,
+            resource: `${store}/${namespace}`,
+            id: key,
+        })
+        refetch()
+    }
+
+    return handleDeleteAction
+}
+
+export const useDeleteNamespaceMutation = ({ namespace, store, refetch }) => {
+    const engine = useDataEngine()
+
+    const handleDeleteAction = async () => {
+        await engine.mutate({
+            type: 'delete' as const,
+            resource: `${store}`,
+            id: namespace,
+        })
+        refetch()
+    }
+
+    return handleDeleteAction
+}

From e2be6dcf6eedcbaf95588537027439592551999a Mon Sep 17 00:00:00 2001
From: Diana Nanyanzi <diana@dhis2.org>
Date: Fri, 20 Dec 2024 20:47:15 +0300
Subject: [PATCH 8/8] chore: fix import file case

---
 src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 91dd082..c770511 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import { RouterProvider } from 'react-router-dom'
-import AppWrapper from './components/AppWrapper'
+import AppWrapper from './components/appWrapper'
 import { threePanelRouter } from './routes/PanelRouter'
 
 const App: FC = () => {