part 2 of filter/sort drill down from charts (#16013)

in this PR, we will handle simple filter translations (ie, fields that
use the contains operand)

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

@@ -1,20 +1,44 @@
 import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
 
-import { useViewFromQueryParams } from '@/views/hooks/internal/useViewFromQueryParams';
-import { useApplyViewFiltersToCurrentRecordFilters } from '@/views/hooks/useApplyViewFiltersToCurrentRecordFilters';
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
+import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
+import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
+import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
+import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { useFiltersFromQueryParams } from '@/views/hooks/internal/useFiltersFromQueryParams';
+import { useHasFiltersInQueryParams } from '@/views/hooks/internal/useHasFiltersInQueryParams';
 import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
+import { useMapViewFiltersToFilters } from '@/views/hooks/useMapViewFiltersToFilters';
+import { isDefined } from 'twenty-shared/utils';
 
 export const QueryParamsFiltersEffect = () => {
-  const {
-    hasFiltersQueryParams,
-    getFiltersFromQueryParams,
-    objectMetadataItem,
-  } = useViewFromQueryParams();
+  const { getFiltersFromQueryParams, getFilterGroupsFromQueryParams } =
+    useFiltersFromQueryParams();
+  const { hasFiltersQueryParams } = useHasFiltersInQueryParams();
+
+  const { objectNamePlural = '' } = useParams();
+  const { objectNameSingular } = useObjectNameSingularFromPlural({
+    objectNamePlural,
+  });
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular,
+  });
 
   const { currentView } = useGetCurrentViewOnly();
 
-  const { applyViewFiltersToCurrentRecordFilters } =
-    useApplyViewFiltersToCurrentRecordFilters();
+  const { mapViewFiltersToRecordFilters } = useMapViewFiltersToFilters();
+
+  const { recordIndexId } = useRecordIndexContextOrThrow();
+  const setCurrentRecordFilters = useSetRecoilComponentState(
+    currentRecordFiltersComponentState,
+    recordIndexId,
+  );
+  const setCurrentRecordFilterGroups = useSetRecoilComponentState(
+    currentRecordFilterGroupsComponentState,
+    recordIndexId,
+  );
 
   const currentViewObjectMetadataItemIsDifferentFromURLObjectMetadataItem =
     currentView?.objectMetadataId !== objectMetadataItem.id;
@@ -27,17 +51,49 @@ export const QueryParamsFiltersEffect = () => {
       return;
     }
 
-    getFiltersFromQueryParams().then((filtersFromParams) => {
-      if (Array.isArray(filtersFromParams)) {
-        applyViewFiltersToCurrentRecordFilters(filtersFromParams);
+    const loadFiltersFromQueryParams = async () => {
+      const [filtersFromParams, filterGroupsFromParams] = await Promise.all([
+        getFiltersFromQueryParams(),
+        getFilterGroupsFromQueryParams(),
+      ]);
+
+      const allRecordFilters = [];
+
+      if (
+        isDefined(filterGroupsFromParams) &&
+        filterGroupsFromParams.recordFilters.length > 0
+      ) {
+        allRecordFilters.push(...filterGroupsFromParams.recordFilters);
       }
-    });
+
+      if (Array.isArray(filtersFromParams) && filtersFromParams.length > 0) {
+        const simpleRecordFilters =
+          mapViewFiltersToRecordFilters(filtersFromParams);
+        allRecordFilters.push(...simpleRecordFilters);
+      }
+
+      if (
+        isDefined(filterGroupsFromParams) &&
+        filterGroupsFromParams.recordFilterGroups.length > 0
+      ) {
+        setCurrentRecordFilterGroups(filterGroupsFromParams.recordFilterGroups);
+      }
+
+      if (allRecordFilters.length > 0) {
+        setCurrentRecordFilters(allRecordFilters);
+      }
+    };
+
+    loadFiltersFromQueryParams();
   }, [
     currentViewObjectMetadataItemIsDifferentFromURLObjectMetadataItem,
-    applyViewFiltersToCurrentRecordFilters,
+    mapViewFiltersToRecordFilters,
     getFiltersFromQueryParams,
+    getFilterGroupsFromQueryParams,
     hasFiltersQueryParams,
+    setCurrentRecordFilterGroups,
+    setCurrentRecordFilters,
   ]);
 
-  return <></>;
+  return null;
 };

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

@@ -10,7 +10,7 @@ import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
 import { UPDATE_VIEW_BUTTON_DROPDOWN_ID } from '@/views/constants/UpdateViewButtonDropdownId';
-import { useViewFromQueryParams } from '@/views/hooks/internal/useViewFromQueryParams';
+import { useHasFiltersInQueryParams } from '@/views/hooks/internal/useHasFiltersInQueryParams';
 import { useAreViewFilterGroupsDifferentFromRecordFilterGroups } from '@/views/hooks/useAreViewFilterGroupsDifferentFromRecordFilterGroups';
 import { useAreViewFiltersDifferentFromRecordFilters } from '@/views/hooks/useAreViewFiltersDifferentFromRecordFilters';
 import { useAreViewSortsDifferentFromRecordSorts } from '@/views/hooks/useAreViewSortsDifferentFromRecordSorts';
@@ -85,7 +85,7 @@ export const UpdateViewButtonGroup = () => {
     await refreshCoreViewsByObjectMetadataId(objectMetadataItem.id);
   };
 
-  const { hasFiltersQueryParams } = useViewFromQueryParams();
+  const { hasFiltersQueryParams } = useHasFiltersInQueryParams();
 
   const { viewFilterGroupsAreDifferentFromRecordFilterGroups } =
     useAreViewFilterGroupsDifferentFromRecordFilterGroups();

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

@@ -9,7 +9,6 @@ import { AdvancedFilterDropdownButton } from '@/views/components/AdvancedFilterD
 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 { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
 import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
@@ -26,6 +25,7 @@ import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDrop
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { AnyFieldSearchDropdownButton } from '@/views/components/AnyFieldSearchDropdownButton';
 import { ANY_FIELD_SEARCH_DROPDOWN_ID } from '@/views/constants/AnyFieldSearchDropdownId';
+import { useHasFiltersInQueryParams } from '@/views/hooks/internal/useHasFiltersInQueryParams';
 import { useApplyCurrentViewAnyFieldFilterToAnyFieldFilter } from '@/views/hooks/useApplyCurrentViewAnyFieldFilterToAnyFieldFilter';
 import { useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups } from '@/views/hooks/useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups';
 import { useAreViewFilterGroupsDifferentFromRecordFilterGroups } from '@/views/hooks/useAreViewFilterGroupsDifferentFromRecordFilterGroups';
@@ -109,7 +109,7 @@ export const ViewBarDetails = ({
     isViewBarExpandedComponentState,
   );
 
-  const { hasFiltersQueryParams } = useViewFromQueryParams();
+  const { hasFiltersQueryParams } = useHasFiltersInQueryParams();
 
   const currentRecordFilterGroups = useRecoilComponentValue(
     currentRecordFilterGroupsComponentState,