From 9f9302136f7c0c137f49372ad8b3f0e512cc163a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Thu, 13 Mar 2025 08:09:49 +0100 Subject: [PATCH] Fix command O delete action on record page (#10820) There were two issues, the hotkey scope wasn't set properly when opening the dropdown with the shortcut and we didn't close the command menu upon completion of the delete action. Before: https://github.com/user-attachments/assets/817442ae-6db4-4fc5-a637-4e2e3d9b9b70 After: https://github.com/user-attachments/assets/b6fd07f6-6c2f-4b29-9162-f29b661ad358 --- ....tsx => CommandMenuActionMenuDropdown.tsx} | 12 ++++++---- .../RecordShowRightDrawerActionMenu.tsx | 22 ++++++++++++++++--- .../RecordShowRightDrawerOpenRecordButton.tsx | 4 ++-- ...CommandMenuActionMenuDropdown.stories.tsx} | 10 ++++----- ...ommandMenuActionMenuDropdownHotkeyScope.ts | 3 +++ ...ightDrawerActionMenuDropdownHotkeyScope.ts | 3 --- 6 files changed, 37 insertions(+), 17 deletions(-) rename packages/twenty-front/src/modules/action-menu/components/{RightDrawerActionMenuDropdown.tsx => CommandMenuActionMenuDropdown.tsx} (88%) rename packages/twenty-front/src/modules/action-menu/components/__stories__/{RightDrawerActionMenuDropdown.stories.tsx => CommandMenuActionMenuDropdown.stories.tsx} (93%) create mode 100644 packages/twenty-front/src/modules/action-menu/types/CommandMenuActionMenuDropdownHotkeyScope.ts delete mode 100644 packages/twenty-front/src/modules/action-menu/types/RightDrawerActionMenuDropdownHotkeyScope.ts diff --git a/packages/twenty-front/src/modules/action-menu/components/RightDrawerActionMenuDropdown.tsx b/packages/twenty-front/src/modules/action-menu/components/CommandMenuActionMenuDropdown.tsx similarity index 88% rename from packages/twenty-front/src/modules/action-menu/components/RightDrawerActionMenuDropdown.tsx rename to packages/twenty-front/src/modules/action-menu/components/CommandMenuActionMenuDropdown.tsx index cedd1f732..0e706bacf 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RightDrawerActionMenuDropdown.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/CommandMenuActionMenuDropdown.tsx @@ -1,7 +1,7 @@ import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector'; import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; import { ActionMenuEntryScope } from '@/action-menu/types/ActionMenuEntry'; -import { RightDrawerActionMenuDropdownHotkeyScope } from '@/action-menu/types/RightDrawerActionMenuDropdownHotkeyScope'; +import { CommandMenuActionMenuDropdownHotkeyScope } from '@/action-menu/types/CommandMenuActionMenuDropdownHotkeyScope'; import { getRightDrawerActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getRightDrawerActionMenuDropdownIdFromActionMenuId'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; @@ -15,7 +15,7 @@ import { i18n } from '@lingui/core'; import { Key } from 'ts-key-enum'; import { Button, getOsControlSymbol, MenuItem } from 'twenty-ui'; -export const RightDrawerActionMenuDropdown = () => { +export const CommandMenuActionMenuDropdown = () => { const actionMenuEntries = useRecoilComponentValueV2( actionMenuEntriesComponentSelector, ); @@ -35,7 +35,7 @@ export const RightDrawerActionMenuDropdown = () => { getRightDrawerActionMenuDropdownIdFromActionMenuId(actionMenuId), ); }, - RightDrawerActionMenuDropdownHotkeyScope.RightDrawerActionMenuDropdown, + CommandMenuActionMenuDropdownHotkeyScope.CommandMenuActionMenuDropdown, [closeDropdown], ); @@ -44,6 +44,10 @@ export const RightDrawerActionMenuDropdown = () => { () => { openDropdown( getRightDrawerActionMenuDropdownIdFromActionMenuId(actionMenuId), + { + scope: + CommandMenuActionMenuDropdownHotkeyScope.CommandMenuActionMenuDropdown, + }, ); }, AppHotkeyScope.CommandMenuOpen, @@ -57,7 +61,7 @@ export const RightDrawerActionMenuDropdown = () => { )} dropdownHotkeyScope={{ scope: - RightDrawerActionMenuDropdownHotkeyScope.RightDrawerActionMenuDropdown, + CommandMenuActionMenuDropdownHotkeyScope.CommandMenuActionMenuDropdown, }} data-select-disable clickableComponent={ diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerActionMenu.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerActionMenu.tsx index c1fb24a2a..ac81bcbd4 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerActionMenu.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerActionMenu.tsx @@ -1,9 +1,11 @@ import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter'; +import { SingleRecordActionKeys } from '@/action-menu/actions/record-actions/single-record/types/SingleRecordActionsKey'; import { RecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionMenuEntriesSetter'; import { RunWorkflowRecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RunWorkflowRecordAgnosticActionMenuEntriesSetter'; import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals'; -import { RightDrawerActionMenuDropdown } from '@/action-menu/components/RightDrawerActionMenuDropdown'; +import { CommandMenuActionMenuDropdown } from '@/action-menu/components/CommandMenuActionMenuDropdown'; import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext'; +import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState'; import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; @@ -24,11 +26,25 @@ export const RecordShowRightDrawerActionMenu = () => { FeatureFlagKey.IsWorkflowEnabled, ); + const { toggleCommandMenu } = useCommandMenu(); + return ( <> {contextStoreCurrentObjectMetadataItem && ( - - + { + if ( + key === SingleRecordActionKeys.DELETE || + key === SingleRecordActionKeys.DESTROY + ) { + toggleCommandMenu(); + } + }, + }} + > + {isDefined(contextStoreTargetedRecordsRule) && 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 5bb515f07..cd50e3ef2 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx @@ -1,4 +1,4 @@ -import { RightDrawerActionMenuDropdownHotkeyScope } from '@/action-menu/types/RightDrawerActionMenuDropdownHotkeyScope'; +import { CommandMenuActionMenuDropdownHotkeyScope } from '@/action-menu/types/CommandMenuActionMenuDropdownHotkeyScope'; import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; import { getLinkToShowPage } from '@/object-metadata/utils/getLinkToShowPage'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; @@ -47,7 +47,7 @@ export const RecordShowRightDrawerOpenRecordButton = ({ useScopedHotkeys( ['ctrl+Enter,meta+Enter'], handleOpenRecord, - RightDrawerActionMenuDropdownHotkeyScope.RightDrawerActionMenuDropdown, + CommandMenuActionMenuDropdownHotkeyScope.CommandMenuActionMenuDropdown, [closeCommandMenu, navigate, objectNameSingular, record.id], ); diff --git a/packages/twenty-front/src/modules/action-menu/components/__stories__/RightDrawerActionMenuDropdown.stories.tsx b/packages/twenty-front/src/modules/action-menu/components/__stories__/CommandMenuActionMenuDropdown.stories.tsx similarity index 93% rename from packages/twenty-front/src/modules/action-menu/components/__stories__/RightDrawerActionMenuDropdown.stories.tsx rename to packages/twenty-front/src/modules/action-menu/components/__stories__/CommandMenuActionMenuDropdown.stories.tsx index 69539ae3d..852f78053 100644 --- a/packages/twenty-front/src/modules/action-menu/components/__stories__/RightDrawerActionMenuDropdown.stories.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/__stories__/CommandMenuActionMenuDropdown.stories.tsx @@ -2,7 +2,7 @@ import { expect, jest } from '@storybook/jest'; import { Meta, StoryObj } from '@storybook/react'; import { RecoilRoot } from 'recoil'; -import { RightDrawerActionMenuDropdown } from '@/action-menu/components/RightDrawerActionMenuDropdown'; +import { CommandMenuActionMenuDropdown } from '@/action-menu/components/CommandMenuActionMenuDropdown'; import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState'; import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; import { @@ -28,9 +28,9 @@ const deleteMock = jest.fn(); const addToFavoritesMock = jest.fn(); const exportMock = jest.fn(); -const meta: Meta = { - title: 'Modules/ActionMenu/RightDrawerActionMenuDropdown', - component: RightDrawerActionMenuDropdown, +const meta: Meta = { + title: 'Modules/ActionMenu/CommandMenuActionMenuDropdown', + component: CommandMenuActionMenuDropdown, decorators: [ I18nFrontDecorator, (Story) => ( @@ -109,7 +109,7 @@ const meta: Meta = { export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { args: { diff --git a/packages/twenty-front/src/modules/action-menu/types/CommandMenuActionMenuDropdownHotkeyScope.ts b/packages/twenty-front/src/modules/action-menu/types/CommandMenuActionMenuDropdownHotkeyScope.ts new file mode 100644 index 000000000..e4abf9ce6 --- /dev/null +++ b/packages/twenty-front/src/modules/action-menu/types/CommandMenuActionMenuDropdownHotkeyScope.ts @@ -0,0 +1,3 @@ +export enum CommandMenuActionMenuDropdownHotkeyScope { + CommandMenuActionMenuDropdown = 'command-menu-action-menu-dropdown', +} diff --git a/packages/twenty-front/src/modules/action-menu/types/RightDrawerActionMenuDropdownHotkeyScope.ts b/packages/twenty-front/src/modules/action-menu/types/RightDrawerActionMenuDropdownHotkeyScope.ts deleted file mode 100644 index 74505c320..000000000 --- a/packages/twenty-front/src/modules/action-menu/types/RightDrawerActionMenuDropdownHotkeyScope.ts +++ /dev/null @@ -1,3 +0,0 @@ -export enum RightDrawerActionMenuDropdownHotkeyScope { - RightDrawerActionMenuDropdown = 'right-drawer-action-menu-dropdown', -}