Chore: Edit button on cells should be guessed by the field's type (#1952)

* created custom hook to get Icon Component as per field type

* Fix conflicts

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -169,7 +169,6 @@ export const CompanyBoardCard = () => {
                     Icon: viewField.Icon,
                     type: viewField.type,
                     metadata: viewField.metadata,
-                    buttonIcon: viewField.buttonIcon,
                     entityChipDisplayMapper: viewField.entityChipDisplayMapper,
                   },
                   useUpdateEntityMutation: useUpdateOnePipelineProgressMutation,

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

@@ -11,7 +11,6 @@ import {
   FieldURLMetadata,
 } from '@/ui/data/field/types/FieldMetadata';
 import {
-  IconArrowUpRight,
   IconBrandLinkedin,
   IconBrandX,
   IconBuildingSkyscraper,
@@ -19,7 +18,6 @@ import {
   IconLink,
   IconMap,
   IconMoneybag,
-  IconPencil,
   IconTarget,
   IconUserCircle,
   IconUsers,
@@ -43,7 +41,6 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
         placeHolder: 'Company Name',
       },
       isVisible: true,
-      buttonIcon: IconArrowUpRight,
       infoTooltipContent: 'The company name.',
       basePathToShowPage: '/companies/',
     } satisfies ColumnDefinition<FieldChipMetadata>,
@@ -59,7 +56,6 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
         placeHolder: 'example.com',
       },
       isVisible: true,
-      buttonIcon: IconPencil,
       infoTooltipContent:
         'The company website URL. We use this url to fetch the company icon.',
     } satisfies ColumnDefinition<FieldURLMetadata>,
@@ -125,7 +121,6 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
         placeHolder: 'LinkedIn URL',
       },
       isVisible: true,
-      buttonIcon: IconPencil,
       infoTooltipContent: 'The company Linkedin account.',
     } satisfies ColumnDefinition<FieldURLMetadata>,
     {
@@ -182,7 +177,6 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
         placeHolder: 'X',
       },
       isVisible: false,
-      buttonIcon: IconPencil,
       infoTooltipContent: 'The company Twitter account.',
     } satisfies ColumnDefinition<FieldURLMetadata>,
   ];
@@ -201,7 +195,6 @@ export const suppliersAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
         placeHolder: 'Company Name',
       },
       isVisible: true,
-      buttonIcon: IconArrowUpRight,
       infoTooltipContent: 'The company name.',
       basePathToShowPage: '/companies/',
     } satisfies ColumnDefinition<FieldTextMetadata>,
@@ -217,7 +210,6 @@ export const suppliersAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
         placeHolder: 'Company Name',
       },
       isVisible: true,
-      buttonIcon: IconArrowUpRight,
       infoTooltipContent: 'The company name.',
       basePathToShowPage: '/companies/',
     } satisfies ColumnDefinition<FieldTextMetadata>,

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

@@ -10,7 +10,6 @@ import {
   FieldURLMetadata,
 } from '@/ui/data/field/types/FieldMetadata';
 import {
-  IconArrowUpRight,
   IconBrandLinkedin,
   IconBrandX,
   IconBriefcase,
@@ -18,7 +17,6 @@ import {
   IconCalendarEvent,
   IconMail,
   IconMap,
-  IconPencil,
   IconPhone,
   IconUser,
 } from '@/ui/display/icon/index';
@@ -43,7 +41,6 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
         avatarUrlFieldName: 'avatarUrl',
         entityType: Entity.Person,
       },
-      buttonIcon: IconArrowUpRight,
       infoTooltipContent: 'Contact’s first and last name.',
       basePathToShowPage: '/person/',
     } satisfies ColumnDefinition<FieldDoubleTextChipMetadata>,
@@ -58,7 +55,6 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
         fieldName: 'email',
         placeHolder: 'Ema​il', // Hack: Fake character to prevent password-manager from filling the field
       },
-      buttonIcon: IconPencil,
       infoTooltipContent: 'Contact’s Email.',
     } satisfies ColumnDefinition<FieldEmailMetadata>,
     {
@@ -92,7 +88,6 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
         fieldName: 'phone',
         placeHolder: 'Phon​e', // Hack: Fake character to prevent password-manager from filling the field
       },
