[$250] Shortcut - Workspace avatar next to request shortcut does not update when it is changed

[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!

---

Version Number: 1.4.57-0
Reproducible in staging?: y
Reproducible in production?: new feature
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com.
2. Create a new workspace and do not change workspace name and avatar.
3. Request money from workspace chat.
4. Click FAB and note the workspace avatar next to Request money shortcut.
5. Go to Profile > Workspaces > select workspace in Step 2.
6. Change workspace name and avatar.
7. Go to Chat tab.
8. Repeat Step 4.

Expected Result:

The workspace avatar next to Request money shortcut will update.

Actual Result:

The workspace avatar next to Request money shortcut remains as the default avatar.

Workaround:

n/a

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

Bug6428614_1711540638800.shortcut.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e4ddf9604c71c3e3
• Upwork Job ID: 1773056493413158912
• Last Price Increase: 2024-03-27
• Automatic offers:
• jjcoffee | Reviewer | 0
• ZhenjaHorbach | Contributor | 0

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @amyevans (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[kbecciv]

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

[amyevans]

This is in the Quick Action button new feature (cc @Gonals), it's a relatively minor UI bug so no need to block deploy.

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[ZhenjaHorbach]

Proposal

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

Shortcut - Workspace avatar next to request shortcut does not update when it is changed

What is the root cause of that problem?

The main problem with issue is that for getting avatar we are using quickActionAvatars which uses useMemo.
and since in our list of dependencies, there are no values that are related with policies
We can't get the updated avatar

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js

Lines 149 to 155 in 76264c1

	const quickActionAvatars = useMemo(() => {
	if (quickActionReport) {
	const avatars = ReportUtils.getIcons(quickActionReport, props.personalDetails);
	return avatars.length <= 1 || ReportUtils.isPolicyExpenseChat(quickActionReport) ? avatars : _.filter(avatars, (avatar) => avatar.id !== props.session.accountID);
	}
	return [];
	}, [props.personalDetails, props.session.accountID, quickActionReport]);

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

To fix this issue we can add new dependency (policy) for quickActionAvatars. To get policy we can use getPolicy from ReportUtils

      const policy = ReportUtils.getPolicy(quickActionReport.policyID)
     }, [props.personalDetails, props.session.accountID, quickActionReport, policy]);

But since we are using filtering before receiving all the policies, we will not see the updated avatars

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js

Lines 33 to 39 in 76264c1

	const policySelector = (policy) =>
	policy && {
	type: policy.type,
	role: policy.role,
	isPolicyExpenseChatEnabled: policy.isPolicyExpenseChatEnabled,
	pendingAction: policy.pendingAction,
	};

For this, we can add new values for policies
For example name and avatar

As result

const policySelector = (policy) =>
    policy && {
        type: policy.type,
        role: policy.role,
        isPolicyExpenseChatEnabled: policy.isPolicyExpenseChatEnabled,
        pendingAction: policy.pendingAction,
        avatar: policy.avatar,
        name: policy.name,
    };

Additional: we can pass policy for ReportUtils.getIcon (But judging by testing the previous changes will be enough to display the new avatar )

const avatars = ReportUtils.getIcons(quickActionReport, props.personalDetails, undefined, undefined, undefined, policy);

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js

Line 151 in 76264c1

const avatars = ReportUtils.getIcons(quickActionReport, props.personalDetails);

What alternative solutions did you explore? (Optional)

Alternatively, we don't have to use UseMemo

[jjcoffee]

Reviewing Monday! 🙏

[jjcoffee]

Thanks for the proposal @ZhenjaHorbach! It looks good overall, but I just need a few clarifications.

As alternative we can get the current policy using a function from our utils using quickActionReport.policyID

To me this sounds like the best approach. Ideally we don't want to rerun the useMemo on any policy change, only the policy linked to the quickActionReport. Have you tested this approach? And could you update your proposal to indicate it as the key approach.

Plus for more correct results we can pass policy for ReportUtils.getIcon

I'm not sure what "more correct results" means in this context, can you expand? As far as I can tell ReportUtils.getIcon will get the correct icon as long as we rerun the useMemo.

[ZhenjaHorbach]

Thanks for the proposal @ZhenjaHorbach! It looks good overall, but I just need a few clarifications.

As alternative we can get the current policy using a function from our utils using quickActionReport.policyID

To me this sounds like the best approach. Ideally we don't want to rerun the useMemo on any policy change, only the policy linked to the quickActionReport. Have you tested this approach? And could you update your proposal to indicate it as the key approach.

Plus for more correct results we can pass policy for ReportUtils.getIcon

I'm not sure what "more correct results" means in this context, can you expand? As far as I can tell ReportUtils.getIcon will get the correct icon as long as we rerun the useMemo.

Hello )
Thanks for feedback
I updated the proposition
And yes, if we use policy instead of allPolicies it will also fix the problem )

Screen.Recording.2024-04-01.at.14.22.03.mov

And about policy passing for getIcon
This is more of an optional action
Since without this, the avatar will be updated also

[jjcoffee]

Sounds good, thanks! Happy to go with @ZhenjaHorbach's updated proposal.

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @amyevans is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @jjcoffee 🎉 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]

📣 @ZhenjaHorbach 🎉 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 📖

[ZhenjaHorbach]

📣 @ZhenjaHorbach 🎉 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 📖

PR will be ready today or tomorrow

[laurenreidexpensify]

Deployed to prod on 10 April, so should be eligible for payment on 17 April

[laurenreidexpensify]

Payment Summary:

C+ @jjcoffee $250 payment issued via upwork
Contributor @ZhenjaHorbach payment issued via upwork

[laurenreidexpensify]

@jjcoffee pls confirm if there are any regression / checklist steps to complete before we can close out, thanks

[jjcoffee]

• The PR that introduced the bug has been identified. Link to the PR: Display Quick Action Button #38669
• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/38669/files#r1568799896
• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A - just missed in testing
• Determine if we should create a regression test for this bug. Yes - if not already covered
• If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

1. Create a new workspace
2. Request money from workspace chat.
3. Click FAB and note the workspace avatar next to Request money shortcut.
4. Go to Profile > Workspaces > select workspace in Step 2.
5. Change workspace name and avatar.
6. Go back to Chat tab.
7. Open the FAB and verify that the workspace name and avatar have changed in the shortcut

Do we agree 👍 or 👎