feat(delete action): add confirmation dialog

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-03-18T01:33:26.193Z\n"
-"PO-Revision-Date: 2024-03-18T01:33:26.193Z\n"
+"POT-Creation-Date: 2024-03-19T00:47:49.739Z\n"
+"PO-Revision-Date: 2024-03-19T00:47:49.739Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -249,15 +249,18 @@ msgstr "Search by name, code or ID"
 msgid "Public access"
 msgstr "Public access"
 
+msgid "Delete"
+msgstr "Delete"
+
+msgid "Are you sure that you want to delete this data element?"
+msgstr "Are you sure that you want to delete this data element?"
+
 msgid "Show details"
 msgstr "Show details"
 
 msgid "Sharing settings"
 msgstr "Sharing settings"
 
-msgid "Delete"
-msgstr "Delete"
-
 msgid "At least one column must be selected"
 msgstr "At least one column must be selected"
 
@@ -567,6 +570,9 @@ msgstr "Locales"
 msgid "You do not have access to edit this item."
 msgstr "You do not have access to edit this item."
 
+msgid "You do not have access to delete this item."
+msgstr "You do not have access to delete this item."
+
 msgid "Sum"
 msgstr "Sum"
 

src/components/sectionList/SectionListWrapper.tsx

@@ -110,12 +110,18 @@ export const SectionListWrapper = ({
         (model: BaseListModel) => (
             <DefaultListActions
                 model={model}
+                modelType={schema.displayName}
                 onShowDetailsClick={handleDetailsClick}
                 onOpenSharingClick={setSharingDialogId}
                 onDeleteClick={() => deleteModel(model)}
             />
         ),
-        [handleDetailsClick, setSharingDialogId, deleteModel]
+        [
+            handleDetailsClick,
+            setSharingDialogId,
+            deleteModel,
+            schema.displayName,
+        ]
     )
 
     const isAllSelected = data ? checkAllSelected(data) : false

src/components/sectionList/listActions/DefaultListActions.tsx

@@ -5,13 +5,15 @@ import { ListActions, ActionEdit, ActionMore } from './SectionListActions'
 
 type DefaultListActionProps = {
     model: BaseListModel
+    modelType: string
     onShowDetailsClick: (model: BaseListModel) => void
     onOpenSharingClick: (id: string) => void
     onDeleteClick: () => void
 }
 
 export const DefaultListActions = ({
     model,
+    modelType,
     onShowDetailsClick,
     onOpenSharingClick,
     onDeleteClick,
@@ -29,6 +31,7 @@ export const DefaultListActions = ({
                 onShowDetailsClick={() => onShowDetailsClick(model)}
                 onOpenSharingClick={() => onOpenSharingClick(model.id)}
                 onDeleteClick={onDeleteClick}
+                modelType={modelType}
             />
         </ListActions>
     )

src/components/sectionList/listActions/DeleteAction.tsx

@@ -0,0 +1,90 @@
+import i18n from '@dhis2/d2-i18n'
+import {
+    Button,
+    ButtonStrip,
+    IconDelete16,
+    MenuItem,
+    Modal,
+    ModalActions,
+    ModalTitle,
+} from '@dhis2/ui'
+import React, { useState } from 'react'
+import { TOOLTIPS } from '../../../lib'
+import { TooltipWrapper } from '../../tooltip'
+
+export function DeleteAction({
+    deletable,
+    modelType,
+    onClick,
+    onCancel,
+}: {
+    deletable: boolean
+    modelType: string
+    onClick: () => void
+    onCancel: () => void
+}) {
+    const [showConfirmationDialog, setShowConfirmationDialog] = useState(false)
+
+    return (
+        <>
+            <TooltipWrapper
+                condition={!deletable}
+                content={TOOLTIPS.noDeleteAccess}
+            >
+                <MenuItem
+                    dense
+                    disabled={!deletable}
+                    label={i18n.t('Delete')}
+                    icon={<IconDelete16 />}
+                    onClick={() => setShowConfirmationDialog(true)}
+                />
+            </TooltipWrapper>
+
+            {showConfirmationDialog && (
+                <ConfirmationDialog
+                    modelType={modelType}
+                    onConfirm={() => {
+                        setShowConfirmationDialog(false)
+                        onClick()
+                    }}
+                    onCancel={() => {
+                        setShowConfirmationDialog(false)
+                        onCancel()
+                    }}
+                />
+            )}
+        </>
+    )
+}
+
+function ConfirmationDialog({
+    modelType,
+    onCancel,
+    onConfirm,
+}: {
+    modelType: string
+    onCancel: () => void
+    onConfirm: () => void
+}) {
+    return (
+        <Modal>
+            <ModalTitle>
+                {i18n.t(
+                    'Are you sure that you want to delete this {{modelType}}?',
+                    {
+                        modelType: modelType,
+                    }
+                )}
+            </ModalTitle>
+
+            <ModalActions>
+                <ButtonStrip>
+                    <Button onClick={onCancel}>No</Button>
+                    <Button destructive onClick={onConfirm}>
+                        Yes
+                    </Button>
+                </ButtonStrip>
+            </ModalActions>
+        </Modal>
+    )
+}

src/components/sectionList/listActions/SectionListActions.tsx

@@ -2,7 +2,6 @@ import i18n from '@dhis2/d2-i18n'
 import {
     Button,
     FlyoutMenu,
-    IconDelete16,
     IconEdit16,
     IconEdit24,
     IconMore16,
@@ -16,6 +15,7 @@ import { useHref, useLinkClickHandler } from 'react-router-dom'
 import { TOOLTIPS } from '../../../lib'
 import { LinkButton } from '../../LinkButton'
 import { TooltipWrapper } from '../../tooltip'
+import { DeleteAction } from './DeleteAction'
 import css from './SectionListActions.module.css'
 
 export const ListActions = ({ children }: React.PropsWithChildren) => {
@@ -34,6 +34,7 @@ type ActionMoreProps = {
     modelId: string
     deletable: boolean
     editable: boolean
+    modelType: string
     onShowDetailsClick: () => void
     onOpenSharingClick: () => void
     onDeleteClick: () => void
@@ -42,6 +43,7 @@ export const ActionMore = ({
     modelId,
     deletable,
     editable,
+    modelType,
     onOpenSharingClick,
     onShowDetailsClick,
     onDeleteClick,
@@ -59,7 +61,7 @@ export const ActionMore = ({
                 secondary
                 onClick={() => setOpen(!open)}
                 icon={<IconMore24 />}
-            ></Button>
+            />
             {open && (
                 <Popover
                     className={css.actionMorePopover}
@@ -103,26 +105,18 @@ export const ActionMore = ({
                                     onOpenSharingClick()
                                     setOpen(false)
                                 }}
-                            ></MenuItem>
-                        </TooltipWrapper>
-
-                        <TooltipWrapper
-                            condition={!deletable}
-                            content={TOOLTIPS.noEditAccess}
-                        >
-                            <MenuItem
-                                dense
-                                disabled={!deletable}
-                                label={i18n.t('Delete')}
-                                icon={<IconDelete16 />}
-                                onClick={() => {
-                                    onDeleteClick()
-                                    setOpen(false)
-                                }}
-                                target="_blank"
-                                href={href}
                             />
                         </TooltipWrapper>
+
+                        <DeleteAction
+                            modelType={modelType}
+                            deletable={deletable}
+                            onCancel={() => setOpen(false)}
+                            onClick={() => {
+                                onDeleteClick()
+                                setOpen(false)
+                            }}
+                        />
                     </FlyoutMenu>
                 </Popover>
             )}