diff --git a/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx b/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx index e68208d720..11d7a9ceae 100644 --- a/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx +++ b/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx @@ -3,7 +3,6 @@ import { metadataStoreState } from '@/metadata-store/states/metadataStoreState'; import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage'; import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView'; import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector'; -import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal'; import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { viewsSelector } from '@/views/states/selectors/viewsSelector'; @@ -38,8 +37,6 @@ const getViewId = ( return undefined; }; -const SIGN_IN_BACKGROUND_OBJECT_NAME_PLURAL = 'companies'; - export const MainContextStoreProvider = () => { const location = useLocation(); const isRecordIndexPage = isMatchingLocation( @@ -49,15 +46,10 @@ export const MainContextStoreProvider = () => { const isRecordShowPage = isMatchingLocation(location, AppPath.RecordShowPage); const isStandalonePage = isMatchingLocation(location, AppPath.PageLayoutPage); const isSettingsPage = useIsSettingsPage(); - const showAuthModal = useShowAuthModal(); - const objectNamePluralFromParams = useParams().objectNamePlural ?? ''; + const objectNamePlural = useParams().objectNamePlural ?? ''; const objectNameSingular = useParams().objectNameSingular ?? ''; - const objectNamePlural = showAuthModal - ? SIGN_IN_BACKGROUND_OBJECT_NAME_PLURAL - : objectNamePluralFromParams; - const [searchParams] = useSearchParams(); const viewIdQueryParamRaw = searchParams.get('viewId'); @@ -120,8 +112,7 @@ export const MainContextStoreProvider = () => { (isRecordIndexPage || isRecordShowPage || isStandalonePage || - isSettingsPage || - showAuthModal) && + isSettingsPage) && metadataStore.status === 'up-to-date'; if (!shouldComputeContextStore) { diff --git a/packages/twenty-front/src/modules/metadata-store/effect-components/IsMinimalMetadataReadyEffect.tsx b/packages/twenty-front/src/modules/metadata-store/effect-components/IsMinimalMetadataReadyEffect.tsx index 10bd5b0183..165c3c1413 100644 --- a/packages/twenty-front/src/modules/metadata-store/effect-components/IsMinimalMetadataReadyEffect.tsx +++ b/packages/twenty-front/src/modules/metadata-store/effect-components/IsMinimalMetadataReadyEffect.tsx @@ -28,21 +28,24 @@ export const IsMinimalMetadataReadyEffect = () => { ); useEffect(() => { + if (!hasAccessTokenPair) { + setIsMinimalMetadataReady(true); + return; + } + const hasActiveWorkspace = isWorkspaceActiveOrSuspended(currentWorkspace); const areObjectsLoaded = metadataStore.status === 'up-to-date'; const areViewsLoaded = metadataStoreViews.status === 'up-to-date'; - const isReady = !areObjectsLoaded - ? false - : !hasAccessTokenPair || - (isDefined(currentUser) && (!hasActiveWorkspace || areViewsLoaded)); - if (!areObjectsLoaded) { setIsMinimalMetadataReady(false); return; } + const isReady = + isDefined(currentUser) && (!hasActiveWorkspace || areViewsLoaded); + if (isReady) { setIsMinimalMetadataReady(true); } diff --git a/packages/twenty-front/src/modules/metadata-store/effect-components/MinimalMetadataLoadEffect.tsx b/packages/twenty-front/src/modules/metadata-store/effect-components/MinimalMetadataLoadEffect.tsx index 3bb238ddb1..5e683446a2 100644 --- a/packages/twenty-front/src/modules/metadata-store/effect-components/MinimalMetadataLoadEffect.tsx +++ b/packages/twenty-front/src/modules/metadata-store/effect-components/MinimalMetadataLoadEffect.tsx @@ -2,70 +2,41 @@ import { useHasAccessTokenPair } from '@/auth/hooks/useHasAccessTokenPair'; import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; import { isCurrentUserLoadedState } from '@/auth/states/isCurrentUserLoadedState'; import { useLoadMinimalMetadata } from '@/metadata-store/hooks/useLoadMinimalMetadata'; -import { useLoadMockedMetadata } from '@/metadata-store/hooks/useLoadMockedMetadata'; import { useLoadStaleMetadataEntities } from '@/metadata-store/hooks/useLoadStaleMetadataEntities'; import { metadataLoadedVersionState } from '@/metadata-store/states/metadataLoadedVersionState'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { useEffect, useState } from 'react'; import { isWorkspaceActiveOrSuspended } from 'twenty-shared/workspace'; -type LoadedState = 'none' | 'mocked' | 'real'; - -const computeDesiredLoadState = ( - hasAccessTokenPair: boolean, - isActiveWorkspace: boolean, -): LoadedState => { - if (hasAccessTokenPair && isActiveWorkspace) { - return 'real'; - } - - return 'mocked'; -}; - export const MinimalMetadataLoadEffect = () => { const hasAccessTokenPair = useHasAccessTokenPair(); const isCurrentUserLoaded = useAtomStateValue(isCurrentUserLoadedState); const currentWorkspace = useAtomStateValue(currentWorkspaceState); const metadataLoadedVersion = useAtomStateValue(metadataLoadedVersionState); - const [lastMetadataLoadData, setLastMetadataLoadData] = useState<{ - state: LoadedState; - version: number; - }>({ state: 'none', version: -1 }); + const [lastLoadedVersion, setLastLoadedVersion] = useState(-1); const { loadMinimalMetadata } = useLoadMinimalMetadata(); - const { loadMockedMetadataAtomic } = useLoadMockedMetadata(); const { loadStaleMetadataEntities } = useLoadStaleMetadataEntities(); const isActiveWorkspace = isWorkspaceActiveOrSuspended(currentWorkspace); - - const desiredLoadState = computeDesiredLoadState( - hasAccessTokenPair, - isActiveWorkspace, - ); + const shouldLoadRealMetadata = hasAccessTokenPair && isActiveWorkspace; useEffect(() => { if (!isCurrentUserLoaded) { return; } - const versionChanged = - metadataLoadedVersion !== lastMetadataLoadData.version; - - if (!versionChanged && lastMetadataLoadData.state === desiredLoadState) { + if (!shouldLoadRealMetadata) { return; } - setLastMetadataLoadData({ - state: desiredLoadState, - version: metadataLoadedVersion, - }); + if (metadataLoadedVersion === lastLoadedVersion) { + return; + } + + setLastLoadedVersion(metadataLoadedVersion); const performLoad = async () => { - if (desiredLoadState === 'mocked') { - await loadMockedMetadataAtomic(); - return; - } - const result = await loadMinimalMetadata(); if (result?.staleEntityKeys && result.staleEntityKeys.length > 0) { @@ -76,13 +47,10 @@ export const MinimalMetadataLoadEffect = () => { performLoad(); }, [ isCurrentUserLoaded, - hasAccessTokenPair, - isActiveWorkspace, - desiredLoadState, - lastMetadataLoadData, + shouldLoadRealMetadata, + lastLoadedVersion, metadataLoadedVersion, loadMinimalMetadata, - loadMockedMetadataAtomic, loadStaleMetadataEntities, ]); diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexTableQuery.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexTableQuery.ts index 66eeb5a393..91deff9c6a 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexTableQuery.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexTableQuery.ts @@ -2,12 +2,8 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; import { useRelevantRecordsGqlFields } from '@/object-record/record-field/hooks/useRelevantRecordsGqlFields'; import { useFindManyRecordIndexTableParams } from '@/object-record/record-index/hooks/useFindManyRecordIndexTableParams'; -import { SIGN_IN_BACKGROUND_MOCK_COMPANIES } from '@/sign-in-background-mock/constants/SignInBackgroundMockCompanies'; -import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal'; export const useRecordIndexTableQuery = (objectNameSingular: string) => { - const showAuthModal = useShowAuthModal(); - const params = useFindManyRecordIndexTableParams(objectNameSingular); const { objectMetadataItem } = useObjectMetadataItem({ @@ -28,12 +24,11 @@ export const useRecordIndexTableQuery = (objectNameSingular: string) => { } = useFindManyRecords({ ...params, recordGqlFields, - skip: showAuthModal, }); return { - records: showAuthModal ? SIGN_IN_BACKGROUND_MOCK_COMPANIES : records, - loading: showAuthModal ? false : loading, + records, + loading, hasNextPage, queryIdentifier, totalCount, 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 fbd5f8deb7..5c7d25e890 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 @@ -30,8 +30,6 @@ import { recordIdByRealIndexComponentState } from '@/object-record/record-table/ 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'; import { useAtomComponentFamilyStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentFamilyStateCallbackState'; import { useAtomComponentSelectorCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentSelectorCallbackState'; import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState'; @@ -41,8 +39,6 @@ import { isDefined } from 'twenty-shared/utils'; export const useTriggerInitialRecordTableDataLoad = () => { const { recordTableId, objectNameSingular } = useRecordTableContextOrThrow(); - const showAuthModal = useShowAuthModal(); - const { findManyRecordsLazy } = useRecordIndexTableLazyQuery(objectNameSingular); @@ -155,40 +151,35 @@ export const useTriggerInitialRecordTableDataLoad = () => { let records: ObjectRecord[] | null = null; let totalCount = 0; - if (showAuthModal) { - records = SIGN_IN_BACKGROUND_MOCK_COMPANIES; - totalCount = SIGN_IN_BACKGROUND_MOCK_COMPANIES.length; - } else { - const newRecordIdByRealIndex = new Map( - store.get(recordIdByRealIndexCallbackState), - ); - const newDataLoadingStatusByRealIndex = new Map( - store.get(dataLoadingStatusByRealIndexCallbackState), - ); + const newRecordIdByRealIndex = new Map( + store.get(recordIdByRealIndexCallbackState), + ); + const newDataLoadingStatusByRealIndex = new Map( + store.get(dataLoadingStatusByRealIndexCallbackState), + ); - for (const [realIndex] of currentRecordIds.entries()) { - newDataLoadingStatusByRealIndex.set(realIndex, 'not-loaded'); - newRecordIdByRealIndex.delete(realIndex); - } - - store.set(recordIdByRealIndexCallbackState, newRecordIdByRealIndex); - store.set( - dataLoadingStatusByRealIndexCallbackState, - newDataLoadingStatusByRealIndex, - ); - - store.set( - recordIndexRecordIdsByGroupFamilyState(NO_RECORD_GROUP_FAMILY_KEY), - [], - ); - - const { records: findManyRecords, totalCount: findManyTotalCount } = - await findManyRecordsLazy(); - - records = findManyRecords; - totalCount = findManyTotalCount; + for (const [realIndex] of currentRecordIds.entries()) { + newDataLoadingStatusByRealIndex.set(realIndex, 'not-loaded'); + newRecordIdByRealIndex.delete(realIndex); } + store.set(recordIdByRealIndexCallbackState, newRecordIdByRealIndex); + store.set( + dataLoadingStatusByRealIndexCallbackState, + newDataLoadingStatusByRealIndex, + ); + + store.set( + recordIndexRecordIdsByGroupFamilyState(NO_RECORD_GROUP_FAMILY_KEY), + [], + ); + + const { records: findManyRecords, totalCount: findManyTotalCount } = + await findManyRecordsLazy(); + + records = findManyRecords; + totalCount = findManyTotalCount; + store.set(totalNumberOfRecordsToVirtualizeCallbackState, totalCount); if (isDefined(records)) { @@ -230,7 +221,6 @@ export const useTriggerInitialRecordTableDataLoad = () => { recordIndexAllRecordIds, recordIndexRecordIdsByGroupFamilyState, store, - showAuthModal, dataPagesLoadedCallbackState, isRecordTableInitialLoading, lastScrollPositionCallbackState, diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockNavigationDrawer.tsx similarity index 56% rename from packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx rename to packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockNavigationDrawer.tsx index fce9b61590..34750fbbaa 100644 --- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx +++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockNavigationDrawer.tsx @@ -1,11 +1,3 @@ -import { NavigationDrawer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer'; - -import { NavigationDrawerSectionForObjectMetadataItems } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems'; -import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector'; -import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem'; -import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection'; -import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName'; -import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; import { SettingsPath } from 'twenty-shared/types'; @@ -13,28 +5,27 @@ import { getSettingsPath } from 'twenty-shared/utils'; import { IconSearch, IconSettings } from 'twenty-ui/display'; import { getOsControlSymbol, useIsMobile } from 'twenty-ui/utilities'; +import { BACKGROUND_MOCK_OTHER_ITEMS } from '@/sign-in-background-mock/constants/BackgroundMockOtherItems'; +import { BACKGROUND_MOCK_WORKSPACE_ITEMS } from '@/sign-in-background-mock/constants/BackgroundMockNavigationItems'; +import { NavigationDrawer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer'; +import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem'; +import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection'; +import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle'; +import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName'; + const StyledMainSectionWrapper = styled.div` min-height: fit-content; `; -const WORKSPACE_FAVORITES = [ - 'person', - 'company', - 'opportunity', - 'task', - 'note', -]; - -export type SignInAppNavigationDrawerMockProps = { +export type BackgroundMockNavigationDrawerProps = { className?: string; }; -export const SignInAppNavigationDrawerMock = ({ +export const BackgroundMockNavigationDrawer = ({ className, -}: SignInAppNavigationDrawerMockProps) => { +}: BackgroundMockNavigationDrawerProps) => { const isMobile = useIsMobile(); const { t } = useLingui(); - const objectMetadataItems = useAtomStateValue(objectMetadataItemsSelector); return ( @@ -56,12 +47,30 @@ export const SignInAppNavigationDrawerMock = ({ )} - - WORKSPACE_FAVORITES.includes(item.nameSingular), - )} - /> + + + {BACKGROUND_MOCK_WORKSPACE_ITEMS.map((item, index) => ( + {}} + /> + ))} + + + + {BACKGROUND_MOCK_OTHER_ITEMS.map((item) => ( + {}} + /> + ))} + ); }; diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockPage.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockPage.tsx new file mode 100644 index 0000000000..9cc4bd825c --- /dev/null +++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockPage.tsx @@ -0,0 +1,63 @@ +import { styled } from '@linaria/react'; +import { t } from '@lingui/core/macro'; +import { + IconBuildingSkyscraper, + IconDotsVertical, + IconLayoutSidebarRight, + IconPlus, + TintedIconTile, +} from 'twenty-ui/display'; +import { Button, LightIconButton } from 'twenty-ui/input'; + +import { BackgroundMockTable } from '@/sign-in-background-mock/components/BackgroundMockTable'; +import { BackgroundMockViewBar } from '@/sign-in-background-mock/components/BackgroundMockViewBar'; +import { PageBody } from '@/ui/layout/page/components/PageBody'; +import { PageContainer } from '@/ui/layout/page/components/PageContainer'; +import { PageHeader } from '@/ui/layout/page/components/PageHeader'; + +const StyledTableContainer = styled.div` + display: flex; + flex: 1; + flex-direction: column; + height: 100%; + overflow: hidden; + width: 100%; +`; + +export const BackgroundMockPage = () => { + return ( + + ( + + )} + > +