feat: add Object Field Edit page sections (#2243)

Closes #2160, Closes #2163
2023-10-27 12:13:01 +02:00
parent d02dd69613
commit d7b0c1190a
12 changed files with 206 additions and 134 deletions
--- 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,
  };
 };
--- a/front/src/modules/metadata/utils/getFieldSlug.ts
+++ 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);
--- 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}
--- 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',
--- 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;
 }>;
--- 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();
                }}
              />
--- 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 },
+};
--- 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',
                )
--- 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>
  );
--- 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>
  );
--- 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
--- 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>