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/ui/table/components/ColumnHead.tsx

@@ -2,14 +2,14 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
-import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
+import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
 import { EntityTableHeaderOptions } from './EntityTableHeaderOptions';
 
 type OwnProps = {
-  column: ColumnDefinition<ViewFieldMetadata>;
+  column: ColumnDefinition<FieldMetadata>;
   isFirstColumn: boolean;
   isLastColumn: boolean;
   primaryColumnKey: string;

front/src/modules/ui/table/components/EntityTable.tsx

@@ -83,7 +83,7 @@ const StyledTableContainer = styled.div`
 `;
 
 type OwnProps = {
-  updateEntityMutation: any;
+  updateEntityMutation: (params: any) => void;
 };
 
 export const EntityTable = ({ updateEntityMutation }: OwnProps) => {

front/src/modules/ui/table/components/EntityTableCell.tsx

@@ -3,16 +3,23 @@ import { useSetRecoilState } from 'recoil';
 
 import { contextMenuIsOpenState } from '@/ui/context-menu/states/contextMenuIsOpenState';
 import { contextMenuPositionState } from '@/ui/context-menu/states/contextMenuPositionState';
+import { FieldContext } from '@/ui/field/contexts/FieldContext';
+import { isFieldRelation } from '@/ui/field/types/guards/isFieldRelation';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
 import { ColumnContext } from '../contexts/ColumnContext';
 import { ColumnIndexContext } from '../contexts/ColumnIndexContext';
-import { GenericEditableCell } from '../editable-cell/components/GenericEditableCell';
+import { EntityUpdateMutationContext } from '../contexts/EntityUpdateMutationHookContext';
+import { RowIdContext } from '../contexts/RowIdContext';
+import { TableCell } from '../editable-cell/components/TableCell';
 import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
+import { TableHotkeyScope } from '../types/TableHotkeyScope';
 
 export const EntityTableCell = ({ cellIndex }: { cellIndex: number }) => {
   const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
   const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
+  const currentRowId = useContext(RowIdContext);
 
   const { setCurrentRowSelected } = useCurrentRowSelected();
 
@@ -28,15 +35,31 @@ export const EntityTableCell = ({ cellIndex }: { cellIndex: number }) => {
 
   const columnDefinition = useContext(ColumnContext);
 
-  if (!columnDefinition) {
+  const updateEntityMutation = useContext(EntityUpdateMutationContext);
+
+  if (!columnDefinition || !currentRowId) {
     return null;
   }
 
+  const customHotkeyScope = isFieldRelation(columnDefinition)
+    ? RelationPickerHotkeyScope.RelationPicker
+    : TableHotkeyScope.CellEditMode;
+
   return (
     <RecoilScope>
       <ColumnIndexContext.Provider value={cellIndex}>
         <td onContextMenu={(event) => handleContextMenu(event)}>
-          <GenericEditableCell columnDefinition={columnDefinition} />
+          <FieldContext.Provider
+            value={{
+              recoilScopeId: currentRowId + columnDefinition.name,
+              entityId: currentRowId,
+              fieldDefinition: columnDefinition,
+              useUpdateEntityMutation: () => [updateEntityMutation, {}],
+              hotkeyScope: customHotkeyScope,
+            }}
+          >
+            <TableCell customHotkeyScope={{ scope: customHotkeyScope }} />
+          </FieldContext.Provider>
         </td>
       </ColumnIndexContext.Provider>
     </RecoilScope>

front/src/modules/ui/table/components/EntityTableColumnMenu.tsx

@@ -3,16 +3,16 @@ import styled from '@emotion/styled';
 
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
-import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
+import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
 import { IconPlus } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
+import { ColumnDefinition } from '@/ui/table/types/ColumnDefinition';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 
 import { useTableColumns } from '../hooks/useTableColumns';
 import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
 import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector';
-import { ColumnDefinition } from '../types/ColumnDefinition';
 
 const StyledColumnMenu = styled(StyledDropdownMenu)`
   font-weight: ${({ theme }) => theme.font.weight.regular};
@@ -43,7 +43,7 @@ export const EntityTableColumnMenu = ({
   const { handleColumnVisibilityChange } = useTableColumns();
 
   const handleAddColumn = useCallback(
-    (column: ColumnDefinition<ViewFieldMetadata>) => {
+    (column: ColumnDefinition<FieldMetadata>) => {
       onAddColumn?.();
       handleColumnVisibilityChange(column);
     },

front/src/modules/ui/table/components/EntityTableHeaderOptions.tsx

@@ -14,10 +14,10 @@ const StyledDropdownContainer = styled.div`
 `;
 
 export const EntityTableHeaderOptions = ({
-  column,
   isFirstColumn,
   isLastColumn,
   primaryColumnKey,
+  column,
 }: EntityTableHeaderOptionsProps) => {
   return (
     <StyledDropdownContainer>

front/src/modules/ui/table/components/TableColumnDropdownMenu.tsx

@@ -1,7 +1,7 @@
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
-import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
+import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
 import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 
@@ -10,7 +10,7 @@ import { useTableColumns } from '../hooks/useTableColumns';
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
 export type EntityTableHeaderOptionsProps = {
-  column: ColumnDefinition<ViewFieldMetadata>;
+  column: ColumnDefinition<FieldMetadata>;
   isFirstColumn: boolean;
   isLastColumn: boolean;
   primaryColumnKey: string;