2422 refactor scope components to improve dev experience (#2736)

* move scope inside record table

* fix imports

* update mock

* recordTable scope done

* RecordTable done

* fix board

* fix typo

* wip

* filter is working

* sort is working

* Tasks working

* Fix according to PR

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/object-record/components/RecordTableContainer.tsx

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { useRecoilCallback } from 'recoil';
 
 import { useComputeDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useComputeDefinitionsFromFieldMetadata';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
@@ -7,11 +6,7 @@ import { RecordTable } from '@/ui/object/record-table/components/RecordTable';
 import { TableOptionsDropdownId } from '@/ui/object/record-table/constants/TableOptionsDropdownId';
 import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
 import { TableOptionsDropdown } from '@/ui/object/record-table/options/components/TableOptionsDropdown';
-import { RecordTableScope } from '@/ui/object/record-table/scopes/RecordTableScope';
 import { ViewBar } from '@/views/components/ViewBar';
-import { useViewFields } from '@/views/hooks/internal/useViewFields';
-import { ViewScope } from '@/views/scopes/ViewScope';
-import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinitionToViewField';
 import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions';
 import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
 import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
@@ -45,13 +40,11 @@ export const RecordTableContainer = ({
     objectNameSingular: foundObjectMetadataItem?.nameSingular,
   });
 
-  const tableScopeId = objectNamePlural ?? '';
-  const viewScopeId = objectNamePlural ?? '';
-
-  const { persistViewFields } = useViewFields(viewScopeId);
+  const recordTableId = objectNamePlural ?? '';
+  const viewBarId = objectNamePlural ?? '';
 
   const { setTableFilters, setTableSorts, setTableColumns } = useRecordTable({
-    recordTableScopeId: tableScopeId,
+    recordTableScopeId: recordTableId,
   });
 
   const updateEntity = ({
@@ -71,35 +64,31 @@ export const RecordTableContainer = ({
   };
 
   return (
-    <ViewScope
-      viewScopeId={viewScopeId}
-      onViewFieldsChange={(viewFields) => {
-        setTableColumns(
-          mapViewFieldsToColumnDefinitions(viewFields, columnDefinitions),
-        );
-      }}
-      onViewFiltersChange={(viewFilters) => {
-        setTableFilters(mapViewFiltersToFilters(viewFilters));
-      }}
-      onViewSortsChange={(viewSorts) => {
-        setTableSorts(mapViewSortsToSorts(viewSorts));
-      }}
-    >
-      <StyledContainer>
-        <RecordTableScope
-          recordTableScopeId={tableScopeId}
-          onColumnsChange={useRecoilCallback(() => (columns) => {
-            persistViewFields(mapColumnDefinitionsToViewFields(columns));
-          })}
-        >
-          <ViewBar
-            optionsDropdownButton={<TableOptionsDropdown />}
-            optionsDropdownScopeId={TableOptionsDropdownId}
-          />
-          <RecordTableEffect />
-          <RecordTable updateEntityMutation={updateEntity} />
-        </RecordTableScope>
-      </StyledContainer>
-    </ViewScope>
+    <StyledContainer>
+      <ViewBar
+        viewBarId={viewBarId}
+        optionsDropdownButton={
+          <TableOptionsDropdown recordTableId={recordTableId} />
+        }
+        optionsDropdownScopeId={TableOptionsDropdownId}
+        onViewFieldsChange={(viewFields) => {
+          setTableColumns(
+            mapViewFieldsToColumnDefinitions(viewFields, columnDefinitions),
+          );
+        }}
+        onViewFiltersChange={(viewFilters) => {
+          setTableFilters(mapViewFiltersToFilters(viewFilters));
+        }}
+        onViewSortsChange={(viewSorts) => {
+          setTableSorts(mapViewSortsToSorts(viewSorts));
+        }}
+      />
+      <RecordTableEffect recordTableId={recordTableId} viewBarId={viewBarId} />
+      <RecordTable
+        recordTableId={recordTableId}
+        viewBarId={viewBarId}
+        updateEntityMutation={updateEntity}
+      />
+    </StyledContainer>
   );
 };

front/src/modules/object-record/components/RecordTableEffect.tsx

@@ -5,16 +5,22 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
 import { useRecordTableContextMenuEntries } from '@/object-record/hooks/useRecordTableContextMenuEntries';
 import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
 import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
-import { useView } from '@/views/hooks/useView';
+import { useViewBar } from '@/views/hooks/useViewBar';
 import { ViewType } from '@/views/types/ViewType';
 
-export const RecordTableEffect = () => {
+export const RecordTableEffect = ({
+  recordTableId,
+  viewBarId,
+}: {
+  recordTableId: string;
+  viewBarId: string;
+}) => {
   const {
     scopeId: objectNamePlural,
     setAvailableTableColumns,
     setOnEntityCountChange,
     setObjectMetadataConfig,
-  } = useRecordTable();
+  } = useRecordTable({ recordTableScopeId: recordTableId });
 
   const {
     objectMetadataItem,
@@ -34,7 +40,7 @@ export const RecordTableEffect = () => {
     setViewType,
     setViewObjectMetadataId,
     setEntityCountInCurrentView,
-  } = useView();
+  } = useViewBar({ viewBarId });
 
   useEffect(() => {
     if (basePathToShowPage && labelIdentifierFieldMetadataId) {
@@ -80,7 +86,9 @@ export const RecordTableEffect = () => {
   ]);
 
   const { setActionBarEntries, setContextMenuEntries } =
-    useRecordTableContextMenuEntries();
+    useRecordTableContextMenuEntries({
+      recordTableScopeId: recordTableId,
+    });
 
   useEffect(() => {
     setActionBarEntries?.();

front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx

@@ -9,19 +9,33 @@ import { IconHeart, IconHeartOff, IconTrash } from '@/ui/display/icon';
 import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
 import { contextMenuEntriesState } from '@/ui/navigation/context-menu/states/contextMenuEntriesState';
 import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
+import { RecordTableScopeInternalContext } from '@/ui/object/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
 import { selectedRowIdsSelector } from '@/ui/object/record-table/states/selectors/selectedRowIdsSelector';
 import { tableRowIdsState } from '@/ui/object/record-table/states/tableRowIdsState';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+
+type useRecordTableContextMenuEntriesProps = {
+  recordTableScopeId?: string;
+};
 
 // TODO: refactor this
-export const useRecordTableContextMenuEntries = () => {
+export const useRecordTableContextMenuEntries = (
+  props?: useRecordTableContextMenuEntriesProps,
+) => {
+  const scopeId = useAvailableScopeIdOrThrow(
+    RecordTableScopeInternalContext,
+    props?.recordTableScopeId,
+  );
+
   const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
   const setActionBarEntriesState = useSetRecoilState(actionBarEntriesState);
 
   const setTableRowIds = useSetRecoilState(tableRowIdsState);
   const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
 
-  const { scopeId: objectNamePlural, resetTableRowSelection } =
-    useRecordTable();
+  const { scopeId: objectNamePlural, resetTableRowSelection } = useRecordTable({
+    recordTableScopeId: scopeId,
+  });
 
   const { objectMetadataItem: foundObjectMetadataItem } = useObjectMetadataItem(
     {

front/src/modules/object-record/hooks/useSetRecordTableData.ts

@@ -5,11 +5,11 @@ import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
 import { isFetchingRecordTableDataState } from '@/ui/object/record-table/states/isFetchingRecordTableDataState';
 import { numberOfTableRowsState } from '@/ui/object/record-table/states/numberOfTableRowsState';
 import { tableRowIdsState } from '@/ui/object/record-table/states/tableRowIdsState';
-import { useView } from '@/views/hooks/useView';
+import { useViewBar } from '@/views/hooks/useViewBar';
 
 export const useSetRecordTableData = () => {
   const { resetTableRowSelection } = useRecordTable();
-  const { setEntityCountInCurrentView } = useView();
+  const { setEntityCountInCurrentView } = useViewBar();
 
   return useRecoilCallback(
     ({ set, snapshot }) =>