-      buttonIcon: IconPencil,
       infoTooltipContent: 'Contact’s phone number.',
     } satisfies ColumnDefinition<FieldPhoneMetadata>,
     {
@@ -144,7 +139,6 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
         fieldName: 'linkedinUrl',
         placeHolder: 'LinkedIn',
       },
-      buttonIcon: IconPencil,
       infoTooltipContent: 'Contact’s Linkedin account.',
     } satisfies ColumnDefinition<FieldURLMetadata>,
     {
@@ -158,7 +152,6 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
         fieldName: 'xUrl',
         placeHolder: 'X',
       },
-      buttonIcon: IconPencil,
       infoTooltipContent: 'Contact’s Twitter account.',
     } satisfies ColumnDefinition<FieldURLMetadata>,
   ];

front/src/modules/pipeline/constants/pipelineAvailableFieldDefinitions.tsx

@@ -8,7 +8,6 @@ import {
 import {
   IconCalendarEvent,
   IconCurrencyDollar,
-  IconPencil,
   IconProgressCheck,
   IconUser,
 } from '@/ui/display/icon';
@@ -69,7 +68,6 @@ export const pipelineAvailableFieldDefinitions: BoardFieldDefinition<FieldMetada
         useEditButton: true,
       },
       isVisible: true,
