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/views/hooks/useBoardViewFields.ts

@@ -5,10 +5,8 @@ import { availableBoardCardFieldsScopedState } from '@/ui/board/states/available
 import { boardCardFieldsScopedState } from '@/ui/board/states/boardCardFieldsScopedState';
 import { savedBoardCardFieldsFamilyState } from '@/ui/board/states/savedBoardCardFieldsFamilyState';
 import { savedBoardCardFieldsByKeyFamilySelector } from '@/ui/board/states/selectors/savedBoardCardFieldsByKeyFamilySelector';
-import type {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import { BoardFieldDefinition } from '@/ui/board/types/BoardFieldDefinition';
+import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
@@ -23,23 +21,23 @@ import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 const toViewFieldInput = (
   objectId: 'company' | 'person',
-  fieldDefinition: ViewFieldDefinition<ViewFieldMetadata>,
+  columDefinition: BoardFieldDefinition<FieldMetadata>,
 ) => ({
-  key: fieldDefinition.key,
-  name: fieldDefinition.name,
-  index: fieldDefinition.index,
-  isVisible: fieldDefinition.isVisible ?? true,
+  key: columDefinition.key,
+  name: columDefinition.name,
+  index: columDefinition.index,
+  isVisible: columDefinition.isVisible ?? true,
   objectId,
 });
 
 export const useBoardViewFields = ({
   objectId,
-  fieldDefinitions,
+  viewFieldDefinition,
   skipFetch,
   RecoilScopeContext,
 }: {
   objectId: 'company' | 'person';
-  fieldDefinitions: ViewFieldDefinition<ViewFieldMetadata>[];
+  viewFieldDefinition: BoardFieldDefinition<FieldMetadata>[];
   skipFetch?: boolean;
   RecoilScopeContext: RecoilScopeContext;
 }) => {
@@ -67,14 +65,14 @@ export const useBoardViewFields = ({
   const [updateViewFieldMutation] = useUpdateViewFieldMutation();
 
   const createViewFields = (
-    fields: ViewFieldDefinition<ViewFieldMetadata>[],
+    viewFieldDefinitions: BoardFieldDefinition<FieldMetadata>[],
     viewId = currentViewId,
   ) => {
-    if (!viewId || !fields.length) return;
+    if (!viewId || !viewFieldDefinitions.length) return;
 
     return createViewFieldsMutation({
       variables: {
-        data: fields.map((field) => ({
+        data: viewFieldDefinitions.map((field) => ({
           ...toViewFieldInput(objectId, field),
           viewId,
         })),
@@ -83,12 +81,12 @@ export const useBoardViewFields = ({
   };
 
   const updateViewFields = (
-    fields: ViewFieldDefinition<ViewFieldMetadata>[],
+    viewFieldDefinitions: BoardFieldDefinition<FieldMetadata>[],
   ) => {
-    if (!currentViewId || !fields.length) return;
+    if (!currentViewId || !viewFieldDefinitions.length) return;
 
     return Promise.all(
-      fields.map((field) =>
+      viewFieldDefinitions.map((field) =>
         updateViewFieldMutation({
           variables: {
             data: {
@@ -114,13 +112,13 @@ export const useBoardViewFields = ({
     onCompleted: async (data) => {
       if (!data.viewFields.length) {
         // Populate if empty
-        await createViewFields(fieldDefinitions);
+        await createViewFields(viewFieldDefinition);
         return refetch();
       }
 
       const nextFields = data.viewFields
-        .map<ViewFieldDefinition<ViewFieldMetadata> | null>((viewField) => {
-          const fieldDefinition = fieldDefinitions.find(
+        .map<BoardFieldDefinition<FieldMetadata> | null>((viewField) => {
+          const fieldDefinition = viewFieldDefinition.find(
             ({ key }) => viewField.key === key,
           );
 
@@ -134,7 +132,7 @@ export const useBoardViewFields = ({
               }
             : null;
         })
-        .filter<ViewFieldDefinition<ViewFieldMetadata>>(assertNotNull);
+        .filter<BoardFieldDefinition<FieldMetadata>>(assertNotNull);
 
       if (!isDeeplyEqual(boardCardFields, nextFields)) {
         setSavedBoardCardFields(nextFields);
@@ -142,7 +140,7 @@ export const useBoardViewFields = ({
       }
 
       if (!availableBoardCardFields.length) {
-        setAvailableBoardCardFields(fieldDefinitions);
+        setAvailableBoardCardFields(viewFieldDefinition);
       }
     },
   });

front/src/modules/views/hooks/useBoardViews.ts

@@ -1,10 +1,8 @@
 import { RecoilScopeContext } from '@/types/RecoilScopeContext';
 import { useBoardColumns } from '@/ui/board/hooks/useBoardColumns';
 import { boardCardFieldsScopedState } from '@/ui/board/states/boardCardFieldsScopedState';
-import {
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '@/ui/editable-field/types/ViewField';
+import { BoardFieldDefinition } from '@/ui/board/types/BoardFieldDefinition';
+import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
 import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
@@ -20,7 +18,7 @@ export const useBoardViews = ({
   objectId,
   RecoilScopeContext,
 }: {
-  fieldDefinitions: ViewFieldDefinition<ViewFieldMetadata>[];
+  fieldDefinitions: BoardFieldDefinition<FieldMetadata>[];
   objectId: 'company';
   RecoilScopeContext: RecoilScopeContext;
 }) => {
@@ -46,7 +44,7 @@ export const useBoardViews = ({
 
   const { createViewFields, persistCardFields } = useBoardViewFields({
     objectId,
-    fieldDefinitions,
+    viewFieldDefinition: fieldDefinitions,
     skipFetch: isFetchingViews,
     RecoilScopeContext,
   });

front/src/modules/views/hooks/useTableViewFields.ts

@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
-import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
+import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
 import { availableTableColumnsScopedState } from '@/ui/table/states/availableTableColumnsScopedState';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { savedTableColumnsFamilyState } from '@/ui/table/states/savedTableColumnsFamilyState';
@@ -25,7 +25,7 @@ import { GET_VIEW_FIELDS } from '../graphql/queries/getViewFields';
 
 const toViewFieldInput = (
   objectId: 'company' | 'person',
-  fieldDefinition: ColumnDefinition<ViewFieldMetadata>,
+  fieldDefinition: ColumnDefinition<FieldMetadata>,
 ) => ({
   key: fieldDefinition.key,
   name: fieldDefinition.name,
@@ -41,7 +41,7 @@ export const useTableViewFields = ({
   skipFetch,
 }: {
   objectId: 'company' | 'person';
-  columnDefinitions: ColumnDefinition<ViewFieldMetadata>[];
+  columnDefinitions: ColumnDefinition<FieldMetadata>[];
   skipFetch?: boolean;
 }) => {
   const currentViewId = useRecoilScopedValue(
@@ -69,10 +69,7 @@ export const useTableViewFields = ({
   const [updateViewFieldMutation] = useUpdateViewFieldMutation();
 
   const createViewFields = useCallback(
-    (
-      columns: ColumnDefinition<ViewFieldMetadata>[],
-      viewId = currentViewId,
-    ) => {
+    (columns: ColumnDefinition<FieldMetadata>[], viewId = currentViewId) => {
       if (!viewId || !columns.length) return;
 
       return createViewFieldsMutation({
@@ -89,7 +86,7 @@ export const useTableViewFields = ({
   );
 
   const updateViewFields = useCallback(
-    (columns: ColumnDefinition<ViewFieldMetadata>[]) => {
+    (columns: ColumnDefinition<FieldMetadata>[]) => {
       if (!currentViewId || !columns.length) return;
 
       return Promise.all(
@@ -127,7 +124,7 @@ export const useTableViewFields = ({
       }
 
       const nextColumns = data.viewFields
-        .map<ColumnDefinition<ViewFieldMetadata> | null>((viewField) => {
+        .map<ColumnDefinition<FieldMetadata> | null>((viewField) => {
           const columnDefinition = columnDefinitions.find(
             ({ key }) => viewField.key === key,
           );
@@ -143,7 +140,7 @@ export const useTableViewFields = ({
               }
             : null;
         })
-        .filter<ColumnDefinition<ViewFieldMetadata>>(assertNotNull);
+        .filter<ColumnDefinition<FieldMetadata>>(assertNotNull);
 
       setSavedTableColumns(nextColumns);
 
@@ -162,7 +159,7 @@ export const useTableViewFields = ({
   });
 
   const persistColumns = useCallback(
-    async (nextColumns: ColumnDefinition<ViewFieldMetadata>[]) => {
+    async (nextColumns: ColumnDefinition<FieldMetadata>[]) => {
       if (!currentViewId) return;
 
       const viewFieldsToCreate = nextColumns.filter(

front/src/modules/views/hooks/useTableViews.ts

@@ -1,4 +1,4 @@
-import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
+import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { tableColumnsScopedState } from '@/ui/table/states/tableColumnsScopedState';
 import { ColumnDefinition } from '@/ui/table/types/ColumnDefinition';
@@ -17,7 +17,7 @@ export const useTableViews = ({
   columnDefinitions,
 }: {
   objectId: 'company' | 'person';
-  columnDefinitions: ColumnDefinition<ViewFieldMetadata>[];
+  columnDefinitions: ColumnDefinition<FieldMetadata>[];
 }) => {
   const tableColumns = useRecoilScopedValue(
     tableColumnsScopedState,