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>