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/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.`, {
-        variant: SnackBarVariant.Success,
+      enqueueSuccessSnackBar({
+        message: t`Subscription has been switched to Yearly.`,
       });
     } catch (error: any) {
-      enqueueSnackBar(t`Error while switching subscription to Yearly.`, {
-        variant: SnackBarVariant.Error,
+      enqueueErrorSnackBar({
+        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.`, {
-        variant: SnackBarVariant.Success,
+      enqueueSuccessSnackBar({
+        message: t`Subscription has been switched to Organization Plan.`,
       });
     } catch (error: any) {
-      enqueueSnackBar(
-        t`Error while switching subscription to Organization Plan.`,
-        {
-          variant: SnackBarVariant.Error,
-        },
-      );
+      enqueueErrorSnackBar({
+        message: t`Error while switching subscription to Organization Plan.`,
+      });
     }
   };
 

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(
-          t`No payment method found. Please update your billing details.`,
-          {
-            variant: SnackBarVariant.Error,
-          },
-        );
+        enqueueErrorSnackBar({
+          message: t`No payment method found. Please update your billing details.`,
+        });
 
         return;
       }
@@ -49,16 +45,13 @@ export const useEndSubscriptionTrialPeriod = () => {
         });
       }
 
-      enqueueSnackBar(t`Subscription activated.`, {
-        variant: SnackBarVariant.Success,
+      enqueueSuccessSnackBar({
+        message: t`Subscription activated.`,
       });
     } catch {
-      enqueueSnackBar(
-        t`Error while ending trial period. Please contact Twenty team.`,
-        {
-          variant: SnackBarVariant.Error,
-        },
-      );
+      enqueueErrorSnackBar({
+        message: t`Error while ending trial period. Please contact Twenty team.`,
+      });
     } 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(
-        'Checkout session error. Please retry or contact Twenty team',
-        {
-          variant: SnackBarVariant.Error,
-        },
-      );
+      enqueueErrorSnackBar({
+        message: t`Checkout session error. Please retry or contact Twenty team`,
+      });
       return;
     }
     redirect(data.checkoutSession.url);