FieldDisplay & FieldInput (#1708)

* Removed view field duplicate types

* wip

* wip 2

* wip 3

* Unified state for fields

* Renaming

* Wip

* Post merge

* Post post merge

* wip

* Delete unused file

* Boolean and Probability

* Finished InlineCell

* Renamed EditableCell to TableCell

* Finished double texts

* Finished MoneyField

* Fixed bug inline cell click outside

* Fixed hotkey scope

* Final fixes

* Phone

* Fix url and number input validation

* Fix

* Fix position

* wip refactor activity editor

* Fixed activity editor

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/people/components/PeoplePicker.tsx

@@ -55,6 +55,7 @@ export const PeoplePicker = ({
       name: `${person.firstName} ${person.lastName}`,
       avatarType: 'rounded',
       avatarUrl: person.avatarUrl ?? '',
+      originalEntity: person,
     }),
     orderByField: 'firstName',
     excludeEntityIds: excludePersonIds,

front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx

@@ -1,13 +1,13 @@
 import {
-  ViewFieldDateMetadata,
-  ViewFieldDoubleTextChipMetadata,
-  ViewFieldEmailMetadata,
-  ViewFieldMetadata,
-  ViewFieldPhoneMetadata,
-  ViewFieldRelationMetadata,
-  ViewFieldTextMetadata,
-  ViewFieldURLMetadata,
-} from '@/ui/editable-field/types/ViewField';
+  FieldDateMetadata,
+  FieldDoubleTextChipMetadata,
+  FieldEmailMetadata,
+  FieldMetadata,
+  FieldPhoneMetadata,
+  FieldRelationMetadata,
+  FieldTextMetadata,
+  FieldURLMetadata,
+} from '@/ui/field/types/FieldMetadata';
 import {
   IconBrandLinkedin,
   IconBrandX,
@@ -22,7 +22,7 @@ import {
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import { ColumnDefinition } from '@/ui/table/types/ColumnDefinition';
 
-export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadata>[] =
+export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[] =
   [
     {
       key: 'displayName',
@@ -30,8 +30,8 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
       Icon: IconUser,
       size: 210,
       index: 0,
+      type: 'double-text-chip',
       metadata: {
-        type: 'double-text-chip',
         firstValueFieldName: 'firstName',
         secondValueFieldName: 'lastName',
         firstValuePlaceholder: 'F​irst n​ame', // Hack: Fake character to prevent password-manager from filling the field
@@ -39,100 +39,104 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
         avatarUrlFieldName: 'avatarUrl',
         entityType: Entity.Person,
       },
-    } satisfies ColumnDefinition<ViewFieldDoubleTextChipMetadata>,
+    } satisfies ColumnDefinition<FieldDoubleTextChipMetadata>,
     {
       key: 'email',
       name: 'Email',
       Icon: IconMail,
       size: 150,
+      type: 'email',
       index: 1,
       metadata: {
-        type: 'email',
         fieldName: 'email',
         placeHolder: 'Ema​il', // Hack: Fake character to prevent password-manager from filling the field
       },
-    } satisfies ColumnDefinition<ViewFieldEmailMetadata>,
+      useEditButton: true,
+    } satisfies ColumnDefinition<FieldEmailMetadata>,
     {
       key: 'company',
       name: 'Company',
       Icon: IconBuildingSkyscraper,
       size: 150,
       index: 2,
+      type: 'relation',
       metadata: {
-        type: 'relation',
         fieldName: 'company',
         relationType: Entity.Company,
       },
-    } satisfies ColumnDefinition<ViewFieldRelationMetadata>,
+    } satisfies ColumnDefinition<FieldRelationMetadata>,
     {
       key: 'phone',
       name: 'Phone',
       Icon: IconPhone,
       size: 150,
       index: 3,
+      type: 'phone',
       metadata: {
-        type: 'phone',
         fieldName: 'phone',
         placeHolder: 'Phon​e', // Hack: Fake character to prevent password-manager from filling the field
       },
-    } satisfies ColumnDefinition<ViewFieldPhoneMetadata>,
+      useEditButton: true,
+    } satisfies ColumnDefinition<FieldPhoneMetadata>,
     {
       key: 'createdAt',
       name: 'Creation',
       Icon: IconCalendarEvent,
       size: 150,
       index: 4,
+      type: 'date',
       metadata: {
-        type: 'date',
         fieldName: 'createdAt',
       },
-    } satisfies ColumnDefinition<ViewFieldDateMetadata>,
+    } satisfies ColumnDefinition<FieldDateMetadata>,
     {
       key: 'city',
       name: 'City',
       Icon: IconMap,
       size: 150,
       index: 5,
+      type: 'text',
       metadata: {
-        type: 'text',
         fieldName: 'city',
         placeHolder: 'Cit​y', // Hack: Fake character to prevent password-manager from filling the field
       },
-    } satisfies ColumnDefinition<ViewFieldTextMetadata>,
+    } satisfies ColumnDefinition<FieldTextMetadata>,
     {
       key: 'jobTitle',
       name: 'Job title',
       Icon: IconBriefcase,
       size: 150,
       index: 6,
+      type: 'text',
       metadata: {
-        type: 'text',
         fieldName: 'jobTitle',
         placeHolder: 'Job title',
       },
-    } satisfies ColumnDefinition<ViewFieldTextMetadata>,
+    } satisfies ColumnDefinition<FieldTextMetadata>,
     {
       key: 'linkedin',
       name: 'LinkedIn',
       Icon: IconBrandLinkedin,
       size: 150,
       index: 7,
+      type: 'url',
       metadata: {
-        type: 'url',
         fieldName: 'linkedinUrl',
         placeHolder: 'LinkedIn',
       },
-    } satisfies ColumnDefinition<ViewFieldURLMetadata>,
+      useEditButton: true,
+    } satisfies ColumnDefinition<FieldURLMetadata>,
     {
       key: 'x',
       name: 'Twitter',
       Icon: IconBrandX,
       size: 150,
       index: 8,
+      type: 'url',
       metadata: {
-        type: 'url',
         fieldName: 'xUrl',
         placeHolder: 'X',
       },
-    } satisfies ColumnDefinition<ViewFieldURLMetadata>,
+      useEditButton: true,
+    } satisfies ColumnDefinition<FieldURLMetadata>,
   ];

