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/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)
           ? {