houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
closes
https://discord.com/channels/1130383047699738754/1494312529286004837
This commit is contained in:
nitin
2026-04-24 15:48:02 +05:30
committed by GitHub
parent 3deb467845
commit 097432d3a2
20 changed files with 374 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/app/hooks/useExecuteTasksOnAnyLocationChange.ts
-9
View File
@@ -1,5 +1,3 @@
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { contextStoreIsPageInEditModeComponentState } from '@/context-store/states/contextStoreIsPageInEditModeComponentState';
import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
import { currentPageLayoutIdState } from '@/page-layout/states/currentPageLayoutIdState';
import { fieldsWidgetEditorModeDraftComponentState } from '@/page-layout/states/fieldsWidgetEditorModeDraftComponentState';
@@ -130,13 +128,6 @@ export const useExecuteTasksOnAnyLocationChange = () => {
store.set(currentPageLayoutIdState.atom, null);
}
store.set(
contextStoreIsPageInEditModeComponentState.atomFamily({
instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID,
}),
false,
);
}, [store]);
/**
packages/twenty-front/src/modules/command-menu-item/components/StandalonePageCommandMenu.tsx
+12 -2
View File
@@ -6,6 +6,7 @@ import { CommandMenuItemEditButton } from '@/command-menu-item/edit/components/C
import { commandMenuItemsSelector } from '@/command-menu-item/states/commandMenuItemsSelector';
import { doesCommandMenuItemMatchObjectMetadataId } from '@/command-menu-item/utils/doesCommandMenuItemMatchObjectMetadataId';
import { doesCommandMenuItemMatchPageLayoutId } from '@/command-menu-item/utils/doesCommandMenuItemMatchPageLayoutId';
import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { currentPageLayoutIdState } from '@/page-layout/states/currentPageLayoutIdState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
@@ -25,6 +26,9 @@ export const StandalonePageCommandMenu = () => {
const commandMenuItems = useAtomStateValue(commandMenuItemsSelector);
const currentWorkspace = useAtomStateValue(currentWorkspaceState);
const currentPageLayoutId = useAtomStateValue(currentPageLayoutIdState);
const isLayoutCustomizationModeEnabled = useAtomStateValue(
isLayoutCustomizationModeEnabledState,
);
const { objectMetadataItems } = useObjectMetadataItems();
const commandMenuContextApi = useMemo<CommandMenuContextApi>(() => {
@@ -52,7 +56,8 @@ export const StandalonePageCommandMenu = () => {
return {
pageType: ContextStorePageType.Standalone,
isInSidePanel: false,
isPageInEditMode: false,
isDashboardPageLayoutInEditMode: false,
isLayoutCustomizationModeEnabled,
favoriteRecordIds: [],
isSelectAll: false,
hasAnySoftDeleteFilterOnView: false,
@@ -74,7 +79,12 @@ export const StandalonePageCommandMenu = () => {
objectMetadataItem: {},
objectMetadataLabel: '',
};
}, [currentWorkspace?.featureFlags, objectMetadataItems, store]);
}, [
currentWorkspace?.featureFlags,
isLayoutCustomizationModeEnabled,
objectMetadataItems,
store,
]);
const filteredCommandMenuItems = useMemo(() => {
return commandMenuItems
packages/twenty-front/src/modules/command-menu-item/constants/EmptyCommandMenuContextApi.ts
+2 -1
View File
@@ -6,7 +6,8 @@ import {
export const EMPTY_COMMAND_MENU_CONTEXT_API: CommandMenuContextApi = {
pageType: ContextStorePageType.Index,
isInSidePanel: false,
isPageInEditMode: false,
isDashboardPageLayoutInEditMode: false,
isLayoutCustomizationModeEnabled: false,
favoriteRecordIds: [],
isSelectAll: false,
hasAnySoftDeleteFilterOnView: false,
packages/twenty-front/src/modules/command-menu-item/hooks/__tests__/useCloseCommandMenu.test.tsx
+2 -1
View File
@@ -46,7 +46,8 @@ const getWrapper =
commandMenuContextApi: {
pageType: ContextStorePageType.Index,
isInSidePanel,
isPageInEditMode: false,
isDashboardPageLayoutInEditMode: false,
isLayoutCustomizationModeEnabled: false,
favoriteRecordIds: [],
isSelectAll: false,
hasAnySoftDeleteFilterOnView: false,
packages/twenty-front/src/modules/command-menu-item/hooks/useCommandMenuContextApi.ts
+19 -5
View File
@@ -4,15 +4,17 @@ import { ContextStoreComponentInstanceContext } from '@/context-store/states/con
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { contextStoreCurrentPageTypeComponentState } from '@/context-store/states/contextStoreCurrentPageTypeComponentState';
import { contextStoreIsPageInEditModeComponentState } from '@/context-store/states/contextStoreIsPageInEditModeComponentState';
import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
import { useNavigationMenuItemsData } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemsData';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { useObjectPermissionsForObject } from '@/object-record/hooks/useObjectPermissionsForObject';
import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
import { hasAnySoftDeleteFilterOnViewComponentSelector } from '@/object-record/record-filter/states/hasAnySoftDeleteFilterOnView';
import { recordStoreRecordsSelector } from '@/object-record/record-store/states/selectors/recordStoreRecordsSelector';
import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/utils/getRecordIndexIdFromObjectNamePluralAndViewId';
import { currentPageLayoutIdState } from '@/page-layout/states/currentPageLayoutIdState';
import { isDashboardInEditModeComponentState } from '@/page-layout/states/isDashboardInEditModeComponentState';
import { SIDE_PANEL_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelComponentInstanceId';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useAtomComponentSelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentSelectorValue';
@@ -20,7 +22,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { isNonEmptyArray } from '@sniptt/guards';
import { useStore } from 'jotai';
import { useAtomValue, useStore } from 'jotai';
import {
ContextStorePageType,
type CommandMenuContextApi,
@@ -77,6 +79,11 @@ export const useCommandMenuContextApi = (): CommandMenuContextApi => {
{ recordIds: recordIds ?? [] },
);
const currentPageLayoutId = useAtomStateValue(currentPageLayoutIdState);
const dashboardPageLayoutIdForCommandMenu =
selectedRecords[0]?.pageLayoutId ?? currentPageLayoutId ?? '';
const objectPermissionsFromHook = useObjectPermissionsForObject(
objectMetadataItem?.id ?? '',
);
@@ -111,8 +118,14 @@ export const useCommandMenuContextApi = (): CommandMenuContextApi => {
contextStoreCurrentPageTypeComponentState,
);
const contextStoreIsPageInEditMode = useAtomComponentStateValue(
contextStoreIsPageInEditModeComponentState,
const isDashboardInEditMode = useAtomValue(
isDashboardInEditModeComponentState.atomFamily({
instanceId: dashboardPageLayoutIdForCommandMenu,
}),
);
const isLayoutCustomizationModeEnabled = useAtomStateValue(
isLayoutCustomizationModeEnabledState,
);
const pageType = isDefined(contextStoreCurrentPageType)
@@ -154,7 +167,8 @@ export const useCommandMenuContextApi = (): CommandMenuContextApi => {
return {
pageType,
isInSidePanel,
isPageInEditMode: contextStoreIsPageInEditMode,
isDashboardPageLayoutInEditMode: isDashboardInEditMode,
isLayoutCustomizationModeEnabled,
favoriteRecordIds,
isSelectAll,
hasAnySoftDeleteFilterOnView,
packages/twenty-front/src/modules/context-store/states/contextStoreIsPageInEditModeComponentState.ts
-9
View File
@@ -1,9 +0,0 @@
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { createAtomComponentState } from '@/ui/utilities/state/jotai/utils/createAtomComponentState';
export const contextStoreIsPageInEditModeComponentState =
createAtomComponentState<boolean>({
key: 'contextStoreIsPageInEditModeComponentState',
defaultValue: false,
componentInstanceContext: ContextStoreComponentInstanceContext,
});
packages/twenty-front/src/modules/layout-customization/hooks/useEnterLayoutCustomizationMode.ts
+26 -1
View File
@@ -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 };
};
packages/twenty-front/src/modules/page-layout/hooks/useSetIsPageLayoutInEditMode.ts
-11
View File
@@ -1,5 +1,3 @@
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { contextStoreIsPageInEditModeComponentState } from '@/context-store/states/contextStoreIsPageInEditModeComponentState';
import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
import { currentPageLayoutIdState } from '@/page-layout/states/currentPageLayoutIdState';
@@ -27,12 +25,6 @@ export const useSetIsPageLayoutInEditMode = (pageLayoutIdFromProps: string) => {
pageLayoutId,
);
const contextStoreIsFullTabWidgetInEditModeState =
useAtomComponentStateCallbackState(
contextStoreIsPageInEditModeComponentState,
MAIN_CONTEXT_STORE_INSTANCE_ID,
);
const fieldsWidgetGroupsDraftState = useAtomComponentStateCallbackState(
fieldsWidgetGroupsDraftComponentState,
pageLayoutId,
@@ -93,15 +85,12 @@ export const useSetIsPageLayoutInEditMode = (pageLayoutIdFromProps: string) => {
store.set(isDashboardInEditModeState, value);
store.set(contextStoreIsFullTabWidgetInEditModeState, value);
if (value) {
store.set(currentPageLayoutIdState.atom, pageLayoutId);
}
},
[
isDashboardInEditModeState,
contextStoreIsFullTabWidgetInEditModeState,
fieldsWidgetGroupsDraftState,
fieldsWidgetUngroupedFieldsDraftState,
fieldsWidgetEditorModeDraftState,
packages/twenty-front/src/modules/side-panel/hooks/useOpenRecordInSidePanel.ts
-12
View File
@@ -7,7 +7,6 @@ import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainCo
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { contextStoreCurrentPageTypeComponentState } from '@/context-store/states/contextStoreCurrentPageTypeComponentState';
import { contextStoreIsPageInEditModeComponentState } from '@/context-store/states/contextStoreIsPageInEditModeComponentState';
import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
import { objectMetadataItemFamilySelector } from '@/object-metadata/states/objectMetadataItemFamilySelector';
@@ -137,17 +136,6 @@ export const useOpenRecordInSidePanel = () => {
),
);
store.set(
contextStoreIsPageInEditModeComponentState.atomFamily({
instanceId: pageComponentInstanceId,
}),
store.get(
contextStoreIsPageInEditModeComponentState.atomFamily({
instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID,
}),
),
);
const currentMorphItems = store.get(
sidePanelNavigationMorphItemsByPageState.atom,
);