feat: create custom object field (#2225)

Closes #2171

front/src/modules/settings/data-model/components/SettingsObjectFieldFormSection.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import { validateMetadataLabel } from '@/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';
@@ -13,8 +14,8 @@ type SettingsObjectFieldFormSectionProps = {
   iconKey?: string;
   onChange?: (
     formValues: Partial<{
-      iconKey: string;
-      name: string;
+      icon: string;
+      label: string;
       description: string;
     }>,
   ) => void;
@@ -42,13 +43,17 @@ export const SettingsObjectFieldFormSection = ({
     <StyledInputsContainer>
       <IconPicker
         selectedIconKey={iconKey}
-        onChange={(value) => onChange?.({ iconKey: value.iconKey })}
+        onChange={(value) => onChange?.({ icon: value.iconKey })}
         variant="primary"
       />
       <TextInput
         placeholder="Employees"
         value={name}
-        onChange={(value) => onChange?.({ name: value })}
+        onChange={(value) => {
+          if (!value || validateMetadataLabel(value)) {
+            onChange?.({ label: value });
+          }
+        }}
         disabled={disabled}
         fullWidth
       />

front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx

@@ -10,6 +10,9 @@ type SettingsObjectFieldTypeSelectSectionProps = {
   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,
   onChange,
@@ -23,10 +26,12 @@ export const SettingsObjectFieldTypeSelectSection = ({
       dropdownScopeId="object-field-type-select"
       value={type}
       onChange={onChange}
-      options={Object.entries(dataTypes).map(([key, dataType]) => ({
-        value: key as ObjectFieldDataType,
-        ...dataType,
-      }))}
+      options={Object.entries(dataTypesWithoutRelation).map(
+        ([key, dataType]) => ({
+          value: key as ObjectFieldDataType,
+          ...dataType,
+        }),
+      )}
     />
   </Section>
 );

front/src/modules/settings/data-model/components/SettingsObjectFormSection.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { validateMetadataObjectLabel } from '@/metadata/utils/validateMetadataObjectLabel';
+import { validateMetadataLabel } from '@/metadata/utils/validateMetadataLabel';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { TextArea } from '@/ui/input/components/TextArea';
 import { TextInput } from '@/ui/input/components/TextInput';
@@ -45,7 +45,7 @@ export const SettingsObjectFormSection = ({
         placeholder="Investor"
         value={singularName}
         onChange={(value) => {
-          if (!value || validateMetadataObjectLabel(value)) {
+          if (!value || validateMetadataLabel(value)) {
             onChange?.({ labelSingular: value });
           }
         }}
@@ -57,7 +57,7 @@ export const SettingsObjectFormSection = ({
         placeholder="Investors"
         value={pluralName}
         onChange={(value) => {
-          if (!value || validateMetadataObjectLabel(value)) {
+          if (!value || validateMetadataLabel(value)) {
             onChange?.({ labelPlural: value });
           }
         }}