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

Implemented dropdown menu section label in filter and sort (#12453)

Browse Source 
This PR implements a new component `DropdownMenuSectionLabel`, to be
used for indicating visible and hidden fields in the multiple dropdowns
that use those two sections.

After : 

<img width="247" alt="Capture d’écran 2025-06-04 à 12 49 42"
src="https://github.com/user-attachments/assets/759c48ca-c54d-4921-bea6-cbfe7a2d244d"
/>
<img width="252" alt="Capture d’écran 2025-06-04 à 12 49 20"
src="https://github.com/user-attachments/assets/72cd63d0-e5d6-4000-897d-c16efd8396c9"
/>
<img width="359" alt="Capture d’écran 2025-06-04 à 12 48 44"
src="https://github.com/user-attachments/assets/d7c41039-dc15-46d7-be89-33a39e226fb2"
/>

In this PR we also fix the scrolling behavior of those two sections so
that it is more natural. The height mechanism will be properly
refactored by this issue :
https://github.com/twentyhq/twenty/issues/11766, in the mean time this
temporary modification is working :


https://github.com/user-attachments/assets/c7ddb424-66b9-41e3-a6a8-a29ece09d62e

Some components that weren't used are also removed :
`AdvancedFilterDropdownFieldSelectMenu`,
`AdvancedFilterDropdownFieldSelectMenuItem` and
`AdvancedFilterDropdownSubFieldSelectMenu`

Fixes https://github.com/twentyhq/core-team-issues/issues/1000
This commit is contained in:
Lucas Bordeau
2025-06-05 20:50:12 +02:00
committed by GitHub
parent 26bd16a2cb
commit 276f1796cc
9 changed files with 187 additions and 585 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx
View File

@ -12,6 +12,7 @@ import { FILTER_FIELD_LIST_ID } from '@/object-record/object-filter-dropdown/con
import { useFilterDropdownSelectableFieldMetadataItems } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdownSelectableFieldMetadataItems';
import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuSectionLabel } from '@/ui/layout/dropdown/components/DropdownMenuSectionLabel';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
import { ViewBarFilterDropdownBottomMenu } from '@/views/components/ViewBarFilterDropdownBottomMenu';
import { ViewBarFilterDropdownFieldSelectMenuItem } from '@/views/components/ViewBarFilterDropdownFieldSelectMenuItem';
@ -73,6 +74,10 @@ export const ViewBarFilterDropdownFieldSelectMenu = () => {
selectableVisibleFieldMetadataItems.length > 0 ||
selectableHiddenFieldMetadataItems.length > 0;
const shouldShowVisibleFields =
selectableVisibleFieldMetadataItems.length > 0;
const shouldShowHiddenFields = selectableHiddenFieldMetadataItems.length > 0;
const { t } = useLingui();
return (
@ -90,26 +95,37 @@ export const ViewBarFilterDropdownFieldSelectMenu = () => {
selectableItemIdArray={selectableFieldMetadataItemIds}
selectableListInstanceId={FILTER_FIELD_LIST_ID}
>
{hasSelectableItems && (
<DropdownMenuItemsContainer>
{selectableVisibleFieldMetadataItems.map(
(visibleFieldMetadataItem) => (
<ViewBarFilterDropdownFieldSelectMenuItem
key={visibleFieldMetadataItem.id}
fieldMetadataItemToSelect={visibleFieldMetadataItem}
/>
),
)}
{shouldShowSeparator && <DropdownMenuSeparator />}
{selectableHiddenFieldMetadataItems.map(
(hiddenFieldMetadataItem) => (
<ViewBarFilterDropdownFieldSelectMenuItem
key={hiddenFieldMetadataItem.id}
fieldMetadataItemToSelect={hiddenFieldMetadataItem}
/>
),
)}
</DropdownMenuItemsContainer>
{shouldShowVisibleFields && (
<>
<DropdownMenuSectionLabel label={t`Visible fields`} />
<DropdownMenuItemsContainer scrollWrapperHeightAuto>
{selectableVisibleFieldMetadataItems.map(
(visibleFieldMetadataItem) => (
<ViewBarFilterDropdownFieldSelectMenuItem
key={visibleFieldMetadataItem.id}
fieldMetadataItemToSelect={visibleFieldMetadataItem}
/>
),
)}
</DropdownMenuItemsContainer>
</>
)}
{shouldShowSeparator && <DropdownMenuSeparator />}
{shouldShowHiddenFields && (
<>
<DropdownMenuSectionLabel label={t`Hidden fields`} />
<DropdownMenuItemsContainer scrollWrapperHeightAuto>
{selectableHiddenFieldMetadataItems.map(
(hiddenFieldMetadataItem) => (
<ViewBarFilterDropdownFieldSelectMenuItem
key={hiddenFieldMetadataItem.id}
fieldMetadataItemToSelect={hiddenFieldMetadataItem}
/>
),
)}
</DropdownMenuItemsContainer>
</>
)}
{hasSelectableItems && <DropdownMenuSeparator />}
<ViewBarFilterDropdownBottomMenu />