[BUGFIX] Account owner should not be clickable & [Refactor] Chip.tsx links (#10359)

# Introduction

closes #10196 
Initially fixing the `Account Owner` record field value should not be
clickable and redirects on current page bug.
This has been fixed computing whereas the current filed is a workspace
member dynamically rendering a stale Chip components instead of an
interactive one

## Refactor
Refactored the `AvatarChip` `to` props logic to be scoped to lower level
scope `Chip`.
Now we have `LinkChip` `Chip`, `LinkAvatarChip` and `AvatarChip` all
exported from twenty-ui.

The caller has to determine which one to call from the design system

## New rule regarding chip links
As discussed with @charlesBochet and @FelixMalfait 
A chip link will now ***always*** have `to` defined. ( and optionally an
`onClick` ).
`ChipLinks` cannot be used as buttons anymore

## Factorization
Deleted the `RecordIndexRecordChip.tsx` file ( aka
`RecordIdentifierChip` component ) that was duplicating some logic,
refactored the `RecordChip` in order to handle what was covered by
`RecordIdentifierChip`

## Conclusion
As always any suggestions are more than welcomed ! Took few opinionated
decision/refactor regarding nested long ternaries rendering `ReactNode`
elements

## Misc


https://github.com/user-attachments/assets/8ef11fb2-7ba6-4e96-bd59-b0be5a425156

---------

Co-authored-by: Mohammed Razak <mohammedrazak2001@gmail.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Paul Rastoin
2025-02-25 15:36:17 +01:00
committed by GitHub
parent fc0e98b53e
commit 89e11b4626
24 changed files with 387 additions and 302 deletions

View File

@ -125,7 +125,7 @@ export const CalendarEventDetails = ({
size={ChipSize.Large}
variant={ChipVariant.Highlighted}
clickable={false}
leftComponent={<IconCalendarEvent size={theme.icon.size.md} />}
leftComponent={() => <IconCalendarEvent size={theme.icon.size.md} />}
label="Event"
/>
<StyledHeader>

View File

@ -51,16 +51,20 @@ export const MessageThreadSubscribersChip = ({
<Chip
label={label}
variant={ChipVariant.Highlighted}
leftComponent={
isOnlyOneSubscriber ? (
<Avatar
avatarUrl={firstAvatarUrl}
placeholderColorSeed={firstAvatarColorSeed}
placeholder={firstAvatarPlaceholder}
size="md"
type={'rounded'}
/>
) : (
leftComponent={() => {
if (isOnlyOneSubscriber) {
return (
<Avatar
avatarUrl={firstAvatarUrl}
placeholderColorSeed={firstAvatarColorSeed}
placeholder={firstAvatarPlaceholder}
size="md"
type={'rounded'}
/>
);
}
return (
<AvatarGroup
avatars={subscriberNames.map((name, index) => (
<Avatar
@ -71,9 +75,9 @@ export const MessageThreadSubscribersChip = ({
/>
))}
/>
)
}
rightComponent={<IconChevronDown size={theme.icon.size.sm} />}
);
}}
rightComponent={() => <IconChevronDown size={theme.icon.size.sm} />}
clickable
/>
);

View File

@ -16,7 +16,11 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useMemo, useState } from 'react';
import { isDefined } from 'twenty-shared';
import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui';
import {
IconCalendar,
OverflowingTextWithTooltip,
isModifiedEvent,
} from 'twenty-ui';
import { formatToHumanReadableDate } from '~/utils/date-utils';
import { getFileNameAndExtension } from '~/utils/file/getFileNameAndExtension';
@ -145,7 +149,7 @@ export const AttachmentRow = ({
const handleOpenDocument = (e: React.MouseEvent) => {
// Cmd/Ctrl+click opens new tab, right click opens context menu
if (e.metaKey || e.ctrlKey || e.button === 2) {
if (isModifiedEvent(e) || e.button === 2) {
return;
}