From e33f2fadd846906d8d4e7df4dc8f6b0de22c0298 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Wed, 11 Jun 2025 18:38:04 +0200
Subject: [PATCH] Close command menu after destroy (#12525)

Added an argument `closeCommandMenuFromShowPageOptionsMenu` which allows
us to not only close the parent action menu if the action is located
inside the record page action menu dropdown, but to also close the
command menu after, which is the behavior we want for the destroy
action.
---
 .../action-menu/actions/components/Action.tsx | 11 +++++++---
 .../actions/components/ActionModal.tsx        |  9 +++++++-
 ...eNewTableRecordNoSelectionRecordAction.tsx |  5 ++++-
 .../components/DestroySingleRecordAction.tsx  |  1 +
 .../action-menu/hooks/useCloseActionMenu.ts   | 21 +++++++++++++++++--
 .../hooks/useCommandMenuSearchRecords.tsx     |  2 +-
 6 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/action-menu/actions/components/Action.tsx b/packages/twenty-front/src/modules/action-menu/actions/components/Action.tsx
index 6129626e2a..7be79eb22a 100644
--- a/packages/twenty-front/src/modules/action-menu/actions/components/Action.tsx
+++ b/packages/twenty-front/src/modules/action-menu/actions/components/Action.tsx
@@ -5,14 +5,19 @@ import { useContext } from 'react';
 
 export const Action = ({
   onClick,
-  preventCommandMenuClosing,
+  closeSidePanelOnShowPageOptionsActionExecution = false,
+  closeSidePanelOnCommandMenuListActionExecution = true,
 }: {
   onClick: () => void;
-  preventCommandMenuClosing?: boolean;
+  closeSidePanelOnShowPageOptionsActionExecution?: boolean;
+  closeSidePanelOnCommandMenuListActionExecution?: boolean;
 }) => {
   const actionConfig = useContext(ActionConfigContext);
 
-  const { closeActionMenu } = useCloseActionMenu(preventCommandMenuClosing);
+  const { closeActionMenu } = useCloseActionMenu({
+    closeSidePanelOnShowPageOptionsActionExecution,
+    closeSidePanelOnCommandMenuListActionExecution,
+  });
 
   if (!actionConfig) {
     return null;
diff --git a/packages/twenty-front/src/modules/action-menu/actions/components/ActionModal.tsx b/packages/twenty-front/src/modules/action-menu/actions/components/ActionModal.tsx
index 650e2ea73e..23e21b191c 100644
--- a/packages/twenty-front/src/modules/action-menu/actions/components/ActionModal.tsx
+++ b/packages/twenty-front/src/modules/action-menu/actions/components/ActionModal.tsx
@@ -18,6 +18,8 @@ export type ActionModalProps = {
   confirmButtonText?: string;
   confirmButtonAccent?: ButtonAccent;
   isLoading?: boolean;
+  closeSidePanelOnShowPageOptionsActionExecution?: boolean;
+  closeSidePanelOnCommandMenuListActionExecution?: boolean;
 };
 
 export const ActionModal = ({
@@ -27,10 +29,15 @@ export const ActionModal = ({
   confirmButtonText = 'Confirm',
   confirmButtonAccent = 'danger',
   isLoading = false,
+  closeSidePanelOnShowPageOptionsActionExecution,
+  closeSidePanelOnCommandMenuListActionExecution,
 }: ActionModalProps) => {
   const { openModal } = useModal();
 
-  const { closeActionMenu } = useCloseActionMenu();
+  const { closeActionMenu } = useCloseActionMenu({
+    closeSidePanelOnShowPageOptionsActionExecution,
+    closeSidePanelOnCommandMenuListActionExecution,
+  });
 
   const handleConfirmClick = () => {
     onConfirmClick();
diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/no-selection/components/CreateNewTableRecordNoSelectionRecordAction.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/no-selection/components/CreateNewTableRecordNoSelectionRecordAction.tsx
index 4cfbba8c21..0c830c5811 100644
--- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/no-selection/components/CreateNewTableRecordNoSelectionRecordAction.tsx
+++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/no-selection/components/CreateNewTableRecordNoSelectionRecordAction.tsx
@@ -10,6 +10,9 @@ export const CreateNewTableRecordNoSelectionRecordAction = () => {
   });
 
   return (
-    <Action onClick={() => createNewIndexRecord()} preventCommandMenuClosing />
+    <Action
+      onClick={() => createNewIndexRecord()}
+      closeSidePanelOnCommandMenuListActionExecution={false}
+    />
   );
 };
diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/DestroySingleRecordAction.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/DestroySingleRecordAction.tsx
index 7410843da6..e7191a169f 100644
--- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/DestroySingleRecordAction.tsx
+++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/DestroySingleRecordAction.tsx
@@ -36,6 +36,7 @@ export const DestroySingleRecordAction = () => {
       subtitle="Are you sure you want to destroy this record? It cannot be recovered anymore."
       onConfirmClick={handleDeleteClick}
       confirmButtonText="Permanently Destroy Record"
+      closeSidePanelOnShowPageOptionsActionExecution={true}
     />
   );
 };
diff --git a/packages/twenty-front/src/modules/action-menu/hooks/useCloseActionMenu.ts b/packages/twenty-front/src/modules/action-menu/hooks/useCloseActionMenu.ts
index ab1756968d..d3f8edd2b1 100644
--- a/packages/twenty-front/src/modules/action-menu/hooks/useCloseActionMenu.ts
+++ b/packages/twenty-front/src/modules/action-menu/hooks/useCloseActionMenu.ts
@@ -8,7 +8,13 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 
-export const useCloseActionMenu = (preventCommandMenuClosing?: boolean) => {
+export const useCloseActionMenu = ({
+  closeSidePanelOnShowPageOptionsActionExecution = false,
+  closeSidePanelOnCommandMenuListActionExecution = true,
+}: {
+  closeSidePanelOnShowPageOptionsActionExecution?: boolean;
+  closeSidePanelOnCommandMenuListActionExecution?: boolean;
+} = {}) => {
   const { actionMenuType, isInRightDrawer } = useContext(ActionMenuContext);
 
   const { closeCommandMenu } = useCommandMenu();
@@ -25,7 +31,10 @@ export const useCloseActionMenu = (preventCommandMenuClosing?: boolean) => {
 
   const closeActionMenu = () => {
     if (actionMenuType === 'command-menu') {
-      if (isDefined(preventCommandMenuClosing) && preventCommandMenuClosing) {
+      if (
+        isDefined(closeSidePanelOnCommandMenuListActionExecution) &&
+        !closeSidePanelOnCommandMenuListActionExecution
+      ) {
         return;
       }
       closeCommandMenu();
@@ -37,6 +46,14 @@ export const useCloseActionMenu = (preventCommandMenuClosing?: boolean) => {
     ) {
       closeDropdown(dropdownId);
     }
+
+    if (
+      actionMenuType === 'command-menu-show-page-action-menu-dropdown' &&
+      isDefined(closeSidePanelOnShowPageOptionsActionExecution) &&
+      closeSidePanelOnShowPageOptionsActionExecution
+    ) {
+      closeCommandMenu();
+    }
   };
 
   return { closeActionMenu };
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuSearchRecords.tsx b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuSearchRecords.tsx
index 799bdad984..4916a31635 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuSearchRecords.tsx
+++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuSearchRecords.tsx
@@ -76,7 +76,7 @@ export const useCommandMenuSearchRecords = () => {
                         objectNameSingular: CoreObjectNameSingular.Note,
                       });
                 }}
-                preventCommandMenuClosing
+                closeSidePanelOnCommandMenuListActionExecution={false}
               />
             ),
           };