From d9b86475d340dc2d18bb7a8912ace67f9f890d50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Sat, 1 Feb 2025 08:18:48 +0100 Subject: [PATCH] 323 add object name inside the search (#9962) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes https://github.com/twentyhq/core-team-issues/issues/323 Before: Capture d’écran 2025-01-31 à 18 11 56 After: Capture d’écran 2025-01-31 à 18 09 58 --- .../components/CommandMenuItem.tsx | 3 +++ .../components/CommandMenuList.tsx | 1 + .../__stories__/CommandMenu.stories.tsx | 2 ++ .../command-menu/hooks/useSearchRecords.tsx | 6 ++++++ .../src/modules/command-menu/types/Command.ts | 1 + .../menu-item/components/MenuItemCommand.tsx | 21 ++++++++++++++++++- .../__stories__/MenuItemCommand.stories.tsx | 9 ++++++++ 7 files changed, 42 insertions(+), 1 deletion(-) 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 b02928207..7d48f3d10 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx @@ -8,6 +8,7 @@ import { ReactNode } from 'react'; export type CommandMenuItemProps = { label: string; + description?: string; to?: string; id: string; onClick?: () => void; @@ -19,6 +20,7 @@ export type CommandMenuItemProps = { export const CommandMenuItem = ({ label, + description, to, id, onClick, @@ -40,6 +42,7 @@ export const CommandMenuItem = ({ onItemClick({ diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx index a84de6ec2..9b39906a1 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx @@ -124,6 +124,7 @@ export const CommandMenuList = ({ id={item.id} Icon={item.Icon} label={item.label} + description={item.description} to={item.to} onClick={item.onCommandClick} hotKeys={item.hotKeys} diff --git a/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx b/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx index fb955eaa8..96fbedc8f 100644 --- a/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx @@ -123,6 +123,8 @@ export const SearchRecordsAction: Story = { await sleep(openTimeout); await userEvent.type(searchInput, 'n'); expect(await canvas.findByText('Linkedin')).toBeVisible(); + const companyTexts = await canvas.findAllByText('Company'); + expect(companyTexts[0]).toBeVisible(); expect(await canvas.findByText(companiesMock[0].name)).toBeVisible(); }, }; diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useSearchRecords.tsx b/packages/twenty-front/src/modules/command-menu/hooks/useSearchRecords.tsx index 599279cc5..5f692f6da 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useSearchRecords.tsx +++ b/packages/twenty-front/src/modules/command-menu/hooks/useSearchRecords.tsx @@ -77,6 +77,7 @@ export const useSearchRecords = () => { people?.map(({ id, name: { firstName, lastName }, avatarUrl }) => ({ id, label: `${firstName} ${lastName}`, + description: 'Person', to: `object/person/${id}`, shouldCloseCommandMenuOnClick: true, Icon: () => ( @@ -96,6 +97,7 @@ export const useSearchRecords = () => { companies?.map((company) => ({ id: company.id, label: company.name ?? '', + description: 'Company', to: `object/company/${company.id}`, shouldCloseCommandMenuOnClick: true, Icon: () => ( @@ -116,6 +118,7 @@ export const useSearchRecords = () => { opportunities?.map(({ id, name }) => ({ id, label: name ?? '', + description: 'Opportunity', to: `object/opportunity/${id}`, shouldCloseCommandMenuOnClick: true, Icon: () => ( @@ -143,6 +146,7 @@ export const useSearchRecords = () => { notes?.map((note) => ({ id: note.id, label: note.title ?? '', + description: 'Note', to: '', onCommandClick: () => openNoteRightDrawer(note.id), shouldCloseCommandMenuOnClick: true, @@ -156,6 +160,7 @@ export const useSearchRecords = () => { tasks?.map((task) => ({ id: task.id, label: task.title ?? '', + description: 'Task', to: '', onCommandClick: () => openTaskRightDrawer(task.id), shouldCloseCommandMenuOnClick: true, @@ -182,6 +187,7 @@ export const useSearchRecords = () => { objectRecords.map((objectRecord) => ({ id: objectRecord.record.id, label: objectRecord.recordIdentifier.name, + description: objectRecord.objectMetadataItem.labelSingular, to: `object/${objectRecord.objectMetadataItem.nameSingular}/${objectRecord.record.id}`, shouldCloseCommandMenuOnClick: true, Icon: () => ( 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 0e004e963..39baf41be 100644 --- a/packages/twenty-front/src/modules/command-menu/types/Command.ts +++ b/packages/twenty-front/src/modules/command-menu/types/Command.ts @@ -16,6 +16,7 @@ export type Command = { id: string; to?: string; label: string; + description?: string; type?: CommandType; scope?: CommandScope; Icon?: IconComponent; diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx index f32be3366..2aed3ce35 100644 --- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx @@ -63,9 +63,24 @@ const StyledMenuItemCommandContainer = styled.div<{ isSelected?: boolean }>` } `; +const StyledDescription = styled.span` + color: ${({ theme }) => theme.font.color.light}; + + &::before { + content: '·'; + margin: ${({ theme }) => theme.spacing(0, 1)}; + } +`; + +const StyledTextContainer = styled.div` + display: flex; + flex-direction: row; +`; + export type MenuItemCommandProps = { LeftIcon?: IconComponent; text: string; + description?: string; hotKeys?: string[]; className?: string; isSelected?: boolean; @@ -76,6 +91,7 @@ export type MenuItemCommandProps = { export const MenuItemCommand = ({ LeftIcon, text, + description, hotKeys, className, isSelected, @@ -97,7 +113,10 @@ export const MenuItemCommand = ({ )} - {text} + + {text} + {description && {description}} + {RightComponent} {!isMobile && } diff --git a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx index f1d16e2ac..be80bb93b 100644 --- a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx @@ -35,6 +35,15 @@ export const Default: Story = { decorators: [ComponentDecorator], }; +export const WithDescription: Story = { + args: { + text: 'Menu item', + hotKeys: ['⌘', '1'], + description: 'Description', + }, + decorators: [ComponentDecorator], +}; + export const Catalog: CatalogStory = { args: { text: 'Menu item',