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

Refactored ObjectFilterDropdown into ViewBarFilterDropdown (#11794)

Browse Source 
This PR refactors the non-generic part around ObjectFilterDropdown which
has been left in statu quo for months.

It also removes unused components. 

Overall this PR is doing renaming and it re-organizes files into their
relevant modules.

This clarifies a lot what's at the intersection between
object-filter-dropdown and views modules.

This PR was originally about removing any remaining useEffect around
ObjectFilterDropdown but there wasn't any.

## Details

### Removed unused files

- GenericEntityFilterChip
- SingleEntityObjectFilterDropdownButton (was used for the Task/Note
standalone page which doesn't exist anymore)

### Re-organized non-generic components into ViewBarFilterDropdown

- Use VIEW_BAR_FILTER_DROPDOWN_ID instead of OBJECT_FILTER_DROPDOWN_ID
- Use FILTER_FIELD_LIST_ID for selectable list
- Refactored ObjectFilterDropdownButton into a simple
ViewBarFilterDropdown
- Renamed MultipleFiltersDropdownContent to ViewBarFilterDropdownContent
- Renamed MultipleFiltersButton to ViewBarFilterButton
- Integrated MultipleFiltersDropdownButton to ViewBarFilterDropdown
- Renamed AdvancedFilterButton to ViewBarDetailsAddFilterButton

### Tests 

Fixed storybook test for ViewBarFilterDrodpown
This commit is contained in:
Lucas Bordeau
2025-04-29 18:05:12 +02:00
committed by GitHub
parent d8b2e1fb34
commit d52cb26599
19 changed files with 108 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,21 +0,0 @@
import { RecordFilter } from '../../record-filter/types/RecordFilter';
import { AvatarChip } from 'twenty-ui/components';
import { IconComponent } from 'twenty-ui/display';
type GenericEntityFilterChipProps = {
filter: RecordFilter;
Icon?: IconComponent;
};
export const GenericEntityFilterChip = ({
filter,
Icon,
}: GenericEntityFilterChipProps) => (
<AvatarChip
placeholderColorSeed={filter.value}
name={filter.displayValue}
avatarType="rounded"
avatarUrl={filter.displayAvatarUrl}
LeftIcon={Icon}
/>
);

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

@ -1,39 +0,0 @@
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
import { useFilterableFieldMetadataItemsInRecordIndexContext } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItemsInRecordIndexContext';
import { MultipleFiltersDropdownButton } from './MultipleFiltersDropdownButton';
import { SingleEntityObjectFilterDropdownButton } from './SingleEntityObjectFilterDropdownButton';
type ObjectFilterDropdownButtonProps = {
filterDropdownId: string;
hotkeyScope: HotkeyScope;
};
export const ObjectFilterDropdownButton = ({
filterDropdownId,
hotkeyScope,
}: ObjectFilterDropdownButtonProps) => {
const { filterableFieldMetadataItems } =
useFilterableFieldMetadataItemsInRecordIndexContext();
const hasOnlyOneEntityFilter =
filterableFieldMetadataItems.length === 1 &&
filterableFieldMetadataItems[0].type === 'RELATION';
if (!filterableFieldMetadataItems.length) {
return <></>;
}
return (
<ObjectFilterDropdownComponentInstanceContext.Provider
value={{ instanceId: filterDropdownId }}
>
{hasOnlyOneEntityFilter ? (
<SingleEntityObjectFilterDropdownButton hotkeyScope={hotkeyScope} />
) : (
<MultipleFiltersDropdownButton hotkeyScope={hotkeyScope} />
)}
</ObjectFilterDropdownComponentInstanceContext.Provider>
);
};

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

@ -2,9 +2,7 @@ import styled from '@emotion/styled';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { AdvancedFilterButton } from '@/object-record/object-filter-dropdown/components/AdvancedFilterButton';
import { ObjectFilterDropdownFilterSelectMenuItem } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem';
import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
@ -14,12 +12,11 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { FILTER_FIELD_LIST_ID } from '@/object-record/object-filter-dropdown/constants/FilterFieldListId';
import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
import { useFilterableFieldMetadataItemsInRecordIndexContext } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItemsInRecordIndexContext';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { useLingui } from '@lingui/react/macro';
import { isDefined } from 'twenty-shared/utils';
export const StyledInput = styled.input`
background: transparent;
@ -47,13 +44,7 @@ export const StyledInput = styled.input`
}
`;
type ObjectFilterDropdownFieldSelectProps = {
isAdvancedFilterButtonVisible?: boolean;
};
export const ObjectFilterDropdownFieldSelect = ({
isAdvancedFilterButtonVisible,
}: ObjectFilterDropdownFieldSelectProps) => {
export const ObjectFilterDropdownFieldSelect = () => {
const { recordIndexId } = useRecordIndexContextOrThrow();
const [objectFilterDropdownSearchInput, setObjectFilterDropdownSearchInput] =
@ -95,11 +86,6 @@ export const ObjectFilterDropdownFieldSelect = ({
visibleColumnsFieldMetadataItems.length > 0 &&
hiddenColumnsFieldMetadataItems.length > 0;
const { currentView } = useGetCurrentViewOnly();
const shouldShowAdvancedFilterButton =
isDefined(currentView?.objectMetadataId) && isAdvancedFilterButtonVisible;
const { t } = useLingui();
const selectableFieldMetadataItemIds = [
@ -124,7 +110,7 @@ export const ObjectFilterDropdownFieldSelect = ({
<SelectableList
hotkeyScope={FiltersHotkeyScope.ObjectFilterDropdownButton}
selectableItemIdArray={selectableFieldMetadataItemIds}
selectableListInstanceId={OBJECT_FILTER_DROPDOWN_ID}
selectableListInstanceId={FILTER_FIELD_LIST_ID}
>
<DropdownMenuItemsContainer>
{visibleColumnsFieldMetadataItems.map((visibleFieldMetadataItem) => (
@ -142,7 +128,6 @@ export const ObjectFilterDropdownFieldSelect = ({
))}
</DropdownMenuItemsContainer>
</SelectableList>
{shouldShowAdvancedFilterButton && <AdvancedFilterButton />}
</>
);
};

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

@ -1,4 +1,3 @@
import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState';
import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState';
@ -8,6 +7,7 @@ import { selectedOperandInDropdownComponentState } from '@/object-record/object-
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
import { FILTER_FIELD_LIST_ID } from '@/object-record/object-filter-dropdown/constants/FilterFieldListId';
import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
import { isCompositeFieldType } from '@/object-record/object-filter-dropdown/utils/isCompositeFieldType';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
@ -50,7 +50,7 @@ export const ObjectFilterDropdownFilterSelectMenuItem = ({
objectFilterDropdownFilterIsSelectedComponentState,
);
const { resetSelectedItem } = useSelectableList(OBJECT_FILTER_DROPDOWN_ID);
const { resetSelectedItem } = useSelectableList(FILTER_FIELD_LIST_ID);
const isSelectedItem = useRecoilComponentFamilyValueV2(
isSelectedItemIdComponentFamilySelector,

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

@ -1,6 +1,5 @@
import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { FILTER_FIELD_LIST_ID } from '@/object-record/object-filter-dropdown/constants/FilterFieldListId';
import { isCompositeFieldType } from '@/object-record/object-filter-dropdown/utils/isCompositeFieldType';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { isSelectedItemIdComponentFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdComponentFamilySelector';
@ -17,7 +16,7 @@ export const ObjectFilterDropdownFilterSelectMenuItemV2 = ({
fieldMetadataItemToSelect,
onClick,
}: ObjectFilterDropdownFilterSelectMenuItemV2Props) => {
const { resetSelectedItem } = useSelectableList(OBJECT_FILTER_DROPDOWN_ID);
const { resetSelectedItem } = useSelectableList(FILTER_FIELD_LIST_ID);
const isSelectedItem = useRecoilComponentFamilyValueV2(
isSelectedItemIdComponentFamilySelector,

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

@ -1,7 +1,7 @@
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
import { StyledInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFieldSelect';
import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
import { FILTER_FIELD_LIST_ID } from '@/object-record/object-filter-dropdown/constants/FilterFieldListId';
import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState';
import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector';
import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState';
@ -138,9 +138,10 @@ export const ObjectFilterDropdownSubFieldSelect = () => {
setObjectFilterDropdownFilterIsSelected(false);
setSubFieldNameUsedInDropdown(null);
};
const selectedItemId = useRecoilComponentValueV2(
selectedItemIdComponentState,
OBJECT_FILTER_DROPDOWN_ID,
FILTER_FIELD_LIST_ID,
);
if (!isDefined(objectFilterDropdownSubMenuFieldType)) {
@ -189,7 +190,7 @@ export const ObjectFilterDropdownSubFieldSelect = () => {
<SelectableList
hotkeyScope={FiltersHotkeyScope.ObjectFilterDropdownButton}
selectableItemIdArray={['-1', ...options]}
selectableListInstanceId={OBJECT_FILTER_DROPDOWN_ID}
selectableListInstanceId={FILTER_FIELD_LIST_ID}
>
{compositeFieldTypeFilterableByAnySubField ? (
<SelectableListItem

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

@ -1,62 +0,0 @@
import { useTheme } from '@emotion/react';
import { ObjectFilterDropdownRecordRemoveFilterMenuItem } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { SingleEntityObjectFilterDropdownButtonEffect } from '@/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButtonEffect';
import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useLingui } from '@lingui/react/macro';
import { GenericEntityFilterChip } from './GenericEntityFilterChip';
import { ObjectFilterDropdownRecordSelect } from './ObjectFilterDropdownRecordSelect';
import { ObjectFilterDropdownSearchInput } from './ObjectFilterDropdownSearchInput';
import { IconChevronDown } from 'twenty-ui/display';
const SINGLE_ENTITY_FILTER_DROPDOWN_ID = 'single-entity-filter-dropdown';
export const SingleEntityObjectFilterDropdownButton = ({
hotkeyScope,
}: {
hotkeyScope: HotkeyScope;
}) => {
const selectedFilter = useRecoilComponentValueV2(
selectedFilterComponentState,
);
const theme = useTheme();
const { t } = useLingui();
return (
<>
<SingleEntityObjectFilterDropdownButtonEffect />
<Dropdown
dropdownId={SINGLE_ENTITY_FILTER_DROPDOWN_ID}
dropdownHotkeyScope={hotkeyScope}
dropdownOffset={{ x: 0, y: -28 }}
clickableComponent={
<StyledHeaderDropdownButton>
{selectedFilter ? (
<GenericEntityFilterChip filter={selectedFilter} />
) : (
t`Filter`
)}
<IconChevronDown size={theme.icon.size.md} />
</StyledHeaderDropdownButton>
}
dropdownComponents={
<>
<ObjectFilterDropdownSearchInput />
<DropdownMenuSeparator />
<ObjectFilterDropdownRecordRemoveFilterMenuItem />
<ObjectFilterDropdownRecordSelect
viewComponentId={SINGLE_ENTITY_FILTER_DROPDOWN_ID}
/>
</>
}
/>
</>
);
};

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

@ -1,39 +0,0 @@
import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState';
import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
import { useFilterableFieldMetadataItemsInRecordIndexContext } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItemsInRecordIndexContext';
import { getRecordFilterOperands } from '@/object-record/record-filter/utils/getRecordFilterOperands';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { useEffect } from 'react';
export const SingleEntityObjectFilterDropdownButtonEffect = () => {
const setFieldMetadataItemIdUsedInDropdown = useSetRecoilComponentStateV2(
fieldMetadataItemIdUsedInDropdownComponentState,
);
const setSelectedOperandInDropdown = useSetRecoilComponentStateV2(
selectedOperandInDropdownComponentState,
);
const { filterableFieldMetadataItems } =
useFilterableFieldMetadataItemsInRecordIndexContext();
const firstFieldMetadataItem = filterableFieldMetadataItems[0];
useEffect(() => {
setFieldMetadataItemIdUsedInDropdown(firstFieldMetadataItem.id);
const filterType = getFilterTypeFromFieldType(firstFieldMetadataItem.type);
const defaultOperand = getRecordFilterOperands({ filterType })[0];
setSelectedOperandInDropdown(defaultOperand);
}, [
firstFieldMetadataItem,
setSelectedOperandInDropdown,
setFieldMetadataItemIdUsedInDropdown,
]);
return null;
};

1
packages/twenty-front/src/modules/object-record/object-filter-dropdown/constants/FilterFieldListId.ts Normal file
View File

@ -0,0 +1 @@
export const FILTER_FIELD_LIST_ID = 'filter-field-list';

1
packages/twenty-front/src/modules/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId.ts
View File

@ -1 +0,0 @@
export const OBJECT_FILTER_DROPDOWN_ID = 'filter';

20
packages/twenty-front/src/modules/views/components/ViewBar.tsx
View File

@ -1,7 +1,6 @@
import { ReactNode } from 'react';
import { useParams } from 'react-router-dom';
import { ObjectFilterDropdownButton } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownButton';
import { ObjectSortDropdownButton } from '@/object-record/object-sort-dropdown/components/ObjectSortDropdownButton';
import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
@ -14,12 +13,15 @@ import { ViewPickerDropdown } from '@/views/view-picker/components/ViewPickerDro
import { ViewsHotkeyScope } from '../types/ViewsHotkeyScope';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
import { VIEW_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ViewSortDropdownId';
import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
import { ViewBarFilterDropdown } from '@/views/components/ViewBarFilterDropdown';
import { ViewBarRecordFilterEffect } from '@/views/components/ViewBarRecordFilterEffect';
import { ViewBarRecordFilterGroupEffect } from '@/views/components/ViewBarRecordFilterGroupEffect';
import { ViewBarRecordSortEffect } from '@/views/components/ViewBarRecordSortEffect';
import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
import { UpdateViewButtonGroup } from './UpdateViewButtonGroup';
import { ViewBarDetails } from './ViewBarDetails';
@ -61,12 +63,15 @@ export const ViewBar = ({
}
rightComponent={
<>
<ObjectFilterDropdownButton
filterDropdownId={filterDropdownId}
hotkeyScope={{
scope: FiltersHotkeyScope.ObjectFilterDropdownButton,
}}
/>
<ObjectFilterDropdownComponentInstanceContext.Provider
value={{ instanceId: VIEW_BAR_FILTER_DROPDOWN_ID }}
>
<ViewBarFilterDropdown
hotkeyScope={{
scope: FiltersHotkeyScope.ObjectFilterDropdownButton,
}}
/>
</ObjectFilterDropdownComponentInstanceContext.Provider>
<ObjectSortDropdownButton
hotkeyScope={{
scope: FiltersHotkeyScope.ObjectSortDropdownButton,
@ -77,7 +82,6 @@ export const ViewBar = ({
}
bottomComponent={
<ViewBarDetails
filterDropdownId={filterDropdownId}
hasFilterButton
viewBarId={viewBarId}
objectNamePlural={objectNamePlural}

8
packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
View File

@ -2,7 +2,6 @@ import styled from '@emotion/styled';
import { ReactNode, useMemo } from 'react';
import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
import { AddObjectFilterFromDetailsButton } from '@/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
import { useHandleToggleTrashColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleTrashColumnFilter';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
@ -10,6 +9,7 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
import { AdvancedFilterDropdownButton } from '@/views/components/AdvancedFilterDropdownButton';
import { EditableFilterDropdownButton } from '@/views/components/EditableFilterDropdownButton';
import { EditableSortChip } from '@/views/components/EditableSortChip';
import { ViewBarDetailsAddFilterButton } from '@/views/components/ViewBarDetailsAddFilterButton';
import { useViewFromQueryParams } from '@/views/hooks/internal/useViewFromQueryParams';
import { useCheckIsSoftDeleteFilter } from '@/object-record/record-filter/hooks/useCheckIsSoftDeleteFilter';
@ -34,7 +34,6 @@ import { LightButton } from 'twenty-ui/input';
export type ViewBarDetailsProps = {
hasFilterButton?: boolean;
rightComponent?: ReactNode;
filterDropdownId?: string;
viewBarId: string;
objectNamePlural: string;
};
@ -99,7 +98,6 @@ const StyledAddFilterContainer = styled.div`
export const ViewBarDetails = ({
hasFilterButton = false,
rightComponent,
filterDropdownId,
viewBarId,
objectNamePlural,
}: ViewBarDetailsProps) => {
@ -244,9 +242,7 @@ export const ViewBarDetails = ({
</ScrollWrapper>
{hasFilterButton && (
<StyledAddFilterContainer>
<AddObjectFilterFromDetailsButton
filterDropdownId={filterDropdownId}
/>
<ViewBarDetailsAddFilterButton />
</StyledAddFilterContainer>
)}
</StyledFilterContainer>

16
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx → packages/twenty-front/src/modules/views/components/ViewBarDetailsAddFilterButton.tsx
View File

@ -1,21 +1,17 @@
import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
import { useResetFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useResetFilterDropdown';
import { t } from '@lingui/core/macro';
import { IconPlus } from 'twenty-ui/display';
import { LightButton } from 'twenty-ui/input';
type AddObjectFilterFromDetailsButtonProps = {
filterDropdownId?: string;
};
export const ViewBarDetailsAddFilterButton = () => {
const { toggleDropdown } = useDropdown(VIEW_BAR_FILTER_DROPDOWN_ID);
export const AddObjectFilterFromDetailsButton = ({
filterDropdownId,
}: AddObjectFilterFromDetailsButtonProps) => {
const { toggleDropdown } = useDropdown(OBJECT_FILTER_DROPDOWN_ID);
const { resetFilterDropdown } = useResetFilterDropdown(filterDropdownId);
const { resetFilterDropdown } = useResetFilterDropdown(
VIEW_BAR_FILTER_DROPDOWN_ID,
);
const handleClick = () => {
resetFilterDropdown();

6
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersButton.tsx → packages/twenty-front/src/modules/views/components/ViewBarFilterButton.tsx
View File

@ -1,14 +1,14 @@
import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
import { useResetFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useResetFilterDropdown';
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
import { Trans } from '@lingui/react/macro';
export const MultipleFiltersButton = () => {
export const ViewBarFilterButton = () => {
const { resetFilterDropdown } = useResetFilterDropdown();
const { toggleDropdown, isDropdownOpen } = useDropdown(
OBJECT_FILTER_DROPDOWN_ID,
VIEW_BAR_FILTER_DROPDOWN_ID,
);
const handleClick = () => {

18
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton.tsx → packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx
View File

@ -1,23 +1,23 @@
import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
import { useResetFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useResetFilterDropdown';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
import { isRecordFilterConsideredEmpty } from '@/object-record/record-filter/utils/isRecordFilterConsideredEmpty';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { ViewBarFilterDropdownContent } from '@/views/components/ViewBarFilterDropdownContent';
import { isDefined } from 'twenty-shared/utils';
import { MultipleFiltersButton } from './MultipleFiltersButton';
import { MultipleFiltersDropdownContent } from './MultipleFiltersDropdownContent';
import { ViewBarFilterButton } from './ViewBarFilterButton';
type MultipleFiltersDropdownButtonProps = {
type ViewBarFilterDropdownProps = {
hotkeyScope: HotkeyScope;
};
export const MultipleFiltersDropdownButton = ({
export const ViewBarFilterDropdown = ({
hotkeyScope,
}: MultipleFiltersDropdownButtonProps) => {
}: ViewBarFilterDropdownProps) => {
const { resetFilterDropdown } = useResetFilterDropdown();
const { removeRecordFilter } = useRemoveRecordFilter();
@ -42,10 +42,10 @@ export const MultipleFiltersDropdownButton = ({
return (
<Dropdown
dropdownId={OBJECT_FILTER_DROPDOWN_ID}
dropdownId={VIEW_BAR_FILTER_DROPDOWN_ID}
onClose={handleDropdownClose}
clickableComponent={<MultipleFiltersButton />}
dropdownComponents={<MultipleFiltersDropdownContent />}
clickableComponent={<ViewBarFilterButton />}
dropdownComponents={<ViewBarFilterDropdownContent />}
dropdownHotkeyScope={hotkeyScope}
dropdownOffset={{ y: 8 }}
onClickOutside={handleDropdownClickOutside}

6
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AdvancedFilterButton.tsx → packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx
View File

@ -1,9 +1,9 @@
import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
import { availableFieldMetadataItemsForFilterFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForFilterFamilySelector';
import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
import { useUpsertRecordFilterGroup } from '@/object-record/record-filter-group/hooks/useUpsertRecordFilterGroup';
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { useUpsertRecordFilter } from '@/object-record/record-filter/hooks/useUpsertRecordFilter';
import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
import { useSetRecordFilterUsedInAdvancedFilterDropdownRow } from '@/object-record/advanced-filter/hooks/useSetRecordFilterUsedInAdvancedFilterDropdownRow';
import { RecordFilterGroupLogicalOperator } from '@/object-record/record-filter-group/types/RecordFilterGroupLogicalOperator';
@ -40,7 +40,7 @@ export const StyledPill = styled(Pill)`
color: ${({ theme }) => theme.color.blue};
`;
export const AdvancedFilterButton = () => {
export const ViewBarFilterDropdownAdvancedFilterButton = () => {
const advancedFilterQuerySubFilterCount = 0; // TODO
const { t } = useLingui();
@ -50,7 +50,7 @@ export const AdvancedFilterButton = () => {
);
const { closeDropdown: closeObjectFilterDropdown } = useDropdown(
OBJECT_FILTER_DROPDOWN_ID,
VIEW_BAR_FILTER_DROPDOWN_ID,
);
const { currentView } = useGetCurrentViewOnly();

23
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownContent.tsx → packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownContent.tsx
View File

@ -3,24 +3,20 @@ import { ObjectFilterOperandSelectAndInput } from '@/object-record/object-filter
import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState';
import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownIsSelectingCompositeFieldComponentState';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
import { ObjectFilterDropdownFieldSelect } from './ObjectFilterDropdownFieldSelect';
import { ViewBarFilterDropdownAdvancedFilterButton } from '@/views/components/ViewBarFilterDropdownAdvancedFilterButton';
import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
import { ObjectFilterDropdownFieldSelect } from '../../object-record/object-filter-dropdown/components/ObjectFilterDropdownFieldSelect';
type MultipleFiltersDropdownContentProps = {
filterDropdownId?: string;
};
export const MultipleFiltersDropdownContent = ({
filterDropdownId,
}: MultipleFiltersDropdownContentProps) => {
export const ViewBarFilterDropdownContent = () => {
const [objectFilterDropdownIsSelectingCompositeField] =
useRecoilComponentStateV2(
objectFilterDropdownIsSelectingCompositeFieldComponentState,
filterDropdownId,
VIEW_BAR_FILTER_DROPDOWN_ID,
);
const [objectFilterDropdownFilterIsSelected] = useRecoilComponentStateV2(
objectFilterDropdownFilterIsSelectedComponentState,
filterDropdownId,
VIEW_BAR_FILTER_DROPDOWN_ID,
);
const shouldShowCompositeSelectionSubMenu =
@ -32,12 +28,15 @@ export const MultipleFiltersDropdownContent = ({
<>
{shouldShowFilterInput ? (
<ObjectFilterOperandSelectAndInput
filterDropdownId={filterDropdownId}
filterDropdownId={VIEW_BAR_FILTER_DROPDOWN_ID}
/>
) : shouldShowCompositeSelectionSubMenu ? (
<ObjectFilterDropdownSubFieldSelect />
) : (
<ObjectFilterDropdownFieldSelect isAdvancedFilterButtonVisible />
<>
<ObjectFilterDropdownFieldSelect />
<ViewBarFilterDropdownAdvancedFilterButton />
</>
)}
</>
);

57
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx → packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx
View File

@ -1,20 +1,30 @@
import { Meta, StoryObj } from '@storybook/react';
import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition';
import { MultipleFiltersDropdownButton } from '@/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
import { prefetchViewsState } from '@/prefetch/states/prefetchViewsState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { ViewBarFilterDropdown } from '@/views/components/ViewBarFilterDropdown';
import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
import { ViewType } from '@/views/types/ViewType';
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
import { View } from '@/views/types/View';
import { within } from '@storybook/test';
import { useSetRecoilState } from 'recoil';
import {
ComponentDecorator,
getCanvasElementForDropdownTesting,
@ -26,22 +36,53 @@ import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadat
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
const meta: Meta<typeof MultipleFiltersDropdownButton> = {
title:
'Modules/ObjectRecord/ObjectFilterDropdown/MultipleFiltersDropdownButton',
component: MultipleFiltersDropdownButton,
const meta: Meta<typeof ViewBarFilterDropdown> = {
title: 'Modules/Views/ViewBarFilterDropdown',
component: ViewBarFilterDropdown,
decorators: [
(Story) => {
const companyObjectMetadataItem = generatedMockObjectMetadataItems.find(
(item) => item.nameSingular === CoreObjectNameSingular.Company,
)!;
const instanceId = 'entity-tasks-filter-scope';
const instanceId = companyObjectMetadataItem.id;
const setTableColumns = useSetRecoilComponentStateV2(
tableColumnsComponentState,
instanceId,
);
const setPrefetchViews = useSetRecoilState(prefetchViewsState);
const mockView: View = {
id: 'view-1',
name: 'Test View',
objectMetadataId: companyObjectMetadataItem.id,
viewFilters: [],
viewFilterGroups: [],
type: ViewType.Table,
key: null,
isCompact: false,
openRecordIn: ViewOpenRecordInType.SIDE_PANEL,
viewFields: [],
viewGroups: [],
viewSorts: [],
kanbanFieldMetadataId: '',
kanbanAggregateOperation: AGGREGATE_OPERATIONS.count,
icon: '',
kanbanAggregateOperationFieldMetadataId: '',
position: 0,
__typename: 'View',
};
setPrefetchViews([mockView]);
const setCurrentViewId = useSetRecoilComponentStateV2(
contextStoreCurrentViewIdComponentState,
MAIN_CONTEXT_STORE_INSTANCE_ID,
);
setCurrentViewId('view-1');
const columns = companyObjectMetadataItem.fields.map(
(fieldMetadataItem, index) =>
formatFieldMetadataItemAsColumnDefinition({
@ -74,7 +115,7 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
value={{ instanceId }}
>
<ObjectFilterDropdownComponentInstanceContext.Provider
value={{ instanceId }}
value={{ instanceId: VIEW_BAR_FILTER_DROPDOWN_ID }}
>
<RecordTableComponentInstanceContext.Provider
value={{
@ -104,7 +145,7 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
],
args: {
hotkeyScope: {
scope: 'object-filter-dropdown',
scope: 'view-bar-filter-dropdown',
},
},
};

1
packages/twenty-front/src/modules/views/constants/ViewBarFilterDropdownId.ts Normal file
View File

@ -0,0 +1 @@
export const VIEW_BAR_FILTER_DROPDOWN_ID = 'view-bar-filter-dropdown';