Various fixes (#11448)
# Scrollbar fix Fixes https://github.com/twentyhq/twenty/issues/11403 <img width="1512" alt="image" src="https://github.com/user-attachments/assets/b13fe0f2-8c61-4ea8-9ea1-e61e571a90da" /> --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Charles Bochet
@ -10,7 +10,7 @@ import { ClientConfigProviderEffect } from '@/client-config/components/ClientCon
|
||||
import { MainContextStoreProvider } from '@/context-store/components/MainContextStoreProvider';
|
||||
import { PromiseRejectionEffect } from '@/error-handler/components/PromiseRejectionEffect';
|
||||
import { ApolloMetadataClientProvider } from '@/object-metadata/components/ApolloMetadataClientProvider';
|
||||
import { ObjectMetadataItemsGater } from '@/object-metadata/components/ObjectMetadataItemsGater';
|
||||
import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect';
|
||||
import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
|
||||
import { PrefetchDataProvider } from '@/prefetch/components/PrefetchDataProvider';
|
||||
import { DialogManager } from '@/ui/feedback/dialog-manager/components/DialogManager';
|
||||
@ -45,28 +45,27 @@ export const AppRouterProviders = () => {
|
||||
<UserProvider>
|
||||
<AuthProvider>
|
||||
<ApolloMetadataClientProvider>
|
||||
<ObjectMetadataItemsLoadEffect />
|
||||
<ObjectMetadataItemsProvider>
|
||||
<ObjectMetadataItemsGater>
|
||||
<PrefetchDataProvider>
|
||||
<UserThemeProviderEffect />
|
||||
<SnackBarProvider>
|
||||
<DialogManagerScope dialogManagerScopeId="dialog-manager">
|
||||
<DialogManager>
|
||||
<StrictMode>
|
||||
<PromiseRejectionEffect />
|
||||
<GotoHotkeysEffectsProvider />
|
||||
<ServerPreconnect />
|
||||
<PageTitle title={pageTitle} />
|
||||
<PageFavicon />
|
||||
<Outlet />
|
||||
</StrictMode>
|
||||
</DialogManager>
|
||||
</DialogManagerScope>
|
||||
</SnackBarProvider>
|
||||
<MainContextStoreProvider />
|
||||
</PrefetchDataProvider>
|
||||
<PageChangeEffect />
|
||||
</ObjectMetadataItemsGater>
|
||||
<PrefetchDataProvider>
|
||||
<UserThemeProviderEffect />
|
||||
<SnackBarProvider>
|
||||
<DialogManagerScope dialogManagerScopeId="dialog-manager">
|
||||
<DialogManager>
|
||||
<StrictMode>
|
||||
<PromiseRejectionEffect />
|
||||
<GotoHotkeysEffectsProvider />
|
||||
<ServerPreconnect />
|
||||
<PageTitle title={pageTitle} />
|
||||
<PageFavicon />
|
||||
<Outlet />
|
||||
</StrictMode>
|
||||
</DialogManager>
|
||||
</DialogManagerScope>
|
||||
</SnackBarProvider>
|
||||
<MainContextStoreProvider />
|
||||
</PrefetchDataProvider>
|
||||
<PageChangeEffect />
|
||||
</ObjectMetadataItemsProvider>
|
||||
</ApolloMetadataClientProvider>
|
||||
</AuthProvider>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
createSearchParams,
|
||||
matchPath,
|
||||
useLocation,
|
||||
useNavigate,
|
||||
@ -60,15 +61,27 @@ export const PageChangeEffect = () => {
|
||||
}, [location, previousLocation]);
|
||||
|
||||
const [searchParams] = useSearchParams();
|
||||
const navigationParams = searchParams.get('animateModal')
|
||||
? `?animateModal=${searchParams.get('animateModal')}`
|
||||
: '';
|
||||
|
||||
useEffect(() => {
|
||||
if (isDefined(pageChangeEffectNavigateLocation)) {
|
||||
navigate(pageChangeEffectNavigateLocation + navigationParams);
|
||||
const hasQueryParams = pageChangeEffectNavigateLocation.includes('?');
|
||||
|
||||
const navigationParams = createSearchParams({
|
||||
...(searchParams.get('animateModal')
|
||||
? { animateModal: searchParams.get('animateModal') ?? 'false' }
|
||||
: {}),
|
||||
});
|
||||
|
||||
if (hasQueryParams) {
|
||||
navigate(pageChangeEffectNavigateLocation);
|
||||
} else {
|
||||
navigate({
|
||||
pathname: pageChangeEffectNavigateLocation,
|
||||
search: navigationParams.toString(),
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [navigate, pageChangeEffectNavigateLocation, navigationParams]);
|
||||
}, [navigate, pageChangeEffectNavigateLocation, searchParams]);
|
||||
|
||||
useEffect(() => {
|
||||
const isLeavingRecordIndexPage = !!matchPath(
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
import { useApolloClient } from '@apollo/client';
|
||||
import { MockedProvider } from '@apollo/client/testing';
|
||||
import { expect } from '@storybook/test';
|
||||
import { ReactNode, act } from 'react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { RecoilRoot, useRecoilValue } from 'recoil';
|
||||
import { useAuth } from '@/auth/hooks/useAuth';
|
||||
import { billingState } from '@/client-config/states/billingState';
|
||||
import { isDebugModeState } from '@/client-config/states/isDebugModeState';
|
||||
import { isDeveloperDefaultSignInPrefilledState } from '@/client-config/states/isDeveloperDefaultSignInPrefilledState';
|
||||
import { supportChatState } from '@/client-config/states/supportChatState';
|
||||
import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
|
||||
import { useApolloClient } from '@apollo/client';
|
||||
import { MockedProvider } from '@apollo/client/testing';
|
||||
import { expect } from '@storybook/test';
|
||||
import { ReactNode, act } from 'react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { RecoilRoot, useRecoilValue } from 'recoil';
|
||||
|
||||
import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
|
||||
import { renderHook } from '@testing-library/react';
|
||||
import { email, mocks, password, results, token } from '../__mocks__/useAuth';
|
||||
import { iconsState } from 'twenty-ui/display';
|
||||
import { email, mocks, password, results, token } from '../__mocks__/useAuth';
|
||||
|
||||
const redirectSpy = jest.fn();
|
||||
|
||||
@ -24,6 +24,12 @@ jest.mock('@/domain-manager/hooks/useRedirect', () => ({
|
||||
})),
|
||||
}));
|
||||
|
||||
jest.mock('@/object-metadata/hooks/useRefreshObjectMetadataItem', () => ({
|
||||
useRefreshObjectMetadataItems: jest.fn().mockImplementation(() => ({
|
||||
refreshObjectMetadataItems: jest.fn(),
|
||||
})),
|
||||
}));
|
||||
|
||||
const Wrapper = ({ children }: { children: ReactNode }) => (
|
||||
<MockedProvider mocks={mocks} addTypename={false}>
|
||||
<RecoilRoot>
|
||||
|
||||
@ -56,15 +56,15 @@ import { useLastAuthenticatedWorkspaceDomain } from '@/domain-manager/hooks/useL
|
||||
import { useRedirect } from '@/domain-manager/hooks/useRedirect';
|
||||
import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
|
||||
import { domainConfigurationState } from '@/domain-manager/states/domainConfigurationState';
|
||||
import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
|
||||
import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItem';
|
||||
import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
|
||||
import { i18n } from '@lingui/core';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { APP_LOCALES } from 'twenty-shared/translations';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { iconsState } from 'twenty-ui/display';
|
||||
import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
|
||||
import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
|
||||
import { iconsState } from 'twenty-ui/display';
|
||||
|
||||
export const useAuth = () => {
|
||||
const setTokenPair = useSetRecoilState(tokenPairState);
|
||||
@ -73,9 +73,7 @@ export const useAuth = () => {
|
||||
currentWorkspaceMemberState,
|
||||
);
|
||||
const setCurrentUserWorkspace = useSetRecoilState(currentUserWorkspaceState);
|
||||
const setIsAppWaitingForFreshObjectMetadataState = useSetRecoilState(
|
||||
isAppWaitingForFreshObjectMetadataState,
|
||||
);
|
||||
|
||||
const setCurrentWorkspaceMembers = useSetRecoilState(
|
||||
currentWorkspaceMembersState,
|
||||
);
|
||||
@ -84,6 +82,8 @@ export const useAuth = () => {
|
||||
isEmailVerificationRequiredState,
|
||||
);
|
||||
|
||||
const { refreshObjectMetadataItems } = useRefreshObjectMetadataItems();
|
||||
|
||||
const setSignInUpStep = useSetRecoilState(signInUpStepState);
|
||||
const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
|
||||
const setWorkspaces = useSetRecoilState(workspacesState);
|
||||
@ -312,7 +312,6 @@ export const useAuth = () => {
|
||||
|
||||
setWorkspaces(validWorkspaces);
|
||||
}
|
||||
setIsAppWaitingForFreshObjectMetadataState(true);
|
||||
|
||||
return {
|
||||
user,
|
||||
@ -328,7 +327,6 @@ export const useAuth = () => {
|
||||
setCurrentWorkspaceMember,
|
||||
setCurrentWorkspaceMembers,
|
||||
setDateTimeFormat,
|
||||
setIsAppWaitingForFreshObjectMetadataState,
|
||||
setLastAuthenticateWorkspaceDomain,
|
||||
setWorkspaces,
|
||||
]);
|
||||
@ -351,9 +349,15 @@ export const useAuth = () => {
|
||||
getAuthTokensResult.data?.getAuthTokensFromLoginToken.tokens,
|
||||
);
|
||||
|
||||
await refreshObjectMetadataItems();
|
||||
await loadCurrentUser();
|
||||
},
|
||||
[getAuthTokensFromLoginToken, setTokenPair, loadCurrentUser],
|
||||
[
|
||||
getAuthTokensFromLoginToken,
|
||||
setTokenPair,
|
||||
refreshObjectMetadataItems,
|
||||
loadCurrentUser,
|
||||
],
|
||||
);
|
||||
|
||||
const handleCredentialsSignIn = useCallback(
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
|
||||
|
||||
import { useAuth } from '@/auth/hooks/useAuth';
|
||||
import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
|
||||
import { useLingui } from '@lingui/react/macro';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
import { useNavigateApp } from '~/hooks/useNavigateApp';
|
||||
|
||||
export const useVerifyLogin = () => {
|
||||
@ -14,21 +12,14 @@ export const useVerifyLogin = () => {
|
||||
const { getAuthTokensFromLoginToken } = useAuth();
|
||||
const { t } = useLingui();
|
||||
|
||||
const setIsAppWaitingForFreshObjectMetadata = useSetRecoilState(
|
||||
isAppWaitingForFreshObjectMetadataState,
|
||||
);
|
||||
|
||||
const verifyLoginToken = async (loginToken: string) => {
|
||||
try {
|
||||
setIsAppWaitingForFreshObjectMetadata(true);
|
||||
await getAuthTokensFromLoginToken(loginToken);
|
||||
} catch (error) {
|
||||
enqueueSnackBar(t`Authentication failed`, {
|
||||
variant: SnackBarVariant.Error,
|
||||
});
|
||||
navigate(AppPath.SignInUp);
|
||||
} finally {
|
||||
setIsAppWaitingForFreshObjectMetadata(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -11,12 +11,13 @@ import styled from '@emotion/styled';
|
||||
import { Trans } from '@lingui/react/macro';
|
||||
import { FormProvider } from 'react-hook-form';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { ActionLink } from 'twenty-ui/navigation';
|
||||
import { HorizontalSeparator } from 'twenty-ui/display';
|
||||
import { ActionLink } from 'twenty-ui/navigation';
|
||||
|
||||
const StyledContentContainer = styled.div`
|
||||
margin-bottom: ${({ theme }) => theme.spacing(8)};
|
||||
margin-top: ${({ theme }) => theme.spacing(4)};
|
||||
width: 200px;
|
||||
`;
|
||||
|
||||
export const SignInUpWorkspaceScopeForm = () => {
|
||||
|
||||
@ -1,17 +1,16 @@
|
||||
import { useState } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
|
||||
|
||||
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
|
||||
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
|
||||
import { isDefaultLayoutAuthModalVisibleState } from '@/ui/layout/states/isDefaultLayoutAuthModalVisibleState';
|
||||
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { useGetWorkspaceFromInviteHashQuery } from '~/generated/graphql';
|
||||
import { useNavigateApp } from '~/hooks/useNavigateApp';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
|
||||
export const useWorkspaceFromInviteHash = () => {
|
||||
const { enqueueSnackBar } = useSnackBar();
|
||||
@ -19,9 +18,7 @@ export const useWorkspaceFromInviteHash = () => {
|
||||
const workspaceInviteHash = useParams().workspaceInviteHash;
|
||||
const currentWorkspace = useRecoilValue(currentWorkspaceState);
|
||||
const [initiallyLoggedIn] = useState(isDefined(currentWorkspace));
|
||||
const setIsDefaultLayoutAuthModalVisible = useSetRecoilState(
|
||||
isDefaultLayoutAuthModalVisibleState,
|
||||
);
|
||||
|
||||
const { data: workspaceFromInviteHash, loading } =
|
||||
useGetWorkspaceFromInviteHashQuery({
|
||||
skip: !workspaceInviteHash,
|
||||
@ -46,8 +43,6 @@ export const useWorkspaceFromInviteHash = () => {
|
||||
},
|
||||
);
|
||||
navigate(AppPath.Index);
|
||||
} else {
|
||||
setIsDefaultLayoutAuthModalVisible(true);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@ -4,6 +4,7 @@ import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
|
||||
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
|
||||
import { prefetchIndexViewIdFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchIndexViewIdFromObjectMetadataItemFamilySelector';
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
|
||||
import { useParams, useSearchParams } from 'react-router-dom';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
@ -62,9 +63,10 @@ export const MainContextStoreProvider = () => {
|
||||
);
|
||||
|
||||
const viewId = getViewId(viewIdQueryParam, indexViewId, lastVisitedViewId);
|
||||
const showAuthModal = useShowAuthModal();
|
||||
|
||||
const shouldComputeContextStore =
|
||||
isRecordIndexPage || isRecordShowPage || isSettingsPage;
|
||||
(isRecordIndexPage || isRecordShowPage || isSettingsPage) && !showAuthModal;
|
||||
|
||||
if (!shouldComputeContextStore) {
|
||||
return null;
|
||||
|
||||
@ -61,13 +61,12 @@ export const MainContextStoreProviderEffect = ({
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!objectMetadataItem) {
|
||||
setContextStoreCurrentObjectMetadataItemId(undefined);
|
||||
return;
|
||||
if (contextStoreCurrentObjectMetadataItemId !== objectMetadataItem?.id) {
|
||||
setContextStoreCurrentObjectMetadataItemId(objectMetadataItem?.id);
|
||||
}
|
||||
|
||||
if (contextStoreCurrentObjectMetadataItemId !== objectMetadataItem.id) {
|
||||
setContextStoreCurrentObjectMetadataItemId(objectMetadataItem.id);
|
||||
if (!objectMetadataItem) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLastVisitedViewForObjectMetadataNamePlural({
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
import React from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
|
||||
import { UserOrMetadataLoader } from '~/loading/components/UserOrMetadataLoader';
|
||||
|
||||
export const ObjectMetadataItemsGater = ({
|
||||
children,
|
||||
}: React.PropsWithChildren) => {
|
||||
const isAppWaitingForFreshObjectMetadata = useRecoilValue(
|
||||
isAppWaitingForFreshObjectMetadataState,
|
||||
);
|
||||
|
||||
const shouldDisplayChildren = !isAppWaitingForFreshObjectMetadata;
|
||||
|
||||
return (
|
||||
<>{shouldDisplayChildren ? <>{children}</> : <UserOrMetadataLoader />}</>
|
||||
);
|
||||
};
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect';
|
||||
import { PreComputedChipGeneratorsProvider } from '@/object-metadata/components/PreComputedChipGeneratorsProvider';
|
||||
import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
|
||||
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
|
||||
import { UserOrMetadataLoader } from '~/loading/components/UserOrMetadataLoader';
|
||||
|
||||
@ -10,11 +10,16 @@ export const ObjectMetadataItemsProvider = ({
|
||||
children,
|
||||
}: React.PropsWithChildren) => {
|
||||
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
|
||||
const shouldDisplayChildren = objectMetadataItems.length > 0;
|
||||
|
||||
const isAppWaitingForFreshObjectMetadata = useRecoilValue(
|
||||
isAppWaitingForFreshObjectMetadataState,
|
||||
);
|
||||
|
||||
const shouldDisplayChildren =
|
||||
!isAppWaitingForFreshObjectMetadata && objectMetadataItems.length > 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
<ObjectMetadataItemsLoadEffect />
|
||||
{shouldDisplayChildren ? (
|
||||
<PreComputedChipGeneratorsProvider>
|
||||
{children}
|
||||
|
||||
@ -39,7 +39,8 @@ export const useRefreshObjectMetadataItems = (
|
||||
!isDeeplyEqual(
|
||||
snapshot.getLoadable(objectMetadataItemsState).getValue(),
|
||||
toSetObjectMetadataItems,
|
||||
)
|
||||
) &&
|
||||
toSetObjectMetadataItems.length > 0
|
||||
) {
|
||||
set(objectMetadataItemsState, toSetObjectMetadataItems);
|
||||
set(isAppWaitingForFreshObjectMetadataState, false);
|
||||
|
||||
@ -433,6 +433,17 @@ const HookMockWrapper = getJestMetadataAndApolloMocksWrapper({
|
||||
apolloMocks: mocks,
|
||||
});
|
||||
|
||||
jest.mock('react-router-dom', () => ({
|
||||
...jest.requireActual('react-router-dom'),
|
||||
useLocation: jest.fn().mockReturnValue({
|
||||
pathname: '/',
|
||||
search: '',
|
||||
hash: '',
|
||||
state: null,
|
||||
key: 'default',
|
||||
}),
|
||||
}));
|
||||
|
||||
const Wrapper = ({ children }: { children: ReactNode }) => {
|
||||
return (
|
||||
<HookMockWrapper>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { RecordIndexActionMenu } from '@/action-menu/components/RecordIndexActionMenu';
|
||||
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
|
||||
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
|
||||
import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
|
||||
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
|
||||
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
|
||||
@ -7,7 +9,7 @@ import { PageHeader } from '@/ui/layout/page/components/PageHeader';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import styled from '@emotion/styled';
|
||||
import { t } from '@lingui/core/macro';
|
||||
import { capitalize } from 'twenty-shared/utils';
|
||||
import { capitalize, isDefined } from 'twenty-shared/utils';
|
||||
import { useIcons } from 'twenty-ui/display';
|
||||
|
||||
const StyledTitleWithSelectedRecords = styled.div`
|
||||
@ -59,10 +61,19 @@ export const RecordIndexPageHeader = () => {
|
||||
label
|
||||
);
|
||||
|
||||
const contextStoreCurrentViewId = useRecoilComponentValueV2(
|
||||
contextStoreCurrentViewIdComponentState,
|
||||
MAIN_CONTEXT_STORE_INSTANCE_ID,
|
||||
);
|
||||
|
||||
return (
|
||||
<PageHeader title={pageHeaderTitle} Icon={Icon}>
|
||||
<RecordIndexActionMenu indexId={recordIndexId} />
|
||||
<PageHeaderToggleCommandMenuButton />
|
||||
{isDefined(contextStoreCurrentViewId) && (
|
||||
<>
|
||||
<RecordIndexActionMenu indexId={recordIndexId} />
|
||||
<PageHeaderToggleCommandMenuButton />
|
||||
</>
|
||||
)}
|
||||
</PageHeader>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
|
||||
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
|
||||
import { useLazyFindManyRecords } from '@/object-record/hooks/useLazyFindManyRecords';
|
||||
import { useFindManyRecordIndexTableParams } from '@/object-record/record-index/hooks/useFindManyRecordIndexTableParams';
|
||||
import { useRecordTableRecordGqlFields } from '@/object-record/record-index/hooks/useRecordTableRecordGqlFields';
|
||||
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
|
||||
import { SIGN_IN_BACKGROUND_MOCK_COMPANIES } from '@/sign-in-background-mock/constants/SignInBackgroundMockCompanies';
|
||||
import { isWorkspaceActiveOrSuspended } from 'twenty-shared/workspace';
|
||||
import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
|
||||
|
||||
export const useLazyLoadRecordIndexTable = (objectNameSingular: string) => {
|
||||
const showAuthModal = useShowAuthModal();
|
||||
|
||||
const { objectMetadataItem } = useObjectMetadataItem({
|
||||
objectNameSingular,
|
||||
});
|
||||
@ -17,8 +16,6 @@ export const useLazyLoadRecordIndexTable = (objectNameSingular: string) => {
|
||||
const { setRecordTableData, setIsRecordTableInitialLoading } =
|
||||
useRecordTable();
|
||||
|
||||
const currentWorkspace = useRecoilValue(currentWorkspaceState);
|
||||
|
||||
const params = useFindManyRecordIndexTableParams(objectNameSingular);
|
||||
|
||||
const recordGqlFields = useRecordTableRecordGqlFields({ objectMetadataItem });
|
||||
@ -44,9 +41,7 @@ export const useLazyLoadRecordIndexTable = (objectNameSingular: string) => {
|
||||
|
||||
return {
|
||||
findManyRecords,
|
||||
records: isWorkspaceActiveOrSuspended(currentWorkspace)
|
||||
? records
|
||||
: SIGN_IN_BACKGROUND_MOCK_COMPANIES,
|
||||
records: !showAuthModal ? records : SIGN_IN_BACKGROUND_MOCK_COMPANIES,
|
||||
totalCount: totalCount,
|
||||
loading,
|
||||
fetchMoreRecords,
|
||||
|
||||
@ -2,25 +2,28 @@ import { useEffect, useState } from 'react';
|
||||
import { useRecoilState, useRecoilValue } from 'recoil';
|
||||
import { useDebouncedCallback } from 'use-debounce';
|
||||
|
||||
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
|
||||
import { lastShowPageRecordIdState } from '@/object-record/record-field/states/lastShowPageRecordId';
|
||||
import { useLazyLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLazyLoadRecordIndexTable';
|
||||
import { ROW_HEIGHT } from '@/object-record/record-table/constants/RowHeight';
|
||||
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
|
||||
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
|
||||
import { hasRecordTableFetchedAllRecordsComponentStateV2 } from '@/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2';
|
||||
import { tableEncounteredUnrecoverableErrorComponentState } from '@/object-record/record-table/states/tableEncounteredUnrecoverableErrorComponentState';
|
||||
import { tableLastRowVisibleComponentState } from '@/object-record/record-table/states/tableLastRowVisibleComponentState';
|
||||
import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
|
||||
import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
|
||||
import { useScrollToPosition } from '@/ui/utilities/scroll/hooks/useScrollToPosition';
|
||||
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
|
||||
import { isNonEmptyString, isNull } from '@sniptt/guards';
|
||||
import { isNonEmptyString } from '@sniptt/guards';
|
||||
|
||||
export const RecordTableNoRecordGroupBodyEffect = () => {
|
||||
const { objectNameSingular } = useRecordTableContextOrThrow();
|
||||
|
||||
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
|
||||
const { setIsRecordTableInitialLoading } = useRecordTable();
|
||||
|
||||
const showAuthModal = useShowAuthModal();
|
||||
|
||||
const [hasInitializedScroll, setHasInitializedScroll] = useState(false);
|
||||
|
||||
@ -139,7 +142,8 @@ export const RecordTableNoRecordGroupBodyEffect = () => {
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isNull(currentWorkspaceMember)) {
|
||||
if (showAuthModal) {
|
||||
setIsRecordTableInitialLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -147,7 +151,12 @@ export const RecordTableNoRecordGroupBodyEffect = () => {
|
||||
findManyRecords();
|
||||
setHasInitialized(true);
|
||||
}
|
||||
}, [currentWorkspaceMember, findManyRecords, hasInitialized]);
|
||||
}, [
|
||||
findManyRecords,
|
||||
hasInitialized,
|
||||
setIsRecordTableInitialLoading,
|
||||
showAuthModal,
|
||||
]);
|
||||
|
||||
return <></>;
|
||||
};
|
||||
|
||||
@ -1,21 +1,22 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRecoilState, useRecoilValue } from 'recoil';
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
|
||||
import { lastShowPageRecordIdState } from '@/object-record/record-field/states/lastShowPageRecordId';
|
||||
import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId';
|
||||
import { useLazyLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLazyLoadRecordIndexTable';
|
||||
import { recordIndexHasFetchedAllRecordsByGroupComponentState } from '@/object-record/record-index/states/recordIndexHasFetchedAllRecordsByGroupComponentState';
|
||||
import { ROW_HEIGHT } from '@/object-record/record-table/constants/RowHeight';
|
||||
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
|
||||
import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
|
||||
import { useScrollToPosition } from '@/ui/utilities/scroll/hooks/useScrollToPosition';
|
||||
import { useSetRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyStateV2';
|
||||
import { isNonEmptyString, isNull } from '@sniptt/guards';
|
||||
import { isNonEmptyString } from '@sniptt/guards';
|
||||
import { OnboardingStatus } from '~/generated-metadata/graphql';
|
||||
|
||||
export const RecordTableRecordGroupBodyEffect = () => {
|
||||
const { objectNameSingular } = useRecordTableContextOrThrow();
|
||||
|
||||
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
|
||||
const onboardingStatus = useOnboardingStatus();
|
||||
|
||||
const recordGroupId = useCurrentRecordGroupId();
|
||||
|
||||
@ -79,12 +80,12 @@ export const RecordTableRecordGroupBodyEffect = () => {
|
||||
}, [hasNextPage, setHasRecordFetchedAllRecordsComponents]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isNull(currentWorkspaceMember)) {
|
||||
if (onboardingStatus !== OnboardingStatus.COMPLETED) {
|
||||
return;
|
||||
}
|
||||
|
||||
findManyRecords();
|
||||
}, [currentWorkspaceMember, findManyRecords]);
|
||||
}, [onboardingStatus, findManyRecords]);
|
||||
|
||||
return <></>;
|
||||
};
|
||||
|
||||
@ -2,7 +2,6 @@ import { ReactElement, useContext } from 'react';
|
||||
|
||||
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
|
||||
import { RecordTableCellBaseContainer } from '@/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer';
|
||||
import { RecordTableCellSoftFocusMode } from '@/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode';
|
||||
|
||||
import { RecordTableCellSoftFocusModeHotkeysSetterEffect } from '@/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusModeHotkeysSetterEffect';
|
||||
import { RecordTableCellDisplayMode } from './RecordTableCellDisplayMode';
|
||||
@ -27,19 +26,14 @@ export const RecordTableCellContainer = ({
|
||||
<RecordTableCellBaseContainer>
|
||||
{isInEditMode ? (
|
||||
<RecordTableCellEditMode>{editModeContent}</RecordTableCellEditMode>
|
||||
) : hasSoftFocus ? (
|
||||
<>
|
||||
<RecordTableCellSoftFocusModeHotkeysSetterEffect />
|
||||
<RecordTableCellSoftFocusMode
|
||||
editModeContent={editModeContent}
|
||||
nonEditModeContent={nonEditModeContent}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<RecordTableCellDisplayMode>
|
||||
{nonEditModeContent}
|
||||
</RecordTableCellDisplayMode>
|
||||
)}
|
||||
{hasSoftFocus ? (
|
||||
<RecordTableCellSoftFocusModeHotkeysSetterEffect />
|
||||
) : null}
|
||||
</RecordTableCellBaseContainer>
|
||||
);
|
||||
};
|
||||
|
||||
@ -41,11 +41,11 @@ export const RecordTableCellFieldContextWrapper = ({
|
||||
return (
|
||||
<RecordFieldComponentInstanceContext.Provider value={{ instanceId }}>
|
||||
{isLabelIdentifier ? (
|
||||
<RecordTableCellFieldContextLabelIdentifier>
|
||||
<RecordTableCellFieldContextLabelIdentifier key={instanceId}>
|
||||
{children}
|
||||
</RecordTableCellFieldContextLabelIdentifier>
|
||||
) : (
|
||||
<RecordTableCellFieldContextGeneric>
|
||||
<RecordTableCellFieldContextGeneric key={instanceId}>
|
||||
{children}
|
||||
</RecordTableCellFieldContextGeneric>
|
||||
)}
|
||||
|
||||
@ -1,117 +0,0 @@
|
||||
import { ReactElement, useContext, useEffect, useRef } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { useGetButtonIcon } from '@/object-record/record-field/hooks/useGetButtonIcon';
|
||||
import { useIsFieldEmpty } from '@/object-record/record-field/hooks/useIsFieldEmpty';
|
||||
import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFieldInputOnly';
|
||||
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
|
||||
import { RecordTableCellButton } from '@/object-record/record-table/record-table-cell/components/RecordTableCellButton';
|
||||
import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
|
||||
import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
|
||||
|
||||
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
|
||||
import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { IconArrowUpRight } from 'twenty-ui/display';
|
||||
import { useIsMobile } from 'twenty-ui/utilities';
|
||||
import { RecordTableCellDisplayContainer } from './RecordTableCellDisplayContainer';
|
||||
|
||||
type RecordTableCellSoftFocusModeProps = {
|
||||
editModeContent: ReactElement;
|
||||
nonEditModeContent: ReactElement;
|
||||
};
|
||||
|
||||
export const RecordTableCellSoftFocusMode = ({
|
||||
editModeContent,
|
||||
nonEditModeContent,
|
||||
}: RecordTableCellSoftFocusModeProps) => {
|
||||
const { columnIndex, columnDefinition } = useContext(RecordTableCellContext);
|
||||
const { recordId, isReadOnly } = useContext(FieldContext);
|
||||
|
||||
const { onActionMenuDropdownOpened } = useRecordTableBodyContextOrThrow();
|
||||
|
||||
const { openTableCell } = useOpenRecordTableCellFromCell();
|
||||
|
||||
const editModeContentOnly = useIsFieldInputOnly();
|
||||
|
||||
const isFieldInputOnly = useIsFieldInputOnly();
|
||||
|
||||
const isEmpty = useIsFieldEmpty();
|
||||
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const isSoftFocusUsingMouse = useRecoilValue(isSoftFocusUsingMouseState);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isSoftFocusUsingMouse) {
|
||||
scrollRef.current?.scrollIntoView({ block: 'nearest' });
|
||||
}
|
||||
}, [isSoftFocusUsingMouse]);
|
||||
|
||||
const handleClick = () => {
|
||||
if (!isFieldInputOnly && !isReadOnly) {
|
||||
openTableCell();
|
||||
}
|
||||
};
|
||||
|
||||
const handleButtonClick = () => {
|
||||
if (!isFieldInputOnly && isFirstColumn) {
|
||||
openTableCell(undefined, false, true);
|
||||
} else {
|
||||
openTableCell();
|
||||
}
|
||||
/*
|
||||
Disabling sidepanel access for now, TODO: launch
|
||||
if (!isFieldInputOnly) {
|
||||
openTableCell(undefined, true);
|
||||
}
|
||||
*/
|
||||
};
|
||||
|
||||
const handleActionMenuDropdown = (event: React.MouseEvent) => {
|
||||
onActionMenuDropdownOpened(event, recordId);
|
||||
};
|
||||
|
||||
const isFirstColumn = columnIndex === 0;
|
||||
const customButtonIcon = useGetButtonIcon();
|
||||
const buttonIcon = isFirstColumn
|
||||
? IconArrowUpRight // IconLayoutSidebarRightExpand - Disabling sidepanel access for now
|
||||
: customButtonIcon;
|
||||
|
||||
const isMobile = useIsMobile();
|
||||
const showButton =
|
||||
isDefined(buttonIcon) &&
|
||||
!editModeContentOnly &&
|
||||
!isReadOnly &&
|
||||
!(isMobile && isFirstColumn);
|
||||
|
||||
const dontShowContent = isEmpty && isReadOnly;
|
||||
|
||||
const showPlaceholder =
|
||||
!editModeContentOnly && !isReadOnly && isFirstColumn && isEmpty;
|
||||
|
||||
return (
|
||||
<>
|
||||
<RecordTableCellDisplayContainer
|
||||
onClick={handleClick}
|
||||
scrollRef={scrollRef}
|
||||
softFocus
|
||||
onContextMenu={handleActionMenuDropdown}
|
||||
placeholderForEmptyCell={
|
||||
showPlaceholder ? columnDefinition.label : undefined
|
||||
}
|
||||
>
|
||||
{dontShowContent ? (
|
||||
<></>
|
||||
) : editModeContentOnly ? (
|
||||
editModeContent
|
||||
) : (
|
||||
nonEditModeContent
|
||||
)}
|
||||
</RecordTableCellDisplayContainer>
|
||||
{showButton && (
|
||||
<RecordTableCellButton onClick={handleButtonClick} Icon={buttonIcon} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,7 +1,6 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
import { useRecoilCallback, useSetRecoilState } from 'recoil';
|
||||
|
||||
import { currentUserState } from '@/auth/states/currentUserState';
|
||||
import { Favorite } from '@/favorites/types/Favorite';
|
||||
import { FavoriteFolder } from '@/favorites/types/FavoriteFolder';
|
||||
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
|
||||
@ -13,17 +12,12 @@ import { prefetchFavoriteFoldersState } from '@/prefetch/states/prefetchFavorite
|
||||
import { prefetchFavoritesState } from '@/prefetch/states/prefetchFavoritesState';
|
||||
import { prefetchIsLoadedFamilyState } from '@/prefetch/states/prefetchIsLoadedFamilyState';
|
||||
import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
|
||||
import { useIsWorkspaceActivationStatusEqualsTo } from '@/workspace/hooks/useIsWorkspaceActivationStatusEqualsTo';
|
||||
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
|
||||
import { WorkspaceActivationStatus } from 'twenty-shared/workspace';
|
||||
import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
|
||||
|
||||
export const PrefetchRunFavoriteQueriesEffect = () => {
|
||||
const currentUser = useRecoilValue(currentUserState);
|
||||
|
||||
const isWorkspaceActive = useIsWorkspaceActivationStatusEqualsTo(
|
||||
WorkspaceActivationStatus.ACTIVE,
|
||||
);
|
||||
const showAuthModal = useShowAuthModal();
|
||||
|
||||
const { objectMetadataItems } = useObjectMetadataItems();
|
||||
|
||||
@ -53,14 +47,14 @@ export const PrefetchRunFavoriteQueriesEffect = () => {
|
||||
objectNameSingular: CoreObjectNameSingular.Favorite,
|
||||
filter: findAllFavoritesOperationSignature.variables.filter,
|
||||
recordGqlFields: findAllFavoritesOperationSignature.fields,
|
||||
skip: !currentUser || !isWorkspaceActive,
|
||||
skip: showAuthModal,
|
||||
});
|
||||
|
||||
const { records: favoriteFolders } = useFindManyRecords({
|
||||
objectNameSingular: CoreObjectNameSingular.FavoriteFolder,
|
||||
filter: findAllFavoriteFoldersOperationSignature.variables.filter,
|
||||
recordGqlFields: findAllFavoriteFoldersOperationSignature.fields,
|
||||
skip: !currentUser || !isWorkspaceActive,
|
||||
skip: showAuthModal,
|
||||
});
|
||||
|
||||
const setPrefetchFavoritesState = useRecoilCallback(
|
||||
|
||||
@ -8,7 +8,7 @@ import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTabl
|
||||
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';
|
||||
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
|
||||
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
|
||||
import { useInitViewBar } from '@/views/hooks/useInitViewBar';
|
||||
import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions';
|
||||
|
||||
@ -23,11 +23,13 @@ export const SignInBackgroundMockContainerEffect = ({
|
||||
recordTableId,
|
||||
viewId,
|
||||
}: SignInBackgroundMockContainerEffectProps) => {
|
||||
const setContextStoreCurrentObjectMetadataItemId =
|
||||
useSetRecoilComponentStateV2(
|
||||
contextStoreCurrentObjectMetadataItemIdComponentState,
|
||||
MAIN_CONTEXT_STORE_INSTANCE_ID,
|
||||
);
|
||||
const [
|
||||
contextStoreCurrentObjectMetadataItemId,
|
||||
setContextStoreCurrentObjectMetadataItemId,
|
||||
] = useRecoilComponentStateV2(
|
||||
contextStoreCurrentObjectMetadataItemIdComponentState,
|
||||
MAIN_CONTEXT_STORE_INSTANCE_ID,
|
||||
);
|
||||
|
||||
const { setAvailableTableColumns } = useRecordTable({
|
||||
recordTableId,
|
||||
@ -61,7 +63,9 @@ export const SignInBackgroundMockContainerEffect = ({
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
setContextStoreCurrentObjectMetadataItemId(objectMetadataItem.id);
|
||||
if (contextStoreCurrentObjectMetadataItemId !== objectMetadataItem.id) {
|
||||
setContextStoreCurrentObjectMetadataItemId(objectMetadataItem.id);
|
||||
}
|
||||
}, [
|
||||
setViewObjectMetadataId,
|
||||
setAvailableFieldDefinitions,
|
||||
@ -70,6 +74,7 @@ export const SignInBackgroundMockContainerEffect = ({
|
||||
setTableColumns,
|
||||
recordTableId,
|
||||
setContextStoreCurrentObjectMetadataItemId,
|
||||
contextStoreCurrentObjectMetadataItemId,
|
||||
]);
|
||||
|
||||
return <></>;
|
||||
|
||||
@ -4,8 +4,6 @@ import React from 'react';
|
||||
const StyledInputErrorHelper = styled.div`
|
||||
color: ${({ theme }) => theme.color.red};
|
||||
font-size: ${({ theme }) => theme.font.size.xs};
|
||||
position: absolute;
|
||||
margin-top: ${({ theme }) => theme.spacing(0.25)};
|
||||
`;
|
||||
|
||||
export const InputErrorHelper = ({
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import { renderHook } from '@testing-library/react';
|
||||
import { RecoilRoot, useSetRecoilState } from 'recoil';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
import { useIsLogged } from '@/auth/hooks/useIsLogged';
|
||||
import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
|
||||
import { isDefaultLayoutAuthModalVisibleState } from '@/ui/layout/states/isDefaultLayoutAuthModalVisibleState';
|
||||
import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
|
||||
import { OnboardingStatus, SubscriptionStatus } from '~/generated/graphql';
|
||||
import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
|
||||
@ -39,14 +38,9 @@ const setupMockIsMatchingLocation = (pathname: string) => {
|
||||
});
|
||||
};
|
||||
|
||||
const getResult = (isDefaultLayoutAuthModalVisible = true) =>
|
||||
const getResult = () =>
|
||||
renderHook(
|
||||
() => {
|
||||
const setIsDefaultLayoutAuthModalVisible = useSetRecoilState(
|
||||
isDefaultLayoutAuthModalVisibleState,
|
||||
);
|
||||
setIsDefaultLayoutAuthModalVisible(isDefaultLayoutAuthModalVisible);
|
||||
|
||||
return useShowAuthModal();
|
||||
},
|
||||
{
|
||||
@ -112,15 +106,15 @@ const testCases = [
|
||||
{ loc: AppPath.ResetPassword, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.COMPLETED, res: true },
|
||||
|
||||
{ loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: undefined, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: true },
|
||||
{ loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Canceled, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
|
||||
{ loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Unpaid, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
|
||||
{ loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.PastDue, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
|
||||
{ loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Canceled, onboardingStatus: OnboardingStatus.COMPLETED, res: true },
|
||||
{ loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Unpaid, onboardingStatus: OnboardingStatus.COMPLETED, res: true },
|
||||
{ loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.PastDue, onboardingStatus: OnboardingStatus.COMPLETED, res: true },
|
||||
{ loc: AppPath.CreateWorkspace, isLogged: false, subscriptionStatus: undefined, onboardingStatus: undefined, res: true },
|
||||
{ loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.WORKSPACE_ACTIVATION, res: true },
|
||||
{ loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.PROFILE_CREATION, res: true },
|
||||
{ loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.SYNC_EMAIL, res: true },
|
||||
{ loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.INVITE_TEAM, res: true },
|
||||
{ loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
|
||||
{ loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.COMPLETED, res: true },
|
||||
|
||||
{ loc: AppPath.CreateProfile, isLogged: true, subscriptionStatus: undefined, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: true },
|
||||
{ loc: AppPath.CreateProfile, isLogged: true, subscriptionStatus: SubscriptionStatus.Canceled, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
|
||||
@ -157,14 +151,14 @@ const testCases = [
|
||||
|
||||
{ loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: undefined, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: true },
|
||||
{ loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Canceled, onboardingStatus: OnboardingStatus.COMPLETED, res: true },
|
||||
{ loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Unpaid, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
|
||||
{ loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.PastDue, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
|
||||
{ loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Unpaid, onboardingStatus: OnboardingStatus.COMPLETED, res: true },
|
||||
{ loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.PastDue, onboardingStatus: OnboardingStatus.COMPLETED, res: true },
|
||||
{ loc: AppPath.PlanRequired, isLogged: false, subscriptionStatus: undefined, onboardingStatus: undefined, res: true },
|
||||
{ loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.WORKSPACE_ACTIVATION, res: true },
|
||||
{ loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.PROFILE_CREATION, res: true },
|
||||
{ loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.SYNC_EMAIL, res: true },
|
||||
{ loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.INVITE_TEAM, res: true },
|
||||
{ loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
|
||||
{ loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.COMPLETED, res: true },
|
||||
|
||||
{ loc: AppPath.PlanRequiredSuccess, isLogged: true, subscriptionStatus: undefined, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: true },
|
||||
{ loc: AppPath.PlanRequiredSuccess, isLogged: true, subscriptionStatus: SubscriptionStatus.Canceled, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
|
||||
@ -290,7 +284,7 @@ const testCases = [
|
||||
|
||||
describe('useShowAuthModal', () => {
|
||||
testCases.forEach((testCase) => {
|
||||
it(`testCase for location ${testCase.loc} with onboardingStatus ${testCase.onboardingStatus} should return ${testCase.res}`, () => {
|
||||
it(`testCase for location ${testCase.loc} with onboardingStatus ${testCase.onboardingStatus} and subscriptionStatus ${testCase.subscriptionStatus} should return ${testCase.res}`, () => {
|
||||
setupMockOnboardingStatus(testCase.onboardingStatus);
|
||||
setupMockSubscriptionStatus(testCase.subscriptionStatus);
|
||||
setupMockIsMatchingLocation(testCase.loc);
|
||||
@ -305,21 +299,21 @@ describe('useShowAuthModal', () => {
|
||||
});
|
||||
|
||||
describe('test with token validation loading', () => {
|
||||
it(`with appPath ${AppPath.Invite} and isDefaultLayoutAuthModalVisible=false`, () => {
|
||||
it(`with appPath ${AppPath.Invite} `, () => {
|
||||
setupMockOnboardingStatus(OnboardingStatus.COMPLETED);
|
||||
setupMockSubscriptionStatus(SubscriptionStatus.Active);
|
||||
setupMockIsMatchingLocation(AppPath.Invite);
|
||||
setupMockIsLogged(true);
|
||||
const { result } = getResult(false);
|
||||
expect(result.current).toBeFalsy();
|
||||
const { result } = getResult();
|
||||
expect(result.current).toBeTruthy();
|
||||
});
|
||||
it(`with appPath ${AppPath.ResetPassword} and isDefaultLayoutAuthModalVisible=false`, () => {
|
||||
it(`with appPath ${AppPath.ResetPassword} `, () => {
|
||||
setupMockOnboardingStatus(OnboardingStatus.COMPLETED);
|
||||
setupMockSubscriptionStatus(SubscriptionStatus.Active);
|
||||
setupMockIsMatchingLocation(AppPath.ResetPassword);
|
||||
setupMockIsLogged(true);
|
||||
const { result } = getResult(false);
|
||||
expect(result.current).toBeFalsy();
|
||||
const { result } = getResult();
|
||||
expect(result.current).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -1,40 +1,27 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { useIsLogged } from '@/auth/hooks/useIsLogged';
|
||||
import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import { isDefaultLayoutAuthModalVisibleState } from '@/ui/layout/states/isDefaultLayoutAuthModalVisibleState';
|
||||
import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { OnboardingStatus, SubscriptionStatus } from '~/generated/graphql';
|
||||
import { OnboardingStatus } from '~/generated/graphql';
|
||||
import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
|
||||
|
||||
export const useShowAuthModal = () => {
|
||||
const { isMatchingLocation } = useIsMatchingLocation();
|
||||
const isLoggedIn = useIsLogged();
|
||||
const onboardingStatus = useOnboardingStatus();
|
||||
const subscriptionStatus = useSubscriptionStatus();
|
||||
|
||||
const isDefaultLayoutAuthModalVisible = useRecoilValue(
|
||||
isDefaultLayoutAuthModalVisibleState,
|
||||
);
|
||||
|
||||
return useMemo(() => {
|
||||
if (
|
||||
isMatchingLocation(AppPath.Verify) ||
|
||||
isMatchingLocation(AppPath.VerifyEmail)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (
|
||||
isMatchingLocation(AppPath.Invite) ||
|
||||
isMatchingLocation(AppPath.ResetPassword) ||
|
||||
isMatchingLocation(AppPath.VerifyEmail) ||
|
||||
isMatchingLocation(AppPath.SignInUp)
|
||||
isMatchingLocation(AppPath.Verify) ||
|
||||
isMatchingLocation(AppPath.SignInUp) ||
|
||||
isMatchingLocation(AppPath.CreateWorkspace) ||
|
||||
isMatchingLocation(AppPath.PlanRequired)
|
||||
) {
|
||||
return isDefaultLayoutAuthModalVisible;
|
||||
return true;
|
||||
}
|
||||
|
||||
if (
|
||||
@ -48,20 +35,6 @@ export const useShowAuthModal = () => {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (isMatchingLocation(AppPath.PlanRequired)) {
|
||||
return (
|
||||
(onboardingStatus === OnboardingStatus.COMPLETED &&
|
||||
!isDefined(subscriptionStatus)) ||
|
||||
subscriptionStatus === SubscriptionStatus.Canceled
|
||||
);
|
||||
}
|
||||
|
||||
return false;
|
||||
}, [
|
||||
isLoggedIn,
|
||||
isDefaultLayoutAuthModalVisible,
|
||||
isMatchingLocation,
|
||||
onboardingStatus,
|
||||
subscriptionStatus,
|
||||
]);
|
||||
}, [isLoggedIn, isMatchingLocation, onboardingStatus]);
|
||||
};
|
||||
|
||||
@ -257,3 +257,4 @@ export const Modal = ({
|
||||
Modal.Header = ModalHeader;
|
||||
Modal.Content = ModalContent;
|
||||
Modal.Footer = ModalFooter;
|
||||
Modal.Backdrop = StyledBackDrop;
|
||||
|
||||
@ -26,7 +26,7 @@ const StyledLayout = styled.div`
|
||||
flex-direction: column;
|
||||
height: 100dvh;
|
||||
position: relative;
|
||||
scrollbar-color: ${({ theme }) => theme.border.color.medium};
|
||||
scrollbar-color: ${({ theme }) => theme.border.color.medium} transparent;
|
||||
scrollbar-width: 4px;
|
||||
width: 100%;
|
||||
|
||||
@ -105,7 +105,9 @@ export const DefaultLayout = () => {
|
||||
)}
|
||||
{showAuthModal ? (
|
||||
<>
|
||||
<SignInBackgroundMockPage />
|
||||
<StyledMainContainer>
|
||||
<SignInBackgroundMockPage />
|
||||
</StyledMainContainer>
|
||||
<AnimatePresence mode="wait">
|
||||
<LayoutGroup>
|
||||
<AuthModal isOpenAnimated={animateModal}>
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
import { createState } from 'twenty-ui/utilities';
|
||||
export const isDefaultLayoutAuthModalVisibleState = createState<boolean>({
|
||||
key: 'isDefaultLayoutAuthModalVisibleState',
|
||||
defaultValue: true,
|
||||
});
|
||||
@ -9,10 +9,10 @@ import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-sta
|
||||
|
||||
const StyledScrollWrapper = styled.div`
|
||||
&.scroll-wrapper-x-enabled {
|
||||
overflow-x: scroll;
|
||||
overflow-x: overlay;
|
||||
}
|
||||
&.scroll-wrapper-y-enabled {
|
||||
overflow-y: scroll;
|
||||
overflow-y: overlay;
|
||||
}
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
|
||||
Reference in New Issue
Block a user