feat: add link to relation filtered table in Record Show Page (#3261)

* feat: add link to relation filtered table in Record Show Page

Closes #3125

* refactor: use generateFindManyRecordsQuery for optimization

* Fixes from review

* Minor fixes

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+
+import { useFiltersFromQueryParams } from '@/views/hooks/internal/useFiltersFromQueryParams';
+import { useViewScopedStates } from '@/views/hooks/internal/useViewScopedStates';
+import { useViewBar } from '@/views/hooks/useViewBar';
+
+export const FilterQueryParamsEffect = () => {
+  const { hasFiltersQueryParams, getFiltersFromQueryParams } =
+    useFiltersFromQueryParams();
+  const { currentViewFiltersState, onViewFiltersChangeState } =
+    useViewScopedStates();
+  const setCurrentViewFilters = useSetRecoilState(currentViewFiltersState);
+  const onViewFiltersChange = useRecoilValue(onViewFiltersChangeState);
+  const { resetViewBar } = useViewBar();
+
+  useEffect(() => {
+    if (!hasFiltersQueryParams) return;
+
+    getFiltersFromQueryParams().then((filtersFromParams) => {
+      if (Array.isArray(filtersFromParams)) {
+        setCurrentViewFilters(filtersFromParams);
+        onViewFiltersChange?.(filtersFromParams);
+      }
+    });
+
+    return () => {
+      resetViewBar();
+    };
+  }, [
+    getFiltersFromQueryParams,
+    hasFiltersQueryParams,
+    onViewFiltersChange,
+    resetViewBar,
+    setCurrentViewFilters,
+  ]);
+
+  return null;
+};

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

@@ -1,10 +1,12 @@
 import { ReactNode } from 'react';
+import { useParams } from 'react-router-dom';
 
 import { ObjectFilterDropdownButton } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownButton';
 import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
 import { ObjectSortDropdownButton } from '@/object-record/object-sort-dropdown/components/ObjectSortDropdownButton';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { TopBar } from '@/ui/layout/top-bar/TopBar';
+import { FilterQueryParamsEffect } from '@/views/components/FilterQueryParamsEffect';
 import { ViewBarFilterEffect } from '@/views/components/ViewBarFilterEffect';
 import { ViewBarSortEffect } from '@/views/components/ViewBarSortEffect';
 import { useViewBar } from '@/views/hooks/useViewBar';
@@ -45,6 +47,7 @@ export const ViewBar = ({
   const { upsertViewSort, upsertViewFilter } = useViewBar({
     viewBarId: viewBarId,
   });
+  const { objectNamePlural } = useParams();
 
   const filterDropdownId = 'view-filter';
   const sortDropdownId = 'view-sort';
@@ -65,6 +68,7 @@ export const ViewBar = ({
         sortDropdownId={sortDropdownId}
         onSortSelect={upsertViewSort}
       />
+      {!!objectNamePlural && <FilterQueryParamsEffect />}
 
       <TopBar
         className={className}

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

@@ -5,6 +5,7 @@ import { useRecoilValue } from 'recoil';
 import { AddObjectFilterFromDetailsButton } from '@/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton';
 import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
 import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
+import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { EditableFilterDropdownButton } from '@/views/components/EditableFilterDropdownButton';
 import { EditableSortChip } from '@/views/components/EditableSortChip';
 import { ViewBarFilterEffect } from '@/views/components/ViewBarFilterEffect';
@@ -132,19 +133,20 @@ export const ViewBarDetails = ({
     <StyledBar>
       <StyledFilterContainer>
         <StyledChipcontainer>
-          {currentViewSorts?.map((sort) => {
-            return <EditableSortChip viewSort={sort} />;
-          })}
+          {currentViewSorts?.map((sort) => (
+            <EditableSortChip key={sort.id} viewSort={sort} />
+          ))}
           {!!currentViewSorts?.length && !!currentViewFilters?.length && (
             <StyledSeperatorContainer>
               <StyledSeperator />
             </StyledSeperatorContainer>
           )}
-          {currentViewFilters?.map((viewFilter) => {
-            return (
-              <ObjectFilterDropdownScope
-                filterScopeId={viewFilter.fieldMetadataId}
-              >
+          {currentViewFilters?.map((viewFilter) => (
+            <ObjectFilterDropdownScope
+              key={viewFilter.id}
+              filterScopeId={viewFilter.fieldMetadataId}
+            >
+              <DropdownScope dropdownScopeId={viewFilter.fieldMetadataId}>
                 <ViewBarFilterEffect
                   filterDropdownId={viewFilter.fieldMetadataId}
                   onFilterSelect={upsertViewFilter}
@@ -156,9 +158,9 @@ export const ViewBarDetails = ({
                   }}
                   viewFilterDropdownId={viewFilter.fieldMetadataId}
                 />
-              </ObjectFilterDropdownScope>
-            );
-          })}
+              </DropdownScope>
+            </ObjectFilterDropdownScope>
+          ))}
         </StyledChipcontainer>
         {hasFilterButton && (
           <StyledAddFilterContainer>

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

@@ -27,7 +27,7 @@ export const ViewBarFilterEffect = ({
     filterDefinitionUsedInDropdown,
     setObjectFilterDropdownSelectedRecordIds,
     isObjectFilterDropdownUnfolded,
-  } = useFilterDropdown({ filterDropdownId: filterDropdownId });
+  } = useFilterDropdown({ filterDropdownId });
 
   useEffect(() => {
     if (availableFilterDefinitions) {