[REFACTOR] Split in two distinct forms Settings Object Model page

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

@@ -23,7 +23,6 @@ const StyledSettingsPageContainer = styled.div<{
     return OBJECT_SETTINGS_WIDTH + 'px';
   }};
   padding-bottom: ${({ theme }) => theme.spacing(20)};
-  height: 100%;
 `;
 
 export const SettingsPageContainer = ({

packages/twenty-front/src/modules/settings/constants/SettingsObjectModel.ts

@@ -0,0 +1,2 @@
+export const SETTINGS_OBJECT_MODEL_IS_LABEL_SYNCED_WITH_NAME_LABEL_DEFAULT_VALUE =
+  true;

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx

@@ -11,8 +11,8 @@ import {
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { t } from '@lingui/core/macro';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 type SettingsObjectFieldInactiveActionDropdownProps = {
   isCustomField?: boolean;

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsUpdateDataModelObjectAboutForm.tsx

@@ -0,0 +1,103 @@
+import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { SettingsDataModelObjectAboutForm } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm';
+import {
+  SettingsDataModelObjectAboutFormValues,
+  settingsDataModelObjectAboutFormSchema,
+} from '@/settings/data-model/validation-schemas/settingsDataModelObjectAboutFormSchema';
+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 { zodResolver } from '@hookform/resolvers/zod';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useSetRecoilState } from 'recoil';
+import { ZodError } from 'zod';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { updatedObjectNamePluralState } from '~/pages/settings/data-model/states/updatedObjectNamePluralState';
+
+type SettingsUpdateDataModelObjectAboutFormProps = {
+  objectMetadataItem: ObjectMetadataItem;
+};
+
+export const SettingsUpdateDataModelObjectAboutForm = ({
+  objectMetadataItem,
+}: SettingsUpdateDataModelObjectAboutFormProps) => {
+  const navigate = useNavigateSettings();
+  const { enqueueSnackBar } = useSnackBar();
+  const setUpdatedObjectNamePlural = useSetRecoilState(
+    updatedObjectNamePluralState,
+  );
+  const { updateOneObjectMetadataItem } = useUpdateOneObjectMetadataItem();
+  const {
+    description,
+    icon,
+    isLabelSyncedWithName,
+    labelPlural,
+    labelSingular,
+    namePlural,
+    nameSingular,
+  } = objectMetadataItem;
+  const formConfig = useForm<SettingsDataModelObjectAboutFormValues>({
+    mode: 'onTouched',
+    resolver: zodResolver(settingsDataModelObjectAboutFormSchema),
+    defaultValues: {
+      description,
+      icon: icon ?? undefined,
+      isLabelSyncedWithName,
+      labelPlural,
+      labelSingular,
+      namePlural,
+      nameSingular,
+    },
+  });
+
+  const handleSave = async (
+    formValues: SettingsDataModelObjectAboutFormValues,
+  ) => {
+    if (!(Object.keys(formConfig.formState.dirtyFields).length > 0)) {
+      return;
+    }
+
+    const objectNamePluralForRedirection =
+      formValues.namePlural ?? objectMetadataItem.namePlural;
+
+    setUpdatedObjectNamePlural(objectNamePluralForRedirection);
+
+    try {
+      console.log({ formValues });
+      await updateOneObjectMetadataItem({
+        idToUpdate: objectMetadataItem.id,
+        updatePayload: formValues,
+      });
+
+      formConfig.reset(undefined, { keepValues: true });
+
+      navigate(SettingsPath.ObjectDetail, {
+        objectNamePlural: objectNamePluralForRedirection,
+      });
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+      if (error instanceof ZodError) {
+        enqueueSnackBar(error.issues[0].message, {
+          variant: SnackBarVariant.Error,
+        });
+      } else {
+        enqueueSnackBar((error as Error).message, {
+          variant: SnackBarVariant.Error,
+        });
+      }
+    }
+  };
+
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <FormProvider {...formConfig}>
+      <SettingsDataModelObjectAboutForm
+        onNewDirtyField={() => formConfig.handleSubmit(handleSave)()}
+        disableEdition={!objectMetadataItem.isCustom}
+        objectMetadataItem={objectMetadataItem}
+      />
+    </FormProvider>
+  );
+};

packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx

@@ -1,39 +1,14 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { FormProvider, useForm } from 'react-hook-form';
 import { Button, H2Title, IconArchive, Section } from 'twenty-ui';
-import { ZodError, z } from 'zod';
 
 import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem';
 import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
-import {
-  IS_LABEL_SYNCED_WITH_NAME_LABEL,
-  SettingsDataModelObjectAboutForm,
-  settingsDataModelObjectAboutFormSchema,
-} from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm';
-import { settingsDataModelObjectIdentifiersFormSchema } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm';
+import { SettingsUpdateDataModelObjectAboutForm } from '@/settings/data-model/object-details/components/SettingsUpdateDataModelObjectAboutForm';
 import { SettingsDataModelObjectSettingsFormCard } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard';
-import { settingsUpdateObjectInputSchema } from '@/settings/data-model/validation-schemas/settingsUpdateObjectInputSchema';
 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 styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
-import pick from 'lodash.pick';
-import { useSetRecoilState } from 'recoil';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
-import { updatedObjectNamePluralState } from '~/pages/settings/data-model/states/updatedObjectNamePluralState';
-import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
-
-const objectEditFormSchema = z
-  .object({})
-  .merge(settingsDataModelObjectAboutFormSchema)
-  .merge(settingsDataModelObjectIdentifiersFormSchema);
-
-type SettingsDataModelObjectEditFormValues = z.infer<
-  typeof objectEditFormSchema
->;
 
 type ObjectSettingsProps = {
   objectMetadataItem: ObjectMetadataItem;
@@ -52,101 +27,7 @@ const StyledFormSection = styled(Section)`
 export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
   const { t } = useLingui();
   const navigate = useNavigateSettings();
