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.

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;

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();

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}
+    />
   );
 };

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}
     />
   );
 };

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 };

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuSearchRecords.tsx

@@ -76,7 +76,7 @@ export const useCommandMenuSearchRecords = () => {
                         objectNameSingular: CoreObjectNameSingular.Note,
                       });
                 }}
-                preventCommandMenuClosing
+                closeSidePanelOnCommandMenuListActionExecution={false}
               />
             ),
           };