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

@@ -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-11T01:36:42.741Z\n"
+"PO-Revision-Date: 2024-12-11T01:36:42.741Z\n"
 
 msgid "View keys"
 msgstr "View keys"
@@ -23,6 +23,24 @@ 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 "New namespace"
+msgstr "New namespace"
+
+msgid "New key"
+msgstr "New key"
+
 msgid "Namespace"
 msgstr "Namespace"
 
@@ -32,6 +50,12 @@ msgstr "Key"
 msgid "Cancel"
 msgstr "Cancel"
 
+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"
 
@@ -59,20 +83,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"

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;
+}

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,22 +17,25 @@ type CreateModalProps = {
     values: CreateFieldValues
     setValues: (values) => void
     closeModal: () => void
-    title: string
-    type: string
-    buttonLabel: string
 }
 
 const CreateModal = ({
     createFn,
     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' && (

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

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)
         }

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

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

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>
     )
 }