From a0b5720831aaf54254d1e309689a1aeeb7452207 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
<71827178+bosiraphael@users.noreply.github.com>
Date: Fri, 20 Dec 2024 10:45:22 +0100
Subject: [PATCH] Fix modals being unregistered inside command menu (#9155)
Fix modals being unregistered inside command menu
---
.../command-menu/components/CommandMenu.tsx | 35 +++++++++++++++++--
.../components/CommandMenuItem.tsx | 10 +++++-
.../constants/CommandMenuNavigateCommands.ts | 5 +++
.../hooks/__tests__/useCommandMenu.test.tsx | 6 +++-
.../command-menu/hooks/useCommandMenu.ts | 17 +++++++--
.../src/modules/command-menu/types/Command.ts | 1 +
.../layout/page/components/DefaultLayout.tsx | 18 +++++++---
7 files changed, 82 insertions(+), 10 deletions(-)
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
index bb2c949ff..2d06ba743 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
+++ b/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;
- onItemClick(onCommandClick, to);
+ const {
+ to,
+ onCommandClick,
+ shouldCloseCommandMenuOnClick,
+ } = command;
+
+ onItemClick({
+ shouldCloseCommandMenuOnClick,
+ onClick: onCommandClick,
+ to,
+ });
}
}}
>
@@ -745,6 +769,9 @@ export const CommandMenu = () => {
secondHotKey={
workflowRunGlobalCommand.secondHotKey
}
+ shouldCloseCommandMenuOnClick={
+ workflowRunGlobalCommand.shouldCloseCommandMenuOnClick
+ }
/>
),
@@ -765,6 +792,7 @@ export const CommandMenu = () => {
key,
firstHotKey,
secondHotKey,
+ shouldCloseCommandMenuOnClick,
} = renderItem(item);
return (
@@ -777,6 +805,9 @@ export const CommandMenu = () => {
onClick={onClick}
firstHotKey={firstHotKey}
secondHotKey={secondHotKey}
+ shouldCloseCommandMenuOnClick={
+ shouldCloseCommandMenuOnClick
+ }
/>
);
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
index 0895015e2..c772da280 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
+++ b/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}
/>
);
diff --git a/packages/twenty-front/src/modules/command-menu/constants/CommandMenuNavigateCommands.ts b/packages/twenty-front/src/modules/command-menu/constants/CommandMenuNavigateCommands.ts
index c997ff304..6089cdcb7 100644
--- a/packages/twenty-front/src/modules/command-menu/constants/CommandMenuNavigateCommands.ts
+++ b/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,
},
};
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenu.test.tsx b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenu.test.tsx
index aac286a6e..f9549c737 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenu.test.tsx
+++ b/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);
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 46eea6f6c..f8d178cd3 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
+++ b/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();
diff --git a/packages/twenty-front/src/modules/command-menu/types/Command.ts b/packages/twenty-front/src/modules/command-menu/types/Command.ts
index 2f14cc6a1..1c23c100c 100644
--- a/packages/twenty-front/src/modules/command-menu/types/Command.ts
+++ b/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;
};
diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
index 18bd1928c..dc5b37ce1 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
+++ b/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 = () => {
-
- {isWorkflowEnabled && }
-
-
+
+
+ {isWorkflowEnabled && }
+
+
+