[HOLD for payment 2024-05-06] [$250] Quick action - Group chat name and avatar does not update unless the page is refreshed

[izarutskaya]

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.63-5
Reproducible in staging?: Y
Reproducible in production?: No, new feature
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to FAB > Start chat.
3. Create a group chat.
4. Split expense in the group chat.
5. Click on the chat header.
6. Go to Settings > Name.
7. Change the group chat name.
8. Also change the group chat avatar.
9. Click FAB.
10. Hover over the group chat avatar.

Expected Result:

The group chat under Quick action in FAB will update to show the latest avatar and name.

Actual Result:

The group chat under Quick action in FAB does not show the latest avatar and name (in the tooltip) unless the page is refreshed.

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

Bug6454364_1713485468784.20240419_080236.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0158c8e7015a29644e
• Upwork Job ID: 1783268294358458368
• Last Price Increase: 2024-04-24
• Automatic offers:
• shubham1206agra | Reviewer | 0
• bernhardoj | Contributor | 0

[melvin-bot]

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

[melvin-bot]

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

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

[izarutskaya]

@isabelastisser 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.

[izarutskaya]

We think this issue might be related to the #collect project.

[ZhenjaHorbach]

Proposal

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

Quick action - Group chat name and avatar does not update unless the page is refreshed

What is the root cause of that problem?

The main problem with issue is that we can' get actual ActionReport because we use useMemo
As a result, we are unable to update the data

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

To fix this issue we can refactor this component and use allReports directly to always have actual information from report

const quickActionReport: OnyxEntry<OnyxTypes.Report> = useMemo(
    () => (quickAction ? allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${quickAction.chatReportID}`] : null),
    [allReports, quickAction],
);

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

Line 150 in bec1c8e

const quickActionReport: OnyxEntry<OnyxTypes.Report> = useMemo(() => (quickAction ? ReportUtils.getReport(quickAction.chatReportID) : null), [quickAction]);

For optimisation we can use selector just like we do for allPolicies on this screen

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

Lines 73 to 81 in bec1c8e

	const policySelector = (policy: OnyxEntry<OnyxTypes.Policy>): PolicySelector =>
	(policy && {
	type: policy.type,
	role: policy.role,
	isPolicyExpenseChatEnabled: policy.isPolicyExpenseChatEnabled,
	pendingAction: policy.pendingAction,
	avatar: policy.avatar,
	name: policy.name,
	}) as PolicySelector;

What alternative solutions did you explore? (Optional)

As alternative we don't have to use useMemo

[isabelastisser]

@madmax330, can you please provide an update? Thanks!

[marcaaron]

We can remove the blocker here. This issue is very minor and also related to a new feature not a regression.

[marcaaron]

@madmax330 if you want to pass this to me I can takeover as it seems related to Group Chats.

[bernhardoj]

Proposal

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

The group chat name (in the tooltip) and avatar in QAB don't update dynamically and need to refresh the app.

What is the root cause of that problem?

The avatar and group name (in the tooltip) depend on the quick action report data.

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

Lines 154 to 162 in 8616678

	const quickActionAvatars = useMemo(() => {
	if (quickActionReport) {
	const avatars = ReportUtils.getIcons(quickActionReport, personalDetails);
	return avatars.length <= 1 || ReportUtils.isPolicyExpenseChat(quickActionReport) ? avatars : avatars.filter((avatar) => avatar.id !== session?.accountID);
	}
	return [];
	// Policy is needed as a dependency in order to update the shortcut details when the workspace changes
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [personalDetails, session?.accountID, quickActionReport, quickActionPolicy]);

For the quick action report, we get the report ID from quickAction and use ReportUtils.getReport.

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

Line 150 in 8616678

const quickActionReport: OnyxEntry<OnyxTypes.Report> = useMemo(() => (quickAction ? ReportUtils.getReport(quickAction.chatReportID) : null), [quickAction]);

The useMemo only depends on quickAction, so when we do an update to the group report, the value won't change.

The reason the group chat name is updated below the quick action title is, when the FAB component re-renders, it will recalculate the ReportUtils.getReportName by passing the outdated quickActionReport

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

Line 375 in 8616678

description: !isEmptyObject(quickActionReport) ? ReportUtils.getReportName(quickActionReport) : '',

Even though the report passed to getReportName is outdated, the way we get the group chat name is by using the group chat report ID,

App/src/libs/ReportUtils.ts

Lines 2988 to 2990 in 8616678

	if (isGroupChat(report)) {
	return getGroupChatName(undefined, true, report?.reportID) ?? '';
	}

and then get the report object from the allReports variable as shown below that is coming from Onyx.connect inside the lib file.

App/src/libs/ReportUtils.ts

Lines 1751 to 1759 in 8616678

	function getGroupChatName(participantAccountIDs?: number[], shouldApplyLimit = false, reportID = ''): string | undefined {
	// If we have a reportID always try to get the name from the report.
	if (reportID) {
	const reportKey = `${ONYXKEYS.COLLECTION.REPORT}${reportID}`;
	const reportName = allReports?.[reportKey]?.reportName;
	if (reportName) {
	return reportName;
	}
	}

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

It's better to subscribe to the quickActionReport using withOnyx.

quickActionReport: {
    key: ({quickAction}) => `${ONYXKEYS.COLLECTION.REPORT}${quickAction?.chatReportID}`,
},

Then we don't need this anymore,

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

Line 150 in 8616678

const quickActionReport: OnyxEntry<OnyxTypes.Report> = useMemo(() => (quickAction ? ReportUtils.getReport(quickAction.chatReportID) : null), [quickAction]);

We can do the same for quickActionPolicy

[isabelastisser]

@madmax330 @marcaaron, can you please review the proposal above? Thanks!

[melvin-bot]

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

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

[shubham1206agra]

I will proceed with @bernhardoj's proposal as it has a better solution using Onyx.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @shubham1206agra 🎉 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: @shubham1206agra

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.67-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix group chat name and avatar of quick action does not update dynamically #41057

If no regressions arise, payment will be issued on 2024-05-06. 🎊

For reference, here are some details about the assignees on this issue:

• @bernhardoj requires payment automatic offer (Contributor)
• @shubham1206agra requires payment automatic offer (Reviewer)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@shubham1206agra] The PR that introduced the bug has been identified. Link to the PR:
• [@shubham1206agra] 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:
• [@shubham1206agra] 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:
• [@shubham1206agra] Determine if we should create a regression test for this bug.
• [@shubham1206agra] 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.
• [@isabelastisser] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[isabelastisser]

The payments were processed in Upwork.

@shubham1206agra, please complete the BZ list above before I can close the issue. Thanks!

[shubham1206agra]

The payments were processed in Upwork.

@isabelastisser Can you check this again? Looks like my payment was not processed.

[shubham1206agra]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@shubham1206agra] The PR that introduced the bug has been identified. Link to the PR: Display Quick Action Button #38669
• [@shubham1206agra] 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#r1594826990
• [@shubham1206agra] 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: Not Required
• [@shubham1206agra] Determine if we should create a regression test for this bug. No
• [@shubham1206agra] 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.
• [@isabelastisser] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[isabelastisser]

Confirming that the payments were processed in Upwork on May 8: