Feat/generic editable cell chip (#982)

* Added generic relation cell

* Deactivated debug

* Added default warning

* Put back display component

* Removed unused types

* wip

* Renamed to view field

* Use new view field structure to have chip working

* Finished

* Added a temp feature flag

front/src/App.tsx

@@ -19,6 +19,9 @@ import { AppInternalHooks } from '~/sync-hooks/AppInternalHooks';
 
 import { SignInUp } from './pages/auth/SignInUp';
 
+// TEMP FEATURE FLAG FOR VIEW FIELDS
+export const ACTIVATE_VIEW_FIELDS = false;
+
 export function App() {
   return (
     <>

front/src/modules/companies/constants/companyFieldMetadataArray.tsx

@@ -0,0 +1,22 @@
+import { IconBuildingSkyscraper } from '@tabler/icons-react';
+
+import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
+import {
+  ViewFieldChipMetadata,
+  ViewFieldDefinition,
+} from '@/ui/table/types/ViewField';
+
+export const companyViewFields: ViewFieldDefinition<unknown>[] = [
+  {
+    columnLabel: 'Name',
+    columnIcon: <IconBuildingSkyscraper size={16} />,
+    columnSize: 150,
+    type: 'chip',
+    columnOrder: 1,
+    metadata: {
+      urlFieldName: 'domainName',
+      contentFieldName: 'name',
+      relationType: Entity.Company,
+    },
+  } as ViewFieldDefinition<ViewFieldChipMetadata>,
+];

front/src/modules/companies/table/components/CompanyTableV2.tsx

@@ -0,0 +1,54 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import { companyViewFields } from '@/companies/constants/companyFieldMetadataArray';
+import { CompaniesSelectedSortType, defaultOrderBy } from '@/companies/queries';
+import { GenericEntityTableData } from '@/people/components/GenericEntityTableData';
+import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
+import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
+import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
+import { IconList } from '@/ui/icon';
+import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
+import { EntityTable } from '@/ui/table/components/EntityTableV2';
+import { TableContext } from '@/ui/table/states/TableContext';
+import {
+  CompanyOrderByWithRelationInput,
+  useGetCompaniesQuery,
+  useUpdateOneCompanyMutation,
+} from '~/generated/graphql';
+import { companiesFilters } from '~/pages/companies/companies-filters';
+import { availableSorts } from '~/pages/companies/companies-sorts';
+
+export function CompanyTable() {
+  const [orderBy, setOrderBy] =
+    useState<CompanyOrderByWithRelationInput[]>(defaultOrderBy);
+
+  const updateSorts = useCallback((sorts: Array<CompaniesSelectedSortType>) => {
+    setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
+  }, []);
+
+  const filters = useRecoilScopedValue(filtersScopedState, TableContext);
+
+  const whereFilters = useMemo(() => {
+    return { AND: filters.map(turnFilterIntoWhereClause) };
+  }, [filters]) as any;
+
+  return (
+    <>
+      <GenericEntityTableData
+        getRequestResultKey="companies"
+        useGetRequest={useGetCompaniesQuery}
+        orderBy={orderBy}
+        whereFilters={whereFilters}
+        viewFields={companyViewFields}
+        filterDefinitionArray={companiesFilters}
+      />
+      <EntityTable
+        viewName="All Companies"
+        viewIcon={<IconList size={16} />}
+        availableSorts={availableSorts}
+        onSortsUpdate={updateSorts}
+        useUpdateEntityMutation={useUpdateOneCompanyMutation}
+      />
+    </>
+  );
+}

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

@@ -1,4 +1,5 @@
-import { EntityFieldMetadata } from '@/ui/table/types/EntityFieldMetadata';
+import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
+import { ViewFieldDefinition } from '@/ui/table/types/ViewField';
 
 import { useSetEntityTableData } from '../hooks/useSetEntityTableData';
 import { defaultOrderBy } from '../queries';
@@ -8,13 +9,15 @@ export function GenericEntityTableData({
   getRequestResultKey,
   orderBy = defaultOrderBy,
   whereFilters,
-  fieldMetadataArray,
+  viewFields,
+  filterDefinitionArray,
 }: {
   useGetRequest: any;
   getRequestResultKey: string;
   orderBy?: any;
   whereFilters?: any;
-  fieldMetadataArray: EntityFieldMetadata[];
+  viewFields: ViewFieldDefinition<unknown>[];
+  filterDefinitionArray: FilterDefinition[];
 }) {
   const setEntityTableData = useSetEntityTableData();
 
@@ -23,7 +26,7 @@ export function GenericEntityTableData({
     onCompleted: (data: any) => {
       const entities = data[getRequestResultKey] ?? [];
 
-      setEntityTableData(entities, fieldMetadataArray);
+      setEntityTableData(entities, viewFields, filterDefinitionArray);
     },
   });
 

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

@@ -5,29 +5,48 @@ import {
 } from '@tabler/icons-react';
 
 import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
-import { EntityFieldMetadata } from '@/ui/table/types/EntityFieldMetadata';
+import {
+  ViewFieldDefinition,
+  ViewFieldRelationMetadata,
+  ViewFieldTextMetadata,
+} from '@/ui/table/types/ViewField';
 
-export const peopleFieldMetadataArray: EntityFieldMetadata[] = [
+export const peopleViewFields: ViewFieldDefinition<unknown>[] = [
   {
-    fieldName: 'city',
-    label: 'City',
-    icon: <IconMap size={16} />,
+    id: 'city',
+    columnLabel: 'City',
+    columnIcon: <IconMap size={16} />,
     columnSize: 150,
     type: 'text',
-  },
+    columnOrder: 1,
+    metadata: {
+      fieldName: 'city',
+      placeHolder: 'City',
+    },
+  } as ViewFieldDefinition<ViewFieldTextMetadata>,
   {
-    fieldName: 'jobTitle',
-    label: 'Job title',
-    icon: <IconBriefcase size={16} />,
+    id: 'jobTitle',
+    columnLabel: 'Job title',
+    columnIcon: <IconBriefcase size={16} />,
     columnSize: 150,
     type: 'text',
-  },
+    columnOrder: 2,
+    metadata: {
+      fieldName: 'jobTitle',
+      placeHolder: 'Job title',
+    },
+  } as ViewFieldDefinition<ViewFieldTextMetadata>,
   {
-    fieldName: 'company',
-    label: 'Company',
-    icon: <IconBuildingSkyscraper size={16} />,
+    id: 'company',
+    columnLabel: 'Company',
+    columnIcon: <IconBuildingSkyscraper size={16} />,
     columnSize: 150,
     type: 'relation',
     relationType: Entity.Company,
-  },
+    columnOrder: 3,
+    metadata: {
+      fieldName: 'company',
+      relationType: Entity.Company,
+    },
+  } as ViewFieldDefinition<ViewFieldRelationMetadata>,
 ];

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

@@ -1,9 +1,9 @@
 import { useRecoilCallback } from 'recoil';
 
 import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
-import { entityFieldMetadataArrayState } from '@/ui/table/states/entityFieldMetadataArrayState';
 import { tableEntitiesFamilyState } from '@/ui/table/states/tableEntitiesFamilyState';
-import { EntityFieldMetadata } from '@/ui/table/types/EntityFieldMetadata';
+import { viewFieldsState } from '@/ui/table/states/viewFieldsState';
+import { ViewFieldDefinition } from '@/ui/table/types/ViewField';
 
 import { availableFiltersScopedState } from '../../ui/filter-n-sort/states/availableFiltersScopedState';
 import { useContextScopeId } from '../../ui/recoil-scope/hooks/useContextScopeId';
@@ -22,7 +22,8 @@ export function useSetEntityTableData() {
     ({ set, snapshot }) =>
       <T extends { id: string }>(
         newEntityArray: T[],
-        entityFieldMetadataArray: EntityFieldMetadata[],
+        viewFields: ViewFieldDefinition<unknown>[],
+        filters: FilterDefinition[],
       ) => {
         for (const entity of newEntityArray) {
           const currentEntity = snapshot
@@ -47,23 +48,13 @@ export function useSetEntityTableData() {
         resetTableRowSelection();
 
         set(entityTableDimensionsState, {
-          numberOfColumns: entityFieldMetadataArray.length,
+          numberOfColumns: viewFields.length,
           numberOfRows: entityIds.length,
         });
 
-        const filters = entityFieldMetadataArray.map(
-          (fieldMetadata) =>
-            ({
-              field: fieldMetadata.fieldName,
-              icon: fieldMetadata.filterIcon,
-              label: fieldMetadata.label,
-              type: fieldMetadata.type,
-            } as FilterDefinition),
-        );
-
         set(availableFiltersScopedState(tableContextScopeId), filters);
 
-        set(entityFieldMetadataArrayState, entityFieldMetadataArray);
+        set(viewFieldsState, viewFields);
 
         set(isFetchingEntityTableDataState, false);
       },

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

@@ -2,34 +2,38 @@ import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
-import { entityFieldMetadataArrayState } from '@/ui/table/states/entityFieldMetadataArrayState';
 import { EntityUpdateMutationHookContext } from '@/ui/table/states/EntityUpdateMutationHookContext';
+import { viewFieldsState } from '@/ui/table/states/viewFieldsState';
+import { isViewFieldChip } from '@/ui/table/types/guards/isViewFieldChip';
+import { isViewFieldRelation } from '@/ui/table/types/guards/isViewFieldRelation';
+import { isViewFieldText } from '@/ui/table/types/guards/isViewFieldText';
 
 export function useUpdateEntityField() {
   const useUpdateEntityMutation = useContext(EntityUpdateMutationHookContext);
 
   const [updateEntity] = useUpdateEntityMutation();
 
-  const entityFieldMetadataArray = useRecoilValue(
-    entityFieldMetadataArrayState,
-  );
+  const viewFields = useRecoilValue(viewFieldsState);
 
   return function updatePeopleField(
     currentEntityId: string,
-    fieldName: string,
+    viewFieldId: string,
     newFieldValue: unknown,
   ) {
-    const fieldMetadata = entityFieldMetadataArray.find(
-      (metadata) => metadata.fieldName === fieldName,
+    const viewField = viewFields.find(
+      (metadata) => metadata.id === viewFieldId,
     );
 
-    if (!fieldMetadata) {
-      throw new Error(`Field metadata not found for field ${fieldName}`);
+    if (!viewField) {
+      throw new Error(`View field not found for id ${viewFieldId}`);
     }
 
-    if (fieldMetadata.type === 'relation') {
+    // TODO: improve type narrowing here with validation maybe ? Also validate the newFieldValue with linked type guards
+    if (isViewFieldRelation(viewField)) {
       const newSelectedEntity = newFieldValue as EntityForSelect | null;
 
+      const fieldName = viewField.metadata.fieldName;
+
       if (!newSelectedEntity) {
         updateEntity({
           variables: {
@@ -53,11 +57,22 @@ export function useUpdateEntityField() {
           },
         });
       }
-    } else {
+    } else if (isViewFieldChip(viewField)) {
+      const newContent = newFieldValue as string;
+
       updateEntity({
         variables: {
           where: { id: currentEntityId },
-          data: { [fieldName]: newFieldValue },
+          data: { [viewField.metadata.contentFieldName]: newContent },
+        },
+      });
+    } else if (isViewFieldText(viewField)) {
+      const newContent = newFieldValue as string;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.fieldName]: newContent },
         },
       });
     }

front/src/modules/people/table/components/PeopleTableV2.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { defaultOrderBy } from '@/companies/queries';
 import { GenericEntityTableData } from '@/people/components/GenericEntityTableData';
-import { peopleFieldMetadataArray } from '@/people/constants/peopleFieldMetadataArray';
+import { peopleViewFields } from '@/people/constants/peopleFieldMetadataArray';
 import { PeopleSelectedSortType } from '@/people/queries';
 import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
@@ -16,6 +16,7 @@ import {
   useGetPeopleQuery,
   useUpdateOnePersonMutation,
 } from '~/generated/graphql';
+import { peopleFilters } from '~/pages/people/people-filters';
 import { availableSorts } from '~/pages/people/people-sorts';
 
 export function PeopleTable() {
@@ -39,7 +40,8 @@ export function PeopleTable() {
         useGetRequest={useGetPeopleQuery}
         orderBy={orderBy}
         whereFilters={whereFilters}
-        fieldMetadataArray={peopleFieldMetadataArray}
+        viewFields={peopleViewFields}
+        filterDefinitionArray={peopleFilters}
       />
       <EntityTable
         viewName="All People"

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

@@ -7,7 +7,7 @@ import { RecoilScope } from '../../recoil-scope/components/RecoilScope';
 import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
 import { ColumnIndexContext } from '../states/ColumnIndexContext';
 import { contextMenuPositionState } from '../states/contextMenuPositionState';
-import { EntityFieldMetadataContext } from '../states/EntityFieldMetadataContext';
+import { ViewFieldContext } from '../states/ViewFieldContext';
 
 export function EntityTableCell({ cellIndex }: { cellIndex: number }) {
   const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
@@ -25,7 +25,7 @@ export function EntityTableCell({ cellIndex }: { cellIndex: number }) {
     });
   }
 
-  const entityFieldMetadata = useContext(EntityFieldMetadataContext);
+  const entityFieldMetadata = useContext(ViewFieldContext);
 
   if (!entityFieldMetadata) {
     return null;
@@ -42,7 +42,7 @@ export function EntityTableCell({ cellIndex }: { cellIndex: number }) {
             maxWidth: entityFieldMetadata.columnSize,
           }}
         >
-          <GenericEditableCell entityFieldMetadata={entityFieldMetadata} />
+          <GenericEditableCell fieldDefinition={entityFieldMetadata} />
         </td>
       </ColumnIndexContext.Provider>
     </RecoilScope>

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

@@ -1,12 +1,12 @@
 import { useRecoilValue } from 'recoil';
 
-import { entityFieldMetadataArrayState } from '../states/entityFieldMetadataArrayState';
+import { viewFieldsState } from '../states/viewFieldsState';
 
 import { ColumnHead } from './ColumnHead';
 import { SelectAllCheckbox } from './SelectAllCheckbox';
 
 export function EntityTableHeader() {
-  const fieldMetadataArray = useRecoilValue(entityFieldMetadataArrayState);
+  const viewFields = useRecoilValue(viewFieldsState);
 
   return (
     <thead>
@@ -20,18 +20,18 @@ export function EntityTableHeader() {
         >
           <SelectAllCheckbox />
         </th>
-        {fieldMetadataArray.map((fieldMetadata) => (
+        {viewFields.map((viewField) => (
           <th
-            key={fieldMetadata.fieldName.toString()}
+            key={viewField.columnOrder.toString()}
             style={{
-              width: fieldMetadata.columnSize,
-              minWidth: fieldMetadata.columnSize,
-              maxWidth: fieldMetadata.columnSize,
+              width: viewField.columnSize,
+              minWidth: viewField.columnSize,
+              maxWidth: viewField.columnSize,
             }}
           >
             <ColumnHead
-              viewName={fieldMetadata.label}
-              viewIcon={fieldMetadata.icon}
+              viewName={viewField.columnLabel}
+              viewIcon={viewField.columnIcon}
             />
           </th>
         ))}

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

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
-import { entityFieldMetadataArrayState } from '../states/entityFieldMetadataArrayState';
-import { EntityFieldMetadataContext } from '../states/EntityFieldMetadataContext';
+import { ViewFieldContext } from '../states/ViewFieldContext';
+import { viewFieldsState } from '../states/viewFieldsState';
 
 import { CheckboxCell } from './CheckboxCell';
 import { EntityTableCell } from './EntityTableCellV2';
@@ -13,9 +13,7 @@ const StyledRow = styled.tr<{ selected: boolean }>`
 `;
 
 export function EntityTableRow({ rowId }: { rowId: string }) {
-  const entityFieldMetadataArray = useRecoilValue(
-    entityFieldMetadataArrayState,
-  );
+  const entityFieldMetadataArray = useRecoilValue(viewFieldsState);
 
   return (
     <StyledRow data-testid={`row-id-${rowId}`} selected={false}>
@@ -24,12 +22,12 @@ export function EntityTableRow({ rowId }: { rowId: string }) {
       </td>
       {entityFieldMetadataArray.map((entityFieldMetadata, columnIndex) => {
         return (
-          <EntityFieldMetadataContext.Provider
+          <ViewFieldContext.Provider
             value={entityFieldMetadata}
-            key={entityFieldMetadata.fieldName}
+            key={entityFieldMetadata.columnOrder}
           >
             <EntityTableCell cellIndex={columnIndex} />
-          </EntityFieldMetadataContext.Provider>
+          </ViewFieldContext.Provider>
         );
       })}
       <td></td>

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

@@ -1,31 +1,38 @@
-import { EntityFieldMetadata } from '@/ui/table/types/EntityFieldMetadata';
+import { ViewFieldDefinition } from '@/ui/table/types/ViewField';
 
+import { isViewFieldChip } from '../types/guards/isViewFieldChip';
+import { isViewFieldRelation } from '../types/guards/isViewFieldRelation';
+import { isViewFieldText } from '../types/guards/isViewFieldText';
+
+import { GenericEditableChipCell } from './GenericEditableChipCell';
 import { GenericEditableRelationCell } from './GenericEditableRelationCell';
 import { GenericEditableTextCell } from './GenericEditableTextCell';
 
 type OwnProps = {
-  entityFieldMetadata: EntityFieldMetadata;
+  fieldDefinition: ViewFieldDefinition<unknown>;
 };
 
-export function GenericEditableCell({ entityFieldMetadata }: OwnProps) {
-  switch (entityFieldMetadata.type) {
-    case 'text':
-      return (
-        <GenericEditableTextCell
-          fieldName={entityFieldMetadata.fieldName}
-          placeholder={entityFieldMetadata.label}
-          editModeHorizontalAlign="left"
-        />
-      );
-    case 'relation': {
-      return (
-        <GenericEditableRelationCell fieldMetadata={entityFieldMetadata} />
-      );
-    }
-    default:
-      console.warn(
-        `Unknown field type: ${entityFieldMetadata.type} in GenericEditableCell`,
-      );
-      return <></>;
+export function GenericEditableCell({ fieldDefinition }: OwnProps) {
+  if (isViewFieldText(fieldDefinition)) {
+    return (
+      <GenericEditableTextCell
+        viewField={fieldDefinition}
+        editModeHorizontalAlign="left"
+      />
+    );
+  } else if (isViewFieldRelation(fieldDefinition)) {
+    return <GenericEditableRelationCell fieldDefinition={fieldDefinition} />;
+  } else if (isViewFieldChip(fieldDefinition)) {
+    return (
+      <GenericEditableChipCell
+        viewField={fieldDefinition}
+        editModeHorizontalAlign="left"
+      />
+    );
+  } else {
+    console.warn(
+      `Unknown field type: ${fieldDefinition.type} in GenericEditableCell`,
+    );
+    return <></>;
   }
 }

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

@@ -0,0 +1,34 @@
+import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
+
+import { ViewFieldChipMetadata, ViewFieldDefinition } from '../types/ViewField';
+
+import { GenericEditableChipCellDisplayMode } from './GenericEditableChipCellDisplayMode';
+import { GenericEditableTextCellEditMode } from './GenericEditableTextCellEditMode';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldChipMetadata>;
+  editModeHorizontalAlign?: 'left' | 'right';
+  placeholder?: string;
+};
+
+export function GenericEditableChipCell({
+  viewField,
+  editModeHorizontalAlign,
+  placeholder,
+}: OwnProps) {
+  return (
+    <EditableCell
+      editModeHorizontalAlign={editModeHorizontalAlign}
+      editModeContent={
+        <GenericEditableTextCellEditMode
+          fieldName={viewField.metadata.contentFieldName}
+          viewFieldId={viewField.id}
+          placeholder={placeholder}
+        />
+      }
+      nonEditModeContent={
+        <GenericEditableChipCellDisplayMode fieldDefinition={viewField} />
+      }
+    ></EditableCell>
+  );
+}

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

@@ -0,0 +1,52 @@
+import { useRecoilValue } from 'recoil';
+
+import { CompanyChip } from '@/companies/components/CompanyChip';
+import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
+import {
+  ViewFieldChipMetadata,
+  ViewFieldDefinition,
+} from '@/ui/table/types/ViewField';
+import { getLogoUrlFromDomainName } from '~/utils';
+
+type OwnProps = {
+  fieldDefinition: ViewFieldDefinition<ViewFieldChipMetadata>;
+};
+
+export function GenericEditableChipCellDisplayMode({
+  fieldDefinition,
+}: OwnProps) {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const content = useRecoilValue<any | null>(
+    tableEntityFieldFamilySelector({
+      entityId: currentRowEntityId ?? '',
+      fieldName: fieldDefinition.metadata.contentFieldName,
+    }),
+  );
+
+  const chipUrl = useRecoilValue<any | null>(
+    tableEntityFieldFamilySelector({
+      entityId: currentRowEntityId ?? '',
+      fieldName: fieldDefinition.metadata.urlFieldName,
+    }),
+  );
+
+  switch (fieldDefinition.metadata.relationType) {
+    case Entity.Company: {
+      return (
+        <CompanyChip
+          id={currentRowEntityId ?? ''}
+          name={content ?? ''}
+          pictureUrl={getLogoUrlFromDomainName(chipUrl)}
+        />
+      );
+    }
+    default:
+      console.warn(
+        `Unknown relation type: "${fieldDefinition.metadata.relationType}" in GenericEditableChipCellEditMode`,
+      );
+      return <> </>;
+  }
+}

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

@@ -1,18 +1,21 @@
 import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
-import { EntityFieldMetadata } from '@/ui/table/types/EntityFieldMetadata';
+import {
+  ViewFieldDefinition,
+  ViewFieldRelationMetadata,
+} from '@/ui/table/types/ViewField';
 
 import { GenericEditableRelationCellDisplayMode } from './GenericEditableRelationCellDisplayMode';
 import { GenericEditableRelationCellEditMode } from './GenericEditableRelationCellEditMode';
 
 type OwnProps = {
-  fieldMetadata: EntityFieldMetadata;
+  fieldDefinition: ViewFieldDefinition<ViewFieldRelationMetadata>;
   editModeHorizontalAlign?: 'left' | 'right';
   placeholder?: string;
 };
 
 export function GenericEditableRelationCell({
-  fieldMetadata,
+  fieldDefinition,
   editModeHorizontalAlign,
   placeholder,
 }: OwnProps) {
@@ -21,11 +24,13 @@ export function GenericEditableRelationCell({
       editModeHorizontalAlign={editModeHorizontalAlign}
       editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
       editModeContent={
-        <GenericEditableRelationCellEditMode fieldMetadata={fieldMetadata} />
+        <GenericEditableRelationCellEditMode
+          viewFieldDefinition={fieldDefinition}
+        />
       }
       nonEditModeContent={
         <GenericEditableRelationCellDisplayMode
-          fieldMetadata={fieldMetadata}
+          fieldDefinition={fieldDefinition}
           editModeHorizontalAlign={editModeHorizontalAlign}
           placeholder={placeholder}
         />

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

@@ -4,28 +4,31 @@ import { CompanyChip } from '@/companies/components/CompanyChip';
 import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
-import { EntityFieldMetadata } from '@/ui/table/types/EntityFieldMetadata';
+import {
+  ViewFieldDefinition,
+  ViewFieldRelationMetadata,
+} from '@/ui/table/types/ViewField';
 import { getLogoUrlFromDomainName } from '~/utils';
 
 type OwnProps = {
-  fieldMetadata: EntityFieldMetadata;
+  fieldDefinition: ViewFieldDefinition<ViewFieldRelationMetadata>;
   editModeHorizontalAlign?: 'left' | 'right';
   placeholder?: string;
 };
 
 export function GenericEditableRelationCellDisplayMode({
-  fieldMetadata,
+  fieldDefinition,
 }: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
   const fieldValue = useRecoilValue<any | null>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: fieldMetadata.fieldName,
+      fieldName: fieldDefinition.metadata.fieldName,
     }),
   );
 
-  switch (fieldMetadata.relationType) {
+  switch (fieldDefinition.metadata.relationType) {
     case Entity.Company: {
       return (
         <CompanyChip
@@ -37,7 +40,7 @@ export function GenericEditableRelationCellDisplayMode({
     }
     default:
       console.warn(
-        `Unknown relation type: "${fieldMetadata.relationType}" in GenericEditableRelationCellEditMode`,
+        `Unknown relation type: "${fieldDefinition.metadata.relationType}" in GenericEditableRelationCellEditMode`,
       );
       return <> </>;
   }

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

@@ -7,14 +7,17 @@ import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
 import { useEditableCell } from '@/ui/table/editable-cell/hooks/useEditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
-import { EntityFieldMetadata } from '@/ui/table/types/EntityFieldMetadata';
+import {
+  ViewFieldDefinition,
+  ViewFieldRelationMetadata,
+} from '@/ui/table/types/ViewField';
 
 type OwnProps = {
-  fieldMetadata: EntityFieldMetadata;
+  viewFieldDefinition: ViewFieldDefinition<ViewFieldRelationMetadata>;
 };
 
 export function GenericEditableRelationCellEditMode({
-  fieldMetadata,
+  viewFieldDefinition,
 }: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
@@ -23,7 +26,7 @@ export function GenericEditableRelationCellEditMode({
   const [fieldValueEntity] = useRecoilState<any | null>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName: fieldMetadata.fieldName,
+      fieldName: viewFieldDefinition.metadata.fieldName,
     }),
   );
 
@@ -37,7 +40,7 @@ export function GenericEditableRelationCellEditMode({
     ) {
       updateEntityField(
         currentRowEntityId,
-        fieldMetadata.fieldName,
+        viewFieldDefinition.id,
         newFieldEntity,
       );
     }
@@ -49,7 +52,7 @@ export function GenericEditableRelationCellEditMode({
     closeEditableCell();
   }
 
-  switch (fieldMetadata.relationType) {
+  switch (viewFieldDefinition.metadata.relationType) {
     case Entity.Company: {
       return (
         <CompanyPickerCell
@@ -61,7 +64,7 @@ export function GenericEditableRelationCellEditMode({
     }
     default:
       console.warn(
-        `Unknown relation type: "${fieldMetadata.relationType}" in GenericEditableRelationCellEditMode`,
+        `Unknown relation type: "${viewFieldDefinition.metadata.relationType}" in GenericEditableRelationCellEditMode`,
       );
       return <></>;
   }

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

@@ -5,16 +5,18 @@ import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFieldFamilySelector';
 
+import { ViewFieldDefinition, ViewFieldTextMetadata } from '../types/ViewField';
+
 import { GenericEditableTextCellEditMode } from './GenericEditableTextCellEditMode';
 
 type OwnProps = {
-  fieldName: string;
+  viewField: ViewFieldDefinition<ViewFieldTextMetadata>;
   editModeHorizontalAlign?: 'left' | 'right';
   placeholder?: string;
 };
 
 export function GenericEditableTextCell({
-  fieldName,
+  viewField,
   editModeHorizontalAlign,
   placeholder,
 }: OwnProps) {
@@ -23,7 +25,7 @@ export function GenericEditableTextCell({
   const fieldValue = useRecoilValue<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
-      fieldName,
+      fieldName: viewField.metadata.fieldName,
     }),
   );
 
@@ -32,7 +34,8 @@ export function GenericEditableTextCell({
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeContent={
         <GenericEditableTextCellEditMode
-          fieldName={fieldName}
+          fieldName={viewField.metadata.fieldName}
+          viewFieldId={viewField.id}
           placeholder={placeholder}
         />
       }

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

@@ -7,15 +7,18 @@ import { tableEntityFieldFamilySelector } from '@/ui/table/states/tableEntityFie
 
 type OwnProps = {
   fieldName: string;
+  viewFieldId: string;
   placeholder?: string;
 };
 
 export function GenericEditableTextCellEditMode({
   fieldName,
+  viewFieldId,
   placeholder,
 }: OwnProps) {
   const currentRowEntityId = useCurrentRowEntityId();
 
+  // TODO: we could use a hook that would return the field value with the right type
   const [fieldValue, setFieldValue] = useRecoilState<string>(
     tableEntityFieldFamilySelector({
       entityId: currentRowEntityId ?? '',
@@ -31,7 +34,7 @@ export function GenericEditableTextCellEditMode({
     setFieldValue(newText);
 
     if (currentRowEntityId && updateField) {
-      updateField(currentRowEntityId, fieldName, newText);
+      updateField(currentRowEntityId, viewFieldId, newText);
     }
   }
 

front/src/modules/ui/table/states/EntityFieldMetadataContext.ts

@@ -1,6 +0,0 @@
-import { createContext } from 'react';
-
-import { EntityFieldMetadata } from '../types/EntityFieldMetadata';
-
-export const EntityFieldMetadataContext =
-  createContext<EntityFieldMetadata | null>(null);

front/src/modules/ui/table/states/ViewFieldContext.ts

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+import { ViewFieldDefinition } from '../types/ViewField';
+
+export const ViewFieldContext =
+  createContext<ViewFieldDefinition<unknown> | null>(null);

front/src/modules/ui/table/states/entityFieldMetadataArrayState.ts

@@ -1,8 +0,0 @@
-import { atom } from 'recoil';
-
-import { EntityFieldMetadata } from '../types/EntityFieldMetadata';
-
-export const entityFieldMetadataArrayState = atom<EntityFieldMetadata[]>({
-  key: 'entityFieldMetadataArrayState',
-  default: [],
-});

front/src/modules/ui/table/states/viewFieldsState.ts

@@ -0,0 +1,8 @@
+import { atom } from 'recoil';
+
+import { ViewFieldDefinition } from '../types/ViewField';
+
+export const viewFieldsState = atom<ViewFieldDefinition<unknown>[]>({
+  key: 'viewFieldsState',
+  default: [],
+});

front/src/modules/ui/table/types/EntityFieldMetadata.ts

@@ -1,13 +0,0 @@
-import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
-
-export type EntityFieldType = 'text' | 'relation';
-
-export type EntityFieldMetadata = {
-  fieldName: string;
-  label: string;
-  type: EntityFieldType;
-  icon: JSX.Element;
-  columnSize: number;
-  filterIcon?: JSX.Element;
-  relationType?: Entity; // TODO: condition this type with type === "relation"
-};

front/src/modules/ui/table/types/ViewField.ts

@@ -0,0 +1,36 @@
+import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
+
+export type ViewFieldType = 'text' | 'relation' | 'chip';
+
+export type ViewFieldTextMetadata = {
+  placeHolder: string;
+  fieldName: string;
+};
+
+export type ViewFieldRelationMetadata = {
+  relationType: Entity;
+  fieldName: string;
+};
+
+export type ViewFieldChipMetadata = {
+  relationType: Entity;
+  contentFieldName: string;
+  urlFieldName: string;
+};
+
+export type ViewFieldDefinition<
+  T extends
+    | ViewFieldTextMetadata
+    | ViewFieldRelationMetadata
+    | ViewFieldChipMetadata
+    | unknown,
+> = {
+  id: string;
+  columnLabel: string;
+  columnSize: number;
+  columnOrder: number;
+  columnIcon?: JSX.Element;
+  filterIcon?: JSX.Element;
+  type: ViewFieldType;
+  metadata: T;
+};

front/src/modules/ui/table/types/guards/isViewFieldChip.ts

@@ -0,0 +1,7 @@
+import { ViewFieldChipMetadata, ViewFieldDefinition } from '../ViewField';
+
+export function isViewFieldChip(
+  field: ViewFieldDefinition<unknown>,
+): field is ViewFieldDefinition<ViewFieldChipMetadata> {
+  return field.type === 'chip';
+}

front/src/modules/ui/table/types/guards/isViewFieldRelation.ts

@@ -0,0 +1,7 @@
+import { ViewFieldDefinition, ViewFieldRelationMetadata } from '../ViewField';
+
+export function isViewFieldRelation(
+  field: ViewFieldDefinition<unknown>,
+): field is ViewFieldDefinition<ViewFieldRelationMetadata> {
+  return field.type === 'relation';
+}

front/src/modules/ui/table/types/guards/isViewFieldText.ts

@@ -0,0 +1,7 @@
+import { ViewFieldDefinition, ViewFieldTextMetadata } from '../ViewField';
+
+export function isViewFieldText(
+  field: ViewFieldDefinition<unknown>,
+): field is ViewFieldDefinition<ViewFieldTextMetadata> {
+  return field.type === 'text';
+}

front/src/pages/companies/Companies.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 
 import { GET_COMPANIES } from '@/companies/queries';
 import { CompanyTable } from '@/companies/table/components/CompanyTable';
+import { CompanyTable as CompanyTableV2 } from '@/companies/table/components/CompanyTableV2';
 import { TableActionBarButtonCreateActivityCompany } from '@/companies/table/components/TableActionBarButtonCreateActivityCompany';
 import { TableActionBarButtonDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies';
 import { IconBuildingSkyscraper } from '@/ui/icon';
@@ -11,6 +12,7 @@ import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'
 import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
 import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
 import { TableContext } from '@/ui/table/states/TableContext';
+import { ACTIVATE_VIEW_FIELDS } from '~/App';
 import { useInsertOneCompanyMutation } from '~/generated/graphql';
 
 import { SEARCH_COMPANY_QUERY } from '../../modules/search/queries/search';
@@ -41,6 +43,10 @@ export function Companies() {
 
   const theme = useTheme();
 
+  const CompanyTableComponent = ACTIVATE_VIEW_FIELDS
+    ? CompanyTableV2
+    : CompanyTable;
+
   return (
     <>
       <WithTopBarContainer
@@ -50,7 +56,7 @@ export function Companies() {
       >
         <RecoilScope SpecificContext={TableContext}>
           <StyledTableContainer>
-            <CompanyTable />
+            <CompanyTableComponent />
           </StyledTableContainer>
           <EntityTableActionBar>
             <TableActionBarButtonCreateActivityCompany />

front/src/pages/people/People.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 
 import { GET_PEOPLE } from '@/people/queries';
 import { PeopleTable } from '@/people/table/components/PeopleTable';
+import { PeopleTable as PeopleTableV2 } from '@/people/table/components/PeopleTableV2';
 import { TableActionBarButtonCreateActivityPeople } from '@/people/table/components/TableActionBarButtonCreateActivityPeople';
 import { TableActionBarButtonDeletePeople } from '@/people/table/components/TableActionBarButtonDeletePeople';
 import { IconUser } from '@/ui/icon';
@@ -11,6 +12,7 @@ import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'
 import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
 import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
 import { TableContext } from '@/ui/table/states/TableContext';
+import { ACTIVATE_VIEW_FIELDS } from '~/App';
 import { useInsertOnePersonMutation } from '~/generated/graphql';
 
 const StyledTableContainer = styled.div`
@@ -35,6 +37,10 @@ export function People() {
 
   const theme = useTheme();
 
+  const PeopleTableComponent = ACTIVATE_VIEW_FIELDS
+    ? PeopleTableV2
+    : PeopleTable;
+
   return (
     <RecoilScope SpecificContext={TableContext}>
       <WithTopBarContainer
@@ -43,7 +49,7 @@ export function People() {
         onAddButtonClick={handleAddButtonClick}
       >
         <StyledTableContainer>
-          <PeopleTable />
+          <PeopleTableComponent />
         </StyledTableContainer>
         <EntityTableActionBar>
           <TableActionBarButtonCreateActivityPeople />