Remove step 1 of new object field (#7397)

fixes #7356 
fixes #6967 
fixes #7102
fixes #7121 
fixes #7505

packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx

@@ -1,6 +1,7 @@
 import { lazy, Suspense } from 'react';
 import { Route, Routes } from 'react-router-dom';
 
+import { SettingsSkeletonLoader } from '@/settings/components/SettingsSkeletonLoader';
 import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
 
@@ -202,22 +203,21 @@ const SettingsIntegrationShowDatabaseConnection = lazy(() =>
   })),
 );
 
-const SettingsObjectNewFieldStep1 = lazy(() =>
+const SettingsObjectNewFieldSelect = lazy(() =>
   import(
-    '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1'
+    '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect'
   ).then((module) => ({
-    default: module.SettingsObjectNewFieldStep1,
+    default: module.SettingsObjectNewFieldSelect,
   })),
 );
 
-const SettingsObjectNewFieldStep2 = lazy(() =>
+const SettingsObjectNewFieldConfigure = lazy(() =>
   import(
-    '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2'
+    '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure'
   ).then((module) => ({
-    default: module.SettingsObjectNewFieldStep2,
+    default: module.SettingsObjectNewFieldConfigure,
   })),
 );
-
 const SettingsObjectFieldEdit = lazy(() =>
   import('~/pages/settings/data-model/SettingsObjectFieldEdit').then(
     (module) => ({
@@ -245,7 +245,7 @@ export const SettingsRoutes = ({
   isCRMMigrationEnabled,
   isServerlessFunctionSettingsEnabled,
 }: SettingsRoutesProps) => (
-  <Suspense fallback={null}>
+  <Suspense fallback={<SettingsSkeletonLoader />}>
     <Routes>
       <Route path={SettingsPath.ProfilePage} element={<SettingsProfile />} />
       <Route path={SettingsPath.Appearance} element={<SettingsAppearance />} />
@@ -345,12 +345,12 @@ export const SettingsRoutes = ({
         element={<SettingsIntegrationShowDatabaseConnection />}
       />
       <Route
-        path={SettingsPath.ObjectNewFieldStep1}
+        path={SettingsPath.ObjectNewFieldSelect}
-        element={<SettingsObjectNewFieldStep1 />}
+        element={<SettingsObjectNewFieldSelect />}
       />
       <Route
-        path={SettingsPath.ObjectNewFieldStep2}
+        path={SettingsPath.ObjectNewFieldConfigure}
-        element={<SettingsObjectNewFieldStep2 />}
+        element={<SettingsObjectNewFieldConfigure />}
       />
       <Route
         path={SettingsPath.ObjectFieldEdit}

packages/twenty-front/src/modules/object-metadata/utils/getDisabledFieldMetadataItems.ts

@@ -1,9 +0,0 @@
-import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-
-export const getDisabledFieldMetadataItems = (
-  objectMetadataItem: Pick<ObjectMetadataItem, 'fields'>,
-) =>
-  objectMetadataItem.fields.filter(
-    (fieldMetadataItem) =>
-      !fieldMetadataItem.isActive && !fieldMetadataItem.isSystem,
-  );

packages/twenty-front/src/modules/settings/components/SettingsSkeletonLoader.tsx

@@ -0,0 +1,52 @@
+import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
+import { PageBody } from '@/ui/layout/page/PageBody';
+import { PageHeader } from '@/ui/layout/page/PageHeader';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const StyledTitleLoaderContainer = styled.div`
+  margin: ${({ theme }) => theme.spacing(8, 8, 2)};
+`;
+
+export const SettingsSkeletonLoader = () => {
+  const theme = useTheme();
+  return (
+    <StyledContainer>
+      <PageHeader
+        title={
+          <SkeletonTheme
+            baseColor={theme.background.tertiary}
+            highlightColor={theme.background.transparent.lighter}
+            borderRadius={4}
+          >
+            <Skeleton
+              height={SKELETON_LOADER_HEIGHT_SIZES.standard.m}
+              width={120}
+            />{' '}
+          </SkeletonTheme>
+        }
+      />
+      <PageBody>
+        <StyledTitleLoaderContainer>
+          <SkeletonTheme
+            baseColor={theme.background.tertiary}
+            highlightColor={theme.background.transparent.lighter}
+            borderRadius={4}
+          >
+            <Skeleton
+              height={SKELETON_LOADER_HEIGHT_SIZES.standard.m}
+              width={200}
+            />
+          </SkeletonTheme>
+        </StyledTitleLoaderContainer>
+      </PageBody>
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx

@@ -6,20 +6,17 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { IconChevronDown } from 'twenty-ui';
 
-type SettingsDataModelNewFieldBreadcrumbDropDownProps = {
-  isConfigureStep: boolean;
-  onBreadcrumbClick: (isConfigureStep: boolean) => void;
-};
-
 const StyledContainer = styled.div`
   align-items: center;
-  color: ${({ theme }) => theme.font.color.secondary};
+  color: ${({ theme }) => theme.font.color.tertiary};
   cursor: pointer;
   display: flex;
   font-size: ${({ theme }) => theme.font.size.md};
 `;
+
 const StyledButtonContainer = styled.div`
   position: relative;
   width: 100%;
@@ -48,19 +45,24 @@ const StyledButton = styled(Button)`
   padding-right: ${({ theme }) => theme.spacing(6)};
 `;
 
-export const SettingsDataModelNewFieldBreadcrumbDropDown = ({
+export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
-  isConfigureStep,
-  onBreadcrumbClick,
-}: SettingsDataModelNewFieldBreadcrumbDropDownProps) => {
   const dropdownId = `settings-object-new-field-breadcrumb-dropdown`;
-
   const { closeDropdown } = useDropdown(dropdownId);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { objectSlug = '' } = useParams();
+  const theme = useTheme();
 
-  const handleClick = (step: boolean) => {
+  const isConfigureStep = location.pathname.includes('/configure');
-    onBreadcrumbClick(step);
+
+  const handleClick = (isConfigureStep: boolean) => {
+    if (isConfigureStep) {
+      navigate(`/settings/objects/${objectSlug}/new-field/configure`);
+    } else {
+      navigate(`/settings/objects/${objectSlug}/new-field/select`);
+    }
     closeDropdown();
   };
-  const theme = useTheme();
 
   return (
     <StyledContainer>

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx

@@ -10,36 +10,25 @@ import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fiel
 import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/select/hooks/useSelectSettingsFormInitialValues';
 import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
 import { TextInput } from '@/ui/input/components/TextInput';
+import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
 import { useState } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { H2Title, IconSearch } from 'twenty-ui';
-import { z } from 'zod';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
+import { SettingsDataModelFieldTypeFormValues } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect';
 
-export const settingsDataModelFieldTypeFormSchema = z.object({
+type SettingsObjectNewFieldSelectorProps = {
-  type: z.enum(
-    Object.keys(SETTINGS_FIELD_TYPE_CONFIGS) as [
-      SettingsFieldType,
-      ...SettingsFieldType[],
-    ],
-  ),
-});
-
-export type SettingsDataModelFieldTypeFormValues = z.infer<
-  typeof settingsDataModelFieldTypeFormSchema
->;
-
-type SettingsDataModelFieldTypeSelectProps = {
   className?: string;
   excludedFieldTypes?: SettingsFieldType[];
   fieldMetadataItem?: Pick<
     FieldMetadataItem,
     'defaultValue' | 'options' | 'type'
   >;
-  onFieldTypeSelect: () => void;
+
+  objectSlug: string;
 };
 
 const StyledTypeSelectContainer = styled.div`
@@ -68,12 +57,11 @@ const StyledSearchInput = styled(TextInput)`
   width: 100%;
 `;
 
-export const SettingsDataModelFieldTypeSelect = ({
+export const SettingsObjectNewFieldSelector = ({
-  className,
   excludedFieldTypes = [],
   fieldMetadataItem,
-  onFieldTypeSelect,
+  objectSlug,
-}: SettingsDataModelFieldTypeSelectProps) => {
+}: SettingsObjectNewFieldSelectorProps) => {
   const theme = useTheme();
   const { control } = useFormContext<SettingsDataModelFieldTypeFormValues>();
   const [searchQuery, setSearchQuery] = useState('');
@@ -112,59 +100,60 @@ export const SettingsDataModelFieldTypeSelect = ({
   };
 
   return (
-    <Controller
+    <>
-      name="type"
+      {' '}
-      control={control}
+      <Section>
-      defaultValue={
+        <StyledSearchInput
-        fieldMetadataItem && fieldMetadataItem.type in fieldTypeConfigs
+          LeftIcon={IconSearch}
-          ? (fieldMetadataItem.type as SettingsFieldType)
+          placeholder="Search a type"
-          : FieldMetadataType.Text
+          value={searchQuery}
-      }
+          onChange={setSearchQuery}
-      render={({ field: { onChange } }) => (
+        />
-        <StyledTypeSelectContainer className={className}>
+      </Section>
-          <Section>
+      <Controller
-            <StyledSearchInput
+        name="type"
-              LeftIcon={IconSearch}
+        control={control}
-              placeholder="Search a type"
+        render={() => (
-              value={searchQuery}
+          <StyledTypeSelectContainer>
-              onChange={setSearchQuery}
+            {SETTINGS_FIELD_TYPE_CATEGORIES.map((category) => (
-            />
+              <Section key={category}>
-          </Section>
+                <H2Title
-          {SETTINGS_FIELD_TYPE_CATEGORIES.map((category) => (
+                  title={category}
-            <Section key={category}>
+                  description={
-              <H2Title
+                    SETTINGS_FIELD_TYPE_CATEGORY_DESCRIPTIONS[category]
-                title={category}
+                  }
-                description={
+                />
-                  SETTINGS_FIELD_TYPE_CATEGORY_DESCRIPTIONS[category]
+                <StyledContainer>
-                }
+                  {fieldTypeConfigs
-              />
+                    .filter(([, config]) => config.category === category)
-              <StyledContainer>
+                    .map(([key, config]) => (
-                {fieldTypeConfigs
+                      <StyledCardContainer key={key}>
-                  .filter(([, config]) => config.category === category)
+                        <UndecoratedLink
-                  .map(([key, config]) => (
+                          to={`/settings/objects/${objectSlug}/new-field/configure?fieldType=${key}`}
-                    <StyledCardContainer>
+                          fullWidth
-                      <SettingsCard
+                          onClick={() =>
-                        key={key}
+                            resetDefaultValueField(key as SettingsFieldType)
-                        onClick={() => {
+                          }
-                          onChange(key as SettingsFieldType);
+                        >
-                          resetDefaultValueField(key as SettingsFieldType);
+                          <SettingsCard
-                          onFieldTypeSelect();
+                            key={key}
-                        }}
+                            Icon={
-                        Icon={
+                              <config.Icon
-                          <config.Icon
+                                size={theme.icon.size.xl}
-                            size={theme.icon.size.xl}
+                                stroke={theme.icon.stroke.sm}
-                            stroke={theme.icon.stroke.sm}
+                              />
+                            }
+                            title={config.label}
                           />
-                        }
+                        </UndecoratedLink>
-                        title={config.label}
+                      </StyledCardContainer>
-                      />
+                    ))}
-                    </StyledCardContainer>
+                </StyledContainer>
-                  ))}
+              </Section>
-              </StyledContainer>
+            ))}
-            </Section>
+          </StyledTypeSelectContainer>
-          ))}
+        )}
-        </StyledTypeSelectContainer>
+      />
-      )}
+    </>
-    />
   );
 };

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldTypeSelect.stories.tsx

@@ -1,58 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
-import { ComponentDecorator } from 'twenty-ui';
-
-import { FieldMetadataType } from '~/generated-metadata/graphql';
-import { FormProviderDecorator } from '~/testing/decorators/FormProviderDecorator';
-import { graphqlMocks } from '~/testing/graphqlMocks';
-
-import { SettingsDataModelFieldTypeSelect } from '../SettingsDataModelFieldTypeSelect';
-
-const meta: Meta<typeof SettingsDataModelFieldTypeSelect> = {
-  title:
-    'Modules/Settings/DataModel/Fields/Forms/SettingsDataModelFieldTypeSelect',
-  component: SettingsDataModelFieldTypeSelect,
-  decorators: [FormProviderDecorator, ComponentDecorator],
-  parameters: {
-    container: { width: 512 },
-    msw: graphqlMocks,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof SettingsDataModelFieldTypeSelect>;
-
-export const Default: Story = {};
-
-export const WithOpenSelect: Story = {
-  play: async () => {
-    const canvas = within(document.body);
-
-    const inputField = await canvas.findByText('Text');
-
-    await userEvent.click(inputField);
-
-    const input = await canvas.findByText('Unique ID');
-    await userEvent.click(input);
-
-    await userEvent.click(inputField);
-  },
-};
-
-export const WithExcludedFieldTypes: Story = {
-  args: {
-    excludedFieldTypes: [FieldMetadataType.Uuid, FieldMetadataType.Numeric],
-  },
-  play: async () => {
-    const canvas = within(document.body);
-
-    const inputField = await canvas.findByText('Text');
-
-    await userEvent.click(inputField);
-
-    await canvas.findByText('Number');
-
-    expect(canvas.queryByText('Unique ID')).toBeNull();
-    expect(canvas.queryByText('Numeric')).toBeNull();
-  },
-};

packages/twenty-front/src/modules/settings/data-model/fields/forms/validation-schemas/settingsFieldFormSchema.ts

@@ -1,9 +1,8 @@
-import { z } from 'zod';
-
 import { settingsDataModelFieldDescriptionFormSchema } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm';
 import { settingsDataModelFieldIconLabelFormSchema } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm';
 import { settingsDataModelFieldSettingsFormSchema } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard';
-import { settingsDataModelFieldTypeFormSchema } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect';
+import { z } from 'zod';
+import { settingsDataModelFieldTypeFormSchema } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect';
 
 export const settingsFieldFormSchema = (existingOtherLabels?: string[]) => {
   return z

packages/twenty-front/src/modules/types/SettingsPath.ts

@@ -12,8 +12,8 @@ export enum SettingsPath {
   ObjectOverview = 'objects/overview',
   ObjectDetail = 'objects/:objectSlug',
   ObjectEdit = 'objects/:objectSlug/edit',
-  ObjectNewFieldStep1 = 'objects/:objectSlug/new-field/step-1',
+  ObjectNewFieldSelect = 'objects/:objectSlug/new-field/select',
-  ObjectNewFieldStep2 = 'objects/:objectSlug/new-field/step-2',
+  ObjectNewFieldConfigure = 'objects/:objectSlug/new-field/configure',
   ObjectFieldEdit = 'objects/:objectSlug/:fieldSlug',
   NewObject = 'objects/new',
   NewServerlessFunction = 'functions/new',

packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { JSX, ReactNode } from 'react';
-import { IconComponent } from 'twenty-ui';
 
 import { InformationBannerWrapper } from '@/information-banner/components/InformationBannerWrapper';
 import {
@@ -14,7 +13,6 @@ type SubMenuTopBarContainerProps = {
   children: JSX.Element | JSX.Element[];
   title?: string;
   actionButton?: ReactNode;
-  Icon: IconComponent;
   className?: string;
   links: BreadcrumbProps['links'];
 };

packages/twenty-front/src/modules/views/view-picker/hooks/useGetAvailableFieldsForKanban.ts

@@ -38,7 +38,7 @@ export const useGetAvailableFieldsForKanban = () => {
       navigate(
         `/settings/objects/${getObjectSlug(
           objectMetadataItem,
-        )}/new-field/step-2?fieldType=${FieldMetadataType.Select}`,
+        )}/new-field/configure?fieldType=${FieldMetadataType.Select}`,
       );
     } else {
       navigate(`/settings/objects`);

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

@@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react';
 import rehypeStringify from 'rehype-stringify';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
-import { IconRocket } from 'twenty-ui';
 import { unified } from 'unified';
 import { visit } from 'unist-util-visit';
 
@@ -107,7 +106,6 @@ export const Releases = () => {
 
   return (
     <SubMenuTopBarContainer
-      Icon={IconRocket}
       title="Releases"
       links={[
         {

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

@@ -5,7 +5,6 @@ import {
   IconCalendarEvent,
   IconCircleX,
   IconCreditCard,
-  IconCurrencyDollar,
 } from 'twenty-ui';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@@ -137,7 +136,6 @@ export const SettingsBilling = () => {
 
   return (
     <SubMenuTopBarContainer
-      Icon={IconCurrencyDollar}
       title="Billing"
       links={[
         {

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

@@ -1,4 +1,4 @@
-import { H2Title, IconUserCircle } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { ChangePassword } from '@/settings/profile/components/ChangePassword';
@@ -13,7 +13,6 @@ import { Section } from '@/ui/layout/section/components/Section';
 
 export const SettingsProfile = () => (
   <SubMenuTopBarContainer
-    Icon={IconUserCircle}
     title="Profile"
     links={[
       {

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

@@ -1,4 +1,4 @@
-import { H2Title, IconSettings } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace';
@@ -13,7 +13,6 @@ import { GithubVersionLink } from '@/ui/navigation/link/components/GithubVersion
 
 export const SettingsWorkspace = () => (
   <SubMenuTopBarContainer
-    Icon={IconSettings}
     title="General"
     links={[
       {

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

@@ -1,17 +1,16 @@
+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 {
-  H2Title,
-  IconTrash,
-  IconUsers,
-  IconReload,
-  IconMail,
   Avatar,
+  H2Title,
+  IconMail,
+  IconReload,
+  IconTrash,
   MOBILE_VIEWPORT,
 } from 'twenty-ui';
-import { isNonEmptyArray } from '@sniptt/guards';
-import { useTheme } from '@emotion/react';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@@ -21,26 +20,26 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { IconButton } from '@/ui/input/button/components/IconButton';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
+import { Table } from '@/ui/layout/table/components/Table';
+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 { useGetWorkspaceInvitationsQuery } from '~/generated/graphql';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Table } from '@/ui/layout/table/components/Table';
-import { TableHeader } from '@/ui/layout/table/components/TableHeader';
-import { workspaceInvitationsState } from '../../modules/workspace-invitation/states/workspaceInvitationsStates';
-import { TableRow } from '../../modules/ui/layout/table/components/TableRow';
-import { TableCell } from '../../modules/ui/layout/table/components/TableCell';
-import { Status } from '../../modules/ui/display/status/components/Status';
 import { formatDistanceToNow } from 'date-fns';
-import { useResendWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useResendWorkspaceInvitation';
+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';
+import { useResendWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useResendWorkspaceInvitation';
+import { workspaceInvitationsState } from '../../modules/workspace-invitation/states/workspaceInvitationsStates';
 
 const StyledButtonContainer = styled.div`
   align-items: center;
@@ -167,7 +166,6 @@ export const SettingsWorkspaceMembers = () => {
 
   return (
     <SubMenuTopBarContainer
-      Icon={IconUsers}
       title="Members"
       links={[
         {

packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx

@@ -1,5 +1,5 @@
 import { useRecoilValue } from 'recoil';
-import { H2Title, IconAt } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';
 
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
@@ -36,7 +36,6 @@ export const SettingsAccounts = () => {
 
   return (
     <SubMenuTopBarContainer
-      Icon={IconAt}
       title="Account"
       links={[
         {

packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx

@@ -4,12 +4,10 @@ import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { IconCalendarEvent } from 'twenty-ui';
 
 export const SettingsAccountsCalendars = () => {
   return (
     <SubMenuTopBarContainer
-      Icon={IconCalendarEvent}
       title="Calendars"
       links={[
         {

packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmails.tsx

@@ -4,11 +4,9 @@ import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { IconMail } from 'twenty-ui';
 
 export const SettingsAccountsEmails = () => (
   <SubMenuTopBarContainer
-    Icon={IconMail}
     title="Emails"
     links={[
       {

packages/twenty-front/src/pages/settings/accounts/SettingsNewAccount.tsx

@@ -3,12 +3,10 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
-import { IconAt } from 'twenty-ui';
 
 export const SettingsNewAccount = () => {
   return (
     <SubMenuTopBarContainer
-      Icon={IconAt}
       title="New Account"
       links={[
         {

packages/twenty-front/src/pages/settings/crm-migration/SettingsCRMMigration.tsx

@@ -1,6 +1,5 @@
 // @ts-expect-error external library has a typing issue
 import { RevertConnect } from '@revertdotdev/revert-react';
-import { IconSettings } from 'twenty-ui';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
@@ -18,7 +17,6 @@ export const SettingsCRMMigration = () => {
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
   return (
     <SubMenuTopBarContainer
-      Icon={IconSettings}
       title="Migrate"
       links={[
         {

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

@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import { H2Title, IconHierarchy2 } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';
 import { z } from 'zod';
 
 import { useCreateOneObjectMetadataItem } from '@/object-metadata/hooks/useCreateOneObjectMetadataItem';
@@ -69,7 +69,6 @@ export const SettingsNewObject = () => {
     // eslint-disable-next-line react/jsx-props-no-spreading
     <FormProvider {...formConfig}>
       <SubMenuTopBarContainer
-        Icon={IconHierarchy2}
         title="New Object"
         links={[
           {

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

@@ -1,6 +1,5 @@
 import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { getDisabledFieldMetadataItems } from '@/object-metadata/utils/getDisabledFieldMetadataItems';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsObjectSummaryCard } from '@/settings/data-model/object-details/components/SettingsObjectSummaryCard';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@@ -10,9 +9,8 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
 import { Section } from '@/ui/layout/section/components/Section';
 import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import styled from '@emotion/styled';
-import { isNonEmptyArray } from '@sniptt/guards';
 import { useNavigate } from 'react-router-dom';
-import { H2Title, IconHierarchy2, IconPlus } from 'twenty-ui';
+import { H2Title, IconPlus } from 'twenty-ui';
 import { SettingsObjectFieldTable } from '~/pages/settings/data-model/SettingsObjectFieldTable';
 
 const StyledDiv = styled.div`
@@ -40,14 +38,10 @@ export const SettingsObjectDetailPageContent = ({
     navigate(getSettingsPagePath(SettingsPath.Objects));
   };
 
-  const disabledFieldMetadataItems =
-    getDisabledFieldMetadataItems(objectMetadataItem);
-
   const shouldDisplayAddFieldButton = !objectMetadataItem.isRemote;
 
   return (
     <SubMenuTopBarContainer
-      Icon={IconHierarchy2}
       title={objectMetadataItem.labelPlural}
       links={[
         {
@@ -80,13 +74,7 @@ export const SettingsObjectDetailPageContent = ({
           />
           {shouldDisplayAddFieldButton && (
             <StyledDiv>
-              <UndecoratedLink
+              <UndecoratedLink to={'./new-field/select'}>
-                to={
-                  isNonEmptyArray(disabledFieldMetadataItems)
-                    ? './new-field/step-1'
-                    : './new-field/step-2'
-                }
-              >
                 <Button
                   Icon={IconPlus}
                   title="Add Field"

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

@@ -5,7 +5,7 @@ import pick from 'lodash.pick';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
-import { H2Title, IconArchive, IconHierarchy2 } from 'twenty-ui';
+import { H2Title, IconArchive } from 'twenty-ui';
 import { z } from 'zod';
 
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
@@ -107,7 +107,6 @@ export const SettingsObjectEdit = () => {
     <RecordFieldValueSelectorContextProvider>
       <FormProvider {...formConfig}>
         <SubMenuTopBarContainer
-          Icon={IconHierarchy2}
           title="Edit"
           links={[
             {

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

@@ -5,12 +5,7 @@ import pick from 'lodash.pick';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
-import {
+import { H2Title, IconArchive, IconArchiveOff } from 'twenty-ui';
-  H2Title,
-  IconArchive,
-  IconArchiveOff,
-  IconHierarchy2,
-} from 'twenty-ui';
 import { z } from 'zod';
 
 import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
@@ -186,7 +181,6 @@ export const SettingsObjectFieldEdit = () => {
       {/* eslint-disable-next-line react/jsx-props-no-spreading */}
       <FormProvider {...formConfig}>
         <SubMenuTopBarContainer
-          Icon={IconHierarchy2}
           title={fieldMetadataItem?.label}
           links={[
             {

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

@@ -11,7 +11,6 @@ import { FIELD_NAME_MAXIMUM_LENGTH } from '@/settings/data-model/constants/Field
 import { SettingsDataModelFieldDescriptionForm } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm';
 import { SettingsDataModelFieldIconLabelForm } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm';
 import { SettingsDataModelFieldSettingsFormCard } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard';
-import { SettingsDataModelFieldTypeSelect } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect';
 import { settingsFieldFormSchema } from '@/settings/data-model/fields/forms/validation-schemas/settingsFieldFormSchema';
 import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
 import { AppPath } from '@/types/AppPath';
@@ -22,42 +21,36 @@ import { Section } from '@/ui/layout/section/components/Section';
 import { View } from '@/views/types/View';
 import { ViewType } from '@/views/types/ViewType';
 import { useApolloClient } from '@apollo/client';
-import styled from '@emotion/styled';
 import { zodResolver } from '@hookform/resolvers/zod';
 import pick from 'lodash.pick';
 import { useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
-import { H1Title, H1TitleFontColor, H2Title, IconHierarchy2 } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';
 import { z } from 'zod';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
-import { isDefined } from '~/utils/isDefined';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
-// TODO: fix this type
 type SettingsDataModelNewFieldFormValues = z.infer<
   ReturnType<typeof settingsFieldFormSchema>
 > &
   any;
 
-const StyledH1Title = styled(H1Title)`
+export const SettingsObjectNewFieldConfigure = () => {
-  margin-bottom: 0;
-  padding-top: ${({ theme }) => theme.spacing(3)};
-`;
-export const SettingsObjectNewFieldStep2 = () => {
   const navigate = useNavigate();
   const { objectSlug = '' } = useParams();
   const [searchParams] = useSearchParams();
-  const fieldType = searchParams.get('fieldType') as SettingsFieldType;
+  const fieldType =
+    (searchParams.get('fieldType') as SettingsFieldType) ||
+    FieldMetadataType.Text;
   const { enqueueSnackBar } = useSnackBar();
 
-  const [isConfigureStep, setIsConfigureStep] = useState(false);
   const { findActiveObjectMetadataItemBySlug } =
     useFilteredObjectMetadataItems();
-
   const activeObjectMetadataItem =
     findActiveObjectMetadataItemBySlug(objectSlug);
   const { createMetadataField } = useFieldMetadataItem();
+  const apolloClient = useApolloClient();
 
   const formConfig = useForm<SettingsDataModelNewFieldFormValues>({
     mode: 'onTouched',
@@ -66,14 +59,14 @@ export const SettingsObjectNewFieldStep2 = () => {
         activeObjectMetadataItem?.fields.map((value) => value.name),
       ),
     ),
+    defaultValues: {
+      type: fieldType,
+      icon: 'IconUsers',
+      label: '',
+      description: '',
+    },
   });
 
-  useEffect(() => {
-    if (!activeObjectMetadataItem) {
-      navigate(AppPath.NotFound);
-    }
-  }, [activeObjectMetadataItem, navigate]);
-
   const [, setObjectViews] = useState<View[]>([]);
   const [, setRelationObjectViews] = useState<View[]>([]);
 
@@ -85,7 +78,6 @@ export const SettingsObjectNewFieldStep2 = () => {
     },
     onCompleted: async (views) => {
       if (isUndefinedOrNull(views)) return;
-
       setObjectViews(views);
     },
   });
@@ -103,15 +95,17 @@ export const SettingsObjectNewFieldStep2 = () => {
     },
     onCompleted: async (views) => {
       if (isUndefinedOrNull(views)) return;
-
       setRelationObjectViews(views);
     },
   });
-
   const { createOneRelationMetadataItem: createOneRelationMetadata } =
     useCreateOneRelationMetadataItem();
 
-  const apolloClient = useApolloClient();
+  useEffect(() => {
+    if (!activeObjectMetadataItem) {
+      navigate(AppPath.NotFound);
+    }
+  }, [activeObjectMetadataItem, navigate]);
 
   if (!activeObjectMetadataItem) return null;
 
@@ -160,17 +154,7 @@ export const SettingsObjectNewFieldStep2 = () => {
       });
     }
   };
-
+  if (!activeObjectMetadataItem) return null;
-  const excludedFieldTypes: SettingsFieldType[] = (
-    [
-      FieldMetadataType.Link,
-      FieldMetadataType.Numeric,
-      FieldMetadataType.RichText,
-      FieldMetadataType.Actor,
-      FieldMetadataType.Email,
-      FieldMetadataType.Phone,
-    ] as const
-  ).filter(isDefined);
 
   return (
     <RecordFieldValueSelectorContextProvider>
@@ -178,96 +162,57 @@ export const SettingsObjectNewFieldStep2 = () => {
         {...formConfig}
       >
         <SubMenuTopBarContainer
-          Icon={IconHierarchy2}
+          title="2. Configure field"
           links={[
-            {
+            { children: 'Workspace', href: '/settings/workspace' },
-              children: 'Objects',
+            { children: 'Objects', href: '/settings/objects' },
-              href: '/settings/objects',
-            },
             {
               children: activeObjectMetadataItem.labelPlural,
               href: `/settings/objects/${objectSlug}`,
             },
-            {
+
-              children: (
+            { children: <SettingsDataModelNewFieldBreadcrumbDropDown /> },
-                <SettingsDataModelNewFieldBreadcrumbDropDown
-                  isConfigureStep={isConfigureStep}
-                  onBreadcrumbClick={setIsConfigureStep}
-                />
-              ),
-            },
           ]}
           actionButton={
-            !activeObjectMetadataItem.isRemote && (
+            <SaveAndCancelButtons
-              <SaveAndCancelButtons
+              isSaveDisabled={!canSave}
-                isSaveDisabled={!canSave}
+              isCancelDisabled={isSubmitting}
-                isCancelDisabled={isSubmitting}
+              onCancel={() =>
-                onCancel={() => {
+                navigate(`/settings/objects/${objectSlug}/new-field/select`)
-                  if (!isConfigureStep) {
+              }
-                    navigate(`/settings/objects/${objectSlug}`);
+              onSave={formConfig.handleSubmit(handleSave)}
-                  } else {
+            />
-                    setIsConfigureStep(false);
-                  }
-                }}
-                onSave={formConfig.handleSubmit(handleSave)}
-              />
-            )
           }
         >
           <SettingsPageContainer>
-            <StyledH1Title
+            <Section>
-              title={
+              <H2Title
-                !isConfigureStep
+                title="Icon and Name"
-                  ? '1. Select a field type'
+                description="The name and icon of this field"
-                  : '2. Configure field'
+              />
-              }
+              <SettingsDataModelFieldIconLabelForm
-              fontColor={H1TitleFontColor.Primary}
+                maxLength={FIELD_NAME_MAXIMUM_LENGTH}
-            />
+              />
-
+            </Section>
-            {!isConfigureStep ? (
+            <Section>
-              <SettingsDataModelFieldTypeSelect
+              <H2Title title="Values" description="The values of this field" />
-                excludedFieldTypes={excludedFieldTypes}
+              <SettingsDataModelFieldSettingsFormCard
+                isCreatingField
                 fieldMetadataItem={{
+                  icon: formConfig.watch('icon'),
+                  label: formConfig.watch('label') || 'New Field',
                   type: fieldType as FieldMetadataType,
                 }}
-                onFieldTypeSelect={() => setIsConfigureStep(true)}
+                objectMetadataItem={activeObjectMetadataItem}
               />
-            ) : (
+            </Section>
-              <>
+            <Section>
-                <Section>
+              <H2Title
-                  <H2Title
+                title="Description"
-                    title="Icon and Name"
+                description="The description of this field"
-                    description="The name and icon of this field"
+              />
-                  />
+              <SettingsDataModelFieldDescriptionForm />
-                  <SettingsDataModelFieldIconLabelForm
+            </Section>
-                    maxLength={FIELD_NAME_MAXIMUM_LENGTH}
-                  />
-                </Section>
-                <Section>
-                  <H2Title
-                    title="Values"
-                    description="The values of this field"
-                  />
-
-                  <SettingsDataModelFieldSettingsFormCard
-                    isCreatingField
-                    fieldMetadataItem={{
-                      icon: formConfig.watch('icon'),
-                      label: formConfig.watch('label') || 'Employees',
-                      type: formConfig.watch('type'),
-                    }}
-                    objectMetadataItem={activeObjectMetadataItem}
-                  />
-                </Section>
-                <Section>
-                  <H2Title
-                    title="Description"
-                    description="The description of this field"
-                  />
-                  <SettingsDataModelFieldDescriptionForm />
-                </Section>
-              </>
-            )}
           </SettingsPageContainer>
         </SubMenuTopBarContainer>
       </FormProvider>

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

@@ -0,0 +1,90 @@
+import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
+import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { SettingsDataModelNewFieldBreadcrumbDropDown } from '@/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown';
+import { SETTINGS_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsFieldTypeConfigs';
+import { SettingsObjectNewFieldSelector } from '@/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector';
+import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
+import { AppPath } from '@/types/AppPath';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+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 { isDefined } from 'twenty-ui';
+import { z } from 'zod';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
+
+export const settingsDataModelFieldTypeFormSchema = z.object({
+  type: z.enum(
+    Object.keys(SETTINGS_FIELD_TYPE_CONFIGS) as [
+      SettingsFieldType,
+      ...SettingsFieldType[],
+    ],
+  ),
+});
+
+export type SettingsDataModelFieldTypeFormValues = z.infer<
+  typeof settingsDataModelFieldTypeFormSchema
+>;
+
+export const SettingsObjectNewFieldSelect = () => {
+  const navigate = useNavigate();
+  const { objectSlug = '' } = useParams();
+  const { findActiveObjectMetadataItemBySlug } =
+    useFilteredObjectMetadataItems();
+  const activeObjectMetadataItem =
+    findActiveObjectMetadataItemBySlug(objectSlug);
+  const formMethods = useForm({
+    resolver: zodResolver(settingsDataModelFieldTypeFormSchema),
+    defaultValues: {
+      type: FieldMetadataType.Text,
+    },
+  });
+  const excludedFieldTypes: SettingsFieldType[] = (
+    [
+      FieldMetadataType.Link,
+      FieldMetadataType.Numeric,
+      FieldMetadataType.RichText,
+      FieldMetadataType.Actor,
+      FieldMetadataType.Email,
+      FieldMetadataType.Phone,
+    ] as const
+  ).filter(isDefined);
+
+  useEffect(() => {
+    if (!activeObjectMetadataItem) {
+      navigate(AppPath.NotFound);
+    }
+  }, [activeObjectMetadataItem, navigate]);
+
+  if (!activeObjectMetadataItem) return null;
+
+  return (
+    <RecordFieldValueSelectorContextProvider>
+      <FormProvider // eslint-disable-next-line react/jsx-props-no-spreading
+        {...formMethods}
+      >
+        <SubMenuTopBarContainer
+          title="1. Select a field type"
+          links={[
+            { children: 'Workspace', href: '/settings/workspace' },
+            { children: 'Objects', href: '/settings/objects' },
+            {
+              children: activeObjectMetadataItem.labelPlural,
+              href: `/settings/objects/${objectSlug}`,
+            },
+            { children: <SettingsDataModelNewFieldBreadcrumbDropDown /> },
+          ]}
+        >
+          <SettingsPageContainer>
+            <SettingsObjectNewFieldSelector
+              objectSlug={objectSlug}
+              excludedFieldTypes={excludedFieldTypes}
+            />
+          </SettingsPageContainer>
+        </SubMenuTopBarContainer>
+      </FormProvider>
+    </RecordFieldValueSelectorContextProvider>
+  );
+};

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

@@ -1,133 +0,0 @@
-import styled from '@emotion/styled';
-import { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { H2Title, IconHierarchy2, IconPlus } from 'twenty-ui';
-
-import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
-import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
-import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-
-import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
-import { settingsObjectFieldsFamilyState } from '@/settings/data-model/object-details/states/settingsObjectFieldsFamilyState';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
-import { AppPath } from '@/types/AppPath';
-import { SettingsPath } from '@/types/SettingsPath';
-import { Button } from '@/ui/input/button/components/Button';
-import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
-import { Section } from '@/ui/layout/section/components/Section';
-import { useRecoilState } from 'recoil';
-import { SettingsObjectFieldTable } from '~/pages/settings/data-model/SettingsObjectFieldTable';
-
-const StyledSection = styled(Section)`
-  display: flex;
-  flex-direction: column;
-`;
-
-const StyledAddCustomFieldButton = styled(Button)`
-  align-self: flex-end;
-  margin-top: ${({ theme }) => theme.spacing(2)};
-`;
-
-export const SettingsObjectNewFieldStep1 = () => {
-  const navigate = useNavigate();
-
-  const { objectSlug = '' } = useParams();
-  const { findActiveObjectMetadataItemBySlug } =
-    useFilteredObjectMetadataItems();
-
-  const activeObjectMetadataItem =
-    findActiveObjectMetadataItemBySlug(objectSlug);
-
-  const [settingsObjectFields] = useRecoilState(
-    settingsObjectFieldsFamilyState({
-      objectMetadataItemId: activeObjectMetadataItem?.id,
-    }),
-  );
-
-  const { activateMetadataField, deactivateMetadataField } =
-    useFieldMetadataItem();
-
-  const canSave = settingsObjectFields?.some(
-    (field, index) =>
-      field.isActive !== activeObjectMetadataItem?.fields[index].isActive,
-  );
-
-  const handleSave = async () => {
-    if (!activeObjectMetadataItem || !settingsObjectFields) {
-      return;
-    }
-
-    await Promise.all(
-      settingsObjectFields.map((fieldMetadataItem, index) => {
-        if (
-          fieldMetadataItem.isActive ===
-          activeObjectMetadataItem.fields[index].isActive
-        ) {
-          return undefined;
-        }
-
-        return fieldMetadataItem.isActive
-          ? activateMetadataField(fieldMetadataItem)
-          : deactivateMetadataField(fieldMetadataItem);
-      }),
-    );
-
-    navigate(`/settings/objects/${objectSlug}`);
-  };
-
-  useEffect(() => {
-    if (!activeObjectMetadataItem) {
-      navigate(AppPath.NotFound);
-      return;
-    }
-  }, [activeObjectMetadataItem, navigate]);
-
-  if (!activeObjectMetadataItem) return null;
-
-  return (
-    <SubMenuTopBarContainer
-      Icon={IconHierarchy2}
-      links={[
-        {
-          children: 'Workspace',
-          href: getSettingsPagePath(SettingsPath.Workspace),
-        },
-        { children: 'Objects', href: '/settings/objects' },
-        {
-          children: activeObjectMetadataItem.labelPlural,
-          href: `/settings/objects/${objectSlug}`,
-        },
-        { children: 'New Field' },
-      ]}
-      actionButton={
-        !activeObjectMetadataItem.isRemote && (
-          <SaveAndCancelButtons
-            isSaveDisabled={!canSave}
-            onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
-            onSave={handleSave}
-          />
-        )
-      }
-    >
-      <SettingsPageContainer>
-        <StyledSection>
-          <H2Title
-            title="Check deactivated fields"
-            description="Before creating a custom field, check if it already exists in the deactivated section."
-          />
-          <SettingsObjectFieldTable
-            objectMetadataItem={activeObjectMetadataItem}
-            mode="new-field"
-          />
-          <StyledAddCustomFieldButton
-            Icon={IconPlus}
-            title="Add Custom Field"
-            size="small"
-            variant="secondary"
-            to={`/settings/objects/${objectSlug}/new-field/step-2`}
-          />
-        </StyledSection>
-      </SettingsPageContainer>
-    </SubMenuTopBarContainer>
-  );
-};

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

@@ -4,12 +4,10 @@ import { SettingsDataModelOverview } from '@/settings/data-model/graph-overview/
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
-import { IconHierarchy2 } from 'twenty-ui';
 
 export const SettingsObjectOverview = () => {
   return (
     <SubMenuTopBarContainer
-      Icon={IconHierarchy2}
       links={[
         {
           children: 'Workspace',

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

@@ -1,12 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import {
+import { H2Title, IconChevronRight, IconPlus, IconSearch } from 'twenty-ui';
-  H2Title,
-  IconChevronRight,
-  IconHierarchy2,
-  IconPlus,
-  IconSearch,
-} from 'twenty-ui';
 
 import { useDeleteOneObjectMetadataItem } from '@/object-metadata/hooks/useDeleteOneObjectMetadataItem';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
@@ -133,7 +127,6 @@ export const SettingsObjects = () => {
   );
   return (
     <SubMenuTopBarContainer
-      Icon={IconHierarchy2}
       title="Data model"
       actionButton={
         <UndecoratedLink to={getSettingsPagePath(SettingsPath.NewObject)}>

packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldConfigure.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
+import { SettingsObjectNewFieldConfigure } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure';
 
 import {
   PageDecorator,
@@ -7,15 +8,13 @@ import {
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
-import { SettingsObjectNewFieldStep2 } from '../../SettingsObjectNewField/SettingsObjectNewFieldStep2';
-
 const meta: Meta<PageDecoratorArgs> = {
   title:
-    'Pages/Settings/DataModel/SettingsObjectNewField/SettingsObjectNewFieldStep2',
+    'Pages/Settings/DataModel/SettingsObjectNewField/SettingsObjectNewFieldConfigure',
-  component: SettingsObjectNewFieldStep2,
+  component: SettingsObjectNewFieldConfigure,
   decorators: [PageDecorator],
   args: {
-    routePath: '/settings/objects/:objectSlug/new-field/step-2',
+    routePath: '/settings/objects/:objectSlug/new-field/configure',
     routeParams: { ':objectSlug': 'companies' },
   },
   parameters: {
@@ -25,21 +24,11 @@ const meta: Meta<PageDecoratorArgs> = {
 
 export default meta;
 
-export type Story = StoryObj<typeof SettingsObjectNewFieldStep2>;
+export type Story = StoryObj<typeof SettingsObjectNewFieldConfigure>;
 
 export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await canvas.findByText('Objects');
-    await canvas.findByText('1. Select a field type');
-
-    const searchInput = await canvas.findByPlaceholderText('Search a type');
-
-    await userEvent.type(searchInput, 'Num');
-
-    const numberTypeButton = await canvas.findByText('Number');
-
-    await userEvent.click(numberTypeButton);
 
     await canvas.findByText('2. Configure field');
 
@@ -49,11 +38,10 @@ export const Default: Story = {
     const descriptionInput = await canvas.findByPlaceholderText(
       'Write a description',
     );
-
     await userEvent.type(descriptionInput, 'Test description');
 
     const saveButton = await canvas.findByText('Save');
-
+    await new Promise((resolve) => setTimeout(resolve, 5000));
     await userEvent.click(saveButton);
   },
 };

packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldSelect.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
+import { SettingsObjectNewFieldSelect } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect';
+
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title:
+    'Pages/Settings/DataModel/SettingsObjectNewField/SettingsObjectNewFieldSelect',
+  component: SettingsObjectNewFieldSelect,
+  decorators: [PageDecorator],
+  args: {
+    routePath: '/settings/objects/:objectSlug/new-field/select',
+    routeParams: { ':objectSlug': 'companies' },
+  },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsObjectNewFieldSelect>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText('Objects');
+    await canvas.findByText('1. Select a field type');
+    const searchInput = await canvas.findByPlaceholderText('Search a type');
+    await userEvent.type(searchInput, 'Rela');
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+    await userEvent.clear(searchInput);
+    await userEvent.type(searchInput, 'Num');
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+  },
+};

packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep1.stories.tsx

@@ -1,38 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { within } from '@storybook/test';
-
-import {
-  PageDecorator,
-  PageDecoratorArgs,
-} from '~/testing/decorators/PageDecorator';
-import { graphqlMocks } from '~/testing/graphqlMocks';
-
-import { SettingsObjectNewFieldStep1 } from '../../SettingsObjectNewField/SettingsObjectNewFieldStep1';
-
-const meta: Meta<PageDecoratorArgs> = {
-  title:
-    'Pages/Settings/DataModel/SettingsObjectNewField/SettingsObjectNewFieldStep1',
-  component: SettingsObjectNewFieldStep1,
-  decorators: [PageDecorator],
-  args: {
-    routePath: '/settings/objects/:objectSlug/new-field/step-1',
-    routeParams: { ':objectSlug': 'companies' },
-  },
-  parameters: {
-    msw: graphqlMocks,
-  },
-};
-
-export default meta;
-
-export type Story = StoryObj<typeof SettingsObjectNewFieldStep1>;
-
-export const Default: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await canvas.findByText('Objects');
-    await canvas.findByText('Companies');
-    await canvas.findByText('Check deactivated fields');
-    await canvas.findByText('Add Custom Field');
-  },
-};

packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { H2Title, IconCode, IconPlus } from 'twenty-ui';
+import { H2Title, IconPlus } from 'twenty-ui';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsApiKeysTable } from '@/settings/developers/components/SettingsApiKeysTable';
@@ -20,7 +20,6 @@ const StyledButtonContainer = styled.div`
 export const SettingsDevelopers = () => {
   return (
     <SubMenuTopBarContainer
-      Icon={IconCode}
       title="Developers"
       actionButton={<SettingsReadDocumentationButton />}
       links={[

packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx

@@ -4,7 +4,7 @@ import { DateTime } from 'luxon';
 import { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
-import { H2Title, IconCode, IconRepeat, IconTrash } from 'twenty-ui';
+import { H2Title, IconRepeat, IconTrash } from 'twenty-ui';
 
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
@@ -145,7 +145,6 @@ export const SettingsDevelopersApiKeyDetail = () => {
     <>
       {apiKeyData?.name && (
         <SubMenuTopBarContainer
-          Icon={IconCode}
           title={apiKeyData?.name}
           links={[
             {

packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx

@@ -1,7 +1,7 @@
 import { DateTime } from 'luxon';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { H2Title, IconCode } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';
 
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
@@ -65,7 +65,6 @@ export const SettingsDevelopersApiKeysNew = () => {
   const canSave = !!formValues.name && createOneApiKey;
   return (
     <SubMenuTopBarContainer
-      Icon={IconCode}
       title="New key"
       links={[
         {

packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { H2Title, IconCode, IconTrash } from 'twenty-ui';
+import { H2Title, IconTrash } from 'twenty-ui';
 
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -93,7 +93,6 @@ export const SettingsDevelopersWebhooksDetail = () => {
 
   return (
     <SubMenuTopBarContainer
-      Icon={IconCode}
       title={webhookData.targetUrl}
       links={[
         {

packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhooksNew.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { H2Title, IconCode, isDefined } from 'twenty-ui';
+import { H2Title, isDefined } from 'twenty-ui';
 
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
@@ -64,7 +64,6 @@ export const SettingsDevelopersWebhooksNew = () => {
 
   return (
     <SubMenuTopBarContainer
-      Icon={IconCode}
       title="New Webhook"
       links={[
         {

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

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { H2Title, IconSettings } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';
 
 import { useGetDatabaseConnections } from '@/databases/hooks/useGetDatabaseConnections';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
@@ -42,7 +42,6 @@ export const SettingsIntegrationDatabase = () => {
 
   return (
     <SubMenuTopBarContainer
-      Icon={IconSettings}
       title={integration.text}
       links={[
         {

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

@@ -1,5 +1,3 @@
-import { IconSettings } from 'twenty-ui';
-
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsIntegrationEditDatabaseConnectionContainer } from '@/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@@ -9,7 +7,6 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
 export const SettingsIntegrationEditDatabaseConnection = () => {
   return (
     <SubMenuTopBarContainer
-      Icon={IconSettings}
       title="Edit connection"
       links={[
         {

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

@@ -2,7 +2,7 @@ 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, IconSettings } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';
 import { z } from 'zod';
 
 import { useCreateOneDatabaseConnection } from '@/databases/hooks/useCreateOneDatabaseConnection';
@@ -131,7 +131,6 @@ export const SettingsIntegrationNewDatabaseConnection = () => {
 
   return (
     <SubMenuTopBarContainer
-      Icon={IconSettings}
       title="New"
       links={[
         {

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

@@ -1,5 +1,3 @@
-import { IconSettings } from 'twenty-ui';
-
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsIntegrationDatabaseConnectionShowContainer } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@@ -9,7 +7,6 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
 export const SettingsIntegrationShowDatabaseConnection = () => {
   return (
     <SubMenuTopBarContainer
-      Icon={IconSettings}
       title="Database Connection"
       links={[
         {

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

@@ -4,14 +4,12 @@ import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
-import { IconApps } from 'twenty-ui';
 
 export const SettingsIntegrations = () => {
   const integrationCategories = useSettingsIntegrationCategories();
 
   return (
     <SubMenuTopBarContainer
-      Icon={IconApps}
       title="Integrations"
       links={[
         {

packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx

@@ -1,4 +1,4 @@
-import { H2Title, IconColorSwatch } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@@ -14,7 +14,6 @@ export const SettingsAppearance = () => {
 
   return (
     <SubMenuTopBarContainer
-      Icon={IconColorSwatch}
       title="Experience"
       links={[
         {

packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionDetail.tsx

@@ -21,7 +21,7 @@ import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { IconCode, IconFunction, IconSettings, IconTestPipe } from 'twenty-ui';
+import { IconCode, IconSettings, IconTestPipe } from 'twenty-ui';
 import { usePreventOverlapCallback } from '~/hooks/usePreventOverlapCallback';
 import { isDefined } from '~/utils/isDefined';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
@@ -227,7 +227,6 @@ export const SettingsServerlessFunctionDetail = () => {
   return (
     !loading && (
       <SubMenuTopBarContainer
-        Icon={IconFunction}
         title={formValues.name}
         links={[
           {

packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctions.tsx

@@ -5,12 +5,11 @@ import { Button } from '@/ui/input/button/components/Button';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
-import { IconFunction, IconPlus } from 'twenty-ui';
+import { IconPlus } from 'twenty-ui';
 
 export const SettingsServerlessFunctions = () => {
   return (
     <SubMenuTopBarContainer
-      Icon={IconFunction}
       title="Functions"
       actionButton={
         <UndecoratedLink

packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionsNew.tsx

@@ -12,7 +12,6 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useState } from 'react';
 import { Key } from 'ts-key-enum';
-import { IconFunction } from 'twenty-ui';
 import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
 import { isDefined } from '~/utils/isDefined';
 
@@ -77,7 +76,6 @@ export const SettingsServerlessFunctionsNew = () => {
 
   return (
     <SubMenuTopBarContainer
-      Icon={IconFunction}
       title="New Function"
       links={[
         {