feat: display error snackbars for Object and Field creation/edition (#2708)

front/src/modules/settings/data-model/components/SettingsObjectFieldFormSection.tsx

@@ -9,6 +9,7 @@ import { Section } from '@/ui/layout/section/components/Section';
 
 type SettingsObjectFieldFormSectionProps = {
   disabled?: boolean;
+  disableNameEdition?: boolean;
   name?: string;
   description?: string;
   iconKey?: string;
@@ -30,6 +31,7 @@ const StyledInputsContainer = styled.div`
 
 export const SettingsObjectFieldFormSection = ({
   disabled,
+  disableNameEdition,
   name = '',
   description = '',
   iconKey = 'IconUsers',
@@ -55,7 +57,7 @@ export const SettingsObjectFieldFormSection = ({
             onChange?.({ label: value });
           }
         }}
-        disabled={disabled}
+        disabled={disabled || disableNameEdition}
         fullWidth
       />
     </StyledInputsContainer>

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

@@ -15,6 +15,7 @@ import {
 import { SettingsObjectIconSection } from '@/settings/data-model/object-edit/SettingsObjectIconSection';
 import { IconSettings } from '@/ui/display/icon';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
@@ -23,6 +24,7 @@ export const SettingsNewObject = () => {
   const navigate = useNavigate();
   const [selectedObjectType, setSelectedObjectType] =
     useState<NewObjectType>('Standard');
+  const { enqueueSnackBar } = useSnackBar();
 
   const {
     activateObjectMetadataItem: activateObject,
@@ -66,20 +68,26 @@ export const SettingsNewObject = () => {
     }
 
     if (selectedObjectType === 'Custom') {
-      const createdObject = await createObject({
+      try {
-        labelPlural: customFormValues.labelPlural,
+        const createdObject = await createObject({
-        labelSingular: customFormValues.labelSingular,
+          labelPlural: customFormValues.labelPlural,
-        description: customFormValues.description,
+          labelSingular: customFormValues.labelSingular,
-        icon: customFormValues.icon,
+          description: customFormValues.description,
-      });
+          icon: customFormValues.icon,
+        });
 
-      navigate(
+        navigate(
-        createdObject.data?.createOneObject.isActive
+          createdObject.data?.createOneObject.isActive
-          ? `/settings/objects/${getObjectSlug(
+            ? `/settings/objects/${getObjectSlug(
-              createdObject.data.createOneObject,
+                createdObject.data.createOneObject,
-            )}`
+              )}`
-          : '/settings/objects',
+            : '/settings/objects',
-      );
+        );
+      } catch (error) {
+        enqueueSnackBar((error as Error).message, {
+          variant: 'error',
+        });
+      }
     }
   };
 

front/src/pages/settings/data-model/SettingsObjectEdit.tsx

@@ -11,6 +11,7 @@ import { SettingsObjectIconSection } from '@/settings/data-model/object-edit/Set
 import { AppPath } from '@/types/AppPath';
 import { IconArchive, IconSettings } from '@/ui/display/icon';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Button } from '@/ui/input/button/components/Button';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
@@ -18,6 +19,7 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
 export const SettingsObjectEdit = () => {
   const navigate = useNavigate();
+  const { enqueueSnackBar } = useSnackBar();
 
   const { objectSlug = '' } = useParams();
   const {
@@ -73,9 +75,15 @@ export const SettingsObjectEdit = () => {
       ...formValues,
     };
 
-    await editObjectMetadataItem(editedObjectMetadataItem);
+    try {
+      await editObjectMetadataItem(editedObjectMetadataItem);
 
-    navigate(`/settings/objects/${getObjectSlug(editedObjectMetadataItem)}`);
+      navigate(`/settings/objects/${getObjectSlug(editedObjectMetadataItem)}`);
+    } catch (error) {
+      enqueueSnackBar((error as Error).message, {
+        variant: 'error',
+      });
+    }
   };
 
   const handleDisable = async () => {

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

@@ -14,6 +14,7 @@ import { useFieldMetadataForm } from '@/settings/data-model/hooks/useFieldMetada
 import { AppPath } from '@/types/AppPath';
 import { IconArchive, IconSettings } from '@/ui/display/icon';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Button } from '@/ui/input/button/components/Button';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
@@ -22,6 +23,7 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 export const SettingsObjectFieldEdit = () => {
   const navigate = useNavigate();
+  const { enqueueSnackBar } = useSnackBar();
 
   const { objectSlug = '', fieldSlug = '' } = useParams();
   const { findActiveObjectMetadataItemBySlug } =
@@ -93,28 +95,34 @@ export const SettingsObjectFieldEdit = () => {
   const handleSave = async () => {
     if (!validatedFormValues) return;
 
-    if (
+    try {
-      validatedFormValues.type === FieldMetadataType.Relation &&
+      if (
-      relationFieldMetadataItem?.id &&
+        validatedFormValues.type === FieldMetadataType.Relation &&
-      hasRelationFormChanged
+        relationFieldMetadataItem?.id &&
-    ) {
+        hasRelationFormChanged
-      await editMetadataField({
+      ) {
-        icon: validatedFormValues.relation.field.icon,
+        await editMetadataField({
-        id: relationFieldMetadataItem.id,
+          icon: validatedFormValues.relation.field.icon,
-        label: validatedFormValues.relation.field.label,
+          id: relationFieldMetadataItem.id,
+          label: validatedFormValues.relation.field.label,
+        });
+      }
+
+      if (hasFieldFormChanged) {
+        await editMetadataField({
+          description: validatedFormValues.description,
+          icon: validatedFormValues.icon,
+          id: activeMetadataField.id,
+          label: validatedFormValues.label,
+        });
+      }
+
+      navigate(`/settings/objects/${objectSlug}`);
+    } catch (error) {
+      enqueueSnackBar((error as Error).message, {
+        variant: 'error',
       });
     }
-
-    if (hasFieldFormChanged) {
-      await editMetadataField({
-        description: validatedFormValues.description,
-        icon: validatedFormValues.icon,
-        id: activeMetadataField.id,
-        label: validatedFormValues.label,
-      });
-    }
-
-    navigate(`/settings/objects/${objectSlug}`);
   };
 
   const handleDisable = async () => {
@@ -146,6 +154,7 @@ export const SettingsObjectFieldEdit = () => {
         </SettingsHeaderContainer>
         <SettingsObjectFieldFormSection
           disabled={!activeMetadataField.isCustom}
+          disableNameEdition
           name={formValues.label}
           description={formValues.description}
           iconKey={formValues.icon}

front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx

@@ -15,6 +15,7 @@ import { SettingsObjectFieldTypeSelectSection } from '@/settings/data-model/comp
 import { useFieldMetadataForm } from '@/settings/data-model/hooks/useFieldMetadataForm';
 import { AppPath } from '@/types/AppPath';
 import { IconSettings } from '@/ui/display/icon';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { View } from '@/views/types/View';
@@ -24,6 +25,7 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
 export const SettingsObjectNewFieldStep2 = () => {
   const navigate = useNavigate();
   const { objectSlug = '' } = useParams();
+  const { enqueueSnackBar } = useSnackBar();
 
   const {
     findActiveObjectMetadataItemBySlug,
@@ -108,63 +110,69 @@ export const SettingsObjectNewFieldStep2 = () => {
   const handleSave = async () => {
     if (!validatedFormValues) return;
 
-    if (validatedFormValues.type === FieldMetadataType.Relation) {
+    try {
-      const createdRelation = await createOneRelationMetadata({
+      if (validatedFormValues.type === FieldMetadataType.Relation) {
-        relationType: validatedFormValues.relation.type,
+        const createdRelation = await createOneRelationMetadata({
-        field: {
+          relationType: validatedFormValues.relation.type,
+          field: {
+            description: validatedFormValues.description,
+            icon: validatedFormValues.icon,
+            label: validatedFormValues.label,
+          },
+          objectMetadataId: activeObjectMetadataItem.id,
+          connect: {
+            field: {
+              icon: validatedFormValues.relation.field.icon,
+              label: validatedFormValues.relation.field.label,
+            },
+            objectMetadataId: validatedFormValues.relation.objectMetadataId,
+          },
+        });
+
+        const relationObjectMetadataItem = findObjectMetadataItemById(
+          validatedFormValues.relation.objectMetadataId,
+        );
+
+        objectViews.forEach(async (view) => {
+          await createOneViewField?.({
+            view: view.id,
+            fieldMetadataId:
+              validatedFormValues.relation.type === 'MANY_TO_ONE'
+                ? createdRelation.data?.createOneRelation.toFieldMetadataId
+                : createdRelation.data?.createOneRelation.fromFieldMetadataId,
+            position: activeObjectMetadataItem.fields.length,
+            isVisible: true,
+            size: 100,
+          });
+        });
+        relationObjectViews.forEach(async (view) => {
+          await createOneViewField?.({
+            view: view.id,
+            fieldMetadataId:
+              validatedFormValues.relation.type === 'MANY_TO_ONE'
+                ? createdRelation.data?.createOneRelation.fromFieldMetadataId
+                : createdRelation.data?.createOneRelation.toFieldMetadataId,
+            position: relationObjectMetadataItem?.fields.length,
+            isVisible: true,
+            size: 100,
+          });
+        });
+      } else {
+        await createMetadataField({
           description: validatedFormValues.description,
           icon: validatedFormValues.icon,
           label: validatedFormValues.label,
-        },
+          objectMetadataId: activeObjectMetadataItem.id,
-        objectMetadataId: activeObjectMetadataItem.id,
+          type: validatedFormValues.type,
-        connect: {
-          field: {
-            icon: validatedFormValues.relation.field.icon,
-            label: validatedFormValues.relation.field.label,
-          },
-          objectMetadataId: validatedFormValues.relation.objectMetadataId,
-        },
-      });
-
-      const relationObjectMetadataItem = findObjectMetadataItemById(
-        validatedFormValues.relation.objectMetadataId,
-      );
-
-      objectViews.forEach(async (view) => {
-        await createOneViewField?.({
-          view: view.id,
-          fieldMetadataId:
-            validatedFormValues.relation.type === 'MANY_TO_ONE'
-              ? createdRelation.data?.createOneRelation.toFieldMetadataId
-              : createdRelation.data?.createOneRelation.fromFieldMetadataId,
-          position: activeObjectMetadataItem.fields.length,
-          isVisible: true,
-          size: 100,
         });
-      });
+      }
-      relationObjectViews.forEach(async (view) => {
+
-        await createOneViewField?.({
+      navigate(`/settings/objects/${objectSlug}`);
-          view: view.id,
+    } catch (error) {
-          fieldMetadataId:
+      enqueueSnackBar((error as Error).message, {
-            validatedFormValues.relation.type === 'MANY_TO_ONE'
+        variant: 'error',
-              ? createdRelation.data?.createOneRelation.fromFieldMetadataId
-              : createdRelation.data?.createOneRelation.toFieldMetadataId,
-          position: relationObjectMetadataItem?.fields.length,
-          isVisible: true,
-          size: 100,
-        });
-      });
-    } else {
-      await createMetadataField({
-        description: validatedFormValues.description,
-        icon: validatedFormValues.icon,
-        label: validatedFormValues.label,
-        objectMetadataId: activeObjectMetadataItem.id,
-        type: validatedFormValues.type,
       });
     }
-
-    navigate(`/settings/objects/${objectSlug}`);
   };
 
   return (