Add confirmation pop-ups for deletion of team roles and groups (#1231)

### Feature or Bugfix

- Feature



### Detail
Pop ups added for:
- deletion team from environment
- deletion of the consumption role
- deletion of group from Organization

### Relates
- #942 

### Security
Please answer the questions below briefly where applicable, or write
`N/A`. Based on
[OWASP 10](https://owasp.org/Top10/en/).

- Does this PR introduce or modify any input fields or queries - this
includes
fetching data from storage outside the application (e.g. a database, an
S3 bucket)?
  - Is the input sanitized?
- What precautions are you taking before deserializing the data you
consume?
  - Is injection prevented by parametrizing queries?
  - Have you ensured no `eval` or similar functions are used?
- Does this PR introduce any functionality or component that requires
authorization?
- How have you ensured it respects the existing AuthN/AuthZ mechanisms?
  - Are you logging failed auth attempts?
- Are you using or adding any cryptographic features?
  - Do you use a standard proven implementations?
  - Are the used keys controlled by the customer? Where are they stored?
- Are you introducing any new policies/roles/users?
  - Have you used the least-privilege principle? How?


By submitting this pull request, I confirm that my contribution is made
under the terms of the Apache 2.0 license.

Co-authored-by: Sofia Sazonova <sazonova@amazon.co.uk>

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 }}>

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)}
                         />
                       ];
                     }

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>