From d8626b1304e9e63e3563e3aad7d05b884489ab0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix.malfait@gmail.com>
Date: Mon, 18 Nov 2024 14:59:50 +0100
Subject: [PATCH] Fix 'Error in devtools while checking fields of object'
 (#8554)

Fixes https://github.com/twentyhq/twenty/issues/8298

---------

Co-authored-by: Devessier <baptiste@devessier.fr>
---
 .../SettingsObjectFieldDataType.tsx           | 23 +++++-----
 .../SettingsObjectFieldItemTableRow.tsx       | 42 ++++++++++++-------
 2 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
index bfb2764193..8b157b2751 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
@@ -5,7 +5,6 @@ import { IconComponent, IconTwentyStar } from 'twenty-ui';
 
 import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
 import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSettingsFieldTypeConfig';
-import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 type SettingsObjectFieldDataTypeProps = {
   to?: string;
@@ -13,6 +12,7 @@ type SettingsObjectFieldDataTypeProps = {
   label?: string;
   labelDetail?: string;
   value: SettingsFieldType;
+  onClick?: (event: React.MouseEvent) => void;
 };
 
 const StyledDataType = styled.div<{
@@ -28,19 +28,16 @@ const StyledDataType = styled.div<{
   height: 20px;
   overflow: hidden;
   text-decoration: none;
-
-  ${({ to }) =>
+  ${({ to, theme }) =>
     to
       ? css`
           cursor: pointer;
-        `
-      : ''}
-
-  ${({ value, theme }) =>
-    value === FieldMetadataType.Relation
-      ? css`
           color: ${theme.font.color.secondary};
           text-decoration: underline;
+
+          &:hover {
+            color: ${theme.font.color.primary};
+          }
         `
       : ''}
 `;
@@ -60,6 +57,7 @@ export const SettingsObjectFieldDataType = ({
   Icon: IconFromProps,
   label: labelFromProps,
   labelDetail,
+  onClick,
 }: SettingsObjectFieldDataTypeProps) => {
   const theme = useTheme();
 
@@ -73,7 +71,12 @@ export const SettingsObjectFieldDataType = ({
   `;
 
   return (
-    <StyledDataType as={to ? Link : 'div'} to={to} value={value}>
+    <StyledDataType
+      as={to ? Link : 'div'}
+      to={to}
+      value={value}
+      onClick={onClick}
+    >
       <StyledIcon size={theme.icon.size.sm} />
       <StyledLabelContainer>
         {label} <StyledSpan>{labelDetail && `· ${labelDetail}`}</StyledSpan>
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
index 23c271d8a7..4ac74f4f6c 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
@@ -27,6 +27,7 @@ import {
   IconMinus,
   IconPlus,
   LightIconButton,
+  UndecoratedLink,
   isDefined,
   useIcons,
 } from 'twenty-ui';
@@ -207,22 +208,29 @@ export const SettingsObjectFieldItemTableRow = ({
 
   if (!isFieldTypeSupported) return null;
 
+  const isRelatedObjectLinkable =
+    isDefined(relationObjectMetadataItem?.namePlural) &&
+    !relationObjectMetadataItem.isSystem;
+
   return (
     <StyledObjectFieldTableRow
-      to={mode === 'view' ? linkToNavigate : undefined}
+      onClick={mode === 'view' ? () => navigate(linkToNavigate) : undefined}
     >
-      <StyledNameTableCell>
-        {!!Icon && (
-          <Icon
-            style={{ minWidth: theme.icon.size.md }}
-            size={theme.icon.size.md}
-            stroke={theme.icon.stroke.sm}
-          />
-        )}
-        <StyledNameLabel title={fieldMetadataItem.label}>
-          {fieldMetadataItem.label}
-        </StyledNameLabel>
-      </StyledNameTableCell>
+      <UndecoratedLink to={linkToNavigate}>
+        <StyledNameTableCell>
+          {!!Icon && (
+            <Icon
+              style={{ minWidth: theme.icon.size.md }}
+              size={theme.icon.size.md}
+              stroke={theme.icon.stroke.sm}
+            />
+          )}
+          <StyledNameLabel title={fieldMetadataItem.label}>
+            {fieldMetadataItem.label}
+          </StyledNameLabel>
+        </StyledNameTableCell>
+      </UndecoratedLink>
+
       <TableCell>{typeLabel}</TableCell>
       <TableCell>
         <SettingsObjectFieldDataType
@@ -237,12 +245,16 @@ export const SettingsObjectFieldItemTableRow = ({
             fieldMetadataItem.settings?.type === 'percentage' ? '%' : undefined
           }
           to={
-            relationObjectMetadataItem?.namePlural &&
-            !relationObjectMetadataItem.isSystem
+            isRelatedObjectLinkable
               ? `/settings/objects/${getObjectSlug(relationObjectMetadataItem)}`
               : undefined
           }
           value={fieldType}
+          onClick={(e) => {
+            if (isRelatedObjectLinkable) {
+              e.stopPropagation();
+            }
+          }}
         />
       </TableCell>
       <StyledIconTableCell>