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/developers/components/SettingsApiKeysFieldItemTableRow.tsx

@@ -26,15 +26,15 @@ const StyledIconChevronRight = styled(IconChevronRight)`
 
 export const SettingsApiKeysFieldItemTableRow = ({
   fieldItem,
-  onClick,
+  to,
 }: {
   fieldItem: ApiFieldItem;
-  onClick: () => void;
+  to: string;
 }) => {
   const theme = useTheme();
 
   return (
-    <StyledApisFieldTableRow onClick={() => onClick()}>
+    <StyledApisFieldTableRow to={to}>
       <StyledNameTableCell>{fieldItem.name}</StyledNameTableCell>
       <TableCell
         color={

packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx

@@ -1,4 +1,3 @@
-import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -21,8 +20,6 @@ const StyledTableRow = styled(TableRow)`
 `;
 
 export const SettingsApiKeysTable = () => {
-  const navigate = useNavigate();
-
   const { records: apiKeys } = useFindManyRecords<ApiKey>({
     objectNameSingular: CoreObjectNameSingular.ApiKey,
     filter: { revokedAt: { is: 'NULL' } },
@@ -41,9 +38,7 @@ export const SettingsApiKeysTable = () => {
             <SettingsApiKeysFieldItemTableRow
               key={fieldItem.id}
               fieldItem={fieldItem as ApiFieldItem}
-              onClick={() => {
-                navigate(`/settings/developers/api-keys/${fieldItem.id}`);
-              }}
+              to={`/settings/developers/api-keys/${fieldItem.id}`}
             />
           ))}
         </StyledTableBody>

packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx

@@ -28,15 +28,15 @@ const StyledIconChevronRight = styled(IconChevronRight)`
 
 export const SettingsDevelopersWebhookTableRow = ({
   fieldItem,
-  onClick,
+  to,
 }: {
   fieldItem: Webhook;
-  onClick: () => void;
+  to: string;
 }) => {
   const theme = useTheme();
 
   return (
-    <StyledApisFieldTableRow onClick={onClick}>
+    <StyledApisFieldTableRow to={to}>
       <StyledUrlTableCell>{fieldItem.targetUrl}</StyledUrlTableCell>
       <StyledIconTableCell>
         <StyledIconChevronRight

packages/twenty-front/src/modules/settings/developers/components/SettingsReadDocumentationButton.tsx

@@ -10,9 +10,8 @@ export const SettingsReadDocumentationButton = () => {
       accent="default"
       size="small"
       Icon={IconBook2}
-      onClick={() => {
-        window.open('https://docs.twenty.com');
-      }}
+      to={'https://docs.twenty.com'}
+      target="_blank"
     ></Button>
   );
 };

packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx

@@ -1,4 +1,3 @@
-import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -19,8 +18,6 @@ const StyledTableRow = styled(TableRow)`
 `;
 
 export const SettingsWebhooksTable = () => {
-  const navigate = useNavigate();
-
   const { records: webhooks } = useFindManyRecords<Webhook>({
     objectNameSingular: CoreObjectNameSingular.Webhook,
   });
@@ -37,11 +34,7 @@ export const SettingsWebhooksTable = () => {
             <SettingsDevelopersWebhookTableRow
               key={webhookFieldItem.id}
               fieldItem={webhookFieldItem}
-              onClick={() => {
-                navigate(
-                  `/settings/developers/webhooks/${webhookFieldItem.id}`,
-                );
-              }}
+              to={`/settings/developers/webhooks/${webhookFieldItem.id}`}
             />
           ))}
         </StyledTableBody>