Fix record board export not taking filters into account (#8505)

Fix Export CSV action not taking into account the filters applied on the
Kanban index view

packages/twenty-front/src/modules/action-menu/actions/record-actions/components/ExportRecordsActionEffect.tsx

@@ -1,13 +1,13 @@
 import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
-import {
-  displayedExportProgress,
-  useExportRecordData,
-} from '@/action-menu/hooks/useExportRecordData';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { IconDatabaseExport } from 'twenty-ui';
 
+import {
+  displayedExportProgress,
+  useExportRecords,
+} from '@/object-record/record-index/export/hooks/useExportRecords';
 import { useEffect } from 'react';
 
 export const ExportRecordsActionEffect = ({
@@ -22,7 +22,7 @@ export const ExportRecordsActionEffect = ({
     contextStoreNumberOfSelectedRecordsComponentState,
   );
 
-  const { progress, download } = useExportRecordData({
+  const { progress, download } = useExportRecords({
     delayMs: 100,
     objectMetadataItem,
     recordIndexId: objectMetadataItem.namePlural,

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx

@@ -26,6 +26,7 @@ import { RecordIndexActionMenu } from '@/action-menu/components/RecordIndexActio
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { useRecordBoard } from '@/object-record/record-board/hooks/useRecordBoard';
 import { recordGroupDefinitionsComponentState } from '@/object-record/record-group/states/recordGroupDefinitionsComponentState';
+import { RecordIndexFiltersToContextStoreEffect } from '@/object-record/record-index/components/RecordIndexFiltersToContextStoreEffect';
 import { recordIndexViewFilterGroupsState } from '@/object-record/record-index/states/recordIndexViewFilterGroupsState';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
@@ -207,7 +208,7 @@ export const RecordIndexContainer = () => {
             viewBarId={recordIndexId}
           />
         </SpreadsheetImportProvider>
-
+        <RecordIndexFiltersToContextStoreEffect />
         {recordIndexViewType === ViewType.Table && (
           <>
             <RecordIndexTableContainer

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexFiltersToContextStoreEffect.tsx

@@ -0,0 +1,76 @@
+import { useContext, useEffect } from 'react';
+
+import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
+import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
+import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
+import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
+import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
+import { selectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsComponentSelector';
+import { unselectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { useRecoilValue } from 'recoil';
+
+export const RecordIndexFiltersToContextStoreEffect = () => {
+  const { recordIndexId } = useContext(RecordIndexRootPropsContext);
+
+  const recordIndexFilters = useRecoilValue(recordIndexFiltersState);
+
+  const setContextStoreTargetedRecords = useSetRecoilComponentStateV2(
+    contextStoreTargetedRecordsRuleComponentState,
+  );
+
+  const hasUserSelectedAllRows = useRecoilComponentValueV2(
+    hasUserSelectedAllRowsComponentState,
+    recordIndexId,
+  );
+
+  const selectedRowIds = useRecoilComponentValueV2(
+    selectedRowIdsComponentSelector,
+    recordIndexId,
+  );
+  const unselectedRowIds = useRecoilComponentValueV2(
+    unselectedRowIdsComponentSelector,
+    recordIndexId,
+  );
+
+  useEffect(() => {
+    if (hasUserSelectedAllRows) {
+      setContextStoreTargetedRecords({
+        mode: 'exclusion',
+        excludedRecordIds: unselectedRowIds,
+      });
+    } else {
+      setContextStoreTargetedRecords({
+        mode: 'selection',
+        selectedRecordIds: selectedRowIds,
+      });
+    }
+
+    return () => {
+      setContextStoreTargetedRecords({
+        mode: 'selection',
+        selectedRecordIds: [],
+      });
+    };
+  }, [
+    hasUserSelectedAllRows,
+    selectedRowIds,
+    setContextStoreTargetedRecords,
+    unselectedRowIds,
+  ]);
+
+  const setContextStoreFilters = useSetRecoilComponentStateV2(
+    contextStoreFiltersComponentState,
+  );
+
+  useEffect(() => {
+    setContextStoreFilters(recordIndexFilters);
+
+    return () => {
+      setContextStoreFilters([]);
+    };
+  }, [recordIndexFilters, setContextStoreFilters]);
+
+  return <></>;
+};

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx

@@ -1,21 +1,12 @@
 import { useContext, useEffect } from 'react';
 
-import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
-import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
 import { useHandleToggleColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleColumnFilter';
 import { useHandleToggleColumnSort } from '@/object-record/record-index/hooks/useHandleToggleColumnSort';
-import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
-import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
-import { selectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsComponentSelector';
-import { unselectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useSetRecordCountInCurrentView } from '@/views/hooks/useSetRecordCountInCurrentView';
-import { useRecoilValue } from 'recoil';
 
 export const RecordIndexTableContainerEffect = () => {
   const { recordIndexId, objectNameSingular } = useContext(
@@ -77,61 +68,5 @@ export const RecordIndexTableContainerEffect = () => {
     );
   }, [setRecordCountInCurrentView, setOnEntityCountChange]);
 
-  const setContextStoreTargetedRecords = useSetRecoilComponentStateV2(
-    contextStoreTargetedRecordsRuleComponentState,
-  );
-  const hasUserSelectedAllRows = useRecoilComponentValueV2(
-    hasUserSelectedAllRowsComponentState,
-    recordIndexId,
-  );
-  const selectedRowIds = useRecoilComponentValueV2(
-    selectedRowIdsComponentSelector,
-    recordIndexId,
-  );
-  const unselectedRowIds = useRecoilComponentValueV2(
-    unselectedRowIdsComponentSelector,
-    recordIndexId,
-  );
-
-  const recordIndexFilters = useRecoilValue(recordIndexFiltersState);
-
-  useEffect(() => {
-    if (hasUserSelectedAllRows) {
-      setContextStoreTargetedRecords({
-        mode: 'exclusion',
-        excludedRecordIds: unselectedRowIds,
-      });
-    } else {
-      setContextStoreTargetedRecords({
-        mode: 'selection',
-        selectedRecordIds: selectedRowIds,
-      });
-    }
-
-    return () => {
-      setContextStoreTargetedRecords({
-        mode: 'selection',
-        selectedRecordIds: [],
-      });
-    };
-  }, [
-    hasUserSelectedAllRows,
-    selectedRowIds,
-    setContextStoreTargetedRecords,
-    unselectedRowIds,
-  ]);
-
-  const setContextStoreFilters = useSetRecoilComponentStateV2(
-    contextStoreFiltersComponentState,
-  );
-
-  useEffect(() => {
-    setContextStoreFilters(recordIndexFilters);
-
-    return () => {
-      setContextStoreFilters([]);
-    };
-  }, [recordIndexFilters, setContextStoreFilters]);
-
   return <></>;
 };

packages/twenty-front/src/modules/object-record/record-index/export/hooks/__tests__/useExportFetchRecords.test.ts

@@ -1,6 +1,10 @@
 import { renderHook, waitFor } from '@testing-library/react';
 import { act } from 'react';
-import { percentage, sleep, useRecordData } from '../useRecordData';
+import {
+  percentage,
+  sleep,
+  useExportFetchRecords,
+} from '../useExportFetchRecords';
 
 import { PERSON_FRAGMENT_WITH_DEPTH_ZERO_RELATIONS } from '@/object-record/hooks/__mocks__/personFragments';
 import { useRecordBoard } from '@/object-record/record-board/hooks/useRecordBoard';
@@ -9,6 +13,7 @@ import { useRecordIndexOptionsForBoard } from '@/object-record/record-index/opti
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import { ViewType } from '@/views/types/ViewType';
 import { MockedResponse } from '@apollo/client/testing';
+import { expect } from '@storybook/test';
 import gql from 'graphql-tag';
 import { useRecoilValue } from 'recoil';
 import { getJestMetadataAndApolloMocksAndContextStoreWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndContextStoreWrapper';
@@ -178,7 +183,7 @@ describe('useRecordData', () => {
 
       const { result } = renderHook(
         () =>
-          useRecordData({
+          useExportFetchRecords({
             recordIndexId,
             objectMetadataItem,
             pageSize: 30,
@@ -204,7 +209,7 @@ describe('useRecordData', () => {
       const callback = jest.fn();
       const { result } = renderHook(
         () =>
-          useRecordData({
+          useExportFetchRecords({
             recordIndexId,
             objectMetadataItem,
             callback,
@@ -232,7 +237,7 @@ describe('useRecordData', () => {
             recordIndexId,
           );
           return {
-            tableData: useRecordData({
+            tableData: useExportFetchRecords({
               recordIndexId,
               objectMetadataItem,
               callback,
@@ -325,7 +330,7 @@ describe('useRecordData', () => {
             recordIndexId,
           );
           return {
-            tableData: useRecordData({
+            tableData: useExportFetchRecords({
               recordIndexId,
               objectMetadataItem,
               callback,

packages/twenty-front/src/modules/object-record/record-index/export/hooks/__tests__/useExportRecords.test.ts

@@ -7,7 +7,7 @@ import {
   displayedExportProgress,
   download,
   generateCsv,
-} from '../useExportRecordData';
+} from '../useExportRecords';
 
 jest.useFakeTimers();
 

packages/twenty-front/src/modules/object-record/record-index/export/hooks/useExportFetchRecords.ts

@@ -45,7 +45,7 @@ type ExportProgress = {
   displayType: 'percentage' | 'number';
 };
 
-export const useRecordData = ({
+export const useExportFetchRecords = ({
   objectMetadataItem,
   delayMs,
   maximumRequests = 100,

packages/twenty-front/src/modules/object-record/record-index/export/hooks/useExportProcessRecordsForCSV.ts

@@ -5,7 +5,7 @@ import { isDefined } from 'twenty-ui';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { convertCurrencyMicrosToCurrencyAmount } from '~/utils/convertCurrencyToCurrencyMicros';
 
-export const useProcessRecordsForCSVExport = (objectNameSingular: string) => {
+export const useExportProcessRecordsForCSV = (objectNameSingular: string) => {
   const { objectMetadataItem } = useObjectMetadataItem({
     objectNameSingular,
   });

packages/twenty-front/src/modules/object-record/record-index/export/hooks/useExportRecords.ts

@@ -2,13 +2,12 @@ import { json2csv } from 'json-2-csv';
 import { useMemo } from 'react';
 
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { EXPORT_TABLE_DATA_DEFAULT_PAGE_SIZE } from '@/object-record/record-index/options/constants/ExportTableDataDefaultPageSize';
-import { useProcessRecordsForCSVExport } from '@/object-record/record-index/options/hooks/useProcessRecordsForCSVExport';
-
 import {
   UseRecordDataOptions,
-  useRecordData,
+  useExportFetchRecords,
-} from '@/object-record/record-index/options/hooks/useRecordData';
+} from '@/object-record/record-index/export/hooks/useExportFetchRecords';
+import { useExportProcessRecordsForCSV } from '@/object-record/record-index/export/hooks/useExportProcessRecordsForCSV';
+import { EXPORT_TABLE_DATA_DEFAULT_PAGE_SIZE } from '@/object-record/record-index/options/constants/ExportTableDataDefaultPageSize';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
@@ -142,7 +141,7 @@ type UseExportTableDataOptions = Omit<UseRecordDataOptions, 'callback'> & {
   filename: string;
 };
 
-export const useExportRecordData = ({
+export const useExportRecords = ({
   delayMs,
   filename,
   maximumRequests = 100,
@@ -151,7 +150,7 @@ export const useExportRecordData = ({
   recordIndexId,
   viewType,
 }: UseExportTableDataOptions) => {
-  const { processRecordsForCSVExport } = useProcessRecordsForCSVExport(
+  const { processRecordsForCSVExport } = useExportProcessRecordsForCSV(
     objectMetadataItem.nameSingular,
   );
 
@@ -165,7 +164,7 @@ export const useExportRecordData = ({
     [filename, processRecordsForCSVExport],
   );
 
-  const { getTableData: download, progress } = useRecordData({
+  const { getTableData: download, progress } = useExportFetchRecords({
     delayMs,
     maximumRequests,
     objectMetadataItem,

packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx

@@ -20,15 +20,15 @@ import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObje
 import { useHandleToggleTrashColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleTrashColumnFilter';
 import { RECORD_INDEX_OPTIONS_DROPDOWN_ID } from '@/object-record/record-index/options/constants/RecordIndexOptionsDropdownId';
 
-import {
-  displayedExportProgress,
-  useExportRecordData,
-} from '@/action-menu/hooks/useExportRecordData';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { useRecordGroupReorder } from '@/object-record/record-group/hooks/useRecordGroupReorder';
-import { useRecordGroups } from '@/object-record/record-group/hooks/useRecordGroups';
 import { useRecordGroupVisibility } from '@/object-record/record-group/hooks/useRecordGroupVisibility';
+import { useRecordGroups } from '@/object-record/record-group/hooks/useRecordGroups';
+import {
+  displayedExportProgress,
+  useExportRecords,
+} from '@/object-record/record-index/export/hooks/useExportRecords';
 import { useRecordIndexOptionsForBoard } from '@/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard';
 import { useRecordIndexOptionsForTable } from '@/object-record/record-index/options/hooks/useRecordIndexOptionsForTable';
 import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope';
@@ -167,7 +167,7 @@ export const RecordIndexOptionsDropdownContent = ({
   const { openObjectRecordsSpreasheetImportDialog } =
     useOpenObjectRecordsSpreasheetImportDialog(objectMetadataItem.nameSingular);
 
-  const { progress, download } = useExportRecordData({
+  const { progress, download } = useExportRecords({
     delayMs: 100,
     filename: `${objectMetadataItem.nameSingular}.csv`,
     objectMetadataItem,

packages/twenty-ui/src/display/index.ts

@@ -40,8 +40,8 @@ export * from './icon/components/IllustrationIconToggle';
 export * from './icon/components/IllustrationIconUid';
 export * from './icon/components/IllustrationIconUser';
 export * from './icon/components/IllustrationIconWrapper';
-export * from './icon/components/llustrationIconLink';
 export * from './icon/components/TablerIcons';
+export * from './icon/components/llustrationIconLink';
 export * from './icon/hooks/useIcons';
 export * from './icon/providers/IconsProvider';
 export * from './icon/states/iconsState';