From d7b0c1190ad4e28f9e7af08aec0b4bd06df6e091 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs?= <guigon.thais@gmail.com>
Date: Fri, 27 Oct 2023 12:13:01 +0200
Subject: [PATCH] feat: add Object Field Edit page sections (#2243)

Closes #2160, Closes #2163
---
 .../metadata/hooks/useObjectMetadata.ts       |   3 +-
 .../modules/metadata/utils/getFieldSlug.ts    |   6 ++
 .../SettingsObjectFieldTypeSelectSection.tsx  |   7 +-
 front/src/modules/types/SettingsPath.ts       |   2 +-
 .../ui/display/icon/types/IconComponent.ts    |   1 +
 .../modules/ui/input/components/Select.tsx    |  56 ++++++----
 .../components/__stories__/Select.stories.tsx |   4 +
 .../data-model/SettingsObjectDetail.tsx       |  53 ++++-----
 .../data-model/SettingsObjectEdit.tsx         | 102 +++++++++---------
 .../data-model/SettingsObjectFieldEdit.tsx    |  65 +++++++++--
 .../SettingsObjectNewFieldStep1.tsx           |  25 +++--
 .../SettingsObjectNewFieldStep2.tsx           |  16 ++-
 12 files changed, 206 insertions(+), 134 deletions(-)
 create mode 100644 front/src/modules/metadata/utils/getFieldSlug.ts

diff --git a/front/src/modules/metadata/hooks/useObjectMetadata.ts b/front/src/modules/metadata/hooks/useObjectMetadata.ts
index 69e7f31a9..cb250c019 100644
--- a/front/src/modules/metadata/hooks/useObjectMetadata.ts
+++ b/front/src/modules/metadata/hooks/useObjectMetadata.ts
@@ -8,7 +8,7 @@ import { useFindManyMetadataObjects } from './useFindManyMetadataObjects';
 import { useUpdateOneMetadataObject } from './useUpdateOneMetadataObject';
 
 export const useObjectMetadata = () => {
-  const { metadataObjects } = useFindManyMetadataObjects();
+  const { metadataObjects, loading } = useFindManyMetadataObjects();
 
   const activeMetadataObjects = metadataObjects.filter(
     ({ isActive }) => isActive,
@@ -68,5 +68,6 @@ export const useObjectMetadata = () => {
     editObject,
     eraseObject,
     findActiveObjectBySlug,
+    loading,
   };
 };
diff --git a/front/src/modules/metadata/utils/getFieldSlug.ts b/front/src/modules/metadata/utils/getFieldSlug.ts
new file mode 100644
index 000000000..89582a5ac
--- /dev/null
+++ b/front/src/modules/metadata/utils/getFieldSlug.ts
@@ -0,0 +1,6 @@
+import toKebabCase from 'lodash.kebabcase';
+
+import { Field } from '~/generated-metadata/graphql';
+
+export const getFieldSlug = (metadataField: Pick<Field, 'label'>) =>
+  toKebabCase(metadataField.label);
diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx
index f13fabd67..34dc07127 100644
--- a/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx
+++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx
@@ -6,16 +6,18 @@ import { dataTypes } from '../constants/dataTypes';
 import { ObjectFieldDataType } from '../types/ObjectFieldDataType';
 
 type SettingsObjectFieldTypeSelectSectionProps = {
+  disabled?: boolean;
+  onChange?: (value: ObjectFieldDataType) => void;
   type: ObjectFieldDataType;
-  onChange: (value: ObjectFieldDataType) => void;
 };
 
 // TODO: remove "relation" type for now, add it back when the backend is ready.
 const { relation: _, ...dataTypesWithoutRelation } = dataTypes;
 
 export const SettingsObjectFieldTypeSelectSection = ({
-  type,
+  disabled,
   onChange,
+  type,
 }: SettingsObjectFieldTypeSelectSectionProps) => (
   <Section>
     <H2Title
@@ -23,6 +25,7 @@ export const SettingsObjectFieldTypeSelectSection = ({
       description="The field's type and values."
     />
     <Select
+      disabled={disabled}
       dropdownScopeId="object-field-type-select"
       value={type}
       onChange={onChange}
diff --git a/front/src/modules/types/SettingsPath.ts b/front/src/modules/types/SettingsPath.ts
index 6f5b8df1a..5bfcc1c12 100644
--- a/front/src/modules/types/SettingsPath.ts
+++ b/front/src/modules/types/SettingsPath.ts
@@ -6,7 +6,7 @@ export enum SettingsPath {
   ObjectEdit = 'objects/:objectSlug/edit',
   ObjectNewFieldStep1 = 'objects/:objectSlug/new-field/step-1',
   ObjectNewFieldStep2 = 'objects/:objectSlug/new-field/step-2',
-  ObjectFieldEdit = 'objects/:objectSlug/:fieldName',
+  ObjectFieldEdit = 'objects/:objectSlug/:fieldSlug',
   NewObject = 'objects/new',
   WorkspaceMembersPage = 'workspace-members',
   Workspace = 'workspace',
diff --git a/front/src/modules/ui/display/icon/types/IconComponent.ts b/front/src/modules/ui/display/icon/types/IconComponent.ts
index 47e141f48..15fdafb1d 100644
--- a/front/src/modules/ui/display/icon/types/IconComponent.ts
+++ b/front/src/modules/ui/display/icon/types/IconComponent.ts
@@ -1,6 +1,7 @@
 import { FunctionComponent } from 'react';
 
 export type IconComponent = FunctionComponent<{
+  color?: string;
   size?: number;
   stroke?: number;
 }>;
diff --git a/front/src/modules/ui/input/components/Select.tsx b/front/src/modules/ui/input/components/Select.tsx
index 70bd59b3e..6994e3bb4 100644
--- a/front/src/modules/ui/input/components/Select.tsx
+++ b/front/src/modules/ui/input/components/Select.tsx
@@ -12,19 +12,21 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
 
 export type SelectProps<Value extends string | number | null> = {
+  disabled?: boolean;
   dropdownScopeId: string;
-  onChange: (value: Value) => void;
+  onChange?: (value: Value) => void;
   options: { value: Value; label: string; Icon?: IconComponent }[];
   value?: Value;
 };
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<{ disabled?: boolean }>`
   align-items: center;
   background-color: ${({ theme }) => theme.background.transparent.lighter};
   border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ theme }) => theme.font.color.primary};
-  cursor: pointer;
+  color: ${({ disabled, theme }) =>
+    disabled ? theme.font.color.tertiary : theme.font.color.primary};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
   height: ${({ theme }) => theme.spacing(8)};
@@ -38,7 +40,13 @@ const StyledLabel = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
 `;
 
+const StyledIconChevronDown = styled(IconChevronDown)<{ disabled?: boolean }>`
+  color: ${({ disabled, theme }) =>
+    disabled ? theme.font.color.extraLight : theme.font.color.tertiary};
+`;
+
 export const Select = <Value extends string | number | null>({
+  disabled,
   dropdownScopeId,
   onChange,
   options,
@@ -50,28 +58,30 @@ export const Select = <Value extends string | number | null>({
 
   const { closeDropdown } = useDropdown({ dropdownScopeId });
 
-  return (
+  const selectControl = (
+    <StyledContainer disabled={disabled}>
+      <StyledLabel>
+        {!!selectedOption.Icon && (
+          <selectedOption.Icon
+            color={disabled ? theme.font.color.light : theme.font.color.primary}
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+          />
+        )}
+        {selectedOption.label}
+      </StyledLabel>
+      <StyledIconChevronDown disabled={disabled} size={theme.icon.size.md} />
+    </StyledContainer>
+  );
+
+  return disabled ? (
+    selectControl
+  ) : (
     <DropdownScope dropdownScopeId={dropdownScopeId}>
       <Dropdown
         dropdownMenuWidth={176}
         dropdownPlacement="bottom-start"
-        clickableComponent={
-          <StyledContainer>
-            <StyledLabel>
-              {!!selectedOption.Icon && (
-                <selectedOption.Icon
-                  size={theme.icon.size.md}
-                  stroke={theme.icon.stroke.sm}
-                />
-              )}
-              {selectedOption.label}
-            </StyledLabel>
-            <IconChevronDown
-              color={theme.font.color.tertiary}
-              size={theme.icon.size.md}
-            />
-          </StyledContainer>
-        }
+        clickableComponent={selectControl}
         dropdownComponents={
           <DropdownMenuItemsContainer>
             {options.map((option) => (
@@ -80,7 +90,7 @@ export const Select = <Value extends string | number | null>({
                 LeftIcon={option.Icon}
                 text={option.label}
                 onClick={() => {
-                  onChange(option.value);
+                  onChange?.(option.value);
                   closeDropdown();
                 }}
               />
diff --git a/front/src/modules/ui/input/components/__stories__/Select.stories.tsx b/front/src/modules/ui/input/components/__stories__/Select.stories.tsx
index 90b167bf0..c8c84580f 100644
--- a/front/src/modules/ui/input/components/__stories__/Select.stories.tsx
+++ b/front/src/modules/ui/input/components/__stories__/Select.stories.tsx
@@ -49,3 +49,7 @@ export const Open: Story = {
     await userEvent.click(selectLabel);
   },
 };
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
diff --git a/front/src/pages/settings/data-model/SettingsObjectDetail.tsx b/front/src/pages/settings/data-model/SettingsObjectDetail.tsx
index 99425db09..93e358b4d 100644
--- a/front/src/pages/settings/data-model/SettingsObjectDetail.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjectDetail.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 
 import { useFieldMetadata } from '@/metadata/hooks/useFieldMetadata';
 import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
+import { getFieldSlug } from '@/metadata/utils/getFieldSlug';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsAboutSection } from '@/settings/data-model/object-details/components/SettingsObjectAboutSection';
 import { SettingsObjectFieldActiveActionDropdown } from '@/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown';
@@ -33,49 +34,51 @@ export const SettingsObjectDetail = () => {
   const navigate = useNavigate();
 
   const { objectSlug = '' } = useParams();
-  const { activeObjects, disableObject, findActiveObjectBySlug } =
+  const { disableObject, findActiveObjectBySlug, loading } =
     useObjectMetadata();
   const activeObject = findActiveObjectBySlug(objectSlug);
 
   useEffect(() => {
-    if (activeObjects.length && !activeObject) {
-      navigate(AppPath.NotFound);
-    }
-  }, [activeObject, activeObjects.length, navigate]);
+    if (loading) return;
+    if (!activeObject) navigate(AppPath.NotFound);
+  }, [activeObject, loading, navigate]);
 
   const { activateField, disableField, eraseField } = useFieldMetadata();
-  const activeFields = activeObject?.fields.filter(
+
+  if (!activeObject) return null;
+
+  const activeFields = activeObject.fields.filter(
     (fieldItem) => fieldItem.isActive,
   );
-  const disabledFields = activeObject?.fields.filter(
+  const disabledFields = activeObject.fields.filter(
     (fieldItem) => !fieldItem.isActive,
   );
 
+  const handleDisable = async () => {
+    await disableObject(activeObject);
+    navigate('/settings/objects');
+  };
+
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
         <Breadcrumb
           links={[
             { children: 'Objects', href: '/settings/objects' },
-            { children: activeObject?.labelPlural ?? '' },
+            { children: activeObject.labelPlural },
           ]}
         />
-        {activeObject && (
-          <SettingsAboutSection
-            iconKey={activeObject.icon ?? undefined}
-            name={activeObject.labelPlural || ''}
-            isCustom={activeObject.isCustom}
-            onDisable={() => {
-              disableObject(activeObject);
-              navigate('/settings/objects');
-            }}
-            onEdit={() => navigate('./edit')}
-          />
-        )}
+        <SettingsAboutSection
+          iconKey={activeObject.icon ?? undefined}
+          name={activeObject.labelPlural || ''}
+          isCustom={activeObject.isCustom}
+          onDisable={handleDisable}
+          onEdit={() => navigate('./edit')}
+        />
         <Section>
           <H2Title
             title="Fields"
-            description={`Customise the fields available in the ${activeObject?.labelSingular} views and their display order in the ${activeObject?.labelSingular} detail view and menus.`}
+            description={`Customise the fields available in the ${activeObject.labelSingular} views and their display order in the ${activeObject.labelSingular} detail view and menus.`}
           />
           <Table>
             <StyledObjectFieldTableRow>
@@ -84,7 +87,7 @@ export const SettingsObjectDetail = () => {
               <TableHeader>Data type</TableHeader>
               <TableHeader></TableHeader>
             </StyledObjectFieldTableRow>
-            {!!activeFields?.length && (
+            {!!activeFields.length && (
               <TableSection title="Active">
                 {activeFields.map((fieldItem) => (
                   <SettingsObjectFieldItemTableRow
@@ -94,7 +97,7 @@ export const SettingsObjectDetail = () => {
                       <SettingsObjectFieldActiveActionDropdown
                         isCustomField={fieldItem.isCustom}
                         scopeKey={fieldItem.id}
-                        onEdit={() => navigate(`./${fieldItem.name}`)}
+                        onEdit={() => navigate(`./${getFieldSlug(fieldItem)}`)}
                         onDisable={() => disableField(fieldItem)}
                       />
                     }
@@ -102,7 +105,7 @@ export const SettingsObjectDetail = () => {
                 ))}
               </TableSection>
             )}
-            {!!disabledFields?.length && (
+            {!!disabledFields.length && (
               <TableSection isInitiallyExpanded={false} title="Disabled">
                 {disabledFields.map((fieldItem) => (
                   <SettingsObjectFieldItemTableRow
@@ -129,7 +132,7 @@ export const SettingsObjectDetail = () => {
               variant="secondary"
               onClick={() =>
                 navigate(
-                  disabledFields?.length
+                  disabledFields.length
                     ? './new-field/step-1'
                     : './new-field/step-2',
                 )
diff --git a/front/src/pages/settings/data-model/SettingsObjectEdit.tsx b/front/src/pages/settings/data-model/SettingsObjectEdit.tsx
index a54cf9f13..4bc3285c6 100644
--- a/front/src/pages/settings/data-model/SettingsObjectEdit.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjectEdit.tsx
@@ -20,7 +20,7 @@ export const SettingsObjectEdit = () => {
   const navigate = useNavigate();
 
   const { objectSlug = '' } = useParams();
-  const { activeObjects, disableObject, editObject, findActiveObjectBySlug } =
+  const { disableObject, editObject, findActiveObjectBySlug, loading } =
     useObjectMetadata();
   const activeObject = findActiveObjectBySlug(objectSlug);
 
@@ -34,7 +34,7 @@ export const SettingsObjectEdit = () => {
   >({});
 
   useEffect(() => {
-    if (!activeObjects.length) return;
+    if (loading) return;
 
     if (!activeObject) {
       navigate(AppPath.NotFound);
@@ -49,22 +49,22 @@ export const SettingsObjectEdit = () => {
         description: activeObject.description ?? undefined,
       });
     }
-  }, [activeObject, activeObjects.length, formValues, navigate]);
+  }, [activeObject, formValues, loading, navigate]);
+
+  if (!activeObject) return null;
 
   const areRequiredFieldsFilled =
     !!formValues.labelSingular && !!formValues.labelPlural;
 
   const hasChanges =
-    formValues.description !== activeObject?.description ||
-    formValues.icon !== activeObject?.icon ||
-    formValues.labelPlural !== activeObject?.labelPlural ||
-    formValues.labelSingular !== activeObject?.labelSingular;
+    formValues.description !== activeObject.description ||
+    formValues.icon !== activeObject.icon ||
+    formValues.labelPlural !== activeObject.labelPlural ||
+    formValues.labelSingular !== activeObject.labelSingular;
 
   const canSave = areRequiredFieldsFilled && hasChanges;
 
   const handleSave = async () => {
-    if (!activeObject) return;
-
     const editedObject = { ...activeObject, ...formValues };
 
     await editObject(editedObject);
@@ -72,6 +72,11 @@ export const SettingsObjectEdit = () => {
     navigate(`/settings/objects/${getObjectSlug(editedObject)}`);
   };
 
+  const handleDisable = async () => {
+    await disableObject(activeObject);
+    navigate('/settings/objects');
+  };
+
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
@@ -80,61 +85,52 @@ export const SettingsObjectEdit = () => {
             links={[
               { children: 'Objects', href: '/settings/objects' },
               {
-                children: activeObject?.labelPlural ?? '',
+                children: activeObject.labelPlural,
                 href: `/settings/objects/${objectSlug}`,
               },
               { children: 'Edit' },
             ]}
           />
-          {!!activeObject?.isCustom && (
+          {!!activeObject.isCustom && (
             <SaveAndCancelButtons
               isSaveDisabled={!canSave}
-              onCancel={() => {
-                navigate(`/settings/objects/${objectSlug}`);
-              }}
+              onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
               onSave={handleSave}
             />
           )}
         </SettingsHeaderContainer>
-        {activeObject && (
-          <>
-            <SettingsObjectIconSection
-              disabled={!activeObject.isCustom}
-              iconKey={formValues.icon}
-              label={formValues.labelPlural}
-              onChange={({ iconKey }) =>
-                setFormValues((previousFormValues) => ({
-                  ...previousFormValues,
-                  icon: iconKey,
-                }))
-              }
-            />
-            <SettingsObjectFormSection
-              disabled={!activeObject.isCustom}
-              singularName={formValues.labelSingular}
-              pluralName={formValues.labelPlural}
-              description={formValues.description}
-              onChange={(values) =>
-                setFormValues((previousFormValues) => ({
-                  ...previousFormValues,
-                  ...values,
-                }))
-              }
-            />
-            <Section>
-              <H2Title title="Danger zone" description="Disable object" />
-              <Button
-                Icon={IconArchive}
-                title="Disable"
-                size="small"
-                onClick={() => {
-                  disableObject(activeObject);
-                  navigate('/settings/objects');
-                }}
-              />
-            </Section>
-          </>
-        )}
+        <SettingsObjectIconSection
+          disabled={!activeObject.isCustom}
+          iconKey={formValues.icon}
+          label={formValues.labelPlural}
+          onChange={({ iconKey }) =>
+            setFormValues((previousFormValues) => ({
+              ...previousFormValues,
+              icon: iconKey,
+            }))
+          }
+        />
+        <SettingsObjectFormSection
+          disabled={!activeObject.isCustom}
+          singularName={formValues.labelSingular}
+          pluralName={formValues.labelPlural}
+          description={formValues.description}
+          onChange={(values) =>
+            setFormValues((previousFormValues) => ({
+              ...previousFormValues,
+              ...values,
+            }))
+          }
+        />
+        <Section>
+          <H2Title title="Danger zone" description="Disable object" />
+          <Button
+            Icon={IconArchive}
+            title="Disable"
+            size="small"
+            onClick={handleDisable}
+          />
+        </Section>
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );
diff --git a/front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx b/front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
index fc97033de..0c34556c1 100644
--- a/front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
@@ -1,13 +1,46 @@
-import { useParams } from 'react-router-dom';
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 
+import { useFieldMetadata } from '@/metadata/hooks/useFieldMetadata';
+import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
+import { getFieldSlug } from '@/metadata/utils/getFieldSlug';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { IconSettings } from '@/ui/display/icon';
+import { SettingsObjectFieldFormSection } from '@/settings/data-model/components/SettingsObjectFieldFormSection';
+import { SettingsObjectFieldTypeSelectSection } from '@/settings/data-model/components/SettingsObjectFieldTypeSelectSection';
+import { ObjectFieldDataType } from '@/settings/data-model/types/ObjectFieldDataType';
+import { AppPath } from '@/types/AppPath';
+import { IconArchive, IconSettings } from '@/ui/display/icon';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Button } from '@/ui/input/button/components/Button';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
 export const SettingsObjectFieldEdit = () => {
-  const { objectSlug = '', fieldName = '' } = useParams();
+  const navigate = useNavigate();
+
+  const { objectSlug = '', fieldSlug = '' } = useParams();
+  const { findActiveObjectBySlug, loading } = useObjectMetadata();
+  const activeObject = findActiveObjectBySlug(objectSlug);
+
+  const { disableField } = useFieldMetadata();
+  const activeField = activeObject?.fields.find(
+    (field) => field.isActive && getFieldSlug(field) === fieldSlug,
+  );
+
+  useEffect(() => {
+    if (loading) return;
+    if (!activeObject || !activeField) navigate(AppPath.NotFound);
+  }, [activeField, activeObject, loading, navigate]);
+
+  if (!activeObject || !activeField) return null;
+
+  const handleDisable = async () => {
+    await disableField(activeField);
+    navigate(`/settings/objects/${objectSlug}`);
+  };
+
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
@@ -16,15 +49,33 @@ export const SettingsObjectFieldEdit = () => {
             links={[
               { children: 'Objects', href: '/settings/objects' },
               {
-                children: `${objectSlug}`,
+                children: activeObject.labelPlural,
                 href: `/settings/objects/${objectSlug}`,
               },
-              {
-                children: `${fieldName}`,
-              },
+              { children: activeField.label },
             ]}
           />
         </SettingsHeaderContainer>
+        <SettingsObjectFieldFormSection
+          disabled={!activeField.isCustom}
+          name={activeField.label}
+          description={activeField.description ?? undefined}
+          iconKey={activeField.icon ?? undefined}
+          onChange={() => undefined}
+        />
+        <SettingsObjectFieldTypeSelectSection
+          disabled
+          type={activeField.type as ObjectFieldDataType}
+        />
+        <Section>
+          <H2Title title="Danger zone" description="Disable this field" />
+          <Button
+            Icon={IconArchive}
+            title="Disable"
+            size="small"
+            onClick={handleDisable}
+          />
+        </Section>
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );
diff --git a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
index df44c5839..723439292 100644
--- a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
@@ -36,19 +36,20 @@ export const SettingsObjectNewFieldStep1 = () => {
   const navigate = useNavigate();
 
   const { objectSlug = '' } = useParams();
-  const { activeObjects, findActiveObjectBySlug } = useObjectMetadata();
+  const { findActiveObjectBySlug, loading } = useObjectMetadata();
   const activeObject = findActiveObjectBySlug(objectSlug);
 
   useEffect(() => {
-    if (activeObjects.length && !activeObject) {
-      navigate(AppPath.NotFound);
-    }
-  }, [activeObject, activeObjects.length, navigate]);
+    if (loading) return;
+    if (!activeObject) navigate(AppPath.NotFound);
+  }, [activeObject, loading, navigate]);
 
-  const activeFields = activeObject?.fields.filter(
+  if (!activeObject) return null;
+
+  const activeFields = activeObject.fields.filter(
     (fieldItem) => fieldItem.isActive,
   );
-  const disabledFields = activeObject?.fields.filter(
+  const disabledFields = activeObject.fields.filter(
     (fieldItem) => !fieldItem.isActive,
   );
 
@@ -60,7 +61,7 @@ export const SettingsObjectNewFieldStep1 = () => {
             links={[
               { children: 'Objects', href: '/settings/objects' },
               {
-                children: activeObject?.labelPlural ?? '',
+                children: activeObject.labelPlural,
                 href: `/settings/objects/${objectSlug}`,
               },
               { children: 'New Field' },
@@ -68,9 +69,7 @@ export const SettingsObjectNewFieldStep1 = () => {
           />
           <SaveAndCancelButtons
             isSaveDisabled
-            onCancel={() => {
-              navigate(`/settings/objects/${objectSlug}`);
-            }}
+            onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
             onSave={() => undefined}
           />
         </SettingsHeaderContainer>
@@ -86,7 +85,7 @@ export const SettingsObjectNewFieldStep1 = () => {
               <TableHeader>Data type</TableHeader>
               <TableHeader></TableHeader>
             </StyledObjectFieldTableRow>
-            {!!activeFields?.length && (
+            {!!activeFields.length && (
               <TableSection isInitiallyExpanded={false} title="Active">
                 {activeFields.map((fieldItem) => (
                   <SettingsObjectFieldItemTableRow
@@ -99,7 +98,7 @@ export const SettingsObjectNewFieldStep1 = () => {
                 ))}
               </TableSection>
             )}
-            {!!disabledFields?.length && (
+            {!!disabledFields.length && (
               <TableSection title="Disabled">
                 {disabledFields.map((fieldItem) => (
                   <SettingsObjectFieldItemTableRow
diff --git a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
index d63d55313..fc08068bc 100644
--- a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
@@ -17,13 +17,14 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 export const SettingsObjectNewFieldStep2 = () => {
   const navigate = useNavigate();
   const { objectSlug = '' } = useParams();
-  const { findActiveObjectBySlug } = useObjectMetadata();
+  const { findActiveObjectBySlug, loading } = useObjectMetadata();
   const activeObject = findActiveObjectBySlug(objectSlug);
   const { createField } = useFieldMetadata();
 
   useEffect(() => {
+    if (loading) return;
     if (!activeObject) navigate(AppPath.NotFound);
-  }, [activeObject, navigate]);
+  }, [activeObject, loading, navigate]);
 
   const [formValues, setFormValues] = useState<{
     description?: string;
@@ -32,13 +33,12 @@ export const SettingsObjectNewFieldStep2 = () => {
     type: ObjectFieldDataType;
   }>({ icon: 'IconUsers', label: '', type: 'number' });
 
+  if (!activeObject) return null;
+
   const canSave = !!formValues.label;
 
   const handleSave = async () => {
-    if (!activeObject) return;
-
     await createField({ ...formValues, objectId: activeObject.id });
-
     navigate(`/settings/objects/${objectSlug}`);
   };
 
@@ -50,7 +50,7 @@ export const SettingsObjectNewFieldStep2 = () => {
             links={[
               { children: 'Objects', href: '/settings/objects' },
               {
-                children: activeObject?.labelPlural ?? '',
+                children: activeObject.labelPlural,
                 href: `/settings/objects/${objectSlug}`,
               },
               { children: 'New Field' },
@@ -58,9 +58,7 @@ export const SettingsObjectNewFieldStep2 = () => {
           />
           <SaveAndCancelButtons
             isSaveDisabled={!canSave}
-            onCancel={() => {
-              navigate(`/settings/objects/${objectSlug}`);
-            }}
+            onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
             onSave={handleSave}
           />
         </SettingsHeaderContainer>