admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

7665 handle the select all case inside the action menu (#7742)

Browse Source 
Closes #7665 
- Handle select all
- Handle Filters

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Raphaël Bosi
2024-10-21 14:22:03 +02:00
committed by GitHub
parent eaab2d0dd2
commit 40152d3b92
52 changed files with 788 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,51 +1,91 @@
import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
import { contextStoreTargetedRecordsRuleState } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
import { useFavorites } from '@/favorites/hooks/useFavorites';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { DELETE_MAX_COUNT } from '@/object-record/constants/DeleteMaxCount';
import { useDeleteTableData } from '@/object-record/record-index/options/hooks/useDeleteTableData';
import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords';
import { useFetchAllRecordIds } from '@/object-record/hooks/useFetchAllRecordIds';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
import { useCallback, useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { IconTrash } from 'twenty-ui';
import { IconTrash, isDefined } from 'twenty-ui';
export const DeleteRecordsActionEffect = ({
position,
objectMetadataItem,
}: {
position: number;
objectMetadataItem: ObjectMetadataItem;
}) => {
const { addActionMenuEntry, removeActionMenuEntry } = useActionMenuEntries();
const contextStoreTargetedRecordIds = useRecoilValue(
contextStoreTargetedRecordIdsState,
);
const contextStoreCurrentObjectMetadataId = useRecoilValue(
contextStoreCurrentObjectMetadataIdState,
);
const { objectMetadataItem } = useObjectMetadataItemById({
objectId: contextStoreCurrentObjectMetadataId,
});
const [isDeleteRecordsModalOpen, setIsDeleteRecordsModalOpen] =
useState(false);
const { deleteTableData } = useDeleteTableData({
objectNameSingular: objectMetadataItem?.nameSingular ?? '',
recordIndexId: objectMetadataItem?.namePlural ?? '',
const { resetTableRowSelection } = useRecordTable({
recordTableId: objectMetadataItem.namePlural,
});
const handleDeleteClick = useCallback(() => {
deleteTableData(contextStoreTargetedRecordIds);
}, [deleteTableData, contextStoreTargetedRecordIds]);
const { deleteManyRecords } = useDeleteManyRecords({
objectNameSingular: objectMetadataItem.nameSingular,
});
const isRemoteObject = objectMetadataItem?.isRemote ?? false;
const { favorites, deleteFavorite } = useFavorites();
const numberOfSelectedRecords = contextStoreTargetedRecordIds.length;
const contextStoreNumberOfSelectedRecords = useRecoilValue(
contextStoreNumberOfSelectedRecordsState,
);
const contextStoreTargetedRecordsRule = useRecoilValue(
contextStoreTargetedRecordsRuleState,
);
const graphqlFilter = computeContextStoreFilters(
contextStoreTargetedRecordsRule,
objectMetadataItem,
);
const { fetchAllRecordIds } = useFetchAllRecordIds({
objectNameSingular: objectMetadataItem.nameSingular,
filter: graphqlFilter,
});
const handleDeleteClick = useCallback(async () => {
const recordIdsToDelete = await fetchAllRecordIds();
resetTableRowSelection();
for (const recordIdToDelete of recordIdsToDelete) {
const foundFavorite = favorites?.find(
(favorite) => favorite.recordId === recordIdToDelete,
);
if (foundFavorite !== undefined) {
deleteFavorite(foundFavorite.id);
}
}
await deleteManyRecords(recordIdsToDelete, {
delayInMsBetweenRequests: 50,
});
}, [
deleteFavorite,
deleteManyRecords,
favorites,
fetchAllRecordIds,
resetTableRowSelection,
]);
const isRemoteObject = objectMetadataItem.isRemote;
const canDelete =
!isRemoteObject && numberOfSelectedRecords < DELETE_MAX_COUNT;
!isRemoteObject &&
isDefined(contextStoreNumberOfSelectedRecords) &&
contextStoreNumberOfSelectedRecords < DELETE_MAX_COUNT &&
contextStoreNumberOfSelectedRecords > 0;
useEffect(() => {
if (canDelete) {
@ -62,17 +102,19 @@ export const DeleteRecordsActionEffect = ({
<ConfirmationModal
isOpen={isDeleteRecordsModalOpen}
setIsOpen={setIsDeleteRecordsModalOpen}
title={`Delete ${numberOfSelectedRecords} ${
numberOfSelectedRecords === 1 ? `record` : 'records'
title={`Delete ${contextStoreNumberOfSelectedRecords} ${
contextStoreNumberOfSelectedRecords === 1 ? `record` : 'records'
}`}
subtitle={`Are you sure you want to delete ${
numberOfSelectedRecords === 1 ? 'this record' : 'these records'
contextStoreNumberOfSelectedRecords === 1
? 'this record'
: 'these records'
}? ${
numberOfSelectedRecords === 1 ? 'It' : 'They'
contextStoreNumberOfSelectedRecords === 1 ? 'It' : 'They'
} can be recovered from the Options menu.`}
onConfirmClick={() => handleDeleteClick()}
deleteButtonText={`Delete ${
numberOfSelectedRecords > 1 ? 'Records' : 'Record'
contextStoreNumberOfSelectedRecords > 1 ? 'Records' : 'Record'
}`}
/>
),
@ -80,14 +122,18 @@ export const DeleteRecordsActionEffect = ({
} else {
removeActionMenuEntry('delete');
}
return () => {
removeActionMenuEntry('delete');
};
}, [
canDelete,
addActionMenuEntry,
removeActionMenuEntry,
isDeleteRecordsModalOpen,
numberOfSelectedRecords,
canDelete,
contextStoreNumberOfSelectedRecords,
handleDeleteClick,
isDeleteRecordsModalOpen,
position,
removeActionMenuEntry,
]);
return null;

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

@ -1,38 +1,27 @@
import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
import {
displayedExportProgress,
useExportTableData,
} from '@/object-record/record-index/options/hooks/useExportTableData';
useExportRecordData,
} from '@/action-menu/hooks/useExportRecordData';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import { IconFileExport } from 'twenty-ui';
export const ExportRecordsActionEffect = ({
position,
objectMetadataItem,
}: {
position: number;
objectMetadataItem: ObjectMetadataItem;
}) => {
const { addActionMenuEntry, removeActionMenuEntry } = useActionMenuEntries();
const contextStoreCurrentObjectMetadataId = useRecoilValue(
contextStoreCurrentObjectMetadataIdState,
);
const { objectMetadataItem } = useObjectMetadataItemById({
objectId: contextStoreCurrentObjectMetadataId,
});
const baseTableDataParams = {
const { progress, download } = useExportRecordData({
delayMs: 100,
objectNameSingular: objectMetadataItem?.nameSingular ?? '',
recordIndexId: objectMetadataItem?.namePlural ?? '',
};
const { progress, download } = useExportTableData({
...baseTableDataParams,
filename: `${objectMetadataItem?.nameSingular}.csv`,
objectMetadataItem,
recordIndexId: objectMetadataItem.namePlural,
filename: `${objectMetadataItem.nameSingular}.csv`,
});
useEffect(() => {

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

@ -1,8 +1,7 @@
import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
import { contextStoreTargetedRecordsRuleState } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
import { useFavorites } from '@/favorites/hooks/useFavorites';
import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { useEffect } from 'react';
import { useRecoilValue } from 'recoil';
@ -10,30 +9,28 @@ import { IconHeart, IconHeartOff, isDefined } from 'twenty-ui';
export const ManageFavoritesActionEffect = ({
position,
objectMetadataItem,
}: {
position: number;
objectMetadataItem: ObjectMetadataItem;
}) => {
const { addActionMenuEntry, removeActionMenuEntry } = useActionMenuEntries();
const contextStoreTargetedRecordIds = useRecoilValue(
contextStoreTargetedRecordIdsState,
);
const contextStoreCurrentObjectMetadataId = useRecoilValue(
contextStoreCurrentObjectMetadataIdState,
const contextStoreTargetedRecordsRule = useRecoilValue(
contextStoreTargetedRecordsRuleState,
);
const { favorites, createFavorite, deleteFavorite } = useFavorites();
const selectedRecordId = contextStoreTargetedRecordIds[0];
const selectedRecordId =
contextStoreTargetedRecordsRule.mode === 'selection'
? contextStoreTargetedRecordsRule.selectedRecordIds[0]
: undefined;
const selectedRecord = useRecoilValue(
recordStoreFamilyState(selectedRecordId),
recordStoreFamilyState(selectedRecordId ?? ''),
);
const { objectMetadataItem } = useObjectMetadataItemById({
objectId: contextStoreCurrentObjectMetadataId,
});
const foundFavorite = favorites?.find(
(favorite) => favorite.recordId === selectedRecordId,
);

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

@ -1,13 +1,22 @@
import { DeleteRecordsActionEffect } from '@/action-menu/actions/record-actions/components/DeleteRecordsActionEffect';
import { ExportRecordsActionEffect } from '@/action-menu/actions/record-actions/components/ExportRecordsActionEffect';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
const actionEffects = [ExportRecordsActionEffect, DeleteRecordsActionEffect];
export const MultipleRecordsActionMenuEntriesSetter = () => {
export const MultipleRecordsActionMenuEntriesSetter = ({
objectMetadataItem,
}: {
objectMetadataItem: ObjectMetadataItem;
}) => {
return (
<>
{actionEffects.map((ActionEffect, index) => (
<ActionEffect key={index} position={index} />
<ActionEffect
key={index}
position={index}
objectMetadataItem={objectMetadataItem}
/>
))}
</>
);

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

@ -1,20 +1,44 @@
import { MultipleRecordsActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/MultipleRecordsActionMenuEntriesSetter';
import { SingleRecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/SingleRecordActionMenuEntriesSetter';
import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
import { useRecoilValue } from 'recoil';
export const RecordActionMenuEntriesSetter = () => {
const contextStoreTargetedRecordIds = useRecoilValue(
contextStoreTargetedRecordIdsState,
const contextStoreNumberOfSelectedRecords = useRecoilValue(
contextStoreNumberOfSelectedRecordsState,
);
if (contextStoreTargetedRecordIds.length === 0) {
const contextStoreCurrentObjectMetadataId = useRecoilValue(
contextStoreCurrentObjectMetadataIdState,
);
const { objectMetadataItem } = useObjectMetadataItemById({
objectId: contextStoreCurrentObjectMetadataId ?? '',
});
if (!objectMetadataItem) {
throw new Error(
`Object metadata item not found for id ${contextStoreCurrentObjectMetadataId}`,
);
}
if (!contextStoreNumberOfSelectedRecords) {
return null;
}
if (contextStoreTargetedRecordIds.length === 1) {
return <SingleRecordActionMenuEntriesSetter />;
if (contextStoreNumberOfSelectedRecords === 1) {
return (
<SingleRecordActionMenuEntriesSetter
objectMetadataItem={objectMetadataItem}
/>
);
}
return <MultipleRecordsActionMenuEntriesSetter />;
return (
<MultipleRecordsActionMenuEntriesSetter
objectMetadataItem={objectMetadataItem}
/>
);
};

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

@ -1,8 +1,13 @@
import { DeleteRecordsActionEffect } from '@/action-menu/actions/record-actions/components/DeleteRecordsActionEffect';
import { ExportRecordsActionEffect } from '@/action-menu/actions/record-actions/components/ExportRecordsActionEffect';
import { ManageFavoritesActionEffect } from '@/action-menu/actions/record-actions/components/ManageFavoritesActionEffect';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
export const SingleRecordActionMenuEntriesSetter = () => {
export const SingleRecordActionMenuEntriesSetter = ({
objectMetadataItem,
}: {
objectMetadataItem: ObjectMetadataItem;
}) => {
const actionEffects = [
ManageFavoritesActionEffect,
ExportRecordsActionEffect,
@ -11,7 +16,11 @@ export const SingleRecordActionMenuEntriesSetter = () => {
return (
<>
{actionEffects.map((ActionEffect, index) => (
<ActionEffect key={index} position={index} />
<ActionEffect
key={index}
position={index}
objectMetadataItem={objectMetadataItem}
/>
))}
</>
);

30
packages/twenty-front/src/modules/action-menu/components/ActionMenu.tsx Normal file
View File

@ -0,0 +1,30 @@
import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter';
import { ActionMenuBar } from '@/action-menu/components/ActionMenuBar';
import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
import { ActionMenuDropdown } from '@/action-menu/components/ActionMenuDropdown';
import { ActionMenuEffect } from '@/action-menu/components/ActionMenuEffect';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
import { useRecoilValue } from 'recoil';
export const ActionMenu = ({ actionMenuId }: { actionMenuId: string }) => {
const contextStoreCurrentObjectMetadataId = useRecoilValue(
contextStoreCurrentObjectMetadataIdState,
);
return (
<>
{contextStoreCurrentObjectMetadataId && (
<ActionMenuComponentInstanceContext.Provider
value={{ instanceId: actionMenuId }}
>
<ActionMenuBar />
<ActionMenuDropdown />
<ActionMenuConfirmationModals />
<ActionMenuEffect />
<RecordActionMenuEntriesSetter />
</ActionMenuComponentInstanceContext.Provider>
)}
</>
);
};

10
packages/twenty-front/src/modules/action-menu/components/ActionMenuBar.tsx
View File

@ -4,7 +4,7 @@ import { ActionMenuBarEntry } from '@/action-menu/components/ActionMenuBarEntry'
import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { ActionBarHotkeyScope } from '@/action-menu/types/ActionBarHotKeyScope';
import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
import { BottomBar } from '@/ui/layout/bottom-bar/components/BottomBar';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@ -19,8 +19,8 @@ const StyledLabel = styled.div`
`;
export const ActionMenuBar = () => {
const contextStoreTargetedRecordIds = useRecoilValue(
contextStoreTargetedRecordIdsState,
const contextStoreNumberOfSelectedRecords = useRecoilValue(
contextStoreNumberOfSelectedRecordsState,
);
const actionMenuId = useAvailableComponentInstanceIdOrThrow(
@ -42,9 +42,7 @@ export const ActionMenuBar = () => {
scope: ActionBarHotkeyScope.ActionBar,
}}
>
<StyledLabel>
{contextStoreTargetedRecordIds.length} selected:
</StyledLabel>
<StyledLabel>{contextStoreNumberOfSelectedRecords} selected:</StyledLabel>
{actionMenuEntries.map((entry, index) => (
<ActionMenuBarEntry key={index} entry={entry} />
))}

2
packages/twenty-front/src/modules/action-menu/components/ActionMenuDropdown.tsx
View File

@ -64,7 +64,7 @@ export const ActionMenuDropdown = () => {
return (
<StyledContainerActionMenuDropdown
position={actionMenuDropdownPosition}
className="context-menu"
className="action-menu-dropdown"
>
<Dropdown
dropdownId={`action-menu-dropdown-${actionMenuId}`}

12
packages/twenty-front/src/modules/action-menu/components/ActionMenuEffect.tsx
View File

@ -1,6 +1,6 @@
import { useActionMenu } from '@/action-menu/hooks/useActionMenu';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
@ -8,8 +8,8 @@ import { useEffect } from 'react';
import { useRecoilValue } from 'recoil';
export const ActionMenuEffect = () => {
const contextStoreTargetedRecordIds = useRecoilValue(
contextStoreTargetedRecordIdsState,
const contextStoreNumberOfSelectedRecords = useRecoilValue(
contextStoreNumberOfSelectedRecordsState,
);
const actionMenuId = useAvailableComponentInstanceIdOrThrow(
@ -26,17 +26,17 @@ export const ActionMenuEffect = () => {
);
useEffect(() => {
if (contextStoreTargetedRecordIds.length > 0 && !isDropdownOpen) {
if (contextStoreNumberOfSelectedRecords > 0 && !isDropdownOpen) {
// We only handle opening the ActionMenuBar here, not the Dropdown.
// The Dropdown is already managed by sync handlers for events like
// right-click to open and click outside to close.
openActionBar();
}
if (contextStoreTargetedRecordIds.length === 0) {
if (contextStoreNumberOfSelectedRecords === 0 && isDropdownOpen) {
closeActionBar();
}
}, [
contextStoreTargetedRecordIds,
contextStoreNumberOfSelectedRecords,
openActionBar,
closeActionBar,
isDropdownOpen,

9
packages/twenty-front/src/modules/action-menu/components/__stories__/ActionMenuBar.stories.tsx
View File

@ -5,7 +5,8 @@ import { RecoilRoot } from 'recoil';
import { ActionMenuBar } from '@/action-menu/components/ActionMenuBar';
import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
import { contextStoreTargetedRecordsRuleState } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
import { userEvent, waitFor, within } from '@storybook/test';
import { IconCheckbox, IconTrash } from 'twenty-ui';
@ -20,7 +21,11 @@ const meta: Meta<typeof ActionMenuBar> = {
(Story) => (
<RecoilRoot
initializeState={({ set }) => {
set(contextStoreTargetedRecordIdsState, ['1', '2', '3']);
set(contextStoreTargetedRecordsRuleState, {
mode: 'selection',
selectedRecordIds: ['1', '2', '3'],
});
set(contextStoreNumberOfSelectedRecordsState, 3);
set(
actionMenuEntriesComponentState.atomFamily({
instanceId: 'story-action-menu',

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

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

22
packages/twenty-front/src/modules/object-record/record-index/options/hooks/useExportTableData.ts → packages/twenty-front/src/modules/action-menu/hooks/useExportRecordData.ts
View File

@ -4,10 +4,11 @@ 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 {
useTableData,
UseTableDataOptions,
} from '@/object-record/record-index/options/hooks/useTableData';
UseRecordDataOptions,
useRecordData,
} from '@/object-record/record-index/options/hooks/useRecordData';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { RelationDefinitionType } from '~/generated-metadata/graphql';
@ -134,21 +135,22 @@ const downloader = (mimeType: string, generator: GenerateExport) => {
export const csvDownloader = downloader('text/csv', generateCsv);
type UseExportTableDataOptions = Omit<UseTableDataOptions, 'callback'> & {
type UseExportTableDataOptions = Omit<UseRecordDataOptions, 'callback'> & {
filename: string;
};
export const useExportTableData = ({
export const useExportRecordData = ({
delayMs,
filename,
maximumRequests = 100,
objectNameSingular,
objectMetadataItem,
pageSize = EXPORT_TABLE_DATA_DEFAULT_PAGE_SIZE,
recordIndexId,
viewType,
}: UseExportTableDataOptions) => {
const { processRecordsForCSVExport } =
useProcessRecordsForCSVExport(objectNameSingular);
const { processRecordsForCSVExport } = useProcessRecordsForCSVExport(
objectMetadataItem.nameSingular,
);
const downloadCsv = useMemo(
() =>
@ -160,10 +162,10 @@ export const useExportTableData = ({
[filename, processRecordsForCSVExport],
);
const { getTableData: download, progress } = useTableData({
const { getTableData: download, progress } = useRecordData({
delayMs,
maximumRequests,
objectNameSingular,
objectMetadataItem,
pageSize,
recordIndexId,
callback: downloadCsv,

6
packages/twenty-front/src/modules/context-store/states/contextStoreNumberOfSelectedRecordsState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createState } from 'twenty-ui';
export const contextStoreNumberOfSelectedRecordsState = createState<number>({
key: 'contextStoreNumberOfSelectedRecordsState',
defaultValue: 0,
});

6
packages/twenty-front/src/modules/context-store/states/contextStoreTargetedRecordIdsState.ts
View File

@ -1,6 +0,0 @@
import { createState } from 'twenty-ui';
export const contextStoreTargetedRecordIdsState = createState<string[]>({
key: 'contextStoreTargetedRecordIdsState',
defaultValue: [],
});

26
packages/twenty-front/src/modules/context-store/states/contextStoreTargetedRecordsRuleState.ts Normal file
View File

@ -0,0 +1,26 @@
import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
import { createState } from 'twenty-ui';
type ContextStoreTargetedRecordsRuleSelectionMode = {
mode: 'selection';
selectedRecordIds: string[];
};
type ContextStoreTargetedRecordsRuleExclusionMode = {
mode: 'exclusion';
excludedRecordIds: string[];
filters: Filter[];
};
export type ContextStoreTargetedRecordsRule =
| ContextStoreTargetedRecordsRuleSelectionMode
| ContextStoreTargetedRecordsRuleExclusionMode;
export const contextStoreTargetedRecordsRuleState =
createState<ContextStoreTargetedRecordsRule>({
key: 'contextStoreTargetedRecordsRuleState',
defaultValue: {
mode: 'selection',
selectedRecordIds: [],
},
});

77
packages/twenty-front/src/modules/context-store/utils/__tests__/computeContextStoreFilters.test.ts Normal file
View File

@ -0,0 +1,77 @@
import { ContextStoreTargetedRecordsRule } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
describe('computeContextStoreFilters', () => {
const personObjectMetadataItem = generatedMockObjectMetadataItems.find(
(item) => item.nameSingular === 'person',
)!;
it('should work for selection mode', () => {
const contextStoreTargetedRecordsRule: ContextStoreTargetedRecordsRule = {
mode: 'selection',
selectedRecordIds: ['1', '2', '3'],
};
const filters = computeContextStoreFilters(
contextStoreTargetedRecordsRule,
personObjectMetadataItem,
);
expect(filters).toEqual({
id: {
in: ['1', '2', '3'],
},
});
});
it('should work for exclusion mode', () => {
const contextStoreTargetedRecordsRule: ContextStoreTargetedRecordsRule = {
mode: 'exclusion',
filters: [
{
id: 'name-filter',
variant: 'default',
fieldMetadataId: personObjectMetadataItem.fields.find(
(field) => field.name === 'name',
)!.id,
value: 'John',
displayValue: 'John',
displayAvatarUrl: undefined,
operand: ViewFilterOperand.Contains,
definition: {
fieldMetadataId: personObjectMetadataItem.fields.find(
(field) => field.name === 'name',
)!.id,
label: 'Name',
iconName: 'person',
type: 'TEXT',
},
},
],
excludedRecordIds: ['1', '2', '3'],
};
const filters = computeContextStoreFilters(
contextStoreTargetedRecordsRule,
personObjectMetadataItem,
);
expect(filters).toEqual({
and: [
{
name: {
ilike: '%John%',
},
},
{
not: {
id: {
in: ['1', '2', '3'],
},
},
},
],
});
});
});

42
packages/twenty-front/src/modules/context-store/utils/computeContextStoreFilters.ts Normal file
View File

@ -0,0 +1,42 @@
import { ContextStoreTargetedRecordsRule } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { RecordGqlOperationFilter } from '@/object-record/graphql/types/RecordGqlOperationFilter';
import { turnFiltersIntoQueryFilter } from '@/object-record/record-filter/utils/turnFiltersIntoQueryFilter';
import { makeAndFilterVariables } from '@/object-record/utils/makeAndFilterVariables';
export const computeContextStoreFilters = (
contextStoreTargetedRecordsRule: ContextStoreTargetedRecordsRule,
objectMetadataItem: ObjectMetadataItem,
) => {
let queryFilter: RecordGqlOperationFilter | undefined;
if (contextStoreTargetedRecordsRule.mode === 'exclusion') {
queryFilter = makeAndFilterVariables([
turnFiltersIntoQueryFilter(
contextStoreTargetedRecordsRule.filters,
objectMetadataItem?.fields ?? [],
),
contextStoreTargetedRecordsRule.excludedRecordIds.length > 0
? {
not: {
id: {
in: contextStoreTargetedRecordsRule.excludedRecordIds,
},
},
}
: undefined,
]);
}
if (contextStoreTargetedRecordsRule.mode === 'selection') {
queryFilter =
contextStoreTargetedRecordsRule.selectedRecordIds.length > 0
? {
id: {
in: contextStoreTargetedRecordsRule.selectedRecordIds,
},
}
: undefined;
}
return queryFilter;
};

15
packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useObjectMetadataItemById.test.ts
View File

@ -33,16 +33,11 @@ describe('useObjectMetadataItemById', () => {
expect(objectMetadataItem?.id).toBe(opportunityObjectMetadata.id);
});
it('should return null when invalid ID is provided', async () => {
const { result } = renderHook(
() => useObjectMetadataItemById({ objectId: 'invalid-id' }),
{
it('should throw an error when invalid ID is provided', async () => {
expect(() =>
renderHook(() => useObjectMetadataItemById({ objectId: 'invalid-id' }), {
wrapper: Wrapper,
},
);
const { objectMetadataItem } = result.current;
expect(objectMetadataItem).toBeNull();
}),
).toThrow(`Object metadata item not found for id invalid-id`);
});
});

6
packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItemById.ts
View File

@ -6,7 +6,7 @@ import { isDefined } from '~/utils/isDefined';
export const useObjectMetadataItemById = ({
objectId,
}: {
objectId: string | null;
objectId: string;
}) => {
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
@ -15,9 +15,7 @@ export const useObjectMetadataItemById = ({
);
if (!isDefined(objectMetadataItem)) {
return {
objectMetadataItem: null,
};
throw new Error(`Object metadata item not found for id ${objectId}`);
}
return {

2
packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
View File

@ -66,7 +66,7 @@ export const RecordBoard = () => {
useListenClickOutsideByClassName({
classNames: ['record-board-card'],
excludeClassNames: ['bottom-bar', 'context-menu'],
excludeClassNames: ['bottom-bar', 'action-menu-dropdown'],
callback: resetRecordSelection,
});

18
packages/twenty-front/src/modules/object-record/record-filter/utils/__tests__/turnObjectDropdownFilterIntoQueryFilter.test.ts → packages/twenty-front/src/modules/object-record/record-filter/utils/__tests__/turnFiltersIntoQueryFilter.test.ts
View File

@ -1,5 +1,5 @@
import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter';
import { turnFiltersIntoQueryFilter } from '@/object-record/record-filter/utils/turnFiltersIntoQueryFilter';
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import { getCompaniesMock } from '~/testing/mock-data/companies';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
@ -16,7 +16,7 @@ const personMockObjectMetadataItem = generatedMockObjectMetadataItems.find(
jest.useFakeTimers().setSystemTime(new Date('2020-01-01'));
describe('turnObjectDropdownFilterIntoQueryFilter', () => {
describe('turnFiltersIntoQueryFilter', () => {
it('should work as expected for single filter', () => {
const companyMockNameFieldMetadataId =
companyMockObjectMetadataItem.fields.find(
@ -37,7 +37,7 @@ describe('turnObjectDropdownFilterIntoQueryFilter', () => {
},
};
const result = turnObjectDropdownFilterIntoQueryFilter(
const result = turnFiltersIntoQueryFilter(
[nameFilter],
companyMockObjectMetadataItem.fields,
);
@ -88,7 +88,7 @@ describe('turnObjectDropdownFilterIntoQueryFilter', () => {
},
};
const result = turnObjectDropdownFilterIntoQueryFilter(
const result = turnFiltersIntoQueryFilter(
[nameFilter, employeesFilter],
companyMockObjectMetadataItem.fields,
);
@ -173,7 +173,7 @@ describe('should work as expected for the different field types', () => {
},
};
const result = turnObjectDropdownFilterIntoQueryFilter(
const result = turnFiltersIntoQueryFilter(
[
addressFilterContains,
addressFilterDoesNotContain,
@ -554,7 +554,7 @@ describe('should work as expected for the different field types', () => {
},
};
const result = turnObjectDropdownFilterIntoQueryFilter(
const result = turnFiltersIntoQueryFilter(
[
phonesFilterContains,
phonesFilterDoesNotContain,
@ -754,7 +754,7 @@ describe('should work as expected for the different field types', () => {
},
};
const result = turnObjectDropdownFilterIntoQueryFilter(
const result = turnFiltersIntoQueryFilter(
[
emailsFilterContains,
emailsFilterDoesNotContain,
@ -908,7 +908,7 @@ describe('should work as expected for the different field types', () => {
},
};
const result = turnObjectDropdownFilterIntoQueryFilter(
const result = turnFiltersIntoQueryFilter(
[
dateFilterIsAfter,
dateFilterIsBefore,
@ -1023,7 +1023,7 @@ describe('should work as expected for the different field types', () => {
},
};
const result = turnObjectDropdownFilterIntoQueryFilter(
const result = turnFiltersIntoQueryFilter(
[
employeesFilterIsGreaterThan,
employeesFilterIsLessThan,

2
packages/twenty-front/src/modules/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter.ts → packages/twenty-front/src/modules/object-record/record-filter/utils/turnFiltersIntoQueryFilter.ts
View File

@ -31,7 +31,7 @@ import { z } from 'zod';
// TODO: break this down into smaller functions and make the whole thing immutable
// Especially applyEmptyFilters
export const turnObjectDropdownFilterIntoQueryFilter = (
export const turnFiltersIntoQueryFilter = (
rawUIFilters: Filter[],
fields: Pick<Field, 'id' | 'name'>[],
): RecordGqlOperationFilter | undefined => {

34
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardDataLoaderEffect.tsx
View File

@ -2,8 +2,7 @@ import { useCallback, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
import { contextStoreTargetedRecordsRuleState } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
import { useRecordBoard } from '@/object-record/record-board/hooks/useRecordBoard';
@ -121,32 +120,23 @@ export const RecordIndexBoardDataLoaderEffect = ({
const selectedRecordIds = useRecoilValue(selectedRecordIdsSelector());
const setContextStoreTargetedRecordIds = useSetRecoilState(
contextStoreTargetedRecordIdsState,
);
const setContextStoreCurrentObjectMetadataItem = useSetRecoilState(
contextStoreCurrentObjectMetadataIdState,
const setContextStoreTargetedRecords = useSetRecoilState(
contextStoreTargetedRecordsRuleState,
);
useEffect(() => {
setContextStoreTargetedRecordIds(selectedRecordIds);
}, [selectedRecordIds, setContextStoreTargetedRecordIds]);
useEffect(() => {
setContextStoreTargetedRecordIds(selectedRecordIds);
setContextStoreCurrentObjectMetadataItem(objectMetadataItem?.id);
setContextStoreTargetedRecords({
mode: 'selection',
selectedRecordIds: selectedRecordIds,
});
return () => {
setContextStoreTargetedRecordIds([]);
setContextStoreCurrentObjectMetadataItem(null);
setContextStoreTargetedRecords({
mode: 'selection',
selectedRecordIds: [],
});
};
}, [
objectMetadataItem?.id,
selectedRecordIds,
setContextStoreCurrentObjectMetadataItem,
setContextStoreTargetedRecordIds,
]);
}, [selectedRecordIds, setContextStoreTargetedRecords]);
return <></>;
};

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

@ -22,12 +22,8 @@ import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter';
import { ActionMenuBar } from '@/action-menu/components/ActionMenuBar';
import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
import { ActionMenuDropdown } from '@/action-menu/components/ActionMenuDropdown';
import { ActionMenuEffect } from '@/action-menu/components/ActionMenuEffect';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { ActionMenu } from '@/action-menu/components/ActionMenu';
import { contextStoreTargetedRecordsRuleState } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
import { ViewBar } from '@/views/components/ViewBar';
import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
import { ViewField } from '@/views/types/ViewField';
@ -106,6 +102,10 @@ export const RecordIndexContainer = () => {
[columnDefinitions, setTableColumns],
);
const setContextStoreTargetedRecordsRule = useSetRecoilState(
contextStoreTargetedRecordsRuleState,
);
return (
<StyledContainer>
<InformationBannerWrapper />
@ -119,7 +119,7 @@ export const RecordIndexContainer = () => {
optionsDropdownButton={
<RecordIndexOptionsDropdown
recordIndexId={recordIndexId}
objectNameSingular={objectNameSingular}
objectMetadataItem={objectMetadataItem}
viewType={recordIndexViewType ?? ViewType.Table}
/>
}
@ -135,6 +135,13 @@ export const RecordIndexContainer = () => {
setRecordIndexFilters(
mapViewFiltersToFilters(view.viewFilters, filterDefinitions),
);
setContextStoreTargetedRecordsRule((prev) => ({
...prev,
filters: mapViewFiltersToFilters(
view.viewFilters,
filterDefinitions,
),
}));
setTableSorts(
mapViewSortsToSorts(view.viewSorts, sortDefinitions),
);
@ -179,15 +186,7 @@ export const RecordIndexContainer = () => {
/>
</StyledContainerWithPadding>
)}
<ActionMenuComponentInstanceContext.Provider
value={{ instanceId: recordIndexId }}
>
<ActionMenuEffect />
<RecordActionMenuEntriesSetter />
<ActionMenuBar />
<ActionMenuDropdown />
<ActionMenuConfirmationModals />
</ActionMenuComponentInstanceContext.Provider>
<ActionMenu actionMenuId={recordIndexId} />
</RecordFieldValueSelectorContextProvider>
</ViewComponentInstanceContext.Provider>
</StyledContainer>

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

@ -0,0 +1,66 @@
import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
import { contextStoreTargetedRecordsRuleState } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
import { useFindManyParams } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
import { useContext, useEffect } from 'react';
import { useRecoilValue, useSetRecoilState } from 'recoil';
export const RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect =
() => {
const setContextStoreNumberOfSelectedRecords = useSetRecoilState(
contextStoreNumberOfSelectedRecordsState,
);
const contextStoreTargetedRecordsRule = useRecoilValue(
contextStoreTargetedRecordsRuleState,
);
const { objectNamePlural } = useContext(RecordIndexRootPropsContext);
const { objectNameSingular } = useObjectNameSingularFromPlural({
objectNamePlural,
});
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular,
});
const findManyRecordsParams = useFindManyParams(
objectMetadataItem?.nameSingular ?? '',
objectMetadataItem?.namePlural ?? '',
);
const { totalCount } = useFindManyRecords({
...findManyRecordsParams,
recordGqlFields: {
id: true,
},
filter: computeContextStoreFilters(
contextStoreTargetedRecordsRule,
objectMetadataItem,
),
limit: 1,
skip: contextStoreTargetedRecordsRule.mode === 'selection',
});
useEffect(() => {
if (contextStoreTargetedRecordsRule.mode === 'selection') {
setContextStoreNumberOfSelectedRecords(
contextStoreTargetedRecordsRule.selectedRecordIds.length,
);
}
if (contextStoreTargetedRecordsRule.mode === 'exclusion') {
setContextStoreNumberOfSelectedRecords(totalCount ?? 0);
}
}, [
contextStoreTargetedRecordsRule,
setContextStoreNumberOfSelectedRecords,
totalCount,
]);
return null;
};

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

@ -0,0 +1,31 @@
import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
import { useContext, useEffect } from 'react';
import { useSetRecoilState } from 'recoil';
export const RecordIndexContainerContextStoreObjectMetadataEffect = () => {
const setContextStoreCurrentObjectMetadataItem = useSetRecoilState(
contextStoreCurrentObjectMetadataIdState,
);
const { objectNamePlural } = useContext(RecordIndexRootPropsContext);
const { objectNameSingular } = useObjectNameSingularFromPlural({
objectNamePlural,
});
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular,
});
useEffect(() => {
setContextStoreCurrentObjectMetadataItem(objectMetadataItem.id);
return () => {
setContextStoreCurrentObjectMetadataItem(null);
};
}, [objectMetadataItem.id, setContextStoreCurrentObjectMetadataItem]);
return null;
};

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

@ -1,8 +1,7 @@
import { useContext, useEffect } from 'react';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
import { contextStoreTargetedRecordsRuleState } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
@ -24,18 +23,12 @@ export const RecordIndexTableContainerEffect = () => {
selectedRowIdsSelector,
setOnToggleColumnFilter,
setOnToggleColumnSort,
hasUserSelectedAllRowsState,
unselectedRowIdsSelector,
} = useRecordTable({
recordTableId: recordIndexId,
});
const setContextStoreTargetedRecordIds = useSetRecoilState(
contextStoreTargetedRecordIdsState,
);
const setContextStoreCurrentObjectMetadataItem = useSetRecoilState(
contextStoreCurrentObjectMetadataIdState,
);
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular,
});
@ -50,8 +43,6 @@ export const RecordIndexTableContainerEffect = () => {
setAvailableTableColumns(columnDefinitions);
}, [columnDefinitions, setAvailableTableColumns]);
const selectedRowIds = useRecoilValue(selectedRowIdsSelector());
const handleToggleColumnFilter = useHandleToggleColumnFilter({
objectNameSingular,
viewBarId,
@ -82,19 +73,38 @@ export const RecordIndexTableContainerEffect = () => {
);
}, [setRecordCountInCurrentView, setOnEntityCountChange]);
const setContextStoreTargetedRecords = useSetRecoilState(
contextStoreTargetedRecordsRuleState,
);
const hasUserSelectedAllRows = useRecoilValue(hasUserSelectedAllRowsState);
const selectedRowIds = useRecoilValue(selectedRowIdsSelector());
const unselectedRowIds = useRecoilValue(unselectedRowIdsSelector());
useEffect(() => {
setContextStoreTargetedRecordIds(selectedRowIds);
setContextStoreCurrentObjectMetadataItem(objectMetadataItem?.id);
if (hasUserSelectedAllRows) {
setContextStoreTargetedRecords({
mode: 'exclusion',
excludedRecordIds: unselectedRowIds,
filters: [],
});
} else {
setContextStoreTargetedRecords({
mode: 'selection',
selectedRecordIds: selectedRowIds,
});
}
return () => {
setContextStoreTargetedRecordIds([]);
setContextStoreCurrentObjectMetadataItem(null);
setContextStoreTargetedRecords({
mode: 'selection',
selectedRecordIds: [],
});
};
}, [
objectMetadataItem?.id,
hasUserSelectedAllRows,
selectedRowIds,
setContextStoreCurrentObjectMetadataItem,
setContextStoreTargetedRecordIds,
setContextStoreTargetedRecords,
unselectedRowIds,
]);
return <></>;

4
packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts
View File

@ -5,7 +5,7 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
import { useRecordBoard } from '@/object-record/record-board/hooks/useRecordBoard';
import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter';
import { turnFiltersIntoQueryFilter } from '@/object-record/record-filter/utils/turnFiltersIntoQueryFilter';
import { useRecordBoardRecordGqlFields } from '@/object-record/record-index/hooks/useRecordBoardRecordGqlFields';
import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState';
import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
@ -44,7 +44,7 @@ export const useLoadRecordIndexBoard = ({
const recordIndexFilters = useRecoilValue(recordIndexFiltersState);
const recordIndexSorts = useRecoilValue(recordIndexSortsState);
const requestFilters = turnObjectDropdownFilterIntoQueryFilter(
const requestFilters = turnFiltersIntoQueryFilter(
recordIndexFilters,
objectMetadataItem?.fields ?? [],
);

4
packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts
View File

@ -5,7 +5,7 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
import { useRecordBoard } from '@/object-record/record-board/hooks/useRecordBoard';
import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter';
import { turnFiltersIntoQueryFilter } from '@/object-record/record-filter/utils/turnFiltersIntoQueryFilter';
import { useRecordBoardRecordGqlFields } from '@/object-record/record-index/hooks/useRecordBoardRecordGqlFields';
import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
import { recordIndexSortsState } from '@/object-record/record-index/states/recordIndexSortsState';
@ -35,7 +35,7 @@ export const useLoadRecordIndexBoardColumn = ({
const recordIndexFilters = useRecoilValue(recordIndexFiltersState);
const recordIndexSorts = useRecoilValue(recordIndexSortsState);
const requestFilters = turnObjectDropdownFilterIntoQueryFilter(
const requestFilters = turnFiltersIntoQueryFilter(
recordIndexFilters,
objectMetadataItem?.fields ?? [],
);

4
packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts
View File

@ -5,7 +5,7 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter';
import { turnFiltersIntoQueryFilter } from '@/object-record/record-filter/utils/turnFiltersIntoQueryFilter';
import { useRecordTableRecordGqlFields } from '@/object-record/record-index/hooks/useRecordTableRecordGqlFields';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
@ -27,7 +27,7 @@ export const useFindManyParams = (
const tableFilters = useRecoilValue(tableFiltersState);
const tableSorts = useRecoilValue(tableSortsState);
const filter = turnObjectDropdownFilterIntoQueryFilter(
const filter = turnFiltersIntoQueryFilter(
tableFilters,
objectMetadataItem?.fields ?? [],
);

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

@ -1,3 +1,4 @@
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { RecordIndexOptionsDropdownButton } from '@/object-record/record-index/options/components/RecordIndexOptionsDropdownButton';
import { RecordIndexOptionsDropdownContent } from '@/object-record/record-index/options/components/RecordIndexOptionsDropdownContent';
import { RECORD_INDEX_OPTIONS_DROPDOWN_ID } from '@/object-record/record-index/options/constants/RecordIndexOptionsDropdownId';
@ -7,13 +8,13 @@ import { ViewType } from '@/views/types/ViewType';
type RecordIndexOptionsDropdownProps = {
viewType: ViewType;
objectNameSingular: string;
objectMetadataItem: ObjectMetadataItem;
recordIndexId: string;
};
export const RecordIndexOptionsDropdown = ({
recordIndexId,
objectNameSingular,
objectMetadataItem,
viewType,
}: RecordIndexOptionsDropdownProps) => {
return (
@ -26,7 +27,7 @@ export const RecordIndexOptionsDropdown = ({
dropdownComponents={
<RecordIndexOptionsDropdownContent
viewType={viewType}
objectNameSingular={objectNameSingular}
objectMetadataItem={objectMetadataItem}
recordIndexId={recordIndexId}
/>
}

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

@ -14,10 +14,12 @@ import {
import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular';
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,
useExportTableData,
} from '@/object-record/record-index/options/hooks/useExportTableData';
useExportRecordData,
} from '@/action-menu/hooks/useExportRecordData';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
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';
@ -44,14 +46,14 @@ type RecordIndexOptionsMenu = 'fields' | 'hiddenFields';
type RecordIndexOptionsDropdownContentProps = {
recordIndexId: string;
objectNameSingular: string;
objectMetadataItem: ObjectMetadataItem;
viewType: ViewType;
};
export const RecordIndexOptionsDropdownContent = ({
viewType,
recordIndexId,
objectNameSingular,
objectMetadataItem,
}: RecordIndexOptionsDropdownContentProps) => {
const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
@ -68,7 +70,7 @@ export const RecordIndexOptionsDropdownContent = ({
};
const { objectNamePlural } = useObjectNamePluralFromSingular({
objectNameSingular: objectNameSingular,
objectNameSingular: objectMetadataItem.nameSingular,
});
const settingsUrl = getSettingsPagePath(SettingsPath.ObjectDetail, {
@ -92,7 +94,7 @@ export const RecordIndexOptionsDropdownContent = ({
const { handleToggleTrashColumnFilter, toggleSoftDeleteFilterState } =
useHandleToggleTrashColumnFilter({
objectNameSingular,
objectNameSingular: objectMetadataItem.nameSingular,
viewBarId: recordIndexId,
});
@ -104,7 +106,7 @@ export const RecordIndexOptionsDropdownContent = ({
isCompactModeActive,
setAndPersistIsCompactModeActive,
} = useRecordIndexOptionsForBoard({
objectNameSingular,
objectNameSingular: objectMetadataItem.nameSingular,
recordBoardId: recordIndexId,
viewBarId: recordIndexId,
});
@ -126,12 +128,12 @@ export const RecordIndexOptionsDropdownContent = ({
: handleColumnVisibilityChange;
const { openObjectRecordsSpreasheetImportDialog } =
useOpenObjectRecordsSpreasheetImportDialog(objectNameSingular);
useOpenObjectRecordsSpreasheetImportDialog(objectMetadataItem.nameSingular);
const { progress, download } = useExportTableData({
const { progress, download } = useExportRecordData({
delayMs: 100,
filename: `${objectNameSingular}.csv`,
objectNameSingular,
filename: `${objectMetadataItem.nameSingular}.csv`,
objectMetadataItem,
recordIndexId,
viewType,
});

62
packages/twenty-front/src/modules/object-record/record-index/options/hooks/__tests__/useTableData.test.tsx → packages/twenty-front/src/modules/object-record/record-index/options/hooks/__tests__/useRecordData.test.tsx
View File

@ -1,6 +1,6 @@
import { renderHook, waitFor } from '@testing-library/react';
import { act } from 'react';
import { percentage, sleep, useTableData } from '../useTableData';
import { percentage, sleep, useRecordData } from '../useRecordData';
import { PERSON_FRAGMENT_WITH_DEPTH_ZERO_RELATIONS } from '@/object-record/hooks/__mocks__/personFragments';
import { useRecordBoard } from '@/object-record/record-board/hooks/useRecordBoard';
@ -11,7 +11,7 @@ import { ViewType } from '@/views/types/ViewType';
import { MockedResponse } from '@apollo/client/testing';
import gql from 'graphql-tag';
import { useRecoilValue } from 'recoil';
import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';
import { getJestMetadataAndApolloMocksAndContextStoreWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndContextStoreWrapper';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
const defaultResponseData = {
@ -127,9 +127,16 @@ const mocks: MockedResponse[] = [
},
];
const WrapperWithResponse = getJestMetadataAndApolloMocksWrapper({
apolloMocks: mocks,
});
const WrapperWithResponse = getJestMetadataAndApolloMocksAndContextStoreWrapper(
{
apolloMocks: mocks,
contextStoreTargetedRecordsRule: {
mode: 'selection',
selectedRecordIds: [],
},
contextStoreCurrentObjectMetadataNameSingular: 'person',
},
);
const graphqlEmptyResponse = [
{
@ -145,28 +152,41 @@ const graphqlEmptyResponse = [
},
];
const WrapperWithEmptyResponse = getJestMetadataAndApolloMocksWrapper({
apolloMocks: graphqlEmptyResponse,
});
const WrapperWithEmptyResponse =
getJestMetadataAndApolloMocksAndContextStoreWrapper({
apolloMocks: graphqlEmptyResponse,
contextStoreTargetedRecordsRule: {
mode: 'selection',
selectedRecordIds: [],
},
contextStoreCurrentObjectMetadataNameSingular: 'person',
});
describe('useTableData', () => {
describe('useRecordData', () => {
const recordIndexId = 'people';
const objectNameSingular = 'person';
const objectMetadataItem = generatedMockObjectMetadataItems.find(
(item) => item.nameSingular === 'person',
);
if (!objectMetadataItem) {
throw new Error('Object metadata item not found');
}
describe('data fetching', () => {
it('should handle no records', async () => {
const callback = jest.fn();
const { result } = renderHook(
() =>
useTableData({
useRecordData({
recordIndexId,
objectNameSingular,
objectMetadataItem,
pageSize: 30,
callback,
delayMs: 0,
viewType: ViewType.Kanban,
}),
{ wrapper: WrapperWithEmptyResponse },
{
wrapper: WrapperWithEmptyResponse,
},
);
await act(async () => {
@ -182,9 +202,9 @@ describe('useTableData', () => {
const callback = jest.fn();
const { result } = renderHook(
() =>
useTableData({
useRecordData({
recordIndexId,
objectNameSingular,
objectMetadataItem,
callback,
pageSize: 30,
@ -211,9 +231,9 @@ describe('useTableData', () => {
recordIndexId,
);
return {
tableData: useTableData({
tableData: useRecordData({
recordIndexId,
objectNameSingular,
objectMetadataItem,
callback,
pageSize: 30,
maximumRequests: 100,
@ -223,7 +243,7 @@ describe('useTableData', () => {
useRecordBoardHook: useRecordBoard(recordIndexId),
kanbanFieldName: useRecoilValue(kanbanFieldNameState),
kanbanData: useRecordIndexOptionsForBoard({
objectNameSingular,
objectNameSingular: objectMetadataItem.nameSingular,
recordBoardId: recordIndexId,
viewBarId: recordIndexId,
}),
@ -304,9 +324,9 @@ describe('useTableData', () => {
recordIndexId,
);
return {
tableData: useTableData({
tableData: useRecordData({
recordIndexId,
objectNameSingular,
objectMetadataItem,
callback,
pageSize: 30,
maximumRequests: 100,
@ -316,7 +336,7 @@ describe('useTableData', () => {
setKanbanFieldName: useRecordBoard(recordIndexId),
kanbanFieldName: useRecoilValue(kanbanFieldNameState),
kanbanData: useRecordIndexOptionsForBoard({
objectNameSingular,
objectNameSingular: objectMetadataItem.nameSingular,
recordBoardId: recordIndexId,
viewBarId: recordIndexId,
}),

43
packages/twenty-front/src/modules/object-record/record-index/options/hooks/useDeleteTableData.ts
View File

@ -1,43 +0,0 @@
import { useFavorites } from '@/favorites/hooks/useFavorites';
import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords';
import { UseTableDataOptions } from '@/object-record/record-index/options/hooks/useTableData';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
type UseDeleteTableDataOptions = Pick<
UseTableDataOptions,
'objectNameSingular' | 'recordIndexId'
>;
export const useDeleteTableData = ({
objectNameSingular,
recordIndexId,
}: UseDeleteTableDataOptions) => {
const { resetTableRowSelection } = useRecordTable({
recordTableId: recordIndexId,
});
const { deleteManyRecords } = useDeleteManyRecords({
objectNameSingular,
});
const { favorites, deleteFavorite } = useFavorites();
const deleteRecords = async (recordIdsToDelete: string[]) => {
resetTableRowSelection();
for (const recordIdToDelete of recordIdsToDelete) {
const foundFavorite = favorites?.find(
(favorite) => favorite.recordId === recordIdToDelete,
);
if (foundFavorite !== undefined) {
deleteFavorite(foundFavorite.id);
}
}
await deleteManyRecords(recordIdsToDelete, {
delayInMsBetweenRequests: 50,
});
};
return { deleteTableData: deleteRecords };
};

85
packages/twenty-front/src/modules/object-record/record-index/options/hooks/useTableData.ts → packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordData.ts
View File

@ -1,18 +1,21 @@
import { useEffect, useMemo, useState } from 'react';
import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { useLazyFindManyRecords } from '@/object-record/hooks/useLazyFindManyRecords';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { isDefined } from '~/utils/isDefined';
import { contextStoreTargetedRecordsRuleState } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { useLazyFindManyRecords } from '@/object-record/hooks/useLazyFindManyRecords';
import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
import { useFindManyParams } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
import { EXPORT_TABLE_DATA_DEFAULT_PAGE_SIZE } from '@/object-record/record-index/options/constants/ExportTableDataDefaultPageSize';
import { useRecordIndexOptionsForBoard } from '@/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard';
import { ViewType } from '@/views/types/ViewType';
import { useFindManyParams } from '../../hooks/useLoadRecordIndexTable';
export const sleep = (ms: number) =>
new Promise((resolve) => setTimeout(resolve, ms));
@ -21,10 +24,10 @@ export const percentage = (part: number, whole: number): number => {
return Math.round((part / whole) * 100);
};
export type UseTableDataOptions = {
export type UseRecordDataOptions = {
delayMs: number;
maximumRequests?: number;
objectNameSingular: string;
objectMetadataItem: ObjectMetadataItem;
pageSize?: number;
recordIndexId: string;
callback: (
@ -40,15 +43,15 @@ type ExportProgress = {
displayType: 'percentage' | 'number';
};
export const useTableData = ({
export const useRecordData = ({
objectMetadataItem,
delayMs,
maximumRequests = 100,
objectNameSingular,
pageSize = EXPORT_TABLE_DATA_DEFAULT_PAGE_SIZE,
recordIndexId,
callback,
viewType = ViewType.Table,
}: UseTableDataOptions) => {
}: UseRecordDataOptions) => {
const [isDownloading, setIsDownloading] = useState(false);
const [inflight, setInflight] = useState(false);
const [pageCount, setPageCount] = useState(0);
@ -57,15 +60,10 @@ export const useTableData = ({
});
const [previousRecordCount, setPreviousRecordCount] = useState(0);
const {
visibleTableColumnsSelector,
selectedRowIdsSelector,
tableRowIdsState,
hasUserSelectedAllRowsState,
} = useRecordTableStates(recordIndexId);
const { visibleTableColumnsSelector } = useRecordTableStates(recordIndexId);
const { hiddenBoardFields } = useRecordIndexOptionsForBoard({
objectNameSingular,
objectNameSingular: objectMetadataItem.nameSingular,
recordBoardId: recordIndexId,
viewBarId: recordIndexId,
});
@ -76,61 +74,21 @@ export const useTableData = ({
(column) => column.metadata.fieldName === kanbanFieldMetadataName,
);
const columns = useRecoilValue(visibleTableColumnsSelector());
const selectedRowIds = useRecoilValue(selectedRowIdsSelector());
const hasUserSelectedAllRows = useRecoilValue(hasUserSelectedAllRowsState);
const tableRowIds = useRecoilValue(tableRowIdsState);
const contextStoreTargetedRecordsRule = useRecoilValue(
contextStoreTargetedRecordsRuleState,
);
// user has checked select all and then unselected some rows
const userHasUnselectedSomeRows =
hasUserSelectedAllRows && selectedRowIds.length < tableRowIds.length;
const hasSelectedRows =
selectedRowIds.length > 0 &&
!(hasUserSelectedAllRows && selectedRowIds.length === tableRowIds.length);
const unselectedRowIds = useMemo(
() =>
userHasUnselectedSomeRows
? tableRowIds.filter((id) => !selectedRowIds.includes(id))
: [],
[userHasUnselectedSomeRows, tableRowIds, selectedRowIds],
const queryFilter = computeContextStoreFilters(
contextStoreTargetedRecordsRule,
objectMetadataItem,
);
const findManyRecordsParams = useFindManyParams(
objectNameSingular,
objectMetadataItem.nameSingular,
recordIndexId,
);
const selectedFindManyParams = {
...findManyRecordsParams,
filter: {
...findManyRecordsParams.filter,
id: {
in: selectedRowIds,
},
},
};
const unselectedFindManyParams = {
...findManyRecordsParams,
filter: {
...findManyRecordsParams.filter,
not: {
id: {
in: unselectedRowIds,
},
},
},
};
const usedFindManyParams =
hasSelectedRows && !userHasUnselectedSomeRows
? selectedFindManyParams
: userHasUnselectedSomeRows
? unselectedFindManyParams
: findManyRecordsParams;
const {
findManyRecords,
totalCount,
@ -138,7 +96,8 @@ export const useTableData = ({
fetchMoreRecordsWithPagination,
loading,
} = useLazyFindManyRecords({
...usedFindManyParams,
...findManyRecordsParams,
filter: queryFilter,
limit: pageSize,
});

25
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx
View File

@ -1,41 +1,22 @@
import { Key } from 'ts-key-enum';
import { SOFT_FOCUS_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/SoftFocusClickOutsideListenerId';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
import {
ClickOutsideMode,
useListenClickOutsideByClassName,
} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useListenClickOutsideByClassName } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
type RecordTableInternalEffectProps = {
recordTableId: string;
tableBodyRef: React.RefObject<HTMLDivElement>;
};
export const RecordTableInternalEffect = ({
recordTableId,
tableBodyRef,
}: RecordTableInternalEffectProps) => {
const { leaveTableFocus, resetTableRowSelection, useMapKeyboardToSoftFocus } =
useRecordTable({ recordTableId });
useMapKeyboardToSoftFocus();
const { useListenClickOutside } = useClickOutsideListener(
SOFT_FOCUS_CLICK_OUTSIDE_LISTENER_ID,
);
useListenClickOutside({
refs: [tableBodyRef],
callback: () => {
leaveTableFocus();
},
mode: ClickOutsideMode.compareHTMLRef,
});
useScopedHotkeys(
[Key.Escape],
() => {
@ -46,9 +27,9 @@ export const RecordTableInternalEffect = ({
useListenClickOutsideByClassName({
classNames: ['entity-table-cell'],
excludeClassNames: ['bottom-bar', 'context-menu'],
excludeClassNames: ['bottom-bar', 'action-menu-dropdown'],
callback: () => {
resetTableRowSelection();
leaveTableFocus();
},
});

5
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
View File

@ -87,10 +87,7 @@ export const RecordTableWithWrappers = ({
onDragSelectionChange={setRowSelected}
/>
</StyledTableInternalContainer>
<RecordTableInternalEffect
recordTableId={recordTableId}
tableBodyRef={tableBodyRef}
/>
<RecordTableInternalEffect recordTableId={recordTableId} />
</StyledTableContainer>
</StyledTableWithHeader>
</RecordUpdateContext.Provider>

15
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts
View File

@ -6,21 +6,19 @@ import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotV
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
import { useCloseCurrentTableCellInEditMode } from './useCloseCurrentTableCellInEditMode';
import { useDisableSoftFocus } from './useDisableSoftFocus';
import { useSetHasUserSelectedAllRows } from './useSetAllRowSelectedState';
export const useLeaveTableFocus = (recordTableId?: string) => {
const disableSoftFocus = useDisableSoftFocus(recordTableId);
const closeCurrentCellInEditMode =
useCloseCurrentTableCellInEditMode(recordTableId);
const setHasUserSelectedAllRows = useSetHasUserSelectedAllRows(recordTableId);
const selectAllRows = useSetHasUserSelectedAllRows(recordTableId);
const { isSoftFocusActiveState } = useRecordTableStates(recordTableId);
const resetTableRowSelection = useResetTableRowSelection(recordTableId);
return useRecoilCallback(
({ snapshot }) =>
() => {
@ -33,6 +31,8 @@ export const useLeaveTableFocus = (recordTableId?: string) => {
.getLoadable(currentHotkeyScopeState)
.getValue();
resetTableRowSelection();
if (!isSoftFocusActive) {
return;
}
@ -43,15 +43,12 @@ export const useLeaveTableFocus = (recordTableId?: string) => {
closeCurrentCellInEditMode();
disableSoftFocus();
setHasUserSelectedAllRows(false);
selectAllRows(false);
},
[
closeCurrentCellInEditMode,
disableSoftFocus,
isSoftFocusActiveState,
selectAllRows,
setHasUserSelectedAllRows,
resetTableRowSelection,
],
);
};

5
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts
View File

@ -19,6 +19,7 @@ import { allRowsSelectedStatusComponentSelector } from '@/object-record/record-t
import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
import { numberOfTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector';
import { selectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsComponentSelector';
import { unselectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector';
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
import { softFocusPositionComponentState } from '@/object-record/record-table/states/softFocusPositionComponentState';
import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
@ -134,6 +135,10 @@ export const useRecordTableStates = (recordTableId?: string) => {
selectedRowIdsComponentSelector,
scopeId,
),
unselectedRowIdsSelector: extractComponentReadOnlySelector(
unselectedRowIdsComponentSelector,
scopeId,
),
visibleTableColumnsSelector: extractComponentReadOnlySelector(
visibleTableColumnsComponentSelector,
scopeId,

17
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts
View File

@ -46,17 +46,16 @@ export const useSetRecordTableData = ({
const recordIds = newRecords.map((record) => record.id);
if (!isDeeplyEqual(currentRowIds, recordIds)) {
set(tableRowIdsState, recordIds);
}
if (hasUserSelectedAllRows) {
for (const rowId of recordIds) {
set(isRowSelectedFamilyState(rowId), true);
if (hasUserSelectedAllRows) {
for (const rowId of recordIds) {
set(isRowSelectedFamilyState(rowId), true);
}
}
}
set(numberOfTableRowsState, totalCount ?? 0);
onEntityCountChange(totalCount);
set(tableRowIdsState, recordIds);
set(numberOfTableRowsState, totalCount ?? 0);
onEntityCountChange(totalCount);
}
},
[
numberOfTableRowsState,

2
packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts
View File

@ -42,6 +42,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
isRecordTableInitialLoadingState,
tableLastRowVisibleState,
selectedRowIdsSelector,
unselectedRowIdsSelector,
onToggleColumnFilterState,
onToggleColumnSortState,
pendingRecordIdState,
@ -223,6 +224,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
setSoftFocusPosition,
isSomeCellInEditModeState,
selectedRowIdsSelector,
unselectedRowIdsSelector,
setHasUserSelectedAllRows,
setOnToggleColumnFilter,
setOnToggleColumnSort,

11
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx
View File

@ -1,9 +1,7 @@
import styled from '@emotion/styled';
import { useCallback, useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd';
import { useSetCurrentRowSelected } from '@/object-record/record-table/record-table-row/hooks/useSetCurrentRowSelected';
import { Checkbox } from '@/ui/input/components/Checkbox';
@ -21,19 +19,16 @@ const StyledContainer = styled.div`
export const RecordTableCellCheckbox = () => {
const { isSelected } = useContext(RecordTableRowContext);
const { recordId } = useContext(RecordTableRowContext);
const { isRowSelectedFamilyState } = useRecordTableStates();
const { setCurrentRowSelected } = useSetCurrentRowSelected();
const currentRowSelected = useRecoilValue(isRowSelectedFamilyState(recordId));
const handleClick = useCallback(() => {
setCurrentRowSelected(!currentRowSelected);
}, [currentRowSelected, setCurrentRowSelected]);
setCurrentRowSelected(!isSelected);
}, [isSelected, setCurrentRowSelected]);
return (
<RecordTableTd isSelected={isSelected} hasRightBorder={false}>
<StyledContainer onClick={handleClick}>
<Checkbox hoverable checked={currentRowSelected} />
<Checkbox hoverable checked={isSelected} />
</StyledContainer>
</RecordTableTd>
);

1
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
View File

@ -37,7 +37,6 @@ export const RecordTableHeaderCheckboxColumn = () => {
setHasUserSelectedAllRows(true);
selectAllRows();
} else {
setHasUserSelectedAllRows(false);
resetTableRowSelection();
}
};

23
packages/twenty-front/src/modules/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector.ts Normal file
View File

@ -0,0 +1,23 @@
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector';
export const unselectedRowIdsComponentSelector =
createComponentReadOnlySelector<string[]>({
key: 'unselectedRowIdsComponentSelector',
get:
({ scopeId }) =>
({ get }) => {
const rowIds = get(tableRowIdsComponentState({ scopeId }));
return rowIds.filter(
(rowId) =>
get(
isRowSelectedComponentFamilyState({
scopeId,
familyKey: rowId,
}),
) === false,
);
},
});

10
packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx
View File

@ -1,11 +1,9 @@
import styled from '@emotion/styled';
import { RecordIndexOptionsDropdown } from '@/object-record/record-index/options/components/RecordIndexOptionsDropdown';
import { RecordTableWithWrappers } from '@/object-record/record-table/components/RecordTableWithWrappers';
import { SignInBackgroundMockContainerEffect } from '@/sign-in-background-mock/components/SignInBackgroundMockContainerEffect';
import { ViewBar } from '@/views/components/ViewBar';
import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
import { ViewType } from '@/views/types/ViewType';
const StyledContainer = styled.div`
display: flex;
@ -26,13 +24,7 @@ export const SignInBackgroundMockContainer = () => {
<ViewBar
viewBarId={viewBarId}
onCurrentViewChange={async () => {}}
optionsDropdownButton={
<RecordIndexOptionsDropdown
recordIndexId={recordIndexId}
objectNameSingular={objectNameSingular}
viewType={ViewType.Table}
/>
}
optionsDropdownButton={<></>}
/>
<SignInBackgroundMockContainerEffect
objectNamePlural={objectNamePlural}

4
packages/twenty-front/src/modules/views/utils/getQueryVariablesFromView.ts
View File

@ -3,7 +3,7 @@ import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { formatFieldMetadataItemsAsFilterDefinitions } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
import { formatFieldMetadataItemsAsSortDefinitions } from '@/object-metadata/utils/formatFieldMetadataItemsAsSortDefinitions';
import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter';
import { turnFiltersIntoQueryFilter } from '@/object-record/record-filter/utils/turnFiltersIntoQueryFilter';
import { View } from '@/views/types/View';
import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
@ -35,7 +35,7 @@ export const getQueryVariablesFromView = ({
fields: fieldMetadataItems,
});
const filter = turnObjectDropdownFilterIntoQueryFilter(
const filter = turnFiltersIntoQueryFilter(
mapViewFiltersToFilters(viewFilters, filterDefinitions),
objectMetadataItem?.fields ?? [],
);

4
packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx
View File

@ -5,6 +5,8 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
import { lastShowPageRecordIdState } from '@/object-record/record-field/states/lastShowPageRecordId';
import { RecordIndexContainer } from '@/object-record/record-index/components/RecordIndexContainer';
import { RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect } from '@/object-record/record-index/components/RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect';
import { RecordIndexContainerContextStoreObjectMetadataEffect } from '@/object-record/record-index/components/RecordIndexContainerContextStoreObjectMetadataEffect';
import { RecordIndexPageHeader } from '@/object-record/record-index/components/RecordIndexPageHeader';
import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
import { useHandleIndexIdentifierClick } from '@/object-record/record-index/hooks/useHandleIndexIdentifierClick';
@ -71,6 +73,8 @@ export const RecordIndexPage = () => {
<RecordIndexPageHeader />
<PageBody>
<StyledIndexContainer>
<RecordIndexContainerContextStoreObjectMetadataEffect />
<RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect />
<RecordIndexContainer />
</StyledIndexContainer>
</PageBody>

26
packages/twenty-front/src/pages/object-record/RecordShowPageContextStoreEffect.tsx
View File

@ -1,5 +1,6 @@
import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
import { contextStoreTargetedRecordsRuleState } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useEffect } from 'react';
import { useParams } from 'react-router-dom';
@ -10,8 +11,8 @@ export const RecordShowPageContextStoreEffect = ({
}: {
recordId: string;
}) => {
const setContextStoreTargetedRecordIds = useSetRecoilState(
contextStoreTargetedRecordIdsState,
const setContextStoreTargetedRecordsRule = useSetRecoilState(
contextStoreTargetedRecordsRuleState,
);
const setContextStoreCurrentObjectMetadataId = useSetRecoilState(
@ -24,19 +25,32 @@ export const RecordShowPageContextStoreEffect = ({
objectNameSingular: objectNameSingular ?? '',
});
const setContextStoreNumberOfSelectedRecords = useSetRecoilState(
contextStoreNumberOfSelectedRecordsState,
);
useEffect(() => {
setContextStoreTargetedRecordIds([recordId]);
setContextStoreTargetedRecordsRule({
mode: 'selection',
selectedRecordIds: [recordId],
});
setContextStoreCurrentObjectMetadataId(objectMetadataItem?.id);
setContextStoreNumberOfSelectedRecords(1);
return () => {
setContextStoreTargetedRecordIds([]);
setContextStoreTargetedRecordsRule({
mode: 'selection',
selectedRecordIds: [],
});
setContextStoreCurrentObjectMetadataId(null);
setContextStoreNumberOfSelectedRecords(0);
};
}, [
recordId,
setContextStoreTargetedRecordIds,
setContextStoreTargetedRecordsRule,
setContextStoreCurrentObjectMetadataId,
objectMetadataItem?.id,
setContextStoreNumberOfSelectedRecords,
]);
return null;

15
packages/twenty-front/src/pages/object-record/RecordShowPageEffect.tsx
View File

@ -1,15 +0,0 @@
import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
import { useEffect } from 'react';
import { useSetRecoilState } from 'recoil';
export const RecordShowPageEffect = ({ recordId }: { recordId: string }) => {
const setContextStoreTargetedRecordIds = useSetRecoilState(
contextStoreTargetedRecordIdsState,
);
useEffect(() => {
setContextStoreTargetedRecordIds([recordId]);
}, [recordId, setContextStoreTargetedRecordIds]);
return null;
};

49
packages/twenty-front/src/testing/jest/JestContextStoreSetter.tsx Normal file
View File

@ -0,0 +1,49 @@
import { ReactNode, useEffect, useState } from 'react';
import { useSetRecoilState } from 'recoil';
import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
import {
ContextStoreTargetedRecordsRule,
contextStoreTargetedRecordsRuleState,
} from '@/context-store/states/contextStoreTargetedRecordsRuleState';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
export const JestContextStoreSetter = ({
contextStoreTargetedRecordsRule = {
mode: 'selection',
selectedRecordIds: [],
},
contextStoreCurrentObjectMetadataNameSingular = '',
children,
}: {
contextStoreTargetedRecordsRule?: ContextStoreTargetedRecordsRule;
contextStoreCurrentObjectMetadataNameSingular?: string;
children: ReactNode;
}) => {
const setContextStoreTargetedRecordsRule = useSetRecoilState(
contextStoreTargetedRecordsRuleState,
);
const setContextStoreCurrentObjectMetadataId = useSetRecoilState(
contextStoreCurrentObjectMetadataIdState,
);
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular: contextStoreCurrentObjectMetadataNameSingular,
});
const contextStoreCurrentObjectMetadataId = objectMetadataItem.id;
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
setContextStoreTargetedRecordsRule(contextStoreTargetedRecordsRule);
setContextStoreCurrentObjectMetadataId(contextStoreCurrentObjectMetadataId);
setIsLoaded(true);
}, [
setContextStoreTargetedRecordsRule,
setContextStoreCurrentObjectMetadataId,
contextStoreTargetedRecordsRule,
contextStoreCurrentObjectMetadataId,
]);
return isLoaded ? <>{children}</> : null;
};

37
packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksAndContextStoreWrapper.tsx Normal file
View File

@ -0,0 +1,37 @@
import { ContextStoreTargetedRecordsRule } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
import { MockedResponse } from '@apollo/client/testing';
import { ReactNode } from 'react';
import { MutableSnapshot } from 'recoil';
import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';
import { JestContextStoreSetter } from '~/testing/jest/JestContextStoreSetter';
export const getJestMetadataAndApolloMocksAndContextStoreWrapper = ({
apolloMocks,
onInitializeRecoilSnapshot,
contextStoreTargetedRecordsRule,
contextStoreCurrentObjectMetadataNameSingular,
}: {
apolloMocks:
| readonly MockedResponse<Record<string, any>, Record<string, any>>[]
| undefined;
onInitializeRecoilSnapshot?: (snapshot: MutableSnapshot) => void;
contextStoreTargetedRecordsRule?: ContextStoreTargetedRecordsRule;
contextStoreCurrentObjectMetadataNameSingular?: string;
}) => {
const Wrapper = getJestMetadataAndApolloMocksWrapper({
apolloMocks,
onInitializeRecoilSnapshot,
});
return ({ children }: { children: ReactNode }) => (
<Wrapper>
<JestContextStoreSetter
contextStoreTargetedRecordsRule={contextStoreTargetedRecordsRule}
contextStoreCurrentObjectMetadataNameSingular={
contextStoreCurrentObjectMetadataNameSingular
}
>
{children}
</JestContextStoreSetter>
</Wrapper>
);
};