diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmpty.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmpty.tsx index 16261df65be..06358b144d2 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmpty.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmpty.tsx @@ -14,6 +14,7 @@ import { recordTableWidthComponentState } from '@/object-record/record-table/sta import { resizedFieldMetadataIdComponentState } from '@/object-record/record-table/states/resizedFieldMetadataIdComponentState'; import { resizeFieldOffsetComponentState } from '@/object-record/record-table/states/resizeFieldOffsetComponentState'; import { computeVisibleRecordFieldsWidthOnTable } from '@/object-record/record-table/utils/computeVisibleRecordFieldsWidthOnTable'; +import { RecordTableVirtualizedDataChangedEffect } from '@/object-record/record-table/virtualization/components/RecordTableVirtualizedDataChangedEffect'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; import styled from '@emotion/styled'; import { isDefined } from 'twenty-shared/utils'; @@ -94,6 +95,7 @@ export const RecordTableEmpty = ({ tableBodyRef }: RecordTableEmptyProps) => { + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableRowVirtualizedDebugRowHelper.tsx b/packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableRowVirtualizedDebugRowHelper.tsx index c0b6753546a..bcae13a63cf 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableRowVirtualizedDebugRowHelper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableRowVirtualizedDebugRowHelper.tsx @@ -11,17 +11,30 @@ import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; import { isDefined } from 'twenty-shared/utils'; +const StyledDebugRow = styled.div` + position: absolute; + left: 250px; + top: ${({ theme }) => theme.spacing(1.25)}; + z-index: 20; + color: ${({ theme }) => theme.font.color.primary}; + background-color: ${({ theme }) => theme.adaptiveColors.gray1}; + border: 1px solid ${({ theme }) => theme.adaptiveColors.blue4}; + padding: ${({ theme }) => theme.spacing(0.5)}; + display: flex; + max-height: ${({ theme }) => theme.spacing(4)}; + + overflow: hidden; +`; + const StyledDebugColumn = styled.div<{ width: number }>` - height: 25px; - max-height: 25px; min-width: ${({ width }) => width}px; max-width: ${({ width }) => width}px; - overflow: scroll; + overflow: hidden; display: flex; text-wrap-mode: nowrap; - padding-right: 2px; - padding-left: 2px; + padding-right: ${({ theme }) => theme.spacing(0.5)}; + padding-left: ${({ theme }) => theme.spacing(0.5)}; `; type RecordTableRowVirtualizedDebugRowHelperProps = { @@ -62,21 +75,7 @@ export const RecordTableRowVirtualizedDebugRowHelper = ({ const position = record?.position; return ( -
+ virtual :{virtualIndex} real :{realIndex} pos :{position} @@ -91,6 +90,6 @@ export const RecordTableRowVirtualizedDebugRowHelper = ({ id: {recordId} -
+ ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/virtualization/hooks/useResetNumberOfRecordsToVirtualize.ts b/packages/twenty-front/src/modules/object-record/record-table/virtualization/hooks/useResetNumberOfRecordsToVirtualize.ts deleted file mode 100644 index d31559ea632..00000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/virtualization/hooks/useResetNumberOfRecordsToVirtualize.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { NUMBER_OF_VIRTUALIZED_ROWS } from '@/object-record/record-table/virtualization/constants/NumberOfVirtualizedRows'; -import { totalNumberOfRecordsToVirtualizeComponentState } from '@/object-record/record-table/virtualization/states/totalNumberOfRecordsToVirtualizeComponentState'; -import { type ObjectRecord } from '@/object-record/types/ObjectRecord'; -import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState'; -import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue'; -import { useRecoilCallback } from 'recoil'; - -export const useResetNumberOfRecordsToVirtualize = () => { - const totalNumberOfRecordsToVirtualizeCallbackState = - useRecoilComponentCallbackState( - totalNumberOfRecordsToVirtualizeComponentState, - ); - - const resetNumberOfRecordsToVirtualize = useRecoilCallback( - ({ snapshot, set }) => - ({ - records, - totalCount, - }: { - records: ObjectRecord[]; - totalCount: number; - }) => { - const totalNumberOfRecordsToVirtualize = getSnapshotValue( - snapshot, - totalNumberOfRecordsToVirtualizeCallbackState, - ); - - if (totalCount > NUMBER_OF_VIRTUALIZED_ROWS) { - if (totalNumberOfRecordsToVirtualize !== totalCount) { - set(totalNumberOfRecordsToVirtualizeCallbackState, totalCount); - } - } else { - if (totalNumberOfRecordsToVirtualize !== records.length) { - set(totalNumberOfRecordsToVirtualizeCallbackState, records.length); - } - } - }, - [totalNumberOfRecordsToVirtualizeCallbackState], - ); - - return { - resetNumberOfRecordsToVirtualize, - }; -}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/virtualization/hooks/useTriggerInitialRecordTableDataLoad.ts b/packages/twenty-front/src/modules/object-record/record-table/virtualization/hooks/useTriggerInitialRecordTableDataLoad.ts index f0e3d72d720..d4aaf6f704f 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/virtualization/hooks/useTriggerInitialRecordTableDataLoad.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/virtualization/hooks/useTriggerInitialRecordTableDataLoad.ts @@ -11,7 +11,7 @@ import { isRecordTableScrolledVerticallyComponentState } from '@/object-record/r import { updateRecordTableCSSVariable } from '@/object-record/record-table/utils/updateRecordTableCSSVariable'; import { useLoadRecordsToVirtualRows } from '@/object-record/record-table/virtualization/hooks/useLoadRecordsToVirtualRows'; import { useReapplyRowSelection } from '@/object-record/record-table/virtualization/hooks/useReapplyRowSelection'; -import { useResetNumberOfRecordsToVirtualize } from '@/object-record/record-table/virtualization/hooks/useResetNumberOfRecordsToVirtualize'; + import { useResetTableFocuses } from '@/object-record/record-table/virtualization/hooks/useResetTableFocuses'; import { useResetVirtualizedRowTreadmill } from '@/object-record/record-table/virtualization/hooks/useResetVirtualizedRowTreadmill'; import { dataLoadingStatusByRealIndexComponentFamilyState } from '@/object-record/record-table/virtualization/states/dataLoadingStatusByRealIndexComponentFamilyState'; @@ -21,6 +21,7 @@ import { lastRealIndexSetComponentState } from '@/object-record/record-table/vir import { lastScrollPositionComponentState } from '@/object-record/record-table/virtualization/states/lastScrollPositionComponentState'; import { recordIdByRealIndexComponentFamilyState } from '@/object-record/record-table/virtualization/states/recordIdByRealIndexComponentFamilyState'; import { scrollAtRealIndexComponentState } from '@/object-record/record-table/virtualization/states/scrollAtRealIndexComponentState'; +import { totalNumberOfRecordsToVirtualizeComponentState } from '@/object-record/record-table/virtualization/states/totalNumberOfRecordsToVirtualizeComponentState'; import { type ObjectRecord } from '@/object-record/types/ObjectRecord'; import { SIGN_IN_BACKGROUND_MOCK_COMPANIES } from '@/sign-in-background-mock/constants/SignInBackgroundMockCompanies'; import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal'; @@ -88,8 +89,6 @@ export const useTriggerInitialRecordTableDataLoad = () => { const { scrollTableToPosition } = useScrollTableToPosition(); const { resetVirtualizedRowTreadmill } = useResetVirtualizedRowTreadmill(); - const { resetNumberOfRecordsToVirtualize } = - useResetNumberOfRecordsToVirtualize(); const { resetTableFocuses } = useResetTableFocuses(recordTableId); const { upsertRecordsInStore } = useUpsertRecordsInStore(); @@ -98,6 +97,11 @@ export const useTriggerInitialRecordTableDataLoad = () => { const { reapplyRowSelection } = useReapplyRowSelection(); + const totalNumberOfRecordsToVirtualizeCallbackState = + useRecoilComponentCallbackState( + totalNumberOfRecordsToVirtualizeComponentState, + ); + const triggerInitialRecordTableDataLoad = useRecoilCallback( ({ snapshot, set }) => async () => { @@ -153,18 +157,17 @@ export const useTriggerInitialRecordTableDataLoad = () => { null, ); } + const { records: findManyRecords, totalCount: findManyTotalCount } = await findManyRecordsLazy(); + records = findManyRecords; totalCount = findManyTotalCount; } - if (isDefined(records)) { - resetNumberOfRecordsToVirtualize({ - records, - totalCount, - }); + set(totalNumberOfRecordsToVirtualizeCallbackState, totalCount); + if (isDefined(records)) { upsertRecordsInStore(records); loadRecordsToVirtualRows({ @@ -209,7 +212,7 @@ export const useTriggerInitialRecordTableDataLoad = () => { findManyRecordsLazy, dataLoadingStatusByRealIndexCallbackState, recordIdByRealIndexCallbackState, - resetNumberOfRecordsToVirtualize, + totalNumberOfRecordsToVirtualizeCallbackState, upsertRecordsInStore, loadRecordsToVirtualRows, reapplyRowSelection, diff --git a/packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx b/packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx index e88a6e559ef..b4a2197d976 100644 --- a/packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx +++ b/packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx @@ -1,8 +1,9 @@ import { type Decorator } from '@storybook/react'; -import { useRecoilValue } from 'recoil'; +import { useRecoilValue, useSetRecoilState } from 'recoil'; import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId'; +import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState'; import { labelIdentifierFieldMetadataItemSelector } from '@/object-metadata/states/labelIdentifierFieldMetadataItemSelector'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; @@ -25,6 +26,8 @@ import { getObjectPermissionsFromMapByObjectMetadataId } from '@/settings/roles/ import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState'; import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext'; +import { coreViewsState } from '@/views/states/coreViewState'; +import { type CoreViewWithRelations } from '@/views/types/CoreViewWithRelations'; import { type View } from '@/views/types/View'; import { mapViewFieldToRecordField } from '@/views/utils/mapViewFieldToRecordField'; import { useEffect, useMemo } from 'react'; @@ -44,6 +47,12 @@ const InternalTableStateLoaderEffect = ({ currentRecordFieldsComponentState, ); + const setContextStoreCurrentViewId = useSetRecoilComponentState( + contextStoreCurrentViewIdComponentState, + ); + + const setCoreViews = useSetRecoilState(coreViewsState); + const setRecordTableData = useSetRecordTableData({ recordTableId, }); @@ -67,12 +76,18 @@ const InternalTableStateLoaderEffect = ({ .filter(isDefined); setCurrentRecordFields(recordFields); + + setCoreViews([view as unknown as CoreViewWithRelations]); + + setContextStoreCurrentViewId(view.id); }, [ loadRecordIndexStates, objectMetadataItem, setRecordTableData, view, setCurrentRecordFields, + setContextStoreCurrentViewId, + setCoreViews, ]); return null; diff --git a/packages/twenty-front/src/testing/graphqlMocks.ts b/packages/twenty-front/src/testing/graphqlMocks.ts index b86c5889e0a..be5148eaded 100644 --- a/packages/twenty-front/src/testing/graphqlMocks.ts +++ b/packages/twenty-front/src/testing/graphqlMocks.ts @@ -22,8 +22,10 @@ import { mockedViewsData } from '~/testing/mock-data/views'; import { mockWorkspaceMembers } from '~/testing/mock-data/workspace-members'; import { GET_PUBLIC_WORKSPACE_DATA_BY_DOMAIN } from '@/auth/graphql/queries/getPublicWorkspaceDataByDomain'; +import { LIST_PLANS } from '@/billing/graphql/queries/listPlans'; import { GET_ROLES } from '@/settings/roles/graphql/queries/getRolesQuery'; import { isDefined } from 'twenty-shared/utils'; +import { mockBillingPlans } from '~/testing/mock-data/billing-plans'; import { mockedStandardObjectMetadataQueryResult } from '~/testing/mock-data/generated/mock-metadata-query-result'; import { getRolesMock } from '~/testing/mock-data/roles'; import { mockedTasks } from '~/testing/mock-data/tasks'; @@ -35,8 +37,6 @@ import { import { oneSucceededWorkflowRunQueryResult } from '~/testing/mock-data/workflow-run'; import { mockedRemoteServers } from './mock-data/remote-servers'; import { mockedViewFieldsData } from './mock-data/view-fields'; -import { LIST_PLANS } from '@/billing/graphql/queries/listPlans'; -import { mockBillingPlans } from '~/testing/mock-data/billing-plans'; const peopleMock = getPeopleRecordConnectionMock(); const companiesMock = getCompaniesRecordConnectionMock(); @@ -384,6 +384,7 @@ export const graphqlMocks = { startCursor: null, endCursor: null, }, + totalCount: mockedData.length, }, }, });