Merge branch 'main' into AUT-1380

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

@@ -1,10 +1,14 @@
 import LoadingButton from '@mui/lab/LoadingButton';
 import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
 import PermissionCatalogField from 'components/PermissionCatalogField/index.ee';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
 
 import Container from 'components/Container';
 import Form from 'components/Form';
@@ -19,6 +23,40 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import useAdminCreateRole from 'hooks/useAdminCreateRole';
 import usePermissionCatalog from 'hooks/usePermissionCatalog.ee';
 
+const getValidationSchema = (formatMessage) => {
+  const getMandatoryFieldMessage = (fieldTranslationId) =>
+    formatMessage('roleForm.mandatoryInput', {
+      inputName: formatMessage(fieldTranslationId),
+    });
+
+  return yup.object().shape({
+    name: yup
+      .string()
+      .trim()
+      .required(getMandatoryFieldMessage('roleForm.name')),
+    description: yup.string().trim(),
+  });
+};
+
+const getPermissionsErrorMessage = (error) => {
+  const errors = error?.response?.data?.errors;
+
+  if (errors) {
+    const permissionsErrors = Object.keys(errors)
+      .filter((key) => key.startsWith('permissions'))
+      .reduce((obj, key) => {
+        obj[key] = errors[key];
+        return obj;
+      }, {});
+
+    if (Object.keys(permissionsErrors).length > 0) {
+      return JSON.stringify(permissionsErrors, null, 2);
+    }
+  }
+
+  return null;
+};
+
 export default function CreateRole() {
   const navigate = useNavigate();
   const formatMessage = useFormatMessage();
@@ -27,6 +65,7 @@ export default function CreateRole() {
     useAdminCreateRole();
   const { data: permissionCatalogData, isLoading: isPermissionCatalogLoading } =
     usePermissionCatalog();
+  const [permissionError, setPermissionError] = React.useState(null);
 
   const defaultValues = React.useMemo(
     () => ({
@@ -44,6 +83,7 @@ export default function CreateRole() {
 
   const handleRoleCreation = async (roleData) => {
     try {
+      setPermissionError(null);
       const permissions = getPermissions(roleData.computedPermissions);
 
       await createRole({
@@ -61,16 +101,13 @@ export default function CreateRole() {
 
       navigate(URLS.ROLES);
     } catch (error) {
-      const errors = Object.values(error.response.data.errors);
-
-      for (const [errorMessage] of errors) {
-        enqueueSnackbar(errorMessage, {
-          variant: 'error',
-          SnackbarProps: {
-            'data-test': 'snackbar-error',
-          },
-        });
+      const permissionError = getPermissionsErrorMessage(error);
+      if (permissionError) {
+        setPermissionError(permissionError);
       }
+
+      const errors = error?.response?.data?.errors;
+      throw errors || error;
     }
   };
 
@@ -84,39 +121,67 @@ export default function CreateRole() {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
-          <Form onSubmit={handleRoleCreation} defaultValues={defaultValues}>
-            <Stack direction="column" gap={2}>
-              <TextField
-                required={true}
-                name="name"
-                label={formatMessage('roleForm.name')}
-                fullWidth
-                data-test="name-input"
-                disabled={isPermissionCatalogLoading}
-              />
+          <Form
+            onSubmit={handleRoleCreation}
+            defaultValues={defaultValues}
+            noValidate
+            resolver={yupResolver(getValidationSchema(formatMessage))}
+            automaticValidation={false}
+            render={({ formState: { errors } }) => (
+              <Stack direction="column" gap={2}>
+                <TextField
+                  required={true}
+                  name="name"
+                  label={formatMessage('roleForm.name')}
+                  fullWidth
+                  data-test="name-input"
+                  error={!!errors?.name}
+                  helperText={errors?.name?.message}
+                  disabled={isPermissionCatalogLoading}
+                />
 
-              <TextField
-                name="description"
-                label={formatMessage('roleForm.description')}
-                fullWidth
-                data-test="description-input"
-                disabled={isPermissionCatalogLoading}
-              />
+                <TextField
+                  name="description"
+                  label={formatMessage('roleForm.description')}
+                  fullWidth
+                  data-test="description-input"
+                  error={!!errors?.description}
+                  helperText={errors?.description?.message}
+                  disabled={isPermissionCatalogLoading}
+                />
 
-              <PermissionCatalogField name="computedPermissions" />
+                <PermissionCatalogField name="computedPermissions" />
 
-              <LoadingButton
-                type="submit"
-                variant="contained"
-                color="primary"
-                sx={{ boxShadow: 2 }}
-                loading={isCreateRolePending}
-                data-test="create-button"
-              >
-                {formatMessage('createRole.submit')}
-              </LoadingButton>
-            </Stack>
-          </Form>
+                {permissionError && (
+                  <Alert severity="error" data-test="create-role-error-alert">
+                    <AlertTitle>
+                      {formatMessage('createRole.permissionsError')}
+                    </AlertTitle>
+                    <pre>
+                      <code>{permissionError}</code>
+                    </pre>
+                  </Alert>
+                )}
+
+                {errors?.root?.general && !permissionError && (
+                  <Alert severity="error" data-test="create-role-error-alert">
+                    {errors?.root?.general?.message}
+                  </Alert>
+                )}
+
+                <LoadingButton
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  sx={{ boxShadow: 2 }}
+                  loading={isCreateRolePending}
+                  data-test="create-button"
+                >
+                  {formatMessage('createRole.submit')}
+                </LoadingButton>
+              </Stack>
+            )}
+          />
         </Grid>
       </Grid>
     </Container>

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

@@ -3,9 +3,10 @@ import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
 import Alert from '@mui/material/Alert';
 import MuiTextField from '@mui/material/TextField';
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
 
 import Can from 'components/Can';
 import Container from 'components/Container';
@@ -16,50 +17,70 @@ import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useRoles from 'hooks/useRoles.ee';
 import useAdminCreateUser from 'hooks/useAdminCreateUser';
+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 CreateUser() {
   const formatMessage = useFormatMessage();
   const {
     mutateAsync: createUser,
     isPending: isCreateUserPending,
     data: createdUser,
+    isSuccess: createUserSuccess,
   } = useAdminCreateUser();
   const { data: rolesData, loading: isRolesLoading } = useRoles();
   const roles = rolesData?.data;
-  const enqueueSnackbar = useEnqueueSnackbar();
   const queryClient = useQueryClient();
+  const currentUserAbility = useCurrentUserAbility();
+  const canUpdateRole = currentUserAbility.can('update', 'Role');
 
   const handleUserCreation = async (userData) => {
     try {
       await createUser({
         fullName: userData.fullName,
         email: userData.email,
-        roleId: userData.role?.id,
+        roleId: userData.roleId,
       });
 
       queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
-
-      enqueueSnackbar(formatMessage('createUser.successfullyCreated'), {
-        variant: 'success',
-        persist: true,
-        SnackbarProps: {
-          'data-test': 'snackbar-create-user-success',
-        },
-      });
     } catch (error) {
-      enqueueSnackbar(formatMessage('createUser.error'), {
-        variant: 'error',
-        persist: true,
-        SnackbarProps: {
-          'data-test': 'snackbar-error',
-        },
-      });
-
-      throw new Error('Failed while creating!');
+      const errors = error?.response?.data?.errors;
+      throw errors || error;
     }
   };
 
@@ -73,74 +94,111 @@ export default function CreateUser() {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
-          <Form onSubmit={handleUserCreation}>
-            <Stack direction="column" gap={2}>
-              <TextField
-                required={true}
-                name="fullName"
-                label={formatMessage('userForm.fullName')}
-                data-test="full-name-input"
-                fullWidth
-              />
-
-              <TextField
-                required={true}
-                name="email"
-                label={formatMessage('userForm.email')}
-                data-test="email-input"
-                fullWidth
-              />
-
-              <Can I="update" a="Role">
-                <ControlledAutocomplete
-                  name="role.id"
+          <Form
+            noValidate
+            onSubmit={handleUserCreation}
+            mode="onSubmit"
+            defaultValues={defaultValues}
+            resolver={yupResolver(
+              getValidationSchema(formatMessage, canUpdateRole),
+            )}
+            automaticValidation={false}
+            render={({ formState: { errors } }) => (
+              <Stack direction="column" gap={2}>
+                <TextField
+                  required={true}
+                  name="fullName"
+                  label={formatMessage('userForm.fullName')}
+                  data-test="full-name-input"
                   fullWidth
-                  disablePortal
-                  disableClearable={true}
-                  options={generateRoleOptions(roles)}
-                  renderInput={(params) => (
-                    <MuiTextField
-                      {...params}
-                      required
-                      label={formatMessage('userForm.role')}
-                    />
-                  )}
-                  loading={isRolesLoading}
+                  error={!!errors?.fullName}
+                  helperText={errors?.fullName?.message}
                 />
-              </Can>
 
-              <LoadingButton
-                type="submit"
-                variant="contained"
-                color="primary"
-                sx={{ boxShadow: 2 }}
-                loading={isCreateUserPending}
-                data-test="create-button"
-              >
-                {formatMessage('createUser.submit')}
-              </LoadingButton>
+                <TextField
+                  required={true}
+                  name="email"
+                  label={formatMessage('userForm.email')}
+                  data-test="email-input"
+                  fullWidth
+                  error={!!errors?.email}
+                  helperText={errors?.email?.message}
+                />
 
-              {createdUser && (
-                <Alert
-                  severity="info"
+                <Can I="update" a="Role">
+                  <ControlledAutocomplete
+                    name="roleId"
+                    fullWidth
+                    disablePortal
+                    disableClearable={true}
+                    options={generateRoleOptions(roles)}
+                    renderInput={(params) => (
+                      <MuiTextField
+                        {...params}
+                        required
+                        label={formatMessage('userForm.role')}
+                        error={!!errors?.roleId}
+                        helperText={errors?.roleId?.message}
+                      />
+                    )}
+                    loading={isRolesLoading}
+                    showHelperText={false}
+                  />
+                </Can>
+
+                {errors?.root?.general && (
+                  <Alert data-test="create-user-error-alert" severity="error">
+                    {errors?.root?.general?.message}
+                  </Alert>
+                )}
+
+                {createUserSuccess && (
+                  <Alert
+                    severity="success"
+                    data-test="create-user-success-alert"
+                  >
+                    {formatMessage('createUser.successfullyCreated')}
+                  </Alert>
+                )}
+
+                {createdUser && (
+                  <Alert
+                    severity="info"
+                    color="primary"
+                    data-test="invitation-email-info-alert"
+                    sx={{
+                      a: {
+                        wordBreak: 'break-all',
+                      },
+                    }}
+                  >
+                    {formatMessage('createUser.invitationEmailInfo', {
+                      link: () => (
+                        <a
+                          href={createdUser.data.acceptInvitationUrl}
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          {createdUser.data.acceptInvitationUrl}
+                        </a>
+                      ),
+                    })}
+                  </Alert>
+                )}
+
+                <LoadingButton
+                  type="submit"
+                  variant="contained"
                   color="primary"
-                  data-test="invitation-email-info-alert"
+                  sx={{ boxShadow: 2 }}
+                  loading={isCreateUserPending}
+                  data-test="create-button"
                 >
-                  {formatMessage('createUser.invitationEmailInfo', {
-                    link: () => (
-                      <a
-                        href={createdUser.data.acceptInvitationUrl}
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        {createdUser.data.acceptInvitationUrl}
-                      </a>
-                    ),
-                  })}
-                </Alert>
-              )}
-            </Stack>
-          </Form>
+                  {formatMessage('createUser.submit')}
+                </LoadingButton>
+              </Stack>
+            )}
+          />
         </Grid>
       </Grid>
     </Container>