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

Fix minor bugs on advanced filters (#11044)

Browse Source 
This PR fixes some minor bugs on advanced filters.

## Dropdown menu header in filter input

The chevron down icon in the operand dropdown menu header was missing
due to a recent refactor of the DropdownMenuHeader component.

I just removed the unused EndIcon and replaced its usage by
EndComponent.

## Advanced filter dropdown staying open with 0 filters

The behavior we have for non-advanced filters is that the chip should
disappear if the filter gets empty, which is logical, an empty filter is
equivalent to not having filters, so don't want empty chips.

For advanced filters, the principle is the same, except that it's a bit
more complex to handle due to the recursive filter group hierarchy.

Here we create a useRemoveRootRecordFilterGroupIfEmpty hook, that we can
call everywhere a synchronous action should end up removing advanced
filters completely. (instead of using an effect)

This hook is distinct from removeRecordFilterGroup because we want
removeRecordFilterGroup to do only one job and we don't want it to hide
any side effect. It's better to have the side effect in a separate hook
that we call sequentially afterwards, in a self-explanatory manner.

## Miscellaneous

In this PR we add a new component selector to get the root level record
filter group, which is handy in a lot of cases.

The return type of the useChildRecordFiltersAndRecordFilterGroups hook
when it's empty has been fixed, though as discussed with Charles, it
would be better to turn it into selectors, which will certainly be done
in future PRs.
This commit is contained in:
Lucas Bordeau
2025-03-20 11:26:14 +01:00
committed by GitHub
parent 5f8fae9ada
commit 4b34aa60b1
11 changed files with 141 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown.tsx
View File

@ -1,5 +1,6 @@
import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
import { useRemoveRecordFilterGroup } from '@/object-record/record-filter-group/hooks/useRemoveRecordFilterGroup';
import { useRemoveRootRecordFilterGroupIfEmpty } from '@/object-record/record-filter-group/hooks/useRemoveRootRecordFilterGroupIfEmpty';
import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@ -20,6 +21,8 @@ export const AdvancedFilterRecordFilterGroupOptionsDropdown = ({
const { removeRecordFilter } = useRemoveRecordFilter();
const { removeRecordFilterGroup } = useRemoveRecordFilterGroup();
const { removeRootRecordFilterGroupIfEmpty } =
useRemoveRootRecordFilterGroupIfEmpty();
const { childRecordFilters } = useChildRecordFiltersAndRecordFilterGroups({
recordFilterGroupId,
@ -32,6 +35,8 @@ export const AdvancedFilterRecordFilterGroupOptionsDropdown = ({
removeRecordFilterGroup(recordFilterGroupId);
removeRootRecordFilterGroupIfEmpty();
closeDropdown();
};

6
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx
View File

@ -1,5 +1,6 @@
import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
import { useRemoveRecordFilterGroup } from '@/object-record/record-filter-group/hooks/useRemoveRecordFilterGroup';
import { useRemoveRootRecordFilterGroupIfEmpty } from '@/object-record/record-filter-group/hooks/useRemoveRootRecordFilterGroupIfEmpty';
import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
@ -38,6 +39,9 @@ export const AdvancedFilterRecordFilterOptionsDropdown = ({
recordFilterGroupId: currentRecordFilter?.recordFilterGroupId,
});
const { removeRootRecordFilterGroupIfEmpty } =
useRemoveRootRecordFilterGroupIfEmpty();
const handleRemove = async () => {
closeDropdown();
@ -51,6 +55,8 @@ export const AdvancedFilterRecordFilterOptionsDropdown = ({
}
removeRecordFilter({ recordFilterId: recordFilterId });
removeRootRecordFilterGroupIfEmpty();
};
return (

20
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRootLevelViewFilterGroup.tsx
View File

@ -5,8 +5,8 @@ import { AdvancedFilterRecordFilterGroupChildOptionsDropdown } from '@/object-re
import { AdvancedFilterRecordFilterGroup } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroup';
import { AdvancedFilterViewFilter } from '@/object-record/advanced-filter/components/AdvancedFilterViewFilter';
import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
import { rootLevelRecordFilterGroupComponentSelector } from '@/object-record/advanced-filter/states/rootLevelRecordFilterGroupComponentSelector';
import { isRecordFilterGroupChildARecordFilterGroup } from '@/object-record/advanced-filter/utils/isRecordFilterGroupChildARecordFilterGroup';
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import styled from '@emotion/styled';
import { isDefined } from 'twenty-shared';
@ -32,20 +32,14 @@ const StyledContainer = styled.div<{ isGrayBackground?: boolean }>`
`;
export const AdvancedFilterRootLevelViewFilterGroup = () => {
const currentRecordFilterGroups = useRecoilComponentValueV2(
currentRecordFilterGroupsComponentState,
const rootLevelRecordFilterGroup = useRecoilComponentValueV2(
rootLevelRecordFilterGroupComponentSelector,
);
const rootRecordFilterGroupId = currentRecordFilterGroups.find(
(recordFilterGroup) => !recordFilterGroup.parentRecordFilterGroupId,
)?.id;
const {
currentRecordFilterGroup: rootLevelRecordFilterGroup,
childRecordFiltersAndRecordFilterGroups,
} = useChildRecordFiltersAndRecordFilterGroups({
recordFilterGroupId: rootRecordFilterGroupId,
});
const { childRecordFiltersAndRecordFilterGroups } =
useChildRecordFiltersAndRecordFilterGroups({
recordFilterGroupId: rootLevelRecordFilterGroup?.id,
});
if (!isDefined(rootLevelRecordFilterGroup)) {
return null;

10
packages/twenty-front/src/modules/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups.ts
View File

@ -1,5 +1,7 @@
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { isDefined } from 'twenty-shared';
@ -23,9 +25,11 @@ export const useChildRecordFiltersAndRecordFilterGroups = ({
if (!isDefined(currentRecordFilterGroup)) {
return {
currentRecordFilterGroup: undefined,
childRecordFiltersAndRecordFilterGroups: [],
childRecordFilters: [],
childRecordFilterGroups: [],
childRecordFiltersAndRecordFilterGroups: [] as Array<
RecordFilter | RecordFilterGroup
>,
childRecordFilters: [] as RecordFilter[],
childRecordFilterGroups: [] as RecordFilterGroup[],
lastChildPosition: 0,
};
}

24
packages/twenty-front/src/modules/object-record/advanced-filter/states/rootLevelRecordFilterGroupComponentSelector.ts Normal file
View File

@ -0,0 +1,24 @@
import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
import { isDefined } from 'twenty-shared';
export const rootLevelRecordFilterGroupComponentSelector =
createComponentSelectorV2({
key: 'rootLevelRecordFilterGroupComponentSelector',
get:
({ instanceId }) =>
({ get }) => {
const currentRecordFilterGroups = get(
currentRecordFilterGroupsComponentState.atomFamily({ instanceId }),
);
const rootLevelRecordFilterGroup = currentRecordFilterGroups.find(
(recordFilterGroup) =>
!isDefined(recordFilterGroup.parentRecordFilterGroupId),
);
return rootLevelRecordFilterGroup;
},
componentInstanceContext: RecordFilterGroupsComponentInstanceContext,
});

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

@ -35,7 +35,7 @@ export const ObjectFilterDropdownOperandDropdown = ({
clickableComponent={
<StyledDropdownMenuHeader
key={'selected-filter-operand'}
EndIcon={IconChevronDown}
EndComponent={<IconChevronDown />}
>
{getOperandLabel(selectedOperandInDropdown)}
</StyledDropdownMenuHeader>

71
packages/twenty-front/src/modules/object-record/record-filter-group/hooks/useRemoveRootRecordFilterGroupIfEmpty.ts Normal file
View File

@ -0,0 +1,71 @@
import { useRemoveRecordFilterGroup } from '@/object-record/record-filter-group/hooks/useRemoveRecordFilterGroup';
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared';
export const useRemoveRootRecordFilterGroupIfEmpty = () => {
const currentRecordFilterGroupsCallbackState =
useRecoilComponentCallbackStateV2(currentRecordFilterGroupsComponentState);
const currentRecordFiltersCallbackState = useRecoilComponentCallbackStateV2(
currentRecordFiltersComponentState,
);
const { removeRecordFilterGroup } = useRemoveRecordFilterGroup();
const removeRootRecordFilterGroupIfEmpty = useRecoilCallback(
({ snapshot }) =>
() => {
const currentRecordFilterGroups = getSnapshotValue(
snapshot,
currentRecordFilterGroupsCallbackState,
);
const currentRecordFilters = getSnapshotValue(
snapshot,
currentRecordFiltersCallbackState,
);
const rootRecordFilterGroup = currentRecordFilterGroups.find(
(existingRecordFilterGroup) =>
!isDefined(existingRecordFilterGroup.parentRecordFilterGroupId),
);
if (isDefined(rootRecordFilterGroup)) {
const recordFilterGroupsInRootRecordFilterGroup =
currentRecordFilterGroups.filter(
(recordFilterGroupToFilter) =>
recordFilterGroupToFilter.parentRecordFilterGroupId ===
rootRecordFilterGroup.id,
);
const recordFiltersInRootRecordFilterGroup =
currentRecordFilters.filter(
(recordFilterToFilter) =>
recordFilterToFilter.recordFilterGroupId ===
rootRecordFilterGroup.id,
);
const rootRecordFilterGroupIsEmpty =
recordFilterGroupsInRootRecordFilterGroup.length === 0 &&
recordFiltersInRootRecordFilterGroup.length === 0;
if (rootRecordFilterGroupIsEmpty) {
removeRecordFilterGroup(rootRecordFilterGroup.id);
}
}
},
[
removeRecordFilterGroup,
currentRecordFilterGroupsCallbackState,
currentRecordFiltersCallbackState,
],
);
return {
removeRootRecordFilterGroupIfEmpty,
};
};

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

@ -1,6 +1,5 @@
import styled from '@emotion/styled';
import { ComponentProps, MouseEvent } from 'react';
import { IconComponent } from 'twenty-ui';
const StyledHeader = styled.li`
align-items: center;
@ -44,13 +43,13 @@ const StyledEndComponent = styled.div`
`;
type DropdownMenuHeaderProps = ComponentProps<'li'> & {
EndIcon?: IconComponent;
onClick?: (event: MouseEvent<HTMLLIElement>) => void;
testId?: string;
className?: string;
StartComponent?: React.ReactNode;
EndComponent?: React.ReactNode;
};
export const DropdownMenuHeader = ({
children,
StartComponent,

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

@ -1,7 +1,7 @@
import { Meta, StoryObj } from '@storybook/react';
import {
Avatar,
AVATAR_URL_MOCK,
Avatar,
ComponentDecorator,
IconChevronLeft,
IconChevronRight,
@ -9,11 +9,11 @@ import {
MenuItem,
} from 'twenty-ui';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
const meta: Meta<typeof DropdownMenuHeader> = {
title: 'UI/Layout/Dropdown/DropdownMenuHeader',
@ -40,7 +40,7 @@ export const StartIcon: Story = {
export const StartAndEndIcon: Story = {
args: {
StartComponent: <DropdownMenuHeaderLeftComponent Icon={IconChevronLeft} />,
EndIcon: IconChevronRight,
EndComponent: <IconChevronRight />,
children: 'Start and End Icon',
},
};

14
packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx
View File

@ -1,17 +1,20 @@
import { IconFilterCog } from 'twenty-ui';
import { useRemoveRecordFilterGroup } from '@/object-record/record-filter-group/hooks/useRemoveRecordFilterGroup';
import { useRemoveRootRecordFilterGroupIfEmpty } from '@/object-record/record-filter-group/hooks/useRemoveRootRecordFilterGroupIfEmpty';
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
import { plural } from 'pluralize';
import { isDefined } from 'twenty-shared';
import { isNonEmptyArray } from '~/utils/isNonEmptyArray';
export const AdvancedFilterChip = () => {
const { closeDropdown } = useDropdown(ADVANCED_FILTER_DROPDOWN_ID);
const currentRecordFilterGroups = useRecoilComponentValueV2(
currentRecordFilterGroupsComponentState,
);
@ -27,10 +30,11 @@ export const AdvancedFilterChip = () => {
const { removeRecordFilter } = useRemoveRecordFilter();
const { removeRecordFilterGroup } = useRemoveRecordFilterGroup();
const { removeRootRecordFilterGroupIfEmpty } =
useRemoveRootRecordFilterGroupIfEmpty();
const handleRemoveClick = () => {
if (!isNonEmptyArray(advancedRecordFilterIds)) {
throw new Error('No advanced view filters to remove');
}
closeDropdown();
const viewFilterGroupIds = currentRecordFilterGroups.map(
(recordFilterGroup) => recordFilterGroup.id,
@ -43,6 +47,8 @@ export const AdvancedFilterChip = () => {
for (const recordFilterId of advancedRecordFilterIds) {
removeRecordFilter({ recordFilterId });
}
removeRootRecordFilterGroupIfEmpty();
};
const advancedFilterCount = advancedRecordFilterIds.length;

13
packages/twenty-front/src/modules/views/components/AdvancedFilterDropdownButton.tsx
View File

@ -1,21 +1,18 @@
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { AdvancedFilterRootLevelViewFilterGroup } from '@/object-record/advanced-filter/components/AdvancedFilterRootLevelViewFilterGroup';
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { rootLevelRecordFilterGroupComponentSelector } from '@/object-record/advanced-filter/states/rootLevelRecordFilterGroupComponentSelector';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { AdvancedFilterChip } from '@/views/components/AdvancedFilterChip';
import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
import { isDefined } from 'twenty-shared';
export const AdvancedFilterDropdownButton = () => {
const currentRecordFilterGroups = useRecoilComponentValueV2(
currentRecordFilterGroupsComponentState,
const rootLevelRecordFilterGroup = useRecoilComponentValueV2(
rootLevelRecordFilterGroupComponentSelector,
);
const outermostRecordFilterGroupId = currentRecordFilterGroups.find(
(recordFilterGroup) => !recordFilterGroup.parentRecordFilterGroupId,
)?.id;
if (!outermostRecordFilterGroupId) {
if (!isDefined(rootLevelRecordFilterGroup)) {
return null;
}