[Command Menu] Refactor layout customization conditional availability [Warning] (#19974)

closes
https://discord.com/channels/1130383047699738754/1494312529286004837

packages/twenty-front/src/modules/layout-customization/hooks/useEnterLayoutCustomizationMode.ts

@@ -2,6 +2,7 @@ import { t } from '@lingui/core/macro';
 import { useStore } from 'jotai';
 import { useCallback } from 'react';
 import { SidePanelPages } from 'twenty-shared/types';
+import { isDefined } from 'twenty-shared/utils';
 import { IconPencil } from 'twenty-ui/display';
 
 import { commandMenuItemsDraftState } from '@/command-menu-item/edit/states/commandMenuItemsDraftState';
@@ -11,13 +12,17 @@ import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/st
 import { navigationMenuItemsDraftState } from '@/navigation-menu-item/common/states/navigationMenuItemsDraftState';
 import { navigationMenuItemsSelector } from '@/navigation-menu-item/common/states/navigationMenuItemsSelector';
 import { filterWorkspaceNavigationMenuItems } from '@/navigation-menu-item/common/utils/filterWorkspaceNavigationMenuItems';
+import { currentPageLayoutIdState } from '@/page-layout/states/currentPageLayoutIdState';
+import { isDashboardInEditModeComponentState } from '@/page-layout/states/isDashboardInEditModeComponentState';
 import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
 import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
 import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 
 export const useEnterLayoutCustomizationMode = () => {
   const store = useStore();
   const { navigateSidePanel } = useNavigateSidePanel();
+  const { enqueueWarningSnackBar } = useSnackBar();
 
   const enterLayoutCustomizationMode = useCallback(() => {
     const isLayoutCustomizationModeAlreadyEnabled = store.get(
@@ -28,6 +33,26 @@ export const useEnterLayoutCustomizationMode = () => {
       return;
     }
 
+    const dashboardPageLayoutIdInEditMode = store.get(
+      currentPageLayoutIdState.atom,
+    );
+
+    if (isDefined(dashboardPageLayoutIdInEditMode)) {
+      const isDashboardInEditMode = store.get(
+        isDashboardInEditModeComponentState.atomFamily({
+          instanceId: dashboardPageLayoutIdInEditMode,
+        }),
+      );
+
+      if (isDashboardInEditMode) {
+        enqueueWarningSnackBar({
+          message: t`Save or cancel dashboard changes before editing the layout.`,
+        });
+
+        return;
+      }
+    }
+
     const prefetchNavigationMenuItems = store.get(
       navigationMenuItemsSelector.atom,
     );
@@ -57,7 +82,7 @@ export const useEnterLayoutCustomizationMode = () => {
         resetNavigationStack: true,
       });
     }
-  }, [navigateSidePanel, store]);
+  }, [enqueueWarningSnackBar, navigateSidePanel, store]);
 
   return { enterLayoutCustomizationMode };
 };