Define server error messages to display in FE from the server (#12973)

Currently, when a server query or mutation from the front-end fails, the
error message defined server-side is displayed in a snackbar in the
front-end.
These error messages usually contain technical details that don't belong
to the user interface, such as "ObjectMetadataCollection not found" or
"invalid ENUM value for ...".

**BE**
In addition to the original error message that is still needed (for the
request response, debugging, sentry monitoring etc.), we add a
`displayedErrorMessage` that will be used in the snackbars. It's only
relevant to add it for the messages that will reach the FE (ie. not in
jobs or in rest api for instance) and if it can help the user sort out /
fix things (ie. we do add displayedErrorMessage for "Cannot create
multiple draft versions for the same workflow" or "Cannot delete
[field], please update the label identifier field first", but not
"Object metadata does not exist"), even if in practice in the FE users
should not be able to perform an action that will not work (ie should
not be able to save creation of multiple draft versions of the same
workflows).

**FE**
To ease the usage we replaced enqueueSnackBar with enqueueErrorSnackBar
and enqueueSuccessSnackBar with an api that only requires to pass on the
error.
If no displayedErrorMessage is specified then the default error message
is `An error occured.`

packages/twenty-front/src/hooks/useCopyToClipboard.tsx

@@ -1,4 +1,3 @@
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
@@ -6,23 +5,27 @@ import { IconCopy, IconExclamationCircle } from 'twenty-ui/display';
 
 export const useCopyToClipboard = () => {
   const theme = useTheme();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
   const { t } = useLingui();
 
   const copyToClipboard = async (valueAsString: string) => {
     try {
       await navigator.clipboard.writeText(valueAsString);
 
-      enqueueSnackBar(t`Copied to clipboard`, {
+      enqueueSuccessSnackBar({
-        variant: SnackBarVariant.Success,
+        message: t`Copied to clipboard`,
-        icon: <IconCopy size={theme.icon.size.md} />,
+        options: {
-        duration: 2000,
+          icon: <IconCopy size={theme.icon.size.md} />,
+          duration: 2000,
+        },
       });
     } catch {
-      enqueueSnackBar(t`Couldn't copy to clipboard`, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`Couldn't copy to clipboard`,
-        icon: <IconExclamationCircle size={16} color="red" />,
+        options: {
-        duration: 2000,
+          icon: <IconExclamationCircle size={16} color="red" />,
+          duration: 2000,
+        },
       });
     }
   };

packages/twenty-front/src/modules/activities/hooks/useCustomResolver.ts

@@ -1,14 +1,13 @@
-import { useState } from 'react';
 import {
   DocumentNode,
   OperationVariables,
   TypedDocumentNode,
   useQuery,
 } from '@apollo/client';
+import { useState } from 'react';
 
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 
 type CustomResolverQueryResult<
@@ -37,7 +36,7 @@ export const useCustomResolver = <
   isFetchingMore: boolean;
   fetchMoreRecords: () => Promise<void>;
 } => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const [page, setPage] = useState({
     pageNumber: 1,
@@ -62,8 +61,8 @@ export const useCustomResolver = <
   } = useQuery<CustomResolverQueryResult<T>>(query, {
     variables: queryVariables,
     onError: (error) => {
-      enqueueSnackBar(error.message || `Error loading ${objectName}`, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: error,
       });
     },
   });

packages/twenty-front/src/modules/auth/components/VerifyEmailEffect.tsx

@@ -1,6 +1,5 @@
 import { useAuth } from '@/auth/hooks/useAuth';
 import { AppPath } from '@/types/AppPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { ApolloError } from '@apollo/client';
 
@@ -20,7 +19,7 @@ import { EmailVerificationSent } from '../sign-in-up/components/EmailVerificatio
 export const VerifyEmailEffect = () => {
   const { getLoginTokenFromEmailVerificationToken } = useAuth();
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar, enqueueSuccessSnackBar } = useSnackBar();
 
   const [searchParams] = useSearchParams();
   const [isError, setIsError] = useState(false);
@@ -39,9 +38,11 @@ export const VerifyEmailEffect = () => {
   useEffect(() => {
     const verifyEmailToken = async () => {
       if (!email || !emailVerificationToken) {
-        enqueueSnackBar(t`Invalid email verification link.`, {
+        enqueueErrorSnackBar({
-          dedupeKey: 'email-verification-link-dedupe-key',
+          message: t`Invalid email verification link.`,
-          variant: SnackBarVariant.Error,
+          options: {
+            dedupeKey: 'email-verification-link-dedupe-key',
+          },
         });
         return navigate(AppPath.SignInUp);
       }
@@ -53,9 +54,11 @@ export const VerifyEmailEffect = () => {
             email,
           );
 
-        enqueueSnackBar(t`Email verified.`, {
+        enqueueSuccessSnackBar({
-          dedupeKey: 'email-verification-dedupe-key',
+          message: t`Email verified.`,
-          variant: SnackBarVariant.Success,
+          options: {
+            dedupeKey: 'email-verification-dedupe-key',
+          },
         });
 
         const workspaceUrl = getWorkspaceUrl(workspaceUrls);
@@ -71,14 +74,13 @@ export const VerifyEmailEffect = () => {
 
         verifyLoginToken(loginToken.token);
       } catch (error) {
-        const message: string =
+        enqueueErrorSnackBar({
-          error instanceof ApolloError
+          ...(error instanceof ApolloError
-            ? error.message
+            ? { apolloError: error }
-            : 'Email verification failed';
+            : { message: t`Email verification failed` }),
-
+          options: {
-        enqueueSnackBar(t`${message}`, {
+            dedupeKey: 'email-verification-error-dedupe-key',
-          dedupeKey: 'email-verification-error-dedupe-key',
+          },
-          variant: SnackBarVariant.Error,
         });
         if (
           error instanceof ApolloError &&

packages/twenty-front/src/modules/auth/hooks/__tests__/useVerifyLogin.test.ts

@@ -4,14 +4,13 @@ import { renderHook } from '@testing-library/react';
 import { RecoilRoot } from 'recoil';
 
 import { AppPath } from '@/types/AppPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { useAuth } from '../useAuth';
 import { useVerifyLogin } from '../useVerifyLogin';
 
-import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
 import { SOURCE_LOCALE } from 'twenty-shared/translations';
+import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
 
 jest.mock('../useAuth', () => ({
   useAuth: jest.fn(),
@@ -37,7 +36,7 @@ const renderHooks = () => {
 
 describe('useVerifyLogin', () => {
   const mockGetAuthTokensFromLoginToken = jest.fn();
-  const mockEnqueueSnackBar = jest.fn();
+  const mockEnqueueErrorSnackBar = jest.fn();
   const mockNavigate = jest.fn();
 
   beforeEach(() => {
@@ -48,7 +47,7 @@ describe('useVerifyLogin', () => {
     });
 
     (useSnackBar as jest.Mock).mockReturnValue({
-      enqueueSnackBar: mockEnqueueSnackBar,
+      enqueueErrorSnackBar: mockEnqueueErrorSnackBar,
     });
 
     (useNavigateApp as jest.Mock).mockReturnValue(mockNavigate);
@@ -70,8 +69,8 @@ describe('useVerifyLogin', () => {
 
     await result.current.verifyLoginToken('test-token');
 
-    expect(mockEnqueueSnackBar).toHaveBeenCalledWith('Authentication failed', {
+    expect(mockEnqueueErrorSnackBar).toHaveBeenCalledWith({
-      variant: SnackBarVariant.Error,
+      message: 'Authentication failed',
     });
     expect(mockNavigate).toHaveBeenCalledWith(AppPath.SignInUp);
   });

packages/twenty-front/src/modules/auth/hooks/useVerifyLogin.ts

@@ -1,5 +1,3 @@
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
-
 import { useAuth } from '@/auth/hooks/useAuth';
 import { AppPath } from '@/types/AppPath';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
@@ -7,7 +5,7 @@ import { useLingui } from '@lingui/react/macro';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 
 export const useVerifyLogin = () => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
   const navigate = useNavigateApp();
   const { getAuthTokensFromLoginToken } = useAuth();
   const { t } = useLingui();
@@ -16,8 +14,8 @@ export const useVerifyLogin = () => {
     try {
       await getAuthTokensFromLoginToken(loginToken);
     } catch (error) {
-      enqueueSnackBar(t`Authentication failed`, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`Authentication failed`,
       });
       navigate(AppPath.SignInUp);
     }

packages/twenty-front/src/modules/auth/sign-in-up/hooks/__tests__/useHandleResetPassword.test.ts

@@ -5,7 +5,6 @@ import { RecoilRoot } from 'recoil';
 
 import { useHandleResetPassword } from '@/auth/sign-in-up/hooks/useHandleResetPassword';
 import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SOURCE_LOCALE } from 'twenty-shared/translations';
 import {
@@ -36,14 +35,16 @@ const renderHooks = () => {
 };
 
 describe('useHandleResetPassword', () => {
-  const enqueueSnackBarMock = jest.fn();
+  const enqueueErrorSnackBarMock = jest.fn();
+  const enqueueSuccessSnackBarMock = jest.fn();
   const emailPasswordResetLinkMock = jest.fn();
 
   beforeEach(() => {
     jest.clearAllMocks();
 
     (useSnackBar as jest.Mock).mockReturnValue({
-      enqueueSnackBar: enqueueSnackBarMock,
+      enqueueErrorSnackBar: enqueueErrorSnackBarMock,
+      enqueueSuccessSnackBar: enqueueSuccessSnackBarMock,
     });
     (useEmailPasswordResetLinkMutation as jest.Mock).mockReturnValue([
       emailPasswordResetLinkMock,
@@ -54,8 +55,8 @@ describe('useHandleResetPassword', () => {
     const { result } = renderHooks();
     await act(() => result.current.handleResetPassword('')());
 
-    expect(enqueueSnackBarMock).toHaveBeenCalledWith('Invalid email', {
+    expect(enqueueErrorSnackBarMock).toHaveBeenCalledWith({
-      variant: SnackBarVariant.Error,
+      message: 'Invalid email',
     });
   });
 
@@ -67,10 +68,9 @@ describe('useHandleResetPassword', () => {
     const { result } = renderHooks();
     await act(() => result.current.handleResetPassword('test@example.com')());
 
-    expect(enqueueSnackBarMock).toHaveBeenCalledWith(
+    expect(enqueueSuccessSnackBarMock).toHaveBeenCalledWith({
-      'Password reset link has been sent to the email',
+      message: 'Password reset link has been sent to the email',
-      { variant: SnackBarVariant.Success },
+    });
-    );
   });
 
   it('should show error message if sending reset link fails', async () => {
@@ -81,9 +81,7 @@ describe('useHandleResetPassword', () => {
     const { result } = renderHooks();
     await act(() => result.current.handleResetPassword('test@example.com')());
 
-    expect(enqueueSnackBarMock).toHaveBeenCalledWith('There was an issue', {
+    expect(enqueueErrorSnackBarMock).toHaveBeenCalledWith({});
-      variant: SnackBarVariant.Error,
-    });
   });
 
   it('should show error message in case of request error', async () => {
@@ -93,8 +91,6 @@ describe('useHandleResetPassword', () => {
     const { result } = renderHooks();
     await act(() => result.current.handleResetPassword('test@example.com')());
 
-    expect(enqueueSnackBarMock).toHaveBeenCalledWith(errorMessage, {
+    expect(enqueueErrorSnackBarMock).toHaveBeenCalledWith({});
-      variant: SnackBarVariant.Error,
-    });
   });
 });

packages/twenty-front/src/modules/auth/sign-in-up/hooks/__tests__/useSSO.test.tsx

@@ -2,19 +2,20 @@ import { GET_AUTHORIZATION_URL_FOR_SSO } from '@/auth/graphql/mutations/getAutho
 import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
 import { useRedirect } from '@/domain-manager/hooks/useRedirect';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { ApolloError } from '@apollo/client';
 import { MockedProvider } from '@apollo/client/testing';
-import { MemoryRouter } from 'react-router-dom';
 import { renderHook } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 
 jest.mock('@/ui/feedback/snack-bar-manager/hooks/useSnackBar');
 jest.mock('@/domain-manager/hooks/useRedirect');
 jest.mock('~/generated/graphql');
 
-const mockEnqueueSnackBar = jest.fn();
+const mockEnqueueErrorSnackBar = jest.fn();
 const mockRedirect = jest.fn();
 
 (useSnackBar as jest.Mock).mockReturnValue({
-  enqueueSnackBar: mockEnqueueSnackBar,
+  enqueueErrorSnackBar: mockEnqueueErrorSnackBar,
 });
 (useRedirect as jest.Mock).mockReturnValue({
   redirect: mockRedirect,
@@ -84,8 +85,10 @@ describe('useSSO', () => {
 
     await result.current.redirectToSSOLoginPage(identityProviderId);
 
-    expect(mockEnqueueSnackBar).toHaveBeenCalledWith('Error message', {
+    expect(mockEnqueueErrorSnackBar).toHaveBeenCalledWith({
-      variant: 'error',
+      apolloError: new ApolloError({
+        graphQLErrors: [{ message: 'Error message' }],
+      }),
     });
   });
 });

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useHandleResendEmailVerificationToken.ts

@@ -1,13 +1,13 @@
 import { useCallback } from 'react';
 
 import { useOrigin } from '@/domain-manager/hooks/useOrigin';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { ApolloError } from '@apollo/client';
 import { t } from '@lingui/core/macro';
 import { useResendEmailVerificationTokenMutation } from '~/generated-metadata/graphql';
 
 export const useHandleResendEmailVerificationToken = () => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar, enqueueSuccessSnackBar } = useSnackBar();
   const [resendEmailVerificationToken, { loading }] =
     useResendEmailVerificationTokenMutation();
   const { origin } = useOrigin();
@@ -16,8 +16,8 @@ export const useHandleResendEmailVerificationToken = () => {
     (email: string | null) => {
       return async () => {
         if (!email) {
-          enqueueSnackBar(t`Invalid email`, {
+          enqueueErrorSnackBar({
-            variant: SnackBarVariant.Error,
+            message: t`Invalid email`,
           });
           return;
         }
@@ -31,22 +31,25 @@ export const useHandleResendEmailVerificationToken = () => {
           });
 
           if (data?.resendEmailVerificationToken?.success === true) {
-            enqueueSnackBar(t`Email verification link resent!`, {
+            enqueueSuccessSnackBar({
-              variant: SnackBarVariant.Success,
+              message: t`Email verification link resent!`,
             });
           } else {
-            enqueueSnackBar(t`There was an issue`, {
+            enqueueErrorSnackBar({});
-              variant: SnackBarVariant.Error,
-            });
           }
         } catch (error) {
-          enqueueSnackBar((error as Error).message, {
+          enqueueErrorSnackBar({
-            variant: SnackBarVariant.Error,
+            ...(error instanceof ApolloError ? { apolloError: error } : {}),
           });
         }
       };
     },
-    [enqueueSnackBar, resendEmailVerificationToken, origin],
+    [
+      enqueueErrorSnackBar,
+      enqueueSuccessSnackBar,
+      resendEmailVerificationToken,
+      origin,
+    ],
   );
 
   return { handleResendEmailVerificationToken, loading };

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useHandleResetPassword.ts

@@ -2,14 +2,14 @@ import { useCallback } from 'react';
 
 import { currentUserState } from '@/auth/states/currentUserState';
 import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { ApolloError } from '@apollo/client';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
 import { useEmailPasswordResetLinkMutation } from '~/generated-metadata/graphql';
 
 export const useHandleResetPassword = () => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar, enqueueSuccessSnackBar } = useSnackBar();
   const [emailPasswordResetLink] = useEmailPasswordResetLinkMutation();
   const workspacePublicData = useRecoilValue(workspacePublicDataState);
   const currentUser = useRecoilValue(currentUserState);
@@ -20,15 +20,15 @@ export const useHandleResetPassword = () => {
     (email = currentUser?.email) => {
       return async () => {
         if (!email) {
-          enqueueSnackBar(t`Invalid email`, {
+          enqueueErrorSnackBar({
-            variant: SnackBarVariant.Error,
+            message: t`Invalid email`,
           });
           return;
         }
 
         if (!workspacePublicData?.id) {
-          enqueueSnackBar(t`Invalid workspace`, {
+          enqueueErrorSnackBar({
-            variant: SnackBarVariant.Error,
+            message: t`Invalid workspace`,
           });
           return;
         }
@@ -39,17 +39,15 @@ export const useHandleResetPassword = () => {
           });
 
           if (data?.emailPasswordResetLink?.success === true) {
-            enqueueSnackBar(t`Password reset link has been sent to the email`, {
+            enqueueSuccessSnackBar({
-              variant: SnackBarVariant.Success,
+              message: t`Password reset link has been sent to the email`,
             });
           } else {
-            enqueueSnackBar(t`There was an issue`, {
+            enqueueErrorSnackBar({});
-              variant: SnackBarVariant.Error,
-            });
           }
         } catch (error) {
-          enqueueSnackBar((error as Error).message, {
+          enqueueErrorSnackBar({
-            variant: SnackBarVariant.Error,
+            ...(error instanceof ApolloError ? { apolloError: error } : {}),
           });
         }
       };
@@ -57,7 +55,8 @@ export const useHandleResetPassword = () => {
     [
       currentUser?.email,
       workspacePublicData?.id,
-      enqueueSnackBar,
+      enqueueErrorSnackBar,
+      enqueueSuccessSnackBar,
       t,
       emailPasswordResetLink,
     ],

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSSO.ts

@@ -2,16 +2,15 @@
 
 import { GET_AUTHORIZATION_URL_FOR_SSO } from '@/auth/graphql/mutations/getAuthorizationUrlForSSO';
 import { useRedirect } from '@/domain-manager/hooks/useRedirect';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { useApolloClient } from '@apollo/client';
+import { ApolloError, useApolloClient } from '@apollo/client';
 import { useParams } from 'react-router-dom';
 
 export const useSSO = () => {
   const apolloClient = useApolloClient();
   const workspaceInviteHash = useParams().workspaceInviteHash;
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
   const { redirect } = useRedirect();
   const redirectToSSOLoginPage = async (identityProviderId: string) => {
     let authorizationUrlForSSOResult;
@@ -26,8 +25,8 @@ export const useSSO = () => {
         },
       });
     } catch (error: any) {
-      return enqueueSnackBar(error?.message ?? 'Unknown error', {
+      return enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        ...(error instanceof ApolloError ? { apolloError: error } : {}),
       });
     }
 

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.ts

@@ -11,17 +11,17 @@ import {
 import { SignInUpMode } from '@/auth/types/signInUpMode';
 import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
 import { useBuildSearchParamsFromUrlSyncedStates } from '@/domain-manager/hooks/useBuildSearchParamsFromUrlSyncedStates';
+import { useIsCurrentLocationOnAWorkspace } from '@/domain-manager/hooks/useIsCurrentLocationOnAWorkspace';
 import { AppPath } from '@/types/AppPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { ApolloError } from '@apollo/client';
 import { useRecoilState } from 'recoil';
 import { buildAppPathWithQueryParams } from '~/utils/buildAppPathWithQueryParams';
 import { isMatchingLocation } from '~/utils/isMatchingLocation';
 import { useAuth } from '../../hooks/useAuth';
-import { useIsCurrentLocationOnAWorkspace } from '@/domain-manager/hooks/useIsCurrentLocationOnAWorkspace';
 
 export const useSignInUp = (form: UseFormReturn<Form>) => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const [signInUpStep, setSignInUpStep] = useRecoilState(signInUpStepState);
   const [signInUpMode, setSignInUpMode] = useRecoilState(signInUpModeState);
@@ -66,9 +66,7 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
         captchaToken: token,
       },
       onError: (error) => {
-        enqueueSnackBar(`${error.message}`, {
+        enqueueErrorSnackBar({ apolloError: error });
-          variant: SnackBarVariant.Error,
-        });
       },
       onCompleted: (data) => {
         setSignInUpMode(
@@ -83,7 +81,7 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
     readCaptchaToken,
     form,
     checkUserExistsQuery,
-    enqueueSnackBar,
+    enqueueErrorSnackBar,
     setSignInUpStep,
     setSignInUpMode,
   ]);
@@ -145,9 +143,9 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
           captchaToken: token,
           verifyEmailNextPath,
         });
-      } catch (err: any) {
+      } catch (error: any) {
-        enqueueSnackBar(err?.message, {
+        enqueueErrorSnackBar({
-          variant: SnackBarVariant.Error,
+          ...(error instanceof ApolloError ? { apolloError: error } : {}),
         });
       }
     },
@@ -161,7 +159,7 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
       signUpWithCredentialsInWorkspace,
       workspaceInviteHash,
       workspacePersonalInviteToken,
-      enqueueSnackBar,
+      enqueueErrorSnackBar,
       buildSearchParamsFromUrlSyncedStates,
       isOnAWorkspace,
     ],

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignUpInNewWorkspace.ts

@@ -1,13 +1,13 @@
 import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
 import { AppPath } from '@/types/AppPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { ApolloError } from '@apollo/client';
 import { useSignUpInNewWorkspaceMutation } from '~/generated-metadata/graphql';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
 
 export const useSignUpInNewWorkspace = () => {
   const { redirectToWorkspaceDomain } = useRedirectToWorkspaceDomain();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const [signUpInNewWorkspaceMutation] = useSignUpInNewWorkspaceMutation();
 
@@ -23,10 +23,8 @@ export const useSignUpInNewWorkspace = () => {
           newTab ? '_blank' : '_self',
         );
       },
-      onError: (error: Error) => {
+      onError: (error: ApolloError) => {
-        enqueueSnackBar(error.message, {
+        enqueueErrorSnackBar({ apolloError: error });
-          variant: SnackBarVariant.Error,
-        });
       },
     });
   };

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useWorkspaceFromInviteHash.ts

@@ -4,16 +4,16 @@ import { useRecoilValue } from 'recoil';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 
 import { AppPath } from '@/types/AppPath';
+import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { useGetWorkspaceFromInviteHashQuery } from '~/generated-metadata/graphql';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 
 export const useWorkspaceFromInviteHash = () => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar, enqueueInfoSnackBar } = useSnackBar();
   const navigate = useNavigateApp();
   const workspaceInviteHash = useParams().workspaceInviteHash;
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
@@ -24,9 +24,7 @@ export const useWorkspaceFromInviteHash = () => {
       skip: !workspaceInviteHash,
       variables: { inviteHash: workspaceInviteHash || '' },
       onError: (error) => {
-        enqueueSnackBar(error.message, {
+        enqueueErrorSnackBar({ apolloError: error });
-          variant: SnackBarVariant.Error,
-        });
         navigate(AppPath.Index);
       },
       onCompleted: (data) => {
@@ -35,13 +33,14 @@ export const useWorkspaceFromInviteHash = () => {
           data?.findWorkspaceFromInviteHash &&
           currentWorkspace.id === data.findWorkspaceFromInviteHash.id
         ) {
+          const workspaceDisplayName =
+            data?.findWorkspaceFromInviteHash?.displayName;
           initiallyLoggedIn &&
-            enqueueSnackBar(
+            enqueueInfoSnackBar({
-              `You already belong to ${data?.findWorkspaceFromInviteHash?.displayName} workspace`,
+              message: workspaceDisplayName
-              {
+                ? t`You already belong to the workspace ${workspaceDisplayName}`
-                variant: SnackBarVariant.Info,
+                : t`You already belong to this workspace`,
-              },
+            });
-            );
           navigate(AppPath.Index);
         }
       },

packages/twenty-front/src/modules/billing/components/SettingsBillingSubscriptionInfo.tsx

@@ -3,7 +3,6 @@ import { SubscriptionInfoRowContainer } from '@/billing/components/SubscriptionI
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { formatMonthlyPrices } from '@/billing/utils/formatMonthlyPrices';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
@@ -49,7 +48,7 @@ export const SettingsBillingSubscriptionInfo = () => {
 
   const { openModal } = useModal();
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
 
   const subscriptionStatus = useSubscriptionStatus();
 
@@ -134,12 +133,12 @@ export const SettingsBillingSubscriptionInfo = () => {
         };
         setCurrentWorkspace(newCurrentWorkspace);
       }
-      enqueueSnackBar(t`Subscription has been switched to Yearly.`, {
+      enqueueSuccessSnackBar({
-        variant: SnackBarVariant.Success,
+        message: t`Subscription has been switched to Yearly.`,
       });
     } catch (error: any) {
-      enqueueSnackBar(t`Error while switching subscription to Yearly.`, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`Error while switching subscription to Yearly.`,
       });
     }
   };
@@ -160,16 +159,13 @@ export const SettingsBillingSubscriptionInfo = () => {
         };
         setCurrentWorkspace(newCurrentWorkspace);
       }
-      enqueueSnackBar(t`Subscription has been switched to Organization Plan.`, {
+      enqueueSuccessSnackBar({
-        variant: SnackBarVariant.Success,
+        message: t`Subscription has been switched to Organization Plan.`,
       });
     } catch (error: any) {
-      enqueueSnackBar(
+      enqueueErrorSnackBar({
-        t`Error while switching subscription to Organization Plan.`,
+        message: t`Error while switching subscription to Organization Plan.`,
-        {
+      });
-          variant: SnackBarVariant.Error,
-        },
-      );
     }
   };
 

packages/twenty-front/src/modules/billing/hooks/useEndSubscriptionTrialPeriod.ts

@@ -1,5 +1,4 @@
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
@@ -8,7 +7,7 @@ import { isDefined } from 'twenty-shared/utils';
 import { useEndSubscriptionTrialPeriodMutation } from '~/generated-metadata/graphql';
 
 export const useEndSubscriptionTrialPeriod = () => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
   const [endSubscriptionTrialPeriod] = useEndSubscriptionTrialPeriodMutation();
   const [currentWorkspace, setCurrentWorkspace] = useRecoilState(
     currentWorkspaceState,
@@ -25,12 +24,9 @@ export const useEndSubscriptionTrialPeriod = () => {
       const hasPaymentMethod = endTrialPeriodOutput?.hasPaymentMethod;
 
       if (isDefined(hasPaymentMethod) && hasPaymentMethod === false) {
-        enqueueSnackBar(
+        enqueueErrorSnackBar({
-          t`No payment method found. Please update your billing details.`,
+          message: t`No payment method found. Please update your billing details.`,
-          {
+        });
-            variant: SnackBarVariant.Error,
-          },
-        );
 
         return;
       }
@@ -49,16 +45,13 @@ export const useEndSubscriptionTrialPeriod = () => {
         });
       }
 
-      enqueueSnackBar(t`Subscription activated.`, {
+      enqueueSuccessSnackBar({
-        variant: SnackBarVariant.Success,
+        message: t`Subscription activated.`,
       });
     } catch {
-      enqueueSnackBar(
+      enqueueErrorSnackBar({
-        t`Error while ending trial period. Please contact Twenty team.`,
+        message: t`Error while ending trial period. Please contact Twenty team.`,
-        {
+      });
-          variant: SnackBarVariant.Error,
-        },
-      );
     } finally {
       setIsLoading(false);
     }

packages/twenty-front/src/modules/billing/hooks/useHandleCheckoutSession.ts

@@ -1,7 +1,7 @@
 import { useRedirect } from '@/domain-manager/hooks/useRedirect';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { t } from '@lingui/core/macro';
 import { useState } from 'react';
 import {
   BillingPlanKey,
@@ -21,7 +21,7 @@ export const useHandleCheckoutSession = ({
 }) => {
   const { redirect } = useRedirect();
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const [checkoutSession] = useCheckoutSessionMutation();
 
@@ -39,12 +39,9 @@ export const useHandleCheckoutSession = ({
     });
     setIsSubmitting(false);
     if (!data?.checkoutSession.url) {
-      enqueueSnackBar(
+      enqueueErrorSnackBar({
-        'Checkout session error. Please retry or contact Twenty team',
+        message: t`Checkout session error. Please retry or contact Twenty team`,
-        {
+      });
-          variant: SnackBarVariant.Error,
-        },
-      );
       return;
     }
     redirect(data.checkoutSession.url);

packages/twenty-front/src/modules/error-handler/components/ErrorMessageEffect.tsx

@@ -1,26 +1,27 @@
 import { useEffect } from 'react';
 
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useSearchParams } from 'react-router-dom';
 import { isDefined } from 'twenty-shared/utils';
 
 export const ErrorMessageEffect = () => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
   const [searchParams, setSearchParams] = useSearchParams();
   const errorMessage = searchParams.get('errorMessage');
 
   useEffect(() => {
     if (isDefined(errorMessage)) {
-      enqueueSnackBar(errorMessage, {
+      enqueueErrorSnackBar({
-        dedupeKey: 'error-message-dedupe-key',
+        message: errorMessage,
-        variant: SnackBarVariant.Error,
+        options: {
+          dedupeKey: 'error-message-dedupe-key',
+        },
       });
       const newSearchParams = new URLSearchParams(searchParams);
       newSearchParams.delete('errorMessage');
       setSearchParams(newSearchParams);
     }
-  }, [enqueueSnackBar, errorMessage, searchParams, setSearchParams]);
+  }, [enqueueErrorSnackBar, errorMessage, searchParams, setSearchParams]);
 
   return <></>;
 };

packages/twenty-front/src/modules/error-handler/components/PromiseRejectionEffect.tsx

@@ -1,8 +1,6 @@
 import { useCallback, useEffect } from 'react';
 
 import { CustomError } from '@/error-handler/CustomError';
-import { ObjectMetadataItemNotFoundError } from '@/object-metadata/errors/ObjectMetadataNotFoundError';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import isEmpty from 'lodash.isempty';
 import { isDefined } from 'twenty-shared/utils';
@@ -14,29 +12,20 @@ const hasErrorCode = (
 };
 
 export const PromiseRejectionEffect = () => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const handlePromiseRejection = useCallback(
     async (event: PromiseRejectionEvent) => {
       const error = event.reason;
-
-      if (error instanceof ObjectMetadataItemNotFoundError) {
-        enqueueSnackBar(
-          `Error with custom object that cannot be found : ${event.reason}`,
-          {
-            variant: SnackBarVariant.Error,
-          },
-        );
-      } else {
-        enqueueSnackBar(`${error.message}`, {
-          variant: SnackBarVariant.Error,
-        });
-      }
-
       if (error.name === 'ApolloError' && !isEmpty(error.graphQLErrors)) {
+        enqueueErrorSnackBar({
+          apolloError: error,
+        });
         return; // already handled by apolloLink
       }
 
+      enqueueErrorSnackBar({});
+
       try {
         const { captureException } = await import('@sentry/react');
         captureException(error, (scope) => {
@@ -52,7 +41,7 @@ export const PromiseRejectionEffect = () => {
         console.error('Failed to capture exception with Sentry:', sentryError);
       }
     },
-    [enqueueSnackBar],
+    [enqueueErrorSnackBar],
   );
 
   useEffect(() => {

packages/twenty-front/src/modules/object-metadata/hooks/useFindManyObjectMetadataItems.ts

@@ -1,7 +1,6 @@
 import { useQuery } from '@apollo/client';
 import { useMemo } from 'react';
 
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import {
   ObjectMetadataItemsQuery,
@@ -17,7 +16,7 @@ export const useFindManyObjectMetadataItems = ({
 }: {
   skip?: boolean;
 } = {}) => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const { data, loading, error, refetch } = useQuery<
     ObjectMetadataItemsQuery,
@@ -26,8 +25,8 @@ export const useFindManyObjectMetadataItems = ({
     skip,
     onError: (error) => {
       logError('useFindManyObjectMetadataItems error : ' + error);
-      enqueueSnackBar(`${error.message}`, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: error,
       });
     },
   });

packages/twenty-front/src/modules/object-record/hooks/useBatchCreateManyRecords.ts

@@ -6,7 +6,6 @@ import {
 } from '@/object-record/hooks/useCreateManyRecords';
 import { useRefetchAggregateQueries } from '@/object-record/hooks/useRefetchAggregateQueries';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { ApolloError } from '@apollo/client';
 import { t } from '@lingui/core/macro';
@@ -43,7 +42,7 @@ export const useBatchCreateManyRecords = <
     objectMetadataNamePlural: objectMetadataItem.namePlural,
   });
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueWarningSnackBar } = useSnackBar();
 
   const batchCreateManyRecords = async ({
     recordsToCreate,
@@ -84,13 +83,12 @@ export const useBatchCreateManyRecords = <
     } catch (error) {
       if (error instanceof ApolloError && error.message.includes('aborted')) {
         const formattedCreatedRecordsCount = formatNumber(createdRecordsCount);
-        enqueueSnackBar(
+        enqueueWarningSnackBar({
-          t`Record creation stopped. ${formattedCreatedRecordsCount} records created.`,
+          message: t`Record creation stopped. ${formattedCreatedRecordsCount} records created.`,
-          {
+          options: {
-            variant: SnackBarVariant.Warning,
             duration: 5000,
           },
-        );
+        });
       } else {
         throw error;
       }

packages/twenty-front/src/modules/object-record/hooks/useDeleteOneRecord.ts

@@ -1,3 +1,4 @@
+import { ApolloError } from '@apollo/client';
 import { useCallback } from 'react';
 
 import { triggerUpdateRecordOptimisticEffect } from '@/apollo/optimistic-effect/utils/triggerUpdateRecordOptimisticEffect';
@@ -121,7 +122,7 @@ export const useDeleteOneRecord = ({
             });
           },
         })
-        .catch((error: Error) => {
+        .catch((error: ApolloError) => {
           if (!shouldHandleOptimisticCache) {
             throw error;
           }

packages/twenty-front/src/modules/object-record/hooks/useFindDuplicateRecords.ts

@@ -10,7 +10,6 @@ import { RecordGqlOperationFindDuplicatesResult } from '@/object-record/graphql/
 import { useFindDuplicateRecordsQuery } from '@/object-record/hooks/useFindDuplicatesRecordsQuery';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { getFindDuplicateRecordsQueryResponseField } from '@/object-record/utils/getFindDuplicateRecordsQueryResponseField';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { logError } from '~/utils/logError';
 
@@ -36,7 +35,7 @@ export const useFindDuplicateRecords = <T extends ObjectRecord = ObjectRecord>({
     objectNameSingular,
   });
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const queryResponseField = getFindDuplicateRecordsQueryResponseField(
     objectMetadataItem.nameSingular,
@@ -59,8 +58,8 @@ export const useFindDuplicateRecords = <T extends ObjectRecord = ObjectRecord>({
             `useFindDuplicateRecords for "${objectMetadataItem.nameSingular}" error : ` +
               error,
           );
-          enqueueSnackBar(`Error finding duplicates:", ${error.message}`, {
+          enqueueErrorSnackBar({
-            variant: SnackBarVariant.Error,
+            apolloError: error,
           });
         },
       },

packages/twenty-front/src/modules/object-record/hooks/useHandleFindManyRecordsError.ts

@@ -1,10 +1,9 @@
 import { ApolloError } from '@apollo/client';
 
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { logError } from '~/utils/logError';
 import { useCallback } from 'react';
+import { logError } from '~/utils/logError';
 
 export const useHandleFindManyRecordsError = ({
   handleError,
@@ -13,7 +12,7 @@ export const useHandleFindManyRecordsError = ({
   objectMetadataItem: ObjectMetadataItem;
   handleError?: (error?: Error) => void;
 }) => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const handleFindManyRecordsError = useCallback(
     (error: ApolloError) => {
@@ -21,12 +20,12 @@ export const useHandleFindManyRecordsError = ({
         `useFindManyRecords for "${objectMetadataItem.namePlural}" error : ` +
           error,
       );
-      enqueueSnackBar(`${error.message}`, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: error,
       });
       handleError?.(error);
     },
-    [enqueueSnackBar, handleError, objectMetadataItem.namePlural],
+    [enqueueErrorSnackBar, handleError, objectMetadataItem.namePlural],
   );
 
   return {

packages/twenty-front/src/modules/object-record/hooks/useObjectRecordSearchRecords.ts

@@ -3,7 +3,6 @@ import { MAX_SEARCH_RESULTS } from '@/command-menu/constants/MaxSearchResults';
 import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { ObjectMetadataItemIdentifier } from '@/object-metadata/types/ObjectMetadataItemIdentifier';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { WatchQueryFetchPolicy } from '@apollo/client';
 import { useMemo } from 'react';
@@ -34,10 +33,9 @@ export const useObjectRecordSearchRecords = ({
     objectNameSingular,
   });
 
+  const { enqueueErrorSnackBar } = useSnackBar();
   const apolloCoreClient = useApolloCoreClient();
 
-  const { enqueueSnackBar } = useSnackBar();
-
   const { data, loading, error, previousData } = useSearchQuery({
     skip:
       skip ||
@@ -57,12 +55,9 @@ export const useObjectRecordSearchRecords = ({
         `useSearchRecords for "${objectMetadataItem.namePlural}" error : ` +
           error,
       );
-      enqueueSnackBar(
+      enqueueErrorSnackBar({
-        `Error during useSearchRecords for "${objectMetadataItem.namePlural}", ${error.message}`,
+        apolloError: error,
-        {
+      });
-          variant: SnackBarVariant.Error,
-        },
-      );
     },
   });
 

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx

@@ -3,7 +3,6 @@ import { OBJECT_OPTIONS_DROPDOWN_ID } from '@/object-record/object-options-dropd
 import { useObjectOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsDropdown';
 import { useObjectOptionsForBoard } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForBoard';
 import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -65,7 +64,7 @@ export const ObjectOptionsDropdownMenuContent = () => {
   };
 
   const theme = useTheme();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar } = useSnackBar();
 
   const isDefaultView = currentView?.key === 'INDEX';
 
@@ -171,10 +170,12 @@ export const ObjectOptionsDropdownMenuContent = () => {
             onEnter={() => {
               const currentUrl = window.location.href;
               navigator.clipboard.writeText(currentUrl);
-              enqueueSnackBar('Link copied to clipboard', {
+              enqueueSuccessSnackBar({
-                variant: SnackBarVariant.Success,
+                message: t`Link copied to clipboard`,
-                icon: <IconCopy size={theme.icon.size.md} />,
+                options: {
-                duration: 2000,
+                  icon: <IconCopy size={theme.icon.size.md} />,
+                  duration: 2000,
+                },
               });
             }}
           >
@@ -183,10 +184,12 @@ export const ObjectOptionsDropdownMenuContent = () => {
               onClick={() => {
                 const currentUrl = window.location.href;
                 navigator.clipboard.writeText(currentUrl);
-                enqueueSnackBar('Link copied to clipboard', {
+                enqueueSuccessSnackBar({
-                  variant: SnackBarVariant.Success,
+                  message: t`Link copied to clipboard`,
-                  icon: <IconCopy size={theme.icon.size.md} />,
+                  options: {
-                  duration: 2000,
+                    icon: <IconCopy size={theme.icon.size.md} />,
+                    duration: 2000,
+                  },
                 });
               }}
               LeftIcon={IconCopy}

packages/twenty-front/src/modules/object-record/record-field/components/LightCopyIconButton.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useLingui } from '@lingui/react/macro';
 import { IconCopy } from 'twenty-ui/display';
@@ -16,7 +15,7 @@ export type LightCopyIconButtonProps = {
 };
 
 export const LightCopyIconButton = ({ copyText }: LightCopyIconButtonProps) => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar } = useSnackBar();
   const theme = useTheme();
   const { t } = useLingui();
 
@@ -25,10 +24,12 @@ export const LightCopyIconButton = ({ copyText }: LightCopyIconButtonProps) => {
       <LightIconButton
         Icon={IconCopy}
         onClick={() => {
-          enqueueSnackBar(t`Text copied to clipboard`, {
+          enqueueSuccessSnackBar({
-            variant: SnackBarVariant.Success,
+            message: t`Text copied to clipboard`,
-            icon: <IconCopy size={theme.icon.size.md} />,
+            options: {
-            duration: 2000,
+              icon: <IconCopy size={theme.icon.size.md} />,
+              duration: 2000,
+            },
           });
           navigator.clipboard.writeText(copyText);
         }}

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx

@@ -1,6 +1,5 @@
 import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
 import { usePhonesFieldDisplay } from '@/object-record/record-field/meta-types/hooks/usePhonesFieldDisplay';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { PhonesDisplay } from '@/ui/field/display/components/PhonesDisplay';
 import { useLingui } from '@lingui/react/macro';
@@ -12,7 +11,7 @@ export const PhonesFieldDisplay = () => {
 
   const { isFocused } = useFieldFocus();
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
 
   const { getIcon } = useIcons();
 
@@ -29,16 +28,20 @@ export const PhonesFieldDisplay = () => {
 
     try {
       await navigator.clipboard.writeText(phoneNumber);
-      enqueueSnackBar(t`Phone number copied to clipboard`, {
+      enqueueSuccessSnackBar({
-        variant: SnackBarVariant.Success,
+        message: t`Phone number copied to clipboard`,
-        icon: <IconCircleCheck size={16} color="green" />,
+        options: {
-        duration: 2000,
+          icon: <IconCircleCheck size={16} color="green" />,
+          duration: 2000,
+        },
       });
     } catch (err) {
-      enqueueSnackBar(t`Error copying to clipboard`, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`Error copying to clipboard`,
-        icon: <IconExclamationCircle size={16} color="red" />,
+        options: {
-        duration: 2000,
+          icon: <IconExclamationCircle size={16} color="red" />,
+          duration: 2000,
+        },
       });
     }
   };

packages/twenty-front/src/modules/object-record/spreadsheet-import/hooks/useOpenObjectRecordsSpreadsheetImportDialog.ts

@@ -8,7 +8,6 @@ import { SpreadsheetImportCreateRecordsBatchSize } from '@/spreadsheet-import/co
 import { useOpenSpreadsheetImportDialog } from '@/spreadsheet-import/hooks/useOpenSpreadsheetImportDialog';
 import { spreadsheetImportCreatedRecordsProgressState } from '@/spreadsheet-import/states/spreadsheetImportCreatedRecordsProgressState';
 import { SpreadsheetImportDialogOptions } from '@/spreadsheet-import/types';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useSetRecoilState } from 'recoil';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
@@ -17,7 +16,7 @@ export const useOpenObjectRecordsSpreadsheetImportDialog = (
   objectNameSingular: string,
 ) => {
   const { openSpreadsheetImportDialog } = useOpenSpreadsheetImportDialog<any>();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const { objectMetadataItem } = useObjectMetadataItem({
     objectNameSingular,
@@ -79,8 +78,8 @@ export const useOpenObjectRecordsSpreadsheetImportDialog = (
             upsert: true,
           });
         } catch (error: any) {
-          enqueueSnackBar(error?.message || 'Something went wrong', {
+          enqueueErrorSnackBar({
-            variant: SnackBarVariant.Error,
+            apolloError: error,
           });
         }
       },

packages/twenty-front/src/modules/settings/accounts/hooks/useImapConnectionForm.ts

@@ -4,8 +4,8 @@ import { useRecoilValue } from 'recoil';
 import { z } from 'zod';
 
 import { SettingsPath } from '@/types/SettingsPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { ApolloError } from '@apollo/client';
 import { useLingui } from '@lingui/react/macro';
 import {
   ConnectionParameters,
@@ -38,7 +38,7 @@ export const useImapConnectionForm = ({
 }: UseImapConnectionFormProps = {}) => {
   const { t } = useLingui();
   const navigate = useNavigateSettings();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar, enqueueSuccessSnackBar } = useSnackBar();
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
@@ -70,16 +70,12 @@ export const useImapConnectionForm = ({
     formValues: ConnectionParameters & { handle: string },
   ) => {
     if (!currentWorkspace?.id) {
-      enqueueSnackBar('Workspace ID is missing', {
+      enqueueErrorSnackBar({});
-        variant: SnackBarVariant.Error,
-      });
       return;
     }
 
     if (!currentWorkspaceMember?.id) {
-      enqueueSnackBar('Workspace member ID is missing', {
+      enqueueErrorSnackBar({});
-        variant: SnackBarVariant.Error,
-      });
       return;
     }
 
@@ -112,19 +108,16 @@ export const useImapConnectionForm = ({
         },
       });
 
-      enqueueSnackBar(
+      enqueueSuccessSnackBar({
-        connectedAccountId
+        message: connectedAccountId
           ? t`IMAP connection successfully updated`
           : t`IMAP connection successfully created`,
-        {
+      });
-          variant: SnackBarVariant.Success,
-        },
-      );
 
       navigate(SettingsPath.Accounts);
     } catch (error) {
-      enqueueSnackBar((error as Error).message, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: error instanceof ApolloError ? error : undefined,
       });
     }
   };

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx

@@ -1,7 +1,6 @@
 import { canManageFeatureFlagsState } from '@/client-config/states/canManageFeatureFlagsState';
 import { SettingsAdminWorkspaceContent } from '@/settings/admin-panel/components/SettingsAdminWorkspaceContent';
 import { userLookupResultState } from '@/settings/admin-panel/states/userLookupResultState';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { TabList } from '@/ui/layout/tab-list/components/TabList';
@@ -40,7 +39,7 @@ const StyledContainer = styled.div`
 
 export const SettingsAdminGeneral = () => {
   const [userIdentifier, setUserIdentifier] = useState('');
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const [activeTabId, setActiveTabId] = useRecoilComponentStateV2(
     activeTabIdComponentState,
@@ -76,8 +75,8 @@ export const SettingsAdminGeneral = () => {
       },
       onError: (error) => {
         setIsUserLookupLoading(false);
-        enqueueSnackBar(error.message, {
+        enqueueErrorSnackBar({
-          variant: SnackBarVariant.Error,
+          apolloError: error,
         });
       },
     });

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminWorkspaceContent.tsx

@@ -7,7 +7,6 @@ import { useImpersonationAuth } from '@/settings/admin-panel/hooks/useImpersonat
 import { useImpersonationRedirect } from '@/settings/admin-panel/hooks/useImpersonationRedirect';
 import { userLookupResultState } from '@/settings/admin-panel/states/userLookupResultState';
 import { WorkspaceInfo } from '@/settings/admin-panel/types/WorkspaceInfo';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Table } from '@/ui/layout/table/components/Table';
 import { TableBody } from '@/ui/layout/table/components/TableBody';
@@ -57,7 +56,7 @@ export const SettingsAdminWorkspaceContent = ({
   activeWorkspace,
 }: SettingsAdminWorkspaceContentProps) => {
   const canManageFeatureFlags = useRecoilValue(canManageFeatureFlagsState);
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
   const [currentUser] = useRecoilState(currentUserState);
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
@@ -74,9 +73,7 @@ export const SettingsAdminWorkspaceContent = ({
 
   const handleImpersonate = async (workspaceId: string) => {
     if (!userLookupResult?.user.id) {
-      enqueueSnackBar(t`Please search for a user first`, {
+      enqueueErrorSnackBar({ message: t`Please search for a user first` });
-        variant: SnackBarVariant.Error,
-      });
       return;
     }
 
@@ -98,8 +95,8 @@ export const SettingsAdminWorkspaceContent = ({
         );
       },
       onError: (error) => {
-        enqueueSnackBar(`Failed to impersonate user. ${error.message}`, {
+        enqueueErrorSnackBar({
-          variant: SnackBarVariant.Error,
+          message: `Failed to impersonate user. ${error.message}`,
         });
       },
     }).finally(() => {
@@ -128,8 +125,8 @@ export const SettingsAdminWorkspaceContent = ({
         if (isDefined(previousValue)) {
           updateFeatureFlagState(workspaceId, featureFlag, previousValue);
         }
-        enqueueSnackBar(`Failed to update feature flag. ${error.message}`, {
+        enqueueErrorSnackBar({
-          variant: SnackBarVariant.Error,
+          message: `Failed to update feature flag. ${error.message}`,
         });
       },
     });

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigCopyableText.tsx

@@ -1,4 +1,3 @@
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -33,15 +32,17 @@ export const SettingsAdminConfigCopyableText = ({
   multiline = false,
   maxRows,
 }: SettingsAdminConfigCopyableTextProps) => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar } = useSnackBar();
   const theme = useTheme();
   const { t } = useLingui();
 
   const copyToClipboardDebounced = useDebouncedCallback((value: string) => {
     navigator.clipboard.writeText(value);
-    enqueueSnackBar(t`Copied to clipboard!`, {
+    enqueueSuccessSnackBar({
-      variant: SnackBarVariant.Success,
+      message: t`Copied to clipboard!`,
-      icon: <IconCopy size={theme.icon.size.md} />,
+      options: {
+        icon: <IconCopy size={theme.icon.size.md} />,
+      },
     });
   }, 200);
 

packages/twenty-front/src/modules/settings/admin-panel/config-variables/hooks/useConfigVariableActions.ts

@@ -2,7 +2,6 @@ import { useLingui } from '@lingui/react/macro';
 
 import { useClientConfig } from '@/client-config/hooks/useClientConfig';
 import { GET_DATABASE_CONFIG_VARIABLE } from '@/settings/admin-panel/config-variables/graphql/queries/getDatabaseConfigVariable';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { ConfigVariableValue } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
@@ -14,7 +13,7 @@ import {
 
 export const useConfigVariableActions = (variableName: string) => {
   const { t } = useLingui();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
   const { refetch: refetchClientConfig } = useClientConfig();
 
   const [updateDatabaseConfigVariable] =
@@ -68,12 +67,12 @@ export const useConfigVariableActions = (variableName: string) => {
 
       await refetchClientConfig();
 
-      enqueueSnackBar(t`Variable updated successfully.`, {
+      enqueueSuccessSnackBar({
-        variant: SnackBarVariant.Success,
+        message: t`Variable updated successfully.`,
       });
     } catch (error) {
-      enqueueSnackBar(t`Failed to update variable`, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`Failed to update variable`,
       });
     }
   };
@@ -98,12 +97,12 @@ export const useConfigVariableActions = (variableName: string) => {
 
       await refetchClientConfig();
 
-      enqueueSnackBar(t`Variable deleted successfully.`, {
+      enqueueSuccessSnackBar({
-        variant: SnackBarVariant.Success,
+        message: t`Variable deleted successfully.`,
       });
     } catch (error) {
-      enqueueSnackBar(t`Failed to remove override`, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`Failed to remove override`,
       });
     }
   };

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/WorkerMetricsGraph.tsx

@@ -1,6 +1,5 @@
 import { SettingsAdminTableCard } from '@/settings/admin-panel/components/SettingsAdminTableCard';
 import { WorkerMetricsTooltip } from '@/settings/admin-panel/health-status/components/WorkerMetricsTooltip';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -45,7 +44,7 @@ export const WorkerMetricsGraph = ({
   timeRange,
 }: WorkerMetricsGraphProps) => {
   const theme = useTheme();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const { loading, data } = useGetQueueMetricsQuery({
     variables: {
@@ -54,8 +53,8 @@ export const WorkerMetricsGraph = ({
     },
     fetchPolicy: 'no-cache',
     onError: (error) => {
-      enqueueSnackBar(`Error fetching worker metrics: ${error.message}`, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: `Error fetching worker metrics: ${error.message}`,
       });
     },
   });

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsUpdateDataModelObjectAboutForm.tsx

@@ -6,8 +6,8 @@ import {
   settingsDataModelObjectAboutFormSchema,
 } from '@/settings/data-model/validation-schemas/settingsDataModelObjectAboutFormSchema';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { ApolloError } from '@apollo/client';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useSetRecoilState } from 'recoil';
@@ -23,7 +23,7 @@ export const SettingsUpdateDataModelObjectAboutForm = ({
   objectMetadataItem,
 }: SettingsUpdateDataModelObjectAboutFormProps) => {
   const navigate = useNavigateSettings();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
   const setUpdatedObjectNamePlural = useSetRecoilState(
     updatedObjectNamePluralState,
   );
@@ -117,15 +117,20 @@ export const SettingsUpdateDataModelObjectAboutForm = ({
     console.error(error);
 
     if (error instanceof ZodError) {
-      enqueueSnackBar(error.issues[0].message, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: error.issues[0].message,
       });
       return;
     }
 
-    enqueueSnackBar((error as Error).message, {
+    if (error instanceof ApolloError) {
-      variant: SnackBarVariant.Error,
+      enqueueErrorSnackBar({
-    });
+        apolloError: error,
+      });
+      return;
+    }
+
+    enqueueErrorSnackBar({});
   };
 
   return (

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx

@@ -7,9 +7,9 @@ import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdat
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { getActiveFieldMetadataItems } from '@/object-metadata/utils/getActiveFieldMetadataItems';
 import { objectMetadataItemSchema } from '@/object-metadata/validation-schemas/objectMetadataItemSchema';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Select } from '@/ui/input/components/Select';
+import { ApolloError } from '@apollo/client';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { t } from '@lingui/core/macro';
 import { useNavigate } from 'react-router-dom';
@@ -48,7 +48,7 @@ export const SettingsDataModelObjectIdentifiersForm = ({
     mode: 'onTouched',
     resolver: zodResolver(settingsDataModelObjectIdentifiersFormSchema),
   });
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
   const { updateOneObjectMetadataItem } = useUpdateOneObjectMetadataItem();
 
   const handleSave = async (
@@ -67,12 +67,12 @@ export const SettingsDataModelObjectIdentifiersForm = ({
       formConfig.reset(undefined, { keepValues: true });
     } catch (error) {
       if (error instanceof ZodError) {
-        enqueueSnackBar(error.issues[0].message, {
+        enqueueErrorSnackBar({
-          variant: SnackBarVariant.Error,
+          message: error.issues[0].message,
         });
       } else {
-        enqueueSnackBar((error as Error).message, {
+        enqueueErrorSnackBar({
-          variant: SnackBarVariant.Error,
+          apolloError: error instanceof ApolloError ? error : undefined,
         });
       }
     }

packages/twenty-front/src/modules/settings/developers/components/ApiKeyInput.tsx

@@ -1,13 +1,12 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInput } from '@/ui/input/components/TextInput';
 
 import { useLingui } from '@lingui/react/macro';
-import { Button } from 'twenty-ui/input';
 import { IconCopy } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -25,7 +24,7 @@ export const ApiKeyInput = ({ apiKey }: ApiKeyInputProps) => {
   const theme = useTheme();
   const { t } = useLingui();
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar } = useSnackBar();
   return (
     <StyledContainer>
       <StyledLinkContainer>
@@ -35,10 +34,12 @@ export const ApiKeyInput = ({ apiKey }: ApiKeyInputProps) => {
         Icon={IconCopy}
         title={t`Copy`}
         onClick={() => {
-          enqueueSnackBar(t`API Key copied to clipboard`, {
+          enqueueSuccessSnackBar({
-            variant: SnackBarVariant.Success,
+            message: t`API Key copied to clipboard`,
-            icon: <IconCopy size={theme.icon.size.md} />,
+            options: {
-            duration: 2000,
+              icon: <IconCopy size={theme.icon.size.md} />,
+              duration: 2000,
+            },
           });
           navigator.clipboard.writeText(apiKey);
         }}

packages/twenty-front/src/modules/settings/developers/hooks/__tests__/useWebhookForm.test.tsx

@@ -5,11 +5,13 @@ import { MemoryRouter } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 
 import { WebhookFormMode } from '@/settings/developers/constants/WebhookFormMode';
+import { ApolloError } from '@apollo/client';
 import { useWebhookForm } from '../useWebhookForm';
 
 // Mock dependencies
 const mockNavigateSettings = jest.fn();
-const mockEnqueueSnackBar = jest.fn();
+const mockEnqueueSuccessSnackBar = jest.fn();
+const mockEnqueueErrorSnackBar = jest.fn();
 const mockCreateOneRecord = jest.fn();
 const mockUpdateOneRecord = jest.fn();
 const mockDeleteOneRecord = jest.fn();
@@ -20,7 +22,8 @@ jest.mock('~/hooks/useNavigateSettings', () => ({
 
 jest.mock('@/ui/feedback/snack-bar-manager/hooks/useSnackBar', () => ({
   useSnackBar: () => ({
-    enqueueSnackBar: mockEnqueueSnackBar,
+    enqueueSuccessSnackBar: mockEnqueueSuccessSnackBar,
+    enqueueErrorSnackBar: mockEnqueueErrorSnackBar,
   }),
 }));
 
@@ -106,14 +109,15 @@ describe('useWebhookForm', () => {
         secret: 'test-secret',
       });
 
-      expect(mockEnqueueSnackBar).toHaveBeenCalledWith(
+      expect(mockEnqueueSuccessSnackBar).toHaveBeenCalledWith({
-        'Webhook https://test.com/webhook created successfully',
+        message: 'Webhook https://test.com/webhook created successfully',
-        { variant: 'success' },
+      });
-      );
     });
 
     it('should handle creation errors', async () => {
-      const error = new Error('Creation failed');
+      const error = new ApolloError({
+        graphQLErrors: [{ message: 'Creation failed' }],
+      });
       mockCreateOneRecord.mockRejectedValue(error);
 
       const { result } = renderHook(
@@ -130,8 +134,8 @@ describe('useWebhookForm', () => {
 
       await result.current.handleSave(formData);
 
-      expect(mockEnqueueSnackBar).toHaveBeenCalledWith('Creation failed', {
+      expect(mockEnqueueErrorSnackBar).toHaveBeenCalledWith({
-        variant: 'error',
+        apolloError: error,
       });
     });
 
@@ -216,7 +220,9 @@ describe('useWebhookForm', () => {
     });
 
     it('should handle update errors', async () => {
-      const error = new Error('Update failed');
+      const error = new ApolloError({
+        graphQLErrors: [{ message: 'Update failed' }],
+      });
       mockUpdateOneRecord.mockRejectedValue(error);
 
       const { result } = renderHook(
@@ -237,8 +243,8 @@ describe('useWebhookForm', () => {
 
       await result.current.handleSave(formData);
 
-      expect(mockEnqueueSnackBar).toHaveBeenCalledWith('Update failed', {
+      expect(mockEnqueueErrorSnackBar).toHaveBeenCalledWith({
-        variant: 'error',
+        apolloError: error,
       });
     });
   });
@@ -297,10 +303,9 @@ describe('useWebhookForm', () => {
       await result.current.deleteWebhook();
 
       expect(mockDeleteOneRecord).toHaveBeenCalledWith(webhookId);
-      expect(mockEnqueueSnackBar).toHaveBeenCalledWith(
+      expect(mockEnqueueSuccessSnackBar).toHaveBeenCalledWith({
-        'Webhook deleted successfully',
+        message: 'Webhook deleted successfully',
-        { variant: 'success' },
+      });
-      );
     });
 
     it('should handle deletion without webhookId', async () => {
@@ -311,14 +316,15 @@ describe('useWebhookForm', () => {
 
       await result.current.deleteWebhook();
 
-      expect(mockEnqueueSnackBar).toHaveBeenCalledWith(
+      expect(mockEnqueueErrorSnackBar).toHaveBeenCalledWith({
-        'Webhook ID is required for deletion',
+        message: 'Webhook ID is required for deletion',
-        { variant: 'error' },
+      });
-      );
     });
 
     it('should handle deletion errors', async () => {
-      const error = new Error('Deletion failed');
+      const error = new ApolloError({
+        graphQLErrors: [{ message: 'Deletion failed' }],
+      });
       mockDeleteOneRecord.mockRejectedValue(error);
 
       const { result } = renderHook(
@@ -332,8 +338,8 @@ describe('useWebhookForm', () => {
 
       await result.current.deleteWebhook();
 
-      expect(mockEnqueueSnackBar).toHaveBeenCalledWith('Deletion failed', {
+      expect(mockEnqueueErrorSnackBar).toHaveBeenCalledWith({
-        variant: 'error',
+        apolloError: error,
       });
     });
   });

packages/twenty-front/src/modules/settings/developers/hooks/useWebhookForm.ts

@@ -13,8 +13,9 @@ import {
   WebhookFormValues,
 } from '@/settings/developers/validation-schemas/webhookFormSchema';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { ApolloError } from '@apollo/client';
+import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { v4 } from 'uuid';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
@@ -28,7 +29,7 @@ type UseWebhookFormProps = {
 
 export const useWebhookForm = ({ webhookId, mode }: UseWebhookFormProps) => {
   const navigate = useNavigateSettings();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
 
   const isCreationMode = mode === WebhookFormMode.Create;
 
@@ -134,28 +135,29 @@ export const useWebhookForm = ({ webhookId, mode }: UseWebhookFormProps) => {
         ...webhookData,
       });
 
-      enqueueSnackBar(
+      const targetUrl = createdWebhook?.targetUrl
-        `Webhook ${createdWebhook?.targetUrl} created successfully`,
+        ? `${createdWebhook?.targetUrl}`
-        {
+        : '';
-          variant: SnackBarVariant.Success,
+
-        },
+      enqueueSuccessSnackBar({
-      );
+        message: t`Webhook ${targetUrl} created successfully`,
+      });
 
       navigate(
         createdWebhook ? SettingsPath.WebhookDetail : SettingsPath.Webhooks,
         createdWebhook ? { webhookId: createdWebhook.id } : undefined,
       );
     } catch (error) {
-      enqueueSnackBar((error as Error).message, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: error instanceof ApolloError ? error : undefined,
       });
     }
   };
 
   const handleUpdate = async (formValues: WebhookFormValues) => {
     if (!webhookId) {
-      enqueueSnackBar('Webhook ID is required for updates', {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`Webhook ID is required for updates`,
       });
       return;
     }
@@ -177,12 +179,14 @@ export const useWebhookForm = ({ webhookId, mode }: UseWebhookFormProps) => {
 
       formConfig.reset(formValues);
 
-      enqueueSnackBar(`Webhook ${webhookData.targetUrl} updated successfully`, {
+      const targetUrl = webhookData.targetUrl ? `${webhookData.targetUrl}` : '';
-        variant: SnackBarVariant.Success,
+
+      enqueueSuccessSnackBar({
+        message: t`Webhook ${targetUrl} updated successfully`,
       });
     } catch (error) {
-      enqueueSnackBar((error as Error).message, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: error instanceof ApolloError ? error : undefined,
       });
     }
   };
@@ -222,22 +226,22 @@ export const useWebhookForm = ({ webhookId, mode }: UseWebhookFormProps) => {
 
   const deleteWebhook = async () => {
     if (!webhookId) {
-      enqueueSnackBar('Webhook ID is required for deletion', {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`Webhook ID is required for deletion`,
       });
       return;
     }
 
     try {
       await deleteOneWebhook(webhookId);
-      enqueueSnackBar('Webhook deleted successfully', {
+      enqueueSuccessSnackBar({
-        variant: SnackBarVariant.Success,
+        message: t`Webhook deleted successfully`,
       });
 
       navigate(SettingsPath.Webhooks);
     } catch (error) {
-      enqueueSnackBar((error as Error).message, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: error instanceof ApolloError ? error : undefined,
       });
     }
   };

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx

@@ -9,13 +9,14 @@ import {
 } from '@/settings/integrations/database-connection/utils/editDatabaseConnection';
 import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { ApolloError } from '@apollo/client';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Section } from '@react-email/components';
 import pick from 'lodash.pick';
 import { FormProvider, useForm } from 'react-hook-form';
+import { H2Title, Info } from 'twenty-ui/display';
 import { z } from 'zod';
 import {
   RemoteServer,
@@ -24,7 +25,6 @@ import {
 } from '~/generated-metadata/graphql';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
-import { H2Title, Info } from 'twenty-ui/display';
 
 export const SettingsIntegrationEditDatabaseConnectionContent = ({
   connection,
@@ -37,7 +37,7 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
   databaseKey: string;
   tables: RemoteTable[];
 }) => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
   const navigate = useNavigateSettings();
 
   const editConnectionSchema = getEditionSchemaForForm(databaseKey);
@@ -87,8 +87,8 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
         connectionId: connection?.id,
       });
     } catch (error) {
-      enqueueSnackBar((error as Error).message, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: error instanceof ApolloError ? error : undefined,
       });
     }
   };

packages/twenty-front/src/modules/settings/roles/role/components/SettingsRole.tsx

@@ -12,7 +12,6 @@ import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDr
 import { settingsPersistedRoleFamilyState } from '@/settings/roles/states/settingsPersistedRoleFamilyState';
 import { settingsRolesIsLoadingState } from '@/settings/roles/states/settingsRolesIsLoadingState';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { TabList } from '@/ui/layout/tab-list/components/TabList';
@@ -81,7 +80,7 @@ export const SettingsRole = ({ roleId, isCreateMode }: SettingsRoleProps) => {
 
   const { loadCurrentUser } = useAuth();
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   if (!isDefined(settingsRolesIsLoading)) {
     return <></>;
@@ -129,8 +128,8 @@ export const SettingsRole = ({ roleId, isCreateMode }: SettingsRoleProps) => {
     );
 
     if (isDefined(dirtyFields.label) && dirtyFields.label === '') {
-      enqueueSnackBar(t`Role name cannot be empty`, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`Role name cannot be empty`,
       });
       return;
     }

packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOIdentitiesProvidersListCard.tsx

@@ -8,8 +8,8 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsCard } from '@/settings/components/SettingsCard';
 import { SettingsSSOIdentitiesProvidersListCardWrapper } from '@/settings/security/components/SSO/SettingsSSOIdentitiesProvidersListCardWrapper';
 import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProvidersState';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { ApolloError } from '@apollo/client';
 import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
@@ -26,7 +26,7 @@ const StyledLink = styled(Link, {
 `;
 
 export const SettingsSSOIdentitiesProvidersListCard = () => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
@@ -42,9 +42,9 @@ export const SettingsSSOIdentitiesProvidersListCard = () => {
     onCompleted: (data) => {
       setSSOIdentitiesProviders(data?.getSSOIdentityProviders ?? []);
     },
-    onError: (error: Error) => {
+    onError: (error: ApolloError) => {
-      enqueueSnackBar(error.message, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: error,
       });
     },
   });

packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOOIDCForm.tsx

@@ -1,16 +1,15 @@
 /* @license Enterprise */
 
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { Controller, useFormContext } from 'react-hook-form';
-import { REACT_APP_SERVER_BASE_URL } from '~/config';
-import { Button } from 'twenty-ui/input';
 import { H2Title, IconCopy } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
 
 const StyledInputsContainer = styled.div`
   display: flex;
@@ -37,7 +36,7 @@ const StyledButtonCopy = styled.div`
 
 export const SettingsSSOOIDCForm = () => {
   const { control } = useFormContext();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar } = useSnackBar();
   const theme = useTheme();
   const { t } = useLingui();
 
@@ -66,10 +65,12 @@ export const SettingsSSOOIDCForm = () => {
                 Icon={IconCopy}
                 title={t`Copy`}
                 onClick={() => {
-                  enqueueSnackBar(t`Authorized URL copied to clipboard`, {
+                  enqueueSuccessSnackBar({
-                    variant: SnackBarVariant.Success,
+                    message: t`Authorized URL copied to clipboard`,
-                    icon: <IconCopy size={theme.icon.size.md} />,
+                    options: {
-                    duration: 2000,
+                      icon: <IconCopy size={theme.icon.size.md} />,
+                      duration: 2000,
+                    },
                   });
                   navigator.clipboard.writeText(authorizedUrl);
                 }}
@@ -91,10 +92,12 @@ export const SettingsSSOOIDCForm = () => {
                 Icon={IconCopy}
                 title={t`Copy`}
                 onClick={() => {
-                  enqueueSnackBar(t`Redirect Url copied to clipboard`, {
+                  enqueueSuccessSnackBar({
-                    variant: SnackBarVariant.Success,
+                    message: t`Redirect Url copied to clipboard`,
-                    icon: <IconCopy size={theme.icon.size.md} />,
+                    options: {
-                    duration: 2000,
+                      icon: <IconCopy size={theme.icon.size.md} />,
+                      duration: 2000,
+                    },
                   });
                   navigator.clipboard.writeText(redirectionUrl);
                 }}

packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOSAMLForm.tsx

@@ -1,7 +1,6 @@
 /* @license Enterprise */
 
 import { parseSAMLMetadataFromXMLFile } from '@/settings/security/utils/parseSAMLMetadataFromXMLFile';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useTheme } from '@emotion/react';
@@ -9,9 +8,7 @@ import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { ChangeEvent, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { isDefined } from 'twenty-shared/utils';
-import { Button } from 'twenty-ui/input';
 import {
   H2Title,
   HorizontalSeparator,
@@ -20,7 +17,9 @@ import {
   IconDownload,
   IconUpload,
 } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
 
 const StyledUploadFileContainer = styled.div`
   align-items: center;
@@ -56,7 +55,7 @@ const StyledButtonCopy = styled.div`
 `;
 
 export const SettingsSSOSAMLForm = () => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar, enqueueSuccessSnackBar } = useSnackBar();
   const theme = useTheme();
   const { setValue, getValues, watch, trigger } = useFormContext();
   const { t } = useLingui();
@@ -67,9 +66,11 @@ export const SettingsSSOSAMLForm = () => {
       const samlMetadataParsed = parseSAMLMetadataFromXMLFile(text);
       e.target.value = '';
       if (!samlMetadataParsed.success) {
-        return enqueueSnackBar(t`Invalid File`, {
+        return enqueueErrorSnackBar({
-          variant: SnackBarVariant.Error,
+          message: t`Invalid File`,
-          duration: 2000,
+          options: {
+            duration: 2000,
+          },
         });
       }
       setValue('ssoURL', samlMetadataParsed.data.ssoUrl);
@@ -103,9 +104,11 @@ export const SettingsSSOSAMLForm = () => {
       `${REACT_APP_SERVER_BASE_URL}/auth/saml/metadata/${getValues('id')}`,
     );
     if (!response.ok) {
-      return enqueueSnackBar(t`Metadata file generation failed`, {
+      return enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`Metadata file generation failed`,
-        duration: 2000,
+        options: {
+          duration: 2000,
+        },
       });
     }
     const text = await response.text();
@@ -177,10 +180,12 @@ export const SettingsSSOSAMLForm = () => {
                 Icon={IconCopy}
                 title="Copy"
                 onClick={() => {
-                  enqueueSnackBar('ACS Url copied to clipboard', {
+                  enqueueSuccessSnackBar({
-                    variant: SnackBarVariant.Success,
+                    message: t`ACS Url copied to clipboard`,
-                    icon: <IconCopy size={theme.icon.size.md} />,
+                    options: {
-                    duration: 2000,
+                      icon: <IconCopy size={theme.icon.size.md} />,
+                      duration: 2000,
+                    },
                   });
                   navigator.clipboard.writeText(acsUrl);
                 }}
@@ -202,10 +207,12 @@ export const SettingsSSOSAMLForm = () => {
                 Icon={IconCopy}
                 title={t`Copy`}
                 onClick={() => {
-                  enqueueSnackBar(t`Entity ID copied to clipboard`, {
+                  enqueueSuccessSnackBar({
-                    variant: SnackBarVariant.Success,
+                    message: t`Entity ID copied to clipboard`,
-                    icon: <IconCopy size={theme.icon.size.md} />,
+                    options: {
-                    duration: 2000,
+                      icon: <IconCopy size={theme.icon.size.md} />,
+                      duration: 2000,
+                    },
                   });
                   navigator.clipboard.writeText(entityID);
                 }}

packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSecuritySSORowDropdownMenu.tsx

@@ -1,7 +1,6 @@
 import { useDeleteSSOIdentityProvider } from '@/settings/security/hooks/useDeleteSSOIdentityProvider';
 import { useUpdateSSOIdentityProvider } from '@/settings/security/hooks/useUpdateSSOIdentityProvider';
 import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProvidersState';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
@@ -24,7 +23,7 @@ export const SettingsSecuritySSORowDropdownMenu = ({
 }: SettingsSecuritySSORowDropdownMenuProps) => {
   const dropdownId = `settings-account-row-${SSOIdp.id}`;
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const { closeDropdown } = useCloseDropdown();
 
@@ -40,9 +39,11 @@ export const SettingsSecuritySSORowDropdownMenu = ({
       identityProviderId,
     });
     if (isDefined(result.errors)) {
-      enqueueSnackBar(t`Error deleting SSO Identity Provider`, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`Error deleting SSO Identity Provider`,
-        duration: 2000,
+        options: {
+          duration: 2000,
+        },
       });
     }
   };
@@ -58,9 +59,11 @@ export const SettingsSecuritySSORowDropdownMenu = ({
           : SsoIdentityProviderStatus.Active,
     });
     if (isDefined(result.errors)) {
-      enqueueSnackBar(t`Error editing SSO Identity Provider`, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`Error editing SSO Identity Provider`,
-        duration: 2000,
+        options: {
+          duration: 2000,
+        },
       });
     }
   };

packages/twenty-front/src/modules/settings/security/components/SettingsSecurityAuthProvidersOptionsList.tsx

@@ -2,8 +2,8 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
 import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProvidersState';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { ApolloError } from '@apollo/client';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilState, useRecoilValue } from 'recoil';
@@ -30,7 +30,7 @@ const StyledSettingsSecurityOptionsList = styled.div`
 export const SettingsSecurityAuthProvidersOptionsList = () => {
   const { t } = useLingui();
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
   const SSOIdentitiesProviders = useRecoilValue(SSOIdentitiesProvidersState);
   const authProviders = useRecoilValue(authProvidersState);
 
@@ -72,12 +72,9 @@ export const SettingsSecurityAuthProvidersOptionsList = () => {
       allAuthProvidersEnabled.filter((isAuthEnabled) => isAuthEnabled).length <=
         1
     ) {
-      return enqueueSnackBar(
+      return enqueueErrorSnackBar({
-        t`At least one authentication method must be enabled`,
+        message: t`At least one authentication method must be enabled`,
-        {
+      });
-          variant: SnackBarVariant.Error,
-        },
-      );
     }
 
     setCurrentWorkspace({
@@ -97,8 +94,8 @@ export const SettingsSecurityAuthProvidersOptionsList = () => {
         ...currentWorkspace,
         [key]: !currentWorkspace[key],
       });
-      enqueueSnackBar(err?.message, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: err instanceof ApolloError ? err : undefined,
       });
     });
   };
@@ -120,8 +117,8 @@ export const SettingsSecurityAuthProvidersOptionsList = () => {
         isPublicInviteLinkEnabled: value,
       });
     } catch (err: any) {
-      enqueueSnackBar(err?.message, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: err instanceof ApolloError ? err : undefined,
       });
     }
   };

packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsApprovedAccessDomainsListCard.tsx

@@ -7,8 +7,8 @@ import { SettingsListCard } from '@/settings/components/SettingsListCard';
 import { SettingsSecurityApprovedAccessDomainRowDropdownMenu } from '@/settings/security/components/approvedAccessDomains/SettingsSecurityApprovedAccessDomainRowDropdownMenu';
 import { SettingsSecurityApprovedAccessDomainValidationEffect } from '@/settings/security/components/approvedAccessDomains/SettingsSecurityApprovedAccessDomainValidationEffect';
 import { approvedAccessDomainsState } from '@/settings/security/states/ApprovedAccessDomainsState';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { ApolloError } from '@apollo/client';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilState } from 'recoil';
@@ -22,7 +22,7 @@ const StyledLink = styled(Link)`
 `;
 
 export const SettingsApprovedAccessDomainsListCard = () => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
   const navigate = useNavigate();
   const { t } = useLingui();
 
@@ -36,8 +36,8 @@ export const SettingsApprovedAccessDomainsListCard = () => {
       setApprovedAccessDomains(data?.getApprovedAccessDomains ?? []);
     },
     onError: (error: Error) => {
-      enqueueSnackBar(error.message, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: error instanceof ApolloError ? error : undefined,
       });
     },
   });

packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsSecurityApprovedAccessDomainRowDropdownMenu.tsx

@@ -1,10 +1,10 @@
 import { approvedAccessDomainsState } from '@/settings/security/states/ApprovedAccessDomainsState';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
+import { t } from '@lingui/core/macro';
 import { UnwrapRecoilValue, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { IconDotsVertical, IconTrash } from 'twenty-ui/display';
@@ -25,7 +25,7 @@ export const SettingsSecurityApprovedAccessDomainRowDropdownMenu = ({
     approvedAccessDomainsState,
   );
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const { closeDropdown } = useCloseDropdown();
 
@@ -47,9 +47,11 @@ export const SettingsSecurityApprovedAccessDomainRowDropdownMenu = ({
       },
     });
     if (isDefined(result.errors)) {
-      enqueueSnackBar('Error deleting approved access domain', {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`Could not delete approved access domain`,
-        duration: 2000,
+        options: {
+          duration: 2000,
+        },
       });
     }
   };

packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsSecurityApprovedAccessDomainValidationEffect.tsx

@@ -1,5 +1,5 @@
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { t } from '@lingui/core/macro';
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { isDefined } from 'twenty-shared/utils';
@@ -8,7 +8,7 @@ import { useValidateApprovedAccessDomainMutation } from '~/generated-metadata/gr
 export const SettingsSecurityApprovedAccessDomainValidationEffect = () => {
   const [validateApprovedAccessDomainMutation] =
     useValidateApprovedAccessDomainMutation();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
   const [searchParams] = useSearchParams();
   const approvedAccessDomainId = searchParams.get('wtdId');
   const validationToken = searchParams.get('validationToken');
@@ -23,15 +23,19 @@ export const SettingsSecurityApprovedAccessDomainValidationEffect = () => {
           },
         },
         onCompleted: () => {
-          enqueueSnackBar('Approved access domain validated', {
+          enqueueSuccessSnackBar({
-            dedupeKey: 'approved-access-domain-validation-dedupe-key',
+            message: t`Approved access domain validated`,
-            variant: SnackBarVariant.Success,
+            options: {
+              dedupeKey: 'approved-access-domain-validation-dedupe-key',
+            },
           });
         },
         onError: () => {
-          enqueueSnackBar('Error validating approved access domain', {
+          enqueueErrorSnackBar({
-            dedupeKey: 'approved-access-domain-validation-error-dedupe-key',
+            message: t`Error validating approved access domain`,
-            variant: SnackBarVariant.Error,
+            options: {
+              dedupeKey: 'approved-access-domain-validation-error-dedupe-key',
+            },
           });
         },
       });

packages/twenty-front/src/modules/settings/workspace/components/ToggleImpersonate.tsx

@@ -2,15 +2,15 @@ import { useRecoilState } from 'recoil';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { ApolloError } from '@apollo/client';
 import { t } from '@lingui/core/macro';
 import { IconLifebuoy } from 'twenty-ui/display';
 import { Card } from 'twenty-ui/layout';
 import { useUpdateWorkspaceMutation } from '~/generated-metadata/graphql';
 
 export const ToggleImpersonate = () => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const [currentWorkspace, setCurrentWorkspace] = useRecoilState(
     currentWorkspaceState,
@@ -35,8 +35,8 @@ export const ToggleImpersonate = () => {
         allowImpersonation: value,
       });
     } catch (err: any) {
-      enqueueSnackBar(err?.message, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: err instanceof ApolloError ? err : undefined,
       });
     }
   };

packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepper.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 import { useCallback, useState } from 'react';
 
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Modal } from '@/ui/layout/modal/components/Modal';
 
@@ -47,15 +46,15 @@ export const SpreadsheetImportStepper = ({
 
   const [uploadedFile, setUploadedFile] = useState<File | null>(null);
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const handleError = useCallback(
     (description: string) => {
-      enqueueSnackBar(description, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: description,
       });
     },
-    [enqueueSnackBar],
+    [enqueueErrorSnackBar],
   );
 
   const handleBack = useCallback(() => {

packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx

@@ -7,7 +7,6 @@ import { SpreadsheetMaxRecordImportCapacity } from '@/spreadsheet-import/constan
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import { useDownloadFakeRecords } from '@/spreadsheet-import/steps/components/UploadStep/hooks/useDownloadFakeRecords';
 import { readFileAsync } from '@/spreadsheet-import/utils/readFilesAsync';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { MainButton } from 'twenty-ui/input';
@@ -113,7 +112,7 @@ export const DropZone = ({ onContinue, isLoading }: DropZoneProps) => {
 
   const [loading, setLoading] = useState(false);
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const { downloadSample } = useDownloadFakeRecords();
 
@@ -132,9 +131,11 @@ export const DropZone = ({ onContinue, isLoading }: DropZoneProps) => {
     onDropRejected: (fileRejections) => {
       setLoading(false);
       fileRejections.forEach((fileRejection) => {
-        enqueueSnackBar(`${fileRejection.file.name} upload rejected`, {
+        enqueueErrorSnackBar({
-          detailedMessage: fileRejection.errors[0].message,
+          message: `${fileRejection.file.name} upload rejected`,
-          variant: SnackBarVariant.Error,
+          options: {
+            detailedMessage: fileRejection.errors[0].message,
+          },
         });
       });
     },

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/hooks/useSnackBar.ts

@@ -2,13 +2,17 @@ import { useCallback } from 'react';
 import { useRecoilCallback } from 'recoil';
 import { v4 as uuidv4 } from 'uuid';
 
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { SnackBarManagerScopeInternalContext } from '@/ui/feedback/snack-bar-manager/scopes/scope-internal-context/SnackBarManagerScopeInternalContext';
 import {
   snackBarInternalScopedState,
   SnackBarOptions,
 } from '@/ui/feedback/snack-bar-manager/states/snackBarInternalScopedState';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+import { ApolloError } from '@apollo/client';
+import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
+import { getErrorMessageFromApolloError } from '~/utils/get-error-message-from-apollo-error.util';
 
 export const useSnackBar = () => {
   const scopeId = useAvailableScopeIdOrThrow(
@@ -54,16 +58,91 @@ export const useSnackBar = () => {
     [scopeId],
   );
 
-  const enqueueSnackBar = useCallback(
+  const enqueueSuccessSnackBar = useCallback(
-    (message: string, options?: Omit<SnackBarOptions, 'message' | 'id'>) => {
+    ({
+      message,
+      options,
+    }: {
+      message: string;
+      options?: Omit<SnackBarOptions, 'message' | 'id'>;
+    }) => {
       setSnackBarQueue({
         id: uuidv4(),
         message,
         ...options,
+        variant: SnackBarVariant.Success,
       });
     },
     [setSnackBarQueue],
   );
 
-  return { handleSnackBarClose, enqueueSnackBar };
+  const enqueueInfoSnackBar = useCallback(
+    ({
+      message,
+      options,
+    }: {
+      message: string;
+      options?: Omit<SnackBarOptions, 'message' | 'id'>;
+    }) => {
+      setSnackBarQueue({
+        id: uuidv4(),
+        message,
+        ...options,
+        variant: SnackBarVariant.Info,
+      });
+    },
+    [setSnackBarQueue],
+  );
+
+  const enqueueWarningSnackBar = useCallback(
+    ({
+      message,
+      options,
+    }: {
+      message: string;
+      options?: Omit<SnackBarOptions, 'message' | 'id'>;
+    }) => {
+      setSnackBarQueue({
+        id: uuidv4(),
+        message,
+        ...options,
+        variant: SnackBarVariant.Warning,
+      });
+    },
+    [setSnackBarQueue],
+  );
+
+  const enqueueErrorSnackBar = useCallback(
+    ({
+      apolloError,
+      message,
+      options,
+    }: (
+      | { apolloError: ApolloError; message?: never }
+      | { apolloError?: never; message?: string }
+    ) & {
+      options?: Omit<SnackBarOptions, 'message' | 'id'>;
+    }) => {
+      const errorMessage = message
+        ? message
+        : apolloError
+          ? getErrorMessageFromApolloError(apolloError)
+          : t`An error occurred.`;
+      setSnackBarQueue({
+        id: uuidv4(),
+        message: errorMessage,
+        ...options,
+        variant: SnackBarVariant.Error,
+      });
+    },
+    [setSnackBarQueue],
+  );
+
+  return {
+    handleSnackBarClose,
+    enqueueSuccessSnackBar,
+    enqueueErrorSnackBar,
+    enqueueInfoSnackBar,
+    enqueueWarningSnackBar,
+  };
 };

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx

@@ -8,7 +8,6 @@ import { useBuildWorkspaceUrl } from '@/domain-manager/hooks/useBuildWorkspaceUr
 import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
 import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
@@ -20,6 +19,7 @@ import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { MULTI_WORKSPACE_DROPDOWN_ID } from '@/ui/navigation/navigation-drawer/constants/MultiWorkspaceDropdownId';
 import { multiWorkspaceDropdownState } from '@/ui/navigation/navigation-drawer/states/multiWorkspaceDropdownState';
 import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';
+import { ApolloError } from '@apollo/client';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
@@ -59,7 +59,7 @@ export const MultiWorkspaceDropdownDefaultComponents = () => {
   const { buildWorkspaceUrl } = useBuildWorkspaceUrl();
   const { closeDropdown } = useCloseDropdown();
   const { signOut } = useAuth();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
   const { colorScheme, colorSchemeList } = useColorScheme();
 
   const [signUpInNewWorkspaceMutation] = useSignUpInNewWorkspaceMutation();
@@ -86,9 +86,9 @@ export const MultiWorkspaceDropdownDefaultComponents = () => {
           '_blank',
         );
       },
-      onError: (error: Error) => {
+      onError: (error: ApolloError) => {
-        enqueueSnackBar(error.message, {
+        enqueueErrorSnackBar({
-          variant: SnackBarVariant.Error,
+          apolloError: error,
         });
       },
     });

packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerWebhookForm.tsx

@@ -1,10 +1,10 @@
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { FormRawJsonFieldInput } from '@/object-record/record-field/form-types/components/FormRawJsonFieldInput';
 import { getFunctionOutputSchema } from '@/serverless-functions/utils/getFunctionOutputSchema';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Select } from '@/ui/input/components/Select';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
 import { WorkflowWebhookTrigger } from '@/workflow/types/Workflow';
@@ -24,7 +24,6 @@ import { isDefined } from 'twenty-shared/utils';
 import { IconCopy, useIcons } from 'twenty-ui/display';
 import { useDebouncedCallback } from 'use-debounce';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
-import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 
 type WorkflowEditTriggerWebhookFormProps = {
   trigger: WorkflowWebhookTrigger;
@@ -50,7 +49,7 @@ export const WorkflowEditTriggerWebhookForm = ({
   trigger,
   triggerOptions,
 }: WorkflowEditTriggerWebhookFormProps) => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar } = useSnackBar();
   const theme = useTheme();
   const { t } = useLingui();
   const [errorMessages, setErrorMessages] = useState<FormErrorMessages>({});
@@ -75,9 +74,11 @@ export const WorkflowEditTriggerWebhookForm = ({
 
   const copyToClipboard = async () => {
     await navigator.clipboard.writeText(webhookUrl);
-    enqueueSnackBar(t`Copied to clipboard!`, {
+    enqueueSuccessSnackBar({
-      variant: SnackBarVariant.Success,
+      message: t`Copied to clipboard!`,
-      icon: <IconCopy size={theme.icon.size.md} />,
+      options: {
+        icon: <IconCopy size={theme.icon.size.md} />,
+      },
     });
   };
 

packages/twenty-front/src/modules/workspace/components/WorkspaceInviteLink.tsx

@@ -1,12 +1,11 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useLingui } from '@lingui/react/macro';
-import { Button } from 'twenty-ui/input';
 import { IconCopy, IconLink } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
 
 const StyledContainer = styled.div`
   align-items: center;
@@ -29,7 +28,7 @@ export const WorkspaceInviteLink = ({
   const { t } = useLingui();
   const theme = useTheme();
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar } = useSnackBar();
 
   return (
     <StyledContainer data-chromatic="ignore">
@@ -42,10 +41,12 @@ export const WorkspaceInviteLink = ({
         accent="blue"
         title={t`Copy link`}
         onClick={() => {
-          enqueueSnackBar(t`Link copied to clipboard`, {
+          enqueueSuccessSnackBar({
-            variant: SnackBarVariant.Success,
+            message: t`Link copied to clipboard`,
-            icon: <IconCopy size={theme.icon.size.md} />,
+            options: {
-            duration: 2000,
+              icon: <IconCopy size={theme.icon.size.md} />,
+              duration: 2000,
+            },
           });
           navigator.clipboard.writeText(inviteLink);
         }}

packages/twenty-front/src/modules/workspace/components/WorkspaceInviteTeam.tsx

@@ -4,7 +4,6 @@ import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { sanitizeEmailList } from '@/workspace/utils/sanitizeEmailList';
@@ -71,7 +70,7 @@ type FormInput = {
 export const WorkspaceInviteTeam = () => {
   const { t } = useLingui();
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
   const { sendInvitation } = useCreateWorkspaceInvitation();
 
   const { reset, handleSubmit, control, formState, watch } = useForm<FormInput>(
@@ -89,21 +88,19 @@ export const WorkspaceInviteTeam = () => {
     const emailsList = sanitizeEmailList(emails.split(','));
     const { data } = await sendInvitation({ emails: emailsList });
     if (isDefined(data) && data.sendInvitations.result.length > 0) {
-      enqueueSnackBar(
+      enqueueSuccessSnackBar({
-        `${data.sendInvitations.result.length} invitations sent`,
+        message: `${data.sendInvitations.result.length} invitations sent`,
-        {
+        options: {
-          variant: SnackBarVariant.Success,
           duration: 2000,
         },
-      );
+      });
       return;
     }
     if (isDefined(data) && !data.sendInvitations.success) {
-      data.sendInvitations.errors.forEach((error) => {
+      enqueueErrorSnackBar({
-        enqueueSnackBar(error, {
+        options: {
-          variant: SnackBarVariant.Error,
           duration: 5000,
-        });
+        },
       });
     }
   });

packages/twenty-front/src/pages/auth/PasswordReset.tsx

@@ -7,10 +7,10 @@ import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState
 import { PASSWORD_REGEX } from '@/auth/utils/passwordRegex';
 import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
 import { AppPath } from '@/types/AppPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import { Modal } from '@/ui/layout/modal/components/Modal';
+import { ApolloError } from '@apollo/client';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -78,7 +78,7 @@ const StyledMainButton = styled(MainButton)`
 
 export const PasswordReset = () => {
   const { t } = useLingui();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar, enqueueSuccessSnackBar } = useSnackBar();
 
   const workspacePublicData = useRecoilValue(workspacePublicDataState);
 
@@ -108,8 +108,8 @@ export const PasswordReset = () => {
     },
     skip: !passwordResetToken || isTokenValid,
     onError: (error) => {
-      enqueueSnackBar(error?.message ?? 'Token Invalid', {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: error,
       });
       navigate(AppPath.Index);
     },
@@ -137,15 +137,15 @@ export const PasswordReset = () => {
       });
 
       if (!data?.updatePasswordViaResetToken.success) {
-        enqueueSnackBar(t`There was an error while updating password.`, {
+        enqueueErrorSnackBar({
-          variant: SnackBarVariant.Error,
+          message: t`There was an error while updating password.`,
         });
         return;
       }
 
       if (isLoggedIn) {
-        enqueueSnackBar(t`Password has been updated`, {
+        enqueueSuccessSnackBar({
-          variant: SnackBarVariant.Success,
+          message: t`Password has been updated`,
         });
         navigate(AppPath.Index);
         return;
@@ -161,14 +161,9 @@ export const PasswordReset = () => {
       navigate(AppPath.Index);
     } catch (err) {
       logError(err);
-      enqueueSnackBar(
+      enqueueErrorSnackBar({
-        err instanceof Error
+        apolloError: err instanceof ApolloError ? err : undefined,
-          ? err.message
+      });
-          : t`An error occurred while updating password`,
-        {
-          variant: SnackBarVariant.Error,
-        },
-      );
     }
   };
 

packages/twenty-front/src/pages/onboarding/CreateProfile.tsx

@@ -15,12 +15,12 @@ import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { useSetNextOnboardingStatus } from '@/onboarding/hooks/useSetNextOnboardingStatus';
 import { ProfilePictureUploader } from '@/settings/profile/components/ProfilePictureUploader';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
+import { ApolloError } from '@apollo/client';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { H2Title } from 'twenty-ui/display';
@@ -59,7 +59,7 @@ type Form = z.infer<typeof validationSchema>;
 export const CreateProfile = () => {
   const { t } = useLingui();
   const setNextOnboardingStatus = useSetNextOnboardingStatus();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
   const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState(
     currentWorkspaceMemberState,
   );
@@ -131,15 +131,15 @@ export const CreateProfile = () => {
 
         setNextOnboardingStatus();
       } catch (error: any) {
-        enqueueSnackBar(error?.message, {
+        enqueueErrorSnackBar({
-          variant: SnackBarVariant.Error,
+          apolloError: error instanceof ApolloError ? error : undefined,
         });
       }
     },
     [
       currentWorkspaceMember?.id,
       setNextOnboardingStatus,
-      enqueueSnackBar,
+      enqueueErrorSnackBar,
       setCurrentWorkspaceMember,
       setCurrentUser,
       updateOneRecord,

packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx

@@ -13,10 +13,10 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItem';
 import { useSetNextOnboardingStatus } from '@/onboarding/hooks/useSetNextOnboardingStatus';
 import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import { Modal } from '@/ui/layout/modal/components/Modal';
+import { ApolloError } from '@apollo/client';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 import { motion } from 'framer-motion';
@@ -65,7 +65,7 @@ const StyledPendingCreationLoader = styled(motion.div)`
 
 export const CreateWorkspace = () => {
   const { t } = useLingui();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
   const setNextOnboardingStatus = useSetNextOnboardingStatus();
   const { refreshObjectMetadataItems } = useRefreshObjectMetadataItems();
 
@@ -127,14 +127,15 @@ export const CreateWorkspace = () => {
         setNextOnboardingStatus();
       } catch (error: any) {
         setPendingCreationLoaderStep(PendingCreationLoaderStep.None);
-        enqueueSnackBar(error?.message, {
+
-          variant: SnackBarVariant.Error,
+        enqueueErrorSnackBar({
+          apolloError: error instanceof ApolloError ? error : undefined,
         });
       }
     },
     [
       activateWorkspace,
-      enqueueSnackBar,
+      enqueueErrorSnackBar,
       loadCurrentUser,
       refreshObjectMetadataItems,
       setNextOnboardingStatus,

packages/twenty-front/src/pages/onboarding/InviteTeam.tsx

@@ -4,7 +4,6 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { calendarBookingPageIdState } from '@/client-config/states/calendarBookingPageIdState';
 import { useSetNextOnboardingStatus } from '@/onboarding/hooks/useSetNextOnboardingStatus';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import { Modal } from '@/ui/layout/modal/components/Modal';
@@ -65,7 +64,7 @@ type FormInput = z.infer<typeof validationSchema>;
 export const InviteTeam = () => {
   const { t } = useLingui();
   const theme = useTheme();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar } = useSnackBar();
   const { sendInvitation } = useCreateWorkspaceInvitation();
   const setNextOnboardingStatus = useSetNextOnboardingStatus();
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
@@ -120,10 +119,12 @@ export const InviteTeam = () => {
     if (isDefined(currentWorkspace?.inviteHash)) {
       const inviteLink = `${window.location.origin}/invite/${currentWorkspace?.inviteHash}`;
       navigator.clipboard.writeText(inviteLink);
-      enqueueSnackBar(t`Link copied to clipboard`, {
+      enqueueSuccessSnackBar({
-        variant: SnackBarVariant.Success,
+        message: t`Link copied to clipboard`,
-        icon: <IconCopy size={theme.icon.size.md} />,
+        options: {
-        duration: 2000,
+          icon: <IconCopy size={theme.icon.size.md} />,
+          duration: 2000,
+        },
       });
     }
   };
@@ -143,15 +144,17 @@ export const InviteTeam = () => {
         throw result.errors;
       }
       if (emails.length > 0) {
-        enqueueSnackBar(t`Invite link sent to email addresses`, {
+        enqueueSuccessSnackBar({
-          variant: SnackBarVariant.Success,
+          message: t`Invite link sent to email addresses`,
-          duration: 2000,
+          options: {
+            duration: 2000,
+          },
         });
       }
 
       setNextOnboardingStatus();
     },
-    [enqueueSnackBar, sendInvitation, setNextOnboardingStatus, t],
+    [enqueueSuccessSnackBar, sendInvitation, setNextOnboardingStatus, t],
   );
 
   const handleSkip = async () => {

packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx

@@ -12,7 +12,6 @@ import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
@@ -23,6 +22,7 @@ import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
 import { WorkspaceInviteLink } from '@/workspace/components/WorkspaceInviteLink';
 import { WorkspaceInviteTeam } from '@/workspace/components/WorkspaceInviteTeam';
+import { ApolloError } from '@apollo/client';
 import { formatDistanceToNow } from 'date-fns';
 import { isDefined } from 'twenty-shared/utils';
 import {
@@ -94,7 +94,7 @@ const StyledNoMembers = styled(TableCell)`
 
 export const SettingsWorkspaceMembers = () => {
   const { t } = useLingui();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
   const theme = useTheme();
   const [workspaceMemberToDelete, setWorkspaceMemberToDelete] = useState<
     string | undefined
@@ -127,9 +127,9 @@ export const SettingsWorkspaceMembers = () => {
   };
 
   useGetWorkspaceInvitationsQuery({
-    onError: (error: Error) => {
+    onError: (error: ApolloError) => {
-      enqueueSnackBar(error.message, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: error,
       });
     },
     onCompleted: (data) => {
@@ -140,9 +140,11 @@ export const SettingsWorkspaceMembers = () => {
   const handleRemoveWorkspaceInvitation = async (appTokenId: string) => {
     const result = await deleteWorkspaceInvitation({ appTokenId });
     if (isDefined(result.errors)) {
-      enqueueSnackBar(t`Error deleting invitation`, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`Error deleting invitation`,
-        duration: 2000,
+        options: {
+          duration: 2000,
+        },
       });
     }
   };
@@ -150,9 +152,11 @@ export const SettingsWorkspaceMembers = () => {
   const handleResendWorkspaceInvitation = async (appTokenId: string) => {
     const result = await resendInvitation({ appTokenId });
     if (isDefined(result.errors)) {
-      enqueueSnackBar(t`Error resending invitation`, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`Error resending invitation`,
-        duration: 2000,
+        options: {
+          duration: 2000,
+        },
       });
     }
   };

packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx

@@ -11,20 +11,20 @@ import {
   settingsDataModelObjectAboutFormSchema,
 } from '@/settings/data-model/validation-schemas/settingsDataModelObjectAboutFormSchema';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { ApolloError } from '@apollo/client';
 import { useLingui } from '@lingui/react/macro';
-import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { useState } from 'react';
-import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 import { H2Title } from 'twenty-ui/display';
 import { Section } from 'twenty-ui/layout';
-import { useState } from 'react';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const SettingsNewObject = () => {
   const { t } = useLingui();
   const navigate = useNavigateSettings();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
   const [isLoading, setIsLoading] = useState(false);
   const { createOneObjectMetadataItem } = useCreateOneObjectMetadataItem();
 
@@ -56,8 +56,8 @@ export const SettingsNewObject = () => {
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(error);
-      enqueueSnackBar((error as Error).message, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: error instanceof ApolloError ? error : undefined,
       });
     } finally {
       setIsLoading(false);

packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx

@@ -23,9 +23,9 @@ import { settingsFieldFormSchema } from '@/settings/data-model/fields/forms/vali
 import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
 import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { ApolloError } from '@apollo/client';
 import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { H2Title, IconArchive, IconArchiveOff } from 'twenty-ui/display';
@@ -47,7 +47,7 @@ export const SettingsObjectFieldEdit = () => {
   const navigateApp = useNavigateApp();
   const { t } = useLingui();
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const { objectNamePlural = '', fieldName = '' } = useParams();
   const { findObjectMetadataItemByNamePlural } =
@@ -147,8 +147,8 @@ export const SettingsObjectFieldEdit = () => {
         });
       }
     } catch (error) {
-      enqueueSnackBar((error as Error).message, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: error instanceof ApolloError ? error : undefined,
       });
     }
   };

packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx

@@ -13,7 +13,6 @@ import { settingsFieldFormSchema } from '@/settings/data-model/fields/forms/vali
 import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
 import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { View } from '@/views/types/View';
@@ -51,7 +50,7 @@ export const SettingsObjectNewFieldConfigure = () => {
   const fieldType =
     (searchParams.get('fieldType') as SettingsFieldType) ||
     FieldMetadataType.TEXT;
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const { findActiveObjectMetadataItemByNamePlural } =
     useFilteredObjectMetadataItems();
@@ -161,14 +160,11 @@ export const SettingsObjectNewFieldConfigure = () => {
         'duplicate key value violates unique constraint "IndexOnNameObjectMetadataIdAndWorkspaceIdUnique"',
       );
 
-      enqueueSnackBar(
+      enqueueErrorSnackBar({
-        isDuplicateFieldNameInObject
+        message: isDuplicateFieldNameInObject
           ? t`Please use different names for your source and destination fields`
-          : (error as Error).message,
+          : undefined,
-        {
+      });
-          variant: SnackBarVariant.Error,
-        },
-      );
     }
   };
   if (!activeObjectMetadataItem) return null;

packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx

@@ -17,7 +17,6 @@ import { ApiKey } from '@/settings/developers/types/api-key/ApiKey';
 import { computeNewExpirationDate } from '@/settings/developers/utils/computeNewExpirationDate';
 import { formatExpiration } from '@/settings/developers/utils/formatExpiration';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
@@ -50,7 +49,7 @@ const REGENERATE_API_KEY_MODAL_ID = 'regenerate-api-key-modal';
 
 export const SettingsDevelopersApiKeyDetail = () => {
   const { t } = useLingui();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
   const { openModal } = useModal();
   const [isLoading, setIsLoading] = useState(false);
 
@@ -97,9 +96,7 @@ export const SettingsDevelopersApiKeyDetail = () => {
         navigate(SettingsPath.APIs);
       }
     } catch (err) {
-      enqueueSnackBar(t`Error deleting api key: ${err}`, {
+      enqueueErrorSnackBar({ message: t`Error deleting api key.` });
-        variant: SnackBarVariant.Error,
-      });
     } finally {
       setIsLoading(false);
     }
@@ -149,8 +146,8 @@ export const SettingsDevelopersApiKeyDetail = () => {
         }
       }
     } catch (err) {
-      enqueueSnackBar(t`Error regenerating api key: ${err}`, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`Error regenerating api key.`,
       });
     } finally {
       setIsLoading(false);

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx

@@ -17,15 +17,15 @@ import { useIsSettingsIntegrationEnabled } from '@/settings/integrations/hooks/u
 import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
 import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { ApolloError } from '@apollo/client';
+import { H2Title } from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
 import { CreateRemoteServerInput } from '~/generated-metadata/graphql';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
-import { H2Title } from 'twenty-ui/display';
-import { Section } from 'twenty-ui/layout';
 
 const createRemoteServerInputPostgresSchema =
   settingsIntegrationPostgreSQLConnectionFormSchema.transform<CreateRemoteServerInput>(
@@ -79,7 +79,7 @@ export const SettingsIntegrationNewDatabaseConnection = () => {
   );
 
   const { createOneDatabaseConnection } = useCreateOneDatabaseConnection();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
 
   const isIntegrationEnabled = useIsSettingsIntegrationEnabled(databaseKey);
 
@@ -131,8 +131,8 @@ export const SettingsIntegrationNewDatabaseConnection = () => {
         connectionId,
       });
     } catch (error) {
-      enqueueSnackBar((error as Error).message, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: error instanceof ApolloError ? error : undefined,
       });
     }
   };

packages/twenty-front/src/pages/settings/security/SettingsSecurityApprovedAccessDomain.tsx

@@ -1,10 +1,10 @@
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { ApolloError } from '@apollo/client';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { Controller, useForm } from 'react-hook-form';
@@ -20,7 +20,7 @@ export const SettingsSecurityApprovedAccessDomain = () => {
 
   const { t } = useLingui();
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
 
   const [createApprovedAccessDomain] = useCreateApprovedAccessDomainMutation();
 
@@ -62,20 +62,20 @@ export const SettingsSecurityApprovedAccessDomain = () => {
           },
         },
         onCompleted: () => {
-          enqueueSnackBar(t`Please check your email for a verification link.`, {
+          enqueueSuccessSnackBar({
-            variant: SnackBarVariant.Success,
+            message: t`Please check your email for a verification link.`,
           });
           navigate(SettingsPath.Security);
         },
         onError: (error) => {
-          enqueueSnackBar((error as Error).message, {
+          enqueueErrorSnackBar({
-            variant: SnackBarVariant.Error,
+            apolloError: error instanceof ApolloError ? error : undefined,
           });
         },
       });
     } catch (error) {
-      enqueueSnackBar((error as Error).message, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: error instanceof ApolloError ? error : undefined,
       });
     }
   };

packages/twenty-front/src/pages/settings/security/SettingsSecuritySSOIdentifyProvider.tsx

@@ -7,21 +7,21 @@ import { SettingSecurityNewSSOIdentityFormValues } from '@/settings/security/typ
 import { sSOIdentityProviderDefaultValues } from '@/settings/security/utils/sSOIdentityProviderDefaultValues';
 import { SSOIdentitiesProvidersParamsSchema } from '@/settings/security/validation-schemas/SSOIdentityProviderSchema';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { ApolloError } from '@apollo/client';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import pick from 'lodash.pick';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
-import { t } from '@lingui/core/macro';
 
 export const SettingsSecuritySSOIdentifyProvider = () => {
   const navigate = useNavigateSettings();
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar } = useSnackBar();
   const { createSSOIdentityProvider } = useCreateSSOIdentityProvider();
 
   const form = useForm<SettingSecurityNewSSOIdentityFormValues>({
@@ -48,8 +48,8 @@ export const SettingsSecuritySSOIdentifyProvider = () => {
 
       navigate(SettingsPath.Security);
     } catch (error) {
-      enqueueSnackBar((error as Error).message, {
+      enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        apolloError: error instanceof ApolloError ? error : undefined,
       });
     }
   };

packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionDetail.tsx

@@ -8,17 +8,18 @@ import { usePublishOneServerlessFunction } from '@/settings/serverless-functions
 import { useServerlessFunctionUpdateFormState } from '@/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState';
 import { useUpdateOneServerlessFunction } from '@/settings/serverless-functions/hooks/useUpdateOneServerlessFunction';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { TabList } from '@/ui/layout/tab-list/components/TabList';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { ApolloError } from '@apollo/client';
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { isDefined } from 'twenty-shared/utils';
 import { IconCode, IconSettings, IconTestPipe } from 'twenty-ui/display';
 import { useDebouncedCallback } from 'use-debounce';
+import { getErrorMessageFromApolloError } from '~/utils/get-error-message-from-apollo-error.util';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
@@ -26,7 +27,7 @@ const SERVERLESS_FUNCTION_DETAIL_ID = 'serverless-function-detail';
 
 export const SettingsServerlessFunctionDetail = () => {
   const { serverlessFunctionId = '' } = useParams();
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueErrorSnackBar, enqueueSuccessSnackBar } = useSnackBar();
   const [activeTabId, setActiveTabId] = useRecoilComponentStateV2(
     activeTabIdComponentState,
     SERVERLESS_FUNCTION_DETAIL_ID,
@@ -88,12 +89,9 @@ export const SettingsServerlessFunctionDetail = () => {
       }));
       await handleSave();
     } catch (err) {
-      enqueueSnackBar(
+      enqueueErrorSnackBar({
-        (err as Error)?.message || 'An error occurred while reset function',
+        apolloError: err instanceof ApolloError ? err : undefined,
-        {
+      });
-          variant: SnackBarVariant.Error,
-        },
-      );
     }
   };
 
@@ -102,17 +100,16 @@ export const SettingsServerlessFunctionDetail = () => {
       await publishOneServerlessFunction({
         id: serverlessFunctionId,
       });
-      enqueueSnackBar(`New function version has been published`, {
+      enqueueSuccessSnackBar({
-        variant: SnackBarVariant.Success,
+        message: `New function version has been published`,
       });
     } catch (err) {
-      enqueueSnackBar(
+      enqueueErrorSnackBar({
-        (err as Error)?.message ||
+        message:
-          'An error occurred while publishing new version',
+          err instanceof ApolloError
-        {
+            ? getErrorMessageFromApolloError(err)
-          variant: SnackBarVariant.Error,
+            : 'An error occurred while publishing new version',
-        },
+      });
-      );
     }
   };
 

packages/twenty-front/src/pages/settings/workspace/SettingsCustomDomainRecords.tsx

@@ -1,17 +1,16 @@
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Table } from '@/ui/layout/table/components/Table';
 import { TableBody } from '@/ui/layout/table/components/TableBody';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
+import { IconCopy } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
 import { useDebouncedCallback } from 'use-debounce';
 import { CustomDomainValidRecords } from '~/generated/graphql';
-import { useTheme } from '@emotion/react';
-import { Button } from 'twenty-ui/input';
-import { IconCopy } from 'twenty-ui/display';
 
 const StyledTable = styled(Table)`
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
@@ -46,7 +45,7 @@ export const SettingsCustomDomainRecords = ({
 }: {
   records: CustomDomainValidRecords['records'];
 }) => {
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar } = useSnackBar();
 
   const theme = useTheme();
 
@@ -54,9 +53,11 @@ export const SettingsCustomDomainRecords = ({
 
   const copyToClipboard = (value: string) => {
     navigator.clipboard.writeText(value);
-    enqueueSnackBar(t`Copied to clipboard!`, {
+    enqueueSuccessSnackBar({
-      variant: SnackBarVariant.Success,
+      message: t`Copied to clipboard!`,
-      icon: <IconCopy size={theme.icon.size.md} />,
+      options: {
+        icon: <IconCopy size={theme.icon.size.md} />,
+      },
     });
   };
 

packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx

@@ -6,7 +6,6 @@ import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirect
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
@@ -60,7 +59,7 @@ export const SettingsDomain = () => {
     })
     .required();
 
-  const { enqueueSnackBar } = useSnackBar();
+  const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
   const [updateWorkspace] = useUpdateWorkspaceMutation();
   const { redirectToWorkspaceDomain } = useRedirectToWorkspaceDomain();
 
@@ -105,11 +104,11 @@ export const SettingsDomain = () => {
           customDomain:
             customDomain && customDomain.length > 0 ? customDomain : null,
         });
-        enqueueSnackBar(t`Custom domain updated`, {
+        enqueueSuccessSnackBar({
-          variant: SnackBarVariant.Success,
+          message: t`Custom domain updated`,
         });
       },
-      onError: (error) => {
+      onError: (error: ApolloError) => {
         if (
           error instanceof ApolloError &&
           error.graphQLErrors[0]?.extensions?.code === 'CONFLICT'
@@ -119,8 +118,8 @@ export const SettingsDomain = () => {
             message: t`Subdomain already taken`,
           });
         }
-        enqueueSnackBar((error as Error).message, {
+        enqueueErrorSnackBar({
-          variant: SnackBarVariant.Error,
+          apolloError: error,
         });
       },
     });
@@ -136,7 +135,7 @@ export const SettingsDomain = () => {
           subdomain,
         },
       },
-      onError: (error) => {
+      onError: (error: ApolloError) => {
         if (
           error instanceof ApolloError &&
           error.graphQLErrors[0]?.extensions?.code === 'CONFLICT'
@@ -147,8 +146,8 @@ export const SettingsDomain = () => {
             message: t`Subdomain already taken`,
           });
         }
-        enqueueSnackBar((error as Error).message, {
+        enqueueErrorSnackBar({
-          variant: SnackBarVariant.Error,
+          apolloError: error,
         });
       },
       onCompleted: async () => {
@@ -163,8 +162,8 @@ export const SettingsDomain = () => {
           subdomain,
         });
 
-        enqueueSnackBar(t`Subdomain updated`, {
+        enqueueSuccessSnackBar({
-          variant: SnackBarVariant.Success,
+          message: t`Subdomain updated`,
         });
 
         await redirectToWorkspaceDomain(currentUrl.toString());
@@ -179,14 +178,14 @@ export const SettingsDomain = () => {
       subdomainValue === currentWorkspace?.subdomain &&
       customDomainValue === currentWorkspace?.customDomain
     ) {
-      return enqueueSnackBar(t`No change detected`, {
+      return enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`No change detected`,
       });
     }
 
     if (!values || !currentWorkspace) {
-      return enqueueSnackBar(t`Invalid form values`, {
+      return enqueueErrorSnackBar({
-        variant: SnackBarVariant.Error,
+        message: t`Invalid form values`,
       });
     }
 

packages/twenty-front/src/utils/get-error-message-from-apollo-error.util.ts

@@ -0,0 +1,14 @@
+import { ApolloError } from '@apollo/client';
+import { t } from '@lingui/core/macro';
+import { isDefined } from 'twenty-shared/utils';
+
+export const getErrorMessageFromApolloError = (error: ApolloError): string => {
+  if (!isDefined(error.graphQLErrors?.[0]?.extensions?.userFriendlyMessage)) {
+    return t`An error occurred.`;
+  }
+
+  return (
+    (error.graphQLErrors[0].extensions?.userFriendlyMessage as string) ??
+    t`An error occurred.`
+  );
+};

packages/twenty-server/src/engine/core-modules/approved-access-domain/approved-access-domain-exception-filter.ts

@@ -17,7 +17,11 @@ export class ApprovedAccessDomainExceptionFilter implements ExceptionFilter {
       case ApprovedAccessDomainExceptionCode.APPROVED_ACCESS_DOMAIN_VALIDATION_TOKEN_INVALID:
       case ApprovedAccessDomainExceptionCode.APPROVED_ACCESS_DOMAIN_ALREADY_VALIDATED:
       case ApprovedAccessDomainExceptionCode.APPROVED_ACCESS_DOMAIN_MUST_BE_A_COMPANY_DOMAIN:
-        throw new ForbiddenError(exception.message);
+        throw new ForbiddenError(exception.message, {
+          extensions: {
+            userFriendlyMessage: exception.userFriendlyMessage,
+          },
+        });
       default: {
         const _exhaustiveCheck: never = exception.code;
 

packages/twenty-server/src/engine/core-modules/approved-access-domain/approved-access-domain.exception.ts

@@ -2,8 +2,12 @@ import { CustomException } from 'src/utils/custom-exception';
 
 export class ApprovedAccessDomainException extends CustomException {
   declare code: ApprovedAccessDomainExceptionCode;
-  constructor(message: string, code: ApprovedAccessDomainExceptionCode) {
+  constructor(
-    super(message, code);
+    message: string,
+    code: ApprovedAccessDomainExceptionCode,
+    { userFriendlyMessage }: { userFriendlyMessage?: string } = {},
+  ) {
+    super(message, code, userFriendlyMessage);
   }
 }
 

packages/twenty-server/src/engine/core-modules/approved-access-domain/services/approved-access-domain.service.ts

@@ -3,6 +3,7 @@ import { InjectRepository } from '@nestjs/typeorm';
 
 import crypto from 'crypto';
 
+import { t } from '@lingui/core/macro';
 import { render } from '@react-email/render';
 import { SendApprovedAccessDomainValidation } from 'twenty-emails';
 import { APP_LOCALES } from 'twenty-shared/translations';
@@ -18,8 +19,8 @@ import { DomainManagerService } from 'src/engine/core-modules/domain-manager/ser
 import { EmailService } from 'src/engine/core-modules/email/email.service';
 import { TwentyConfigService } from 'src/engine/core-modules/twenty-config/twenty-config.service';
 import { Workspace } from 'src/engine/core-modules/workspace/workspace.entity';
-import { isWorkDomain } from 'src/utils/is-work-email';
 import { WorkspaceMemberWorkspaceEntity } from 'src/modules/workspace-member/standard-objects/workspace-member.workspace-entity';
+import { isWorkDomain } from 'src/utils/is-work-email';
 
 @Injectable()
 // eslint-disable-next-line @nx/workspace-inject-workspace-repository
@@ -42,6 +43,9 @@ export class ApprovedAccessDomainService {
       throw new ApprovedAccessDomainException(
         'Approved access domain has already been validated',
         ApprovedAccessDomainExceptionCode.APPROVED_ACCESS_DOMAIN_ALREADY_VERIFIED,
+        {
+          userFriendlyMessage: t`Approved access domain has already been validated`,
+        },
       );
     }
 
@@ -49,6 +53,9 @@ export class ApprovedAccessDomainService {
       throw new ApprovedAccessDomainException(
         'Approved access domain does not match email domain',
         ApprovedAccessDomainExceptionCode.APPROVED_ACCESS_DOMAIN_DOES_NOT_MATCH_DOMAIN_EMAIL,
+        {
+          userFriendlyMessage: t`Approved access domain does not match email domain`,
+        },
       );
     }
 
@@ -118,6 +125,9 @@ export class ApprovedAccessDomainService {
       throw new ApprovedAccessDomainException(
         'Approved access domain has already been validated',
         ApprovedAccessDomainExceptionCode.APPROVED_ACCESS_DOMAIN_ALREADY_VALIDATED,
+        {
+          userFriendlyMessage: t`Approved access domain has already been validated`,
+        },
       );
     }
 

packages/twenty-server/src/engine/core-modules/auth/auth.exception.ts

@@ -2,8 +2,12 @@ import { CustomException } from 'src/utils/custom-exception';
 
 export class AuthException extends CustomException {
   declare code: AuthExceptionCode;
-  constructor(message: string, code: AuthExceptionCode) {
+  constructor(
-    super(message, code);
+    message: string,
+    code: AuthExceptionCode,
+    { userFriendlyMessage }: { userFriendlyMessage?: string } = {},
+  ) {
+    super(message, code, userFriendlyMessage);
   }
 }
 

packages/twenty-server/src/engine/core-modules/auth/filters/auth-graphql-api-exception.filter.ts

@@ -1,5 +1,7 @@
 import { Catch, ExceptionFilter } from '@nestjs/common';
 
+import { t } from '@lingui/core/macro';
+
 import {
   AuthException,
   AuthExceptionCode,
@@ -16,26 +18,39 @@ export class AuthGraphqlApiExceptionFilter implements ExceptionFilter {
   catch(exception: AuthException) {
     switch (exception.code) {
       case AuthExceptionCode.CLIENT_NOT_FOUND:
-        throw new NotFoundError(exception.message);
+        throw new NotFoundError(exception.message, {
+          userFriendlyMessage: exception.userFriendlyMessage,
+        });
       case AuthExceptionCode.INVALID_INPUT:
-        throw new UserInputError(exception.message);
+        throw new UserInputError(exception.message, {
+          userFriendlyMessage: exception.userFriendlyMessage,
+        });
       case AuthExceptionCode.FORBIDDEN_EXCEPTION:
       case AuthExceptionCode.INSUFFICIENT_SCOPES:
       case AuthExceptionCode.OAUTH_ACCESS_DENIED:
       case AuthExceptionCode.SSO_AUTH_FAILED:
       case AuthExceptionCode.USE_SSO_AUTH:
       case AuthExceptionCode.SIGNUP_DISABLED:
-      case AuthExceptionCode.GOOGLE_API_AUTH_DISABLED:
-      case AuthExceptionCode.MICROSOFT_API_AUTH_DISABLED:
       case AuthExceptionCode.MISSING_ENVIRONMENT_VARIABLE:
       case AuthExceptionCode.INVALID_JWT_TOKEN_TYPE:
-        throw new ForbiddenError(exception.message);
+        throw new ForbiddenError(exception.message, {
+          userFriendlyMessage: exception.userFriendlyMessage,
+        });
+      case AuthExceptionCode.GOOGLE_API_AUTH_DISABLED:
+      case AuthExceptionCode.MICROSOFT_API_AUTH_DISABLED:
+        throw new ForbiddenError(exception.message, {
+          userFriendlyMessage: t`Authentication is not enabled with this provider.`,
+        });
       case AuthExceptionCode.EMAIL_NOT_VERIFIED:
       case AuthExceptionCode.INVALID_DATA:
         throw new ForbiddenError(exception.message, {
           subCode: AuthExceptionCode.EMAIL_NOT_VERIFIED,
+          userFriendlyMessage: t`Email is not verified.`,
         });
       case AuthExceptionCode.UNAUTHENTICATED:
+        throw new AuthenticationError(exception.message, {
+          userFriendlyMessage: t`You must be authenticated to perform this action.`,
+        });
       case AuthExceptionCode.USER_NOT_FOUND:
       case AuthExceptionCode.WORKSPACE_NOT_FOUND:
         throw new AuthenticationError(exception.message);

packages/twenty-server/src/engine/core-modules/auth/services/auth.service.ts

@@ -169,6 +169,9 @@ export class AuthService {
       throw new AuthException(
         'Wrong password',
         AuthExceptionCode.FORBIDDEN_EXCEPTION,
+        {
+          userFriendlyMessage: t`Wrong password`,
+        },
       );
     }
 

packages/twenty-server/src/engine/core-modules/auth/services/sign-in-up.service.ts

@@ -2,6 +2,7 @@ import { HttpService } from '@nestjs/axios';
 import { Injectable } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 
+import { t } from '@lingui/core/macro';
 import { TWENTY_ICONS_BASE_URL } from 'twenty-shared/constants';
 import { WorkspaceActivationStatus } from 'twenty-shared/workspace';
 import { Repository } from 'typeorm';
@@ -67,6 +68,9 @@ export class SignInUpService {
       throw new AuthException(
         'Email is required',
         AuthExceptionCode.INVALID_INPUT,
+        {
+          userFriendlyMessage: t`Email is required`,
+        },
       );
     }
 
@@ -111,6 +115,9 @@ export class SignInUpService {
       throw new AuthException(
         'Password too weak',
         AuthExceptionCode.INVALID_INPUT,
+        {
+          userFriendlyMessage: t`Password too weak`,
+        },
       );
     }
 
@@ -130,6 +137,9 @@ export class SignInUpService {
       throw new AuthException(
         'Wrong password',
         AuthExceptionCode.FORBIDDEN_EXCEPTION,
+        {
+          userFriendlyMessage: t`Wrong password`,
+        },
       );
     }
   }
@@ -153,6 +163,9 @@ export class SignInUpService {
       throw new AuthException(
         'Email is required',
         AuthExceptionCode.INVALID_INPUT,
+        {
+          userFriendlyMessage: t`Email is required`,
+        },
       );
     }
 
@@ -194,6 +207,9 @@ export class SignInUpService {
       throw new AuthException(
         'Workspace is not ready to welcome new members',
         AuthExceptionCode.FORBIDDEN_EXCEPTION,
+        {
+          userFriendlyMessage: t`Workspace is not ready to welcome new members`,
+        },
       );
     }
 
@@ -207,6 +223,9 @@ export class SignInUpService {
       throw new AuthException(
         'User is not part of the workspace',
         AuthExceptionCode.FORBIDDEN_EXCEPTION,
+        {
+          userFriendlyMessage: t`User is not part of the workspace`,
+        },
       );
     }
   }
@@ -340,6 +359,9 @@ export class SignInUpService {
       throw new AuthException(
         'Email is required',
         AuthExceptionCode.INVALID_INPUT,
+        {
+          userFriendlyMessage: t`Email is required`,
+        },
       );
     }
 

packages/twenty-server/src/engine/core-modules/email-verification/email-verification-exception-filter.util.ts

@@ -1,5 +1,7 @@
 import { Catch, ExceptionFilter } from '@nestjs/common';
 
+import { t } from '@lingui/core/macro';
+
 import {
   EmailVerificationException,
   EmailVerificationExceptionCode,
@@ -13,17 +15,32 @@ import {
 export class EmailVerificationExceptionFilter implements ExceptionFilter {
   catch(exception: EmailVerificationException) {
     switch (exception.code) {
+      case EmailVerificationExceptionCode.TOKEN_EXPIRED:
+        throw new ForbiddenError(exception.message, {
+          subCode: exception.code,
+          userFriendlyMessage: t`Request has expired, please try again.`,
+        });
       case EmailVerificationExceptionCode.INVALID_TOKEN:
       case EmailVerificationExceptionCode.INVALID_APP_TOKEN_TYPE:
-      case EmailVerificationExceptionCode.TOKEN_EXPIRED:
       case EmailVerificationExceptionCode.RATE_LIMIT_EXCEEDED:
         throw new ForbiddenError(exception.message, {
           subCode: exception.code,
         });
       case EmailVerificationExceptionCode.EMAIL_MISSING:
+        throw new UserInputError(exception.message, {
+          subCode: exception.code,
+        });
       case EmailVerificationExceptionCode.EMAIL_ALREADY_VERIFIED:
-      case EmailVerificationExceptionCode.INVALID_EMAIL:
+        throw new UserInputError(exception.message, {
+          subCode: exception.code,
+          userFriendlyMessage: t`Email already verified.`,
+        });
       case EmailVerificationExceptionCode.EMAIL_VERIFICATION_NOT_REQUIRED:
+        throw new UserInputError(exception.message, {
+          subCode: exception.code,
+          userFriendlyMessage: t`Email verification not required.`,
+        });
+      case EmailVerificationExceptionCode.INVALID_EMAIL:
         throw new UserInputError(exception.message, {
           subCode: exception.code,
         });

packages/twenty-server/src/engine/core-modules/graphql/hooks/use-graphql-error-handler.hook.ts

@@ -4,6 +4,7 @@ import {
   OnExecuteDoneHookResultOnNextHook,
   Plugin,
 } from '@envelop/core';
+import { t } from '@lingui/core/macro';
 import { GraphQLError, Kind, OperationDefinitionNode, print } from 'graphql';
 
 import { GraphQLContext } from 'src/engine/api/graphql/graphql-config/interfaces/graphql-context.interface';
@@ -24,8 +25,7 @@ import {
 
 const DEFAULT_EVENT_ID_KEY = 'exceptionEventId';
 const SCHEMA_VERSION_HEADER = 'x-schema-version';
-const SCHEMA_MISMATCH_ERROR =
+const SCHEMA_MISMATCH_ERROR = 'Schema version mismatch.';
-  'Your workspace has been updated with a new data model. Please refresh the page.';
 
 type GraphQLErrorHandlerHookOptions = {
   metricsService: MetricsService;
@@ -191,11 +191,22 @@ export const useGraphQLErrorHandlerHook = <
             const transformedErrors = processedErrors.map((error) => {
               const graphqlError =
                 error instanceof BaseGraphQLError
-                  ? error
+                  ? {
+                      ...error,
+                      extensions: {
+                        ...error.extensions,
+                        userFriendlyMessage:
+                          error.extensions.userFriendlyMessage ??
+                          t`An error occurred.`,
+                      },
+                    }
                   : generateGraphQLErrorFromError(error);
 
               if (error.eventId && eventIdKey) {
-                graphqlError.extensions[eventIdKey] = error.eventId;
+                graphqlError.extensions = {
+                  ...graphqlError.extensions,
+                  [eventIdKey]: error.eventId,
+                };
               }
 
               return graphqlError;
@@ -224,7 +235,11 @@ export const useGraphQLErrorHandlerHook = <
           requestMetadataVersion &&
           requestMetadataVersion !== `${currentMetadataVersion}`
         ) {
-          throw new GraphQLError(SCHEMA_MISMATCH_ERROR);
+          throw new GraphQLError(SCHEMA_MISMATCH_ERROR, {
+            extensions: {
+              userFriendlyMessage: t`Your workspace has been updated with a new data model. Please refresh the page.`,
+            },
+          });
         }
       }
     },

packages/twenty-server/src/engine/core-modules/graphql/utils/generate-graphql-error-from-error.util.ts

@@ -1,13 +1,25 @@
+import { t } from '@lingui/core/macro';
+
 import {
   BaseGraphQLError,
   ErrorCode,
 } from 'src/engine/core-modules/graphql/utils/graphql-errors.util';
+import { CustomException } from 'src/utils/custom-exception';
 
-export const generateGraphQLErrorFromError = (error: Error) => {
+export const generateGraphQLErrorFromError = (
+  error: Error | CustomException,
+) => {
   const graphqlError = new BaseGraphQLError(
     error.message,
     ErrorCode.INTERNAL_SERVER_ERROR,
   );
 
+  if (error instanceof CustomException) {
+    graphqlError.extensions.userFriendlyMessage =
+      error.userFriendlyMessage ?? t`An error occurred.`;
+  } else {
+    graphqlError.extensions.userFriendlyMessage = t`An error occurred.`;
+  }
+
   return graphqlError;
 };

packages/twenty-server/src/engine/core-modules/graphql/utils/graphql-errors.util.ts

@@ -159,8 +159,9 @@ export class UserInputError extends BaseGraphQLError {
 }
 
 export class NotFoundError extends BaseGraphQLError {
-  constructor(message: string) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    super(message, ErrorCode.NOT_FOUND);
+  constructor(message: string, extensions?: Record<string, any>) {
+    super(message, ErrorCode.NOT_FOUND, extensions);
 
     Object.defineProperty(this, 'name', { value: 'NotFoundError' });
   }
@@ -175,8 +176,9 @@ export class MethodNotAllowedError extends BaseGraphQLError {
 }
 
 export class ConflictError extends BaseGraphQLError {
-  constructor(message: string) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    super(message, ErrorCode.CONFLICT);
+  constructor(message: string, extensions?: Record<string, any>) {
+    super(message, ErrorCode.CONFLICT, extensions);
 
     Object.defineProperty(this, 'name', { value: 'ConflictError' });
   }

packages/twenty-server/src/engine/core-modules/record-transformer/record-transformer.exception.ts

@@ -2,8 +2,12 @@ import { CustomException } from 'src/utils/custom-exception';
 
 export class RecordTransformerException extends CustomException {
   declare code: RecordTransformerExceptionCode;
-  constructor(message: string, code: RecordTransformerExceptionCode) {
+  constructor(
-    super(message, code);
+    message: string,
+    code: RecordTransformerExceptionCode,
+    userFriendlyMessage?: string,
+  ) {
+    super(message, code, userFriendlyMessage);
   }
 }
 

packages/twenty-server/src/engine/core-modules/record-transformer/utils/record-transformer-graphql-api-exception-handler.util.ts

@@ -17,7 +17,9 @@ export const recordTransformerGraphqlApiExceptionHandler = (
     case RecordTransformerExceptionCode.CONFLICTING_PHONE_CALLING_CODE_AND_COUNTRY_CODE:
     case RecordTransformerExceptionCode.INVALID_PHONE_CALLING_CODE:
     case RecordTransformerExceptionCode.INVALID_URL:
-      throw new UserInputError(error.message);
+      throw new UserInputError(error.message, {
+        userFriendlyMessage: error.userFriendlyMessage,
+      });
     default: {
       assertUnreachable(error.code);
     }

packages/twenty-server/src/engine/core-modules/record-transformer/utils/transform-phones-value.util.ts

@@ -1,3 +1,4 @@
+import { t } from '@lingui/core/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 import {
   CountryCallingCode,
@@ -61,6 +62,7 @@ const validatePrimaryPhoneCountryCodeAndCallingCode = ({
     throw new RecordTransformerException(
       `Invalid country code ${countryCode}`,
       RecordTransformerExceptionCode.INVALID_PHONE_COUNTRY_CODE,
+      t`Invalid country code ${countryCode}`,
     );
   }
 
@@ -74,6 +76,7 @@ const validatePrimaryPhoneCountryCodeAndCallingCode = ({
     throw new RecordTransformerException(
       `Invalid calling code ${callingCode}`,
       RecordTransformerExceptionCode.INVALID_PHONE_CALLING_CODE,
+      t`Invalid calling code ${callingCode}`,
     );
   }
 
@@ -86,6 +89,7 @@ const validatePrimaryPhoneCountryCodeAndCallingCode = ({
     throw new RecordTransformerException(
       `Provided country code and calling code are conflicting`,
       RecordTransformerExceptionCode.CONFLICTING_PHONE_CALLING_CODE_AND_COUNTRY_CODE,
+      t`Provided country code and calling code are conflicting`,
     );
   }
 };
@@ -106,6 +110,7 @@ const parsePhoneNumberExceptionWrapper = ({
     throw new RecordTransformerException(
       `Provided phone number is invalid ${number}`,
       RecordTransformerExceptionCode.INVALID_PHONE_NUMBER,
+      t`Provided phone number is invalid ${number}`,
     );
   }
 };
@@ -129,6 +134,7 @@ const validateAndInferMetadataFromPrimaryPhoneNumber = ({
     throw new RecordTransformerException(
       'Provided and inferred country code are conflicting',
       RecordTransformerExceptionCode.CONFLICTING_PHONE_COUNTRY_CODE,
+      t`Provided and inferred country code are conflicting`,
     );
   }
 
@@ -140,6 +146,7 @@ const validateAndInferMetadataFromPrimaryPhoneNumber = ({
     throw new RecordTransformerException(
       'Provided and inferred calling code are conflicting',
       RecordTransformerExceptionCode.CONFLICTING_PHONE_CALLING_CODE,
+      t`Provided and inferred calling code are conflicting`,
     );
   }
 

packages/twenty-server/src/engine/core-modules/workflow/filters/workflow-trigger-graphql-api-exception.filter.ts

@@ -19,9 +19,17 @@ export const handleWorkflowTriggerException = (
     case WorkflowTriggerExceptionCode.INVALID_WORKFLOW_TRIGGER:
     case WorkflowTriggerExceptionCode.INVALID_WORKFLOW_STATUS:
     case WorkflowTriggerExceptionCode.FORBIDDEN:
-      throw new UserInputError(exception.message);
+      throw new UserInputError(exception.message, {
+        extensions: {
+          userFriendlyMessage: exception.userFriendlyMessage,
+        },
+      });
     case WorkflowTriggerExceptionCode.NOT_FOUND:
-      throw new NotFoundError(exception.message);
+      throw new NotFoundError(exception.message, {
+        extensions: {
+          userFriendlyMessage: exception.userFriendlyMessage,
+        },
+      });
     case WorkflowTriggerExceptionCode.INTERNAL_ERROR:
       throw exception;
     default: {

packages/twenty-server/src/engine/metadata-modules/field-metadata/field-metadata.exception.ts

@@ -2,8 +2,12 @@ import { CustomException } from 'src/utils/custom-exception';
 
 export class FieldMetadataException extends CustomException {
   declare code: FieldMetadataExceptionCode;
-  constructor(message: string, code: FieldMetadataExceptionCode) {
+  constructor(
-    super(message, code);
+    message: string,
+    code: FieldMetadataExceptionCode,
+    { userFriendlyMessage }: { userFriendlyMessage?: string } = {},
+  ) {
+    super(message, code, userFriendlyMessage);
   }
 }
 

packages/twenty-server/src/engine/metadata-modules/field-metadata/field-metadata.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@nestjs/common';
 import { InjectDataSource, InjectRepository } from '@nestjs/typeorm';
 
 import { i18n } from '@lingui/core';
+import { t } from '@lingui/core/macro';
 import { TypeOrmQueryService } from '@ptc-org/nestjs-query-typeorm';
 import isEmpty from 'lodash.isempty';
 import { APP_LOCALES } from 'twenty-shared/translations';
@@ -363,6 +364,9 @@ export class FieldMetadataService extends TypeOrmQueryService<FieldMetadataEntit
         throw new FieldMetadataException(
           'Cannot delete, please update the label identifier field first',
           FieldMetadataExceptionCode.FIELD_MUTATION_NOT_ALLOWED,
+          {
+            userFriendlyMessage: t`Cannot delete, please update the label identifier field first`,
+          },
         );
       }
 
@@ -574,6 +578,9 @@ export class FieldMetadataService extends TypeOrmQueryService<FieldMetadataEntit
           throw new FieldMetadataException(
             `Name "${fieldMetadataInput.name}" is not available, check that it is not duplicating another field's name.`,
             FieldMetadataExceptionCode.INVALID_FIELD_INPUT,
+            {
+              userFriendlyMessage: t`Name is not available, it may be duplicating another field's name.`,
+            },
           );
         }
 

packages/twenty-server/src/engine/metadata-modules/field-metadata/services/field-metadata-enum-validation.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@nestjs/common';
 
+import { t } from '@lingui/core/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 import { FieldMetadataType } from 'twenty-shared/types';
 import { assertUnreachable, isDefined } from 'twenty-shared/utils';
@@ -26,7 +27,10 @@ import {
 import { EnumFieldMetadataType } from 'src/engine/metadata-modules/workspace-migration/factories/enum-column-action.factory';
 import { isSnakeCaseString } from 'src/utils/is-snake-case-string';
 
-type Validator<T> = { validator: (str: T) => boolean; message: string };
+type Validator<T> = {
+  validator: (str: T) => boolean;
+  message: string;
+};
 
 type FieldMetadataUpdateCreateInput = CreateFieldInput | UpdateFieldInput;
 
@@ -55,6 +59,9 @@ export class FieldMetadataEnumValidationService {
       throw new FieldMetadataException(
         message,
         FieldMetadataExceptionCode.INVALID_FIELD_INPUT,
+        {
+          userFriendlyMessage: message,
+        },
       );
     }
   }
@@ -80,23 +87,23 @@ export class FieldMetadataEnumValidationService {
     const validators: Validator<string>[] = [
       {
         validator: (label) => !isDefined(label),
-        message: 'Option label is required',
+        message: t`Option label is required`,
       },
       {
         validator: exceedsDatabaseIdentifierMaximumLength,
-        message: `Option label "${sanitizedLabel}" exceeds 63 characters`,
+        message: t`Option label exceeds 63 characters`,
       },
       {
         validator: beneathDatabaseIdentifierMinimumLength,
-        message: `Option label "${sanitizedLabel}" is beneath 1 character`,
+        message: t`Option label "${sanitizedLabel}" is beneath 1 character`,
       },
       {
         validator: (label) => label.includes(','),
-        message: 'Label must not contain a comma',
+        message: t`Label must not contain a comma`,
       },
       {
         validator: (label) => !isNonEmptyString(label) || label === ' ',
-        message: 'Label must not be empty',
+        message: t`Label must not be empty`,
       },
     ];
 
@@ -109,15 +116,15 @@ export class FieldMetadataEnumValidationService {
     const validators: Validator<string>[] = [
       {
         validator: (value) => !isDefined(value),
-        message: 'Option value is required',
+        message: t`Option value is required`,
       },
       {
         validator: exceedsDatabaseIdentifierMaximumLength,
-        message: `Option value "${sanitizedValue}" exceeds 63 characters`,
+        message: t`Option value exceeds 63 characters`,
       },
       {
         validator: beneathDatabaseIdentifierMinimumLength,
-        message: `Option value "${sanitizedValue}" is beneath 1 character`,
+        message: t`Option value "${sanitizedValue}" is beneath 1 character`,
       },
       {
         validator: (value) => !isSnakeCaseString(value),

packages/twenty-server/src/engine/metadata-modules/field-metadata/utils/field-metadata-graphql-api-exception-handler.util.ts

@@ -18,13 +18,21 @@ export const fieldMetadataGraphqlApiExceptionHandler = (error: Error) => {
   if (error instanceof FieldMetadataException) {
     switch (error.code) {
       case FieldMetadataExceptionCode.FIELD_METADATA_NOT_FOUND:
-        throw new NotFoundError(error.message);
+        throw new NotFoundError(error.message, {
+          userFriendlyMessage: error.userFriendlyMessage,
+        });
       case FieldMetadataExceptionCode.INVALID_FIELD_INPUT:
-        throw new UserInputError(error.message);
+        throw new UserInputError(error.message, {
+          userFriendlyMessage: error.userFriendlyMessage,
+        });
       case FieldMetadataExceptionCode.FIELD_MUTATION_NOT_ALLOWED:
-        throw new ForbiddenError(error.message);
+        throw new ForbiddenError(error.message, {
+          userFriendlyMessage: error.userFriendlyMessage,
+        });
       case FieldMetadataExceptionCode.FIELD_ALREADY_EXISTS:
-        throw new ConflictError(error.message);
+        throw new ConflictError(error.message, {
+          userFriendlyMessage: error.userFriendlyMessage,
+        });
       case FieldMetadataExceptionCode.OBJECT_METADATA_NOT_FOUND:
       case FieldMetadataExceptionCode.INTERNAL_SERVER_ERROR:
       case FieldMetadataExceptionCode.FIELD_METADATA_RELATION_NOT_ENABLED:

packages/twenty-server/src/engine/metadata-modules/object-metadata/object-metadata.exception.ts

@@ -2,8 +2,12 @@ import { CustomException } from 'src/utils/custom-exception';
 
 export class ObjectMetadataException extends CustomException {
   declare code: ObjectMetadataExceptionCode;
-  constructor(message: string, code: ObjectMetadataExceptionCode) {
+  constructor(
-    super(message, code);
+    message: string,
+    code: ObjectMetadataExceptionCode,
+    { userFriendlyMessage }: { userFriendlyMessage?: string } = {},
+  ) {
+    super(message, code, userFriendlyMessage);
   }
 }
 

packages/twenty-server/src/engine/metadata-modules/object-metadata/utils/__tests__/__snapshots__/validate-object-metadata-input.util.spec.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`validateObjectMetadataInputOrThrow should fail when name exceeds maximum length 1`] = `"String "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" exceeds 63 characters limit"`;
+exports[`validateObjectMetadataInputOrThrow should fail when name exceeds maximum length 1`] = `"Name is too long: it exceeds the 63 characters limit."`;
 
 exports[`validateObjectMetadataInputOrThrow should fail when namePlural has invalid characters 1`] = `"String "μ" is not valid: must start with lowercase letter and contain only alphanumeric letters"`;
 

packages/twenty-server/src/engine/metadata-modules/object-metadata/utils/object-metadata-graphql-api-exception-handler.util.ts

@@ -20,11 +20,15 @@ export const objectMetadataGraphqlApiExceptionHandler = (error: Error) => {
       case ObjectMetadataExceptionCode.OBJECT_METADATA_NOT_FOUND:
         throw new NotFoundError(error.message);
       case ObjectMetadataExceptionCode.INVALID_OBJECT_INPUT:
-        throw new UserInputError(error.message);
+        throw new UserInputError(error.message, {
+          userFriendlyMessage: error.userFriendlyMessage,
+        });
       case ObjectMetadataExceptionCode.OBJECT_MUTATION_NOT_ALLOWED:
         throw new ForbiddenError(error.message);
       case ObjectMetadataExceptionCode.OBJECT_ALREADY_EXISTS:
-        throw new ConflictError(error.message);
+        throw new ConflictError(error.message, {
+          userFriendlyMessage: error.userFriendlyMessage,
+        });
       case ObjectMetadataExceptionCode.MISSING_CUSTOM_OBJECT_DEFAULT_LABEL_IDENTIFIER_FIELD:
         throw error;
       default: {

packages/twenty-server/src/engine/metadata-modules/object-metadata/utils/validate-object-metadata-input.util.ts

@@ -29,9 +29,14 @@ export const validateObjectMetadataInputNameOrThrow = (name: string): void => {
     validateMetadataNameOrThrow(name);
   } catch (error) {
     if (error instanceof InvalidMetadataException) {
+      const errorMessage = error.message;
+
       throw new ObjectMetadataException(
-        error.message,
+        errorMessage,
         ObjectMetadataExceptionCode.INVALID_OBJECT_INPUT,
+        {
+          userFriendlyMessage: errorMessage,
+        },
       );
     }
 
@@ -62,6 +67,9 @@ const validateObjectMetadataInputLabelOrThrow = (name: string): void => {
       throw new ObjectMetadataException(
         error.message,
         ObjectMetadataExceptionCode.INVALID_OBJECT_INPUT,
+        {
+          userFriendlyMessage: error.userFriendlyMessage,
+        },
       );
     }
 

packages/twenty-server/src/engine/metadata-modules/permissions/permissions.exception.ts

@@ -23,7 +23,6 @@ export enum PermissionsExceptionCode {
   CANNOT_UPDATE_SELF_ROLE = 'CANNOT_UPDATE_SELF_ROLE',
   NO_ROLE_FOUND_FOR_USER_WORKSPACE = 'NO_ROLE_FOUND_FOR_USER_WORKSPACE',
   INVALID_ARG = 'INVALID_ARG_PERMISSIONS',
-  PERMISSIONS_V2_NOT_ENABLED = 'PERMISSIONS_V2_NOT_ENABLED',
   ROLE_LABEL_ALREADY_EXISTS = 'ROLE_LABEL_ALREADY_EXISTS',
   DEFAULT_ROLE_NOT_FOUND = 'DEFAULT_ROLE_NOT_FOUND',
   OBJECT_METADATA_NOT_FOUND = 'OBJECT_METADATA_NOT_FOUND_PERMISSIONS',
@@ -53,7 +52,6 @@ export enum PermissionsExceptionMessage {
   UNKNOWN_REQUIRED_PERMISSION = 'Unknown required permission',
   CANNOT_UPDATE_SELF_ROLE = 'Cannot update self role',
   NO_ROLE_FOUND_FOR_USER_WORKSPACE = 'No role found for userWorkspace',
-  PERMISSIONS_V2_NOT_ENABLED = 'Permissions V2 is not enabled',
   ROLE_LABEL_ALREADY_EXISTS = 'A role with this label already exists',
   DEFAULT_ROLE_NOT_FOUND = 'Default role not found',
   OBJECT_METADATA_NOT_FOUND = 'Object metadata not found',

packages/twenty-server/src/engine/metadata-modules/permissions/utils/permission-graphql-api-exception-handler.util.ts

@@ -1,3 +1,5 @@
+import { t } from '@lingui/core/macro';
+
 import {
   ForbiddenError,
   NotFoundError,
@@ -13,11 +15,16 @@ export const permissionGraphqlApiExceptionHandler = (
 ) => {
   switch (error.code) {
     case PermissionsExceptionCode.PERMISSION_DENIED:
+      throw new ForbiddenError(error.message, {
+        userFriendlyMessage: 'User does not have permission.',
+      });
+    case PermissionsExceptionCode.ROLE_LABEL_ALREADY_EXISTS:
+      throw new ForbiddenError(error.message, {
+        userFriendlyMessage: t`A role with this label already exists.`,
+      });
     case PermissionsExceptionCode.CANNOT_UNASSIGN_LAST_ADMIN:
     case PermissionsExceptionCode.CANNOT_UPDATE_SELF_ROLE:
     case PermissionsExceptionCode.CANNOT_DELETE_LAST_ADMIN_USER:
-    case PermissionsExceptionCode.PERMISSIONS_V2_NOT_ENABLED:
-    case PermissionsExceptionCode.ROLE_LABEL_ALREADY_EXISTS:
     case PermissionsExceptionCode.ROLE_NOT_EDITABLE:
     case PermissionsExceptionCode.CANNOT_ADD_OBJECT_PERMISSION_ON_SYSTEM_OBJECT:
       throw new ForbiddenError(error.message);

packages/twenty-server/src/engine/metadata-modules/utils/__tests__/__snapshots__/validate-metadata-name.spec.ts.snap

@@ -10,7 +10,7 @@ exports[`validateMetadataNameOrThrow throws error when string has spaces 1`] = `
 
 exports[`validateMetadataNameOrThrow throws error when string is a reserved word 1`] = `"The name "role" is not available"`;
 
-exports[`validateMetadataNameOrThrow throws error when string is above 63 characters 1`] = `"String "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" exceeds 63 characters limit"`;
+exports[`validateMetadataNameOrThrow throws error when string is above 63 characters 1`] = `"Name is too long: it exceeds the 63 characters limit."`;
 
 exports[`validateMetadataNameOrThrow throws error when string is empty 1`] = `"Input is too short: """`;
 

packages/twenty-server/src/engine/metadata-modules/utils/compute-metadata-name-from-label.util.ts

@@ -1,3 +1,4 @@
+import { t } from '@lingui/core/macro';
 import camelCase from 'lodash.camelcase';
 import { slugify } from 'transliteration';
 import { isDefined } from 'twenty-shared/utils';
@@ -12,6 +13,9 @@ export const computeMetadataNameFromLabel = (label: string): string => {
     throw new InvalidMetadataException(
       'Label is required',
       InvalidMetadataExceptionCode.LABEL_REQUIRED,
+      {
+        userFriendlyMessage: t`Label is required`,
+      },
     );
   }
 
@@ -31,6 +35,9 @@ export const computeMetadataNameFromLabel = (label: string): string => {
     throw new InvalidMetadataException(
       `Invalid label: "${label}"`,
       InvalidMetadataExceptionCode.INVALID_LABEL,
+      {
+        userFriendlyMessage: t`Invalid label: "${label}"`,
+      },
     );
   }