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

refacto(twenty-front): improve DropdownMenuHeader api (#10961)

Browse Source
This commit is contained in:
Antoine Moreaux
2025-03-18 08:19:22 +01:00
committed by GitHub
parent 03f4f73da4
commit 606098fef6
29 changed files with 194 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx
View File

@ -28,6 +28,7 @@ import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-sta
import { useState } from 'react';
import { isDefined } from 'twenty-shared';
import { IconApps, IconChevronLeft, MenuItem, useIcons } from 'twenty-ui';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => {
const [searchText] = useState('');
@ -187,8 +188,12 @@ export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => {
return (
<>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={handleSubMenuBack}
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={handleSubMenuBack}
Icon={IconChevronLeft}
/>
}
>
{getFilterableFieldTypeLabel(objectFilterDropdownSubMenuFieldType)}
</DropdownMenuHeader>

9
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownFieldsContent.tsx
View File

@ -9,6 +9,7 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
import { ViewType } from '@/views/types/ViewType';
import { useLingui } from '@lingui/react/macro';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const ObjectOptionsDropdownFieldsContent = () => {
const { t } = useLingui();
@ -52,8 +53,12 @@ export const ObjectOptionsDropdownFieldsContent = () => {
return (
<>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={resetContent}
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={resetContent}
Icon={IconChevronLeft}
/>
}
>
{t`Fields`}
</DropdownMenuHeader>

9
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx
View File

@ -21,6 +21,7 @@ import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFiel
import { ViewType } from '@/views/types/ViewType';
import { useLingui } from '@lingui/react/macro';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const ObjectOptionsDropdownHiddenFieldsContent = () => {
const { t } = useLingui();
@ -66,8 +67,12 @@ export const ObjectOptionsDropdownHiddenFieldsContent = () => {
return (
<>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={() => onContentChange('fields')}
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={() => onContentChange('fields')}
Icon={IconChevronLeft}
/>
}
>
{t`Hidden Fields`}
</DropdownMenuHeader>

9
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent.tsx
View File

@ -23,6 +23,7 @@ import { useLingui } from '@lingui/react/macro';
import { useLocation } from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => {
const { t } = useLingui();
@ -74,8 +75,12 @@ export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => {
<>
<DropdownMenuItemsContainer>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={() => onContentChange('recordGroups')}
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={() => onContentChange('recordGroups')}
Icon={IconChevronLeft}
/>
}
>
Hidden {recordGroupFieldMetadata?.label}
</DropdownMenuHeader>

9
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx
View File

@ -17,6 +17,7 @@ import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
import { ViewType } from '@/views/types/ViewType';
import { useLingui } from '@lingui/react/macro';
import { useRecoilValue } from 'recoil';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const ObjectOptionsDropdownLayoutContent = () => {
const { t } = useLingui();
@ -42,8 +43,12 @@ export const ObjectOptionsDropdownLayoutContent = () => {
return (
<>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={resetContent}
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={resetContent}
Icon={IconChevronLeft}
/>
}
>
{t`Layout`}
</DropdownMenuHeader>

9
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutOpenInContent.tsx
View File

@ -14,6 +14,7 @@ import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
import { t } from '@lingui/core/macro';
import { useRecoilValue } from 'recoil';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const ObjectOptionsDropdownLayoutOpenInContent = () => {
const { onContentChange } = useOptionsDropdown();
@ -24,8 +25,12 @@ export const ObjectOptionsDropdownLayoutOpenInContent = () => {
return (
<>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={() => onContentChange('layout')}
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={() => onContentChange('layout')}
Icon={IconChevronLeft}
/>
}
>
{t`Open in`}
</DropdownMenuHeader>

7
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx
View File

@ -31,6 +31,7 @@ import { useDeleteViewFromCurrentState } from '@/views/view-picker/hooks/useDele
import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/states/viewPickerReferenceViewIdComponentState';
import { useTheme } from '@emotion/react';
import { useLingui } from '@lingui/react/macro';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const ObjectOptionsDropdownMenuContent = () => {
const { t } = useLingui();
@ -82,7 +83,11 @@ export const ObjectOptionsDropdownMenuContent = () => {
return (
<>
<DropdownMenuHeader StartIcon={CurrentViewIcon ?? IconList}>
<DropdownMenuHeader
StartComponent={
<DropdownMenuHeaderLeftComponent Icon={CurrentViewIcon ?? IconList} />
}
>
{currentView?.name}
</DropdownMenuHeader>

15
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx
View File

@ -30,6 +30,7 @@ import { useSetRecoilState } from 'recoil';
import { isDefined } from 'twenty-shared';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
const { t } = useLingui();
@ -106,11 +107,15 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
return (
<>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={() =>
isDefined(recordGroupFieldMetadata)
? onContentChange('recordGroups')
: resetContent()
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={() =>
isDefined(recordGroupFieldMetadata)
? onContentChange('recordGroups')
: resetContent()
}
Icon={IconChevronLeft}
/>
}
>
Group by

9
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent.tsx
View File

@ -15,6 +15,7 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const ObjectOptionsDropdownRecordGroupSortContent = () => {
const { currentContentId, onContentChange } = useOptionsDropdown();
@ -43,8 +44,12 @@ export const ObjectOptionsDropdownRecordGroupSortContent = () => {
return (
<>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={() => onContentChange('recordGroups')}
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={() => onContentChange('recordGroups')}
Icon={IconChevronLeft}
/>
}
>
Sort
</DropdownMenuHeader>

9
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx
View File

@ -27,6 +27,7 @@ import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { useLingui } from '@lingui/react/macro';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const ObjectOptionsDropdownRecordGroupsContent = () => {
const { t } = useLingui();
@ -89,8 +90,12 @@ export const ObjectOptionsDropdownRecordGroupsContent = () => {
return (
<>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={resetContent}
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={resetContent}
Icon={IconChevronLeft}
/>
}
>
Group by
</DropdownMenuHeader>

5
packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
View File

@ -32,6 +32,7 @@ import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-sta
import { Trans, useLingui } from '@lingui/react/macro';
import { useRecoilValue } from 'recoil';
import { v4 } from 'uuid';
import { useTheme } from '@emotion/react';
export const StyledInput = styled.input`
background: transparent;
@ -187,6 +188,8 @@ export const ObjectSortDropdownButton = ({
const { t } = useLingui();
const theme = useTheme();
return (
<Dropdown
dropdownId={OBJECT_SORT_DROPDOWN_ID}
@ -218,12 +221,12 @@ export const ObjectSortDropdownButton = ({
</StyledSelectedSortDirectionContainer>
)}
<DropdownMenuHeader
EndIcon={IconChevronDown}
onClick={() =>
setIsRecordSortDirectionMenuUnfolded(
!isRecordSortDirectionMenuUnfolded,
)
}
EndComponent={<IconChevronDown size={theme.icon.size.md} />}
>
{selectedRecordSortDirection === 'asc'
? t`Ascending`

15
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownFieldsContent.tsx
View File

@ -17,6 +17,7 @@ import {
MenuItem,
useIcons,
} from 'twenty-ui';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const RecordBoardColumnHeaderAggregateDropdownFieldsContent = () => {
const {
@ -49,11 +50,15 @@ export const RecordBoardColumnHeaderAggregateDropdownFieldsContent = () => {
return (
<>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={() =>
previousContentId
? onContentChange(previousContentId)
: resetContent()
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={() =>
previousContentId
? onContentChange(previousContentId)
: resetContent()
}
Icon={IconChevronLeft}
/>
}
>
{getAggregateOperationLabel(aggregateOperation)}

9
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownOptionsContent.tsx
View File

@ -21,6 +21,7 @@ import isEmpty from 'lodash.isempty';
import { useRecoilValue } from 'recoil';
import { Key } from 'ts-key-enum';
import { IconCheck, IconChevronLeft } from 'twenty-ui';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const RecordBoardColumnHeaderAggregateDropdownOptionsContent = ({
availableAggregations,
@ -59,8 +60,12 @@ export const RecordBoardColumnHeaderAggregateDropdownOptionsContent = ({
return (
<>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={resetContent}
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={resetContent}
Icon={IconChevronLeft}
/>
}
>
{title}
</DropdownMenuHeader>

9
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateDropdownSubmenuContent.tsx
View File

@ -9,6 +9,7 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useContext } from 'react';
import { Key } from 'ts-key-enum';
import { IconChevronLeft } from 'twenty-ui';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const RecordTableColumnAggregateFooterDropdownSubmenuContent = ({
aggregateOperations,
@ -33,8 +34,12 @@ export const RecordTableColumnAggregateFooterDropdownSubmenuContent = ({
return (
<>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={resetContent}
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={resetContent}
Icon={IconChevronLeft}
/>
}
>
{title}
</DropdownMenuHeader>

53
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx
View File

@ -1,13 +1,6 @@
import styled from '@emotion/styled';
import { ComponentProps, MouseEvent, ReactElement } from 'react';
import { Avatar, AvatarProps, IconComponent } from 'twenty-ui';
import { DropdownMenuHeaderStartIcon } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderStartIcon';
import { isDefined } from 'twenty-shared';
import { useTheme } from '@emotion/react';
import {
Dropdown,
DropdownProps,
} from '@/ui/layout/dropdown/components/Dropdown';
import { ComponentProps, MouseEvent } from 'react';
import { IconComponent } from 'twenty-ui';
const StyledHeader = styled.li`
align-items: center;
@ -37,7 +30,7 @@ const StyledChildrenWrapper = styled.span`
text-overflow: ellipsis;
`;
const StyledEndIcon = styled.div`
const StyledEndComponent = styled.div`
display: inline-flex;
color: ${({ theme }) => theme.font.color.tertiary};
padding: ${({ theme }) => theme.spacing(1)};
@ -53,50 +46,24 @@ const StyledEndIcon = styled.div`
type DropdownMenuHeaderProps = ComponentProps<'li'> & {
EndIcon?: IconComponent;
onClick?: (event: MouseEvent<HTMLLIElement>) => void;
onStartIconClick?: (event: MouseEvent<HTMLButtonElement>) => void;
testId?: string;
className?: string;
DropdownOnEndIcon?: ReactElement<DropdownProps, typeof Dropdown>;
} & (
| { StartIcon?: IconComponent }
| { StartAvatar?: ReactElement<AvatarProps, typeof Avatar> }
);
StartComponent?: React.ReactNode;
EndComponent?: React.ReactNode;
};
export const DropdownMenuHeader = ({
children,
EndIcon,
onStartIconClick,
StartComponent,
onClick,
testId,
className,
...props
EndComponent,
}: DropdownMenuHeaderProps) => {
const theme = useTheme();
return (
<StyledHeader data-testid={testId} className={className} onClick={onClick}>
{'StartIcon' in props && isDefined(props.StartIcon) && (
<DropdownMenuHeaderStartIcon
onClick={onStartIconClick}
StartIcon={props.StartIcon}
/>
)}
{!('StartIcon' in props) &&
'StartAvatar' in props &&
isDefined(props.StartAvatar) && (
<DropdownMenuHeaderStartIcon
onClick={onStartIconClick}
StartAvatar={props.StartAvatar}
/>
)}
{StartComponent && StartComponent}
<StyledChildrenWrapper>{children}</StyledChildrenWrapper>
{'DropdownOnEndIcon' in props && (
<StyledEndIcon>{props.DropdownOnEndIcon}</StyledEndIcon>
)}
{!('DropdownOnEndIcon' in props) && EndIcon && (
<StyledEndIcon>
<EndIcon size={theme.icon.size.md} />
</StyledEndIcon>
)}
{EndComponent && <StyledEndComponent>{EndComponent}</StyledEndComponent>}
</StyledHeader>
);
};

16
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderStartIcon.tsx → packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent.tsx
View File

@ -25,13 +25,13 @@ const StyledAvatarWrapper = styled.div`
padding: ${({ theme }) => theme.spacing(1)};
`;
export const DropdownMenuHeaderStartIcon = ({
export const DropdownMenuHeaderLeftComponent = ({
onClick,
...props
}: { onClick?: (event: MouseEvent<HTMLButtonElement>) => void } & (
| { StartIcon: IconComponent }
| { Icon: IconComponent }
| {
StartAvatar: ReactElement<AvatarProps, typeof Avatar>;
Avatar: ReactElement<AvatarProps, typeof Avatar>;
}
| Record<never, never>
)) => {
@ -39,25 +39,25 @@ export const DropdownMenuHeaderStartIcon = ({
return (
<>
{'StartIcon' in props &&
{'Icon' in props &&
(onClick ? (
<LightIconButton
Icon={props.StartIcon}
Icon={props.Icon}
accent="tertiary"
size="small"
onClick={onClick}
/>
) : (
<StyledNonClickableStartIcon>
<props.StartIcon
<props.Icon
size={theme.icon.size.sm}
color={theme.font.color.tertiary}
/>
</StyledNonClickableStartIcon>
))}
{'StartAvatar' in props && (
<StyledAvatarWrapper>{props.StartAvatar}</StyledAvatarWrapper>
{'Avatar' in props && (
<StyledAvatarWrapper>{props.Avatar}</StyledAvatarWrapper>
)}
</>
);

34
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderWithDropdownMenu.tsx
View File

@ -1,34 +0,0 @@
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { IconComponent, IconDotsVertical, LightIconButton } from 'twenty-ui';
import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
import { Placement } from '@floating-ui/react';
import { ReactNode } from 'react';
export type DropdownMenuHeaderWithDropdownMenuProps = {
EndIcon?: IconComponent;
dropdownPlacement?: Placement;
dropdownComponents: ReactNode;
dropdownId: string;
};
export const DropdownMenuHeaderWithDropdownMenu = (
props: DropdownMenuHeaderWithDropdownMenuProps,
) => {
return (
<div className="hoverable-buttons">
<Dropdown
clickableComponent={
<LightIconButton
Icon={props.EndIcon ?? IconDotsVertical}
size="small"
accent="tertiary"
/>
}
dropdownPlacement={props.dropdownPlacement ?? 'bottom-end'}
dropdownComponents={props.dropdownComponents}
dropdownId={props.dropdownId}
dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}
/>
</div>
);
};

7
packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx
View File

@ -22,6 +22,7 @@ import { DropdownMenuItemsContainer } from '../DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '../DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '../DropdownMenuSeparator';
import { StyledDropdownMenuSubheader } from '../StyledDropdownMenuSubheader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
const meta: Meta<typeof Dropdown> = {
title: 'UI/Layout/Dropdown/Dropdown',
@ -219,7 +220,11 @@ export const WithHeaders: Story = {
args: {
dropdownComponents: (
<>
<DropdownMenuHeader StartIcon={IconChevronLeft}>
<DropdownMenuHeader
StartComponent={
<DropdownMenuHeaderLeftComponent Icon={IconChevronLeft} />
}
>
Header
</DropdownMenuHeader>
<StyledDropdownMenuSubheader>Subheader 1</StyledDropdownMenuSubheader>

18
packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuHeader.stories.tsx
View File

@ -13,6 +13,7 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
const meta: Meta<typeof DropdownMenuHeader> = {
title: 'UI/Layout/Dropdown/DropdownMenuHeader',
@ -31,21 +32,14 @@ export const Text: Story = {
};
export const StartIcon: Story = {
args: {
StartIcon: IconChevronLeft,
StartComponent: <DropdownMenuHeaderLeftComponent Icon={IconChevronLeft} />,
children: 'Start Icon',
},
};
export const EndIcon: Story = {
args: {
EndIcon: IconChevronRight,
children: 'End Icon',
},
};
export const StartAndEndIcon: Story = {
args: {
StartIcon: IconChevronLeft,
StartComponent: <DropdownMenuHeaderLeftComponent Icon={IconChevronLeft} />,
EndIcon: IconChevronRight,
children: 'Start and End Icon',
},
@ -53,7 +47,7 @@ export const StartAndEndIcon: Story = {
export const StartAvatar: Story = {
args: {
StartAvatar: (
StartComponent: (
<Avatar placeholder="placeholder" avatarUrl={AVATAR_URL_MOCK} />
),
children: 'Avatar',
@ -63,10 +57,10 @@ export const StartAvatar: Story = {
export const ContextDropdownAndAvatar: Story = {
args: {
children: 'Context Dropdown',
StartAvatar: (
StartComponent: (
<Avatar placeholder="placeholder" avatarUrl={AVATAR_URL_MOCK} />
),
DropdownOnEndIcon: (
EndComponent: (
<Dropdown
dropdownId={'story-dropdown-id-context-menu'}
dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}

2
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/MultiWorkspaceDropdownButton.tsx
View File

@ -34,7 +34,7 @@ export const MultiWorkspaceDropdownButton = () => {
dropdownHotkeyScope={{
scope: NavigationDrawerHotKeyScope.MultiWorkspaceDropdownButton,
}}
dropdownOffset={{ y: 0, x: 0 }}
dropdownOffset={{ y: -35, x: -5 }}
clickableComponent={
<MultiWorkspaceDropdownClickableComponent
isDropdownOpen={isDropdownOpen}

2
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx
View File

@ -14,7 +14,7 @@ import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNaviga
export const MultiWorkspaceDropdownClickableComponent = ({
isDropdownOpen,
}: {
isDropdownOpen: boolean;
isDropdownOpen?: boolean;
}) => {
const currentWorkspace = useRecoilValue(currentWorkspaceState);
const theme = useTheme();

15
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx
View File

@ -36,6 +36,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';
import styled from '@emotion/styled';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
const StyledDescription = styled.div`
color: ${({ theme }) => theme.font.color.light};
@ -91,13 +92,17 @@ export const MultiWorkspaceDropdownDefaultComponents = () => {
return (
<>
<DropdownMenuHeader
StartAvatar={
<Avatar
placeholder={currentWorkspace?.displayName || ''}
avatarUrl={currentWorkspace?.logo ?? DEFAULT_WORKSPACE_LOGO}
StartComponent={
<DropdownMenuHeaderLeftComponent
Avatar={
<Avatar
placeholder={currentWorkspace?.displayName || ''}
avatarUrl={currentWorkspace?.logo ?? DEFAULT_WORKSPACE_LOGO}
/>
}
/>
}
DropdownOnEndIcon={
EndComponent={
<Dropdown
clickableComponent={
<LightIconButton

9
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownThemesComponents.tsx
View File

@ -5,6 +5,7 @@ import { multiWorkspaceDropdownState } from '@/ui/navigation/navigation-drawer/s
import { useSetRecoilState } from 'recoil';
import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const MultiWorkspaceDropdownThemesComponents = () => {
const { t } = useLingui();
@ -18,8 +19,12 @@ export const MultiWorkspaceDropdownThemesComponents = () => {
return (
<DropdownMenuItemsContainer>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={() => setMultiWorkspaceDropdownState('default')}
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={() => setMultiWorkspaceDropdownState('default')}
Icon={IconChevronLeft}
/>
}
>
{t`Theme`}
</DropdownMenuHeader>

9
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownWorkspacesListComponents.tsx
View File

@ -18,6 +18,7 @@ import { multiWorkspaceDropdownState } from '@/ui/navigation/navigation-drawer/s
import { useState } from 'react';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const MultiWorkspaceDropdownWorkspacesListComponents = () => {
const currentWorkspace = useRecoilValue(currentWorkspaceState);
@ -37,8 +38,12 @@ export const MultiWorkspaceDropdownWorkspacesListComponents = () => {
return (
<DropdownMenuItemsContainer>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={() => setMultiWorkspaceDropdownState('default')}
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={() => setMultiWorkspaceDropdownState('default')}
Icon={IconChevronLeft}
/>
}
>
{t`Other workspaces`}
</DropdownMenuHeader>

7
packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx
View File

@ -34,6 +34,7 @@ import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states
import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPickerTypeComponentState';
import { useMemo, useState } from 'react';
import { useLingui } from '@lingui/react/macro';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
const StyledNoKanbanFieldAvailableContainer = styled.div`
color: ${({ theme }) => theme.font.color.light};
@ -130,7 +131,11 @@ export const ViewPickerContentCreateMode = () => {
return (
<>
<DropdownMenuHeader StartIcon={IconX} onStartIconClick={handleClose}>
<DropdownMenuHeader
StartComponent={
<DropdownMenuHeaderLeftComponent onClick={handleClose} Icon={IconX} />
}
>
{t`Create view`}
</DropdownMenuHeader>
<DropdownMenuSeparator />

9
packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEditMode.tsx
View File

@ -21,6 +21,7 @@ import { viewPickerInputNameComponentState } from '@/views/view-picker/states/vi
import { viewPickerIsDirtyComponentState } from '@/views/view-picker/states/viewPickerIsDirtyComponentState';
import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const ViewPickerContentEditMode = () => {
const { setViewPickerMode } = useViewPickerMode();
@ -68,8 +69,12 @@ export const ViewPickerContentEditMode = () => {
return (
<>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={handleClose}
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={handleClose}
Icon={IconChevronLeft}
/>
}
>
Edit view
</DropdownMenuHeader>

9
packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx
View File

@ -26,6 +26,7 @@ import {
OverflowingTextWithTooltip,
useIcons,
} from 'twenty-ui';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
type WorkflowVariablesDropdownFieldItemsProps = {
step: StepOutputSchema;
@ -116,8 +117,12 @@ export const WorkflowVariablesDropdownFieldItems = ({
return (
<>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={goBack}
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={goBack}
Icon={IconChevronLeft}
/>
}
style={{ position: 'fixed' }}
>
<OverflowingTextWithTooltip

10
packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownObjectItems.tsx
View File

@ -15,6 +15,7 @@ import {
OverflowingTextWithTooltip,
useIcons,
} from 'twenty-ui';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
type WorkflowVariablesDropdownObjectItemsProps = {
step: StepOutputSchema;
@ -98,7 +99,14 @@ export const WorkflowVariablesDropdownObjectItems = ({
return (
<>
<DropdownMenuHeader StartIcon={IconChevronLeft} onStartIconClick={goBack}>
<DropdownMenuHeader
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={goBack}
Icon={IconChevronLeft}
/>
}
>
<OverflowingTextWithTooltip
text={getStepHeaderLabel(step, currentPath)}
/>

10
packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems.tsx
View File

@ -12,6 +12,7 @@ import {
OverflowingTextWithTooltip,
useIcons,
} from 'twenty-ui';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
type WorkflowVariablesDropdownWorkflowStepItemsProps = {
dropdownId: string;
@ -37,7 +38,14 @@ export const WorkflowVariablesDropdownWorkflowStepItems = ({
return (
<>
<DropdownMenuHeader StartIcon={IconX} onStartIconClick={closeDropdown}>
<DropdownMenuHeader
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={closeDropdown}
Icon={IconX}
/>
}
>
<OverflowingTextWithTooltip text={'Select Step'} />
</DropdownMenuHeader>
<DropdownMenuSearchInput