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 });
           }
         }}

front/src/modules/settings/data-model/constants/dataTypes.ts

@@ -3,9 +3,7 @@ import {
   IconLink,
   IconNumbers,
   IconPlug,
-  IconSocial,
   IconTextSize,
-  IconUserCircle,
 } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
@@ -17,9 +15,7 @@ export const dataTypes: Record<
 > = {
   number: { label: 'Number', Icon: IconNumbers },
   text: { label: 'Text', Icon: IconTextSize },
-  link: { label: 'Link', Icon: IconLink },
-  teammate: { label: 'Team member', Icon: IconUserCircle },
+  url: { label: 'Link', Icon: IconLink },
   boolean: { label: 'True/False', Icon: IconCheck },
   relation: { label: 'Relation', Icon: IconPlug },
-  social: { label: 'Social', Icon: IconSocial },
 };

front/src/modules/settings/data-model/constants/mockObjects.ts

@@ -1,42 +1,4 @@
-import {
-  IconBrandLinkedin,
-  IconBrandTwitter,
-  IconBuildingSkyscraper,
-  IconCurrencyDollar,
-  IconFreeRights,
-  IconGraph,
-  IconHeadphones,
-  IconLink,
-  IconLuggage,
-  IconMouse2,
-  IconPlane,
-  IconTarget,
-  IconUser,
-  IconUserCircle,
-  IconUsers,
-} from '@/ui/display/icon';
-
-import { ObjectFieldItem } from '../types/ObjectFieldItem';
-
-export const activeObjectItems = [
-  {
-    name: 'Companies',
-    singularName: 'Company',
-    Icon: IconBuildingSkyscraper,
-    type: 'standard',
-    fields: 23,
-    instances: 165,
-    description: 'Lorem ipsum',
-  },
-  {
-    name: 'People',
-    singularName: 'Person',
-    Icon: IconUser,
-    type: 'standard',
-    fields: 16,
-    instances: 462,
-  },
-];
+import { IconMouse2 } from '@/ui/display/icon';
 
 export const standardObjects = [
   {
@@ -52,92 +14,3 @@ export const standardObjects = [
     description: 'Individuals who interact with your website',
   },
 ];
-
-export const disabledObjectItems = [
-  {
-    name: 'Travels',
-    Icon: IconLuggage,
-    type: 'custom',
-    fields: 23,
-    instances: 165,
-  },
-  {
-    name: 'Flights',
-    Icon: IconPlane,
-    type: 'custom',
-    fields: 23,
-    instances: 165,
-  },
-];
-
-export const activeFieldItems: ObjectFieldItem[] = [
-  {
-    name: 'People',
-    Icon: IconUser,
-    type: 'standard',
-    dataType: 'relation',
-  },
-  {
-    name: 'URL',
-    Icon: IconLink,
-    type: 'standard',
-    dataType: 'text',
-  },
-  {
-    name: 'Linkedin',
-    Icon: IconBrandLinkedin,
-    type: 'standard',
-    dataType: 'social',
-  },
-  {
-    name: 'Account Owner',
-    Icon: IconUserCircle,
-    type: 'standard',
-    dataType: 'teammate',
-  },
-  {
-    name: 'Employees',
-    Icon: IconUsers,
-    type: 'custom',
-    dataType: 'number',
-  },
-];
-
-export const disabledFieldItems: ObjectFieldItem[] = [
-  {
-    name: 'ICP',
-    Icon: IconTarget,
-    type: 'standard',
-    dataType: 'boolean',
-  },
-  {
-    name: 'Twitter',
-    Icon: IconBrandTwitter,
-    type: 'standard',
-    dataType: 'social',
-  },
-  {
-    name: 'Annual revenue',
-    Icon: IconCurrencyDollar,
-    type: 'standard',
-    dataType: 'number',
-  },
-  {
-    name: 'Is public',
-    Icon: IconGraph,
-    type: 'standard',
-    dataType: 'boolean',
-  },
-  {
-    name: 'Free tier?',
-    Icon: IconFreeRights,
-    type: 'custom',
-    dataType: 'boolean',
-  },
-  {
-    name: 'Priority support',
-    Icon: IconHeadphones,
-    type: 'custom',
-    dataType: 'boolean',
-  },
-];

front/src/modules/settings/data-model/types/ObjectFieldDataType.ts

@@ -1,8 +1,6 @@
 export type ObjectFieldDataType =
   | 'boolean'
-  | 'link'
   | 'number'
   | 'relation'
-  | 'social'
-  | 'teammate'
-  | 'text';
+  | 'text'
+  | 'url';

front/src/modules/settings/data-model/types/ObjectFieldItem.ts

@@ -1,10 +0,0 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-
-import { ObjectFieldDataType } from './ObjectFieldDataType';
-
-export type ObjectFieldItem = {
-  name: string;
-  Icon: IconComponent;
-  type: 'standard' | 'custom';
-  dataType: ObjectFieldDataType;
-};