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/pages/companies/CompanyShow.tsx

@@ -7,11 +7,10 @@ import { useCompanyQuery } from '@/companies/hooks/useCompanyQuery';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { AppPath } from '@/types/AppPath';
 import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
-import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
-import { EditableFieldDefinitionContext } from '@/ui/editable-field/contexts/EditableFieldDefinitionContext';
-import { EditableFieldEntityIdContext } from '@/ui/editable-field/contexts/EditableFieldEntityIdContext';
-import { EditableFieldMutationContext } from '@/ui/editable-field/contexts/EditableFieldMutationContext';
+import { InlineCell } from '@/ui/editable-field/components/InlineCell';
 import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
+import { EditableFieldHotkeyScope } from '@/ui/editable-field/types/EditableFieldHotkeyScope';
+import { FieldContext } from '@/ui/field/contexts/FieldContext';
 import { IconBuildingSkyscraper } from '@/ui/icon';
 import { PageBody } from '@/ui/layout/components/PageBody';
 import { PageContainer } from '@/ui/layout/components/PageContainer';
@@ -93,22 +92,22 @@ export const CompanyShow = () => {
                 )}
               />
               <PropertyBox extraPadding={true}>
-                <EditableFieldMutationContext.Provider
-                  value={useUpdateOneCompanyMutation}
-                >
-                  <EditableFieldEntityIdContext.Provider value={company.id}>
-                    {companyShowFieldDefinition.map((fieldDefinition) => {
-                      return (
-                        <EditableFieldDefinitionContext.Provider
-                          value={fieldDefinition}
-                          key={fieldDefinition.key}
-                        >
-                          <GenericEditableField />
-                        </EditableFieldDefinitionContext.Provider>
-                      );
-                    })}
-                  </EditableFieldEntityIdContext.Provider>
-                </EditableFieldMutationContext.Provider>
+                {companyShowFieldDefinition.map((fieldDefinition) => {
+                  return (
+                    <FieldContext.Provider
+                      key={company.id + fieldDefinition.key}
+                      value={{
+                        entityId: company.id,
+                        recoilScopeId: company.id + fieldDefinition.key,
+                        fieldDefinition,
+                        useUpdateEntityMutation: useUpdateOneCompanyMutation,
+                        hotkeyScope: EditableFieldHotkeyScope.EditableField,
+                      }}
+                    >
+                      <InlineCell />
+                    </FieldContext.Provider>
+                  );
+                })}
               </PropertyBox>
               <CompanyTeam company={company}></CompanyTeam>
             </ShowPageLeftContainer>

front/src/pages/companies/constants/companyShowFieldDefinition.tsx

@@ -1,4 +1,4 @@
-import { FieldDefinition } from '@/ui/editable-field/types/FieldDefinition';
+import { FieldDefinition } from '@/ui/field/types/FieldDefinition';
 import {
   FieldBooleanMetadata,
   FieldDateMetadata,
@@ -7,7 +7,7 @@ import {
   FieldRelationMetadata,
   FieldTextMetadata,
   FieldURLMetadata,
-} from '@/ui/editable-field/types/FieldMetadata';
+} from '@/ui/field/types/FieldMetadata';
 import {
   IconBrandX,
   IconCalendar,
@@ -29,6 +29,7 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
       fieldName: 'domainName',
       placeHolder: 'URL',
     },
+    useEditButton: true,
   } satisfies FieldDefinition<FieldURLMetadata>,
   {
     key: 'accountOwner',
@@ -78,6 +79,7 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
       fieldName: 'xUrl',
       placeHolder: 'X',
     },
