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>

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, theme }) =>
-  ${({ to }) =>
     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>

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,10 +208,15 @@ 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}
     >
+      <UndecoratedLink to={linkToNavigate}>
         <StyledNameTableCell>
           {!!Icon && (
             <Icon
@@ -223,6 +229,8 @@ export const SettingsObjectFieldItemTableRow = ({
             {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 &&
+            isRelatedObjectLinkable
-            !relationObjectMetadataItem.isSystem
               ? `/settings/objects/${getObjectSlug(relationObjectMetadataItem)}`
               : undefined
           }
           value={fieldType}
+          onClick={(e) => {
+            if (isRelatedObjectLinkable) {
+              e.stopPropagation();
+            }
+          }}
         />
       </TableCell>
       <StyledIconTableCell>