[PAGE LAYOUTS] Add widgets validation (#16635)

- Add widget validation
- Remove 'None' option for primary axis group by
- Fix error message parsing by passing the operation type in
`useMetadataErrorHandler`

packages/twenty-front/src/modules/page-layout/hooks/useSavePageLayout.ts

@@ -1,4 +1,5 @@
 import { usePageLayoutDraftState } from '@/page-layout/hooks/usePageLayoutDraftState';
+import { useUpdatePageLayoutWithTabsAndWidgets } from '@/page-layout/hooks/useUpdatePageLayoutWithTabsAndWidgets';
 import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
 import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayoutPersistedComponentState';
@@ -10,7 +11,6 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
 import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
 import { useRecoilCallback } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
-import { useUpdatePageLayoutWithTabsAndWidgetsMutation } from '~/generated/graphql';
 
 export const useSavePageLayout = (pageLayoutIdFromProps: string) => {
   const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
@@ -30,8 +30,8 @@ export const useSavePageLayout = (pageLayoutIdFromProps: string) => {
 
   const { pageLayoutDraft } = usePageLayoutDraftState(pageLayoutId);
 
-  const [updatePageLayoutWithTabsAndWidgets] =
-    useUpdatePageLayoutWithTabsAndWidgetsMutation();
+  const { updatePageLayoutWithTabsAndWidgets } =
+    useUpdatePageLayoutWithTabsAndWidgets();
 
   const savePageLayout = useRecoilCallback(
     ({ set }) =>
@@ -39,25 +39,28 @@ export const useSavePageLayout = (pageLayoutIdFromProps: string) => {
         const updateInput =
           convertPageLayoutDraftToUpdateInput(pageLayoutDraft);
 
-        const { data } = await updatePageLayoutWithTabsAndWidgets({
-          variables: {
-            id: pageLayoutId,
-            input: updateInput,
-          },
-        });
+        const result = await updatePageLayoutWithTabsAndWidgets(
+          pageLayoutId,
+          updateInput,
+        );
 
-        const updatedPageLayout = data?.updatePageLayoutWithTabsAndWidgets;
+        if (result.status === 'successful') {
+          const updatedPageLayout =
+            result.response.data?.updatePageLayoutWithTabsAndWidgets;
 
-        if (isDefined(updatedPageLayout)) {
-          const pageLayoutToPersist: PageLayout =
-            transformPageLayout(updatedPageLayout);
+          if (isDefined(updatedPageLayout)) {
+            const pageLayoutToPersist: PageLayout =
+              transformPageLayout(updatedPageLayout);
 
-          set(pageLayoutPersistedCallbackState, pageLayoutToPersist);
-          set(
-            pageLayoutCurrentLayoutsCallbackState,
-            convertPageLayoutToTabLayouts(pageLayoutToPersist),
-          );
+            set(pageLayoutPersistedCallbackState, pageLayoutToPersist);
+            set(
+              pageLayoutCurrentLayoutsCallbackState,
+              convertPageLayoutToTabLayouts(pageLayoutToPersist),
+            );
+          }
         }
+
+        return result;
       },
     [
       pageLayoutCurrentLayoutsCallbackState,