-      buttonIcon: IconPencil,
       infoTooltipContent: 'Primary contact within the company.',
       entityChipDisplayMapper: (dataObject: Person) => {
         return {

front/src/modules/ui/data/data-table/table-cell/components/TableCell.tsx

@@ -2,10 +2,12 @@ import { useContext } from 'react';
 
 import { FieldDisplay } from '@/ui/data/field/components/FieldDisplay';
 import { FieldInput } from '@/ui/data/field/components/FieldInput';
-import { FieldContext } from '@/ui/data/field/contexts/FieldContext';
+import { useGetButtonIcon } from '@/ui/data/field/hooks/useGetButtonIcon';
 import { FieldInputEvent } from '@/ui/data/field/types/FieldInputEvent';
+import { IconArrowUpRight } from '@/ui/display/icon';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
+import { ColumnIndexContext } from '../../contexts/ColumnIndexContext';
 import { useMoveSoftFocus } from '../../hooks/useMoveSoftFocus';
 import { useTableCell } from '../hooks/useTableCell';
 
@@ -16,7 +18,9 @@ export const TableCell = ({
 }: {
   customHotkeyScope: HotkeyScope;
 }) => {
-  const { fieldDefinition } = useContext(FieldContext);
+  const isFirstColumn = useContext(ColumnIndexContext) === 0;
+
+  const buttonIcon = useGetButtonIcon();
 
   const { closeTableCell } = useTableCell();
 
@@ -68,7 +72,7 @@ export const TableCell = ({
         />
       }
       nonEditModeContent={<FieldDisplay />}
-      buttonIcon={fieldDefinition.buttonIcon}
+      buttonIcon={isFirstColumn ? IconArrowUpRight : buttonIcon}
     ></TableCellContainer>
   );
 };

front/src/modules/ui/data/field/hooks/useGetButtonIcon.ts

@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+
+import { IconPencil } from '@/ui/display/icon';
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+
+import { FieldContext } from '../contexts/FieldContext';
+import { isFieldEmail } from '../types/guards/isFieldEmail';
+import { isFieldPhone } from '../types/guards/isFieldPhone';
+import { isFieldRelation } from '../types/guards/isFieldRelation';
+import { isFieldURL } from '../types/guards/isFieldURL';
+
+export const useGetButtonIcon = (): IconComponent | undefined => {
+  const { fieldDefinition } = useContext(FieldContext);
+  if (
+    isFieldURL(fieldDefinition) ||
+    isFieldEmail(fieldDefinition) ||
+    isFieldPhone(fieldDefinition) ||
+    isFieldRelation(fieldDefinition)
+  ) {
+    return IconPencil;
+  }
+};

front/src/modules/ui/data/field/types/FieldDefinition.ts

@@ -10,7 +10,6 @@ export type FieldDefinition<T extends FieldMetadata> = {
   Icon?: IconComponent;
   type: FieldType;
   metadata: T;
-  buttonIcon?: IconComponent;
   basePathToShowPage?: string;
   infoTooltipContent?: string;
   entityChipDisplayMapper?: (dataObject: any) => {

front/src/modules/ui/data/inline-cell/components/InlineCell.tsx

@@ -1,14 +1,15 @@
 import { useContext } from 'react';
 
-import { FieldDisplay } from '@/ui/data/field/components/FieldDisplay';
-import { FieldInput } from '@/ui/data/field/components/FieldInput';
-import { FieldContext } from '@/ui/data/field/contexts/FieldContext';
-import { useIsFieldEmpty } from '@/ui/data/field/hooks/useIsFieldEmpty';
-import { useIsFieldInputOnly } from '@/ui/data/field/hooks/useIsFieldInputOnly';
-import { FieldInputEvent } from '@/ui/data/field/types/FieldInputEvent';
-import { isFieldRelation } from '@/ui/data/field/types/guards/isFieldRelation';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
 
+import { FieldDisplay } from '../../field/components/FieldDisplay';
+import { FieldInput } from '../../field/components/FieldInput';
+import { FieldContext } from '../../field/contexts/FieldContext';
+import { useGetButtonIcon } from '../../field/hooks/useGetButtonIcon';
+import { useIsFieldEmpty } from '../../field/hooks/useIsFieldEmpty';
+import { useIsFieldInputOnly } from '../../field/hooks/useIsFieldInputOnly';
+import { FieldInputEvent } from '../../field/types/FieldInputEvent';
+import { isFieldRelation } from '../../field/types/guards/isFieldRelation';
 import { useInlineCell } from '../hooks/useInlineCell';
 
 import { InlineCellContainer } from './InlineCellContainer';
@@ -16,6 +17,8 @@ import { InlineCellContainer } from './InlineCellContainer';
 export const InlineCell = () => {
   const { fieldDefinition } = useContext(FieldContext);
 
+  const buttonIcon = useGetButtonIcon();
+
   const isFieldEmpty = useIsFieldEmpty();
 
   const isFieldInputOnly = useIsFieldInputOnly();
@@ -57,7 +60,7 @@ export const InlineCell = () => {
 
   return (
     <InlineCellContainer
-      buttonIcon={fieldDefinition.buttonIcon}
+      buttonIcon={buttonIcon}
       customEditHotkeyScope={
         isFieldRelation(fieldDefinition)
           ? {

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

@@ -13,7 +13,6 @@ import {
   IconCalendar,
   IconLink,
   IconMap,
-  IconPencil,
   IconTarget,
   IconUserCircle,
   IconUsers,
@@ -31,7 +30,6 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
       fieldName: 'domainName',
       placeHolder: 'URL',
     },
-    buttonIcon: IconPencil,
   } satisfies FieldDefinition<FieldURLMetadata>,
   {
     key: 'accountOwner',
@@ -88,7 +86,6 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
       fieldName: 'xUrl',
       placeHolder: 'X',
     },
-    buttonIcon: IconPencil,
   } satisfies FieldDefinition<FieldURLMetadata>,
   {
     key: 'createdAt',

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

@@ -15,7 +15,6 @@ import {
   IconCalendar,
   IconMail,
   IconMap,
-  IconPencil,
   IconPhone,
 } from '@/ui/display/icon';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
@@ -38,7 +37,6 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
     name: 'Company',
     Icon: IconBuildingSkyscraper,
     type: 'relation',
-    buttonIcon: IconPencil,
     metadata: {
       fieldName: 'company',
       relationType: Entity.Company,
@@ -60,7 +58,6 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
       fieldName: 'phone',
       placeHolder: 'Phone',
     },
-    buttonIcon: IconPencil,
   } satisfies FieldDefinition<FieldPhoneMetadata>,
   {
     key: 'jobTitle',
@@ -91,7 +88,6 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
       fieldName: 'linkedinUrl',
       placeHolder: 'Linkedin URL',
     },
-    buttonIcon: IconPencil,
   } satisfies FieldDefinition<FieldURLMetadata>,
   {
     key: 'xUrl',
@@ -102,7 +98,6 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
       fieldName: 'xUrl',
       placeHolder: 'X URL',
     },
-    buttonIcon: IconPencil,
   } satisfies FieldDefinition<FieldURLMetadata>,
   {
     key: 'createdAt',