mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

321 command menu context chips compact version (#10072)

Browse Source 
Closes https://github.com/twentyhq/core-team-issues/issues/321

- Create component
- Create stories
- Fix bug due to `WorkflowDiagramCanvasEditableEffect`
This commit is contained in:
Raphaël Bosi
2025-02-07 14:48:41 +01:00
committed by GitHub
parent 68183b7c85
commit 1403c55625
22 changed files with 328 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
View File

@ -1,10 +1,11 @@
import { CommandMenuContextChip } from '@/command-menu/components/CommandMenuContextChip';
import { CommandMenuContextRecordChip } from '@/command-menu/components/CommandMenuContextRecordChip';
import { CommandMenuContextChipGroups } from '@/command-menu/components/CommandMenuContextChipGroups';
import { CommandMenuContextChipGroupsWithRecordSelection } from '@/command-menu/components/CommandMenuContextChipGroupsWithRecordSelection';
import { COMMAND_MENU_SEARCH_BAR_HEIGHT } from '@/command-menu/constants/CommandMenuSearchBarHeight';
import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/CommandMenuSearchBarPadding';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageTitle';
import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
@ -13,6 +14,7 @@ import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { useMemo } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared';
import {
@ -98,7 +100,9 @@ export const CommandMenuTopBar = () => {
const commandMenuPage = useRecoilValue(commandMenuPageState);
const { title, Icon } = useRecoilValue(commandMenuPageInfoState);
const commandMenuNavigationStack = useRecoilValue(
commandMenuNavigationStackState,
);
const theme = useTheme();
@ -106,31 +110,40 @@ export const CommandMenuTopBar = () => {
FeatureFlagKey.IsCommandMenuV2Enabled,
);
const contextChips = useMemo(() => {
return commandMenuNavigationStack
.filter((page) => page.page !== CommandMenuPages.Root)
.map((page) => {
return {
Icons: [<page.pageIcon size={theme.icon.size.sm} />],
text: page.pageTitle,
};
});
}, [commandMenuNavigationStack, theme.icon.size.sm]);
return (
<StyledInputContainer>
<StyledContentContainer>
{isCommandMenuV2Enabled && (
<CommandMenuContextChip
Icons={[<IconChevronLeft size={theme.icon.size.sm} />]}
onClick={() => {
goBackFromCommandMenu();
}}
testId="command-menu-go-back-button"
/>
)}
{commandMenuPage !== CommandMenuPages.SearchRecords &&
isDefined(contextStoreCurrentObjectMetadataId) && (
<CommandMenuContextRecordChip
objectMetadataItemId={contextStoreCurrentObjectMetadataId}
<>
<CommandMenuContextChip
Icons={[<IconChevronLeft size={theme.icon.size.sm} />]}
onClick={() => {
goBackFromCommandMenu();
}}
testId="command-menu-go-back-button"
/>
)}
{isDefined(Icon) && (
<CommandMenuContextChip
Icons={[<Icon size={theme.icon.size.sm} />]}
text={title}
/>
{isDefined(contextStoreCurrentObjectMetadataId) &&
commandMenuPage !== CommandMenuPages.SearchRecords ? (
<CommandMenuContextChipGroupsWithRecordSelection
contextChips={contextChips}
objectMetadataItemId={contextStoreCurrentObjectMetadataId}
/>
) : (
<CommandMenuContextChipGroups contextChips={contextChips} />
)}
</>
)}
{(commandMenuPage === CommandMenuPages.Root ||
commandMenuPage === CommandMenuPages.SearchRecords) && (
<StyledInput