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

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={

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 && (
-        <ActionMenuContext.Provider value={{ isInRightDrawer: true }}>
-          <RightDrawerActionMenuDropdown />
+        <ActionMenuContext.Provider
+          value={{
+            isInRightDrawer: true,
+            onActionExecutedCallback: ({ key }) => {
+              if (
+                key === SingleRecordActionKeys.DELETE ||
+                key === SingleRecordActionKeys.DESTROY
+              ) {
+                toggleCommandMenu();
+              }
+            },
+          }}
+        >
+          <CommandMenuActionMenuDropdown />
           <ActionMenuConfirmationModals />
 
           {isDefined(contextStoreTargetedRecordsRule) &&

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],
   );
 

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<typeof RightDrawerActionMenuDropdown> = {
-  title: 'Modules/ActionMenu/RightDrawerActionMenuDropdown',
-  component: RightDrawerActionMenuDropdown,
+const meta: Meta<typeof CommandMenuActionMenuDropdown> = {
+  title: 'Modules/ActionMenu/CommandMenuActionMenuDropdown',
+  component: CommandMenuActionMenuDropdown,
   decorators: [
     I18nFrontDecorator,
     (Story) => (
@@ -109,7 +109,7 @@ const meta: Meta<typeof RightDrawerActionMenuDropdown> = {
 
 export default meta;
 
-type Story = StoryObj<typeof RightDrawerActionMenuDropdown>;
+type Story = StoryObj<typeof CommandMenuActionMenuDropdown>;
 
 export const Default: Story = {
   args: {

packages/twenty-front/src/modules/action-menu/types/CommandMenuActionMenuDropdownHotkeyScope.ts

@@ -0,0 +1,3 @@
+export enum CommandMenuActionMenuDropdownHotkeyScope {
+  CommandMenuActionMenuDropdown = 'command-menu-action-menu-dropdown',
+}

packages/twenty-front/src/modules/action-menu/types/RightDrawerActionMenuDropdownHotkeyScope.ts

@@ -1,3 +0,0 @@
-export enum RightDrawerActionMenuDropdownHotkeyScope {
-  RightDrawerActionMenuDropdown = 'right-drawer-action-menu-dropdown',
-}