Add link to company page (#727)

* Add link to company page

* Have company chip background color matchin the card's

* Revert "Have company chip background color matchin the card's"

This reverts commit 8e9575fd933f9efb8d6614ec7287d6be28b81f7e.

* Create chip variants

* Lint

* code style

* Fix tests

* Fix tests

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/companies/__stories__/Board.stories.tsx

@@ -1,3 +1,4 @@
+import { MemoryRouter } from 'react-router-dom';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { EntityBoard } from '@/pipeline/components/EntityBoard';
@@ -17,12 +18,15 @@ type Story = StoryObj<typeof EntityBoard>;
 
 export const OneColumnBoard: Story = {
   render: getRenderWrapperForComponent(
-    <EntityBoard
-      boardOptions={opportunitiesBoardOptions}
-      updateSorts={() => {
-        return;
-      }}
-    />,
+    <MemoryRouter>
+      <EntityBoard
+        boardOptions={opportunitiesBoardOptions}
+        updateSorts={() => {
+          return;
+        }}
+      />
+      ,
+    </MemoryRouter>,
   ),
   parameters: {
     msw: graphqlMocks,

front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx

@@ -1,3 +1,4 @@
+import { MemoryRouter } from 'react-router-dom';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard';
@@ -15,7 +16,11 @@ export default meta;
 type Story = StoryObj<typeof CompanyBoardCard>;
 
 const FakeSelectableCompanyBoardCard = () => {
-  return <CompanyBoardCard />;
+  return (
+    <MemoryRouter>
+      <CompanyBoardCard />
+    </MemoryRouter>
+  );
 };
 
 export const CompanyCompanyBoardCard: Story = {

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -11,6 +11,7 @@ import { pipelineProgressIdScopedState } from '@/pipeline/states/pipelineProgres
 import { selectedBoardCardsState } from '@/pipeline/states/selectedBoardCardsState';
 import { BoardCardEditableFieldDate } from '@/ui/board/card-field/components/BoardCardEditableFieldDate';
 import { BoardCardEditableFieldText } from '@/ui/board/card-field/components/BoardCardEditableFieldText';
+import { ChipVariant } from '@/ui/chip/components/EntityChip';
 import { IconCurrencyDollar } from '@/ui/icon';
 import { IconCalendarEvent } from '@/ui/icon';
 import { Checkbox } from '@/ui/input/components/Checkbox';
@@ -21,6 +22,8 @@ import {
 } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 
+import { CompanyChip } from './CompanyChip';
+
 const StyledBoardCard = styled.div<{ selected: boolean }>`
   background-color: ${({ theme, selected }) =>
     selected ? theme.selectedCard : theme.background.secondary};
@@ -129,11 +132,13 @@ export function CompanyBoardCard() {
     <StyledBoardCardWrapper>
       <StyledBoardCard selected={selected}>
         <StyledBoardCardHeader>
-          <img
-            src={getLogoUrlFromDomainName(company.domainName).toString()}
-            alt={`${company.name}-company-logo`}
+          <CompanyChip
+            id={company.id}
+            name={company.name}
+            clickable
+            picture={getLogoUrlFromDomainName(company.domainName)}
+            variant={ChipVariant.transparent}
           />
-          <span>{company.name}</span>
           <div style={{ display: 'flex', flex: 1 }} />
           <Checkbox checked={selected} onChange={handleCheckboxChange} />
         </StyledBoardCardHeader>

front/src/modules/companies/components/CompanyChip.tsx

@@ -1,13 +1,20 @@
-import { EntityChip } from '@/ui/chip/components/EntityChip';
+import { ChipVariant, EntityChip } from '@/ui/chip/components/EntityChip';
 
 type OwnProps = {
   id: string;
   name: string;
   picture?: string;
   clickable?: boolean;
+  variant?: ChipVariant;
 };
 
-export function CompanyChip({ id, name, picture, clickable }: OwnProps) {
+export function CompanyChip({
+  id,
+  name,
+  picture,
+  clickable,
+  variant = ChipVariant.opaque,
+}: OwnProps) {
   return (
     <EntityChip
       entityId={id}
@@ -16,6 +23,7 @@ export function CompanyChip({ id, name, picture, clickable }: OwnProps) {
       avatarType="squared"
       clickable={clickable}
       picture={picture}
+      variant={variant}
     />
   );
 }

front/src/modules/ui/chip/components/EntityChip.tsx

@@ -5,6 +5,11 @@ import styled from '@emotion/styled';
 
 import { Avatar, AvatarType } from '@/users/components/Avatar';
 
+export enum ChipVariant {
+  opaque = 'opaque',
+  transparent = 'transparent',
+}
+
 const baseStyle = ({ theme }: { theme: Theme }) => `
   align-items: center;
   border-radius: ${theme.spacing(1)};
@@ -26,12 +31,15 @@ const baseStyle = ({ theme }: { theme: Theme }) => `
   white-space: nowrap;
 `;
 
-const StyledContainerLink = styled.div`
+const StyledContainerLink = styled.div<{ variant: string }>`
   ${baseStyle}
-
-  background-color: ${(props) => props.theme.background.tertiary};
+  background-color: ${({ theme, variant }) =>
+    variant === ChipVariant.opaque ? theme.background.tertiary : 'transparent'};
   :hover {
-    filter: brightness(95%);
+    background-color: ${({ variant, theme }) =>
+      variant === ChipVariant.opaque
+        ? theme.background.quaternary
+        : theme.background.transparent.light};
   }
 `;
 
@@ -52,6 +60,7 @@ type OwnProps = {
   picture?: string;
   clickable?: boolean;
   avatarType?: AvatarType;
+  variant?: ChipVariant;
 };
 
 export function EntityChip({
@@ -61,6 +70,7 @@ export function EntityChip({
   picture,
   clickable,
   avatarType = 'rounded',
+  variant = ChipVariant.opaque,
 }: OwnProps) {
   const navigate = useNavigate();
 
@@ -72,7 +82,11 @@ export function EntityChip({
   }
 
   return clickable && linkToEntity ? (
-    <StyledContainerLink data-testid="entity-chip" onClick={handleLinkClick}>
+    <StyledContainerLink
+      data-testid="entity-chip"
+      onClick={handleLinkClick}
+      variant={variant}
+    >
       <Avatar
         avatarUrl={picture}
         colorId={entityId}