feat: show errors in EditRole form

packages/web/src/locales/en.json

@@ -257,6 +257,7 @@
   "deleteRoleButton.successfullyDeleted": "The role has been deleted.",
   "deleteRoleButton.generalError": "Failed while deleting!",
   "editRolePage.title": "Edit role",
+  "editRolePage.permissionsError": "Permissions are invalid.",
   "createRolePage.title": "Create role",
   "roleForm.name": "Name",
   "roleForm.description": "Description",

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

@@ -5,6 +5,10 @@ import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { merge } from 'lodash';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
 
 import Container from 'components/Container';
 import Form from 'components/Form';
@@ -22,6 +26,40 @@ import useAdminUpdateRole from 'hooks/useAdminUpdateRole';
 import useRole from 'hooks/useRole.ee';
 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 EditRole() {
   const formatMessage = useFormatMessage();
   const navigate = useNavigate();
@@ -34,9 +72,11 @@ export default function EditRole() {
   const role = roleData?.data;
   const permissionCatalog = permissionCatalogData?.data;
   const enqueueSnackbar = useEnqueueSnackbar();
+  const [permissionError, setPermissionError] = React.useState(null);
 
   const handleRoleUpdate = async (roleData) => {
     try {
+      setPermissionError(null);
       const newPermissions = getPermissions(roleData.computedPermissions);
       await updateRole({
         name: roleData.name,
@@ -53,7 +93,13 @@ export default function EditRole() {
 
       navigate(URLS.ROLES);
     } catch (error) {
-      throw new Error('Failed while updating!');
+      const permissionError = getPermissionsErrorMessage(error);
+      if (permissionError) {
+        setPermissionError(permissionError);
+      }
+
+      const errors = error?.response?.data?.errors;
+      throw errors || error;
     }
   };
 
@@ -82,46 +128,72 @@ export default function EditRole() {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
-          <Form defaultValues={defaultValues} onSubmit={handleRoleUpdate}>
+          <Form
-            <Stack direction="column" gap={2}>
+            noValidate
-              <TextField
+            defaultValues={defaultValues}
-                disabled={
+            onSubmit={handleRoleUpdate}
-                  role?.isAdmin || isRoleLoading || isPermissionCatalogLoading
+            resolver={yupResolver(getValidationSchema(formatMessage))}
-                }
+            automaticValidation={false}
-                required={true}
+            render={({ formState: { errors } }) => (
-                name="name"
+              <Stack direction="column" gap={2}>
-                label={formatMessage('roleForm.name')}
+                <TextField
-                data-test="name-input"
+                  disabled={
-                fullWidth
+                    role?.isAdmin || isRoleLoading || isPermissionCatalogLoading
-              />
+                  }
-              <TextField
+                  required
-                disabled={
+                  name="name"
-                  role?.isAdmin || isRoleLoading || isPermissionCatalogLoading
+                  label={formatMessage('roleForm.name')}
-                }
+                  data-test="name-input"
-                name="description"
+                  fullWidth
-                label={formatMessage('roleForm.description')}
+                  error={!!errors?.name}
-                data-test="description-input"
+                  helperText={errors?.name?.message}
-                fullWidth
+                />
-              />
+                <TextField
-              <PermissionCatalogField
+                  disabled={
-                name="computedPermissions"
+                    role?.isAdmin || isRoleLoading || isPermissionCatalogLoading
-                disabled={role?.isAdmin}
+                  }
-                syncIsCreator
+                  name="description"
-                loading={isRoleLoading}
+                  label={formatMessage('roleForm.description')}
-              />
+                  data-test="description-input"
-              <LoadingButton
+                  fullWidth
-                type="submit"
+                  error={!!errors?.description}
-                variant="contained"
+                  helperText={errors?.description?.message}
-                color="primary"
+                />
-                sx={{ boxShadow: 2 }}
+                <PermissionCatalogField
-                loading={isUpdateRolePending}
+                  name="computedPermissions"
-                disabled={role?.isAdmin || isRoleLoading}
+                  disabled={role?.isAdmin}
-                data-test="update-button"
+                  syncIsCreator
-              >
+                  loading={isRoleLoading}
-                {formatMessage('editRole.submit')}
+                />
-              </LoadingButton>
+                {permissionError && (
-            </Stack>
+                  <Alert severity="error" data-test="edit-role-error-alert">
-          </Form>
+                    <AlertTitle>
+                      {formatMessage('editRolePage.permissionsError')}
+                    </AlertTitle>
+                    <pre>
+                      <code>{permissionError}</code>
+                    </pre>
+                  </Alert>
+                )}
+                {errors?.root?.general && !permissionError && (
+                  <Alert severity="error" data-test="edit-role-error-alert">
+                    {errors?.root?.general?.message}
+                  </Alert>
+                )}
+                <LoadingButton
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  sx={{ boxShadow: 2 }}
+                  loading={isUpdateRolePending}
+                  disabled={role?.isAdmin || isRoleLoading}
+                  data-test="update-button"
+                >
+                  {formatMessage('editRole.submit')}
+                </LoadingButton>
+              </Stack>
+            )}
+          />
         </Grid>
       </Grid>
     </Container>