-  const { enqueueSnackBar } = useSnackBar();
-  const setUpdatedObjectNamePlural = useSetRecoilState(
-    updatedObjectNamePluralState,
-  );
-
   const { updateOneObjectMetadataItem } = useUpdateOneObjectMetadataItem();
-
-  const formConfig = useForm<SettingsDataModelObjectEditFormValues>({
-    mode: 'onTouched',
-    resolver: zodResolver(objectEditFormSchema),
-  });
-  const { isDirty } = formConfig.formState;
-
-  const getUpdatePayload = (
-    formValues: SettingsDataModelObjectEditFormValues,
-  ) => {
-    let values = formValues;
-    const dirtyFieldKeys = Object.keys(
-      formConfig.formState.dirtyFields,
-    ) as (keyof SettingsDataModelObjectEditFormValues)[];
-    const shouldComputeNamesFromLabels: boolean = dirtyFieldKeys.includes(
-      IS_LABEL_SYNCED_WITH_NAME_LABEL,
-    )
-      ? (formValues.isLabelSyncedWithName as boolean)
-      : objectMetadataItem.isLabelSyncedWithName;
-
-    if (shouldComputeNamesFromLabels) {
-      values = {
-        ...values,
-        ...(values.labelSingular && dirtyFieldKeys.includes('labelSingular')
-          ? {
-              nameSingular: computeMetadataNameFromLabel(
-                formValues.labelSingular,
-              ),
-            }
-          : {}),
-        ...(values.labelPlural && dirtyFieldKeys.includes('labelPlural')
-          ? {
-              namePlural: computeMetadataNameFromLabel(formValues.labelPlural),
-            }
-          : {}),
-      };
-    }
-
-    return settingsUpdateObjectInputSchema.parse(
-      pick(values, [
-        ...dirtyFieldKeys,
-        ...(shouldComputeNamesFromLabels &&
-        dirtyFieldKeys.includes('labelPlural')
-          ? ['namePlural']
-          : []),
-        ...(shouldComputeNamesFromLabels &&
-        dirtyFieldKeys.includes('labelSingular')
-          ? ['nameSingular']
-          : []),
-      ]),
-    );
-  };
-
-  const handleSave = async (
-    formValues: SettingsDataModelObjectEditFormValues,
-  ) => {
-    if (!isDirty) {
-      return;
-    }
-    try {
-      const updatePayload = getUpdatePayload(formValues);
-      const objectNamePluralForRedirection =
-        updatePayload.namePlural ?? objectMetadataItem.namePlural;
-
-      setUpdatedObjectNamePlural(objectNamePluralForRedirection);
-
-      await updateOneObjectMetadataItem({
-        idToUpdate: objectMetadataItem.id,
-        updatePayload,
-      });
-
-      formConfig.reset(undefined, { keepValues: true });
-
-      navigate(SettingsPath.ObjectDetail, {
-        objectNamePlural: objectNamePluralForRedirection,
-      });
-    } catch (error) {
-      if (error instanceof ZodError) {
-        enqueueSnackBar(error.issues[0].message, {
-          variant: SnackBarVariant.Error,
-        });
-      } else {
-        enqueueSnackBar((error as Error).message, {
-          variant: SnackBarVariant.Error,
-        });
-      }
-    }
-  };
-
   const handleDisable = async () => {
     await updateOneObjectMetadataItem({
       idToUpdate: objectMetadataItem.id,
@@ -157,49 +38,42 @@ export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
 
   return (
     <RecordFieldValueSelectorContextProvider>
-      <FormProvider {...formConfig}>
-        <StyledContentContainer>
-          <StyledFormSection>
+      <StyledContentContainer>
+        <StyledFormSection>
+          <H2Title
+            title={t`About`}
+            description={t`Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms.`}
+          />
+          <SettingsUpdateDataModelObjectAboutForm
+            objectMetadataItem={objectMetadataItem}
+          />
+        </StyledFormSection>
+        <StyledFormSection>
+          <Section>
             <H2Title
-              title={t`About`}
-              description={t`Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms.`}
+              title={t`Options`}
+              description={t`Choose the fields that will identify your records`}
             />
-            <SettingsDataModelObjectAboutForm
-              disableEdition={!objectMetadataItem.isCustom}
+            <SettingsDataModelObjectSettingsFormCard
               objectMetadataItem={objectMetadataItem}
-              onBlur={() => {
-                formConfig.handleSubmit(handleSave)();
-              }}
             />
-          </StyledFormSection>
-          <StyledFormSection>
-            <Section>
-              <H2Title
-                title={t`Options`}
-                description={t`Choose the fields that will identify your records`}
-              />
-              <SettingsDataModelObjectSettingsFormCard
-                onBlur={() => formConfig.handleSubmit(handleSave)()}
-                objectMetadataItem={objectMetadataItem}
-              />
-            </Section>
-          </StyledFormSection>
-          <StyledFormSection>
-            <Section>
-              <H2Title
-                title={t`Danger zone`}
-                description={t`Deactivate object`}
-              />
-              <Button
-                Icon={IconArchive}
-                title={t`Deactivate`}
-                size="small"
-                onClick={handleDisable}
-              />
-            </Section>
-          </StyledFormSection>
-        </StyledContentContainer>
-      </FormProvider>
+          </Section>
+        </StyledFormSection>
+        <StyledFormSection>
+          <Section>
+            <H2Title
+              title={t`Danger zone`}
+              description={t`Deactivate object`}
+            />
+            <Button
+              Icon={IconArchive}
+              title={t`Deactivate`}
+              size="small"
+              onClick={handleDisable}
+            />
+          </Section>
+        </StyledFormSection>
+      </StyledContentContainer>
     </RecordFieldValueSelectorContextProvider>
   );
 };