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-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>