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>

packages/twenty-front/src/modules/auth/hooks/__tests__/useAuth.test.tsx

@@ -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>

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

@@ -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(

packages/twenty-front/src/modules/auth/hooks/useVerifyLogin.ts

@@ -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);
     }
   };
 

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx

@@ -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 = () => {

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useWorkspaceFromInviteHash.ts

@@ -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);
         }
       },
     });