From a2a7d8084bd3da87d26cefe0c0de4369a37de79d Mon Sep 17 00:00:00 2001
From: Sofia Sazonova <sazonova@amazon.co.uk>
Date: Mon, 29 Apr 2024 17:40:17 +0100
Subject: [PATCH] Add confirmation pop-ups for deletion of team roles and
 groups

---
 .../DeleteObjectWithFrictionModal.js          |  1 +
 .../components/EnvironmentTeams.js            | 46 ++++++++++++++++---
 .../components/OrganizationTeams.js           | 23 +++++++++-
 3 files changed, 62 insertions(+), 8 deletions(-)

diff --git a/frontend/src/design/components/DeleteObjectWithFrictionModal.js b/frontend/src/design/components/DeleteObjectWithFrictionModal.js
index b7a610bdf..06f3c1449 100644
--- a/frontend/src/design/components/DeleteObjectWithFrictionModal.js
+++ b/frontend/src/design/components/DeleteObjectWithFrictionModal.js
@@ -29,6 +29,7 @@ export const DeleteObjectWithFrictionModal = (props) => {
   const handleChange = (event) => {
     setConfirmValue(event.target.value);
   };
+
   return (
     <Dialog maxWidth="sm" fullWidth onClose={onClose} open={open} {...other}>
       <Box sx={{ p: 3 }}>
diff --git a/frontend/src/modules/Environments/components/EnvironmentTeams.js b/frontend/src/modules/Environments/components/EnvironmentTeams.js
index 52b2a3775..228fcbaea 100644
--- a/frontend/src/modules/Environments/components/EnvironmentTeams.js
+++ b/frontend/src/modules/Environments/components/EnvironmentTeams.js
@@ -34,6 +34,7 @@ import { HiUserRemove } from 'react-icons/hi';
 import { VscChecklist } from 'react-icons/vsc';
 import {
   Defaults,
+  DeleteObjectWithFrictionModal,
   Label,
   Pager,
   RefreshTableMenu,
@@ -65,6 +66,16 @@ function TeamRow({ team, environment, fetchItems }) {
   const [accessingConsole, setAccessingConsole] = useState(false);
   const [loadingCreds, setLoadingCreds] = useState(false);
   const [isTeamEditModalOpen, setIsTeamEditModalOpen] = useState(false);
+  const [isDeleteTeamModalOpen, setIsDeleteTeamModalOpen] = useState(false);
+
+  const handleDeleteTeamModalOpen = () => {
+    setIsDeleteTeamModalOpen(true);
+  };
+
+  const handleDeleteTeamModalClose = () => {
+    setIsDeleteTeamModalOpen(false);
+  };
+
   const handleTeamEditModalClose = () => {
     setIsTeamEditModalOpen(false);
   };
@@ -215,7 +226,7 @@ function TeamRow({ team, environment, fetchItems }) {
             </>
           )}
           {team.groupUri !== environment.SamlGroupName && (
-            <LoadingButton onClick={() => removeGroup(team.groupUri)}>
+            <LoadingButton onClick={() => handleDeleteTeamModalOpen()}>
               <HiUserRemove
                 size={25}
                 color={
@@ -227,6 +238,14 @@ function TeamRow({ team, environment, fetchItems }) {
             </LoadingButton>
           )}
         </Box>
+        <DeleteObjectWithFrictionModal
+          objectName={team.groupUri}
+          onApply={handleDeleteTeamModalClose}
+          onClose={handleDeleteTeamModalClose}
+          open={isDeleteTeamModalOpen}
+          isAWSResource={false}
+          deleteFunction={() => removeGroup(team.groupUri)}
+        />
       </TableCell>
     </TableRow>
   );
@@ -252,6 +271,14 @@ export const EnvironmentTeams = ({ environment }) => {
   const [inputValueRoles, setInputValueRoles] = useState('');
   const [isTeamInviteModalOpen, setIsTeamInviteModalOpen] = useState(false);
   const [isAddRoleModalOpen, setIsAddRoleModalOpen] = useState(false);
+  const [isDeleteRoleModalOpenId, setIsDeleteRoleModalOpen] = useState(0);
+  const handleDeleteRoleModalOpen = (id) => {
+    setIsDeleteRoleModalOpen(id);
+  };
+  const handleDeleteRoleModalClosed = (id) => {
+    setIsDeleteRoleModalOpen(0);
+  };
+
   const handleTeamInviteModalOpen = () => {
     setIsTeamInviteModalOpen(true);
   };
@@ -424,10 +451,6 @@ export const EnvironmentTeams = ({ environment }) => {
     setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } });
   };
 
-  const handleDeleteClick = (id) => () => {
-    removeConsumptionRole(id);
-  };
-
   const handleCancelClick = (id) => () => {
     setRowModesModel({
       ...rowModesModel,
@@ -711,7 +734,8 @@ export const EnvironmentTeams = ({ environment }) => {
                     flex: 0.5,
                     type: 'actions',
                     cellClassName: 'actions',
-                    getActions: ({ id }) => {
+                    getActions: ({ id, ...props }) => {
+                      const name = props.row.consumptionRoleName;
                       const isInEditMode =
                         rowModesModel[id]?.mode === GridRowModes.Edit;
 
@@ -745,8 +769,16 @@ export const EnvironmentTeams = ({ environment }) => {
                         <GridActionsCellItem
                           icon={<DeleteIcon />}
                           label="Delete"
-                          onClick={handleDeleteClick(id)}
+                          onClick={() => handleDeleteRoleModalOpen(id)}
                           color="inherit"
+                        />,
+                        <DeleteObjectWithFrictionModal
+                          objectName={name}
+                          onApply={() => handleDeleteRoleModalClosed(id)}
+                          onClose={() => handleDeleteRoleModalClosed(id)}
+                          open={isDeleteRoleModalOpenId === id}
+                          isAWSResource={false}
+                          deleteFunction={() => removeConsumptionRole(id)}
                         />
                       ];
                     }
diff --git a/frontend/src/modules/Organizations/components/OrganizationTeams.js b/frontend/src/modules/Organizations/components/OrganizationTeams.js
index f4288c02f..2b7887ba8 100644
--- a/frontend/src/modules/Organizations/components/OrganizationTeams.js
+++ b/frontend/src/modules/Organizations/components/OrganizationTeams.js
@@ -26,6 +26,7 @@ import { HiUserRemove } from 'react-icons/hi';
 import { VscChecklist } from 'react-icons/vsc';
 import {
   Defaults,
+  DeleteObjectWithFrictionModal,
   Label,
   Pager,
   RefreshTableMenu,
@@ -49,6 +50,16 @@ function TeamRow({ team, organization, fetchItems }) {
   const theme = useTheme();
   const { enqueueSnackbar } = useSnackbar();
   const [isPermissionModalOpen, setIsPermissionsModalOpen] = useState(false);
+  const [isDeleteGroupModalOpen, setIsDeleteGroupModalOpenId] = useState(false);
+
+  const handleDeleteGroupModalClosed = () => {
+    setIsDeleteGroupModalOpenId(false);
+  };
+
+  const handleDeleteGroupModalOpen = () => {
+    setIsDeleteGroupModalOpenId(true);
+  };
+
   const handlePermissionsModalClose = () => {
     setIsPermissionsModalOpen(false);
   };
@@ -125,7 +136,7 @@ function TeamRow({ team, organization, fetchItems }) {
       <TableCell>
         <Box>
           {team.groupUri !== organization.SamlGroupName && (
-            <LoadingButton onClick={() => removeGroup(team.groupUri)}>
+            <LoadingButton onClick={() => handleDeleteGroupModalOpen()}>
               <HiUserRemove
                 size={25}
                 color={
@@ -136,6 +147,16 @@ function TeamRow({ team, organization, fetchItems }) {
               />
             </LoadingButton>
           )}
+          {team.groupUri !== organization.SamlGroupName && (
+            <DeleteObjectWithFrictionModal
+              objectName={team.groupUri}
+              onApply={() => handleDeleteGroupModalClosed()}
+              onClose={() => handleDeleteGroupModalClosed()}
+              open={isDeleteGroupModalOpen}
+              isAWSResource={false}
+              deleteFunction={() => removeGroup(team.groupUri)}
+            />
+          )}
         </Box>
       </TableCell>
     </TableRow>