diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelRouter.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelRouter.tsx index 55faff84ac..885e23987d 100644 --- a/packages/twenty-front/src/modules/side-panel/components/SidePanelRouter.tsx +++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelRouter.tsx @@ -1,11 +1,16 @@ import { CommandMenuContextProvider } from '@/command-menu-item/contexts/CommandMenuContextProvider'; +import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId'; +import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState'; +import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState'; import { SidePanelContainer } from '@/side-panel/components/SidePanelContainer'; import { SidePanelSubPageRouter } from '@/side-panel/components/SidePanelSubPageRouter'; import { SidePanelTopBar } from '@/side-panel/components/SidePanelTopBar'; import { SIDE_PANEL_PAGES_CONFIG } from '@/side-panel/constants/SidePanelPagesConfig'; +import { isPageLayoutSidePanelPage } from '@/side-panel/pages/page-layout/utils/isPageLayoutSidePanelPage'; import { SidePanelPageComponentInstanceContext } from '@/side-panel/states/contexts/SidePanelPageComponentInstanceContext'; import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState'; import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState'; +import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { styled } from '@linaria/react'; import { motion } from 'framer-motion'; @@ -23,9 +28,29 @@ export const SidePanelRouter = () => { const sidePanelPage = useAtomStateValue(sidePanelPageState); const sidePanelPageInfo = useAtomStateValue(sidePanelPageInfoState); - const rawPageComponent = isDefined(sidePanelPage) - ? SIDE_PANEL_PAGES_CONFIG.get(sidePanelPage) - : null; + const contextStoreTargetedRecordsRule = useAtomComponentStateValue( + contextStoreTargetedRecordsRuleComponentState, + MAIN_CONTEXT_STORE_INSTANCE_ID, + ); + const contextStoreCurrentObjectMetadataItemId = useAtomComponentStateValue( + contextStoreCurrentObjectMetadataItemIdComponentState, + MAIN_CONTEXT_STORE_INSTANCE_ID, + ); + + const hasSingleTargetedRecord = + contextStoreTargetedRecordsRule.mode === 'selection' && + contextStoreTargetedRecordsRule.selectedRecordIds.length === 1; + + const shouldSkipPageLayoutPage = + isDefined(sidePanelPage) && + isPageLayoutSidePanelPage(sidePanelPage) && + (!isDefined(contextStoreCurrentObjectMetadataItemId) || + !hasSingleTargetedRecord); + + const rawPageComponent = + isDefined(sidePanelPage) && !shouldSkipPageLayoutPage + ? SIDE_PANEL_PAGES_CONFIG.get(sidePanelPage) + : null; const sidePanelPageComponent = isDefined(rawPageComponent) && React.isValidElement(rawPageComponent)