feat(auth): add feedback state for user and role management (#1191)

packages/web/src/components/DeleteRoleButton/index.ee.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useMutation } from '@apollo/client';
 import IconButton from '@mui/material/IconButton';
 import DeleteIcon from '@mui/icons-material/Delete';
+import { useSnackbar } from 'notistack';
 
 import Can from 'components/Can';
 import ConfirmationDialog from 'components/ConfirmationDialog';
@@ -11,7 +12,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
 type DeleteRoleButtonProps = {
   disabled?: boolean;
   roleId: string;
-}
+};
 
 export default function DeleteRoleButton(props: DeleteRoleButtonProps) {
   const { disabled, roleId } = props;
@@ -21,17 +22,25 @@ export default function DeleteRoleButton(props: DeleteRoleButtonProps) {
     refetchQueries: ['GetRoles'],
   });
   const formatMessage = useFormatMessage();
+  const { enqueueSnackbar } = useSnackbar();
 
   const handleConfirm = React.useCallback(async () => {
-    await deleteRole();
+    try {
+      await deleteRole();
 
-    setShowConfirmation(false);
+      setShowConfirmation(false);
+      enqueueSnackbar(formatMessage('deleteRoleButton.successfullyDeleted'), {
+        variant: 'success',
+      });
+    } catch (error) {
+      throw new Error('Failed while deleting!');
+    }
   }, [deleteRole]);
 
   return (
     <>
       <Can I="delete" a="Role" passThrough>
-        {allowed => (
+        {(allowed) => (
           <IconButton
             disabled={!allowed || disabled}
             onClick={() => setShowConfirmation(true)}

packages/web/src/components/DeleteUserButton/index.ee.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useMutation } from '@apollo/client';
 import IconButton from '@mui/material/IconButton';
 import DeleteIcon from '@mui/icons-material/Delete';
+import { useSnackbar } from 'notistack';
 
 import ConfirmationDialog from 'components/ConfirmationDialog';
 import { DELETE_USER } from 'graphql/mutations/delete-user.ee';
@@ -9,7 +10,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
 
 type DeleteUserButtonProps = {
   userId: string;
-}
+};
 
 export default function DeleteUserButton(props: DeleteUserButtonProps) {
   const { userId } = props;
@@ -19,11 +20,19 @@ export default function DeleteUserButton(props: DeleteUserButtonProps) {
     refetchQueries: ['GetUsers'],
   });
   const formatMessage = useFormatMessage();
+  const { enqueueSnackbar } = useSnackbar();
 
   const handleConfirm = React.useCallback(async () => {
-    await deleteUser();
+    try {
+      await deleteUser();
 
-    setShowConfirmation(false);
+      setShowConfirmation(false);
+      enqueueSnackbar(formatMessage('deleteUserButton.successfullyDeleted'), {
+        variant: 'success',
+      });
+    } catch (error) {
+      throw new Error('Failed while deleting!');
+    }
   }, [deleteUser]);
 
   return (

packages/web/src/components/RoleList/index.ee.tsx

@@ -17,7 +17,6 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import useRoles from 'hooks/useRoles.ee';
 import * as URLS from 'config/urls';
 
-// TODO: introduce interaction feedback upon deletion (successful + failure)
 // TODO: introduce loading bar
 export default function RoleList(): React.ReactElement {
   const formatMessage = useFormatMessage();
@@ -56,19 +55,11 @@ export default function RoleList(): React.ReactElement {
               sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
             >
               <TableCell scope="row">
-                <Typography
-                  variant="subtitle2"
-                >
-                  {role.name}
-                </Typography>
+                <Typography variant="subtitle2">{role.name}</Typography>
               </TableCell>
 
               <TableCell scope="row">
-                <Typography
-                  variant="subtitle2"
-                >
-                  {role.description}
-                </Typography>
+                <Typography variant="subtitle2">{role.description}</Typography>
               </TableCell>
 
               <TableCell>
@@ -81,10 +72,7 @@ export default function RoleList(): React.ReactElement {
                     <EditIcon />
                   </IconButton>
 
-                  <DeleteRoleButton
-                    disabled={role.isAdmin}
-                    roleId={role.id}
-                  />
+                  <DeleteRoleButton disabled={role.isAdmin} roleId={role.id} />
                 </Stack>
               </TableCell>
             </TableRow>

packages/web/src/components/UserList/index.tsx

@@ -17,7 +17,6 @@ import useUsers from 'hooks/useUsers';
 import useFormatMessage from 'hooks/useFormatMessage';
 import * as URLS from 'config/urls';
 
-// TODO: introduce interaction feedback upon deletion (successful + failure)
 // TODO: introduce loading bar
 export default function UserList(): React.ReactElement {
   const formatMessage = useFormatMessage();
@@ -56,19 +55,11 @@ export default function UserList(): React.ReactElement {
               sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
             >
               <TableCell scope="row">
-                <Typography
-                  variant="subtitle2"
-                >
-                  {user.fullName}
-                </Typography>
+                <Typography variant="subtitle2">{user.fullName}</Typography>
               </TableCell>
 
               <TableCell>
-                <Typography
-                  variant="subtitle2"
-                >
-                  {user.email}
-                </Typography>
+                <Typography variant="subtitle2">{user.email}</Typography>
               </TableCell>
 
               <TableCell>