Add search records actions to the command menu (#9892)
Closes https://github.com/twentyhq/core-team-issues/issues/253 and https://github.com/twentyhq/core-team-issues/issues/256. - Created `CommandMenuList`, a component used at the root level of the command menu and inside the search page of the command menu - Refactored record agnostic actions - Added shortcuts to the action menu entries (`/` key for the search) and updated the design of the shortcuts - Reordered actions at the root level of the command menu https://github.com/user-attachments/assets/e1339cc4-ef5d-45c5-a159-6817a54b92e9
This commit is contained in:
Raphaël Bosi
@ -1,92 +1,37 @@
|
||||
import { CommandGroup } from '@/command-menu/components/CommandGroup';
|
||||
import { CommandMenuDefaultSelectionEffect } from '@/command-menu/components/CommandMenuDefaultSelectionEffect';
|
||||
import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
|
||||
import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
|
||||
import { ResetContextToSelectionCommandButton } from '@/command-menu/components/ResetContextToSelectionCommandButton';
|
||||
import { COMMAND_MENU_SEARCH_BAR_HEIGHT } from '@/command-menu/constants/CommandMenuSearchBarHeight';
|
||||
import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/CommandMenuSearchBarPadding';
|
||||
import { useCommandMenuOnItemClick } from '@/command-menu/hooks/useCommandMenuOnItemClick';
|
||||
import { RESET_CONTEXT_TO_SELECTION } from '@/command-menu/constants/ResetContextToSelection';
|
||||
import { useMatchingCommandMenuCommands } from '@/command-menu/hooks/useMatchingCommandMenuCommands';
|
||||
import { useResetPreviousCommandMenuContext } from '@/command-menu/hooks/useResetPreviousCommandMenuContext';
|
||||
import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
|
||||
import { Command } from '@/command-menu/types/Command';
|
||||
import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
|
||||
import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
|
||||
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
|
||||
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import styled from '@emotion/styled';
|
||||
import { useLingui } from '@lingui/react/macro';
|
||||
import { isNonEmptyString } from '@sniptt/guards';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { isDefined } from 'twenty-ui';
|
||||
|
||||
const MOBILE_NAVIGATION_BAR_HEIGHT = 64;
|
||||
|
||||
type CommandGroupConfig = {
|
||||
export type CommandGroupConfig = {
|
||||
heading: string;
|
||||
items?: Command[];
|
||||
};
|
||||
|
||||
const StyledList = styled.div`
|
||||
background: ${({ theme }) => theme.background.secondary};
|
||||
overscroll-behavior: contain;
|
||||
transition: 100ms ease;
|
||||
transition-property: height;
|
||||
`;
|
||||
|
||||
const StyledInnerList = styled.div<{ isMobile: boolean }>`
|
||||
max-height: ${({ isMobile }) =>
|
||||
isMobile
|
||||
? `calc(100dvh - ${COMMAND_MENU_SEARCH_BAR_HEIGHT}px - ${
|
||||
COMMAND_MENU_SEARCH_BAR_PADDING * 2
|
||||
}px - ${MOBILE_NAVIGATION_BAR_HEIGHT}px)`
|
||||
: `calc(100dvh - ${COMMAND_MENU_SEARCH_BAR_HEIGHT}px - ${
|
||||
COMMAND_MENU_SEARCH_BAR_PADDING * 2
|
||||
}px)`};
|
||||
padding-left: ${({ theme }) => theme.spacing(2)};
|
||||
padding-right: ${({ theme }) => theme.spacing(2)};
|
||||
padding-top: ${({ theme }) => theme.spacing(1)};
|
||||
width: calc(100% - ${({ theme }) => theme.spacing(4)});
|
||||
`;
|
||||
|
||||
const StyledEmpty = styled.div`
|
||||
align-items: center;
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
display: flex;
|
||||
font-size: ${({ theme }) => theme.font.size.md};
|
||||
height: 64px;
|
||||
justify-content: center;
|
||||
white-space: pre-wrap;
|
||||
`;
|
||||
|
||||
export const CommandMenu = () => {
|
||||
const { t } = useLingui();
|
||||
|
||||
const { onItemClick } = useCommandMenuOnItemClick();
|
||||
const { resetPreviousCommandMenuContext } =
|
||||
useResetPreviousCommandMenuContext();
|
||||
|
||||
const commandMenuSearch = useRecoilValue(commandMenuSearchState);
|
||||
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const {
|
||||
isNoResults,
|
||||
isLoading,
|
||||
noResults,
|
||||
copilotCommands,
|
||||
matchingStandardActionRecordSelectionCommands,
|
||||
matchingStandardActionObjectCommands,
|
||||
matchingWorkflowRunRecordSelectionCommands,
|
||||
matchingStandardActionGlobalCommands,
|
||||
matchingWorkflowRunGlobalCommands,
|
||||
matchingNavigateCommand,
|
||||
peopleCommands,
|
||||
companyCommands,
|
||||
opportunityCommands,
|
||||
noteCommands,
|
||||
tasksCommands,
|
||||
customObjectCommands,
|
||||
matchingNavigateCommands,
|
||||
} = useMatchingCommandMenuCommands({
|
||||
commandMenuSearch,
|
||||
});
|
||||
@ -94,16 +39,11 @@ export const CommandMenu = () => {
|
||||
const selectableItems: Command[] = copilotCommands
|
||||
.concat(
|
||||
matchingStandardActionRecordSelectionCommands,
|
||||
matchingStandardActionObjectCommands,
|
||||
matchingWorkflowRunRecordSelectionCommands,
|
||||
matchingStandardActionGlobalCommands,
|
||||
matchingWorkflowRunGlobalCommands,
|
||||
matchingNavigateCommand,
|
||||
peopleCommands,
|
||||
companyCommands,
|
||||
opportunityCommands,
|
||||
noteCommands,
|
||||
tasksCommands,
|
||||
customObjectCommands,
|
||||
matchingNavigateCommands,
|
||||
)
|
||||
.filter(isDefined);
|
||||
|
||||
@ -115,7 +55,7 @@ export const CommandMenu = () => {
|
||||
const selectableItemIds = selectableItems.map((item) => item.id);
|
||||
|
||||
if (isNonEmptyString(previousContextStoreCurrentObjectMetadataId)) {
|
||||
selectableItemIds.unshift('reset-context-to-selection');
|
||||
selectableItemIds.unshift(RESET_CONTEXT_TO_SELECTION);
|
||||
}
|
||||
|
||||
const commandGroups: CommandGroupConfig[] = [
|
||||
@ -125,130 +65,35 @@ export const CommandMenu = () => {
|
||||
},
|
||||
{
|
||||
heading: t`Record Selection`,
|
||||
items: matchingStandardActionRecordSelectionCommands,
|
||||
items: matchingStandardActionRecordSelectionCommands.concat(
|
||||
matchingWorkflowRunRecordSelectionCommands,
|
||||
),
|
||||
},
|
||||
{
|
||||
heading: t`Workflow Record Selection`,
|
||||
items: matchingWorkflowRunRecordSelectionCommands,
|
||||
heading: t`Object`,
|
||||
items: matchingStandardActionObjectCommands,
|
||||
},
|
||||
{
|
||||
heading: t`View`,
|
||||
items: matchingStandardActionGlobalCommands,
|
||||
},
|
||||
{
|
||||
heading: t`Workflows`,
|
||||
items: matchingWorkflowRunGlobalCommands,
|
||||
},
|
||||
{
|
||||
heading: t`Navigate`,
|
||||
items: matchingNavigateCommand,
|
||||
},
|
||||
{
|
||||
heading: t`People`,
|
||||
items: peopleCommands,
|
||||
},
|
||||
{
|
||||
heading: t`Companies`,
|
||||
items: companyCommands,
|
||||
},
|
||||
{
|
||||
heading: t`Opportunities`,
|
||||
items: opportunityCommands,
|
||||
},
|
||||
{
|
||||
heading: t`Notes`,
|
||||
items: noteCommands,
|
||||
},
|
||||
{
|
||||
heading: t`Tasks`,
|
||||
items: tasksCommands,
|
||||
},
|
||||
{
|
||||
heading: t`Custom Objects`,
|
||||
items: customObjectCommands,
|
||||
heading: t`Global`,
|
||||
items: matchingStandardActionGlobalCommands
|
||||
.concat(matchingNavigateCommands)
|
||||
.concat(matchingWorkflowRunGlobalCommands),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<CommandMenuDefaultSelectionEffect
|
||||
selectableItemIds={selectableItemIds}
|
||||
/>
|
||||
|
||||
<StyledList>
|
||||
<ScrollWrapper
|
||||
contextProviderName="commandMenu"
|
||||
componentInstanceId={`scroll-wrapper-command-menu`}
|
||||
>
|
||||
<StyledInnerList isMobile={isMobile}>
|
||||
<SelectableList
|
||||
selectableListId="command-menu-list"
|
||||
selectableItemIdArray={selectableItemIds}
|
||||
hotkeyScope={AppHotkeyScope.CommandMenu}
|
||||
onEnter={(itemId) => {
|
||||
if (itemId === 'reset-context-to-selection') {
|
||||
resetPreviousCommandMenuContext();
|
||||
return;
|
||||
}
|
||||
|
||||
const command = selectableItems.find(
|
||||
(item) => item.id === itemId,
|
||||
);
|
||||
|
||||
if (isDefined(command)) {
|
||||
const { to, onCommandClick, shouldCloseCommandMenuOnClick } =
|
||||
command;
|
||||
|
||||
onItemClick({
|
||||
shouldCloseCommandMenuOnClick,
|
||||
onClick: onCommandClick,
|
||||
to,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isNonEmptyString(
|
||||
previousContextStoreCurrentObjectMetadataId,
|
||||
) && (
|
||||
<CommandGroup heading={t`Context`} key={t`Context`}>
|
||||
<SelectableItem itemId="reset-context-to-selection">
|
||||
<ResetContextToSelectionCommandButton />
|
||||
</SelectableItem>
|
||||
</CommandGroup>
|
||||
)}
|
||||
|
||||
{isNoResults && !isLoading && (
|
||||
<StyledEmpty>No results found</StyledEmpty>
|
||||
)}
|
||||
{commandGroups.map(({ heading, items }) =>
|
||||
items?.length ? (
|
||||
<CommandGroup heading={heading} key={heading}>
|
||||
{items.map((item) => {
|
||||
return (
|
||||
<SelectableItem itemId={item.id} key={item.id}>
|
||||
<CommandMenuItem
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
Icon={item.Icon}
|
||||
label={item.label}
|
||||
to={item.to}
|
||||
onClick={item.onCommandClick}
|
||||
firstHotKey={item.firstHotKey}
|
||||
secondHotKey={item.secondHotKey}
|
||||
shouldCloseCommandMenuOnClick={
|
||||
item.shouldCloseCommandMenuOnClick
|
||||
}
|
||||
/>
|
||||
</SelectableItem>
|
||||
);
|
||||
})}
|
||||
</CommandGroup>
|
||||
) : null,
|
||||
)}
|
||||
</SelectableList>
|
||||
</StyledInnerList>
|
||||
</ScrollWrapper>
|
||||
</StyledList>
|
||||
</>
|
||||
<CommandMenuList
|
||||
commandGroups={commandGroups}
|
||||
selectableItemIds={selectableItemIds}
|
||||
noResults={noResults}
|
||||
>
|
||||
{isNonEmptyString(previousContextStoreCurrentObjectMetadataId) && (
|
||||
<CommandGroup heading={t`Context`}>
|
||||
<SelectableItem itemId={RESET_CONTEXT_TO_SELECTION}>
|
||||
<ResetContextToSelectionCommandButton />
|
||||
</SelectableItem>
|
||||
</CommandGroup>
|
||||
)}
|
||||
</CommandMenuList>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user