+    useEditButton: true,
   } satisfies FieldDefinition<FieldURLMetadata>,
   {
     key: 'createdAt',

front/src/pages/people/PersonShow.tsx

@@ -8,11 +8,10 @@ import { GET_PERSON } from '@/people/graphql/queries/getPerson';
 import { usePersonQuery } from '@/people/hooks/usePersonQuery';
 import { AppPath } from '@/types/AppPath';
 import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
-import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
-import { EditableFieldDefinitionContext } from '@/ui/editable-field/contexts/EditableFieldDefinitionContext';
-import { EditableFieldEntityIdContext } from '@/ui/editable-field/contexts/EditableFieldEntityIdContext';
-import { EditableFieldMutationContext } from '@/ui/editable-field/contexts/EditableFieldMutationContext';
+import { InlineCell } from '@/ui/editable-field/components/InlineCell';
 import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
+import { EditableFieldHotkeyScope } from '@/ui/editable-field/types/EditableFieldHotkeyScope';
+import { FieldContext } from '@/ui/field/contexts/FieldContext';
 import { IconUser } from '@/ui/icon';
 import { PageBody } from '@/ui/layout/components/PageBody';
 import { PageContainer } from '@/ui/layout/components/PageContainer';
@@ -119,22 +118,22 @@ export const PersonShow = () => {
                 onUploadPicture={onUploadPicture}
               />
               <PropertyBox extraPadding={true}>
-                <EditableFieldMutationContext.Provider
-                  value={useUpdateOnePersonMutation}
-                >
-                  <EditableFieldEntityIdContext.Provider value={person.id}>
-                    {personShowFieldDefinition.map((fieldDefinition) => {
-                      return (
-                        <EditableFieldDefinitionContext.Provider
-                          value={fieldDefinition}
-                          key={fieldDefinition.key}
-                        >
-                          <GenericEditableField />
-                        </EditableFieldDefinitionContext.Provider>
-                      );
-                    })}
-                  </EditableFieldEntityIdContext.Provider>
-                </EditableFieldMutationContext.Provider>
+                {personShowFieldDefinition.map((fieldDefinition) => {
+                  return (
+                    <FieldContext.Provider
+                      value={{
+                        entityId: person.id,
+                        recoilScopeId: person.id + fieldDefinition.name,
+                        fieldDefinition,
+                        useUpdateEntityMutation: useUpdateOnePersonMutation,
+                        hotkeyScope: EditableFieldHotkeyScope.EditableField,
+                      }}
+                      key={person.id + fieldDefinition.name}
+                    >
+                      <InlineCell />
+                    </FieldContext.Provider>
+                  );
+                })}
               </PropertyBox>
             </ShowPageLeftContainer>
             <ShowPageRightContainer

front/src/pages/people/constants/personShowFieldDefinition.tsx

@@ -1,4 +1,4 @@
-import { FieldDefinition } from '@/ui/editable-field/types/FieldDefinition';
+import { FieldDefinition } from '@/ui/field/types/FieldDefinition';
 import {
   FieldDateMetadata,
   FieldMetadata,
@@ -6,7 +6,7 @@ import {
   FieldRelationMetadata,
   FieldTextMetadata,
   FieldURLMetadata,
-} from '@/ui/editable-field/types/FieldMetadata';
+} from '@/ui/field/types/FieldMetadata';
 import {
   IconBrandLinkedin,
   IconBrandX,
@@ -35,10 +35,10 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
     name: 'Company',
     Icon: IconBuildingSkyscraper,
     type: 'relation',
+    useEditButton: true,
     metadata: {
       fieldName: 'company',
       relationType: Entity.Company,
-      useEditButton: true,
     },
   } satisfies FieldDefinition<FieldRelationMetadata>,
   {
@@ -50,6 +50,7 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
       fieldName: 'phone',
       placeHolder: 'Phone',
     },
+    useEditButton: true,
   } satisfies FieldDefinition<FieldPhoneMetadata>,
   {
     key: 'jobTitle',
@@ -80,6 +81,7 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
       fieldName: 'linkedinUrl',
       placeHolder: 'Linkedin URL',
     },
+    useEditButton: true,
   } satisfies FieldDefinition<FieldURLMetadata>,
   {
     key: 'xUrl',
@@ -90,6 +92,7 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
       fieldName: 'xUrl',
       placeHolder: 'X URL',
     },
+    useEditButton: true,
   } satisfies FieldDefinition<FieldURLMetadata>,
   {
     key: 'createdAt',