refactor: use form's centralized error management

packages/web/src/helpers/errors.js

@@ -1,18 +0,0 @@
-// 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;
-  }
-};

packages/web/src/locales/en.json

@@ -231,7 +231,6 @@
   "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>",
-  "createUser.error": "Error while creating the user.",
   "editUserPage.title": "Edit user",
   "editUser.status": "Status",
   "editUser.submit": "Update",
@@ -255,7 +254,6 @@
   "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.",

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

@@ -19,7 +19,6 @@ 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';
@@ -66,6 +65,7 @@ export default function CreateRole() {
     useAdminCreateRole();
   const { data: permissionCatalogData, isLoading: isPermissionCatalogLoading } =
     usePermissionCatalog();
+  const [permissionError, setPermissionError] = React.useState(null);
 
   const defaultValues = React.useMemo(
     () => ({
@@ -81,8 +81,9 @@ export default function CreateRole() {
     [permissionCatalogData],
   );
 
-  const handleRoleCreation = async (roleData, e, setError) => {
+  const handleRoleCreation = async (roleData) => {
     try {
+      setPermissionError(null);
       const permissions = getPermissions(roleData.computedPermissions);
 
       await createRole({
@@ -100,40 +101,13 @@ export default function CreateRole() {
 
       navigate(URLS.ROLES);
     } catch (error) {
-      const errors = error?.response?.data?.errors;
-
-      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', {
+        setPermissionError(permissionError);
-          type: 'fieldRequestError',
-          message: permissionError,
-        });
       }
 
-      const generalError = getGeneralErrorMessage({
+      const errors = error?.response?.data?.errors;
-        error,
+      throw errors || error;
-        fallbackMessage: formatMessage('createRole.generalError'),
-      });
-
-      if (generalError) {
-        setError('root.general', {
-          type: 'requestError',
-          message: generalError,
-        });
-      }
     }
   };
 
@@ -178,18 +152,18 @@ export default function CreateRole() {
 
                 <PermissionCatalogField name="computedPermissions" />
 
-                {errors?.root?.permissions && (
+                {permissionError && (
                   <Alert severity="error" data-test="create-role-error-alert">
                     <AlertTitle>
                       {formatMessage('createRole.permissionsError')}
                     </AlertTitle>
                     <pre>
-                      <code>{errors?.root?.permissions?.message}</code>
+                      <code>{permissionError}</code>
                     </pre>
                   </Alert>
                 )}
 
-                {errors?.root?.general && (
+                {errors?.root?.general && !permissionError && (
                   <Alert severity="error" data-test="create-role-error-alert">
                     {errors?.root?.general?.message}
                   </Alert>

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

@@ -18,7 +18,6 @@ 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 }));
@@ -70,7 +69,7 @@ export default function CreateUser() {
   const currentUserAbility = useCurrentUserAbility();
   const canUpdateRole = currentUserAbility.can('update', 'Role');
 
-  const handleUserCreation = async (userData, e, setError) => {
+  const handleUserCreation = async (userData) => {
     try {
       await createUser({
         fullName: userData.fullName,
@@ -81,30 +80,7 @@ export default function CreateUser() {
       queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
     } catch (error) {
       const errors = error?.response?.data?.errors;
-
+      throw errors || error;
-      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'),
-      });
-
-      if (generalError) {
-        setError('root.general', {
-          type: 'requestError',
-          message: generalError,
-        });
-      }
     }
   };