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

web/src/components/deleteConfirmationModal.tsx

@@ -18,22 +18,27 @@ const BootstrapDialog = styled(Dialog)(({ theme }) => ({
   }
 }))
 
-type DeleteModalProps = {
+type DeleteConfirmationModalProps = {
   open: boolean
   setOpen: React.Dispatch<React.SetStateAction<boolean>>
-  deletePermission: () => void
+  message: string
+  _delete: () => void
 }
 
-const DeleteModal = ({ open, setOpen, deletePermission }: DeleteModalProps) => {
+const DeleteConfirmationModal = ({
+  open,
+  setOpen,
+  message,
+  _delete
+}: DeleteConfirmationModalProps) => {
   return (
     <BootstrapDialog onClose={() => setOpen(false)} open={open}>
       <DialogContent dividers>
-        <Typography gutterBottom>
+        <Typography gutterBottom>{message}</Typography>
-          Are you sure you want to delete this permission?
-        </Typography>
       </DialogContent>
       <DialogActions>
-        <Button color="error" onClick={() => deletePermission()}>
+        <Button onClick={() => setOpen(false)}>Cancel</Button>
+        <Button color="error" onClick={() => _delete()}>
           Delete
         </Button>
       </DialogActions>
@@ -41,4 +46,4 @@ const DeleteModal = ({ open, setOpen, deletePermission }: DeleteModalProps) => {
   )
 }
 
-export default DeleteModal
+export default DeleteConfirmationModal

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
+      <DeleteConfirmationModal
-        open={deleteModalOpen}
+        open={deleteConfirmationModalOpen}
-        setOpen={setDeleteModalOpen}
+        setOpen={setDeleteConfirmationModalOpen}
-        deletePermission={deletePermission}
+        message={deleteConfirmationModalMessage}
+        _delete={deletePermission}
       />
     </Box>
   )