[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

@ -0,0 +1,53 @@
import styled from '@emotion/styled';
import {
Chip,
ChipAccent,
ChipProps,
ChipSize,
ChipVariant,
} from '@ui/display/chip/components/Chip';
import { MouseEvent } from 'react';
import { Link } from 'react-router-dom';
export type LinkChipProps = Omit<
ChipProps,
'onClick' | 'disabled' | 'clickable'
> & {
to: string;
onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
};
// Ideally we would use the UndecoratedLink component from @ui/navigation
// but it led to a bug probably linked to circular dependencies, which was hard to solve
const StyledLink = styled(Link)`
text-decoration: none;
`;
export const LinkChip = ({
to,
size = ChipSize.Small,
label,
variant = ChipVariant.Regular,
leftComponent = null,
rightComponent = null,
accent = ChipAccent.TextPrimary,
className,
maxWidth,
onClick,
}: LinkChipProps) => {
return (
<StyledLink to={to} onClick={onClick}>
<Chip
size={size}
label={label}
clickable={true}
variant={variant}
leftComponent={leftComponent}
rightComponent={rightComponent}
accent={accent}
className={className}
maxWidth={maxWidth}
/>
</StyledLink>
);
};