diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx
index 3fc1c12d1b..80196d25cc 100644
--- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx
@@ -7,9 +7,12 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
import { isSelectedItemIdComponentFamilyState } from '@/ui/layout/selectable-list/states/isSelectedItemIdComponentFamilyState';
import { useAtomComponentFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentFamilyStateValue';
import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
+import { useAtomComponentSelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentSelectorValue';
import { VIEW_BAR_FILTER_BOTTOM_MENU_ITEM_IDS } from '@/views/constants/ViewBarFilterBottomMenuItemIds';
+import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
import { useSetRecordFilterUsedInAdvancedFilterDropdownRow } from '@/object-record/advanced-filter/hooks/useSetRecordFilterUsedInAdvancedFilterDropdownRow';
+import { rootLevelRecordFilterGroupComponentSelector } from '@/object-record/advanced-filter/states/rootLevelRecordFilterGroupComponentSelector';
import { useCreateEmptyRecordFilterFromFieldMetadataItem } from '@/object-record/record-filter/hooks/useCreateEmptyRecordFilterFromFieldMetadataItem';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
@@ -34,7 +37,17 @@ const StyledPillContainer = styled.span`
`;
export const ViewBarFilterDropdownAdvancedFilterButton = () => {
- const advancedFilterQuerySubFilterCount = 0; // TODO
+ const rootRecordFilterGroup = useAtomComponentSelectorValue(
+ rootLevelRecordFilterGroupComponentSelector,
+ );
+
+ const { childRecordFiltersAndRecordFilterGroups } =
+ useChildRecordFiltersAndRecordFilterGroups({
+ recordFilterGroupId: rootRecordFilterGroup?.id,
+ });
+
+ const advancedFilterQuerySubFilterCount =
+ childRecordFiltersAndRecordFilterGroups.length;
const { t } = useLingui();
@@ -134,12 +147,14 @@ export const ViewBarFilterDropdownAdvancedFilterButton = () => {
onClick={handleClick}
LeftIcon={IconFilter}
focused={isSelectedItemId}
+ RightComponent={
+ advancedFilterQuerySubFilterCount > 0 ? (
+
+
+
+ ) : undefined
+ }
/>
- {advancedFilterQuerySubFilterCount > 0 && (
-
-
-
- )}
);
};
diff --git a/packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx b/packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx
index d4181ac703..c0a954efb5 100644
--- a/packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx
+++ b/packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx
@@ -9,16 +9,22 @@ import { RecordTableComponentInstanceContext } from '@/object-record/record-tabl
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
import { ViewBarFilterDropdown } from '@/views/components/ViewBarFilterDropdown';
import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
-import { CoreObjectNameSingular } from 'twenty-shared/types';
+import {
+ CoreObjectNameSingular,
+ RecordFilterGroupLogicalOperator,
+ ViewFilterOperand,
+} from 'twenty-shared/types';
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { RecordComponentInstanceContextsWrapper } from '@/object-record/components/RecordComponentInstanceContextsWrapper';
import { currentRecordFieldsComponentState } from '@/object-record/record-field/states/currentRecordFieldsComponentState';
import { type RecordField } from '@/object-record/record-field/types/RecordField';
+import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
+import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { useRecordIndexFieldMetadataDerivedStates } from '@/object-record/record-index/hooks/useRecordIndexFieldMetadataDerivedStates';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds';
-import { userEvent, within } from 'storybook/test';
+import { expect, userEvent, within } from 'storybook/test';
import { ComponentDecorator } from 'twenty-ui/testing';
import { ContextStoreDecorator } from '~/testing/decorators/ContextStoreDecorator';
import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
@@ -191,3 +197,96 @@ export const Number: Story = {
await userEvent.click(dateFilter);
},
};
+
+const MOCK_ROOT_FILTER_GROUP_ID = 'test-root-filter-group-id';
+
+export const AdvancedFilterCountBadge: Story = {
+ decorators: [
+ (Story) => {
+ const companyObjectMetadataItem =
+ getTestEnrichedObjectMetadataItemsMock().find(
+ (item) => item.nameSingular === CoreObjectNameSingular.Company,
+ )!;
+ const instanceId = companyObjectMetadataItem.id;
+
+ const setCurrentRecordFilterGroups = useSetAtomComponentState(
+ currentRecordFilterGroupsComponentState,
+ instanceId,
+ );
+
+ const setCurrentRecordFilters = useSetAtomComponentState(
+ currentRecordFiltersComponentState,
+ instanceId,
+ );
+
+ const firstFieldMetadataItem = companyObjectMetadataItem.fields[0];
+
+ useEffect(() => {
+ setCurrentRecordFilterGroups([
+ {
+ id: MOCK_ROOT_FILTER_GROUP_ID,
+ logicalOperator: RecordFilterGroupLogicalOperator.AND,
+ positionInRecordFilterGroup: 0,
+ },
+ ]);
+
+ setCurrentRecordFilters([
+ {
+ id: 'filter-1',
+ fieldMetadataId: firstFieldMetadataItem.id,
+ value: 'test-value-1',
+ displayValue: 'Test 1',
+ type: 'TEXT',
+ operand: ViewFilterOperand.CONTAINS,
+ label: firstFieldMetadataItem.label,
+ recordFilterGroupId: MOCK_ROOT_FILTER_GROUP_ID,
+ positionInRecordFilterGroup: 0,
+ },
+ {
+ id: 'filter-2',
+ fieldMetadataId: firstFieldMetadataItem.id,
+ value: 'test-value-2',
+ displayValue: 'Test 2',
+ type: 'TEXT',
+ operand: ViewFilterOperand.CONTAINS,
+ label: firstFieldMetadataItem.label,
+ recordFilterGroupId: MOCK_ROOT_FILTER_GROUP_ID,
+ positionInRecordFilterGroup: 1,
+ },
+ {
+ id: 'filter-3',
+ fieldMetadataId: firstFieldMetadataItem.id,
+ value: 'test-value-3',
+ displayValue: 'Test 3',
+ type: 'TEXT',
+ operand: ViewFilterOperand.CONTAINS,
+ label: firstFieldMetadataItem.label,
+ recordFilterGroupId: MOCK_ROOT_FILTER_GROUP_ID,
+ positionInRecordFilterGroup: 2,
+ },
+ ]);
+ }, [
+ setCurrentRecordFilterGroups,
+ setCurrentRecordFilters,
+ firstFieldMetadataItem,
+ ]);
+
+ return ;
+ },
+ ],
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement.ownerDocument.body);
+
+ const filterButton = await canvas.findByText('Filter');
+
+ await userEvent.click(filterButton);
+
+ const advancedFilterButton = await canvas.findByText('Advanced filter');
+
+ expect(advancedFilterButton).toBeVisible();
+
+ const pillBadge = await canvas.findByText('3');
+
+ expect(pillBadge).toBeVisible();
+ },
+};