Removed availableFilterDefinitions as a state but kept its usage as a derived state of objectMetadataItems (#9972)

The global record filter refactor will derive everything at runtime from objectMetadataItemsState, thus removing the need for a filter definition concept. Here we don't yet remove available filter definition usage but we replace the available filter definitions states, we now derive the same value from objectMetadataItemsState. This will allow us to progressively remove the usage of the concept of filter definition, at the end it will then be easy to just remove from the codebase because nothing will use it anymore.
2025-02-03 17:29:57 +01:00
parent c8af90dc01
commit b29ff9b4e6
32 changed files with 566 additions and 423 deletions
--- a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx
@ -1,23 +1,16 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';

 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { EditableFilterChip } from '@/views/components/EditableFilterChip';

 import { ObjectFilterOperandSelectAndInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterOperandSelectAndInput';
-import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState';
-import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
-import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
-import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
 import { RecordFilterOperand } from '@/object-record/record-filter/types/RecordFilterOperand';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { EditableFilterDropdownButtonEffect } from '@/views/components/EditableFilterDropdownButtonEffect';
 import { useDeleteCombinedViewFilters } from '@/views/hooks/useDeleteCombinedViewFilters';
-import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
-import { isDefined } from 'twenty-shared';

 type EditableFilterDropdownButtonProps = {
  viewFilterDropdownId: string;
@ -30,57 +23,10 @@ export const EditableFilterDropdownButton = ({
  viewFilter,
  hotkeyScope,
 }: EditableFilterDropdownButtonProps) => {
-  const setFilterDefinitionUsedInDropdown = useSetRecoilComponentStateV2(
-    filterDefinitionUsedInDropdownComponentState,
-    viewFilterDropdownId,
-  );
-
-  const setFieldMetadataItemIdUsedInDropdown = useSetRecoilComponentStateV2(
-    fieldMetadataItemIdUsedInDropdownComponentState,
-  );
-
-  const setSelectedOperandInDropdown = useSetRecoilComponentStateV2(
-    selectedOperandInDropdownComponentState,
-    viewFilterDropdownId,
-  );
-
-  const setSelectedFilter = useSetRecoilComponentStateV2(
-    selectedFilterComponentState,
-    viewFilterDropdownId,
-  );
-
-  // TODO: verify this instance id works
-  const availableFilterDefinitions = useRecoilComponentValueV2(
-    availableFilterDefinitionsComponentState,
-    viewFilterDropdownId,
-  );
-
  const { closeDropdown } = useDropdown(viewFilterDropdownId);

  const { deleteCombinedViewFilter } = useDeleteCombinedViewFilters();

-  useEffect(() => {
-    const filterDefinition = availableFilterDefinitions.find(
-      (filterDefinition) =>
-        filterDefinition.fieldMetadataId === viewFilter.fieldMetadataId,
-    );
-
-    if (isDefined(filterDefinition)) {
-      setFilterDefinitionUsedInDropdown(filterDefinition);
-      setFieldMetadataItemIdUsedInDropdown(filterDefinition.fieldMetadataId);
-      setSelectedOperandInDropdown(viewFilter.operand);
-      setSelectedFilter(viewFilter);
-    }
-  }, [
-    availableFilterDefinitions,
-    setFilterDefinitionUsedInDropdown,
-    setFieldMetadataItemIdUsedInDropdown,
-    viewFilter,
-    setSelectedOperandInDropdown,
-    setSelectedFilter,
-    viewFilterDropdownId,
-  ]);
-
  const { removeRecordFilter } = useRemoveRecordFilter();

  const handleRemove = () => {
@ -108,20 +54,26 @@ export const EditableFilterDropdownButton = ({
  }, [viewFilter, deleteCombinedViewFilter, removeRecordFilter]);

  return (
-    <Dropdown
-      dropdownId={viewFilterDropdownId}
-      clickableComponent={
-        <EditableFilterChip viewFilter={viewFilter} onRemove={handleRemove} />
-      }
-      dropdownComponents={
-        <ObjectFilterOperandSelectAndInput
-          filterDropdownId={viewFilterDropdownId}
-        />
-      }
-      dropdownHotkeyScope={hotkeyScope}
-      dropdownOffset={{ y: 8, x: 0 }}
-      dropdownPlacement="bottom-start"
-      onClickOutside={handleDropdownClickOutside}
-    />
+    <>
+      <EditableFilterDropdownButtonEffect
+        viewFilterDropdownId={viewFilterDropdownId}
+        viewFilter={viewFilter}
+      />
+      <Dropdown
+        dropdownId={viewFilterDropdownId}
+        clickableComponent={
+          <EditableFilterChip viewFilter={viewFilter} onRemove={handleRemove} />
+        }
+        dropdownComponents={
+          <ObjectFilterOperandSelectAndInput
+            filterDropdownId={viewFilterDropdownId}
+          />
+        }
+        dropdownHotkeyScope={hotkeyScope}
+        dropdownOffset={{ y: 8, x: 0 }}
+        dropdownPlacement="bottom-start"
+        onClickOutside={handleDropdownClickOutside}
+      />
+    </>
  );
 };
--- a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButtonEffect.tsx
+++ b/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButtonEffect.tsx
@ -0,0 +1,74 @@
+import { useEffect } from 'react';
+
+import { formatFieldMetadataItemAsFilterDefinition } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
+import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState';
+import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
+import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
+import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
+import { useFilterableFieldMetadataItems } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItems';
+import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { isDefined } from 'twenty-shared';
+
+type EditableFilterDropdownButtonEffectProps = {
+  viewFilterDropdownId: string;
+  viewFilter: RecordFilter;
+};
+
+export const EditableFilterDropdownButtonEffect = ({
+  viewFilterDropdownId,
+  viewFilter,
+}: EditableFilterDropdownButtonEffectProps) => {
+  const setFilterDefinitionUsedInDropdown = useSetRecoilComponentStateV2(
+    filterDefinitionUsedInDropdownComponentState,
+    viewFilterDropdownId,
+  );
+
+  const setFieldMetadataItemIdUsedInDropdown = useSetRecoilComponentStateV2(
+    fieldMetadataItemIdUsedInDropdownComponentState,
+  );
+
+  const setSelectedOperandInDropdown = useSetRecoilComponentStateV2(
+    selectedOperandInDropdownComponentState,
+    viewFilterDropdownId,
+  );
+
+  const setSelectedFilter = useSetRecoilComponentStateV2(
+    selectedFilterComponentState,
+    viewFilterDropdownId,
+  );
+
+  const { filterableFieldMetadataItems } = useFilterableFieldMetadataItems();
+
+  useEffect(() => {
+    const fieldMetadataItem = filterableFieldMetadataItems.find(
+      (fieldMetadataItem) =>
+        fieldMetadataItem.id === viewFilter.fieldMetadataId,
+    );
+
+    if (!isDefined(fieldMetadataItem)) {
+      return;
+    }
+
+    const filterDefinition = formatFieldMetadataItemAsFilterDefinition({
+      field: fieldMetadataItem,
+    });
+
+    if (isDefined(filterDefinition)) {
+      setFilterDefinitionUsedInDropdown(filterDefinition);
+      setFieldMetadataItemIdUsedInDropdown(filterDefinition.fieldMetadataId);
+      setSelectedOperandInDropdown(viewFilter.operand);
+      setSelectedFilter(viewFilter);
+    }
+  }, [
+    filterableFieldMetadataItems,
+    setFilterDefinitionUsedInDropdown,
+    setFieldMetadataItemIdUsedInDropdown,
+    viewFilter,
+    setSelectedOperandInDropdown,
+    setSelectedFilter,
+    viewFilterDropdownId,
+  ]);
+
+  return null;
+};
--- a/packages/twenty-front/src/modules/views/components/ViewBarEffect.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewBarEffect.tsx
@ -4,7 +4,6 @@ import { useContext, useEffect, useState } from 'react';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ViewEventContext } from '@/views/events/contexts/ViewEventContext';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
-import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
 import { isPersistingViewFieldsComponentState } from '@/views/states/isPersistingViewFieldsComponentState';
 import { View } from '@/views/types/View';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
@ -23,11 +22,6 @@ export const ViewBarEffect = ({ viewBarId }: ViewBarEffectProps) => {
    View | undefined
  >(undefined);

-  const availableFilterDefinitions = useRecoilComponentValueV2(
-    availableFilterDefinitionsComponentState,
-    viewBarId,
-  );
-
  const isPersistingViewFields = useRecoilComponentValueV2(
    isPersistingViewFieldsComponentState,
    viewBarId,
@ -52,7 +46,6 @@ export const ViewBarEffect = ({ viewBarId }: ViewBarEffectProps) => {
      }
    }
  }, [
-    availableFilterDefinitions,
    currentViewSnapshot,
    currentViewWithCombinedFiltersAndSorts,
    isPersistingViewFields,
--- a/packages/twenty-front/src/modules/views/components/ViewBarFilterEffect.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterEffect.tsx
@ -8,7 +8,6 @@ import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/ob
 import { objectFilterDropdownSelectedOptionValuesComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedOptionValuesComponentState';
 import { objectFilterDropdownSelectedRecordIdsComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsComponentState';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
-import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
 import { jsonRelationFilterValueSchema } from '@/views/view-filter-value/validation-schemas/jsonRelationFilterValueSchema';
 import { simpleRelationFilterValueSchema } from '@/views/view-filter-value/validation-schemas/simpleRelationFilterValueSchema';
 import { isDefined } from 'twenty-shared';
@ -22,10 +21,6 @@ export const ViewBarFilterEffect = ({
 }: ViewBarFilterEffectProps) => {
  const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();

-  const availableFilterDefinitions = useRecoilComponentValueV2(
-    availableFilterDefinitionsComponentState,
-  );
-
  const filterDefinitionUsedInDropdown = useRecoilComponentValueV2(
    filterDefinitionUsedInDropdownComponentState,
    filterDropdownId,
@ -42,18 +37,6 @@ export const ViewBarFilterEffect = ({
      filterDropdownId,
    );

-  // TODO: verify this instance id works
-  const setAvailableFilterDefinitions = useSetRecoilComponentStateV2(
-    availableFilterDefinitionsComponentState,
-    filterDropdownId,
-  );
-
-  useEffect(() => {
-    if (isDefined(availableFilterDefinitions)) {
-      setAvailableFilterDefinitions(availableFilterDefinitions);
-    }
-  }, [availableFilterDefinitions, setAvailableFilterDefinitions]);
-
  useEffect(() => {
    if (filterDefinitionUsedInDropdown?.type === 'RELATION') {
      const viewFilterUsedInDropdown =
--- a/packages/twenty-front/src/modules/views/components/ViewBarRecordFilterEffect.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewBarRecordFilterEffect.tsx
@ -1,9 +1,10 @@
+import { formatFieldMetadataItemAsFilterDefinition } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
+import { useFilterableFieldMetadataItems } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItems';
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
 import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
 import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
-import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
 import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
 import { View } from '@/views/types/View';
 import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
@ -21,29 +22,31 @@ export const ViewBarRecordFilterEffect = () => {
    currentRecordFiltersComponentState,
  );

-  const availableFilterDefinitions = useRecoilComponentValueV2(
-    availableFilterDefinitionsComponentState,
-  );
+  const { filterableFieldMetadataItems } = useFilterableFieldMetadataItems();

  useEffect(() => {
    if (isDataPrefetched) {
      const currentView = views.find((view) => view.id === currentViewId);

+      const filterDefinitions = filterableFieldMetadataItems.map(
+        (fieldMetadataItem) =>
+          formatFieldMetadataItemAsFilterDefinition({
+            field: fieldMetadataItem,
+          }),
+      );
+
      if (isDefined(currentView)) {
        setCurrentRecordFilters(
-          mapViewFiltersToFilters(
-            currentView.viewFilters,
-            availableFilterDefinitions,
-          ),
+          mapViewFiltersToFilters(currentView.viewFilters, filterDefinitions),
        );
      }
    }
  }, [
    isDataPrefetched,
    views,
-    availableFilterDefinitions,
    currentViewId,
    setCurrentRecordFilters,
+    filterableFieldMetadataItems,
  ]);

  return null;