Update new/edit object according to figma (#3093)

* made changes according to figma

* remove click custom in test

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

@@ -7,35 +7,17 @@ import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsObjectFormSection } from '@/settings/data-model/components/SettingsObjectFormSection';
-import { SettingsAvailableStandardObjectsSection } from '@/settings/data-model/new-object/components/SettingsAvailableStandardObjectsSection';
-import {
-  NewObjectType,
-  SettingsNewObjectType,
-} from '@/settings/data-model/new-object/components/SettingsNewObjectType';
-import { SettingsObjectIconSection } from '@/settings/data-model/object-edit/SettingsObjectIconSection';
 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';
 
 export const SettingsNewObject = () => {
   const navigate = useNavigate();
-  const [selectedObjectType, setSelectedObjectType] =
-    useState<NewObjectType>('Standard');
   const { enqueueSnackBar } = useSnackBar();
 
-  const {
-    activateObjectMetadataItem: activateObject,
-    createObjectMetadataItem: createObject,
-    disabledObjectMetadataItems: disabledObjects,
-  } = useObjectMetadataItemForSettings();
-
-  const [
-    selectedStandardObjectMetadataIds,
-    setSelectedStandardObjectMetadataIds,
-  ] = useState<Record<string, boolean>>({});
+  const { createObjectMetadataItem: createObject } =
+    useObjectMetadataItemForSettings();
 
   const [customFormValues, setCustomFormValues] = useState<{
     description?: string;
@@ -45,49 +27,28 @@ export const SettingsNewObject = () => {
   }>({ icon: 'IconPigMoney', labelPlural: '', labelSingular: '' });
 
   const canSave =
-    (selectedObjectType === 'Standard' &&
-      Object.values(selectedStandardObjectMetadataIds).some(
-        (isSelected) => isSelected,
-      )) ||
-    (selectedObjectType === 'Custom' &&
-      !!customFormValues.labelPlural &&
-      !!customFormValues.labelSingular);
+    !!customFormValues.labelPlural && !!customFormValues.labelSingular;
 
   const handleSave = async () => {
-    if (selectedObjectType === 'Standard') {
-      await Promise.all(
-        Object.entries(selectedStandardObjectMetadataIds).map(
-          ([standardObjectMetadataId, isSelected]) =>
-            isSelected
-              ? activateObject({ id: standardObjectMetadataId })
-              : undefined,
-        ),
+    try {
+      const createdObject = await createObject({
+        labelPlural: customFormValues.labelPlural,
+        labelSingular: customFormValues.labelSingular,
+        description: customFormValues.description,
+        icon: customFormValues.icon,
+      });
+
+      navigate(
+        createdObject.data?.createOneObject.isActive
+          ? `/settings/objects/${getObjectSlug(
+              createdObject.data.createOneObject,
+            )}`
+          : '/settings/objects',
       );
-
-      navigate('/settings/objects');
-    }
-
-    if (selectedObjectType === 'Custom') {
-      try {
-        const createdObject = await createObject({
-          labelPlural: customFormValues.labelPlural,
-          labelSingular: customFormValues.labelSingular,
-          description: customFormValues.description,
-          icon: customFormValues.icon,
-        });
-
-        navigate(
-          createdObject.data?.createOneObject.isActive
-            ? `/settings/objects/${getObjectSlug(
-                createdObject.data.createOneObject,
-              )}`
-            : '/settings/objects',
-        );
-      } catch (error) {
-        enqueueSnackBar((error as Error).message, {
-          variant: 'error',
-        });
-      }
+    } catch (error) {
+      enqueueSnackBar((error as Error).message, {
+        variant: 'error',
+      });
     }
   };
 
@@ -109,53 +70,18 @@ export const SettingsNewObject = () => {
             onSave={handleSave}
           />
         </SettingsHeaderContainer>
-        <Section>
-          <H2Title
-            title="Object type"
-            description="The type of object you want to add"
-          />
-          <SettingsNewObjectType
-            selectedType={selectedObjectType}
-            onTypeSelect={setSelectedObjectType}
-          />
-        </Section>
-        {selectedObjectType === 'Standard' && (
-          <SettingsAvailableStandardObjectsSection
-            objectItems={disabledObjects.filter(({ isCustom }) => !isCustom)}
-            onChange={(selectedIds) =>
-              setSelectedStandardObjectMetadataIds((previousSelectedIds) => ({
-                ...previousSelectedIds,
-                ...selectedIds,
-              }))
-            }
-            selectedIds={selectedStandardObjectMetadataIds}
-          />
-        )}
-        {selectedObjectType === 'Custom' && (
-          <>
-            <SettingsObjectIconSection
-              label={customFormValues.labelPlural}
-              iconKey={customFormValues.icon}
-              onChange={({ iconKey }) => {
-                setCustomFormValues((previousValues) => ({
-                  ...previousValues,
-                  icon: iconKey,
-                }));
-              }}
-            />
-            <SettingsObjectFormSection
-              singularName={customFormValues.labelSingular}
-              pluralName={customFormValues.labelPlural}
-              description={customFormValues.description}
-              onChange={(formValues) => {
-                setCustomFormValues((previousValues) => ({
-                  ...previousValues,
-                  ...formValues,
-                }));
-              }}
-            />
-          </>
-        )}
+        <SettingsObjectFormSection
+          icon={customFormValues.icon}
+          singularName={customFormValues.labelSingular}
+          pluralName={customFormValues.labelPlural}
+          description={customFormValues.description}
+          onChange={(formValues) => {
+            setCustomFormValues((previousValues) => ({
+              ...previousValues,
+              ...formValues,
+            }));
+          }}
+        />
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );

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

@@ -7,7 +7,6 @@ import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsObjectFormSection } from '@/settings/data-model/components/SettingsObjectFormSection';
-import { SettingsObjectIconSection } from '@/settings/data-model/object-edit/SettingsObjectIconSection';
 import { AppPath } from '@/types/AppPath';
 import { IconArchive, IconSettings } from '@/ui/display/icon';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
@@ -113,19 +112,9 @@ export const SettingsObjectEdit = () => {
             />
           )}
         </SettingsHeaderContainer>
-        <SettingsObjectIconSection
-          disabled={!activeObjectMetadataItem.isCustom}
-          iconKey={formValues.icon}
-          label={formValues.labelPlural}
-          onChange={({ iconKey }) =>
-            setFormValues((previousFormValues) => ({
-              ...previousFormValues,
-              icon: iconKey,
-            }))
-          }
-        />
         <SettingsObjectFormSection
           disabled={!activeObjectMetadataItem.isCustom}
+          icon={formValues.icon}
           singularName={formValues.labelSingular}
           pluralName={formValues.labelPlural}
           description={formValues.description}

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

@@ -48,7 +48,7 @@ export const SettingsObjects = () => {
           <StyledH1Title title="Objects" />
           <Button
             Icon={IconPlus}
-            title="New object"
+            title="Add object"
             accent="blue"
             size="small"
             onClick={() => navigate('/settings/objects/new')}

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

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/test';
 
 import {
   PageDecorator,
@@ -31,15 +30,3 @@ export const WithStandardSelected: Story = {
     await sleep(100);
   },
 };
-
-export const WithCustomSelected: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await sleep(1000);
-
-    const customButtonElement = canvas.getByText('Custom');
-
-    await userEvent.click(customButtonElement);
-  },
-};