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/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(
-        `Webhook ${createdWebhook?.targetUrl} created successfully`,
-        {
-          variant: SnackBarVariant.Success,
-        },
-      );
+      const targetUrl = createdWebhook?.targetUrl
+        ? `${createdWebhook?.targetUrl}`
+        : '';
+
+      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, {
-        variant: SnackBarVariant.Error,
+      enqueueErrorSnackBar({
+        apolloError: error instanceof ApolloError ? error : undefined,
       });
     }
   };
 
   const handleUpdate = async (formValues: WebhookFormValues) => {
     if (!webhookId) {
-      enqueueSnackBar('Webhook ID is required for updates', {
-        variant: SnackBarVariant.Error,
+      enqueueErrorSnackBar({
+        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`, {
-        variant: SnackBarVariant.Success,
+      const targetUrl = webhookData.targetUrl ? `${webhookData.targetUrl}` : '';
+
+      enqueueSuccessSnackBar({
+        message: t`Webhook ${targetUrl} updated successfully`,
       });
     } catch (error) {
-      enqueueSnackBar((error as Error).message, {
-        variant: SnackBarVariant.Error,
+      enqueueErrorSnackBar({
+        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', {
-        variant: SnackBarVariant.Error,
+      enqueueErrorSnackBar({
+        message: t`Webhook ID is required for deletion`,
       });
       return;
     }
 
     try {
       await deleteOneWebhook(webhookId);
-      enqueueSnackBar('Webhook deleted successfully', {
-        variant: SnackBarVariant.Success,
+      enqueueSuccessSnackBar({
+        message: t`Webhook deleted successfully`,
       });
 
       navigate(SettingsPath.Webhooks);
     } catch (error) {
-      enqueueSnackBar((error as Error).message, {
-        variant: SnackBarVariant.Error,
+      enqueueErrorSnackBar({
+        apolloError: error instanceof ApolloError ? error : undefined,
       });
     }
   };