refactor: use react-hook-form in Settings Data Model Object pages (#4271)

Related issue: #3836
2024-08-17 18:00:29 +03:00 · 2024-03-05 07:52:19 -03:00 · 2024-03-05 07:52:19 -03:00 · 91e5e7598b
commit 91e5e7598b
parent caa4dcf893
9 changed files with 338 additions and 267 deletions
--- a/package.json
+++ b/package.json
@ -56,6 +56,7 @@
    "@types/facepaint": "^1.2.5",
    "@types/lodash.camelcase": "^4.3.7",
    "@types/lodash.merge": "^4.6.7",
+    "@types/lodash.pick": "^4.3.7",
    "@types/mailparser": "^3.4.4",
    "@types/nodemailer": "^6.4.14",
    "add": "^2.0.6",
@ -112,6 +113,7 @@
    "lodash.kebabcase": "^4.1.1",
    "lodash.merge": "^4.6.2",
    "lodash.omit": "^4.5.0",
+    "lodash.pick": "^4.4.0",
    "lodash.snakecase": "^4.1.1",
    "lodash.upperfirst": "^4.3.1",
    "luxon": "^3.3.0",
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFormSection.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFormSection.tsx
@ -1,103 +0,0 @@
-import styled from '@emotion/styled';
-
-import { validateMetadataLabel } from '@/object-metadata/utils/validateMetadataLabel';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
-import { IconPicker } from '@/ui/input/components/IconPicker';
-import { TextArea } from '@/ui/input/components/TextArea';
-import { TextInput } from '@/ui/input/components/TextInput';
-import { Section } from '@/ui/layout/section/components/Section';
-
-type SettingsObjectFormSectionProps = {
-  disabled?: boolean;
-  icon?: string;
-  singularName?: string;
-  pluralName?: string;
-  description?: string;
-  onChange?: (
-    formValues: Partial<{
-      icon: string;
-      labelSingular: string;
-      labelPlural: string;
-      description: string;
-    }>,
-  ) => void;
-};
-
-const StyledInputsContainer = styled.div`
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
-  width: 100%;
-`;
-
-const StyledLabel = styled.span`
-  color: ${({ theme }) => theme.font.color.light};
-  font-size: ${({ theme }) => theme.font.size.xs};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  margin-bottom: ${({ theme }) => theme.spacing(1)};
-  text-transform: uppercase;
-`;
-
-const StyledInputContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-export const SettingsObjectFormSection = ({
-  disabled,
-  icon = 'IconListNumbers',
-  singularName = '',
-  pluralName = '',
-  description = '',
-  onChange,
-}: SettingsObjectFormSectionProps) => (
-  <Section>
-    <H2Title
-      title="About"
-      description="Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms."
-    />
-    <StyledInputsContainer>
-      <StyledInputContainer>
-        <StyledLabel>Icon</StyledLabel>
-        <IconPicker
-          disabled={disabled}
-          selectedIconKey={icon}
-          onChange={(icon) => {
-            onChange?.({ icon: icon.iconKey });
-          }}
-        />
-      </StyledInputContainer>
-      <TextInput
-        label="Singular"
-        placeholder="Listing"
-        value={singularName}
-        onChange={(value) => {
-          if (!value || validateMetadataLabel(value)) {
-            onChange?.({ labelSingular: value });
-          }
-        }}
-        disabled={disabled}
-        fullWidth
-      />
-      <TextInput
-        label="Plural"
-        placeholder="Listings"
-        value={pluralName}
-        onChange={(value) => {
-          if (!value || validateMetadataLabel(value)) {
-            onChange?.({ labelPlural: value });
-          }
-        }}
-        disabled={disabled}
-        fullWidth
-      />
-    </StyledInputsContainer>
-    <TextArea
-      placeholder="Write a description"
-      minRows={4}
-      value={description}
-      onChange={(value) => onChange?.({ description: value })}
-      disabled={disabled}
-    />
-  </Section>
-);
--- a/packages/twenty-front/src/modules/settings/data-model/components/stories/SettingsObjectFormSection.stories.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/stories/SettingsObjectFormSection.stories.tsx
@ -1,24 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
-
-import { SettingsObjectFormSection } from '../SettingsObjectFormSection';
-
-const meta: Meta<typeof SettingsObjectFormSection> = {
-  title: 'Modules/Settings/DataModel/SettingsObjectFormSection',
-  component: SettingsObjectFormSection,
-  decorators: [ComponentDecorator],
-};
-
-export default meta;
-type Story = StoryObj<typeof SettingsObjectFormSection>;
-
-export const Default: Story = {};
-
-export const WithDefaultValues: Story = {
-  args: {
-    singularName: 'Company',
-    pluralName: 'Companies',
-    description: 'Lorem ipsum',
-  },
-};
--- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
@ -0,0 +1,120 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import styled from '@emotion/styled';
+import { z } from 'zod';
+
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { objectMetadataItemSchema } from '@/object-metadata/validation-schemas/objectMetadataItemSchema';
+import { IconPicker } from '@/ui/input/components/IconPicker';
+import { TextArea } from '@/ui/input/components/TextArea';
+import { TextInput } from '@/ui/input/components/TextInput';
+
+export const settingsDataModelObjectAboutFormSchema =
+  objectMetadataItemSchema.pick({
+    description: true,
+    icon: true,
+    labelPlural: true,
+    labelSingular: true,
+  });
+
+type SettingsDataModelObjectAboutFormValues = z.infer<
+  typeof settingsDataModelObjectAboutFormSchema
+>;
+
+type SettingsDataModelObjectAboutFormProps = {
+  disabled?: boolean;
+  objectMetadataItem?: ObjectMetadataItem;
+};
+
+const StyledInputsContainer = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  width: 100%;
+`;
+
+const StyledLabel = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+  text-transform: uppercase;
+`;
+
+const StyledInputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const SettingsDataModelObjectAboutForm = ({
+  disabled,
+  objectMetadataItem,
+}: SettingsDataModelObjectAboutFormProps) => {
+  const { control } = useFormContext<SettingsDataModelObjectAboutFormValues>();
+
+  return (
+    <>
+      <StyledInputsContainer>
+        <StyledInputContainer>
+          <StyledLabel>Icon</StyledLabel>
+          <Controller
+            name="icon"
+            control={control}
+            defaultValue={objectMetadataItem?.icon ?? 'IconListNumbers'}
+            render={({ field: { onChange, value } }) => (
+              <IconPicker
+                disabled={disabled}
+                selectedIconKey={value}
+                onChange={({ iconKey }) => onChange(iconKey)}
+              />
+            )}
+          />
+        </StyledInputContainer>
+        {[
+          {
+            label: 'Singular',
+            fieldName: 'labelSingular' as const,
+            placeholder: 'Listing',
+            defaultValue: objectMetadataItem?.labelSingular,
+          },
+          {
+            label: 'Plural',
+            fieldName: 'labelPlural' as const,
+            placeholder: 'Listings',
+            defaultValue: objectMetadataItem?.labelPlural,
+          },
+        ].map(({ defaultValue, fieldName, label, placeholder }) => (
+          <Controller
+            key={`object-${fieldName}-text-input`}
+            name={fieldName}
+            control={control}
+            defaultValue={defaultValue}
+            render={({ field: { onChange, value } }) => (
+              <TextInput
+                label={label}
+                placeholder={placeholder}
+                value={value}
+                onChange={onChange}
+                disabled={disabled}
+                fullWidth
+              />
+            )}
+          />
+        ))}
+      </StyledInputsContainer>
+      <Controller
+        name="description"
+        control={control}
+        defaultValue={objectMetadataItem?.description ?? null}
+        render={({ field: { onChange, value } }) => (
+          <TextArea
+            placeholder="Write a description"
+            minRows={4}
+            value={value ?? undefined}
+            onChange={(nextValue) => onChange(nextValue ?? null)}
+            disabled={disabled}
+          />
+        )}
+      />
+    </>
+  );
+};
--- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/stories/SettingsDataModelObjectAboutForm.stories.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/stories/SettingsDataModelObjectAboutForm.stories.tsx
@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { mockedCompanyObjectMetadataItem } from '@/object-record/record-field/__mocks__/fieldDefinitions';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { FormProviderDecorator } from '~/testing/decorators/FormProviderDecorator';
+import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
+
+import { SettingsDataModelObjectAboutForm } from '../SettingsDataModelObjectAboutForm';
+
+const StyledContainer = styled.div`
+  flex: 1;
+`;
+
+const meta: Meta<typeof SettingsDataModelObjectAboutForm> = {
+  title:
+    'Modules/Settings/DataModel/Objects/Forms/SettingsDataModelObjectAboutForm',
+  component: SettingsDataModelObjectAboutForm,
+  decorators: [
+    (Story) => (
+      <StyledContainer>
+        <Story />
+      </StyledContainer>
+    ),
+    FormProviderDecorator,
+    IconsProviderDecorator,
+    ComponentDecorator,
+  ],
+  parameters: {
+    container: { width: 520 },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SettingsDataModelObjectAboutForm>;
+
+export const Default: Story = {};
+
+export const WithDefaultValues: Story = {
+  args: {
+    objectMetadataItem: mockedCompanyObjectMetadataItem,
+  },
+};
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx
@ -1,47 +1,60 @@
-import { useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';

 import { useCreateOneObjectMetadataItem } from '@/object-metadata/hooks/useCreateOneObjectMetadataItem';
 import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { SettingsObjectFormSection } from '@/settings/data-model/components/SettingsObjectFormSection';
+import {
+  SettingsDataModelObjectAboutForm,
+  settingsDataModelObjectAboutFormSchema,
+} from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm';
 import { settingsCreateObjectInputSchema } from '@/settings/data-model/validation-schemas/settingsCreateObjectInputSchema';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { IconSettings } from '@/ui/display/icon';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';

+const newObjectFormSchema = settingsDataModelObjectAboutFormSchema;
+
+type SettingsDataModelNewObjectFormValues = z.infer<typeof newObjectFormSchema>;
+
 export const SettingsNewObject = () => {
  const navigate = useNavigate();
  const { enqueueSnackBar } = useSnackBar();

  const { createOneObjectMetadataItem } = useCreateOneObjectMetadataItem();

-  const [formValues, setFormValues] = useState<{
-    description?: string;
-    icon: string;
-    labelPlural: string;
-    labelSingular: string;
-  }>({ icon: 'IconListNumbers', labelPlural: '', labelSingular: '' });
+  const settingsObjectsPagePath = getSettingsPagePath(SettingsPath.Objects);

-  const canSave = !!formValues.labelPlural && !!formValues.labelSingular;
+  const formConfig = useForm<SettingsDataModelNewObjectFormValues>({
+    mode: 'onTouched',
+    resolver: zodResolver(newObjectFormSchema),
+  });
+
+  const canSave = formConfig.formState.isValid;

  const handleSave = async () => {
+    const formValues = formConfig.getValues();
+
    try {
-      const createdObject = await createOneObjectMetadataItem(
+      const { data: response } = await createOneObjectMetadataItem(
        settingsCreateObjectInputSchema.parse(formValues),
      );

      navigate(
-        createdObject.data?.createOneObject.isActive
-          ? `/settings/objects/${getObjectSlug(
-              createdObject.data.createOneObject,
+        response
+          ? `${settingsObjectsPagePath}/${getObjectSlug(
+              response.createOneObject,
            )}`
-          : '/settings/objects',
+          : settingsObjectsPagePath,
      );
    } catch (error) {
      enqueueSnackBar((error as Error).message, {
@ -51,37 +64,35 @@ export const SettingsNewObject = () => {
  };

  return (
-    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <SettingsPageContainer>
-        <SettingsHeaderContainer>
-          <Breadcrumb
-            links={[
-              {
-                children: 'Objects',
-                href: getSettingsPagePath(SettingsPath.Objects),
-              },
-              { children: 'New' },
-            ]}
-          />
-          <SaveAndCancelButtons
-            isSaveDisabled={!canSave}
-            onCancel={() => navigate(getSettingsPagePath(SettingsPath.Objects))}
-            onSave={handleSave}
-          />
-        </SettingsHeaderContainer>
-        <SettingsObjectFormSection
-          icon={formValues.icon}
-          singularName={formValues.labelSingular}
-          pluralName={formValues.labelPlural}
-          description={formValues.description}
-          onChange={(formValues) => {
-            setFormValues((previousValues) => ({
-              ...previousValues,
-              ...formValues,
-            }));
-          }}
-        />
-      </SettingsPageContainer>
-    </SubMenuTopBarContainer>
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <FormProvider {...formConfig}>
+      <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+        <SettingsPageContainer>
+          <SettingsHeaderContainer>
+            <Breadcrumb
+              links={[
+                {
+                  children: 'Objects',
+                  href: settingsObjectsPagePath,
+                },
+                { children: 'New' },
+              ]}
+            />
+            <SaveAndCancelButtons
+              isSaveDisabled={!canSave}
+              onCancel={() => navigate(settingsObjectsPagePath)}
+              onSave={handleSave}
+            />
+          </SettingsHeaderContainer>
+          <Section>
+            <H2Title
+              title="About"
+              description="Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms."
+            />
+            <SettingsDataModelObjectAboutForm />
+          </Section>
+        </SettingsPageContainer>
+      </SubMenuTopBarContainer>
+    </FormProvider>
  );
 };
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx
@ -1,5 +1,9 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
+import { zodResolver } from '@hookform/resolvers/zod';
+import pick from 'lodash.pick';
+import { z } from 'zod';

 import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
 import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem';
@ -7,7 +11,10 @@ import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { SettingsObjectFormSection } from '@/settings/data-model/components/SettingsObjectFormSection';
+import {
+  SettingsDataModelObjectAboutForm,
+  settingsDataModelObjectAboutFormSchema,
+} from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm';
 import { SettingsDataModelObjectSettingsFormCard } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard';
 import { settingsUpdateObjectInputSchema } from '@/settings/data-model/validation-schemas/settingsUpdateObjectInputSchema';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@ -21,6 +28,12 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
 import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';

+const objectEditFormSchema = settingsDataModelObjectAboutFormSchema;
+
+type SettingsDataModelObjectEditFormValues = z.infer<
+  typeof objectEditFormSchema
+>;
+
 export const SettingsObjectEdit = () => {
  const navigate = useNavigate();
  const { enqueueSnackBar } = useSnackBar();
@ -33,57 +46,37 @@ export const SettingsObjectEdit = () => {
  const activeObjectMetadataItem =
    findActiveObjectMetadataItemBySlug(objectSlug);

-  const [formValues, setFormValues] = useState<
-    Partial<{
-      icon: string;
-      labelSingular: string;
-      labelPlural: string;
-      description: string;
-    }>
-  >({});
+  const settingsObjectsPagePath = getSettingsPagePath(SettingsPath.Objects);
+
+  const formConfig = useForm<SettingsDataModelObjectEditFormValues>({
+    mode: 'onTouched',
+    resolver: zodResolver(objectEditFormSchema),
+  });

  useEffect(() => {
-    if (!activeObjectMetadataItem) {
-      navigate(AppPath.NotFound);
-      return;
-    }
-
-    if (!Object.keys(formValues).length) {
-      setFormValues({
-        icon: activeObjectMetadataItem.icon ?? undefined,
-        labelSingular: activeObjectMetadataItem.labelSingular,
-        labelPlural: activeObjectMetadataItem.labelPlural,
-        description: activeObjectMetadataItem.description ?? undefined,
-      });
-    }
-  }, [activeObjectMetadataItem, formValues, navigate]);
+    if (!activeObjectMetadataItem) navigate(AppPath.NotFound);
+  }, [activeObjectMetadataItem, navigate]);

  if (!activeObjectMetadataItem) return null;

-  const areRequiredFieldsFilled =
-    !!formValues.labelSingular && !!formValues.labelPlural;
-
-  const hasChanges =
-    formValues.description !== activeObjectMetadataItem.description ||
-    formValues.icon !== activeObjectMetadataItem.icon ||
-    formValues.labelPlural !== activeObjectMetadataItem.labelPlural ||
-    formValues.labelSingular !== activeObjectMetadataItem.labelSingular;
-
-  const canSave = areRequiredFieldsFilled && hasChanges;
+  const { isDirty, isValid } = formConfig.formState;
+  const canSave = isDirty && isValid;

  const handleSave = async () => {
-    const editedObjectMetadataItem = {
-      ...activeObjectMetadataItem,
-      ...formValues,
-    };
+    const formValues = formConfig.getValues();
+    const dirtyFieldKeys = Object.keys(
+      formConfig.formState.dirtyFields,
+    ) as (keyof SettingsDataModelObjectEditFormValues)[];

    try {
      await updateOneObjectMetadataItem({
        idToUpdate: activeObjectMetadataItem.id,
-        updatePayload: settingsUpdateObjectInputSchema.parse(formValues),
+        updatePayload: settingsUpdateObjectInputSchema.parse(
+          pick(formValues, dirtyFieldKeys),
+        ),
      });

-      navigate(`/settings/objects/${getObjectSlug(editedObjectMetadataItem)}`);
+      navigate(`${settingsObjectsPagePath}/${getObjectSlug(formValues)}`);
    } catch (error) {
      enqueueSnackBar((error as Error).message, {
        variant: 'error',
@ -96,63 +89,68 @@ export const SettingsObjectEdit = () => {
      idToUpdate: activeObjectMetadataItem.id,
      updatePayload: { isActive: false },
    });
-    navigate(getSettingsPagePath(SettingsPath.Objects));
+    navigate(settingsObjectsPagePath);
  };

  return (
-    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <SettingsPageContainer>
-        <SettingsHeaderContainer>
-          <Breadcrumb
-            links={[
-              { children: 'Objects', href: '/settings/objects' },
-              {
-                children: activeObjectMetadataItem.labelPlural,
-                href: `/settings/objects/${objectSlug}`,
-              },
-              { children: 'Edit' },
-            ]}
-          />
-          {activeObjectMetadataItem.isCustom && (
-            <SaveAndCancelButtons
-              isSaveDisabled={!canSave}
-              onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
-              onSave={handleSave}
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <FormProvider {...formConfig}>
+      <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+        <SettingsPageContainer>
+          <SettingsHeaderContainer>
+            <Breadcrumb
+              links={[
+                {
+                  children: 'Objects',
+                  href: settingsObjectsPagePath,
+                },
+                {
+                  children: activeObjectMetadataItem.labelPlural,
+                  href: `${settingsObjectsPagePath}/${objectSlug}`,
+                },
+                { children: 'Edit' },
+              ]}
            />
-          )}
-        </SettingsHeaderContainer>
-        <SettingsObjectFormSection
-          disabled={!activeObjectMetadataItem.isCustom}
-          icon={formValues.icon}
-          singularName={formValues.labelSingular}
-          pluralName={formValues.labelPlural}
-          description={formValues.description}
-          onChange={(values) =>
-            setFormValues((previousFormValues) => ({
-              ...previousFormValues,
-              ...values,
-            }))
-          }
-        />
-        <Section>
-          <H2Title
-            title="Settings"
-            description="Choose the fields that will identify your records"
-          />
-          <SettingsDataModelObjectSettingsFormCard
-            objectMetadataItem={activeObjectMetadataItem}
-          />
-        </Section>
-        <Section>
-          <H2Title title="Danger zone" description="Disable object" />
-          <Button
-            Icon={IconArchive}
-            title="Disable"
-            size="small"
-            onClick={handleDisable}
-          />
-        </Section>
-      </SettingsPageContainer>
-    </SubMenuTopBarContainer>
+            {activeObjectMetadataItem.isCustom && (
+              <SaveAndCancelButtons
+                isSaveDisabled={!canSave}
+                onCancel={() =>
+                  navigate(`${settingsObjectsPagePath}/${objectSlug}`)
+                }
+                onSave={handleSave}
+              />
+            )}
+          </SettingsHeaderContainer>
+          <Section>
+            <H2Title
+              title="About"
+              description="Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms."
+            />
+            <SettingsDataModelObjectAboutForm
+              disabled={!activeObjectMetadataItem.isCustom}
+              objectMetadataItem={activeObjectMetadataItem}
+            />
+          </Section>
+          <Section>
+            <H2Title
+              title="Settings"
+              description="Choose the fields that will identify your records"
+            />
+            <SettingsDataModelObjectSettingsFormCard
+              objectMetadataItem={activeObjectMetadataItem}
+            />
+          </Section>
+          <Section>
+            <H2Title title="Danger zone" description="Disable object" />
+            <Button
+              Icon={IconArchive}
+              title="Disable"
+              size="small"
+              onClick={handleDisable}
+            />
+          </Section>
+        </SettingsPageContainer>
+      </SubMenuTopBarContainer>
+    </FormProvider>
  );
 };
--- a/packages/twenty-front/src/testing/decorators/FormProviderDecorator.tsx
+++ b/packages/twenty-front/src/testing/decorators/FormProviderDecorator.tsx
@ -0,0 +1,13 @@
+import { FormProvider, useForm } from 'react-hook-form';
+import { Decorator } from '@storybook/react';
+
+export const FormProviderDecorator: Decorator = (Story) => {
+  const formConfig = useForm();
+
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <FormProvider {...formConfig}>
+      <Story />
+    </FormProvider>
+  );
+};
--- a/yarn.lock
+++ b/yarn.lock
@ -15636,6 +15636,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@types/lodash.pick@npm:^4.3.7":
+  version: 4.4.9
+  resolution: "@types/lodash.pick@npm:4.4.9"
+  dependencies:
+    "@types/lodash": "npm:*"
+  checksum: 61ae2fb9fe817a2f398863d10dc57e3cb864ebadefb7f3554d8d0c189448e08a174d6bfdd6e0220988ea084a2d47c3377908cf037e2b3ce552aa79ce0f36bc9f
+  languageName: node
+  linkType: hard
+
 "@types/lodash.snakecase@npm:^4.1.7":
  version: 4.1.9
  resolution: "@types/lodash.snakecase@npm:4.1.9"
@ -44428,6 +44437,7 @@ __metadata:
    "@types/lodash.isobject": "npm:^3.0.7"
    "@types/lodash.kebabcase": "npm:^4.1.7"
    "@types/lodash.merge": "npm:^4.6.7"
+    "@types/lodash.pick": "npm:^4.3.7"
    "@types/lodash.snakecase": "npm:^4.1.7"
    "@types/lodash.upperfirst": "npm:^4.3.7"
    "@types/luxon": "npm:^3.3.0"
@ -44525,6 +44535,7 @@ __metadata:
    lodash.kebabcase: "npm:^4.1.1"
    lodash.merge: "npm:^4.6.2"
    lodash.omit: "npm:^4.5.0"
+    lodash.pick: "npm:^4.4.0"
    lodash.snakecase: "npm:^4.1.1"
    lodash.upperfirst: "npm:^4.3.1"
    luxon: "npm:^3.3.0"