Changed record chip functionality from onClick to anchor tag

Shyesta · May 18, 2024 · 90e5ab3 · 90e5ab3
1 parent 0e525ca
commit 90e5ab3
Showing 1 changed file with 46 additions and 14 deletions.
diff --git a/packages/twenty-ui/src/display/chip/components/EntityChip.tsx b/packages/twenty-ui/src/display/chip/components/EntityChip.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import { isNonEmptyString } from '@sniptt/guards';
 
@@ -21,12 +19,14 @@ export type EntityChipProps = {
   maxWidth?: number;
 };
 
+type InnerEntityChipProps = EntityChipProps;
+
 export enum EntityChipVariant {
   Regular = 'regular',
   Transparent = 'transparent',
 }
 
-export const EntityChip = ({
+const InnerEntityChip = ({
   linkToEntity,
   entityId,
   name,
@@ -36,18 +36,9 @@ export const EntityChip = ({
   LeftIcon,
   className,
   maxWidth,
-}: EntityChipProps) => {
-  const navigate = useNavigate();
+}: InnerEntityChipProps) => {
   const theme = useTheme();
 
-  const handleLinkClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (isNonEmptyString(linkToEntity)) {
-      event.preventDefault();
-      event.stopPropagation();
-      navigate(linkToEntity);
-    }
-  };
-
   return (
     <Chip
       label={name}
@@ -72,9 +63,50 @@ export const EntityChip = ({
         )
       }
       clickable={!!linkToEntity}
-      onClick={handleLinkClick}
       className={className}
       maxWidth={maxWidth}
     />
   );
 };
+
+export const EntityChip = ({
+  linkToEntity,
+  entityId,
+  name,
+  avatarUrl,
+  avatarType = 'rounded',
+  variant = EntityChipVariant.Regular,
+  LeftIcon,
+  className,
+  maxWidth,
+}: EntityChipProps) => {
+  if (isNonEmptyString(linkToEntity)) {
+    return (
+      <a href={linkToEntity}>
+        <InnerEntityChip
+          entityId={entityId}
+          name={name}
+          avatarUrl={avatarUrl}
+          avatarType={avatarType}
+          variant={variant}
+          LeftIcon={LeftIcon}
+          className={className}
+          maxWidth={maxWidth}
+        />
+      </a>
+    );
+  } else {
+    return (
+      <InnerEntityChip
+        entityId={entityId}
+        name={name}
+        avatarUrl={avatarUrl}
+        avatarType={avatarType}
+        variant={variant}
+        LeftIcon={LeftIcon}
+        className={className}
+        maxWidth={maxWidth}
+      />
+    );
+  }
+};