Migrate to twenty-ui - display (#8004)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-6871](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-6871).

 --- 

### Description

Migrate:

- Info display component
- Status display component
- SeparatorLineText display component

### Demo

###### SeparatorLineText In Storybook


![](https://assets-service.gitstart.com/4814/c0a2cd49-e545-469a-b3d3-c02eb462b60d.png)

Info Component on Storybook


![](https://assets-service.gitstart.com/4814/6f3019c5-99e0-4365-a81e-241294887f9e.png)

Status Component on Storybook


![](https://assets-service.gitstart.com/4814/29b5142a-468f-4d7e-88ff-4f3bfdd5abda.png)

###### Fixes twentyhq/private-issues#95

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/__stories__/AppRouter.stories.tsx

@@ -1,18 +1,18 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
-import { graphql, HttpResponse } from 'msw';
+import { HttpResponse, graphql } from 'msw';
 import { HelmetProvider } from 'react-helmet-async';
 import { RecoilRoot } from 'recoil';
-import { IconsProvider } from 'twenty-ui';
 
 import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
 import indexAppPath from '@/navigation/utils/indexAppPath';
-import { AppPath } from '@/types/AppPath';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 
 import { AppRouter } from '@/app/components/AppRouter';
+import { AppPath } from '@/types/AppPath';
+import { IconsProvider } from 'twenty-ui';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedUserData } from '~/testing/mock-data/users';
 

packages/twenty-front/src/hooks/__tests__/usePageChangeEffectNavigateLocation.test.ts

@@ -2,6 +2,7 @@ import { useIsLogged } from '@/auth/hooks/useIsLogged';
 import { useDefaultHomePagePath } from '@/navigation/hooks/useDefaultHomePagePath';
 import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
 import { AppPath } from '@/types/AppPath';
+
 import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
 import { OnboardingStatus, SubscriptionStatus } from '~/generated/graphql';
 

packages/twenty-front/src/hooks/useCleanRecoilState.ts

@@ -1,8 +1,9 @@
-import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
-import { SettingsPath } from '@/types/SettingsPath';
 import { apiKeyTokenState } from '@/settings/developers/states/generatedApiKeyTokenState';
-import { useRecoilValue, useResetRecoilState } from 'recoil';
 import { AppPath } from '@/types/AppPath';
+import { SettingsPath } from '@/types/SettingsPath';
+import { useRecoilValue, useResetRecoilState } from 'recoil';
+import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
+
 import { isDefined } from '~/utils/isDefined';
 
 export const useCleanRecoilState = () => {

packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts

@@ -10,12 +10,12 @@ import { previousUrlState } from '@/auth/states/previousUrlState';
 import { tokenPairState } from '@/auth/states/tokenPairState';
 import { workspacesState } from '@/auth/states/workspaces';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
-import { AppPath } from '@/types/AppPath';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 import { useUpdateEffect } from '~/hooks/useUpdateEffect';
 import { isDefined } from '~/utils/isDefined';
 
+import { AppPath } from '@/types/AppPath';
 import { ApolloFactory, Options } from '../services/apollo.factory';
 
 export const useApolloFactory = (options: Partial<Options<any>> = {}) => {

packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
-import { IconCheckbox } from 'twenty-ui';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import {
@@ -21,6 +20,7 @@ import { AppPath } from '@/types/AppPath';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { SettingsPath } from '@/types/SettingsPath';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { IconCheckbox } from 'twenty-ui';
 import { useCleanRecoilState } from '~/hooks/useCleanRecoilState';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 import { usePageChangeEffectNavigateLocation } from '~/hooks/usePageChangeEffectNavigateLocation';

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx

@@ -5,20 +5,20 @@ import { useParams, useSearchParams } from 'react-router-dom';
 import { Form } from '@/auth/sign-in-up/hooks/useSignInUpForm';
 import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
 import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
-import { AppPath } from '@/types/AppPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 import { isDefined } from '~/utils/isDefined';
 
-import { useAuth } from '../../hooks/useAuth';
+import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
+import { availableSSOIdentityProvidersState } from '@/auth/states/availableWorkspacesForSSO';
 import {
   SignInUpStep,
   signInUpStepState,
 } from '@/auth/states/signInUpStepState';
-import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
-import { availableSSOIdentityProvidersState } from '@/auth/states/availableWorkspacesForSSO';
+import { AppPath } from '@/types/AppPath';
+import { useAuth } from '../../hooks/useAuth';
 
 export enum SignInUpMode {
   SignIn = 'sign-in',

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

@@ -3,11 +3,12 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { AppPath } from '@/types/AppPath';
+
 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 { useGetWorkspaceFromInviteHashQuery } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
 

packages/twenty-front/src/modules/navigation/components/__stories__/AppNavigationDrawer.stories.tsx

@@ -4,13 +4,12 @@ import { MemoryRouter } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 
 import { currentMobileNavigationDrawerState } from '@/navigation/states/currentMobileNavigationDrawerState';
-import { AppPath } from '@/types/AppPath';
-
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
+import { AppPath } from '@/types/AppPath';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import {
   AppNavigationDrawer,

packages/twenty-front/src/modules/navigation/utils/__tests__/indexAppPath.test.ts

@@ -1,5 +1,4 @@
 import { AppPath } from '@/types/AppPath';
-
 import indexAppPath from '../indexAppPath';
 
 describe('getIndexAppPath', () => {

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx

@@ -2,7 +2,7 @@ import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
 import { SyncStatus } from '@/settings/accounts/constants/SyncStatus';
 import { computeSyncStatus } from '@/settings/accounts/utils/computeSyncStatus';
-import { Status } from '@/ui/display/status/components/Status';
+import { Status } from 'twenty-ui';
 import styled from '@emotion/styled';
 
 const StyledRowRightContainer = styled.div`

packages/twenty-front/src/modules/settings/accounts/hooks/useTriggerGoogleApisOAuth.ts

@@ -1,6 +1,6 @@
+import { AppPath } from '@/types/AppPath';
 import { useCallback } from 'react';
 
-import { AppPath } from '@/types/AppPath';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import {
   CalendarChannelVisibility,

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx

@@ -1,10 +1,17 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Link } from 'react-router-dom';
-import { Button, IconArrowUpRight, IconBolt, IconPlus, Pill } from 'twenty-ui';
+import {
+  Button,
+  IconArrowUpRight,
+  IconBolt,
+  IconPlus,
+  Pill,
+  Status,
+} from 'twenty-ui';
 
 import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
-import { Status } from '@/ui/display/status/components/Status';
+import { Link } from 'react-router-dom';
+
 import { isDefined } from '~/utils/isDefined';
 
 interface SettingsIntegrationComponentProps {

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus.tsx

@@ -1,5 +1,5 @@
 import { useGetDatabaseConnectionTables } from '@/databases/hooks/useGetDatabaseConnectionTables';
-import { Status } from '@/ui/display/status/components/Status';
+import { Status } from 'twenty-ui';
 import { RemoteTableStatus } from '~/generated-metadata/graphql';
 import { isDefined } from '~/utils/isDefined';
 

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx

@@ -10,7 +10,6 @@ import {
 import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { Info } from '@/ui/display/info/components/Info';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -18,7 +17,7 @@ import { Section } from '@react-email/components';
 import pick from 'lodash.pick';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import { Breadcrumb, H2Title } from 'twenty-ui';
+import { Breadcrumb, H2Title, Info } from 'twenty-ui';
 import { z } from 'zod';
 import {
   RemoteServer,

packages/twenty-front/src/modules/settings/integrations/database-connection/hooks/useDatabaseConnection.ts

@@ -1,6 +1,6 @@
+import { WatchQueryFetchPolicy } from '@apollo/client';
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { WatchQueryFetchPolicy } from '@apollo/client';
 
 import { useGetDatabaseConnection } from '@/databases/hooks/useGetDatabaseConnection';
 import { useGetDatabaseConnectionTables } from '@/databases/hooks/useGetDatabaseConnectionTables';

packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentityProviderRowRightContainer.tsx

@@ -3,7 +3,7 @@
 import { SettingsSecuritySSORowDropdownMenu } from '@/settings/security/components/SettingsSecuritySSORowDropdownMenu';
 import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProviders.state';
 import { getColorBySSOIdentityProviderStatus } from '@/settings/security/utils/getColorBySSOIdentityProviderStatus';
-import { Status } from '@/ui/display/status/components/Status';
+import { Status } from 'twenty-ui';
 import styled from '@emotion/styled';
 import { UnwrapRecoilValue } from 'recoil';
 

packages/twenty-front/src/modules/ui/display/info/components/Info.tsx

@@ -1,92 +0,0 @@
-import { css, useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { Button, IconInfoCircle } from 'twenty-ui';
-
-import { AppPath } from '@/types/AppPath';
-
-export type InfoAccent = 'blue' | 'danger';
-export type InfoProps = {
-  accent?: InfoAccent;
-  text: string;
-  buttonTitle?: string;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  to?: AppPath;
-};
-
-const StyledTextContainer = styled.div`
-  align-items: center;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledIconInfoCircle = styled(IconInfoCircle)`
-  flex-shrink: 0;
-`;
-
-const StyledInfo = styled.div<Pick<InfoProps, 'accent'>>`
-  align-items: center;
-  border-radius: ${({ theme }) => theme.border.radius.md};
-  display: flex;
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  justify-content: space-between;
-  max-width: 512px;
-  gap: ${({ theme }) => theme.spacing(2)};
-  padding: ${({ theme }) => theme.spacing(2)};
-  ${({ theme, accent }) => {
-    switch (accent) {
-      case 'blue':
-        return css`
-          background: ${theme.color.blueAccent20};
-          color: ${theme.color.blue50};
-        `;
-      case 'danger':
-        return css`
-          background: ${theme.color.red10};
-          color: ${theme.color.red};
-        `;
-    }
-  }}
-`;
-
-const StyledLink = styled(Link)`
-  text-decoration: none;
-`;
-
-export const Info = ({
-  accent = 'blue',
-  text,
-  buttonTitle,
-  onClick,
-  to,
-}: InfoProps) => {
-  const theme = useTheme();
-  return (
-    <StyledInfo accent={accent}>
-      <StyledTextContainer>
-        <StyledIconInfoCircle size={theme.icon.size.md} />
-        {text}
-      </StyledTextContainer>
-      {buttonTitle && to && (
-        <StyledLink to={to}>
-          <Button
-            title={buttonTitle}
-            size={'small'}
-            variant={'secondary'}
-            accent={accent}
-          />
-        </StyledLink>
-      )}
-      {buttonTitle && onClick && !to && (
-        <Button
-          title={buttonTitle}
-          onClick={onClick}
-          size={'small'}
-          variant={'secondary'}
-          accent={accent}
-        />
-      )}
-    </StyledInfo>
-  );
-};

packages/twenty-front/src/modules/ui/display/info/components/__stories__/Info.stories.tsx

@@ -1,43 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui';
-
-import { Info, InfoAccent } from '@/ui/display/info/components/Info';
-
-const meta: Meta<typeof Info> = {
-  title: 'UI/Display/Info',
-  component: Info,
-};
-
-export default meta;
-type Story = StoryObj<typeof Info>;
-
-export const Default: Story = {
-  args: {
-    accent: 'blue',
-    text: 'An info component',
-    buttonTitle: 'Update',
-  },
-  decorators: [ComponentDecorator],
-};
-
-export const Catalog: CatalogStory<Story, typeof Info> = {
-  args: {
-    text: 'An info component',
-    buttonTitle: 'Update',
-  },
-  argTypes: {
-    accent: { control: false },
-  },
-  parameters: {
-    catalog: {
-      dimensions: [
-        {
-          name: 'accents',
-          values: ['blue', 'danger'] satisfies InfoAccent[],
-          props: (accent: InfoAccent) => ({ accent }),
-        },
-      ],
-    },
-  },
-  decorators: [CatalogDecorator],
-};

packages/twenty-front/src/modules/ui/display/status/components/Status.tsx

@@ -1,70 +0,0 @@
-import styled from '@emotion/styled';
-import { Loader, ThemeColor, themeColorSchema } from 'twenty-ui';
-
-const StyledStatus = styled.h3<{
-  color: ThemeColor;
-  weight: 'regular' | 'medium';
-  isLoaderVisible: boolean;
-}>`
-  align-items: center;
-  background: ${({ color, theme }) => theme.tag.background[color]};
-  border-radius: ${({ theme }) => theme.border.radius.pill};
-  color: ${({ color, theme }) => theme.tag.text[color]};
-  display: inline-flex;
-  font-size: ${({ theme }) => theme.font.size.md};
-  font-style: normal;
-  font-weight: ${({ theme, weight }) => theme.font.weight[weight]};
-  gap: ${({ theme }) => theme.spacing(1)};
-  height: ${({ theme }) => theme.spacing(5)};
-  margin: 0;
-  overflow: hidden;
-  padding: 0
-    ${({ theme, isLoaderVisible }) =>
-      isLoaderVisible ? theme.spacing(1) : theme.spacing(2)}
-    0 ${({ theme }) => theme.spacing(2)};
-
-  &:before {
-    background-color: ${({ color, theme }) => theme.tag.text[color]};
-    border-radius: ${({ theme }) => theme.border.radius.rounded};
-    content: '';
-    display: block;
-    flex-shrink: 0;
-    height: ${({ theme }) => theme.spacing(1)};
-    width: ${({ theme }) => theme.spacing(1)};
-  }
-`;
-
-const StyledContent = styled.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-type StatusProps = {
-  className?: string;
-  color: ThemeColor;
-  isLoaderVisible?: boolean;
-  text: string;
-  onClick?: () => void;
-  weight?: 'regular' | 'medium';
-};
-
-export const Status = ({
-  className,
-  color,
-  isLoaderVisible = false,
-  text,
-  onClick,
-  weight = 'regular',
-}: StatusProps) => (
-  <StyledStatus
-    className={className}
-    color={themeColorSchema.catch('gray').parse(color)}
-    onClick={onClick}
-    weight={weight}
-    isLoaderVisible={isLoaderVisible}
-  >
-    <StyledContent>{text}</StyledContent>
-    {isLoaderVisible ? <Loader color={color} /> : null}
-  </StyledStatus>
-);

packages/twenty-front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx

@@ -1,68 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { expect, fn, userEvent, within } from '@storybook/test';
-import {
-  CatalogDecorator,
-  CatalogStory,
-  ComponentDecorator,
-  MAIN_COLOR_NAMES,
-  ThemeColor,
-} from 'twenty-ui';
-
-import { Status } from '../Status';
-
-const meta: Meta<typeof Status> = {
-  title: 'UI/Display/Status/Status',
-  component: Status,
-  args: {
-    text: 'Urgent',
-    weight: 'medium',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Status>;
-
-export const Default: Story = {
-  args: {
-    color: 'red',
-    onClick: fn(),
-  },
-  decorators: [ComponentDecorator],
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    const status = canvas.getByRole('heading', { level: 3 });
-
-    await userEvent.click(status);
-    expect(args.onClick).toHaveBeenCalled();
-  },
-};
-
-export const WithLongText: Story = {
-  decorators: [ComponentDecorator],
-  args: {
-    color: 'green',
-    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-  },
-  parameters: {
-    container: { width: 100 },
-  },
-};
-
-export const Catalog: CatalogStory<Story, typeof Status> = {
-  argTypes: {
-    color: { control: false },
-  },
-  parameters: {
-    catalog: {
-      dimensions: [
-        {
-          name: 'colors',
-          values: MAIN_COLOR_NAMES,
-          props: (color: ThemeColor) => ({ color }),
-        },
-      ],
-    },
-  },
-  decorators: [CatalogDecorator],
-};

packages/twenty-front/src/modules/ui/display/text/components/SeparatorLineText.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-
-const StyledContainer = styled.div`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  font-size: ${({ theme }) => theme.font.size.md};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  color: ${({ theme }) => theme.font.color.extraLight};
-
-  &:before,
-  &:after {
-    content: '';
-    height: 1px;
-    flex-grow: 1;
-    background: ${({ theme }) => theme.background.transparent.light};
-  }
-
-  &:before {
-    margin: 0 ${({ theme }) => theme.spacing(4)} 0 0;
-  }
-  &:after {
-    margin: 0 0 0 ${({ theme }) => theme.spacing(4)};
-  }
-`;
-
-export const SeparatorLineText = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
-  return <StyledContainer>{children}</StyledContainer>;
-};

packages/twenty-front/src/modules/ui/display/text/components/__stories__/SeparatorLineText.stories.tsx

@@ -1,16 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
-
-import { SeparatorLineText } from '../SeparatorLineText';
-
-const meta: Meta<typeof SeparatorLineText> = {
-  title: 'UI/Display/Text/SeparatorLineText',
-  component: SeparatorLineText,
-  args: { children: 'Or' },
-  decorators: [ComponentDecorator],
-};
-
-export default meta;
-type Story = StoryObj<typeof SeparatorLineText>;
-
-export const Default: Story = {};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/hooks/useWorkspaceSwitching.ts

@@ -1,18 +1,18 @@
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
+import { useAuth } from '@/auth/hooks/useAuth';
+import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
+import { availableSSOIdentityProvidersState } from '@/auth/states/availableWorkspacesForSSO';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import {
+  SignInUpStep,
+  signInUpStepState,
+} from '@/auth/states/signInUpStepState';
 import { tokenPairState } from '@/auth/states/tokenPairState';
 import { AppPath } from '@/types/AppPath';
 import { useGenerateJwtMutation } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
 import { sleep } from '~/utils/sleep';
-import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
-import {
-  SignInUpStep,
-  signInUpStepState,
-} from '@/auth/states/signInUpStepState';
-import { availableSSOIdentityProvidersState } from '@/auth/states/availableWorkspacesForSSO';
-import { useAuth } from '@/auth/hooks/useAuth';
 
 export const useWorkspaceSwitching = () => {
   const setTokenPair = useSetRecoilState(tokenPairState);

packages/twenty-front/src/pages/auth/Authorize.tsx

@@ -2,6 +2,7 @@ import { AppPath } from '@/types/AppPath';
 import styled from '@emotion/styled';
 import { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+
 import { MainButton, UndecoratedLink } from 'twenty-ui';
 import { useAuthorizeAppMutation } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';

packages/twenty-front/src/pages/auth/__stories__/Invite.stories.tsx

@@ -3,7 +3,6 @@ import { Meta, StoryObj } from '@storybook/react';
 import { fireEvent, within } from '@storybook/test';
 import { HttpResponse, graphql } from 'msw';
 
-import { AppPath } from '@/types/AppPath';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import { GET_WORKSPACE_FROM_INVITE_HASH } from '@/workspace/graphql/queries/getWorkspaceFromInviteHash';
 import {
@@ -12,6 +11,7 @@ import {
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
+import { AppPath } from '@/types/AppPath';
 import { Invite } from '../Invite';
 
 const meta: Meta<PageDecoratorArgs> = {

packages/twenty-front/src/pages/auth/__stories__/SignInUp.stories.tsx

@@ -1,9 +1,8 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
 import { fireEvent, within } from '@storybook/test';
-import { graphql, HttpResponse } from 'msw';
+import { HttpResponse, graphql } from 'msw';
 
-import { AppPath } from '@/types/AppPath';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import {
   PageDecorator,
@@ -11,6 +10,7 @@ import {
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
+import { AppPath } from '@/types/AppPath';
 import { SignInUp } from '../SignInUp';
 
 const meta: Meta<PageDecoratorArgs> = {

packages/twenty-front/src/pages/impersonate/ImpersonateEffect.tsx

@@ -1,6 +1,6 @@
+import { isNonEmptyString } from '@sniptt/guards';
 import { useCallback, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import { useIsLogged } from '@/auth/hooks/useIsLogged';

packages/twenty-front/src/pages/impersonate/__stories__/ImpersonateEffect.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { AppPath } from '@/types/AppPath';
 import {
   PageDecorator,
   PageDecoratorArgs,
@@ -8,6 +7,7 @@ import {
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/utils/sleep';
 
+import { AppPath } from '@/types/AppPath';
 import { ImpersonateEffect } from '../ImpersonateEffect';
 
 const meta: Meta<PageDecoratorArgs> = {

packages/twenty-front/src/pages/not-found/NotFound.tsx

@@ -1,5 +1,6 @@
 import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
 import { AppPath } from '@/types/AppPath';
+
 import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle';
 import styled from '@emotion/styled';
 import {

packages/twenty-front/src/pages/onboarding/InviteTeam.tsx

@@ -4,7 +4,6 @@ import { currentUserState } from '@/auth/states/currentUserState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { useSetNextOnboardingStatus } from '@/onboarding/hooks/useSetNextOnboardingStatus';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
-import { SeparatorLineText } from '@/ui/display/text/components/SeparatorLineText';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
@@ -27,8 +26,10 @@ import {
   IconCopy,
   LightButton,
   MainButton,
+  SeparatorLineText,
 } from 'twenty-ui';
 import { z } from 'zod';
+
 import { OnboardingStatus } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
 import { useCreateWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useCreateWorkspaceInvitation';

packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx

@@ -1,7 +1,3 @@
-import { SubTitle } from '@/auth/components/SubTitle';
-import { Title } from '@/auth/components/Title';
-import { currentUserState } from '@/auth/states/currentUserState';
-import { AppPath } from '@/types/AppPath';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
@@ -12,6 +8,11 @@ import {
   RGBA,
   UndecoratedLink,
 } from 'twenty-ui';
+
+import { SubTitle } from '@/auth/components/SubTitle';
+import { Title } from '@/auth/components/Title';
+import { currentUserState } from '@/auth/states/currentUserState';
+import { AppPath } from '@/types/AppPath';
 import { OnboardingStatus } from '~/generated/graphql';
 
 const StyledCheckContainer = styled.div`

packages/twenty-front/src/pages/onboarding/SyncEmails.tsx

@@ -1,12 +1,3 @@
-import { SubTitle } from '@/auth/components/SubTitle';
-import { Title } from '@/auth/components/Title';
-import { currentUserState } from '@/auth/states/currentUserState';
-import { OnboardingSyncEmailsSettingsCard } from '@/onboarding/components/OnboardingSyncEmailsSettingsCard';
-import { useSetNextOnboardingStatus } from '@/onboarding/hooks/useSetNextOnboardingStatus';
-import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
-import { AppPath } from '@/types/AppPath';
-import { PageHotkeyScope } from '@/types/PageHotkeyScope';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useState } from 'react';
@@ -14,6 +5,16 @@ import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { ActionLink, IconGoogle, MainButton } from 'twenty-ui';
 
+import { SubTitle } from '@/auth/components/SubTitle';
+import { Title } from '@/auth/components/Title';
+import { currentUserState } from '@/auth/states/currentUserState';
+import { OnboardingSyncEmailsSettingsCard } from '@/onboarding/components/OnboardingSyncEmailsSettingsCard';
+import { useSetNextOnboardingStatus } from '@/onboarding/hooks/useSetNextOnboardingStatus';
+import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
+import { PageHotkeyScope } from '@/types/PageHotkeyScope';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+
+import { AppPath } from '@/types/AppPath';
 import {
   CalendarChannelVisibility,
   MessageChannelVisibility,

packages/twenty-front/src/pages/onboarding/__stories__/CreateProfile.stories.tsx

@@ -1,7 +1,7 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
-import { graphql, HttpResponse } from 'msw';
+import { HttpResponse, graphql } from 'msw';
 
 import { AppPath } from '@/types/AppPath';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';

packages/twenty-front/src/pages/onboarding/__stories__/CreateWorkspace.stories.tsx

@@ -1,7 +1,7 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
-import { graphql, HttpResponse } from 'msw';
+import { HttpResponse, graphql } from 'msw';
 
 import { AppPath } from '@/types/AppPath';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';

packages/twenty-front/src/pages/onboarding/__stories__/InviteTeam.stories.tsx

@@ -1,10 +1,10 @@
+import { AppPath } from '@/types/AppPath';
 import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
-import { graphql, HttpResponse } from 'msw';
+import { HttpResponse, graphql } from 'msw';
 
 import { OnboardingStatus } from '~/generated/graphql';
-import { AppPath } from '~/modules/types/AppPath';
 import { GET_CURRENT_USER } from '~/modules/users/graphql/queries/getCurrentUser';
 import { InviteTeam } from '~/pages/onboarding/InviteTeam';
 import {

packages/twenty-front/src/pages/onboarding/__stories__/PaymentSuccess.stories.tsx

@@ -1,7 +1,7 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/testing-library';
-import { graphql, HttpResponse } from 'msw';
+import { HttpResponse, graphql } from 'msw';
 
 import { AppPath } from '@/types/AppPath';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';

packages/twenty-front/src/pages/onboarding/__stories__/SyncEmails.stories.tsx

@@ -1,10 +1,10 @@
+import { AppPath } from '@/types/AppPath';
 import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
-import { graphql, HttpResponse } from 'msw';
+import { HttpResponse, graphql } from 'msw';
 
 import { OnboardingStatus } from '~/generated/graphql';
-import { AppPath } from '~/modules/types/AppPath';
 import { GET_CURRENT_USER } from '~/modules/users/graphql/queries/getCurrentUser';
 import { SyncEmails } from '~/pages/onboarding/SyncEmails';
 import {

packages/twenty-front/src/pages/settings/SettingsBilling.tsx

@@ -6,6 +6,7 @@ import {
   IconCalendarEvent,
   IconCircleX,
   IconCreditCard,
+  Info,
 } from 'twenty-ui';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@@ -15,7 +16,6 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { Info } from '@/ui/display/info/components/Info';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';

packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx

@@ -1,3 +1,20 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { isNonEmptyArray } from '@sniptt/guards';
+import { useState } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import {
+  AppTooltip,
+  Avatar,
+  H2Title,
+  IconButton,
+  IconMail,
+  IconReload,
+  IconTrash,
+  Status,
+  TooltipDelay,
+} from 'twenty-ui';
+
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -16,25 +33,9 @@ import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
 import { WorkspaceInviteLink } from '@/workspace/components/WorkspaceInviteLink';
 import { WorkspaceInviteTeam } from '@/workspace/components/WorkspaceInviteTeam';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { isNonEmptyArray } from '@sniptt/guards';
 import { formatDistanceToNow } from 'date-fns';
-import { useState } from 'react';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-import {
-  AppTooltip,
-  Avatar,
-  H2Title,
-  IconButton,
-  IconMail,
-  IconReload,
-  IconTrash,
-  TooltipDelay,
-} from 'twenty-ui';
 import { useGetWorkspaceInvitationsQuery } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
-import { Status } from '../../modules/ui/display/status/components/Status';
 import { TableCell } from '../../modules/ui/layout/table/components/TableCell';
 import { TableRow } from '../../modules/ui/layout/table/components/TableRow';
 import { useDeleteWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useDeleteWorkspaceInvitation';

packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx

@@ -1,4 +1,12 @@
 /* eslint-disable react/jsx-props-no-spreading */
+import { zodResolver } from '@hookform/resolvers/zod';
+import pick from 'lodash.pick';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Button, H2Title, IconArchive } from 'twenty-ui';
+import { z } from 'zod';
+
 import { useLastVisitedObjectMetadataItem } from '@/navigation/hooks/useLastVisitedObjectMetadataItem';
 import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
@@ -22,14 +30,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
-import { zodResolver } from '@hookform/resolvers/zod';
-import pick from 'lodash.pick';
-import { useEffect } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-import { useNavigate, useParams } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
-import { Button, H2Title, IconArchive } from 'twenty-ui';
-import { z } from 'zod';
 import { computeMetadataNameFromLabelOrThrow } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
 
 const objectEditFormSchema = z
@@ -81,8 +82,8 @@ export const SettingsObjectEdit = () => {
   ) => {
     let values = formValues;
     if (
-      formValues.shouldSyncLabelAndName ??
-      activeObjectMetadataItem.shouldSyncLabelAndName
+      formValues.shouldSyncLabelAndName === true ||
+      activeObjectMetadataItem.shouldSyncLabelAndName === true
     ) {
       values = {
         ...values,

packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx

@@ -1,3 +1,13 @@
+import { useApolloClient } from '@apollo/client';
+import { zodResolver } from '@hookform/resolvers/zod';
+import omit from 'lodash.omit';
+import pick from 'lodash.pick';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Button, H2Title, IconArchive, IconArchiveOff } from 'twenty-ui';
+import { z } from 'zod';
+
 import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
@@ -23,15 +33,6 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { useApolloClient } from '@apollo/client';
-import { zodResolver } from '@hookform/resolvers/zod';
-import omit from 'lodash.omit';
-import pick from 'lodash.pick';
-import { useEffect } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-import { useNavigate, useParams } from 'react-router-dom';
-import { Button, H2Title, IconArchive, IconArchiveOff } from 'twenty-ui';
-import { z } from 'zod';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { isDefined } from '~/utils/isDefined';
 

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx

@@ -2,7 +2,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
-import { H2Title } from 'twenty-ui';
 import { z } from 'zod';
 
 import { useCreateOneDatabaseConnection } from '@/databases/hooks/useCreateOneDatabaseConnection';
@@ -23,6 +22,7 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
+import { H2Title } from 'twenty-ui';
 import { CreateRemoteServerInput } from '~/generated-metadata/graphql';
 
 const createRemoteServerInputPostgresSchema =