Merge pull request #2248 from automatisch/AUT-1380

feat: introduce inline error messages in EditUser form

packages/e2e-tests/fixtures/admin/edit-user-page.js

@@ -13,9 +13,10 @@ export class AdminEditUserPage extends AuthenticatedPage {
     super(page);
     this.fullNameInput = page.getByTestId('full-name-input');
     this.emailInput = page.getByTestId('email-input');
-    this.roleInput = page.getByTestId('role.id-autocomplete');
+    this.roleInput = page.getByTestId('roleId-autocomplete');
     this.updateButton = page.getByTestId('update-button');
     this.pageTitle = page.getByTestId('edit-user-title');
+    this.fieldError = page.locator('p[id$="-helper-text"]');
   }
 
   /**

packages/e2e-tests/tests/admin/manage-users.spec.js

@@ -216,9 +216,7 @@ test.describe('User management page', () => {
       const editPageUrl = page.url();
       await adminEditUserPage.updateButton.click();
 
-      const snackbar = await adminUsersPage.getSnackbarData('snackbar-error');
+      await expect(adminEditUserPage.fieldError).toHaveCount(1);
-      await expect(snackbar.variant).toBe('error');
-      await adminUsersPage.closeSnackbar();
       await expect(page.url()).toBe(editPageUrl);
     });
   });

packages/web/src/hooks/useAdminUpdateUser.js

@@ -1,12 +1,8 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import api from 'helpers/api';
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
-import useFormatMessage from 'hooks/useFormatMessage';
 
 export default function useAdminUpdateUser(userId) {
   const queryClient = useQueryClient();
-  const enqueueSnackbar = useEnqueueSnackbar();
-  const formatMessage = useFormatMessage();
 
   const query = useMutation({
     mutationFn: async (payload) => {
@@ -19,15 +15,6 @@ export default function useAdminUpdateUser(userId) {
         queryKey: ['admin', 'users'],
       });
     },
-    onError: () => {
-      enqueueSnackbar(formatMessage('editUser.error'), {
-        variant: 'error',
-        persist: true,
-        SnackbarProps: {
-          'data-test': 'snackbar-error',
-        },
-      });
-    },
   });
 
   return query;

packages/web/src/locales/en.json

@@ -239,7 +239,6 @@
   "editUser.status": "Status",
   "editUser.submit": "Update",
   "editUser.successfullyUpdated": "The user has been updated.",
-  "editUser.error": "Error while updating the user.",
   "userList.fullName": "Full name",
   "userList.email": "Email",
   "userList.role": "Role",

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

@@ -5,9 +5,12 @@ import Stack from '@mui/material/Stack';
 import Chip from '@mui/material/Chip';
 import Typography from '@mui/material/Typography';
 import MuiTextField from '@mui/material/TextField';
+import Alert from '@mui/material/Alert';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
 
 import Can from 'components/Can';
 import Container from 'components/Container';
@@ -20,11 +23,44 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import useRoles from 'hooks/useRoles.ee';
 import useAdminUpdateUser from 'hooks/useAdminUpdateUser';
 import useAdminUser from 'hooks/useAdminUser';
+import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
 
 function generateRoleOptions(roles) {
   return roles?.map(({ name: label, id: value }) => ({ label, value }));
 }
 
+const getValidationSchema = (formatMessage, canUpdateRole) => {
+  const getMandatoryFieldMessage = (fieldTranslationId) =>
+    formatMessage('userForm.mandatoryInput', {
+      inputName: formatMessage(fieldTranslationId),
+    });
+
+  return yup.object().shape({
+    fullName: yup
+      .string()
+      .trim()
+      .required(getMandatoryFieldMessage('userForm.fullName')),
+    email: yup
+      .string()
+      .trim()
+      .email(formatMessage('userForm.validateEmail'))
+      .required(getMandatoryFieldMessage('userForm.email')),
+    ...(canUpdateRole
+      ? {
+          roleId: yup
+            .string()
+            .required(getMandatoryFieldMessage('userForm.role')),
+        }
+      : {}),
+  });
+};
+
+const defaultValues = {
+  fullName: '',
+  email: '',
+  roleId: '',
+};
+
 export default function EditUser() {
   const formatMessage = useFormatMessage();
   const { userId } = useParams();
@@ -36,13 +72,15 @@ export default function EditUser() {
   const roles = data?.data;
   const enqueueSnackbar = useEnqueueSnackbar();
   const navigate = useNavigate();
+  const currentUserAbility = useCurrentUserAbility();
+  const canUpdateRole = currentUserAbility.can('update', 'Role');
 
   const handleUserUpdate = async (userDataToUpdate) => {
     try {
       await updateUser({
         fullName: userDataToUpdate.fullName,
         email: userDataToUpdate.email,
-        roleId: userDataToUpdate.role?.id,
+        roleId: userDataToUpdate.roleId,
       });
 
       enqueueSnackbar(formatMessage('editUser.successfullyUpdated'), {
@@ -55,7 +93,9 @@ export default function EditUser() {
 
       navigate(URLS.USERS);
     } catch (error) {
-      throw new Error('Failed while updating!');
+      const errors = error?.response?.data?.errors;
+
+      throw errors || error;
     }
   };
 
@@ -80,7 +120,22 @@ export default function EditUser() {
           )}
 
           {!isUserLoading && (
-            <Form defaultValues={user} onSubmit={handleUserUpdate}>
+            <Form
+              defaultValues={
+                user
+                  ? {
+                      fullName: user.fullName,
+                      email: user.email,
+                      roleId: user.role.id,
+                    }
+                  : defaultValues
+              }
+              onSubmit={handleUserUpdate}
+              resolver={yupResolver(
+                getValidationSchema(formatMessage, canUpdateRole),
+              )}
+              noValidate
+              render={({ formState: { errors } }) => (
                 <Stack direction="column" gap={2}>
                   <Stack direction="row" gap={2} mb={2} alignItems="center">
                     <Typography variant="h6" noWrap>
@@ -100,6 +155,8 @@ export default function EditUser() {
                     label={formatMessage('userForm.fullName')}
                     data-test="full-name-input"
                     fullWidth
+                    error={!!errors?.fullName}
+                    helperText={errors?.fullName?.message}
                   />
 
                   <TextField
@@ -108,11 +165,13 @@ export default function EditUser() {
                     label={formatMessage('userForm.email')}
                     data-test="email-input"
                     fullWidth
+                    error={!!errors?.email}
+                    helperText={errors?.email?.message}
                   />
 
                   <Can I="update" a="Role">
                     <ControlledAutocomplete
-                    name="role.id"
+                      name="roleId"
                       fullWidth
                       disablePortal
                       disableClearable={true}
@@ -121,12 +180,21 @@ export default function EditUser() {
                         <MuiTextField
                           {...params}
                           label={formatMessage('userForm.role')}
+                          error={!!errors?.roleId}
+                          helperText={errors?.roleId?.message}
                         />
                       )}
                       loading={isRolesLoading}
+                      showHelperText={false}
                     />
                   </Can>
 
+                  {errors?.root?.general && (
+                    <Alert data-test="update-user-error-alert" severity="error">
+                      {errors?.root?.general?.message}
+                    </Alert>
+                  )}
+
                   <LoadingButton
                     type="submit"
                     variant="contained"
@@ -138,7 +206,8 @@ export default function EditUser() {
                     {formatMessage('editUser.submit')}
                   </LoadingButton>
                 </Stack>
-            </Form>
+              )}
+            />
           )}
         </Grid>
       </Grid>