fix: clickable org if there is any @ text in user bio #951

jaiakash · 2025-02-27T20:25:36Z

Resolves #950

If user bio has any @ text then it will redirect to GitHub.

Signed-off-by: Akash Jaiswal <[email protected]>

jaiakash

Added units tests as well.

coderabbitai · 2025-03-01T04:41:34Z

Summary by CodeRabbit

New Features
- Enhanced the user profile display: Bio text now automatically converts GitHub username mentions into clickable links that navigate to the respective profiles while preserving any adjacent punctuation.
- Updated the bio content for clearer presentation.

Walkthrough

The 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

Files	Change Summary
`frontend/__tests__/unit/data/mockUserDetails.ts` `frontend/__tests__/unit/pages/UserDetails.test.tsx`	Updated test data and assertions: changed the bio from "This is a test user" to "Test @user" and modified tests to expect separate text fragments "Test" and "@user".
`frontend/src/pages/UserDetails.tsx`	Updated the bio rendering logic to split the bio into words and render words starting with "@" as clickable links directing to the corresponding GitHub profile.

Suggested reviewers

kasya
arkid15r

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6ef617e and e23314c.

📒 Files selected for processing (1)

frontend/src/pages/UserDetails.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

frontend/src/pages/UserDetails.tsx

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

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

📥 Commits

Reviewing files that changed from the base of the PR and between 126b0b1 and 658aa7e.

📒 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

kasya · 2025-03-02T02:01:09Z

frontend/src/pages/UserDetails.tsx

