From 684c713a22f8ffeec063b9f5dfc069ef790f66fa Mon Sep 17 00:00:00 2001
From: Diana Nanyanzi <diana@dhis2.org>
Date: Thu, 19 Dec 2024 19:29:23 +0300
Subject: [PATCH] feat: delete key functionality

---
 i18n/en.pot                                 | 19 ++++--
 src/components/sections/KeysDataSection.tsx | 71 ++++++++++++++++++++-
 src/components/table/ItemsTable.tsx         |  1 +
 3 files changed, 84 insertions(+), 7 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index bc65235..aa8409d 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-19T16:36:13.574Z\n"
-"PO-Revision-Date: 2024-12-19T16:36:13.575Z\n"
+"POT-Creation-Date: 2024-12-19T16:57:20.491Z\n"
+"PO-Revision-Date: 2024-12-19T16:57:20.492Z\n"
 
 msgid "An error has occurred"
 msgstr "An error has occurred"
@@ -26,6 +26,9 @@ msgstr "Cancel"
 msgid "Add"
 msgstr "Add"
 
+msgid "Delete"
+msgstr "Delete"
+
 msgid "Key"
 msgstr "Key"
 
@@ -68,6 +71,9 @@ msgstr "Search keys"
 msgid "Add New Key"
 msgstr "Add New Key"
 
+msgid "Delete Key"
+msgstr "Delete Key"
+
 msgid "Search namespaces"
 msgstr "Search namespaces"
 
@@ -77,12 +83,15 @@ msgstr "New Namespace"
 msgid "Add New Namespace"
 msgstr "Add New Namespace"
 
+msgid "Delete Namespace"
+msgstr "Delete Namespace"
+
+msgid "This will delete all the keys in this namespace"
+msgstr "This will delete all the keys in this namespace"
+
 msgid "Search"
 msgstr "Search"
 
-msgid "Delete"
-msgstr "Delete"
-
 msgid "Actions"
 msgstr "Actions"
 
diff --git a/src/components/sections/KeysDataSection.tsx b/src/components/sections/KeysDataSection.tsx
index d61f326..99d74a7 100644
--- a/src/components/sections/KeysDataSection.tsx
+++ b/src/components/sections/KeysDataSection.tsx
@@ -1,13 +1,14 @@
 import { useDataEngine, useDataQuery } from '@dhis2/app-runtime'
 import { IconAdd16, colors } from '@dhis2/ui'
 import React, { useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import classes from '../../App.module.css'
 import i18n from '../../locales'
 import ErrorNotice from '../error/ErrorNotice'
 import PanelHeader from '../header/PanelHeader'
 import CenteredLoader from '../loader/Loader'
 import CreateModal from '../modals/CreateModal'
+import DeleteModal from '../modals/DeleteModal'
 import { KeysField } from '../modals/Fields'
 import ItemsTable from '../table/ItemsTable'
 import CreateButton from './CreateButton'
@@ -19,9 +20,12 @@ interface QueryResults {
 
 const KeysDataSection = ({ query }) => {
     const engine = useDataEngine()
+    const navigate = useNavigate()
     const { store, namespace: currentNamespace } = useParams()
 
     const [openModal, setOpenModal] = useState(false)
+    const [openDeleteModal, setOpenDeleteModal] = useState(false)
+    const [selectedKey, setSelectedKey] = useState(null)
 
     const { error, loading, data, refetch } = useDataQuery<QueryResults>(
         query,
@@ -32,6 +36,8 @@ const KeysDataSection = ({ query }) => {
         }
     )
 
+    const numberOfKeysInNamespace = data?.results?.length
+
     const handleCreate = async ({ key }) => {
         await engine.mutate(
             {
@@ -46,6 +52,42 @@ const KeysDataSection = ({ query }) => {
         refetch({ id: currentNamespace })
     }
 
+    const handleDelete = async () => {
+        let resource = `${store}`
+
+        if (numberOfKeysInNamespace > 1) {
+            resource = `${resource}/${currentNamespace}`
+            await engine.mutate(
+                {
+                    type: 'delete' as const,
+                    resource: resource,
+                    id: selectedKey,
+                },
+                {
+                    onComplete: () => {
+                        setOpenDeleteModal(false)
+                        refetch({ id: currentNamespace })
+                        navigate(`/${store}/edit/${currentNamespace}`)
+                    },
+                }
+            )
+        } else {
+            await engine.mutate(
+                {
+                    type: 'delete' as const,
+                    resource: resource,
+                    id: currentNamespace,
+                },
+                {
+                    onComplete: () => {
+                        setOpenDeleteModal(false)
+                        navigate(`/${store}`)
+                    },
+                }
+            )
+        }
+    }
+
     useEffect(() => {
         refetch({ id: currentNamespace })
     }, [currentNamespace])
@@ -74,7 +116,14 @@ const KeysDataSection = ({ query }) => {
                 <SearchField placeholder={i18n.t('Search keys')} />
             </div>
             <div>
-                {data && <ItemsTable data={data} label={i18n.t('Key')} />}
+                {data && (
+                    <ItemsTable
+                        data={data}
+                        label={i18n.t('Key')}
+                        setOpenDeleteModal={setOpenDeleteModal}
+                        setSelectedItem={setSelectedKey}
+                    />
+                )}
             </div>
             {openModal && (
                 <CreateModal
@@ -85,6 +134,24 @@ const KeysDataSection = ({ query }) => {
                     <KeysField initialFocus />
                 </CreateModal>
             )}
+            {openDeleteModal && (
+                <DeleteModal
+                    closeModal={() => setOpenDeleteModal(false)}
+                    handleDelete={handleDelete}
+                    title={i18n.t('Delete Key')}
+                >
+                    {i18n.t(
+                        `Are you sure you want to delete '${selectedKey}' in ${currentNamespace}?`
+                    )}
+                    {numberOfKeysInNamespace < 2 && (
+                        <p>
+                            {i18n.t(
+                                `This will also delete the namespace '${currentNamespace}'`
+                            )}
+                        </p>
+                    )}
+                </DeleteModal>
+            )}
         </>
     )
 }
diff --git a/src/components/table/ItemsTable.tsx b/src/components/table/ItemsTable.tsx
index 7e50dd7..754d105 100644
--- a/src/components/table/ItemsTable.tsx
+++ b/src/components/table/ItemsTable.tsx
@@ -36,6 +36,7 @@ const ItemsTable = ({
     const handleDeleteBtnClick = (item) => {
         setOpenDeleteModal(true)
         setSelectedItem(item)
+        setActiveRow(item)
     }
 
     return (