Fix modals being unregistered inside command menu (#9155)

Fix modals being unregistered inside command menu

packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx

@@ -70,6 +70,7 @@ type CommandGroupConfig = {
     key?: string;
     firstHotKey?: string;
     secondHotKey?: string;
+    shouldCloseCommandMenuOnClick?: boolean;
   };
 };
 
@@ -253,6 +254,7 @@ export const CommandMenu = () => {
         id,
         label: `${firstName} ${lastName}`,
         to: `object/person/${id}`,
+        shouldCloseCommandMenuOnClick: true,
       })),
     [people],
   );
@@ -263,6 +265,7 @@ export const CommandMenu = () => {
         id,
         label: name ?? '',
         to: `object/company/${id}`,
+        shouldCloseCommandMenuOnClick: true,
       })),
     [companies],
   );
@@ -273,6 +276,7 @@ export const CommandMenu = () => {
         id,
         label: name ?? '',
         to: `object/opportunity/${id}`,
+        shouldCloseCommandMenuOnClick: true,
       })),
     [opportunities],
   );
@@ -284,6 +288,7 @@ export const CommandMenu = () => {
         label: note.title ?? '',
         to: '',
         onCommandClick: () => openActivityRightDrawer(note.id),
+        shouldCloseCommandMenuOnClick: true,
       })),
     [notes, openActivityRightDrawer],
   );
@@ -295,6 +300,7 @@ export const CommandMenu = () => {
         label: task.title ?? '',
         to: '',
         onCommandClick: () => openActivityRightDrawer(task.id),
+        shouldCloseCommandMenuOnClick: true,
       })),
     [tasks, openActivityRightDrawer],
   );
@@ -307,6 +313,7 @@ export const CommandMenu = () => {
           id: objectRecord.record.id,
           label: objectRecord.recordIdentifier.name,
           to: `object/${objectRecord.objectMetadataItem.nameSingular}/${objectRecord.record.id}`,
+          shouldCloseCommandMenuOnClick: true,
         })),
       );
     });
@@ -488,6 +495,7 @@ export const CommandMenu = () => {
         onClick: command.onCommandClick,
         firstHotKey: command.firstHotKey,
         secondHotKey: command.secondHotKey,
+        shouldCloseCommandMenuOnClick: command.shouldCloseCommandMenuOnClick,
       }),
     },
     {
@@ -501,6 +509,7 @@ export const CommandMenu = () => {
         onClick: command.onCommandClick,
         firstHotKey: command.firstHotKey,
         secondHotKey: command.secondHotKey,
+        shouldCloseCommandMenuOnClick: command.shouldCloseCommandMenuOnClick,
       }),
     },
     {
@@ -520,6 +529,7 @@ export const CommandMenu = () => {
         ),
         firstHotKey: person.firstHotKey,
         secondHotKey: person.secondHotKey,
+        shouldCloseCommandMenuOnClick: true,
       }),
     },
     {
@@ -540,6 +550,7 @@ export const CommandMenu = () => {
         ),
         firstHotKey: company.firstHotKey,
         secondHotKey: company.secondHotKey,
+        shouldCloseCommandMenuOnClick: true,
       }),
     },
     {
@@ -557,6 +568,7 @@ export const CommandMenu = () => {
             placeholder={opportunity.name ?? ''}
           />
         ),
+        shouldCloseCommandMenuOnClick: true,
       }),
     },
     {
@@ -567,6 +579,7 @@ export const CommandMenu = () => {
         Icon: IconNotes,
         label: note.title ?? '',
         onClick: () => openActivityRightDrawer(note.id),
+        shouldCloseCommandMenuOnClick: true,
       }),
     },
     {
@@ -577,6 +590,7 @@ export const CommandMenu = () => {
         Icon: IconCheckbox,
         label: task.title ?? '',
         onClick: () => openActivityRightDrawer(task.id),
+        shouldCloseCommandMenuOnClick: true,
       }),
     },
     ...Object.entries(customObjectRecordsMap).map(
@@ -596,6 +610,7 @@ export const CommandMenu = () => {
               placeholder={objectRecord.recordIdentifier.name ?? ''}
             />
           ),
+          shouldCloseCommandMenuOnClick: true,
         }),
       }),
     ),
