From 9b0c74251ff5b335f44a1d46c1f0a02a2c01dbba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Tue, 5 Nov 2024 11:01:08 +0100
Subject: [PATCH] Fix actions setter when opening the command menu (#8263)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix standard actions overriding navigate and create commands when
opening the command menu.

Before fix:
<img width="493" alt="Capture d’écran 2024-10-31 à 18 08 56"
src="https://github.com/user-attachments/assets/015bd798-baa4-4f84-8886-e355c0ef1455">

After fix:
<img width="499" alt="Capture d’écran 2024-10-31 à 18 08 34"
src="https://github.com/user-attachments/assets/02ba7fc4-ec90-4c13-9830-d884c0da37d9">

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../app/components/AppRouterProviders.tsx        |  2 --
 .../app/effect-components/CommandMenuEffect.tsx  | 16 ----------------
 .../modules/command-menu/hooks/useCommandMenu.ts | 12 ++++++++++--
 3 files changed, 10 insertions(+), 20 deletions(-)
 delete mode 100644 packages/twenty-front/src/modules/app/effect-components/CommandMenuEffect.tsx

diff --git a/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx b/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx
index df7bb083f9dc..7f64849a27e0 100644
--- a/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx
+++ b/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx
@@ -1,5 +1,4 @@
 import { ApolloProvider } from '@/apollo/components/ApolloProvider';
-import { CommandMenuEffect } from '@/app/effect-components/CommandMenuEffect';
 import { GotoHotkeysEffectsProvider } from '@/app/effect-components/GotoHotkeysEffectsProvider';
 import { PageChangeEffect } from '@/app/effect-components/PageChangeEffect';
 import { AuthProvider } from '@/auth/components/AuthProvider';
@@ -44,7 +43,6 @@ export const AppRouterProviders = () => {
                           <DialogManager>
                             <StrictMode>
                               <PromiseRejectionEffect />
-                              <CommandMenuEffect />
                               <GotoHotkeysEffectsProvider />
                               <PageTitle title={pageTitle} />
                               <Outlet />
diff --git a/packages/twenty-front/src/modules/app/effect-components/CommandMenuEffect.tsx b/packages/twenty-front/src/modules/app/effect-components/CommandMenuEffect.tsx
deleted file mode 100644
index b210ae724276..000000000000
--- a/packages/twenty-front/src/modules/app/effect-components/CommandMenuEffect.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
-
-import { COMMAND_MENU_COMMANDS } from '@/command-menu/constants/CommandMenuCommands';
-import { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState';
-
-export const CommandMenuEffect = () => {
-  const setCommands = useSetRecoilState(commandMenuCommandsState);
-
-  const commands = Object.values(COMMAND_MENU_COMMANDS);
-  useEffect(() => {
-    setCommands(commands);
-  }, [commands, setCommands]);
-
-  return <></>;
-};
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
index 06fc6469bce3..c1bf10c69c4e 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
+++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
@@ -43,6 +43,8 @@ export const useCommandMenu = () => {
             }),
           );
 
+          const commands = Object.values(COMMAND_MENU_COMMANDS);
+
           const actionCommands = actionMenuEntries
             .getValue()
             ?.map((actionMenuEntry) => ({
@@ -53,7 +55,7 @@ export const useCommandMenu = () => {
               type: CommandType.Action,
             }));
 
-          setCommands(actionCommands);
+          setCommands([...commands, ...actionCommands]);
         }
 
         setIsCommandMenuOpened(true);
@@ -76,11 +78,17 @@ export const useCommandMenu = () => {
 
         if (isCommandMenuOpened) {
           setIsCommandMenuOpened(false);
+          setCommands([]);
           resetSelectedItem();
           goBackToPreviousHotkeyScope();
         }
       },
-    [goBackToPreviousHotkeyScope, resetSelectedItem, setIsCommandMenuOpened],
+    [
+      goBackToPreviousHotkeyScope,
+      resetSelectedItem,
+      setCommands,
+      setIsCommandMenuOpened,
+    ],
   );
 
   const toggleCommandMenu = useRecoilCallback(