fix: clickable org if there is any @ text in user bio #951
Conversation
Signed-off-by: Akash Jaiswal <[email protected]>
Signed-off-by: Akash Jaiswal <[email protected]>
Summary by CodeRabbit
WalkthroughThe changes update the user bio representation across tests and the component. The bio data in mock files is modified from "This is a test user" to "Test @user". Correspondingly, unit tests now assert the presence of "Test" and "@user" instead of the full original text. The primary component change is in the User Details page, where the bio text is now split into words, and any word starting with "@" is rendered as a clickable link pointing to the corresponding GitHub profile. Changes
Suggested reviewers
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (5)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
frontend/src/pages/UserDetails.tsx (2)
153-172: Add missing space after mentions.The implementation successfully makes
@mentions in user bios clickable, which addresses the PR objective. However, there's an inconsistency in spacing when rendering the bio text.- {word} + {word}{' '}When rendering regular words on line 169, you add a space after each word, but no space is added after mentions. This will cause inconsistent spacing in the rendered output. Adding a space after mentions would maintain consistent spacing throughout the text.
158-166: Enhance accessibility for mention links.Add an aria-label to the mention links to improve accessibility for screen readers.
<Link key={index} href={`https://github.com/${word.substring(1)}`} target="_blank" rel="noopener noreferrer" + aria-label={`${word.substring(1)}'s GitHub profile`} className="text-blue-500 hover:underline" > {word} </Link>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/__tests__/unit/data/mockUserDetails.ts(1 hunks)frontend/__tests__/unit/pages/UserDetails.test.tsx(1 hunks)frontend/src/pages/UserDetails.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- frontend/tests/unit/data/mockUserDetails.ts
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: CodeQL (python)
- GitHub Check: Run backend tests
- GitHub Check: CodeQL (javascript-typescript)
- GitHub Check: Run frontend unit tests
- GitHub Check: Run frontend e2e tests
🔇 Additional comments (1)
frontend/__tests__/unit/pages/UserDetails.test.tsx (1)
75-76: LGTM - Test assertions match updated functionality.The updated test assertions correctly verify the presence of both parts of the bio text ("Test" and "@user") in the rendered component, which aligns with the changes made to make
@mentions clickable in the UserDetails component.
frontend/src/pages/UserDetails.tsx
Outdated
| {user.bio && <p className="text-lg text-gray-700 dark:text-gray-300">{user.bio}</p>} | ||
| {user.bio && ( | ||
| <p className="text-lg text-gray-700 dark:text-gray-300"> | ||
| {user.bio.split(' ').map((word, index) => { |
There was a problem hiding this comment.
If there's a dot after the link like in this example - the dot is added to the link, which makes it a 404.
There could also be a ;!? or any other thing like that.
Could you fix this?
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
frontend/src/pages/UserDetails.tsx
Outdated
| {user.bio && ( | ||
| <p className="text-lg text-gray-700 dark:text-gray-300"> | ||
| {user.bio.split(' ').map((word, index) => { | ||
| const mentionMatch = word.match(/^@(\w+)/) |
There was a problem hiding this comment.
This works for the link but it still shows the dot highlighted in the UI. You should be able to fix that by updating both regexes here and at the top. The taking out the correct group item.
Also, could we move this logic out of the template? It's getting messy.
|
|
here is the final version
|
Resolves #950
If user bio has any @ text then it will redirect to GitHub.
