twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-22 03:17:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Fix Export CSV action not taking into account the filters applied on the
Kanban index view
This commit is contained in:
Charles Bochet 2024-11-14 23:28:53 +01:00 committed by GitHub
parent a799370483
commit 5384b4aba5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 110 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,

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

@ -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

76
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexFiltersToContextStoreEffect.tsx Normal file
View File

@ -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 <></>;
};

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

@ -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 <></>;
};

15
packages/twenty-front/src/modules/object-record/record-index/options/hooks/__tests__/useRecordData.test.tsx → packages/twenty-front/src/modules/object-record/record-index/export/hooks/__tests__/useExportFetchRecords.test.ts
View File

@ -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,
@ -322,7 +327,7 @@ describe('useRecordData', () => {
recordIndexId,
);
return {
tableData: useRecordData({
tableData: useExportFetchRecords({
recordIndexId,
objectMetadataItem,
callback,

2
packages/twenty-front/src/modules/action-menu/hooks/__tests__/useExportRecordData.test.ts → packages/twenty-front/src/modules/object-record/record-index/export/hooks/__tests__/useExportRecords.test.ts
View File

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

2
packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordData.ts → packages/twenty-front/src/modules/object-record/record-index/export/hooks/useExportFetchRecords.ts
View File

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

2
packages/twenty-front/src/modules/object-record/record-index/options/hooks/useProcessRecordsForCSVExport.ts → packages/twenty-front/src/modules/object-record/record-index/export/hooks/useExportProcessRecordsForCSV.ts
View File

@ -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,
});

15
packages/twenty-front/src/modules/action-menu/hooks/useExportRecordData.ts → packages/twenty-front/src/modules/object-record/record-index/export/hooks/useExportRecords.ts
View File

@ -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,
} from '@/object-record/record-index/options/hooks/useRecordData';
useExportFetchRecords,
} 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,

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

@ -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,

2
packages/twenty-ui/src/display/index.ts
View File

@ -49,8 +49,8 @@ export * from './icon/types/IconComponent';
export * from './info/components/Info';
export * from './status/components/Status';
export * from './tag/components/Tag';
export * from './text/components/SeparatorLineText';
export * from './text/components/HorizontalSeparator';
export * from './text/components/SeparatorLineText';
export * from './tooltip/AppTooltip';
export * from './tooltip/OverflowingTextWithTooltip';
export * from './typography/components/H1Title';