Changed record chip functionality from onClick to anchor tag (#5462)

[#4422](https://github.com/twentyhq/twenty/issues/4422)

Demo:



https://github.com/twentyhq/twenty/assets/155670906/f8027ab2-c579-45f7-9f08-f4441a346ae7



Within the demo, we show the various areas in which the Command/CTRL +
Click functionality works. The table cells within the People and
Companies tab open within both the current tab and new tab due to
unchanged functionality within RecordTableCell. We did this to ensure we
could get a PR within by the end of the week.

In this commit, we ONLY edited EntityChip.tsx. We did this by:

- Removing useNavigate() and handleLinkClick/onClick functionality

- Wrapping InnerEntityChip in an anchor tag

This allowed for Command/CTRL + Click functionality to work. Clickable
left cells on tables, left side menu, and data model navigation
files/areas DID NOT get updated.

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconComponent, IconTwentyStar } from 'twenty-ui';
@@ -7,13 +8,16 @@ import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSetti
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 type SettingsObjectFieldDataTypeProps = {
-  onClick?: () => void;
+  to?: string;
   Icon?: IconComponent;
   label?: string;
   value: SettingsSupportedFieldType;
 };
 
-const StyledDataType = styled.div<{ value: SettingsSupportedFieldType }>`
+const StyledDataType = styled.div<{
+  value: SettingsSupportedFieldType;
+  to?: string;
+}>`
   align-items: center;
   border: 1px solid transparent;
   border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -23,9 +27,10 @@ const StyledDataType = styled.div<{ value: SettingsSupportedFieldType }>`
   height: 20px;
   overflow: hidden;
   padding: 0 ${({ theme }) => theme.spacing(2)};
+  text-decoration: none;
 
-  ${({ onClick }) =>
-    onClick
+  ${({ to }) =>
+    to
       ? css`
           cursor: pointer;
         `
@@ -47,7 +52,7 @@ const StyledLabelContainer = styled.div`
 `;
 
 export const SettingsObjectFieldDataType = ({
-  onClick,
+  to,
   value,
   Icon: IconFromProps,
   label: labelFromProps,
@@ -64,7 +69,7 @@ export const SettingsObjectFieldDataType = ({
   `;
 
   return (
-    <StyledDataType onClick={onClick} value={value}>
+    <StyledDataType as={to ? Link : 'div'} to={to} value={value}>
       <StyledIcon size={theme.icon.size.sm} />
       <StyledLabelContainer>{label}</StyledLabelContainer>
     </StyledDataType>

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx

@@ -1,5 +1,4 @@
 import { ReactNode, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Nullable, useIcons } from 'twenty-ui';
@@ -22,6 +21,7 @@ type SettingsObjectFieldItemTableRowProps = {
   identifierType?: Nullable<FieldIdentifierType>;
   variant?: 'field-type' | 'identifier';
   isRemoteObjectField?: boolean;
+  to?: string;
 };
 
 export const StyledObjectFieldTableRow = styled(TableRow)`
@@ -44,11 +44,11 @@ export const SettingsObjectFieldItemTableRow = ({
   identifierType,
   variant = 'field-type',
   isRemoteObjectField,
+  to,
 }: SettingsObjectFieldItemTableRowProps) => {
   const theme = useTheme();
   const { getIcon } = useIcons();
   const Icon = getIcon(fieldMetadataItem.icon);
-  const navigate = useNavigate();
 
   const getRelationMetadata = useGetRelationMetadata();
 
@@ -68,7 +68,7 @@ export const SettingsObjectFieldItemTableRow = ({
     : undefined;
 
   return (
-    <StyledObjectFieldTableRow>
+    <StyledObjectFieldTableRow to={to}>
       <StyledNameTableCell>
         {!!Icon && (
           <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
@@ -90,15 +90,10 @@ export const SettingsObjectFieldItemTableRow = ({
         <SettingsObjectFieldDataType
           Icon={RelationIcon}
           label={relationObjectMetadataItem?.labelPlural}
-          onClick={
+          to={
             relationObjectMetadataItem?.namePlural &&
             !relationObjectMetadataItem.isSystem
-              ? () =>
-                  navigate(
-                    `/settings/objects/${getObjectSlug(
-                      relationObjectMetadataItem,
-                    )}`,
-                  )
+              ? `/settings/objects/${getObjectSlug(relationObjectMetadataItem)}`
               : undefined
           }
           value={fieldType}

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx

@@ -13,7 +13,7 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
 type SettingsObjectItemTableRowProps = {
   action: ReactNode;
   objectItem: ObjectMetadataItem;
-  onClick?: () => void;
+  to?: string;
 };
 
 export const StyledObjectTableRow = styled(TableRow)`
@@ -33,7 +33,7 @@ const StyledActionTableCell = styled(TableCell)`
 export const SettingsObjectItemTableRow = ({
   action,
   objectItem,
-  onClick,
+  to,
 }: SettingsObjectItemTableRowProps) => {
   const theme = useTheme();
 
@@ -45,7 +45,7 @@ export const SettingsObjectItemTableRow = ({
   const objectTypeLabel = getObjectTypeLabel(objectItem);
 
   return (
-    <StyledObjectTableRow key={objectItem.namePlural} onClick={onClick}>
+    <StyledObjectTableRow key={objectItem.namePlural} to={to}>
       <StyledNameTableCell>
         {!!Icon && (
           <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />