diff --git a/packages/twenty-front/jest.config.ts b/packages/twenty-front/jest.config.ts index 6ec83c4d5f6..95a088439bb 100644 --- a/packages/twenty-front/jest.config.ts +++ b/packages/twenty-front/jest.config.ts @@ -60,7 +60,7 @@ const jestConfig: JestConfigWithTsJest = { global: { statements: 55, lines: 54, - functions: 45, + functions: 44, }, }, collectCoverageFrom: ['/src/**/*.ts'], diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/multiple-records/components/DeleteMultipleRecordsAction.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/multiple-records/components/DeleteMultipleRecordsAction.tsx index a9b8a668f38..5865e37013f 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/multiple-records/components/DeleteMultipleRecordsAction.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/multiple-records/components/DeleteMultipleRecordsAction.tsx @@ -1,5 +1,4 @@ import { ActionModal } from '@/action-menu/actions/components/ActionModal'; -import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow'; import { contextStoreAnyFieldFilterValueComponentState } from '@/context-store/states/contextStoreAnyFieldFilterValueComponentState'; import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState'; import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState'; @@ -9,13 +8,14 @@ import { DEFAULT_QUERY_PAGE_SIZE } from '@/object-record/constants/DefaultQueryP import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords'; import { useLazyFetchAllRecords } from '@/object-record/hooks/useLazyFetchAllRecords'; import { useFilterValueDependencies } from '@/object-record/record-filter/hooks/useFilterValueDependencies'; -import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; -import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/utils/getRecordIndexIdFromObjectNamePluralAndViewId'; +import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore'; +import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; import { t } from '@lingui/core/macro'; export const DeleteMultipleRecordsAction = () => { - const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow(); + const { recordIndexId, objectMetadataItem } = + useRecordIndexIdFromCurrentContextStore(); const contextStoreCurrentViewId = useRecoilComponentValue( contextStoreCurrentViewIdComponentState, @@ -25,12 +25,7 @@ export const DeleteMultipleRecordsAction = () => { throw new Error('Current view ID is not defined'); } - const { resetTableRowSelection } = useRecordTable({ - recordTableId: getRecordIndexIdFromObjectNamePluralAndViewId( - objectMetadataItem.namePlural, - contextStoreCurrentViewId, - ), - }); + const { resetTableRowSelection } = useResetTableRowSelection(recordIndexId); const { deleteManyRecords } = useDeleteManyRecords({ objectNameSingular: objectMetadataItem.nameSingular, diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/multiple-records/components/DestroyMultipleRecordsAction.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/multiple-records/components/DestroyMultipleRecordsAction.tsx index 7f466c4142b..9af83d6d4c6 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/multiple-records/components/DestroyMultipleRecordsAction.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/multiple-records/components/DestroyMultipleRecordsAction.tsx @@ -1,5 +1,4 @@ import { ActionModal } from '@/action-menu/actions/components/ActionModal'; -import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow'; import { contextStoreAnyFieldFilterValueComponentState } from '@/context-store/states/contextStoreAnyFieldFilterValueComponentState'; import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState'; import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState'; @@ -10,12 +9,13 @@ import { type RecordGqlOperationFilter } from '@/object-record/graphql/types/Rec import { useDestroyManyRecords } from '@/object-record/hooks/useDestroyManyRecords'; import { useLazyFetchAllRecords } from '@/object-record/hooks/useLazyFetchAllRecords'; import { useFilterValueDependencies } from '@/object-record/record-filter/hooks/useFilterValueDependencies'; -import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; -import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/utils/getRecordIndexIdFromObjectNamePluralAndViewId'; +import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore'; +import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; export const DestroyMultipleRecordsAction = () => { - const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow(); + const { recordIndexId, objectMetadataItem } = + useRecordIndexIdFromCurrentContextStore(); const contextStoreCurrentViewId = useRecoilComponentValue( contextStoreCurrentViewIdComponentState, @@ -25,12 +25,7 @@ export const DestroyMultipleRecordsAction = () => { throw new Error('Current view ID is not defined'); } - const { resetTableRowSelection } = useRecordTable({ - recordTableId: getRecordIndexIdFromObjectNamePluralAndViewId( - objectMetadataItem.namePlural, - contextStoreCurrentViewId, - ), - }); + const { resetTableRowSelection } = useResetTableRowSelection(recordIndexId); const { destroyManyRecords } = useDestroyManyRecords({ objectNameSingular: objectMetadataItem.nameSingular, diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/multiple-records/components/RestoreMultipleRecordsAction.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/multiple-records/components/RestoreMultipleRecordsAction.tsx index c8d174bcd54..92030daeac4 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/multiple-records/components/RestoreMultipleRecordsAction.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/multiple-records/components/RestoreMultipleRecordsAction.tsx @@ -1,5 +1,4 @@ import { ActionModal } from '@/action-menu/actions/components/ActionModal'; -import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow'; import { contextStoreAnyFieldFilterValueComponentState } from '@/context-store/states/contextStoreAnyFieldFilterValueComponentState'; import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState'; import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState'; @@ -10,12 +9,13 @@ import { type RecordGqlOperationFilter } from '@/object-record/graphql/types/Rec import { useLazyFetchAllRecords } from '@/object-record/hooks/useLazyFetchAllRecords'; import { useRestoreManyRecords } from '@/object-record/hooks/useRestoreManyRecords'; import { useFilterValueDependencies } from '@/object-record/record-filter/hooks/useFilterValueDependencies'; -import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; -import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/utils/getRecordIndexIdFromObjectNamePluralAndViewId'; +import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore'; +import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; export const RestoreMultipleRecordsAction = () => { - const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow(); + const { recordIndexId, objectMetadataItem } = + useRecordIndexIdFromCurrentContextStore(); const contextStoreCurrentViewId = useRecoilComponentValue( contextStoreCurrentViewIdComponentState, @@ -25,12 +25,7 @@ export const RestoreMultipleRecordsAction = () => { throw new Error('Current view ID is not defined'); } - const { resetTableRowSelection } = useRecordTable({ - recordTableId: getRecordIndexIdFromObjectNamePluralAndViewId( - objectMetadataItem.namePlural, - contextStoreCurrentViewId, - ), - }); + const { resetTableRowSelection } = useResetTableRowSelection(recordIndexId); const { restoreManyRecords } = useRestoreManyRecords({ objectNameSingular: objectMetadataItem.nameSingular, diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/DeleteSingleRecordAction.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/DeleteSingleRecordAction.tsx index e828c5189b9..abead14304f 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/DeleteSingleRecordAction.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/DeleteSingleRecordAction.tsx @@ -1,21 +1,20 @@ import { ActionModal } from '@/action-menu/actions/components/ActionModal'; import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow'; -import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow'; import { useDeleteFavorite } from '@/favorites/hooks/useDeleteFavorite'; import { useFavorites } from '@/favorites/hooks/useFavorites'; import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord'; -import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; +import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore'; +import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; import { t } from '@lingui/core/macro'; import { isDefined } from 'twenty-shared/utils'; export const DeleteSingleRecordAction = () => { - const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow(); + const { recordIndexId, objectMetadataItem } = + useRecordIndexIdFromCurrentContextStore(); const recordId = useSelectedRecordIdOrThrow(); - const { resetTableRowSelection } = useRecordTable({ - recordTableId: objectMetadataItem.namePlural, - }); + const { resetTableRowSelection } = useResetTableRowSelection(recordIndexId); const { deleteOneRecord } = useDeleteOneRecord({ objectNameSingular: objectMetadataItem.nameSingular, diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/DestroySingleRecordAction.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/DestroySingleRecordAction.tsx index e7191a169f0..30c26df561c 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/DestroySingleRecordAction.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/DestroySingleRecordAction.tsx @@ -1,21 +1,20 @@ import { ActionModal } from '@/action-menu/actions/components/ActionModal'; import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow'; -import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow'; import { useDestroyOneRecord } from '@/object-record/hooks/useDestroyOneRecord'; -import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; +import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore'; +import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; import { AppPath } from '@/types/AppPath'; import { useNavigateApp } from '~/hooks/useNavigateApp'; export const DestroySingleRecordAction = () => { - const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow(); + const { recordIndexId, objectMetadataItem } = + useRecordIndexIdFromCurrentContextStore(); const recordId = useSelectedRecordIdOrThrow(); const navigateApp = useNavigateApp(); - const { resetTableRowSelection } = useRecordTable({ - recordTableId: objectMetadataItem.namePlural, - }); + const { resetTableRowSelection } = useResetTableRowSelection(recordIndexId); const { destroyOneRecord } = useDestroyOneRecord({ objectNameSingular: objectMetadataItem.nameSingular, diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/RestoreSingleRecordAction.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/RestoreSingleRecordAction.tsx index a0a22e81f50..ee8229f1ec4 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/RestoreSingleRecordAction.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/RestoreSingleRecordAction.tsx @@ -1,17 +1,16 @@ import { ActionModal } from '@/action-menu/actions/components/ActionModal'; import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow'; -import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow'; import { useRestoreManyRecords } from '@/object-record/hooks/useRestoreManyRecords'; -import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; +import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore'; +import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; export const RestoreSingleRecordAction = () => { - const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow(); + const { recordIndexId, objectMetadataItem } = + useRecordIndexIdFromCurrentContextStore(); const recordId = useSelectedRecordIdOrThrow(); - const { resetTableRowSelection } = useRecordTable({ - recordTableId: objectMetadataItem.namePlural, - }); + const { resetTableRowSelection } = useResetTableRowSelection(recordIndexId); const { restoreManyRecords } = useRestoreManyRecords({ objectNameSingular: objectMetadataItem.nameSingular, diff --git a/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx b/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx index 33eb047e148..f31e84d5ffa 100644 --- a/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx +++ b/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx @@ -78,7 +78,7 @@ export const PageChangeEffect = () => { contextStoreCurrentViewId || '', ); - const resetTableSelections = useResetTableRowSelection(recordIndexId); + const { resetTableRowSelection } = useResetTableRowSelection(recordIndexId); const { unfocusRecordTableRow } = useFocusedRecordTableRow(recordIndexId); const { deactivateRecordTableRow } = useActiveRecordTableRow(recordIndexId); @@ -124,7 +124,7 @@ export const PageChangeEffect = () => { if (isLeavingRecordIndexPage) { if (contextStoreCurrentViewType === ContextStoreViewType.Table) { - resetTableSelections(); + resetTableRowSelection(); unfocusRecordTableRow(); deactivateRecordTableRow(); } @@ -289,7 +289,7 @@ export const PageChangeEffect = () => { location, previousLocation, contextStoreCurrentViewType, - resetTableSelections, + resetTableRowSelection, unfocusRecordTableRow, deactivateRecordTableRow, resetRecordSelection, diff --git a/packages/twenty-front/src/modules/object-record/hooks/__tests__/useRecordIndexTableQuery.test.tsx b/packages/twenty-front/src/modules/object-record/hooks/__tests__/useRecordIndexTableQuery.test.tsx index 96bf1940620..9aafc0f98c2 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/__tests__/useRecordIndexTableQuery.test.tsx +++ b/packages/twenty-front/src/modules/object-record/hooks/__tests__/useRecordIndexTableQuery.test.tsx @@ -12,7 +12,6 @@ import { peopleQueryResult } from '~/testing/mock-data/people'; const recordTableId = 'people'; const objectNameSingular = 'person'; -const onColumnsChange = jest.fn(); const ObjectNamePluralSetter = ({ children }: { children: ReactNode }) => { return <>{children}; @@ -662,10 +661,7 @@ const Wrapper = ({ children }: { children: ReactNode }) => { - + {children} diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx index b9c9991f69e..6a9e06255ae 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx @@ -52,7 +52,7 @@ const meta: Meta = { value={{ instanceId }} > {} }} + value={{ instanceId }} > { - const fieldMetadataItems = [ - { id: 'id-1', name: 'field1' }, - { id: 'id-2', name: 'field2' }, - { id: 'id-3', name: 'field3' }, - { id: 'id-4', name: 'field4' }, - { id: 'id-5', name: 'field5' }, - ] as FieldMetadataItem[]; - - const columnDefinitionsWithMetadata = fieldMetadataItems.map( - (field, index) => ({ - fieldMetadataId: field.id, - isVisible: true, - position: index + 1, - metadata: { - fieldName: field.name, - }, - }), - ); - - const renderWithRecoil = () => - renderHook(() => useObjectOptionsForTable('instance-id', 'object-id'), { - wrapper: ({ children }) => ( - - { - set( - tableColumnsComponentState.atomFamily({ - instanceId: 'instance-id', - }), - columnDefinitionsWithMetadata as ColumnDefinition[], - ); - set(objectMetadataItemsState, [ - { - id: 'object-id', - nameSingular: 'Object', - namePlural: 'Objects', - fields: fieldMetadataItems, - readableFields: fieldMetadataItems, - updatableFields: fieldMetadataItems, - } as ObjectMetadataItem, - ]); - }} - > - {children} - - - ), - }); - - it('reorders table columns correctly', () => { - const { result } = renderWithRecoil(); - - const dropResult = { - source: { droppableId: 'droppable', index: 2 }, - destination: { droppableId: 'droppable', index: 3 }, - draggableId: 'field2', - type: 'TYPE', - mode: 'FLUID', - reason: 'DROP', - combine: null, - } as DropResult; - - const responderProvided = { - announce: jest.fn(), - } as ResponderProvided; - - act(() => { - result.current.handleReorderColumns(dropResult, responderProvided); - }); - - expect(result.current.visibleTableColumns).toEqual([ - { - fieldMetadataId: 'id-1', - isVisible: true, - metadata: { - fieldName: 'field1', - }, - position: 0, - }, - { - fieldMetadataId: 'id-3', - isVisible: true, - metadata: { - fieldName: 'field3', - }, - position: 1, - }, - { - fieldMetadataId: 'id-2', - isVisible: true, - metadata: { - fieldName: 'field2', - }, - position: 2, - }, - { - fieldMetadataId: 'id-4', - isVisible: true, - metadata: { - fieldName: 'field4', - }, - position: 3, - }, - { - fieldMetadataId: 'id-5', - isVisible: true, - metadata: { - fieldName: 'field5', - }, - position: 4, - }, - ]); - }); -}); diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/hooks/useObjectOptionsForTable.ts b/packages/twenty-front/src/modules/object-record/object-options-dropdown/hooks/useObjectOptionsForTable.ts index 3bd84c19efd..ba3f919cca4 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/hooks/useObjectOptionsForTable.ts +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/hooks/useObjectOptionsForTable.ts @@ -25,7 +25,7 @@ export const useObjectOptionsForTable = ( ); const handleReorderColumns: OnDragEndResponder = useCallback( - (result) => { + async (result) => { if ( !result.destination || result.destination.index === 1 || diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx index 1e00842ecd2..0785d54c15b 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx @@ -26,7 +26,6 @@ const meta: Meta = { {}, }} > { - const contextStoreCurrentViewId = useRecoilComponentValue( - contextStoreCurrentViewIdComponentState, - MAIN_CONTEXT_STORE_INSTANCE_ID, - ); - - const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow(); - - const recordIndexId = getRecordIndexIdFromObjectNamePluralAndViewId( - objectMetadataItem.namePlural, - contextStoreCurrentViewId || '', - ); + const { recordIndexId, objectMetadataItem } = + useRecordIndexIdFromCurrentContextStore(); const handleIndexRecordsLoaded = useRecoilCallback( ({ set }) => diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx index e87d23e909c..e8522d2b50d 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx @@ -3,8 +3,7 @@ import { useEffect } from 'react'; import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; -import { useHandleToggleColumnSort } from '@/object-record/record-index/hooks/useHandleToggleColumnSort'; -import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; +import { useSetAvailableTableColumns } from '@/object-record/record-table/hooks/useSetAvailableTableColumns'; import { viewFieldAggregateOperationState } from '@/object-record/record-table/record-table-footer/states/viewFieldAggregateOperationState'; import { convertAggregateOperationToExtendedAggregateOperation } from '@/object-record/utils/convertAggregateOperationToExtendedAggregateOperation'; import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly'; @@ -15,9 +14,8 @@ import { isDefined } from 'twenty-shared/utils'; export const RecordIndexTableContainerEffect = () => { const { recordIndexId, objectNameSingular } = useRecordIndexContextOrThrow(); - const { setAvailableTableColumns, setOnToggleColumnSort } = useRecordTable({ - recordTableId: recordIndexId, - }); + const { setAvailableTableColumns } = + useSetAvailableTableColumns(recordIndexId); const { objectMetadataItem } = useObjectMetadataItem({ objectNameSingular, @@ -30,19 +28,8 @@ export const RecordIndexTableContainerEffect = () => { setAvailableTableColumns(columnDefinitions); }, [columnDefinitions, setAvailableTableColumns]); - const handleToggleColumnSort = useHandleToggleColumnSort({ - objectNameSingular, - }); - const { currentView } = useGetCurrentViewOnly(); - useEffect(() => { - setOnToggleColumnSort( - () => (fieldMetadataId: string) => - handleToggleColumnSort(fieldMetadataId), - ); - }, [setOnToggleColumnSort, handleToggleColumnSort]); - const setViewFieldAggregateOperation = useRecoilCallback( ({ set, snapshot }) => (viewField: ViewField) => { diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/__tests__/useRecordIndexIdFromCurrentContextStore.test.tsx b/packages/twenty-front/src/modules/object-record/record-index/hooks/__tests__/useRecordIndexIdFromCurrentContextStore.test.tsx new file mode 100644 index 00000000000..276cc736ad2 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/__tests__/useRecordIndexIdFromCurrentContextStore.test.tsx @@ -0,0 +1,48 @@ +import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore'; +import { renderHook } from '@testing-library/react'; +import { JestObjectMetadataItemSetter } from '~/testing/jest/JestObjectMetadataItemSetter'; +import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper'; + +const testComponentInstanceId = 'test'; +const testCurrentViewId = 'view-id'; +const testObjectMetadataItemNameSingular = 'person'; +const testObjectMetadataItemNamePlural = 'people'; + +const Wrapper = getJestMetadataAndApolloMocksAndActionMenuWrapper({ + apolloMocks: [], + componentInstanceId: testComponentInstanceId, + contextStoreCurrentObjectMetadataNameSingular: + testObjectMetadataItemNameSingular, + contextStoreCurrentViewId: testCurrentViewId, +}); + +describe('useRecordIndexIdFromCurrentContextStore', () => { + it('works as expected with context', async () => { + const { result } = renderHook( + () => { + const { objectMetadataItem, recordIndexId } = + useRecordIndexIdFromCurrentContextStore(); + + return { + objectMetadataItem, + recordIndexId, + }; + }, + { + wrapper: ({ children }) => { + return ( + + + {children} + + + ); + }, + }, + ); + + expect(result.current.recordIndexId).toBe( + `${testObjectMetadataItemNamePlural}-${testCurrentViewId}`, + ); + }); +}); diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleColumnSort.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleColumnSort.ts index 388fc04c8a3..dfa47ad3647 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleColumnSort.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleColumnSort.ts @@ -1,21 +1,21 @@ import { useCallback } from 'react'; import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata'; -import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; +import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById'; import { useUpsertRecordSort } from '@/object-record/record-sort/hooks/useUpsertRecordSort'; import { type RecordSort } from '@/object-record/record-sort/types/RecordSort'; -import { v4 } from 'uuid'; import { isDefined } from 'twenty-shared/utils'; +import { v4 } from 'uuid'; type UseHandleToggleColumnSortProps = { - objectNameSingular: string; + objectMetadataItemId: string; }; export const useHandleToggleColumnSort = ({ - objectNameSingular, + objectMetadataItemId, }: UseHandleToggleColumnSortProps) => { - const { objectMetadataItem } = useObjectMetadataItem({ - objectNameSingular, + const { objectMetadataItem } = useObjectMetadataItemById({ + objectId: objectMetadataItemId, }); const { columnDefinitions } = diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore.ts new file mode 100644 index 00000000000..41c13ef7cd0 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore.ts @@ -0,0 +1,22 @@ +import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow'; +import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState'; +import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/utils/getRecordIndexIdFromObjectNamePluralAndViewId'; +import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; + +export const useRecordIndexIdFromCurrentContextStore = () => { + const contextStoreCurrentViewId = useRecoilComponentValue( + contextStoreCurrentViewIdComponentState, + ); + + const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow(); + + const recordIndexId = getRecordIndexIdFromObjectNamePluralAndViewId( + objectMetadataItem.namePlural, + contextStoreCurrentViewId || '', + ); + + return { + objectMetadataItem, + recordIndexId, + }; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx index 6b257a927b3..1ca11ab00c9 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx @@ -11,7 +11,7 @@ import { RecordTableScrollToFocusedCellEffect } from '@/object-record/record-tab import { RecordTableScrollToFocusedRowEffect } from '@/object-record/record-table/components/RecordTableScrollToFocusedRowEffect'; import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; -import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; +import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState'; import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; @@ -45,9 +45,7 @@ export const RecordTable = () => { recordTableId, ); - const { resetTableRowSelection, setRowSelected } = useRecordTable({ - recordTableId, - }); + const { resetTableRowSelection } = useResetTableRowSelection(recordTableId); const recordTableIsEmpty = !isRecordTableInitialLoading && allRecordIds.length === 0; @@ -84,7 +82,6 @@ export const RecordTable = () => { tableBodyRef={tableBodyRef} handleDragSelectionStart={handleDragSelectionStart} handleDragSelectionEnd={handleDragSelectionEnd} - setRowSelected={setRowSelected} hasRecordGroups={hasRecordGroups} recordTableId={recordTableId} /> diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableComponentInstance.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableComponentInstance.tsx index 0cdb3caaa4e..61ed0947467 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableComponentInstance.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableComponentInstance.tsx @@ -1,30 +1,22 @@ import { type ReactNode } from 'react'; -import { type FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { type ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; - -import { RecordTableComponentInstanceEffect } from '@/object-record/record-table/components/RecordTableComponentInstanceEffect'; import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; type RecordTableComponentInstanceProps = { children: ReactNode; recordTableId: string; - onColumnsChange: (columns: ColumnDefinition[]) => void; }; export const RecordTableComponentInstance = ({ children, recordTableId, - onColumnsChange, }: RecordTableComponentInstanceProps) => { return ( - {children} ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableComponentInstanceEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableComponentInstanceEffect.tsx deleted file mode 100644 index a4ba3700965..00000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableComponentInstanceEffect.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { useEffect } from 'react'; - -import { type FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; -import { type ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; - -type RecordTableComponentInstanceEffectProps = { - onColumnsChange: (columns: ColumnDefinition[]) => void; -}; - -export const RecordTableComponentInstanceEffect = ({ - onColumnsChange, -}: RecordTableComponentInstanceEffectProps) => { - const { setOnColumnsChange } = useRecordTable(); - - useEffect(() => { - setOnColumnsChange(() => onColumnsChange); - }, [onColumnsChange, setOnColumnsChange]); - - return <>; -}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableContent.tsx index 6239caeaa50..803c142a565 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableContent.tsx @@ -4,10 +4,13 @@ import { StyledTable } from '@/object-record/record-table/components/RecordTable import { RecordTableNoRecordGroupBody } from '@/object-record/record-table/record-table-body/components/RecordTableNoRecordGroupBody'; import { RecordTableRecordGroupsBody } from '@/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody'; import { RecordTableHeader } from '@/object-record/record-table/record-table-header/components/RecordTableHeader'; +import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState'; import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; import { RECORD_INDEX_DRAG_SELECT_BOUNDARY_CLASS } from '@/ui/utilities/drag-select/constants/RecordIndecDragSelectBoundaryClass'; +import { useRecoilComponentFamilyCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyCallbackState'; import styled from '@emotion/styled'; import { useRef, useState } from 'react'; +import { useRecoilCallback } from 'recoil'; const StyledTableWithPointerEvents = styled(StyledTable)<{ isDragging: boolean; @@ -28,7 +31,6 @@ export interface RecordTableContentProps { tableBodyRef: React.RefObject; handleDragSelectionStart: () => void; handleDragSelectionEnd: () => void; - setRowSelected: (rowId: string, selected: boolean) => void; hasRecordGroups: boolean; recordTableId: string; } @@ -37,7 +39,6 @@ export const RecordTableContent = ({ tableBodyRef, handleDragSelectionStart, handleDragSelectionEnd, - setRowSelected, hasRecordGroups, recordTableId, }: RecordTableContentProps) => { @@ -54,6 +55,17 @@ export const RecordTableContent = ({ handleDragSelectionEnd(); }; + const isRowSelectedCallbackFamilyState = + useRecoilComponentFamilyCallbackState(isRowSelectedComponentFamilyState); + + const handleDragSelectionChange = useRecoilCallback( + ({ set }) => + (rowId: string, selected: boolean) => { + set(isRowSelectedCallbackFamilyState(rowId), selected); + }, + [isRowSelectedCallbackFamilyState], + ); + return ( @@ -69,7 +81,7 @@ export const RecordTableContent = ({ { - const { selectAllRows, setHasUserSelectedAllRows } = useRecordTable({ - recordTableId, - }); + const { selectAllRows } = useSelectAllRows(recordTableId); const handleSelectAllRows = () => { - setHasUserSelectedAllRows(true); selectAllRows(); }; @@ -55,26 +47,10 @@ export const RecordTableWithWrappers = ({ }, }); - const { saveViewFields } = useSaveCurrentViewFields(); - const { deleteOneRecord } = useDeleteOneRecord({ objectNameSingular }); - const handleColumnsChange = useRecoilCallback( - () => (columns) => { - saveViewFields( - mapColumnDefinitionsToViewFields( - columns as ColumnDefinition[], - ), - ); - }, - [saveViewFields], - ); - return ( - + - {}} - > + {}, diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts index 1e19053dced..8655e73e6b2 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts @@ -14,9 +14,7 @@ export const useLeaveTableFocus = (recordTableId?: string) => { recordTableId, ); - const resetTableRowSelection = useResetTableRowSelection( - recordTableIdFromContext, - ); + const { resetTableRowSelection } = useResetTableRowSelection(); const setRecordTableHoverPosition = useSetRecoilComponentState( recordTableHoverPositionComponentState, diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts index 8c2bb52cd64..83f8fe36406 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts @@ -41,7 +41,7 @@ export const useResetTableRowSelection = (recordTableId?: string) => { const { closeDropdown } = useCloseDropdown(); - return useRecoilCallback( + const resetTableRowSelection = useRecoilCallback( ({ set, snapshot }) => () => { const allRecordIds = getSnapshotValue( @@ -72,4 +72,8 @@ export const useResetTableRowSelection = (recordTableId?: string) => { recordTableIdFromContext, ], ); + + return { + resetTableRowSelection, + }; }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts index 7315b3af392..996f45e8a3e 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSelectAllRows.ts @@ -2,16 +2,23 @@ import { useRecoilCallback } from 'recoil'; import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; +import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState'; import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState'; import { allRowsSelectedStatusComponentSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector'; import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState'; import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue'; export const useSelectAllRows = (recordTableId?: string) => { + const hasUserSelectedAllRowsCallbackState = useRecoilComponentCallbackState( + hasUserSelectedAllRowsComponentState, + recordTableId, + ); + const allRowsSelectedStatusSelector = useRecoilComponentCallbackState( allRowsSelectedStatusComponentSelector, recordTableId, ); + const isRowSelectedFamilyState = useRecoilComponentCallbackState( isRowSelectedComponentFamilyState, recordTableId, @@ -21,7 +28,7 @@ export const useSelectAllRows = (recordTableId?: string) => { recordTableId, ); - const resetTableRowSelection = useResetTableRowSelection(recordTableId); + const { resetTableRowSelection } = useResetTableRowSelection(recordTableId); const selectAllRows = useRecoilCallback( ({ set, snapshot }) => @@ -47,12 +54,15 @@ export const useSelectAllRows = (recordTableId?: string) => { set(isRowSelectedFamilyState(recordId), isSelected); } + + set(hasUserSelectedAllRowsCallbackState, true); }, [ allRowsSelectedStatusSelector, recordIndexAllRecordIdsSelector, resetTableRowSelection, isRowSelectedFamilyState, + hasUserSelectedAllRowsCallbackState, ], ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRowSelectedState.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRowSelectedState.ts deleted file mode 100644 index 1869fee0556..00000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRowSelectedState.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { useRecoilCallback } from 'recoil'; - -import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState'; -import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState'; - -export const useSetRowSelectedState = (recordTableId?: string) => { - const isRowSelectedFamilyState = useRecoilComponentCallbackState( - isRowSelectedComponentFamilyState, - recordTableId, - ); - - return useRecoilCallback( - ({ set }) => - (rowId: string, selected: boolean) => { - set(isRowSelectedFamilyState(rowId), selected); - }, - [isRowSelectedFamilyState], - ); -}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useHandleColumnsChange.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useHandleColumnsChange.ts new file mode 100644 index 00000000000..c1c8e794605 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useHandleColumnsChange.ts @@ -0,0 +1,29 @@ +import { type FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; +import { useSaveColumnsToView } from '@/object-record/record-table/hooks/useSaveColumnsToView'; +import { useSetTableColumns } from '@/object-record/record-table/hooks/useSetTableColumns'; +import { type ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; + +// TODO: see how we can better abstract this and set the correct interaction between view and table +// but for now it allows to have a cleaner API globally. +export const useHandleColumnsChange = () => { + const { saveColumnsToView } = useSaveColumnsToView(); + const { setTableColumns } = useSetTableColumns(); + + const handleColumnsChange = async ({ + columns, + recordTableId, + objectMetadataId, + }: { + columns: ColumnDefinition[]; + recordTableId: string; + objectMetadataId: string; + }) => { + setTableColumns(columns, recordTableId, objectMetadataId); + + await saveColumnsToView(columns); + }; + + return { + handleColumnsChange, + }; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts deleted file mode 100644 index f27631bafaa..00000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts +++ /dev/null @@ -1,109 +0,0 @@ -import { useRecoilCallback } from 'recoil'; - -import { type FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { useSetHasUserSelectedAllRows } from '@/object-record/record-table/hooks/internal/useSetAllRowSelectedState'; -import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue'; -import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; - -import { type ColumnDefinition } from '../types/ColumnDefinition'; - -import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState'; -import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; -import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState'; -import { onColumnsChangeComponentState } from '@/object-record/record-table/states/onColumnsChangeComponentState'; - -import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState'; -import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; -import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState'; -import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState'; -import { useLeaveTableFocus } from './internal/useLeaveTableFocus'; -import { useResetTableRowSelection } from './internal/useResetTableRowSelection'; -import { useSelectAllRows } from './internal/useSelectAllRows'; -import { useSetRowSelectedState } from './internal/useSetRowSelectedState'; -type useRecordTableProps = { - recordTableId?: string; -}; - -export const useRecordTable = (props?: useRecordTableProps) => { - const recordTableId = useAvailableComponentInstanceIdOrThrow( - RecordTableComponentInstanceContext, - props?.recordTableId, - ); - - const availableTableColumnsState = useRecoilComponentCallbackState( - availableTableColumnsComponentState, - recordTableId, - ); - - const setAvailableTableColumns = useRecoilCallback( - ({ snapshot, set }) => - (columns: ColumnDefinition[]) => { - const availableTableColumns = getSnapshotValue( - snapshot, - availableTableColumnsState, - ); - - if (isDeeplyEqual(availableTableColumns, columns)) { - return; - } - set(availableTableColumnsState, columns); - }, - [availableTableColumnsState], - ); - - const setOnColumnsChange = useSetRecoilComponentState( - onColumnsChangeComponentState, - recordTableId, - ); - - const setOnToggleColumnSort = useSetRecoilComponentState( - onToggleColumnSortComponentState, - recordTableId, - ); - - const setIsRecordTableInitialLoading = useSetRecoilComponentState( - isRecordTableInitialLoadingComponentState, - recordTableId, - ); - - const onColumnsChangeState = useRecoilComponentCallbackState( - onColumnsChangeComponentState, - recordTableId, - ); - - const onColumnsChange = useRecoilCallback( - ({ snapshot }) => - (columns: ColumnDefinition[]) => { - const onColumnsChange = getSnapshotValue( - snapshot, - onColumnsChangeState, - ); - - onColumnsChange?.(columns); - }, - [onColumnsChangeState], - ); - - const leaveTableFocus = useLeaveTableFocus(recordTableId); - - const setRowSelected = useSetRowSelectedState(recordTableId); - - const setHasUserSelectedAllRows = useSetHasUserSelectedAllRows(recordTableId); - - const resetTableRowSelection = useResetTableRowSelection(recordTableId); - - const { selectAllRows } = useSelectAllRows(recordTableId); - - return { - onColumnsChange, - setAvailableTableColumns, - leaveTableFocus, - setRowSelected, - resetTableRowSelection, - selectAllRows, - setOnColumnsChange, - setIsRecordTableInitialLoading, - setHasUserSelectedAllRows, - setOnToggleColumnSort, - }; -}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useSaveColumnsToView.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useSaveColumnsToView.ts new file mode 100644 index 00000000000..11e1fb75ba7 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useSaveColumnsToView.ts @@ -0,0 +1,22 @@ +import { type FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; +import { type ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; +import { useSaveCurrentViewFields } from '@/views/hooks/useSaveCurrentViewFields'; +import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinitionToViewField'; +import { useRecoilCallback } from 'recoil'; + +export const useSaveColumnsToView = () => { + const { saveViewFields } = useSaveCurrentViewFields(); + + const saveColumnsToView = useRecoilCallback( + () => async (columns) => { + await saveViewFields( + mapColumnDefinitionsToViewFields( + columns as ColumnDefinition[], + ), + ); + }, + [saveViewFields], + ); + + return { saveColumnsToView }; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useSetAvailableTableColumns.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useSetAvailableTableColumns.ts new file mode 100644 index 00000000000..f9cafb214ec --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useSetAvailableTableColumns.ts @@ -0,0 +1,43 @@ +import { type FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; +import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; +import { type ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; +import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; +import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState'; +import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue'; +import { useRecoilCallback } from 'recoil'; +import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; + +export const useSetAvailableTableColumns = ( + recordTableIdFromProps?: string, +) => { + const recordTableId = useAvailableComponentInstanceIdOrThrow( + RecordTableComponentInstanceContext, + recordTableIdFromProps, + ); + + const availableTableColumnsState = useRecoilComponentCallbackState( + availableTableColumnsComponentState, + recordTableId, + ); + + const setAvailableTableColumns = useRecoilCallback( + ({ snapshot, set }) => + (columns: ColumnDefinition[]) => { + const availableTableColumns = getSnapshotValue( + snapshot, + availableTableColumnsState, + ); + + if (isDeeplyEqual(availableTableColumns, columns)) { + return; + } + set(availableTableColumnsState, columns); + }, + [availableTableColumnsState], + ); + + return { + setAvailableTableColumns, + }; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts index 55a19c6145c..15b061fe20a 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useTableColumns.ts @@ -1,64 +1,44 @@ import { useCallback } from 'react'; import { type FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { useUnfocusRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useUnfocusRecordTableCell'; import { useMoveViewColumns } from '@/views/hooks/useMoveViewColumns'; -import { useSetTableColumns } from '@/object-record/record-table/hooks/useSetTableColumns'; +import { useHandleColumnsChange } from '@/object-record/record-table/hooks/useHandleColumnsChange'; import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState'; -import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector'; import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState'; -import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; import { type ColumnDefinition } from '../types/ColumnDefinition'; type useRecordTableProps = { - recordTableId?: string; + recordTableId: string; objectMetadataId: string; }; -export const useTableColumns = (props: useRecordTableProps) => { - const { onColumnsChange } = useRecordTable({ - recordTableId: props?.recordTableId, - }); - - const { setTableColumns } = useSetTableColumns(); - +export const useTableColumns = ({ + objectMetadataId, + recordTableId, +}: useRecordTableProps) => { const availableTableColumns = useRecoilComponentValue( availableTableColumnsComponentState, - props?.recordTableId, + recordTableId, ); const tableColumns = useRecoilComponentValue( tableColumnsComponentState, - props?.recordTableId, + recordTableId, ); const visibleTableColumns = useRecoilComponentValue( visibleTableColumnsComponentSelector, - props?.recordTableId, + recordTableId, ); const { handleColumnMove } = useMoveViewColumns(); - const { unfocusRecordTableCell } = useUnfocusRecordTableCell( - props?.recordTableId, - ); + const { unfocusRecordTableCell } = useUnfocusRecordTableCell(recordTableId); - const instanceId = useAvailableComponentInstanceIdOrThrow( - RecordTableComponentInstanceContext, - props?.recordTableId, - ); - - const handleColumnsChange = useCallback( - async (columns: ColumnDefinition[]) => { - setTableColumns(columns, instanceId, props.objectMetadataId); - - await onColumnsChange?.(columns); - }, - [setTableColumns, instanceId, onColumnsChange, props.objectMetadataId], - ); + const { handleColumnsChange } = useHandleColumnsChange(); const handleColumnVisibilityChange = useCallback( async ( @@ -88,7 +68,11 @@ export const useTableColumns = (props: useRecordTableProps) => { { ...newColumn, isVisible: true, position: lastPosition + 1 }, ]; - await handleColumnsChange(nextColumns); + await handleColumnsChange({ + columns: nextColumns, + objectMetadataId, + recordTableId, + }); } else { const nextColumns = visibleTableColumns.map((previousColumn) => previousColumn.fieldMetadataId === viewField.fieldMetadataId @@ -96,7 +80,11 @@ export const useTableColumns = (props: useRecordTableProps) => { : previousColumn, ); - await handleColumnsChange(nextColumns); + await handleColumnsChange({ + columns: nextColumns, + objectMetadataId, + recordTableId, + }); } }, [ @@ -104,6 +92,8 @@ export const useTableColumns = (props: useRecordTableProps) => { availableTableColumns, handleColumnsChange, visibleTableColumns, + objectMetadataId, + recordTableId, ], ); @@ -125,13 +115,19 @@ export const useTableColumns = (props: useRecordTableProps) => { visibleTableColumns, ); - await handleColumnsChange(columns); + await handleColumnsChange({ + columns, + objectMetadataId, + recordTableId, + }); }, [ unfocusRecordTableCell, visibleTableColumns, handleColumnMove, handleColumnsChange, + objectMetadataId, + recordTableId, ], ); @@ -142,9 +138,13 @@ export const useTableColumns = (props: useRecordTableProps) => { position: index, })); - await handleColumnsChange(updatedColumns); + await handleColumnsChange({ + columns: updatedColumns, + objectMetadataId, + recordTableId, + }); }, - [handleColumnsChange], + [handleColumnsChange, objectMetadataId, recordTableId], ); return { diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyEscapeHotkeyEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyEscapeHotkeyEffect.tsx index f4da11f906c..75f276d4c95 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyEscapeHotkeyEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyEscapeHotkeyEffect.tsx @@ -1,18 +1,13 @@ import { Key } from 'ts-key-enum'; -import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; -import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; +import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; import { isAtLeastOneTableRowSelectedSelector } from '@/object-record/record-table/record-table-row/states/isAtLeastOneTableRowSelectedSelector'; import { PageFocusId } from '@/types/PageFocusId'; import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; export const RecordTableBodyEscapeHotkeyEffect = () => { - const { recordTableId } = useRecordTableContextOrThrow(); - - const { resetTableRowSelection } = useRecordTable({ - recordTableId, - }); + const { resetTableRowSelection } = useResetTableRowSelection(); const isAtLeastOneRecordSelected = useRecoilComponentValue( isAtLeastOneTableRowSelectedSelector, diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellHotkeysEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellHotkeysEffect.tsx index dab37f13e3f..14ca0c8077c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellHotkeysEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellHotkeysEffect.tsx @@ -7,9 +7,8 @@ import { useIsFieldClearable } from '@/object-record/record-field/hooks/useIsFie import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFieldInputOnly'; import { useToggleEditOnlyInput } from '@/object-record/record-field/hooks/useToggleEditOnlyInput'; import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext'; -import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; +import { useSelectAllRows } from '@/object-record/record-table/hooks/internal/useSelectAllRows'; import { useFocusedRecordTableRow } from '@/object-record/record-table/hooks/useFocusedRecordTableRow'; -import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { useCurrentlyFocusedRecordTableCellFocusId } from '@/object-record/record-table/record-table-cell/hooks/useCurrentlyFocusedRecordTableCellFocusId'; import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell'; import { useListenToSidePanelOpening } from '@/ui/layout/right-drawer/hooks/useListenToSidePanelOpening'; @@ -68,10 +67,8 @@ export const RecordTableCellHotkeysEffect = () => { } }; - const { recordTableId } = useRecordTableContextOrThrow(); - const { restoreRecordTableRowFocusFromCellPosition } = - useFocusedRecordTableRow(recordTableId); + useFocusedRecordTableRow(); const handleEscape = () => { restoreRecordTableRowFocusFromCellPosition(); @@ -110,12 +107,9 @@ export const RecordTableCellHotkeysEffect = () => { }, }); - const { selectAllRows, setHasUserSelectedAllRows } = useRecordTable({ - recordTableId, - }); + const { selectAllRows } = useSelectAllRows(); const handleSelectAllRows = () => { - setHasUserSelectedAllRows(true); selectAllRows(); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveHoverToCurrentCell.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveHoverToCurrentCell.test.tsx index a9794ffc00d..2a1c0fc9442 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveHoverToCurrentCell.test.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveHoverToCurrentCell.test.tsx @@ -16,10 +16,7 @@ import { recordTableHoverPositionComponentState } from '@/object-record/record-t const Wrapper = ({ children }: { children: React.ReactNode }) => ( - + ( ); }} > - + {children} diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/internal/__tests__/useCloseRecordTableCellInGroup.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/internal/__tests__/useCloseRecordTableCellInGroup.test.tsx index 339f58151d4..a5248dd359a 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/internal/__tests__/useCloseRecordTableCellInGroup.test.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/internal/__tests__/useCloseRecordTableCellInGroup.test.tsx @@ -21,7 +21,6 @@ import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; import { generatedMockObjectMetadataItems } from '~/testing/utils/generatedMockObjectMetadataItems'; -const onColumnsChange = jest.fn(); const recordTableId = 'record-table-id'; const Wrapper = ({ children }: { children: React.ReactNode }) => ( @@ -30,10 +29,7 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => ( snapshot.set(objectMetadataItemsState, generatedMockObjectMetadataItems); }} > - + ( @@ -30,10 +29,7 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => ( snapshot.set(objectMetadataItemsState, generatedMockObjectMetadataItems); }} > - + { closeDropdownAndToggleScroll(); - onToggleColumnSort?.(column.fieldMetadataId); + handleToggleColumnSort(column.fieldMetadataId); }; const { openRecordFilterChipFromTableHeader } = diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx index bb21cc916d8..99393aac38e 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx @@ -114,7 +114,7 @@ type RecordTableHeaderCellProps = { export const RecordTableHeaderCell = ({ column, }: RecordTableHeaderCellProps) => { - const { objectMetadataItem, objectPermissions } = + const { objectMetadataItem, objectPermissions, recordTableId } = useRecordTableContextOrThrow(); const resizeFieldOffsetState = useRecoilComponentCallbackState( @@ -139,6 +139,7 @@ export const RecordTableHeaderCell = ({ const { handleColumnsChange } = useTableColumns({ objectMetadataId: objectMetadataItem.id, + recordTableId, }); const handleResizeHandlerStart = useCallback( @@ -186,7 +187,11 @@ export const RecordTableHeaderCell = ({ : column, ); - await handleColumnsChange(nextColumns); + await handleColumnsChange({ + columns: nextColumns, + objectMetadataId: objectMetadataItem.id, + recordTableId, + }); } }, [ @@ -196,6 +201,8 @@ export const RecordTableHeaderCell = ({ setResizedFieldKey, tableColumns, handleColumnsChange, + objectMetadataItem, + recordTableId, ], ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx index 365d9b9d513..0558d140ba1 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx @@ -2,7 +2,8 @@ import styled from '@emotion/styled'; import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; -import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; +import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; +import { useSelectAllRows } from '@/object-record/record-table/hooks/internal/useSelectAllRows'; import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState'; import { isRecordTableRowActiveComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowActiveComponentFamilyState'; import { isRecordTableRowFocusedComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowFocusedComponentFamilyState'; @@ -37,8 +38,11 @@ export const RecordTableHeaderCheckboxColumn = () => { const allRowsSelectedStatus = useRecoilComponentValue( allRowsSelectedStatusComponentSelector, ); - const { selectAllRows, resetTableRowSelection, setHasUserSelectedAllRows } = - useRecordTable(); + + const { selectAllRows } = useSelectAllRows(); + + const { resetTableRowSelection } = useResetTableRowSelection(); + const checked = allRowsSelectedStatus === 'all' || allRowsSelectedStatus === 'some'; const indeterminate = allRowsSelectedStatus === 'some'; @@ -60,10 +64,8 @@ export const RecordTableHeaderCheckboxColumn = () => { const onChange = () => { if (checked) { - setHasUserSelectedAllRows(false); resetTableRowSelection(); } else { - setHasUserSelectedAllRows(true); selectAllRows(); } }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx index f34c32eb0fa..2a8ff997fb3 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx @@ -21,7 +21,7 @@ import { getSettingsPath } from '~/utils/navigation/getSettingsPath'; export const RecordTableHeaderPlusButtonContent = () => { const { t } = useLingui(); - const { objectMetadataItem } = useRecordTableContextOrThrow(); + const { objectMetadataItem, recordTableId } = useRecordTableContextOrThrow(); const { closeDropdown } = useCloseDropdown(); @@ -32,6 +32,7 @@ export const RecordTableHeaderPlusButtonContent = () => { const { getIcon } = useIcons(); const { handleColumnVisibilityChange } = useTableColumns({ objectMetadataId: objectMetadataItem.id, + recordTableId, }); const handleAddColumn = useCallback( diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useRecordTableRowHotkeys.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useRecordTableRowHotkeys.ts index 52d6fc4c068..a5a3e252b98 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useRecordTableRowHotkeys.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useRecordTableRowHotkeys.ts @@ -1,9 +1,10 @@ import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext'; +import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; +import { useSelectAllRows } from '@/object-record/record-table/hooks/internal/useSelectAllRows'; import { useActiveRecordTableRow } from '@/object-record/record-table/hooks/useActiveRecordTableRow'; import { useFocusedRecordTableRow } from '@/object-record/record-table/hooks/useFocusedRecordTableRow'; -import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { useFocusRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useFocusRecordTableCell'; import { getRecordTableCellFocusId } from '@/object-record/record-table/record-table-cell/utils/getRecordTableCellFocusId'; import { useSetCurrentRowSelected } from '@/object-record/record-table/record-table-row/hooks/useSetCurrentRowSelected'; @@ -81,9 +82,7 @@ export const useRecordTableRowHotkeys = (focusId: string) => { }); }; - const { resetTableRowSelection } = useRecordTable({ - recordTableId, - }); + const { resetTableRowSelection } = useResetTableRowSelection(recordTableId); const { unfocusRecordTableRow } = useFocusedRecordTableRow(recordTableId); @@ -133,12 +132,9 @@ export const useRecordTableRowHotkeys = (focusId: string) => { dependencies: [handleEscape], }); - const { selectAllRows, setHasUserSelectedAllRows } = useRecordTable({ - recordTableId, - }); + const { selectAllRows } = useSelectAllRows(); const handleSelectAllRows = () => { - setHasUserSelectedAllRows(true); selectAllRows(); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/context/RecordTableComponentInstanceContext.ts b/packages/twenty-front/src/modules/object-record/record-table/states/context/RecordTableComponentInstanceContext.ts index 09553c116cd..0c54d952b01 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/context/RecordTableComponentInstanceContext.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/context/RecordTableComponentInstanceContext.ts @@ -1,12 +1,4 @@ -import { type FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; - -import { type ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext'; -import { type ColumnDefinition } from '../../types/ColumnDefinition'; - -type RecordTableComponentInstanceContextProps = ComponentStateKey & { - onColumnsChange: (columns: ColumnDefinition[]) => void; -}; export const RecordTableComponentInstanceContext = - createComponentInstanceContext(); + createComponentInstanceContext(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeComponentState.ts deleted file mode 100644 index c0f75a102ee..00000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeComponentState.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { type FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; -import { type ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; - -export const onColumnsChangeComponentState = createComponentState< - ((columns: ColumnDefinition[]) => void) | undefined ->({ - key: 'onColumnsChangeComponentState', - defaultValue: undefined, - componentInstanceContext: RecordTableComponentInstanceContext, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/onToggleColumnSortComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/onToggleColumnSortComponentState.ts deleted file mode 100644 index c24c754e032..00000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/onToggleColumnSortComponentState.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; - -export const onToggleColumnSortComponentState = createComponentState< - ((fieldMetadataId: string) => void) | undefined ->({ - key: 'onToggleColumnSortComponentState', - defaultValue: undefined, - componentInstanceContext: RecordTableComponentInstanceContext, -}); diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx index 34cc25889c2..786b5b3edb2 100644 --- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx +++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx @@ -4,7 +4,7 @@ import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainCo import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural'; -import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; +import { useSetAvailableTableColumns } from '@/object-record/record-table/hooks/useSetAvailableTableColumns'; import { useSetTableColumns } from '@/object-record/record-table/hooks/useSetTableColumns'; import { SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS } from '@/sign-in-background-mock/constants/SignInBackgroundMockColumnDefinitions'; import { SIGN_IN_BACKGROUND_MOCK_VIEW_FIELDS } from '@/sign-in-background-mock/constants/SignInBackgroundMockViewFields'; @@ -31,9 +31,8 @@ export const SignInBackgroundMockContainerEffect = ({ MAIN_CONTEXT_STORE_INSTANCE_ID, ); - const { setAvailableTableColumns } = useRecordTable({ - recordTableId, - }); + const { setAvailableTableColumns } = + useSetAvailableTableColumns(recordTableId); const { setTableColumns } = useSetTableColumns(); diff --git a/packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx b/packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx index 3b2c33fa04d..3951c4c3dfb 100644 --- a/packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx +++ b/packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx @@ -121,7 +121,6 @@ const meta: Meta = { {}, }} > { return ( {} }} + value={{ instanceId: recordIndexId }} >