front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import { FieldRecoilScopeContext } from '@/ui/editable-field/states/recoil-scope-contexts/FieldRecoilScopeContext';
-import { DoubleTextInputEdit } from '@/ui/input/components/DoubleTextInputEdit';
+import { EntityTitleDoubleTextInput } from '@/ui/input/components/EntityTitleDoubleTextInput';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Person, useUpdateOnePersonMutation } from '~/generated/graphql';
 
@@ -47,7 +47,7 @@ export const PeopleFullNameEditableField = ({ people }: OwnProps) => {
 
   return (
     <RecoilScope CustomRecoilScopeContext={FieldRecoilScopeContext}>
-      <DoubleTextInputEdit
+      <EntityTitleDoubleTextInput
         firstValuePlaceholder="Empty"
         secondValuePlaceholder="Empty"
         firstValue={internalValueFirstName ?? ''}

front/src/modules/people/hooks/useCreateActivityForPeople.ts

@@ -5,8 +5,8 @@ import {
   ActivityTargetableEntity,
   ActivityTargetableEntityType,
 } from '@/activities/types/ActivityTargetableEntity';
+import { entityFieldsFamilyState } from '@/ui/field/states/entityFieldsFamilyState';
 import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
-import { tableEntitiesFamilyState } from '@/ui/table/states/tableEntitiesFamilyState';
 import { ActivityType, Person } from '~/generated/graphql';
 
 export const useCreateActivityForPeople = () => {
@@ -20,7 +20,7 @@ export const useCreateActivityForPeople = () => {
         const relatedEntites: ActivityTargetableEntity[] = [];
         for (const id of selectedRowIds) {
           const person = snapshot
-            .getLoadable(tableEntitiesFamilyState(id))
+            .getLoadable(entityFieldsFamilyState(id))
             .getValue() as Person;
           if (
             person?.company?.id &&

front/src/modules/people/hooks/usePersonQuery.ts

@@ -1,12 +1,11 @@
 import { useSetRecoilState } from 'recoil';
 
-import { genericEntitiesFamilyState } from '@/ui/editable-field/states/genericEntitiesFamilyState';
+import { entityFieldsFamilyState } from '@/ui/field/states/entityFieldsFamilyState';
 import { useGetPersonQuery } from '~/generated/graphql';
 
 export const usePersonQuery = (id: string) => {
-  const updatePersonShowPage = useSetRecoilState(
-    genericEntitiesFamilyState(id),
-  );
+  const updatePersonShowPage = useSetRecoilState(entityFieldsFamilyState(id));
+
   return useGetPersonQuery({
     variables: { id },
     onCompleted: (data) => {