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 6129626e2..7be79eb22 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 650e2ea73..23e21b191 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 4cfbba8c2..0c830c581 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 7410843da..e7191a169 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 ab1756968..d3f8edd2b 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 799bdad98..4916a3163 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}
               />
             ),
           };