Implemented CRUD for view filter group and removed old states (#10590)

This PR implements CRUD for view filter groups with the new logic as
already done for view filters and view sorts.

It also completely removes the old combined view filter group states and
usage.

This PR is quite big but the impact is limited since it only changes
advanced filters module, which is under feature flag at the moment, and
it is already in a broken state so unusable, even if someone activates
the feature flag.

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

@@ -3,28 +3,28 @@ import { useCallback } from 'react';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 
 import { AdvancedFilterRootLevelViewFilterGroup } from '@/object-record/advanced-filter/components/AdvancedFilterRootLevelViewFilterGroup';
-import { useDeleteCombinedViewFilterGroup } from '@/object-record/advanced-filter/hooks/useDeleteCombinedViewFilterGroup';
 import { useRemoveRecordFilterGroup } from '@/object-record/record-filter-group/hooks/useRemoveRecordFilterGroup';
+import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
 import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { AdvancedFilterChip } from '@/views/components/AdvancedFilterChip';
 import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
-import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { isDefined } from 'twenty-shared';
 
 export const AdvancedFilterDropdownButton = () => {
-  const { deleteCombinedViewFilterGroup } = useDeleteCombinedViewFilterGroup();
   const { removeRecordFilterGroup } = useRemoveRecordFilterGroup();
 
-  const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
+  const currentRecordFilterGroups = useRecoilComponentValueV2(
+    currentRecordFilterGroupsComponentState,
+  );
 
   const currentRecordFilters = useRecoilComponentValueV2(
     currentRecordFiltersComponentState,
   );
 
   const advancedRecordFilterIds = currentRecordFilters
-    .filter((recordFilter) => isDefined(recordFilter.viewFilterGroupId))
+    .filter((recordFilter) => isDefined(recordFilter.recordFilterGroupId))
     .map((recordFilter) => recordFilter.id);
 
   const { removeRecordFilter } = useRemoveRecordFilter();
@@ -39,12 +39,11 @@ export const AdvancedFilterDropdownButton = () => {
     }
 
     const viewFilterGroupIds =
-      currentViewWithCombinedFiltersAndSorts?.viewFilterGroups?.map(
-        (viewFilter) => viewFilter.id,
+      currentRecordFilterGroups?.map(
+        (recordFilterGroup) => recordFilterGroup.id,
       ) ?? [];
 
     for (const viewFilterGroupId of viewFilterGroupIds) {
-      await deleteCombinedViewFilterGroup(viewFilterGroupId);
       removeRecordFilterGroup(viewFilterGroupId);
     }
 
@@ -55,16 +54,14 @@ export const AdvancedFilterDropdownButton = () => {
     advancedRecordFilterIds,
     removeRecordFilterGroup,
     removeRecordFilter,
-    deleteCombinedViewFilterGroup,
-    currentViewWithCombinedFiltersAndSorts?.viewFilterGroups,
+    currentRecordFilterGroups,
   ]);
 
-  const outermostViewFilterGroupId =
-    currentViewWithCombinedFiltersAndSorts?.viewFilterGroups.find(
-      (viewFilterGroup) => !viewFilterGroup.parentViewFilterGroupId,
-    )?.id;
+  const outermostRecordFilterGroupId = currentRecordFilterGroups.find(
+    (recordFilterGroup) => !recordFilterGroup.parentRecordFilterGroupId,
+  )?.id;
 
-  if (!outermostViewFilterGroupId) {
+  if (!outermostRecordFilterGroupId) {
     return null;
   }
 
@@ -79,7 +76,7 @@ export const AdvancedFilterDropdownButton = () => {
       }
       dropdownComponents={
         <AdvancedFilterRootLevelViewFilterGroup
-          rootLevelViewFilterGroupId={outermostViewFilterGroupId}
+          rootLevelViewFilterGroupId={outermostRecordFilterGroupId}
         />
       }
       dropdownHotkeyScope={{ scope: ADVANCED_FILTER_DROPDOWN_ID }}

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

@@ -2,14 +2,11 @@ import { useEffect } from 'react';
 
 import { useViewFromQueryParams } from '@/views/hooks/internal/useViewFromQueryParams';
 import { useApplyViewFiltersToCurrentRecordFilters } from '@/views/hooks/useApplyViewFiltersToCurrentRecordFilters';
-import { useResetUnsavedViewStates } from '@/views/hooks/useResetUnsavedViewStates';
 
 export const QueryParamsFiltersEffect = () => {
   const { hasFiltersQueryParams, getFiltersFromQueryParams } =
     useViewFromQueryParams();
 
-  const { resetUnsavedViewStates } = useResetUnsavedViewStates();
-
   const { applyViewFiltersToCurrentRecordFilters } =
     useApplyViewFiltersToCurrentRecordFilters();
 
@@ -27,7 +24,6 @@ export const QueryParamsFiltersEffect = () => {
     applyViewFiltersToCurrentRecordFilters,
     getFiltersFromQueryParams,
     hasFiltersQueryParams,
-    resetUnsavedViewStates,
   ]);
 
   return <></>;

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

@@ -19,7 +19,7 @@ import { useViewFromQueryParams } from '@/views/hooks/internal/useViewFromQueryP
 import { useAreViewFilterGroupsDifferentFromRecordFilterGroups } from '@/views/hooks/useAreViewFilterGroupsDifferentFromRecordFilterGroups';
 import { useAreViewFiltersDifferentFromRecordFilters } from '@/views/hooks/useAreViewFiltersDifferentFromRecordFilters';
 import { useAreViewSortsDifferentFromRecordSorts } from '@/views/hooks/useAreViewSortsDifferentFromRecordSorts';
-import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
+import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
 import { useSaveCurrentViewFiltersAndSorts } from '@/views/hooks/useSaveCurrentViewFiltersAndSorts';
 import { VIEW_PICKER_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerDropdownId';
 import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
@@ -56,7 +56,7 @@ export const UpdateViewButtonGroup = ({
   const { openDropdown: openViewPickerDropdown } = useDropdown(
     VIEW_PICKER_DROPDOWN_ID,
   );
-  const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
+  const { currentView } = useGetCurrentViewOnly();
 
   const setViewPickerReferenceViewId = useSetRecoilComponentStateV2(
     viewPickerReferenceViewIdComponentState,
@@ -109,7 +109,7 @@ export const UpdateViewButtonGroup = ({
 
   return (
     <StyledContainer>
-      {currentViewWithCombinedFiltersAndSorts?.key !== 'INDEX' ? (
+      {currentView?.key !== 'INDEX' ? (
         <ButtonGroup size="small" accent="blue">
           <Button title="Update view" onClick={handleUpdateViewClick} />
           <Dropdown

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

@@ -53,7 +53,7 @@ export const ViewBar = ({
       <ViewBarRecordSortEffect />
       <ViewBarFilterEffect filterDropdownId={filterDropdownId} />
       <QueryParamsFiltersEffect />
-      <ViewBarPageTitle viewBarId={viewBarId} />
+      <ViewBarPageTitle />
       <TopBar
         className={className}
         leftComponent={

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

@@ -21,8 +21,6 @@ import { useApplyCurrentViewFiltersToCurrentRecordFilters } from '@/views/hooks/
 import { useApplyCurrentViewSortsToCurrentRecordSorts } from '@/views/hooks/useApplyCurrentViewSortsToCurrentRecordSorts';
 import { useAreViewFiltersDifferentFromRecordFilters } from '@/views/hooks/useAreViewFiltersDifferentFromRecordFilters';
 import { useAreViewSortsDifferentFromRecordSorts } from '@/views/hooks/useAreViewSortsDifferentFromRecordSorts';
-import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
-import { useResetUnsavedViewStates } from '@/views/hooks/useResetUnsavedViewStates';
 
 import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
 import { useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups } from '@/views/hooks/useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups';
@@ -115,10 +113,6 @@ export const ViewBarDetails = ({
   viewBarId,
   objectNamePlural,
 }: ViewBarDetailsProps) => {
-  const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
-
-  const viewId = currentViewWithCombinedFiltersAndSorts?.id;
-
   const isViewBarExpanded = useRecoilComponentValueV2(
     isViewBarExpandedComponentState,
   );
@@ -144,7 +138,6 @@ export const ViewBarDetails = ({
     objectNameSingular: objectNameSingular,
     viewBarId: viewBarId,
   });
-  const { resetUnsavedViewStates } = useResetUnsavedViewStates();
 
   const { viewFilterGroupsAreDifferentFromRecordFilterGroups } =
     useAreViewFilterGroupsDifferentFromRecordFilterGroups();
@@ -170,7 +163,7 @@ export const ViewBarDetails = ({
   const recordFilters = useMemo(() => {
     return currentRecordFilters.filter(
       (recordFilter) =>
-        !recordFilter.viewFilterGroupId &&
+        !recordFilter.recordFilterGroupId &&
         !checkIsSoftDeleteFilter(recordFilter),
     );
   }, [currentRecordFilters, checkIsSoftDeleteFilter]);
@@ -185,13 +178,10 @@ export const ViewBarDetails = ({
     useApplyCurrentViewSortsToCurrentRecordSorts();
 
   const handleCancelClick = () => {
-    if (isDefined(viewId)) {
-      resetUnsavedViewStates(viewId);
-      applyCurrentViewFilterGroupsToCurrentRecordFilterGroups();
-      applyCurrentViewFiltersToCurrentRecordFilters();
-      applyCurrentViewSortsToCurrentRecordSorts();
-      toggleSoftDeleteFilterState(false);
-    }
+    applyCurrentViewFilterGroupsToCurrentRecordFilterGroups();
+    applyCurrentViewFiltersToCurrentRecordFilters();
+    applyCurrentViewSortsToCurrentRecordSorts();
+    toggleSoftDeleteFilterState(false);
   };
 
   const shouldExpandViewBar =
@@ -207,9 +197,8 @@ export const ViewBarDetails = ({
     return null;
   }
 
-  const showAdvancedFilterDropdownButton =
-    currentViewWithCombinedFiltersAndSorts?.viewFilterGroups &&
-    currentViewWithCombinedFiltersAndSorts?.viewFilterGroups.length > 0;
+  const shouldShowAdvancedFilterDropdownButton =
+    currentRecordFilterGroups.length > 0;
 
   return (
     <StyledBar>
@@ -239,7 +228,9 @@ export const ViewBarDetails = ({
                 <StyledSeperator />
               </StyledSeperatorContainer>
             )}
-          {showAdvancedFilterDropdownButton && <AdvancedFilterDropdownButton />}
+          {shouldShowAdvancedFilterDropdownButton && (
+            <AdvancedFilterDropdownButton />
+          )}
           {recordFilters.map((recordFilter) => (
             <ObjectFilterDropdownComponentInstanceContext.Provider
               key={recordFilter.id}

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

@@ -1,18 +1,13 @@
 import { useParams } from 'react-router-dom';
 
 import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle';
-import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
+import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
 import { capitalize } from 'twenty-shared';
 
-export type ViewBarPageTitleProps = {
-  viewBarId: string;
-};
-
-export const ViewBarPageTitle = ({ viewBarId }: ViewBarPageTitleProps) => {
+export const ViewBarPageTitle = () => {
   const { objectNamePlural } = useParams();
 
-  const { currentViewWithCombinedFiltersAndSorts: currentView } =
-    useGetCurrentView(viewBarId);
+  const { currentView } = useGetCurrentViewOnly();
 
   if (!objectNamePlural) {
     return;