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

@@ -283,7 +283,6 @@
   "authenticationForm.successfullySaved": "The provider has been saved.",
   "authenticationForm.save": "Save",
   "authenticationForm.mandatoryInput": "{inputName} is required.",
-  "authenticationForm.error": "Failed while saving!",
   "roleMappingsForm.title": "Role mappings",
   "roleMappingsForm.remoteRoleName": "Remote role name",
   "roleMappingsForm.role": "Role",
@@ -291,7 +290,6 @@
   "roleMappingsForm.save": "Save",
   "roleMappingsForm.notFound": "No role mappings have been found.",
   "roleMappingsForm.successfullySaved": "Role mappings have been saved.",
-  "roleMappingsForm.error": "Failed while saving!",
   "adminApps.title": "Apps",
   "adminApps.connections": "Connections",
   "adminApps.oauthClients": "OAuth clients",

packages/web/src/pages/Authentication/RoleMappings.jsx

@@ -4,7 +4,7 @@ import Divider from '@mui/material/Divider';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import Alert from '@mui/material/Alert';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
 
@@ -13,7 +13,6 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import useAdminSamlAuthProviderRoleMappings from 'hooks/useAdminSamlAuthProviderRoleMappings';
 import useAdminUpdateSamlAuthProviderRoleMappings from 'hooks/useAdminUpdateSamlAuthProviderRoleMappings';
 import RoleMappingsFieldArray from './RoleMappingsFieldsArray';
-import { getGeneralErrorMessage } from 'helpers/errors';
 
 function generateFormRoleMappings(roleMappings) {
   if (roleMappings?.length === 0) {
@@ -77,9 +76,11 @@ function RoleMappings({ provider, providerLoading }) {
     });
   const roleMappings = data?.data;
   const fieldNames = ['remoteRoleName', 'roleId'];
+  const [fieldErrors, setFieldErrors] = useState(null);
 
-  const handleRoleMappingsUpdate = async (values, e, setError) => {
+  const handleRoleMappingsUpdate = async (values) => {
     try {
+      setFieldErrors(null);
       if (provider?.id) {
         await updateRoleMappings(
           values.roleMappings.map(({ roleId, remoteRoleName }) => ({
@@ -93,25 +94,14 @@ function RoleMappings({ provider, providerLoading }) {
       if (errors) {
         Object.entries(errors).forEach(([fieldName, fieldErrors]) => {
           if (fieldNames.includes(fieldName) && Array.isArray(fieldErrors)) {
-            setError(`root.${fieldName}`, {
-              type: 'fieldRequestError',
-              message: `${fieldName}: ${fieldErrors.join(', ')}`,
-            });
+            setFieldErrors((prevErrors) => [
+              ...(prevErrors || []),
+              `${fieldName}: ${fieldErrors.join(', ')}`,
+            ]);
           }
         });
       }
-
-      const generalError = getGeneralErrorMessage({
-        error,
-        fallbackMessage: formatMessage('roleMappingsForm.error'),
-      });
-
-      if (generalError) {
-        setError('root.general', {
-          type: 'requestError',
-          message: generalError,
-        });
-      }
+      throw errors || error;
     }
   };
 
@@ -123,14 +113,22 @@ function RoleMappings({ provider, providerLoading }) {
   );
 
   const renderErrors = (errors) => {
-    const rootErrors = errors?.root;
-    if (rootErrors) {
-      return Object.values(rootErrors).map((error, index) => (
+    const generalError = errors?.root?.general?.message;
+    if (fieldErrors) {
+      return fieldErrors.map((error, index) => (
         <Alert key={index} data-test="error-alert" severity="error">
-          {error.message}
+          {error}
         </Alert>
       ));
     }
+
+    if (generalError) {
+      return (
+        <Alert data-test="error-alert" severity="error">
+          {generalError}
+        </Alert>
+      );
+    }
   };
 
   if (

packages/web/src/pages/Authentication/SamlConfiguration.jsx

@@ -15,7 +15,6 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import useAdminCreateSamlAuthProvider from 'hooks/useAdminCreateSamlAuthProvider';
 import useAdminUpdateSamlAuthProvider from 'hooks/useAdminUpdateSamlAuthProvider';
 import useRoles from 'hooks/useRoles.ee';
-import { getGeneralErrorMessage } from 'helpers/errors';
 
 const defaultValues = {
   active: false,
@@ -119,7 +118,7 @@ function SamlConfiguration({ provider, providerLoading }) {
   const isSuccess =
     isCreateSamlAuthProviderSuccess || isUpdateSamlAuthProviderSuccess;
 
-  const handleSubmit = async (providerData, e, setError) => {
+  const handleSubmit = async (providerData) => {
     try {
       if (provider?.id) {
         await updateSamlAuthProvider(providerData);
@@ -128,29 +127,7 @@ function SamlConfiguration({ provider, providerLoading }) {
       }
     } catch (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('authenticationForm.error'),
-      });
-
-      if (generalError) {
-        setError('root.general', {
-          type: 'requestError',
-          message: generalError,
-        });
-      }
+      throw errors || error;
     }
   };