admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix modals being unregistered inside command menu (#9155)

Browse Source 
Fix modals being unregistered inside command menu
This commit is contained in:
Raphaël Bosi
2024-12-20 10:45:22 +01:00
committed by GitHub
parent 54c4d64ae8
commit a0b5720831
7 changed files with 82 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -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 />
{isWorkflowEnabled && <RecordAgnosticActionsSetterEffect />}
<ActionMenuConfirmationModals />
<CommandMenu />
<ActionMenuContext.Provider
value={{
isInRightDrawer: false,
onActionExecutedCallback: toggleCommandMenu,
}}
>
<RecordActionMenuEntriesSetter />
{isWorkflowEnabled && <RecordAgnosticActionsSetterEffect />}
<ActionMenuConfirmationModals />
<CommandMenu />
</ActionMenuContext.Provider>
</ActionMenuComponentInstanceContext.Provider>
</ContextStoreComponentInstanceContext.Provider>
<KeyboardShortcutMenu />