chore: add delete confirmation modal and use it in permission component

web/src/containers/Settings/deletePermissionModal.tsx

@@ -1,44 +0,0 @@
-import React from 'react'
-
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogActions,
-  Typography
-} from '@mui/material'
-import { styled } from '@mui/material/styles'
-
-const BootstrapDialog = styled(Dialog)(({ theme }) => ({
-  '& .MuiDialogContent-root': {
-    padding: theme.spacing(2)
-  },
-  '& .MuiDialogActions-root': {
-    padding: theme.spacing(1)
-  }
-}))
-
-type DeleteModalProps = {
-  open: boolean
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>
-  deletePermission: () => void
-}
-
-const DeleteModal = ({ open, setOpen, deletePermission }: DeleteModalProps) => {
-  return (
-    <BootstrapDialog onClose={() => setOpen(false)} open={open}>
-      <DialogContent dividers>
-        <Typography gutterBottom>
-          Are you sure you want to delete this permission?
-        </Typography>
-      </DialogContent>
-      <DialogActions>
-        <Button color="error" onClick={() => deletePermission()}>
-          Delete
-        </Button>
-      </DialogActions>
-    </BootstrapDialog>
-  )
-}
-
-export default DeleteModal

web/src/containers/Settings/permission.tsx

@@ -28,7 +28,7 @@ import Modal from '../../components/modal'
 import PermissionFilterModal from './permissionFilterModal'
 import AddPermissionModal from './addPermissionModal'
 import UpdatePermissionModal from './updatePermissionModal'
-import DeleteModal from './deletePermissionModal'
+import DeleteConfirmationModal from '../../components/deleteConfirmationModal'
 import BootstrapSnackbar, { AlertSeverityType } from '../../components/snackbar'
 
 import {
@@ -61,7 +61,10 @@ const Permission = () => {
   const [addPermissionModalOpen, setAddPermissionModalOpen] = useState(false)
   const [updatePermissionModalOpen, setUpdatePermissionModalOpen] =
     useState(false)
-  const [deleteModalOpen, setDeleteModalOpen] = useState(false)
+  const [deleteConfirmationModalOpen, setDeleteConfirmationModalOpen] =
+    useState(false)
+  const [deleteConfirmationModalMessage, setDeleteConfirmationModalMessage] =
+    useState('')
   const [selectedPermission, setSelectedPermission] =
     useState<PermissionResponse>()
   const [filterModalOpen, setFilterModalOpen] = useState(false)
@@ -236,11 +239,14 @@ const Permission = () => {
 
   const handleDeletePermissionClick = (permission: PermissionResponse) => {
     setSelectedPermission(permission)
-    setDeleteModalOpen(true)
+    setDeleteConfirmationModalOpen(true)
+    setDeleteConfirmationModalMessage(
+      'Are you sure you want to delete this permission?'
+    )
   }
 
   const deletePermission = () => {
-    setDeleteModalOpen(false)
+    setDeleteConfirmationModalOpen(false)
     setIsLoading(true)
     axios
       .delete(`/SASjsApi/permission/${selectedPermission?.permissionId}`)
@@ -338,10 +344,11 @@ const Permission = () => {
         permission={selectedPermission}
         updatePermission={updatePermission}
       />
-      <DeleteModal
-        open={deleteModalOpen}
-        setOpen={setDeleteModalOpen}
-        deletePermission={deletePermission}
+      <DeleteConfirmationModal
+        open={deleteConfirmationModalOpen}
+        setOpen={setDeleteConfirmationModalOpen}
+        message={deleteConfirmationModalMessage}
+        _delete={deletePermission}
       />
     </Box>
   )