-              {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) => {


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>

kasya · 2025-03-02T17:56:05Z

frontend/src/pages/UserDetails.tsx

+              {user.bio && (
+                <p className="text-lg text-gray-700 dark:text-gray-300">
+                  {user.bio.split(' ').map((word, index) => {
+                    const mentionMatch = word.match(/^@(\w+)/)


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.

Signed-off-by: Akash Jaiswal <[email protected]>

jaiakash · 2025-03-03T16:46:10Z

here is the final version

removes dot if its present at last of username/org name
decouple the logic outside the UI code

kasya · 2025-03-06T02:23:42Z

here is the final version

removes dot if its present at last of username/org name

decouple the logic outside the UI code

Why did you remove the dot? 🤔 What about other punctuation marks?
I thought you would refactor the method to just not include them in links, but not remove them all together - this is still a sentence that should have punctuation marks.
Here's some code for you to start with. I'm not sure if it's 100% covering what we need, but it should help:

{user.bio && (
    <p className="text-lg text-gray-700 dark:text-gray-300">
      {user.bio.split(/(\s+)/).map((part, index) => {
        const mentionMatch = part.match(/^@([\w-]+)([.,!?)])?$/);
        if (mentionMatch) {
          return (
            <React.Fragment key={index}>
              <Link
                href={`https://github.com/${mentionMatch[1]}`}
                target="_blank"
                rel="noopener noreferrer"
                className="text-blue-500 hover:underline"
              >
                @{mentionMatch[1]}
              </Link>
              {mentionMatch[2] && <span>{mentionMatch[2]}</span>} {}
            </React.Fragment>
          );
        }
        return <span key={index}>{part}</span>;
      })}
    </p>
  )}

kasya

Left a suggestion.

jaiakash · 2025-03-06T17:26:46Z

Why did you remove the dot? 🤔 What about other punctuation marks? I thought you would refactor the method to just not include them in links, but not remove them all together - this is still a sentence that should have punctuation marks. Here's some code for you to start with.

The dot at end of such sentances wont make much difference, that was my assumption. But i think what you are saying is correct, there can be any other puntuation mark as well.
So i am changing code to exclude other puntuation marks in bio (of course except @) and but show them in the bio.
I hope thats what is expected, right @kasya ?

arkid15r · 2025-03-06T17:29:22Z

Why did you remove the dot? 🤔 What about other punctuation marks? I thought you would refactor the method to just not include them in links, but not remove them all together - this is still a sentence that should have punctuation marks. Here's some code for you to start with.

The dot at end of such sentances wont make much difference, that was my assumption. But i think what you are saying is correct, there can be any other puntuation mark as well. So i am changing them to include other puntuation marks (of course except @) and show them in the bio. I hope thats what is expected, right @kasya ?

I'm not sure about your approach, the point here is that the content must remain the same (event punctuation). The only change is that @handles should become links.

jaiakash · 2025-03-06T17:34:56Z

I'm not sure about your approach, the point here is that the content must remain the same (event punctuation). The only change is that @handles should become links.

yes, that's what I intended, to convert them to links. But the punctuation mark (except @) should be as it is.

Signed-off-by: Akash Jaiswal <[email protected]>

sonarqubecloud · 2025-03-07T00:01:09Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

kasya

Nice!

kasya · 2025-03-07T06:25:34Z

frontend/src/pages/UserDetails.tsx

@@ -91,6 +91,30 @@ const UserDetailsPage: React.FC = () => {
    )
  }

+  const formattedBio = user?.bio?.split(' ').map((word, index) => {


Yess! Thank you!

* fix: clickable org if there is any @ text in user bio Signed-off-by: Akash Jaiswal <[email protected]> * fix: unit tests Signed-off-by: Akash Jaiswal <[email protected]> * fix: trailing punctuation in github user name Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: remove dot at end if its present in username Signed-off-by: Akash Jaiswal <[email protected]> * fix: all puntuation to be excluded from link Signed-off-by: Akash Jaiswal <[email protected]> --------- Signed-off-by: Akash Jaiswal <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Arkadii Yakovets <[email protected]>

fix: clickable org if there is any @ text in user bio

1411900

Signed-off-by: Akash Jaiswal <[email protected]>

jaiakash requested review from arkid15r and kasya as code owners February 27, 2025 20:25

github-actions bot added the frontend label Feb 27, 2025

fix: unit tests

c3df6b1

Signed-off-by: Akash Jaiswal <[email protected]>

github-actions bot added the frontend-tests label Feb 27, 2025

jaiakash commented Feb 27, 2025

View reviewed changes

Merge branch 'main' into link-in-user-bio

658aa7e

coderabbitai bot reviewed Mar 1, 2025

View reviewed changes

frontend/src/pages/UserDetails.tsx Outdated Show resolved Hide resolved

arkid15r requested a review from aramattamara March 1, 2025 04:49

kasya requested changes Mar 2, 2025

View reviewed changes

jaiakash and others added 2 commits March 2, 2025 10:19

Merge branch 'main' into link-in-user-bio

22d0a4d

fix: trailing punctuation in github user name

25c1c4a

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

jaiakash requested a review from kasya March 2, 2025 04:53

kasya requested changes Mar 2, 2025

View reviewed changes

jaiakash added 3 commits March 3, 2025 21:44

Merge branch 'main' into link-in-user-bio

a6bd818

fix: remove dot at end if its present in username

7a695a0

Signed-off-by: Akash Jaiswal <[email protected]>

Merge branch 'main' into link-in-user-bio

d5d12a7

jaiakash requested a review from kasya March 3, 2025 16:46

arkid15r and others added 3 commits March 4, 2025 14:00

Merge branch 'main' into link-in-user-bio

5ac7a54

Merge branch 'main' into link-in-user-bio

53064ab

Merge branch 'main' into link-in-user-bio

0d70ddf

kasya requested changes Mar 6, 2025

View reviewed changes

Merge branch 'main' into link-in-user-bio

f7490b0

fix: all puntuation to be excluded from link

22421a0

Signed-off-by: Akash Jaiswal <[email protected]>

jaiakash force-pushed the link-in-user-bio branch from 6ef617e to 22421a0 Compare March 6, 2025 21:14

github-actions bot added the backend label Mar 6, 2025

Merge branch 'main' into link-in-user-bio

e23314c

github-actions bot removed the backend label Mar 6, 2025

Merge branch 'main' into link-in-user-bio

cbf795b

jaiakash requested a review from kasya March 7, 2025 00:05

kasya approved these changes Mar 7, 2025

View reviewed changes

kasya added this pull request to the merge queue Mar 7, 2025

Merged via the queue into OWASP:main with commit 9b54e63 Mar 7, 2025
18 checks passed

Uh oh!

fix: clickable org if there is any @ text in user bio #951

fix: clickable org if there is any @ text in user bio #951

Uh oh!

Conversation

jaiakash commented Feb 27, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jaiakash left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot commented Mar 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Walkthrough

Changes

Suggested reviewers

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kasya Mar 2, 2025

Choose a reason for hiding this comment

Uh oh!

kasya Mar 2, 2025

Choose a reason for hiding this comment

Uh oh!

jaiakash commented Mar 3, 2025

Uh oh!

kasya commented Mar 6, 2025

Uh oh!

kasya left a comment

Choose a reason for hiding this comment

Uh oh!

jaiakash commented Mar 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arkid15r commented Mar 6, 2025

Uh oh!

jaiakash commented Mar 6, 2025

Uh oh!

sonarqubecloud bot commented Mar 7, 2025

Quality Gate passed

Uh oh!

kasya left a comment

Choose a reason for hiding this comment

Uh oh!

kasya Mar 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jaiakash commented Feb 27, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 1, 2025 •

edited

Loading

jaiakash commented Mar 6, 2025 •

edited

Loading