Appover's details are shown when hovering on submitter's name on report preview

[m-natarajan]

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: 9.0.50-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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
Expensify/Expensify Issue URL:
Issue reported by: @cead22
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1729182103612369

Action Performed:

1. Submit a report in a workspace
2. Hover over the submitter's name in the report preview

Expected Result:

Submitter's details are shown

Actual Result:

Approver's name and email, and my avatar. It also shows his status emoji and message

Workaround:

unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

  

Recording.667.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @greg-schroeder (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.

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-10-17 19:39:33 UTC.

Proposal

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

The approver's details are displayed when hovering over the submitter's name in the report preview.

What is the root cause of that problem?

In this PR , we added a special case for isReportPreviewAction && ReportUtils.isPolicyExpenseChat(report), where the displayName is set using ownerAccountID instead of actorAccountID.

However, when hovering over this display name, it shows the approver's information because, in the ReportActionItemFragment , we are passing accountID as actorAccountID instead of ownerAccountID in this case.

This is problematic because actorAccountID refers to the approver, not the submitter.

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

We can modify this line so that accountID is set to ownerAccountID when isReportPreviewAction && ReportUtils.isPolicyExpenseChat(report) is true:

accountID={(isReportPreviewAction && ReportUtils.isPolicyExpenseChat(report) ? ownerAccountID : actorAccountID) ?? -1}

we should also change

App/src/pages/home/report/ReportActionItemSingle.tsx

Line 184 in 649b4e1

showUserDetails(action?.delegateAccountID ? String(action.delegateAccountID) : String(actorAccountID));

What alternative solutions did you explore? (Optional)

Another approach is to use avatarId, as it will be updated along with the display name:

accountID={avatarId ?? -1}

additionally if we want to fix the navigation issue that was mention in this proposal, we should also change actorAccountID to avatarId or add a similar condition to the main solution

[Nodebrute]

Proposal

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

Appover's details are shown when hovering on submitter's name on report preview

What is the root cause of that problem?

We have 2 problems here
1: Incorrect Tooltip is shown
2: When user press on icon, incorrect detail page is shown

Screen.Recording.2024-10-18.at.1.23.49.AM.mov

Here we are passing icon

App/src/pages/home/report/ReportActionItemSingle.tsx

Line 272 in 649b4e1

actorIcon={icon}

which uses id:avatarId

App/src/pages/home/report/ReportActionItemSingle.tsx

Line 157 in 649b4e1

id: avatarId,

but here we pass accotorAcountID as accountID these 2 accountIDs should be consistent

App/src/pages/home/report/ReportActionItemSingle.tsx

Line 268 in 649b4e1

accountID={actorAccountID ?? -1}

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

For 1's problem we can fix it by passing avatarID here the same that we pass in icon

App/src/pages/home/report/ReportActionItemSingle.tsx

Line 268 in 649b4e1

accountID={actorAccountID ?? -1}

We can do something like this

     accountID={Number(avatarId ?? -1)}

To fix incorrect navigation here we can also pass avatarId instead of actorAccountID

App/src/pages/home/report/ReportActionItemSingle.tsx

Line 184 in 649b4e1

showUserDetails(action?.delegateAccountID ? String(action.delegateAccountID) : String(actorAccountID));

Optional: Here we already set avatarId to delegatePersonalDetails?.accountID so we can also simply change this to

            showUserDetails(String(avatarId));

We should also check for other places too where we can use avatarId

What alternative solutions did you explore? (Optional)

[abzokhattab]

Proposal updated

updated proposal to fix navigation consistency pointed by the other proposal.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[grgia]

Was this fixed? Im not able to reproduce

[grgia]

Looking now

[greg-schroeder]

PR is in review