[HOLD for payment 2023-08-01] [$1000] [HOLD #20512] Web - Mentions don't show the new tooltip on hover

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open the app.
2. Open a chat.
3. Mention a user using the @ symbol. Send the message.
4. Hover over the mention. It shows the old tooltip with only email.

Expected Result:

Hovering on mentions should show the new tooltip with email, avatar and display name.

Actual Result:

Hovering on mentions shows the old tooltip with only email.

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.30-5
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-06-23.at.2.39.46.PM.2.mov

Desktop.2023.06.26.-.18.09.42.15.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Nikhil-Vats
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1687512682797759

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0123436a96eaad8d30
• Upwork Job ID: 1679594587000627200
• Last Price Increase: 2023-07-13

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[Nikhil-Vats]

Proposal

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

Mentions don't show new tooltip on hover.

What is the root cause of that problem?

We still use the old tooltip component for mentions.

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

Lines 40 to 52 in e5f00f8

	<Tooltip text={loginWithoutLeadingAt}>
	<TextLink
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...defaultRendererProps}
	href={ROUTES.getDetailsRoute(loginWithoutLeadingAt)}
	style={[_.omit(props.style, 'color'), StyleUtils.getMentionStyle(isOurMention), {color: StyleUtils.getMentionTextColor(isOurMention)}]}
	onPress={() => showUserDetails(loginWithoutLeadingAt)}
	// Add testID so it is NOT selected as an anchor tag by SelectionScraper
	testID="span"
	>
	<TNodeChildrenRenderer tnode={props.tnode} />
	</TextLink>
	</Tooltip>

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

Use the new UserDetailsTooltip in MentionUserRenderer and pass accountID to it.

accountID is not available in MentionUserRenderer so to get accountID from login use getAccountIDsByLogins from PersonalDetailsUtils -

const accountID = PersonalDetailsUtils.getAccountIDsByLogins([loginWithoutLeadingAt])[0];

We can also make a new function for getting accountID from login for a single user -

function getAccountIDByLogin(login) {
  const currentDetail = _.find(personalDetails, (detail) => detail.login === login);
  if (!currentDetail) {
      // generate an account ID because in this case the detail is probably new, so we don't have a real accountID yet
      return UserUtils.generateAccountID();
  }
  return Number(currentDetail.accountID);
}

Then, to keep code DRY we can use this function in getAccountIDsByLogins.

What alternative solutions did you explore? (Optional)

NA

Result -

Screen.Recording.2023-06-27.at.7.07.11.PM.mov

[alitoshmatov]

Proposal

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

Web - Mentions don't show the new tooltip on hover

What is the root cause of that problem?

We are using simple tooltip rather than UserDetailsTooltip

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

Lines 40 to 52 in e5f00f8

	<Tooltip text={loginWithoutLeadingAt}>
	<TextLink
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...defaultRendererProps}
	href={ROUTES.getDetailsRoute(loginWithoutLeadingAt)}
	style={[_.omit(props.style, 'color'), StyleUtils.getMentionStyle(isOurMention), {color: StyleUtils.getMentionTextColor(isOurMention)}]}
	onPress={() => showUserDetails(loginWithoutLeadingAt)}
	// Add testID so it is NOT selected as an anchor tag by SelectionScraper
	testID="span"
	>
	<TNodeChildrenRenderer tnode={props.tnode} />
	</TextLink>
	</Tooltip>

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

We should use UserDetailsTooltip but since it is mentions we don't have accountID available for us to supply to tooltip, but it is planned to migrate to accountID based mentions which then solves this issue we can put this issue on hold for this migration and then solve this issue. If we have to till then we can provide fallbackUserDetails for UserDetailsTooltip with following values

           {
                login,
                displayName: login,
                avatar: UserUtils.getDefaultAvatar(),
            }

What alternative solutions did you explore? (Optional)

[Christinadobrzyn]

Might be fixed with this job- #20716 (comment) - asking

[Nikhil-Vats]

@Christinadobrzyn this issue is for the missing tooltip for mentions in chat messages.

The issue that you referenced is for missing tooltip for chats in LHN.

I think both are different.

[Christinadobrzyn]

There are some big changes to tooltip happening in this GH -#20512 (related to threads here - https://github.com/Expensify/Expensify/issues/290271)

I'm going to put on hold to see if it's resolved after this

[Christinadobrzyn]

still on hold for #20512