@@ -627,8 +642,17 @@ export const CommandMenu = () => {
                     ].find((cmd) => cmd.id === itemId);
 
                     if (isDefined(command)) {
-                      const { to, onCommandClick } = command;
+                      const {
-                      onItemClick(onCommandClick, to);
+                        to,
+                        onCommandClick,
+                        shouldCloseCommandMenuOnClick,
+                      } = command;
+
+                      onItemClick({
+                        shouldCloseCommandMenuOnClick,
+                        onClick: onCommandClick,
+                        to,
+                      });
                     }
                   }}
                 >
@@ -745,6 +769,9 @@ export const CommandMenu = () => {
                               secondHotKey={
                                 workflowRunGlobalCommand.secondHotKey
                               }
+                              shouldCloseCommandMenuOnClick={
+                                workflowRunGlobalCommand.shouldCloseCommandMenuOnClick
+                              }
                             />
                           </SelectableItem>
                         ),
@@ -765,6 +792,7 @@ export const CommandMenu = () => {
                             key,
                             firstHotKey,
                             secondHotKey,
+                            shouldCloseCommandMenuOnClick,
                           } = renderItem(item);
                           return (
                             <SelectableItem itemId={id} key={id}>
@@ -777,6 +805,9 @@ export const CommandMenu = () => {
                                 onClick={onClick}
                                 firstHotKey={firstHotKey}
                                 secondHotKey={secondHotKey}
+                                shouldCloseCommandMenuOnClick={
+                                  shouldCloseCommandMenuOnClick
+                                }
                               />
                             </SelectableItem>
                           );

packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx

@@ -14,6 +14,7 @@ export type CommandMenuItemProps = {
   Icon?: IconComponent;
   firstHotKey?: string;
   secondHotKey?: string;
+  shouldCloseCommandMenuOnClick?: boolean;
 };
 
 export const CommandMenuItem = ({
@@ -24,6 +25,7 @@ export const CommandMenuItem = ({
   Icon,
   firstHotKey,
   secondHotKey,
+  shouldCloseCommandMenuOnClick,
 }: CommandMenuItemProps) => {
   const { onItemClick } = useCommandMenu();
 
@@ -40,7 +42,13 @@ export const CommandMenuItem = ({
       text={label}
       firstHotKey={firstHotKey}
       secondHotKey={secondHotKey}
-      onClick={() => onItemClick(onClick, to)}
+      onClick={() =>
+        onItemClick({
+          shouldCloseCommandMenuOnClick,
+          onClick,
+          to,
+        })
+      }
       isSelected={isSelectedItemId}
     />
   );

packages/twenty-front/src/modules/command-menu/constants/CommandMenuNavigateCommands.ts

@@ -17,6 +17,7 @@ export const COMMAND_MENU_NAVIGATE_COMMANDS: { [key: string]: Command } = {
     firstHotKey: 'G',
     secondHotKey: 'P',
     Icon: IconUser,
+    shouldCloseCommandMenuOnClick: true,
   },
   companies: {
     id: 'go-to-companies',
@@ -26,6 +27,7 @@ export const COMMAND_MENU_NAVIGATE_COMMANDS: { [key: string]: Command } = {
     firstHotKey: 'G',
     secondHotKey: 'C',
     Icon: IconBuildingSkyscraper,
+    shouldCloseCommandMenuOnClick: true,
   },
   opportunities: {
     id: 'go-to-activities',
@@ -35,6 +37,7 @@ export const COMMAND_MENU_NAVIGATE_COMMANDS: { [key: string]: Command } = {
     firstHotKey: 'G',
     secondHotKey: 'O',
     Icon: IconTargetArrow,
+    shouldCloseCommandMenuOnClick: true,
   },
   settings: {
     id: 'go-to-settings',
@@ -44,6 +47,7 @@ export const COMMAND_MENU_NAVIGATE_COMMANDS: { [key: string]: Command } = {
     firstHotKey: 'G',
     secondHotKey: 'S',
     Icon: IconSettings,
+    shouldCloseCommandMenuOnClick: true,
   },
   tasks: {
     id: 'go-to-tasks',
@@ -53,5 +57,6 @@ export const COMMAND_MENU_NAVIGATE_COMMANDS: { [key: string]: Command } = {
     firstHotKey: 'G',
     secondHotKey: 'T',
     Icon: IconCheckbox,
+    shouldCloseCommandMenuOnClick: true,
   },
 };

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenu.test.tsx

@@ -82,7 +82,11 @@ describe('useCommandMenu', () => {
     const onClickMock = jest.fn();
 
     act(() => {
-      result.current.commandMenu.onItemClick(onClickMock, '/test');
+      result.current.commandMenu.onItemClick({
+        shouldCloseCommandMenuOnClick: true,
+        onClick: onClickMock,
+        to: '/test',
+      });
     });
 
     expect(result.current.isCommandMenuOpened).toBe(true);

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts

@@ -216,8 +216,21 @@ export const useCommandMenu = () => {
   );
 
   const onItemClick = useCallback(
-    (onClick?: () => void, to?: string) => {
+    ({
-      toggleCommandMenu();
+      shouldCloseCommandMenuOnClick,
+      onClick,
+      to,
+    }: {
+      shouldCloseCommandMenuOnClick?: boolean;
+      onClick?: () => void;
+      to?: string;
+    }) => {
+      if (
+        isDefined(shouldCloseCommandMenuOnClick) &&
+        shouldCloseCommandMenuOnClick
+      ) {
+        toggleCommandMenu();
+      }
 
       if (isDefined(onClick)) {
         onClick();

packages/twenty-front/src/modules/command-menu/types/Command.ts

@@ -21,4 +21,5 @@ export type Command = {
   firstHotKey?: string;
   secondHotKey?: string;
   onCommandClick?: () => void;
+  shouldCloseCommandMenuOnClick?: boolean;
 };

packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx

@@ -1,9 +1,11 @@
 import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter';
 import { RecordAgnosticActionsSetterEffect } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionsSetterEffect';
 import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
+import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { AuthModal } from '@/auth/components/AuthModal';
 import { CommandMenu } from '@/command-menu/components/CommandMenu';
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
 import { KeyboardShortcutMenu } from '@/keyboard-shortcut-menu/components/KeyboardShortcutMenu';
@@ -75,6 +77,7 @@ export const DefaultLayout = () => {
   const theme = useTheme();
   const windowsWidth = useScreenSize().width;
   const showAuthModal = useShowAuthModal();
+  const { toggleCommandMenu } = useCommandMenu();
 
   const isWorkflowEnabled = useIsFeatureEnabled('IS_WORKFLOW_ENABLED');
 
@@ -96,10 +99,17 @@ export const DefaultLayout = () => {
               <ActionMenuComponentInstanceContext.Provider
                 value={{ instanceId: 'command-menu' }}
               >
-                <RecordActionMenuEntriesSetter />
+                <ActionMenuContext.Provider
-                {isWorkflowEnabled && <RecordAgnosticActionsSetterEffect />}
+                  value={{
-                <ActionMenuConfirmationModals />
+                    isInRightDrawer: false,
-                <CommandMenu />
+                    onActionExecutedCallback: toggleCommandMenu,
+                  }}
+                >
+                  <RecordActionMenuEntriesSetter />
+                  {isWorkflowEnabled && <RecordAgnosticActionsSetterEffect />}
+                  <ActionMenuConfirmationModals />
+                  <CommandMenu />
+                </ActionMenuContext.Provider>
               </ActionMenuComponentInstanceContext.Provider>
             </ContextStoreComponentInstanceContext.Provider>
             <KeyboardShortcutMenu />