Refactored ObjectFilterDropdown into ViewBarFilterDropdown (#11794)

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

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

@@ -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}
-  />
-);

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

@@ -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>
-  );
-};

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

@@ -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 = {
+export const ObjectFilterDropdownFieldSelect = () => {
-  isAdvancedFilterButtonVisible?: boolean;
-};
-
-export const ObjectFilterDropdownFieldSelect = ({
-  isAdvancedFilterButtonVisible,
-}: ObjectFilterDropdownFieldSelectProps) => {
   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 />}
     </>
   );
 };

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

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

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

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

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

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

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

@@ -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}
-            />
-          </>
-        }
-      />
-    </>
-  );
-};

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

@@ -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;
-};

packages/twenty-front/src/modules/object-record/object-filter-dropdown/constants/FilterFieldListId.ts

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

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

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

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

@@ -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
+            <ObjectFilterDropdownComponentInstanceContext.Provider
-              filterDropdownId={filterDropdownId}
+              value={{ instanceId: VIEW_BAR_FILTER_DROPDOWN_ID }}
-              hotkeyScope={{
+            >
-                scope: FiltersHotkeyScope.ObjectFilterDropdownButton,
+              <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}

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

@@ -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
+            <ViewBarDetailsAddFilterButton />
-              filterDropdownId={filterDropdownId}
-            />
           </StyledAddFilterContainer>
         )}
       </StyledFilterContainer>

packages/twenty-front/src/modules/views/components/ViewBarDetailsAddFilterButton.tsx

@@ -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 = {
+export const ViewBarDetailsAddFilterButton = () => {
-  filterDropdownId?: string;
+  const { toggleDropdown } = useDropdown(VIEW_BAR_FILTER_DROPDOWN_ID);
-};
 
-export const AddObjectFilterFromDetailsButton = ({
+  const { resetFilterDropdown } = useResetFilterDropdown(
-  filterDropdownId,
+    VIEW_BAR_FILTER_DROPDOWN_ID,
-}: AddObjectFilterFromDetailsButtonProps) => {
+  );
-  const { toggleDropdown } = useDropdown(OBJECT_FILTER_DROPDOWN_ID);
-
-  const { resetFilterDropdown } = useResetFilterDropdown(filterDropdownId);
 
   const handleClick = () => {
     resetFilterDropdown();

packages/twenty-front/src/modules/views/components/ViewBarFilterButton.tsx

@@ -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 = () => {

packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx

@@ -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 { ViewBarFilterButton } from './ViewBarFilterButton';
-import { MultipleFiltersDropdownContent } from './MultipleFiltersDropdownContent';
 
-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 />}
+      clickableComponent={<ViewBarFilterButton />}
-      dropdownComponents={<MultipleFiltersDropdownContent />}
+      dropdownComponents={<ViewBarFilterDropdownContent />}
       dropdownHotkeyScope={hotkeyScope}
       dropdownOffset={{ y: 8 }}
       onClickOutside={handleDropdownClickOutside}

packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx

@@ -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();

packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownContent.tsx

@@ -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 = {
+export const ViewBarFilterDropdownContent = () => {
-  filterDropdownId?: string;
-};
-
-export const MultipleFiltersDropdownContent = ({
-  filterDropdownId,
-}: MultipleFiltersDropdownContentProps) => {
   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 />
+        </>
       )}
     </>
   );

packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx

@@ -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> = {
+const meta: Meta<typeof ViewBarFilterDropdown> = {
-  title:
+  title: 'Modules/Views/ViewBarFilterDropdown',
-    'Modules/ObjectRecord/ObjectFilterDropdown/MultipleFiltersDropdownButton',
+  component: ViewBarFilterDropdown,
-  component: MultipleFiltersDropdownButton,
   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',
     },
   },
 };

packages/twenty-front/src/modules/views/constants/ViewBarFilterDropdownId.ts

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