Add FieldDefinition (#1162)

* add fieldDefinition

* update naming

* use a unique contextProvider for editable fields

* remove EntityUpdateMutationHookContext.Provider usage in CompanyBoardCard

* add fieldDefinitionState

* remove unnecessary refetchQueries to avoid re-render

* add FieldMetadata

* add type guards and update useUpdateGenericEntityField

* restore refetchQueries

front/src/modules/activities/hooks/useCompleteTask.ts

@@ -16,8 +16,6 @@ export function useCompleteTask(task: Task) {
     fragment: ACTIVITY_UPDATE_FRAGMENT,
   });
 
-  console.log('cachedTask', cachedTask);
-
   const completeTask = useCallback(
     (value: boolean) => {
       const completedAt = value ? new Date().toISOString() : null;

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -3,16 +3,15 @@ import styled from '@emotion/styled';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
-import { fieldsDefinitionsState } from '@/ui/board/states/fieldsDefinitionsState';
 import { selectedBoardCardIdsState } from '@/ui/board/states/selectedBoardCardIdsState';
+import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState';
 import { EntityChipVariant } from '@/ui/chip/components/EntityChip';
 import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
-import { EditableFieldEntityIdContext } from '@/ui/editable-field/states/EditableFieldEntityIdContext';
+import { EditableFieldContext } from '@/ui/editable-field/states/EditableFieldContext';
 import {
   Checkbox,
   CheckboxVariant,
 } from '@/ui/input/checkbox/components/Checkbox';
-import { EntityUpdateMutationHookContext } from '@/ui/table/states/EntityUpdateMutationHookContext';
 import { useUpdateOnePipelineProgressMutation } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 
@@ -111,7 +110,7 @@ export function CompanyBoardCard() {
   const [selectedBoardCards, setSelectedBoardCards] = useRecoilState(
     selectedBoardCardIdsState,
   );
-  const fieldsDefinitions = useRecoilValue(fieldsDefinitionsState);
+  const viewFieldsDefinitions = useRecoilValue(viewFieldsDefinitionsState);
 
   const selected = selectedBoardCards.includes(boardCardId ?? '');
 
@@ -125,7 +124,8 @@ export function CompanyBoardCard() {
     }
   }
 
-  if (!company || !pipelineProgress) {
+  // boardCardId check can be moved to a wrapper to avoid unnecessary logic above
+  if (!company || !pipelineProgress || !boardCardId) {
     return null;
   }
 
@@ -146,9 +146,6 @@ export function CompanyBoardCard() {
   }
 
   return (
-    <EntityUpdateMutationHookContext.Provider
-      value={useUpdateOnePipelineProgressMutation}
-    >
     <StyledBoardCardWrapper>
       <StyledBoardCard
         selected={selected}
@@ -170,18 +167,29 @@ export function CompanyBoardCard() {
           </StyledCheckboxContainer>
         </StyledBoardCardHeader>
         <StyledBoardCardBody>
-            {fieldsDefinitions.map((viewField) => {
+          {viewFieldsDefinitions.map((viewField) => {
             return (
               <PreventSelectOnClickContainer key={viewField.id}>
-                  <EditableFieldEntityIdContext.Provider value={boardCardId}>
+                <EditableFieldContext.Provider
-                    <GenericEditableField viewField={viewField} />
+                  value={{
-                  </EditableFieldEntityIdContext.Provider>
+                    entityId: boardCardId,
+                    mutation: useUpdateOnePipelineProgressMutation,
+                    fieldDefinition: {
+                      id: viewField.id,
+                      label: viewField.columnLabel,
+                      icon: viewField.columnIcon,
+                      type: viewField.metadata.type,
+                      metadata: viewField.metadata,
+                    },
+                  }}
+                >
+                  <GenericEditableField />
+                </EditableFieldContext.Provider>
               </PreventSelectOnClickContainer>
             );
           })}
         </StyledBoardCardBody>
       </StyledBoardCard>
     </StyledBoardCardWrapper>
-    </EntityUpdateMutationHookContext.Provider>
   );
 }

front/src/modules/companies/components/HooksCompanyBoard.tsx

@@ -2,8 +2,8 @@ import { useEffect, useMemo } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import { pipelineViewFields } from '@/pipeline/constants/pipelineViewFields';
-import { fieldsDefinitionsState } from '@/ui/board/states/fieldsDefinitionsState';
 import { isBoardLoadedState } from '@/ui/board/states/isBoardLoadedState';
+import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
@@ -27,7 +27,9 @@ export function HooksCompanyBoard({
 }: {
   orderBy: PipelineProgresses_Order_By[];
 }) {
-  const setFieldsDefinitionsState = useSetRecoilState(fieldsDefinitionsState);
+  const setFieldsDefinitionsState = useSetRecoilState(
+    viewFieldsDefinitionsState,
+  );
 
   useEffect(() => {
     setFieldsDefinitionsState(pipelineViewFields);

front/src/modules/ui/board/components/EntityBoard.tsx

@@ -7,6 +7,7 @@ import { IconList } from '@tabler/icons-react';
 import { useRecoilState } from 'recoil';
 
 import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
+import { GET_PIPELINE_PROGRESS } from '@/pipeline/queries';
 import { BoardHeader } from '@/ui/board/components/BoardHeader';
 import { StyledBoard } from '@/ui/board/components/StyledBoard';
 import { useUpdateBoardCardIds } from '@/ui/board/hooks/useUpdateBoardCardIds';
@@ -21,7 +22,6 @@ import {
   useUpdateOnePipelineProgressStageMutation,
 } from '~/generated/graphql';
 
-import { GET_PIPELINE_PROGRESS } from '../../../pipeline/queries';
 import { BoardColumnContext } from '../states/BoardColumnContext';
 import { boardColumnsState } from '../states/boardColumnsState';
 import { selectedBoardCardIdsState } from '../states/selectedBoardCardIdsState';

front/src/modules/ui/board/states/FieldDefinitionContext.ts

@@ -1,9 +1,14 @@
 import { createContext } from 'react';
 
-import {
+import { FieldDefinition } from '@/ui/editable-field/types/FieldDefinition';
-  ViewFieldDefinition,
+import { FieldMetadata } from '@/ui/editable-field/types/FieldMetadata';
-  ViewFieldMetadata,
-} from '../../editable-field/types/ViewField';
 
-export const FieldDefinitionContext =
+export const FieldDefinitionContext = createContext<
-  createContext<ViewFieldDefinition<ViewFieldMetadata> | null>(null);
+  FieldDefinition<FieldMetadata>
+>({
+  id: '',
+  label: '',
+  icon: undefined,
+  type: '',
+  metadata: {} as FieldMetadata,
+});

front/src/modules/ui/board/states/viewFieldsDefinitionsState.ts

@@ -5,9 +5,9 @@ import type {
   ViewFieldMetadata,
 } from '../../editable-field/types/ViewField';
 
-export const fieldsDefinitionsState = atom<
+export const viewFieldsDefinitionsState = atom<
   ViewFieldDefinition<ViewFieldMetadata>[]
 >({
-  key: 'fieldsDefinitionState',
+  key: 'viewFieldsDefinitionState',
   default: [],
 });

front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx

@@ -1,32 +1,31 @@
 import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 
-import {
-  ViewFieldDateMetadata,
-  ViewFieldDefinition,
-} from '@/ui/editable-field/types/ViewField';
 import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { parseDate } from '~/utils/date-utils';
 
-import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
+import { EditableFieldContext } from '../states/EditableFieldContext';
 import { FieldContext } from '../states/FieldContext';
 import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldDateMetadata } from '../types/FieldMetadata';
 
 import { EditableField } from './EditableField';
 import { GenericEditableDateFieldEditMode } from './GenericEditableDateFieldEditMode';
 
-type OwnProps = {
+export function GenericEditableDateField() {
-  viewField: ViewFieldDefinition<ViewFieldDateMetadata>;
+  const currentEditableField = useContext(EditableFieldContext);
-};
+  const currentEditableFieldEntityId = currentEditableField.entityId;
-
+  const currentEditableFieldDefinition =
-export function GenericEditableDateField({ viewField }: OwnProps) {
+    currentEditableField.fieldDefinition as FieldDefinition<FieldDateMetadata>;
-  const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
 
   const fieldValue = useRecoilValue<string>(
     genericEntityFieldFamilySelector({
       entityId: currentEditableFieldEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
     }),
   );
 
@@ -37,10 +36,8 @@ export function GenericEditableDateField({ viewField }: OwnProps) {
   return (
     <RecoilScope SpecificContext={FieldContext}>
       <EditableField
-        iconLabel={viewField.columnIcon}
+        iconLabel={currentEditableFieldDefinition.icon}
-        editModeContent={
+        editModeContent={<GenericEditableDateFieldEditMode />}
-          <GenericEditableDateFieldEditMode viewField={viewField} />
-        }
         displayModeContent={<DateInputDisplay value={internalDateValue} />}
         isDisplayModeContentEmpty={!fieldValue}
       />

front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx

@@ -1,28 +1,26 @@
 import { useContext } from 'react';
 import { useRecoilState } from 'recoil';
 
-import {
-  ViewFieldDateMetadata,
-  ViewFieldDefinition,
-} from '@/ui/editable-field/types/ViewField';
-
 import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
-import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
+import { EditableFieldContext } from '../states/EditableFieldContext';
 import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldDateMetadata } from '../types/FieldMetadata';
 import { EditableFieldEditModeDate } from '../variants/components/EditableFieldEditModeDate';
 
-type OwnProps = {
+export function GenericEditableDateFieldEditMode() {
-  viewField: ViewFieldDefinition<ViewFieldDateMetadata>;
+  const currentEditableField = useContext(EditableFieldContext);
-};
+  const currentEditableFieldEntityId = currentEditableField.entityId;
-
+  const currentEditableFieldDefinition =
-export function GenericEditableDateFieldEditMode({ viewField }: OwnProps) {
+    currentEditableField.fieldDefinition as FieldDefinition<FieldDateMetadata>;
-  const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
 
   // TODO: we could use a hook that would return the field value with the right type
   const [fieldValue, setFieldValue] = useRecoilState<string>(
     genericEntityFieldFamilySelector({
       entityId: currentEditableFieldEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
     }),
   );
 
@@ -34,7 +32,11 @@ export function GenericEditableDateFieldEditMode({ viewField }: OwnProps) {
     setFieldValue(newDateISO);
 
     if (currentEditableFieldEntityId && updateField) {
-      updateField(currentEditableFieldEntityId, viewField, newDateISO);
+      updateField(
+        currentEditableFieldEntityId,
+        currentEditableFieldDefinition,
+        newDateISO,
+      );
     }
   }
 

front/src/modules/ui/editable-field/components/GenericEditableField.tsx

@@ -1,34 +1,31 @@
-import {
+import { useContext } from 'react';
-  ViewFieldDefinition,
-  ViewFieldMetadata,
-} from '@/ui/editable-field/types/ViewField';
 
-import { isViewFieldDate } from '../types/guards/isViewFieldDate';
+import { EditableFieldContext } from '../states/EditableFieldContext';
-import { isViewFieldNumber } from '../types/guards/isViewFieldNumber';
+import { isFieldDate } from '../types/guards/isFieldDate';
-import { isViewFieldProbability } from '../types/guards/isViewFieldProbability';
+import { isFieldNumber } from '../types/guards/isFieldNumber';
-import { isViewFieldRelation } from '../types/guards/isViewFieldRelation';
+import { isFieldProbability } from '../types/guards/isFieldProbability';
+import { isFieldRelation } from '../types/guards/isFieldRelation';
 
 import { GenericEditableDateField } from './GenericEditableDateField';
 import { GenericEditableNumberField } from './GenericEditableNumberField';
 import { GenericEditableRelationField } from './GenericEditableRelationField';
 import { ProbabilityEditableField } from './ProbabilityEditableField';
 
-type OwnProps = {
+export function GenericEditableField() {
-  viewField: ViewFieldDefinition<ViewFieldMetadata>;
+  const currentEditableField = useContext(EditableFieldContext);
-};
+  const fieldDefinition = currentEditableField.fieldDefinition;
 
-export function GenericEditableField({ viewField: fieldDefinition }: OwnProps) {
+  if (isFieldRelation(fieldDefinition)) {
-  if (isViewFieldDate(fieldDefinition)) {
+    return <GenericEditableRelationField />;
-    return <GenericEditableDateField viewField={fieldDefinition} />;
+  } else if (isFieldDate(fieldDefinition)) {
-  } else if (isViewFieldNumber(fieldDefinition)) {
+    return <GenericEditableDateField />;
-    return <GenericEditableNumberField viewField={fieldDefinition} />;
+  } else if (isFieldNumber(fieldDefinition)) {
-  } else if (isViewFieldRelation(fieldDefinition)) {
+    return <GenericEditableNumberField />;
-    return <GenericEditableRelationField viewField={fieldDefinition} />;
+  } else if (isFieldProbability(fieldDefinition)) {
-  } else if (isViewFieldProbability(fieldDefinition)) {
+    return <ProbabilityEditableField />;
-    return <ProbabilityEditableField viewField={fieldDefinition} />;
   } else {
     console.warn(
-      `Unknown field metadata type: ${fieldDefinition.metadata.type} in GenericEditableField`,
+      `Unknown field metadata type: ${fieldDefinition.metadata.type} in GenericEditableCell`,
     );
     return <></>;
   }

front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx

@@ -1,40 +1,37 @@
 import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldNumberMetadata,
-} from '@/ui/editable-field/types/ViewField';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
-import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
+import { EditableFieldContext } from '../states/EditableFieldContext';
 import { FieldContext } from '../states/FieldContext';
 import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldNumberMetadata } from '../types/FieldMetadata';
 
 import { EditableField } from './EditableField';
 import { GenericEditableNumberFieldEditMode } from './GenericEditableNumberFieldEditMode';
 
-type OwnProps = {
+export function GenericEditableNumberField() {
-  viewField: ViewFieldDefinition<ViewFieldNumberMetadata>;
+  const currentEditableField = useContext(EditableFieldContext);
-};
+  const currentEditableFieldEntityId = currentEditableField.entityId;
-
+  const currentEditableFieldDefinition =
-export function GenericEditableNumberField({ viewField }: OwnProps) {
+    currentEditableField.fieldDefinition as FieldDefinition<FieldNumberMetadata>;
-  const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
 
   const fieldValue = useRecoilValue<string>(
     genericEntityFieldFamilySelector({
       entityId: currentEditableFieldEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
     }),
   );
 
   return (
     <RecoilScope SpecificContext={FieldContext}>
       <EditableField
-        iconLabel={viewField.columnIcon}
+        iconLabel={currentEditableFieldDefinition.icon}
-        editModeContent={
+        editModeContent={<GenericEditableNumberFieldEditMode />}
-          <GenericEditableNumberFieldEditMode viewField={viewField} />
-        }
         displayModeContent={fieldValue}
         isDisplayModeContentEmpty={!fieldValue}
       />

front/src/modules/ui/editable-field/components/GenericEditableNumberFieldEditMode.tsx

@@ -1,10 +1,6 @@
 import { useContext, useRef, useState } from 'react';
 import { useRecoilState } from 'recoil';
 
-import {
-  ViewFieldDefinition,
-  ViewFieldNumberMetadata,
-} from '@/ui/editable-field/types/ViewField';
 import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
 import {
   canBeCastAsIntegerOrNull,
@@ -13,21 +9,24 @@ import {
 
 import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers';
 import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
-import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
+import { EditableFieldContext } from '../states/EditableFieldContext';
 import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldNumberMetadata } from '../types/FieldMetadata';
 
-type OwnProps = {
+export function GenericEditableNumberFieldEditMode() {
-  viewField: ViewFieldDefinition<ViewFieldNumberMetadata>;
+  const currentEditableField = useContext(EditableFieldContext);
-};
+  const currentEditableFieldEntityId = currentEditableField.entityId;
-
+  const currentEditableFieldDefinition =
-export function GenericEditableNumberFieldEditMode({ viewField }: OwnProps) {
+    currentEditableField.fieldDefinition as FieldDefinition<FieldNumberMetadata>;
-  const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
 
   // TODO: we could use a hook that would return the field value with the right type
   const [fieldValue, setFieldValue] = useRecoilState<number | null>(
     genericEntityFieldFamilySelector({
       entityId: currentEditableFieldEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
     }),
   );
   const [internalValue, setInternalValue] = useState(
@@ -36,6 +35,10 @@ export function GenericEditableNumberFieldEditMode({ viewField }: OwnProps) {
 
   const updateField = useUpdateGenericEntityField();
 
+  const wrapperRef = useRef(null);
+
+  useRegisterCloseFieldHandlers(wrapperRef, handleSubmit, onCancel);
+
   function handleSubmit() {
     if (!canBeCastAsIntegerOrNull(internalValue)) {
       return;
@@ -47,7 +50,7 @@ export function GenericEditableNumberFieldEditMode({ viewField }: OwnProps) {
     if (currentEditableFieldEntityId && updateField) {
       updateField(
         currentEditableFieldEntityId,
-        viewField,
+        currentEditableFieldDefinition,
         castAsIntegerOrNull(internalValue),
       );
     }
@@ -60,9 +63,6 @@ export function GenericEditableNumberFieldEditMode({ viewField }: OwnProps) {
   function handleChange(newValue: string) {
     setInternalValue(newValue);
   }
-  const wrapperRef = useRef(null);
-
-  useRegisterCloseFieldHandlers(wrapperRef, handleSubmit, onCancel);
 
   return (
     <div ref={wrapperRef}>

front/src/modules/ui/editable-field/components/GenericEditableRelationField.tsx

@@ -2,30 +2,25 @@ import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { PersonChip } from '@/people/components/PersonChip';
-import {
+import { ViewFieldRelationMetadata } from '@/ui/editable-field/types/ViewField';
-  ViewFieldDefinition,
-  ViewFieldRelationMetadata,
-} from '@/ui/editable-field/types/ViewField';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
-import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
+import { EditableFieldContext } from '../states/EditableFieldContext';
 import { FieldContext } from '../states/FieldContext';
 import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldRelationMetadata } from '../types/FieldMetadata';
 
 import { EditableField } from './EditableField';
 import { GenericEditableRelationFieldEditMode } from './GenericEditableRelationFieldEditMode';
 
-type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldRelationMetadata>;
-};
-
 function RelationChip({
   fieldDefinition,
   fieldValue,
 }: {
-  fieldDefinition: ViewFieldDefinition<ViewFieldRelationMetadata>;
+  fieldDefinition: FieldDefinition<FieldRelationMetadata>;
   fieldValue: any | null;
 }) {
   switch (fieldDefinition.metadata.relationType) {
@@ -46,13 +41,18 @@ function RelationChip({
   }
 }
 
-export function GenericEditableRelationField({ viewField }: OwnProps) {
+export function GenericEditableRelationField() {
-  const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
+  const currentEditableField = useContext(EditableFieldContext);
+  const currentEditableFieldEntityId = currentEditableField.entityId;
+  const currentEditableFieldDefinition =
+    currentEditableField.fieldDefinition as FieldDefinition<ViewFieldRelationMetadata>;
 
   const fieldValue = useRecoilValue<any | null>(
     genericEntityFieldFamilySelector({
       entityId: currentEditableFieldEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
     }),
   );
 
@@ -64,12 +64,13 @@ export function GenericEditableRelationField({ viewField }: OwnProps) {
           customEditHotkeyScope={{
             scope: RelationPickerHotkeyScope.RelationPicker,
           }}
-          iconLabel={viewField.columnIcon}
+          iconLabel={currentEditableFieldDefinition.icon}
-          editModeContent={
+          editModeContent={<GenericEditableRelationFieldEditMode />}
-            <GenericEditableRelationFieldEditMode viewField={viewField} />
-          }
           displayModeContent={
-            <RelationChip fieldDefinition={viewField} fieldValue={fieldValue} />
+            <RelationChip
+              fieldDefinition={currentEditableFieldDefinition}
+              fieldValue={fieldValue}
+            />
           }
           isDisplayModeContentEmpty={!fieldValue}
           isDisplayModeFixHeight

front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx

@@ -4,7 +4,6 @@ import { useRecoilState } from 'recoil';
 
 import { PeoplePicker } from '@/people/components/PeoplePicker';
 import {
-  ViewFieldDefinition,
   ViewFieldRelationMetadata,
   ViewFieldRelationValue,
 } from '@/ui/editable-field/types/ViewField';
@@ -13,8 +12,10 @@ import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 
 import { useEditableField } from '../hooks/useEditableField';
 import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
-import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
+import { EditableFieldContext } from '../states/EditableFieldContext';
 import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
+import { FieldDefinition } from '../types/FieldDefinition';
+import { FieldRelationMetadata } from '../types/FieldMetadata';
 
 const RelationPickerContainer = styled.div`
   left: 0px;
@@ -22,17 +23,13 @@ const RelationPickerContainer = styled.div`
   top: -8px;
 `;
 
-type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldRelationMetadata>;
-};
-
 function RelationPicker({
   fieldDefinition,
   fieldValue,
   handleEntitySubmit,
   handleCancel,
 }: {
-  fieldDefinition: ViewFieldDefinition<ViewFieldRelationMetadata>;
+  fieldDefinition: FieldDefinition<FieldRelationMetadata>;
   fieldValue: ViewFieldRelationValue;
   handleEntitySubmit: (newRelationId: EntityForSelect | null) => void;
   handleCancel: () => void;
@@ -55,14 +52,19 @@ function RelationPicker({
   }
 }
 
-export function GenericEditableRelationFieldEditMode({ viewField }: OwnProps) {
+export function GenericEditableRelationFieldEditMode() {
-  const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
+  const currentEditableField = useContext(EditableFieldContext);
+  const currentEditableFieldEntityId = currentEditableField.entityId;
+  const currentEditableFieldDefinition =
+    currentEditableField.fieldDefinition as FieldDefinition<ViewFieldRelationMetadata>;
 
   // TODO: we could use a hook that would return the field value with the right type
   const [fieldValue, setFieldValue] = useRecoilState<any | null>(
     genericEntityFieldFamilySelector({
       entityId: currentEditableFieldEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
     }),
   );
 
@@ -79,7 +81,11 @@ export function GenericEditableRelationFieldEditMode({ viewField }: OwnProps) {
     });
 
     if (currentEditableFieldEntityId && updateField) {
-      updateField(currentEditableFieldEntityId, viewField, newRelation);
+      updateField(
+        currentEditableFieldEntityId,
+        currentEditableFieldDefinition,
+        newRelation,
+      );
     }
 
     closeEditableField();
@@ -92,7 +98,7 @@ export function GenericEditableRelationFieldEditMode({ viewField }: OwnProps) {
   return (
     <RelationPickerContainer>
       <RelationPicker
-        fieldDefinition={viewField}
+        fieldDefinition={currentEditableFieldDefinition}
         fieldValue={fieldValue}
         handleEntitySubmit={handleSubmit}
         handleCancel={handleCancel}

front/src/modules/ui/editable-field/components/ProbabilityEditableField.tsx

@@ -1,25 +1,22 @@
+import { useContext } from 'react';
+
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import {
-  ViewFieldDefinition,
-  ViewFieldProbabilityMetadata,
-} from '@/ui/editable-field/types/ViewField';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
+import { EditableFieldContext } from '../states/EditableFieldContext';
+
 import { ProbabilityEditableFieldEditMode } from './ProbabilityEditableFieldEditMode';
 
-type OwnProps = {
+export function ProbabilityEditableField() {
-  viewField: ViewFieldDefinition<ViewFieldProbabilityMetadata>;
+  const currentEditableField = useContext(EditableFieldContext);
-};
+  const currentEditableFieldDefinition = currentEditableField.fieldDefinition;
 
-export function ProbabilityEditableField({ viewField }: OwnProps) {
   return (
     <RecoilScope SpecificContext={FieldContext}>
       <EditableField
-        iconLabel={viewField.columnIcon}
+        iconLabel={currentEditableFieldDefinition.icon}
-        displayModeContent={
+        displayModeContent={<ProbabilityEditableFieldEditMode />}
-          <ProbabilityEditableFieldEditMode viewField={viewField} />
-        }
         displayModeContentOnly
         disableHoverEffect
       />

front/src/modules/ui/editable-field/components/ProbabilityEditableFieldEditMode.tsx

@@ -5,12 +5,10 @@ import { useRecoilState } from 'recoil';
 import { useEditableField } from '@/ui/editable-field/hooks/useEditableField';
 
 import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
-import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
+import { EditableFieldContext } from '../states/EditableFieldContext';
 import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
-import {
+import { FieldDefinition } from '../types/FieldDefinition';
-  ViewFieldDefinition,
+import { FieldProbabilityMetadata } from '../types/FieldMetadata';
-  ViewFieldProbabilityMetadata,
-} from '../types/ViewField';
 
 const StyledContainer = styled.div`
   align-items: center;
@@ -60,10 +58,6 @@ const StyledLabel = styled.div`
   width: ${({ theme }) => theme.spacing(12)};
 `;
 
-type OwnProps = {
-  viewField: ViewFieldDefinition<ViewFieldProbabilityMetadata>;
-};
-
 const PROBABILITY_VALUES = [
   { label: '0%', value: 0 },
   { label: '25%', value: 25 },
@@ -72,28 +66,38 @@ const PROBABILITY_VALUES = [
   { label: '100%', value: 100 },
 ];
 
-export function ProbabilityEditableFieldEditMode({ viewField }: OwnProps) {
+export function ProbabilityEditableFieldEditMode() {
   const [nextProbabilityIndex, setNextProbabilityIndex] = useState<
     number | null
   >(null);
-  const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
+  const currentEditableField = useContext(EditableFieldContext);
+  const currentEditableFieldEntityId = currentEditableField.entityId;
+  const currentEditableFieldDefinition =
+    currentEditableField.fieldDefinition as FieldDefinition<FieldProbabilityMetadata>;
 
   const [fieldValue, setFieldValue] = useRecoilState<number>(
     genericEntityFieldFamilySelector({
       entityId: currentEditableFieldEntityId ?? '',
-      fieldName: viewField.metadata.fieldName,
+      fieldName: currentEditableFieldDefinition
+        ? currentEditableFieldDefinition.metadata.fieldName
+        : '',
     }),
   );
 
-  const probabilityIndex = Math.ceil(fieldValue / 25);
   const { closeEditableField } = useEditableField();
 
   const updateField = useUpdateGenericEntityField();
 
+  const probabilityIndex = Math.ceil(fieldValue / 25);
+
   function handleChange(newValue: number) {
     setFieldValue(newValue);
     if (currentEditableFieldEntityId && updateField) {
-      updateField(currentEditableFieldEntityId, viewField, newValue);
+      updateField(
+        currentEditableFieldEntityId,
+        currentEditableFieldDefinition,
+        newValue,
+      );
     }
     closeEditableField();
   }

front/src/modules/ui/editable-field/hooks/useUpdateGenericEntityField.ts

@@ -1,100 +1,98 @@
 import { useContext } from 'react';
 
-import { isViewFieldChip } from '@/ui/editable-field/types/guards/isViewFieldChip';
+import { isFieldChip } from '@/ui/editable-field/types/guards/isFieldChip';
-import { EntityUpdateMutationHookContext } from '@/ui/table/states/EntityUpdateMutationHookContext';
 
-import { isViewFieldChipValue } from '../types/guards/isViewFieldChipValue';
+import { EditableFieldContext } from '../states/EditableFieldContext';
-import { isViewFieldDate } from '../types/guards/isViewFieldDate';
+import { FieldDefinition } from '../types/FieldDefinition';
-import { isViewFieldDateValue } from '../types/guards/isViewFieldDateValue';
-import { isViewFieldDoubleText } from '../types/guards/isViewFieldDoubleText';
-import { isViewFieldDoubleTextChip } from '../types/guards/isViewFieldDoubleTextChip';
-import { isViewFieldDoubleTextChipValue } from '../types/guards/isViewFieldDoubleTextChipValue';
-import { isViewFieldDoubleTextValue } from '../types/guards/isViewFieldDoubleTextValue';
-import { isViewFieldNumber } from '../types/guards/isViewFieldNumber';
-import { isViewFieldNumberValue } from '../types/guards/isViewFieldNumberValue';
-import { isViewFieldPhone } from '../types/guards/isViewFieldPhone';
-import { isViewFieldPhoneValue } from '../types/guards/isViewFieldPhoneValue';
-import { isViewFieldProbability } from '../types/guards/isViewFieldProbability';
-import { isViewFieldProbabilityValue } from '../types/guards/isViewFieldProbabilityValue';
-import { isViewFieldRelation } from '../types/guards/isViewFieldRelation';
-import { isViewFieldRelationValue } from '../types/guards/isViewFieldRelationValue';
-import { isViewFieldText } from '../types/guards/isViewFieldText';
-import { isViewFieldTextValue } from '../types/guards/isViewFieldTextValue';
-import { isViewFieldURL } from '../types/guards/isViewFieldURL';
-import { isViewFieldURLValue } from '../types/guards/isViewFieldURLValue';
 import {
-  ViewFieldChipMetadata,
+  FieldChipMetadata,
-  ViewFieldChipValue,
+  FieldChipValue,
-  ViewFieldDateMetadata,
+  FieldDateMetadata,
-  ViewFieldDateValue,
+  FieldDateValue,
-  ViewFieldDefinition,
+  FieldDoubleTextChipMetadata,
-  ViewFieldDoubleTextChipMetadata,
+  FieldDoubleTextChipValue,
-  ViewFieldDoubleTextChipValue,
+  FieldDoubleTextMetadata,
-  ViewFieldDoubleTextMetadata,
+  FieldDoubleTextValue,
-  ViewFieldDoubleTextValue,
+  FieldMetadata,
-  ViewFieldMetadata,
+  FieldNumberMetadata,
-  ViewFieldNumberMetadata,
+  FieldNumberValue,
-  ViewFieldNumberValue,
+  FieldPhoneMetadata,
-  ViewFieldPhoneMetadata,
+  FieldPhoneValue,
-  ViewFieldPhoneValue,
+  FieldProbabilityMetadata,
-  ViewFieldProbabilityMetadata,
+  FieldProbabilityValue,
-  ViewFieldProbabilityValue,
+  FieldRelationMetadata,
-  ViewFieldRelationMetadata,
+  FieldRelationValue,
-  ViewFieldRelationValue,
+  FieldTextMetadata,
-  ViewFieldTextMetadata,
+  FieldTextValue,
-  ViewFieldTextValue,
+  FieldURLMetadata,
-  ViewFieldURLMetadata,
+  FieldURLValue,
-  ViewFieldURLValue,
+} from '../types/FieldMetadata';
-} from '../types/ViewField';
+import { isFieldChipValue } from '../types/guards/isFieldChipValue';
+import { isFieldDate } from '../types/guards/isFieldDate';
+import { isFieldDateValue } from '../types/guards/isFieldDateValue';
+import { isFieldDoubleText } from '../types/guards/isFieldDoubleText';
+import { isFieldDoubleTextChip } from '../types/guards/isFieldDoubleTextChip';
+import { isFieldDoubleTextChipValue } from '../types/guards/isFieldDoubleTextChipValue';
+import { isFieldDoubleTextValue } from '../types/guards/isFieldDoubleTextValue';
+import { isFieldNumber } from '../types/guards/isFieldNumber';
+import { isFieldNumberValue } from '../types/guards/isFieldNumberValue';
+import { isFieldPhone } from '../types/guards/isFieldPhone';
+import { isFieldPhoneValue } from '../types/guards/isFieldPhoneValue';
+import { isFieldProbability } from '../types/guards/isFieldProbability';
+import { isFieldProbabilityValue } from '../types/guards/isFieldProbabilityValue';
+import { isFieldRelation } from '../types/guards/isFieldRelation';
+import { isFieldRelationValue } from '../types/guards/isFieldRelationValue';
+import { isFieldText } from '../types/guards/isFieldText';
+import { isFieldTextValue } from '../types/guards/isFieldTextValue';
+import { isFieldURL } from '../types/guards/isFieldURL';
+import { isFieldURLValue } from '../types/guards/isFieldURLValue';
 
 export function useUpdateGenericEntityField() {
-  const useUpdateEntityMutation = useContext(EntityUpdateMutationHookContext);
+  const currentEditableField = useContext(EditableFieldContext);
+  const useUpdateEntityMutation = currentEditableField?.mutation;
 
   const [updateEntity] = useUpdateEntityMutation();
 
-  return function updatePeopleField<
+  return function updateEntityField<
-    MetadataType extends ViewFieldMetadata,
+    MetadataType extends FieldMetadata,
-    ValueType extends MetadataType extends ViewFieldDoubleTextMetadata
+    ValueType extends MetadataType extends FieldDoubleTextMetadata
-      ? ViewFieldDoubleTextValue
+      ? FieldDoubleTextValue
-      : MetadataType extends ViewFieldTextMetadata
+      : MetadataType extends FieldTextMetadata
-      ? ViewFieldTextValue
+      ? FieldTextValue
-      : MetadataType extends ViewFieldPhoneMetadata
+      : MetadataType extends FieldPhoneMetadata
-      ? ViewFieldPhoneValue
+      ? FieldPhoneValue
-      : MetadataType extends ViewFieldURLMetadata
+      : MetadataType extends FieldURLMetadata
-      ? ViewFieldURLValue
+      ? FieldURLValue
-      : MetadataType extends ViewFieldNumberMetadata
+      : MetadataType extends FieldNumberMetadata
-      ? ViewFieldNumberValue
+      ? FieldNumberValue
-      : MetadataType extends ViewFieldDateMetadata
+      : MetadataType extends FieldDateMetadata
-      ? ViewFieldDateValue
+      ? FieldDateValue
-      : MetadataType extends ViewFieldChipMetadata
+      : MetadataType extends FieldChipMetadata
-      ? ViewFieldChipValue
+      ? FieldChipValue
-      : MetadataType extends ViewFieldDoubleTextChipMetadata
+      : MetadataType extends FieldDoubleTextChipMetadata
-      ? ViewFieldDoubleTextChipValue
+      ? FieldDoubleTextChipValue
-      : MetadataType extends ViewFieldRelationMetadata
+      : MetadataType extends FieldRelationMetadata
-      ? ViewFieldRelationValue
+      ? FieldRelationValue
-      : MetadataType extends ViewFieldProbabilityMetadata
+      : MetadataType extends FieldProbabilityMetadata
-      ? ViewFieldProbabilityValue
+      ? FieldProbabilityValue
       : unknown,
   >(
     currentEntityId: string,
-    viewField: ViewFieldDefinition<MetadataType>,
+    field: FieldDefinition<MetadataType>,
     newFieldValue: ValueType,
   ) {
     const newFieldValueUnknown = newFieldValue as unknown;
-    // TODO: improve type guards organization, maybe with a common typeguard for all view fields
+    // TODO: improve type guards organization, maybe with a common typeguard for all fields
     // taking an object of options as parameter ?
     //
-    // The goal would be to check that the view field value not only is valid,
+    // The goal would be to check that the field value not only is valid,
-    //    but also that it is validated against the corresponding view field type
+    // but also that it is validated against the corresponding field type
 
     // Relation
-    if (
+    if (isFieldRelation(field) && isFieldRelationValue(newFieldValueUnknown)) {
-      isViewFieldRelation(viewField) &&
-      isViewFieldRelationValue(newFieldValueUnknown)
-    ) {
       const newSelectedEntity = newFieldValueUnknown;
 
-      const fieldName = viewField.metadata.fieldName;
+      const fieldName = field.metadata.fieldName;
 
       if (!newSelectedEntity) {
         updateEntity({
@@ -120,35 +118,29 @@ export function useUpdateGenericEntityField() {
         });
       }
       // Chip
-    } else if (
+    } else if (isFieldChip(field) && isFieldChipValue(newFieldValueUnknown)) {
-      isViewFieldChip(viewField) &&
-      isViewFieldChipValue(newFieldValueUnknown)
-    ) {
       const newContent = newFieldValueUnknown;
 
       updateEntity({
         variables: {
           where: { id: currentEntityId },
-          data: { [viewField.metadata.contentFieldName]: newContent },
+          data: { [field.metadata.contentFieldName]: newContent },
         },
       });
       // Text
-    } else if (
+    } else if (isFieldText(field) && isFieldTextValue(newFieldValueUnknown)) {
-      isViewFieldText(viewField) &&
-      isViewFieldTextValue(newFieldValueUnknown)
-    ) {
       const newContent = newFieldValueUnknown;
 
       updateEntity({
         variables: {
           where: { id: currentEntityId },
-          data: { [viewField.metadata.fieldName]: newContent },
+          data: { [field.metadata.fieldName]: newContent },
         },
       });
       // Double text
     } else if (
-      isViewFieldDoubleText(viewField) &&
+      isFieldDoubleText(field) &&
-      isViewFieldDoubleTextValue(newFieldValueUnknown)
+      isFieldDoubleTextValue(newFieldValueUnknown)
     ) {
       const newContent = newFieldValueUnknown;
 
@@ -156,15 +148,15 @@ export function useUpdateGenericEntityField() {
         variables: {
           where: { id: currentEntityId },
           data: {
-            [viewField.metadata.firstValueFieldName]: newContent.firstValue,
+            [field.metadata.firstValueFieldName]: newContent.firstValue,
-            [viewField.metadata.secondValueFieldName]: newContent.secondValue,
+            [field.metadata.secondValueFieldName]: newContent.secondValue,
           },
         },
       });
       //  Double Text Chip
     } else if (
-      isViewFieldDoubleTextChip(viewField) &&
+      isFieldDoubleTextChip(field) &&
-      isViewFieldDoubleTextChipValue(newFieldValueUnknown)
+      isFieldDoubleTextChipValue(newFieldValueUnknown)
     ) {
       const newContent = newFieldValueUnknown;
 
@@ -172,73 +164,64 @@ export function useUpdateGenericEntityField() {
         variables: {
           where: { id: currentEntityId },
           data: {
-            [viewField.metadata.firstValueFieldName]: newContent.firstValue,
+            [field.metadata.firstValueFieldName]: newContent.firstValue,
-            [viewField.metadata.secondValueFieldName]: newContent.secondValue,
+            [field.metadata.secondValueFieldName]: newContent.secondValue,
           },
         },
       });
       // Phone
-    } else if (
+    } else if (isFieldPhone(field) && isFieldPhoneValue(newFieldValueUnknown)) {
-      isViewFieldPhone(viewField) &&
-      isViewFieldPhoneValue(newFieldValueUnknown)
-    ) {
       const newContent = newFieldValueUnknown;
 
       updateEntity({
         variables: {
           where: { id: currentEntityId },
-          data: { [viewField.metadata.fieldName]: newContent },
+          data: { [field.metadata.fieldName]: newContent },
         },
       });
       // URL
-    } else if (
+    } else if (isFieldURL(field) && isFieldURLValue(newFieldValueUnknown)) {
-      isViewFieldURL(viewField) &&
-      isViewFieldURLValue(newFieldValueUnknown)
-    ) {
       const newContent = newFieldValueUnknown;
 
       updateEntity({
         variables: {
           where: { id: currentEntityId },
-          data: { [viewField.metadata.fieldName]: newContent },
+          data: { [field.metadata.fieldName]: newContent },
         },
       });
       // Number
     } else if (
-      isViewFieldNumber(viewField) &&
+      isFieldNumber(field) &&
-      isViewFieldNumberValue(newFieldValueUnknown)
+      isFieldNumberValue(newFieldValueUnknown)
     ) {
       const newContent = newFieldValueUnknown;
 
       updateEntity({
         variables: {
           where: { id: currentEntityId },
-          data: { [viewField.metadata.fieldName]: newContent },
+          data: { [field.metadata.fieldName]: newContent },
         },
       });
       // Date
-    } else if (
+    } else if (isFieldDate(field) && isFieldDateValue(newFieldValueUnknown)) {
-      isViewFieldDate(viewField) &&
-      isViewFieldDateValue(newFieldValueUnknown)
-    ) {
       const newContent = newFieldValueUnknown;
 
       updateEntity({
         variables: {
           where: { id: currentEntityId },
-          data: { [viewField.metadata.fieldName]: newContent },
+          data: { [field.metadata.fieldName]: newContent },
         },
       });
     } else if (
-      isViewFieldProbability(viewField) &&
+      isFieldProbability(field) &&
-      isViewFieldProbabilityValue(newFieldValueUnknown)
+      isFieldProbabilityValue(newFieldValueUnknown)
     ) {
       const newContent = newFieldValueUnknown;
 
       updateEntity({
         variables: {
           where: { id: currentEntityId },
-          data: { [viewField.metadata.fieldName]: newContent },
+          data: { [field.metadata.fieldName]: newContent },
         },
       });
     }

front/src/modules/ui/editable-field/states/EditableFieldContext.ts

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+
+import { FieldDefinition } from '../types/FieldDefinition';
+import { ViewFieldMetadata } from '../types/ViewField';
+
+type EditableFieldContextValue = {
+  entityId: string;
+  fieldDefinition: FieldDefinition<ViewFieldMetadata>;
+  mutation: any;
+};
+
+export const EditableFieldContext = createContext<EditableFieldContextValue>({
+  entityId: '',
+  fieldDefinition: {} as FieldDefinition<ViewFieldMetadata>,
+  mutation: undefined,
+});

front/src/modules/ui/editable-field/types/FieldDefinition.ts

@@ -0,0 +1,9 @@
+import { FieldMetadata } from './FieldMetadata';
+
+export type FieldDefinition<T extends FieldMetadata | unknown> = {
+  id: string;
+  label: string;
+  icon?: JSX.Element;
+  type: string;
+  metadata: T;
+};

front/src/modules/ui/editable-field/types/FieldMetadata.ts

@@ -0,0 +1,113 @@
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+
+export type FieldType =
+  | 'text'
+  | 'relation'
+  | 'chip'
+  | 'double-text-chip'
+  | 'double-text'
+  | 'number'
+  | 'date'
+  | 'phone'
+  | 'url'
+  | 'probability';
+
+export type FieldTextMetadata = {
+  type: 'text';
+  placeHolder: string;
+  fieldName: string;
+};
+
+export type FieldPhoneMetadata = {
+  type: 'phone';
+  placeHolder: string;
+  fieldName: string;
+};
+
+export type FieldURLMetadata = {
+  type: 'url';
+  placeHolder: string;
+  fieldName: string;
+};
+
+export type FieldDateMetadata = {
+  type: 'date';
+  fieldName: string;
+};
+
+export type FieldNumberMetadata = {
+  type: 'number';
+  fieldName: string;
+};
+
+export type FieldRelationMetadata = {
+  type: 'relation';
+  relationType: Entity;
+  fieldName: string;
+};
+
+export type FieldChipMetadata = {
+  type: 'chip';
+  relationType: Entity;
+  contentFieldName: string;
+  urlFieldName: string;
+  placeHolder: string;
+};
+
+export type FieldDoubleTextMetadata = {
+  type: 'double-text';
+  firstValueFieldName: string;
+  firstValuePlaceholder: string;
+  secondValueFieldName: string;
+  secondValuePlaceholder: string;
+};
+
+export type FieldDoubleTextChipMetadata = {
+  type: 'double-text-chip';
+  firstValueFieldName: string;
+  firstValuePlaceholder: string;
+  secondValueFieldName: string;
+  secondValuePlaceholder: string;
+  avatarUrlFieldName: string;
+  entityType: Entity;
+};
+
+export type FieldProbabilityMetadata = {
+  type: 'probability';
+  fieldName: string;
+};
+
+export type FieldMetadata = { type: FieldType } & (
+  | FieldTextMetadata
+  | FieldRelationMetadata
+  | FieldChipMetadata
+  | FieldDoubleTextChipMetadata
+  | FieldDoubleTextMetadata
+  | FieldPhoneMetadata
+  | FieldURLMetadata
+  | FieldNumberMetadata
+  | FieldDateMetadata
+  | FieldProbabilityMetadata
+);
+
+export type FieldTextValue = string;
+
+export type FieldChipValue = string;
+export type FieldDateValue = string;
+export type FieldPhoneValue = string;
+export type FieldURLValue = string;
+export type FieldNumberValue = number | null;
+export type FieldProbabilityValue = number;
+
+export type FieldDoubleTextValue = {
+  firstValue: string;
+  secondValue: string;
+};
+
+export type FieldDoubleTextChipValue = {
+  firstValue: string;
+  secondValue: string;
+};
+
+export type FieldRelationValue = EntityForSelect | null;

front/src/modules/ui/editable-field/types/guards/isFieldChip.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldChipMetadata, FieldMetadata } from '../FieldMetadata';
+
+export function isFieldChip(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldChipMetadata> {
+  return field.type === 'chip';
+}

front/src/modules/ui/editable-field/types/guards/isFieldChipValue.ts

@@ -0,0 +1,12 @@
+import { FieldChipValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldChipValue(
+  fieldValue: unknown,
+): fieldValue is FieldChipValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'string'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldDate.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldDateMetadata, FieldMetadata } from '../FieldMetadata';
+
+export function isFieldDate(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldDateMetadata> {
+  return field.type === 'date';
+}

front/src/modules/ui/editable-field/types/guards/isFieldDateValue.ts

@@ -0,0 +1,12 @@
+import { FieldDateValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldDateValue(
+  fieldValue: unknown,
+): fieldValue is FieldDateValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'string'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldDoubleText.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldDoubleTextMetadata, FieldMetadata } from '../FieldMetadata';
+
+export function isFieldDoubleText(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldDoubleTextMetadata> {
+  return field.type === 'double-text';
+}

front/src/modules/ui/editable-field/types/guards/isFieldDoubleTextChip.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldDoubleTextChipMetadata, FieldMetadata } from '../FieldMetadata';
+
+export function isFieldDoubleTextChip(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldDoubleTextChipMetadata> {
+  return field.type === 'double-text-chip';
+}

front/src/modules/ui/editable-field/types/guards/isFieldDoubleTextChipValue.ts

@@ -0,0 +1,12 @@
+import { FieldDoubleTextChipValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldDoubleTextChipValue(
+  fieldValue: unknown,
+): fieldValue is FieldDoubleTextChipValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'object'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldDoubleTextValue.ts

@@ -0,0 +1,12 @@
+import { FieldDoubleTextValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldDoubleTextValue(
+  fieldValue: unknown,
+): fieldValue is FieldDoubleTextValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'object'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldNumber.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldMetadata, FieldNumberMetadata } from '../FieldMetadata';
+
+export function isFieldNumber(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldNumberMetadata> {
+  return field.type === 'number';
+}

front/src/modules/ui/editable-field/types/guards/isFieldNumberValue.ts

@@ -0,0 +1,12 @@
+import { FieldNumberValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldNumberValue(
+  fieldValue: unknown,
+): fieldValue is FieldNumberValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'number'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldPhone.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldMetadata, FieldPhoneMetadata } from '../FieldMetadata';
+
+export function isFieldPhone(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldPhoneMetadata> {
+  return field.type === 'phone';
+}

front/src/modules/ui/editable-field/types/guards/isFieldPhoneValue.ts

@@ -0,0 +1,12 @@
+import { FieldPhoneValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldPhoneValue(
+  fieldValue: unknown,
+): fieldValue is FieldPhoneValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'string'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldProbability.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldMetadata, FieldProbabilityMetadata } from '../FieldMetadata';
+
+export function isFieldProbability(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldProbabilityMetadata> {
+  return field.type === 'probability';
+}

front/src/modules/ui/editable-field/types/guards/isFieldProbabilityValue.ts

@@ -0,0 +1,12 @@
+import { FieldProbabilityValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldProbabilityValue(
+  fieldValue: unknown,
+): fieldValue is FieldProbabilityValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'number'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldRelation.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldMetadata, FieldRelationMetadata } from '../FieldMetadata';
+
+export function isFieldRelation(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldRelationMetadata> {
+  return field.type === 'relation';
+}

front/src/modules/ui/editable-field/types/guards/isFieldRelationValue.ts

@@ -0,0 +1,12 @@
+import { FieldRelationValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldRelationValue(
+  fieldValue: unknown,
+): fieldValue is FieldRelationValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'object'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldText.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldMetadata, FieldTextMetadata } from '../FieldMetadata';
+
+export function isFieldText(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldTextMetadata> {
+  return field.type === 'text';
+}

front/src/modules/ui/editable-field/types/guards/isFieldTextValue.ts

@@ -0,0 +1,12 @@
+import { FieldTextValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldTextValue(
+  fieldValue: unknown,
+): fieldValue is FieldTextValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'string'
+  );
+}

front/src/modules/ui/editable-field/types/guards/isFieldURL.ts

@@ -0,0 +1,8 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldMetadata, FieldURLMetadata } from '../FieldMetadata';
+
+export function isFieldURL(
+  field: FieldDefinition<FieldMetadata>,
+): field is FieldDefinition<FieldURLMetadata> {
+  return field.type === 'url';
+}

front/src/modules/ui/editable-field/types/guards/isFieldURLValue.ts

@@ -0,0 +1,12 @@
+import { FieldURLValue } from '../FieldMetadata';
+
+// TODO: add yup
+export function isFieldURLValue(
+  fieldValue: unknown,
+): fieldValue is FieldURLValue {
+  return (
+    fieldValue !== null &&
+    fieldValue !== undefined &&
+    typeof fieldValue === 'string'
+  );
+}