groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: introduce inline error messages for create user and create role forms

Browse Source
This commit is contained in:
kasia.oczkowska
2024-12-06 11:52:44 +00:00
parent 978ceaadb6
commit 7a8dc68592
6 changed files with 334 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/web/src/components/Container/index.jsx
View File

@@ -1,10 +1,19 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import MuiContainer from '@mui/material/Container';
export default function Container(props) {
return <MuiContainer {...props} />;
export default function Container({ maxWidth = 'lg', ...props }) {
return <MuiContainer maxWidth={maxWidth} {...props} />;
}
Container.defaultProps = {
maxWidth: 'lg',
Container.propTypes = {
maxWidth: PropTypes.oneOf([
'xs',
'sm',
'md',
'lg',
'xl',
false,
PropTypes.string,
]),
};

7
packages/web/src/components/Form/index.jsx
View File

@@ -46,7 +46,12 @@ function Form(props) {
return (
<FormProvider {...methods}>
<form onSubmit={methods.handleSubmit(onSubmit)} {...formProps}>
<form
onSubmit={methods.handleSubmit((data, event) =>
onSubmit?.(data, event, methods.setError),
)}
{...formProps}
>
{render ? render(methods) : children}
</form>
</FormProvider>

18
packages/web/src/helpers/errors.js Normal file
View File

@@ -0,0 +1,18 @@
// Helpers to extract errors received from the API
export const getGeneralErrorMessage = ({ error, fallbackMessage }) => {
if (!error) {
return;
}
const errors = error?.response?.data?.errors;
const generalError = errors?.general;
if (generalError && Array.isArray(generalError)) {
return generalError.join(' ');
}
if (!errors) {
return error?.message || fallbackMessage;
}
};

5
packages/web/src/locales/en.json
View File

@@ -225,6 +225,8 @@
"userForm.email": "Email",
"userForm.role": "Role",
"userForm.password": "Password",
"userForm.mandatoryInput": "{inputName} is required.",
"userForm.validateEmail": "Email must be valid.",
"createUser.submit": "Create",
"createUser.successfullyCreated": "The user has been created.",
"createUser.invitationEmailInfo": "Invitation email will be sent if SMTP credentials are valid. Otherwise, you can share the invitation link manually: <link></link>",
@@ -249,8 +251,11 @@
"createRolePage.title": "Create role",
"roleForm.name": "Name",
"roleForm.description": "Description",
"roleForm.mandatoryInput": "{inputName} is required.",
"createRole.submit": "Create",
"createRole.successfullyCreated": "The role has been created.",
"createRole.generalError": "Error while creating the role.",
"createRole.permissionsError": "Permissions are invalid.",
"editRole.submit": "Update",
"editRole.successfullyUpdated": "The role has been updated.",
"roleList.name": "Name",

113
packages/web/src/pages/CreateRole/index.ee.jsx
View File

@@ -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';
@@ -15,10 +19,45 @@ import {
getComputedPermissionsDefaultValues,
getPermissions,
} from 'helpers/computePermissions.ee';
import { getGeneralErrorMessage } from 'helpers/errors';
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();
@@ -41,7 +80,7 @@ export default function CreateRole() {
[permissionCatalogData],
);
const handleRoleCreation = async (roleData) => {
const handleRoleCreation = async (roleData, e, setError) => {
try {
const permissions = getPermissions(roleData.computedPermissions);
@@ -60,14 +99,38 @@ export default function CreateRole() {
navigate(URLS.ROLES);
} catch (error) {
const errors = Object.values(error.response.data.errors);
const errors = error?.response?.data?.errors;
for (const [errorMessage] of errors) {
enqueueSnackbar(errorMessage, {
variant: 'error',
SnackbarProps: {
'data-test': 'snackbar-error',
},
if (errors) {
const fieldNames = ['name', 'description'];
Object.entries(errors).forEach(([fieldName, fieldErrors]) => {
if (fieldNames.includes(fieldName) && Array.isArray(fieldErrors)) {
setError(fieldName, {
type: 'fieldRequestError',
message: fieldErrors.join(', '),
});
}
});
}
const permissionError = getPermissionsErrorMessage(error);
if (permissionError) {
setError('root.permissions', {
type: 'fieldRequestError',
message: permissionError,
});
}
const generalError = getGeneralErrorMessage({
error,
fallbackMessage: formatMessage('createRole.generalError'),
});
if (generalError) {
setError('root.general', {
type: 'requestError',
message: generalError,
});
}
}
@@ -83,7 +146,15 @@ export default function CreateRole() {
</Grid>
<Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
<Form onSubmit={handleRoleCreation} defaultValues={defaultValues}>
<Form
onSubmit={handleRoleCreation}
defaultValues={defaultValues}
noValidate
resolver={yupResolver(
getValidationSchema(formatMessage, defaultValues),
)}
automaticValidation={false}
render={({ formState: { errors } }) => (
<Stack direction="column" gap={2}>
<TextField
required={true}
@@ -91,6 +162,8 @@ export default function CreateRole() {
label={formatMessage('roleForm.name')}
fullWidth
data-test="name-input"
error={!!errors?.name}
helperText={errors?.name?.message}
/>
<TextField
@@ -98,10 +171,29 @@ export default function CreateRole() {
label={formatMessage('roleForm.description')}
fullWidth
data-test="description-input"
error={!!errors?.description}
helperText={errors?.description?.message}
/>
<PermissionCatalogField name="computedPermissions" />
{errors?.root?.permissions && (
<Alert severity="error" data-test="create-role-error-alert">
<AlertTitle>
{formatMessage('createRole.permissionsError')}
</AlertTitle>
<pre>
<code>{errors?.root?.permissions?.message}</code>
</pre>
</Alert>
)}
{errors?.root?.general && (
<Alert severity="error" data-test="create-role-error-alert">
{errors?.root?.general?.message}
</Alert>
)}
<LoadingButton
type="submit"
variant="contained"
@@ -113,7 +205,8 @@ export default function CreateRole() {
{formatMessage('createRole.submit')}
</LoadingButton>
</Stack>
</Form>
)}
/>
</Grid>
</Grid>
</Container>

144
packages/web/src/pages/CreateUser/index.jsx
View File

@@ -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,94 @@ 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';
import { getGeneralErrorMessage } from 'helpers/errors';
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) => {
const handleUserCreation = async (userData, e, setError) => {
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',
},
const errors = error?.response?.data?.errors;
if (errors) {
const fieldNames = Object.keys(defaultValues);
Object.entries(errors).forEach(([fieldName, fieldErrors]) => {
if (fieldNames.includes(fieldName) && Array.isArray(fieldErrors)) {
setError(fieldName, {
type: 'fieldRequestError',
message: fieldErrors.join(', '),
});
}
});
}
const generalError = getGeneralErrorMessage({
error,
fallbackMessage: formatMessage('createUser.error'),
});
throw new Error('Failed while creating!');
if (generalError) {
setError('root.general', {
type: 'requestError',
message: generalError,
});
}
}
};
@@ -73,7 +118,16 @@ export default function CreateUser() {
</Grid>
<Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
<Form onSubmit={handleUserCreation}>
<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}
@@ -81,6 +135,8 @@ export default function CreateUser() {
label={formatMessage('userForm.fullName')}
data-test="full-name-input"
fullWidth
error={!!errors?.fullName}
helperText={errors?.fullName?.message}
/>
<TextField
@@ -89,11 +145,13 @@ export default function CreateUser() {
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}
@@ -103,28 +161,40 @@ export default function CreateUser() {
{...params}
required
label={formatMessage('userForm.role')}
error={!!errors?.roleId}
helperText={errors?.roleId?.message}
/>
)}
loading={isRolesLoading}
showHelperText={false}
/>
</Can>
<LoadingButton
type="submit"
variant="contained"
color="primary"
sx={{ boxShadow: 2 }}
loading={isCreateUserPending}
data-test="create-button"
{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.submit')}
</LoadingButton>
{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: () => (
@@ -139,8 +209,20 @@ export default function CreateUser() {
})}
</Alert>
)}
<LoadingButton
type="submit"
variant="contained"
color="primary"
sx={{ boxShadow: 2 }}
loading={isCreateUserPending}
data-test="create-button"
>
{formatMessage('createUser.submit')}
</LoadingButton>
</Stack>
</Form>
)}
/>
</Grid>
</Grid>
</Container>