diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx index aecfae3915..134027f437 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx @@ -2,6 +2,7 @@ import { ActionMenuComponentInstanceContext } from '@/action-menu/states/context import { getRightDrawerActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getRightDrawerActionMenuDropdownIdFromActionMenuId'; import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId'; import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; +import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState'; import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext'; import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId'; import { contextStoreRecordShowParentViewComponentState } from '@/context-store/states/contextStoreRecordShowParentViewComponentState'; @@ -16,9 +17,9 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext'; import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState'; import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue'; +import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue'; import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState'; import { t } from '@lingui/core/macro'; -import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue'; import { useStore } from 'jotai'; import { useCallback } from 'react'; import { AppPath } from 'twenty-shared/types'; @@ -94,10 +95,15 @@ export const RecordShowRightDrawerOpenRecordButton = ({ const parentView = store.get(parentViewState); - if (parentView?.parentViewObjectNameSingular !== objectNameSingular) { + if ( + isDefined(parentView) && + parentView.parentViewObjectNameSingular !== objectNameSingular + ) { store.set(parentViewState, undefined); } + store.set(commandMenuNavigationStackState.atom, []); + navigate(AppPath.RecordShowPage, { objectNameSingular, objectRecordId: recordId, diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup.ts b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup.ts index aad1c1c74a..226ecfcf0f 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup.ts +++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup.ts @@ -24,10 +24,10 @@ import { getShowPageTabListComponentId } from '@/ui/layout/show-page/utils/getSh import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState'; import { WORKFLOW_LOGIC_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-steps/workflow-actions/code-action/constants/WorkflowLogicFunctionTabListComponentId'; import { WorkflowLogicFunctionTabId } from '@/workflow/workflow-steps/workflow-actions/code-action/types/WorkflowLogicFunctionTabId'; +import { useStore } from 'jotai'; import { useCallback } from 'react'; import { CommandMenuPages } from 'twenty-shared/types'; import { isDefined } from 'twenty-shared/utils'; -import { useStore } from 'jotai'; export const useCommandMenuCloseAnimationCompleteCleanup = () => { const store = useStore(); @@ -39,96 +39,101 @@ export const useCommandMenuCloseAnimationCompleteCleanup = () => { const { closeDropdown } = useCloseDropdown(); - const commandMenuCloseAnimationCompleteCleanup = useCallback(() => { - closeDropdown(COMMAND_MENU_CONTEXT_CHIP_GROUPS_DROPDOWN_ID); + const commandMenuCloseAnimationCompleteCleanup = useCallback( + (options?: { emitSidePanelCloseEvent?: boolean }) => { + closeDropdown(COMMAND_MENU_CONTEXT_CHIP_GROUPS_DROPDOWN_ID); - // Snapshot values before any mutations (Jotai store.get is live and - // reflects the latest state, so we capture before mutating). - const currentPage = store.get(commandMenuPageState.atom); - const targetedRecordsRule = store.get( - contextStoreTargetedRecordsRuleComponentState.atomFamily({ - instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID, - }), - ); - const morphItemsByPage = store.get( - commandMenuNavigationMorphItemsByPageState.atom, - ); + // Snapshot values before any mutations (Jotai store.get is live and + // reflects the latest state, so we capture before mutating). + const currentPage = store.get(commandMenuPageState.atom); + const targetedRecordsRule = store.get( + contextStoreTargetedRecordsRuleComponentState.atomFamily({ + instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID, + }), + ); + const morphItemsByPage = store.get( + commandMenuNavigationMorphItemsByPageState.atom, + ); - resetContextStoreStates(COMMAND_MENU_COMPONENT_INSTANCE_ID); - resetContextStoreStates(COMMAND_MENU_PREVIOUS_COMPONENT_INSTANCE_ID); + resetContextStoreStates(COMMAND_MENU_COMPONENT_INSTANCE_ID); + resetContextStoreStates(COMMAND_MENU_PREVIOUS_COMPONENT_INSTANCE_ID); - const isPageLayoutEditingPage = - currentPage === CommandMenuPages.PageLayoutWidgetTypeSelect || - currentPage === CommandMenuPages.PageLayoutGraphTypeSelect || - currentPage === CommandMenuPages.PageLayoutIframeSettings || - currentPage === CommandMenuPages.PageLayoutTabSettings; + const isPageLayoutEditingPage = + currentPage === CommandMenuPages.PageLayoutWidgetTypeSelect || + currentPage === CommandMenuPages.PageLayoutGraphTypeSelect || + currentPage === CommandMenuPages.PageLayoutIframeSettings || + currentPage === CommandMenuPages.PageLayoutTabSettings; - if (isPageLayoutEditingPage) { - if ( - targetedRecordsRule.mode === 'selection' && - targetedRecordsRule.selectedRecordIds.length === 1 - ) { - const recordId = targetedRecordsRule.selectedRecordIds[0]; - const record = store.get(recordStoreFamilyState.atomFamily(recordId)); + if (isPageLayoutEditingPage) { + if ( + targetedRecordsRule.mode === 'selection' && + targetedRecordsRule.selectedRecordIds.length === 1 + ) { + const recordId = targetedRecordsRule.selectedRecordIds[0]; + const record = store.get(recordStoreFamilyState.atomFamily(recordId)); - if (isDefined(record) && isDefined(record.pageLayoutId)) { - store.set( - pageLayoutEditingWidgetIdComponentState.atomFamily({ - instanceId: record.pageLayoutId, - }), - null, - ); - store.set( - pageLayoutTabSettingsOpenTabIdComponentState.atomFamily({ - instanceId: record.pageLayoutId, - }), - null, - ); - store.set( - pageLayoutDraggedAreaComponentState.atomFamily({ - instanceId: record.pageLayoutId, - }), - null, - ); + if (isDefined(record) && isDefined(record.pageLayoutId)) { + store.set( + pageLayoutEditingWidgetIdComponentState.atomFamily({ + instanceId: record.pageLayoutId, + }), + null, + ); + store.set( + pageLayoutTabSettingsOpenTabIdComponentState.atomFamily({ + instanceId: record.pageLayoutId, + }), + null, + ); + store.set( + pageLayoutDraggedAreaComponentState.atomFamily({ + instanceId: record.pageLayoutId, + }), + null, + ); + } } } - } - store.set(viewableRecordIdState.atom, null); - store.set(commandMenuPageState.atom, CommandMenuPages.Root); - store.set(commandMenuPageInfoState.atom, { - title: undefined, - Icon: undefined, - instanceId: '', - }); - store.set(isCommandMenuOpenedState.atom, false); - store.set(commandMenuSearchState.atom, ''); - store.set(commandMenuNavigationMorphItemsByPageState.atom, new Map()); - store.set(commandMenuNavigationStackState.atom, []); - resetSelectedItem(); - store.set(hasUserSelectedCommandState.atom, false); + store.set(viewableRecordIdState.atom, null); + store.set(commandMenuPageState.atom, CommandMenuPages.Root); + store.set(commandMenuPageInfoState.atom, { + title: undefined, + Icon: undefined, + instanceId: '', + }); + store.set(isCommandMenuOpenedState.atom, false); + store.set(commandMenuSearchState.atom, ''); + store.set(commandMenuNavigationMorphItemsByPageState.atom, new Map()); + store.set(commandMenuNavigationStackState.atom, []); + resetSelectedItem(); + store.set(hasUserSelectedCommandState.atom, false); - emitSidePanelCloseEvent(); - store.set(isCommandMenuClosingState.atom, false); - store.set( - activeTabIdComponentState.atomFamily({ - instanceId: WORKFLOW_LOGIC_FUNCTION_TAB_LIST_COMPONENT_ID, - }), - WorkflowLogicFunctionTabId.CODE, - ); - - for (const [pageId, morphItems] of morphItemsByPage) { + if (options?.emitSidePanelCloseEvent !== false) { + emitSidePanelCloseEvent(); + } + store.set(isCommandMenuClosingState.atom, false); store.set( activeTabIdComponentState.atomFamily({ - instanceId: getShowPageTabListComponentId({ - pageId, - targetObjectId: morphItems[0].recordId, - }), + instanceId: WORKFLOW_LOGIC_FUNCTION_TAB_LIST_COMPONENT_ID, }), - null, + WorkflowLogicFunctionTabId.CODE, ); - } - }, [closeDropdown, resetContextStoreStates, resetSelectedItem, store]); + + for (const [pageId, morphItems] of morphItemsByPage) { + store.set( + activeTabIdComponentState.atomFamily({ + instanceId: getShowPageTabListComponentId({ + pageId, + targetObjectId: morphItems[0].recordId, + }), + }), + null, + ); + } + }, + [closeDropdown, resetContextStoreStates, resetSelectedItem, store], + ); return { commandMenuCloseAnimationCompleteCleanup, diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useNavigateCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useNavigateCommandMenu.ts index 4e9fde0988..b941b7a7f1 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useNavigateCommandMenu.ts +++ b/packages/twenty-front/src/modules/command-menu/hooks/useNavigateCommandMenu.ts @@ -13,11 +13,11 @@ import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpe import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId'; import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack'; import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType'; +import { useStore } from 'jotai'; import { useCallback } from 'react'; import { type CommandMenuPages } from 'twenty-shared/types'; import { type IconComponent } from 'twenty-ui/display'; import { v4 } from 'uuid'; -import { useStore } from 'jotai'; export type CommandMenuNavigationStackItem = { page: CommandMenuPages; @@ -42,7 +42,9 @@ export const useNavigateCommandMenu = () => { const isCommandMenuClosing = store.get(isCommandMenuClosingState.atom); if (isCommandMenuClosing) { - commandMenuCloseAnimationCompleteCleanup(); + commandMenuCloseAnimationCompleteCleanup({ + emitSidePanelCloseEvent: false, + }); } if (isCommandMenuOpened) {