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

packages/backend/src/graphql/mutations/update-user.ee.ts

@@ -32,10 +32,9 @@ const updateUser = async (
     // void
   }
 
-  const user = await User.query()
+  const user = await User.query().patchAndFetchById(
-    .patchAndFetchById(
     params.input.id,
-      userPayload,
+    userPayload
   );
 
   return user;

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 () => {
+    try {
       await deleteRole();
 
       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 () => {
+    try {
       await deleteUser();
 
       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
+                <Typography variant="subtitle2">{role.name}</Typography>
-                  variant="subtitle2"
-                >
-                  {role.name}
-                </Typography>
               </TableCell>
 
               <TableCell scope="row">
-                <Typography
+                <Typography variant="subtitle2">{role.description}</Typography>
-                  variant="subtitle2"
-                >
-                  {role.description}
-                </Typography>
               </TableCell>
 
               <TableCell>
@@ -81,10 +72,7 @@ export default function RoleList(): React.ReactElement {
                     <EditIcon />
                   </IconButton>
 
-                  <DeleteRoleButton
+                  <DeleteRoleButton disabled={role.isAdmin} roleId={role.id} />
-                    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
+                <Typography variant="subtitle2">{user.fullName}</Typography>
-                  variant="subtitle2"
-                >
-                  {user.fullName}
-                </Typography>
               </TableCell>
 
               <TableCell>
-                <Typography
+                <Typography variant="subtitle2">{user.email}</Typography>
-                  variant="subtitle2"
-                >
-                  {user.email}
-                </Typography>
               </TableCell>
 
               <TableCell>

packages/web/src/locales/en.json

@@ -177,6 +177,7 @@
   "deleteUserButton.description": "This will permanently delete the user and all the associated data with it.",
   "deleteUserButton.cancel": "Cancel",
   "deleteUserButton.confirm": "Delete",
+  "deleteUserButton.successfullyDeleted": "The user has been deleted.",
   "editUserPage.title": "Edit user",
   "createUserPage.title": "Create user",
   "userForm.fullName": "Full name",
@@ -184,7 +185,9 @@
   "userForm.role": "Role",
   "userForm.password": "Password",
   "createUser.submit": "Create",
+  "createUser.successfullyCreated": "The user has been created.",
   "editUser.submit": "Update",
+  "editUser.successfullyUpdated": "The user has been updated.",
   "userList.fullName": "Full name",
   "userList.email": "Email",
   "rolesPage.title": "Role management",
@@ -193,12 +196,15 @@
   "deleteRoleButton.description": "This will permanently delete the role.",
   "deleteRoleButton.cancel": "Cancel",
   "deleteRoleButton.confirm": "Delete",
+  "deleteRoleButton.successfullyDeleted": "The role has been deleted.",
   "editRolePage.title": "Edit role",
   "createRolePage.title": "Create role",
   "roleForm.name": "Name",
   "roleForm.description": "Description",
   "createRole.submit": "Create",
+  "createRole.successfullyCreated": "The role has been created.",
   "editRole.submit": "Update",
+  "editRole.successfullyUpdated": "The role has been updated.",
   "roleList.name": "Name",
   "roleList.description": "Description",
   "permissionSettings.cancel": "Cancel",

packages/web/src/pages/CreateRole/index.ee.tsx

@@ -6,6 +6,7 @@ import Stack from '@mui/material/Stack';
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
 import PermissionCatalogField from 'components/PermissionCatalogField/index.ee';
+import { useSnackbar } from 'notistack';
 
 import Form from 'components/Form';
 import PageTitle from 'components/PageTitle';
@@ -22,8 +23,12 @@ export default function CreateRole(): React.ReactElement {
   const navigate = useNavigate();
   const formatMessage = useFormatMessage();
   const [createRole, { loading }] = useMutation(CREATE_ROLE);
+  const { enqueueSnackbar } = useSnackbar();
 
-  const handleRoleCreation = async (roleData: Partial<RoleWithComputedPermissions>) => {
+  const handleRoleCreation = async (
+    roleData: Partial<RoleWithComputedPermissions>
+  ) => {
+    try {
       const permissions = getPermissions(roleData.computedPermissions);
 
       await createRole({
@@ -32,11 +37,18 @@ export default function CreateRole(): React.ReactElement {
             name: roleData.name,
             description: roleData.description,
             permissions,
-        }
+          },
-      }
+        },
+      });
+
+      enqueueSnackbar(formatMessage('createRole.successfullyCreated'), {
+        variant: 'success',
       });
 
       navigate(URLS.ROLES);
+    } catch (error) {
+      throw new Error('Failed while creating!');
+    }
   };
 
   return (
@@ -62,7 +74,7 @@ export default function CreateRole(): React.ReactElement {
                 fullWidth
               />
 
-              <PermissionCatalogField name='computedPermissions' />
+              <PermissionCatalogField name="computedPermissions" />
 
               <LoadingButton
                 type="submit"

packages/web/src/pages/CreateUser/index.tsx

@@ -7,6 +7,7 @@ import Stack from '@mui/material/Stack';
 import MuiTextField from '@mui/material/TextField';
 import LoadingButton from '@mui/lab/LoadingButton';
 import { IUser, IRole } from '@automatisch/types';
+import { useSnackbar } from 'notistack';
 
 import { CREATE_USER } from 'graphql/mutations/create-user.ee';
 import * as URLS from 'config/urls';
@@ -27,8 +28,10 @@ export default function CreateUser(): React.ReactElement {
   const formatMessage = useFormatMessage();
   const [createUser, { loading }] = useMutation(CREATE_USER);
   const { roles, loading: rolesLoading } = useRoles();
+  const { enqueueSnackbar } = useSnackbar();
 
   const handleUserCreation = async (userData: Partial<IUser>) => {
+    try {
       await createUser({
         variables: {
           input: {
@@ -36,13 +39,20 @@ export default function CreateUser(): React.ReactElement {
             password: userData.password,
             email: userData.email,
             role: {
-            id: userData.role?.id
+              id: userData.role?.id,
-          }
+            },
-        }
+          },
-      }
+        },
+      });
+
+      enqueueSnackbar(formatMessage('createUser.successfullyCreated'), {
+        variant: 'success',
       });
 
       navigate(URLS.USERS);
+    } catch (error) {
+      throw new Error('Failed while creating!');
+    }
   };
 
   return (
@@ -77,14 +87,19 @@ export default function CreateUser(): React.ReactElement {
                 fullWidth
               />
 
-              <Can I='update' a='Role'>
+              <Can I="update" a="Role">
                 <ControlledAutocomplete
                   name="role.id"
                   fullWidth
                   disablePortal
                   disableClearable={true}
                   options={generateRoleOptions(roles)}
-                  renderInput={(params) => <MuiTextField {...params} label={formatMessage('userForm.role')} />}
+                  renderInput={(params) => (
+                    <MuiTextField
+                      {...params}
+                      label={formatMessage('userForm.role')}
+                    />
+                  )}
                   loading={rolesLoading}
                 />
               </Can>

packages/web/src/pages/EditRole/index.ee.tsx

@@ -5,6 +5,7 @@ import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
 import * as React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { useSnackbar } from 'notistack';
 
 import Form from 'components/Form';
 import PageTitle from 'components/PageTitle';
@@ -22,9 +23,8 @@ import useRole from 'hooks/useRole.ee';
 
 type EditRoleParams = {
   roleId: string;
-}
+};
 
-// TODO: introduce interaction feedback upon deletion (successful + failure)
 // TODO: introduce loading bar
 export default function EditRole(): React.ReactElement {
   const formatMessage = useFormatMessage();
@@ -32,8 +32,12 @@ export default function EditRole(): React.ReactElement {
   const navigate = useNavigate();
   const { roleId } = useParams<EditRoleParams>();
   const { role, loading: roleLoading } = useRole(roleId);
+  const { enqueueSnackbar } = useSnackbar();
 
-  const handleRoleUpdate = async (roleData: Partial<RoleWithComputedPermissions>) => {
+  const handleRoleUpdate = async (
+    roleData: Partial<RoleWithComputedPermissions>
+  ) => {
+    try {
       const newPermissions = getPermissions(roleData.computedPermissions);
 
       await updateRole({
@@ -43,11 +47,18 @@ export default function EditRole(): React.ReactElement {
             name: roleData.name,
             description: roleData.description,
             permissions: newPermissions,
-        }
+          },
         },
       });
 
+      enqueueSnackbar(formatMessage('editRole.successfullyUpdated'), {
+        variant: 'success',
+      });
+
       navigate(URLS.ROLES);
+    } catch (error) {
+      throw new Error('Failed while updating!');
+    }
   };
 
   if (roleLoading || !role) return <React.Fragment />;
@@ -82,7 +93,10 @@ export default function EditRole(): React.ReactElement {
                 fullWidth
               />
 
-              <PermissionCatalogField name='computedPermissions' disabled={role.isAdmin} />
+              <PermissionCatalogField
+                name="computedPermissions"
+                disabled={role.isAdmin}
+              />
 
               <LoadingButton
                 type="submit"

packages/web/src/pages/EditUser/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { useMutation } from '@apollo/client';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
@@ -7,9 +7,11 @@ import Stack from '@mui/material/Stack';
 import MuiTextField from '@mui/material/TextField';
 import LoadingButton from '@mui/lab/LoadingButton';
 import { IUser, IRole } from '@automatisch/types';
+import { useSnackbar } from 'notistack';
 
 import { UPDATE_USER } from 'graphql/mutations/update-user.ee';
 import Can from 'components/Can';
+import * as URLS from 'config/urls';
 import useUser from 'hooks/useUser';
 import useRoles from 'hooks/useRoles.ee';
 import PageTitle from 'components/PageTitle';
@@ -20,13 +22,12 @@ import useFormatMessage from 'hooks/useFormatMessage';
 
 type EditUserParams = {
   userId: string;
-}
+};
 
 function generateRoleOptions(roles: IRole[]) {
   return roles?.map(({ name: label, id: value }) => ({ label, value }));
 }
 
-// TODO: introduce interaction feedback upon deletion (successful + failure)
 // TODO: introduce loading bar
 export default function EditUser(): React.ReactElement {
   const formatMessage = useFormatMessage();
@@ -34,20 +35,32 @@ export default function EditUser(): React.ReactElement {
   const { userId } = useParams<EditUserParams>();
   const { user, loading: userLoading } = useUser(userId);
   const { roles, loading: rolesLoading } = useRoles();
+  const { enqueueSnackbar } = useSnackbar();
+  const navigate = useNavigate();
 
-  const handleUserUpdate = (userDataToUpdate: Partial<IUser>) => {
+  const handleUserUpdate = async (userDataToUpdate: Partial<IUser>) => {
-    updateUser({
+    try {
+      await updateUser({
         variables: {
           input: {
             id: userId,
             fullName: userDataToUpdate.fullName,
             email: userDataToUpdate.email,
             role: {
-            id: userDataToUpdate.role?.id
+              id: userDataToUpdate.role?.id,
-          }
+            },
-        }
+          },
-      }
+        },
       });
+
+      enqueueSnackbar(formatMessage('editUser.successfullyUpdated'), {
+        variant: 'success',
+      });
+
+      navigate(URLS.USERS);
+    } catch (error) {
+      throw new Error('Failed while updating!');
+    }
   };
 
   if (userLoading) return <React.Fragment />;
@@ -76,14 +89,19 @@ export default function EditUser(): React.ReactElement {
                 fullWidth
               />
 
-              <Can I='update' a='Role'>
+              <Can I="update" a="Role">
                 <ControlledAutocomplete
                   name="role.id"
                   fullWidth
                   disablePortal
                   disableClearable={true}
                   options={generateRoleOptions(roles)}
-                  renderInput={(params) => <MuiTextField {...params} label={formatMessage('userForm.role')} />}
+                  renderInput={(params) => (
+                    <MuiTextField
+                      {...params}
+                      label={formatMessage('userForm.role')}
+                    />
+                  )}
                   loading={rolesLoading}
                 />
               </Can>