[PAID] [$250] Chat - Manually copied and pasted user mention turns into user profile hyperlink

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.71-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Log in to New Expensify
2. Navigate to any chat
3. Manually select, copy and paste the message
4. Send the message

Expected Result:

Copied user mention should remain a mention

Actual Result:

Manually copied and pasted user mention turns in to hyperlink leading to the user profile

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6474088_1715104769258.2024-05-07_18-39-15.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01cc954368da0c91d3
• Upwork Job ID: 1788782724202225664
• Last Price Increase: 2024-05-10
• Automatic offers:
• c3024 | Reviewer | 0
• bernhardoj | Contributor | 0

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

Triggered auto assignment to @sakluger (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@sakluger FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Copying a user mention and paste it turns the text into a link markdown.

What is the root cause of that problem?

The mention text is rendered as an anchor tag.

App/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx

Lines 103 to 110 in e0b6a06

	<Text
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...defaultRendererProps}
	style={[styles.link, styleWithoutColor, StyleUtils.getMentionStyle(isOurMention), {color: StyleUtils.getMentionTextColor(isOurMention)}]}
	role={CONST.ROLE.LINK}
	testID="span"
	href={`/${navigationRoute}`}
	>

So, when we copy it, it will be copied as a link. This was previously fixed in #20814 by adding a testID of span because previously, if an element has a testID, the element name will be renamed to the testID, in this case span.

But in my PR here, I update the logic so that it replaces the element name only if the testID is a valid markdown name. In this case, span is not a valid markdown. It's to fix another issue here.

What changes do you think we should make in order to solve the problem?

Instead of setting the testID to span here,

App/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx

Line 108 in e0b6a06

testID="span"

we can set it to mention-user. Then, add mention-user to the valid markdown list here

App/src/libs/SelectionScraper/index.ts

Line 9 in e0b6a06

const markdownElements = ['h1', 'strong', 'em', 'del', 'blockquote', 'q', 'code', 'pre', 'a', 'br', 'li', 'ul', 'ol', 'b', 'i', 's'];

_or simply add span to the valid markdown list above, but not preferable

we can add a similar fix if there is another issue found with other markdown

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01cc954368da0c91d3

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @c3024 (External)

[c3024]

@bernhardoj 's proposal here looks good to me.

🎀 👀 🎀 C+ Reviewed

[melvin-bot]

Triggered auto assignment to @luacmartins, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @c3024 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @bernhardoj 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[bernhardoj]

PR is ready

cc: @c3024

[melvin-bot]

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[sakluger]

@alexpensify I'm OOO for two weeks. Can you please help with the payment if it's due before I'm back? The PR was deployed to Staging yesterday, so it will probably be deployed to prod early next week.

[melvin-bot]

Current assignee @sakluger is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to @strepanier03 (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[alexpensify]

@strepanier03 - It looks like we are playing the assignment merry-go-round here. I, too, will be OOO next week and will not return until Tuesday, May 28. I'm reassigning now to get @sakluger help with the payment process. Thanks!

BZ Discussion Here: https://expensify.slack.com/archives/C01SKUP7QR0/p1715886524903119?thread_ts=1715873747.589919&cid=C01SKUP7QR0

[strepanier03]

PR on staging so we're waiting for the 7-day hold to start.

[c3024]

PR deployed to production but automation failed here.

[strepanier03]

Deployed to production 2024-05-22, 7-days later is 2024-05-29. Updating title.

[strepanier03]

Jobs are paid and contracts closed, thanks all!