Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix array and links display #8671

Merged
merged 4 commits into from
Nov 22, 2024
Merged

Fix array and links display #8671

merged 4 commits into from
Nov 22, 2024

Conversation

martmull
Copy link
Contributor

Before

image
image

After

image
image

@martmull martmull changed the title Fix array display Fix array and links display Nov 22, 2024
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR Summary

This PR simplifies and standardizes the display of arrays and links across the application by removing unnecessary styling complexity and focus state handling.

  • Replaced custom styled tags with Chip components in packages/twenty-front/src/modules/ui/field/display/components/ArrayDisplay.tsx
  • Removed focus state handling from both ArrayFieldDisplay and LinksFieldDisplay components
  • Improved URL type checking regex patterns in packages/twenty-front/src/utils/checkUrlType.ts for better LinkedIn and Twitter URL handling
  • Standardized link display using ExpandableList with RoundedLink and SocialLink components
  • Removed unused isInputDisplay prop from ArrayFieldMenuItem component

6 file(s) reviewed, 4 comment(s)
Edit PR Review Bot Settings | Greptile

Comment on lines +22 to 24
{value?.map((item) => (
<Chip variant={ChipVariant.Highlighted} label={item} />
))}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

logic: Missing key prop for mapped elements

return isFocused ? (
<ExpandableList isChipCountDisplayed>
return (
<ExpandableList>
{links.map(({ url, label, type }, index) =>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Using array index as key may cause issues with React reconciliation if links are reordered

url,
)
) {
if (/^(https?:\/\/)?(www\.)?linkedin\.com(\/[\w\-\/?#:.%=&]*)?$/.test(url)) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

logic: The new regex pattern allows invalid LinkedIn URLs that end with .linkedin.com (e.g. fake.linkedin.com)

@martmull martmull enabled auto-merge (squash) November 22, 2024 10:24
Copy link
Member

@Weiko Weiko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@martmull martmull merged commit 76be1df into main Nov 22, 2024
19 checks passed
@martmull martmull deleted the fix-array-display branch November 22, 2024 11:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants