[HOLD for payment 2024-07-10] [$250] Web - Workspace - Member is unselected when refresh Add message page and go back

[lanitochka17]

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.75-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
Email or phone of affected tester (no customers): gocemate+a85@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Create Workspace
2. Go to Members> Invite> Enter any email> Next
3. Refresh the Add message page
4. Go back to Invite members page

Expected Result:

Member should be selected

Actual Result:

Member is not selected when refresh Add message page and go back to Invite members page

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

Bug6489557_1716478796475.Recording__3032.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01123d71b4084d0c78
• Upwork Job ID: 1800481034076774902
• Last Price Increase: 2024-06-11
• Automatic offers:
• ishpaul777 | Reviewer | 102831330
• bernhardoj | Contributor | 102831331

Issue Owner

Current Issue Owner: @dylanexpensify

[melvin-bot]

Triggered auto assignment to @dylanexpensify (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]

@dylanexpensify 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

[dragnoir]

Proposal

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

Workspace - Member is unselected when refresh Add message page and go back

What is the root cause of that problem?

On normal flow, on the Invite new memeber screen, when we slect a contact and we click on Next, going to the "Add message screen", the previous page "Invite new memeber" will not disappear, it will still rendered but hidden.

All the data inside "Invite new memeber" will be available when we hit the Back button. But when we refresh the "Add message screen", we will loose the selected contact inside "Invite new memeber".

Same thing will happen if we are on the "Invite new memeber" and we refresh it without going to the "Add message screen, we will loose the selected contact.

The issue is that WorkspaceInvitePage when we select contact and click next for the "Add message screen", there's a WorkspaceInviteMembersDraft created

App/src/pages/workspace/WorkspaceInvitePage.tsx

Line 246 in 2c9cc0a

Policy.setWorkspaceInviteMembersDraft(route.params.policyID, invitedEmailsToAccountIDs);

but when we refresh the page or we reopen it, we don't check the data inside that WorkspaceInvitePage.

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

We need to add an utility to check the data inside WorkspaceInvitePage when the page load or the compounent mout with useEffect

We need to check OnyxData

(`${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT}${policyID}`, invitedEmailsToAccountIDs);

as we do for the WorkspaceInviteMessagePage

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Lines 231 to 233 in 2c9cc0a

	invitedEmailsToAccountIDsDraft: {
	key: ({route}) => `${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT}${route.params.policyID.toString()}`,
	},

If invitedEmailsToAccountIDs is not empty, then we need to add those to the selected list.

[bernhardoj]

Proposal

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

The previously selected member is gone when refresh in message page and go back.

What is the root cause of that problem?

This previously worked but was broken by #38207.

We have a logic here to add back the saved selected user,

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 111 to 120 in 8375abe

	if (firstRenderRef.current) {
	// We only want to add the saved selected user on first render
	firstRenderRef.current = false;
	Object.keys(invitedEmailsToAccountIDsDraft ?? {}).forEach((login) => {
	if (!(login in detailsMap)) {
	return;
	}
	newSelectedOptions.push({...detailsMap[login], isSelected: true});
	});
	}

however, the detailsMap is empty, so it always returns early. The reason it's empty is because the data inside inviteOptions is also empty

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 99 to 108 in 8375abe

	const inviteOptions = OptionsListUtils.getMemberInviteOptions(options.personalDetails, betas ?? [], debouncedSearchTerm, excludedUsers, true);
	// Update selectedOptions with the latest personalDetails and policyEmployeeList information
	const detailsMap: Record<string, MemberForList> = {};
	inviteOptions.personalDetails.forEach((detail) => {
	if (!detail.login) {
	return;
	}
	detailsMap[detail.login] = OptionsListUtils.formatMemberForList(detail);
	});

because we only initialize the data when the screen transition ends (didScreenTransitionEnd).

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 72 to 74 in 8375abe

	const {options, areOptionsInitialized} = useOptionsList({
	shouldInitialize: didScreenTransitionEnd,
	});

So, basically, the data is not ready yet, but we already trying to add back the selected user.

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

We should return early at the above when the data is not ready yet, preventing any logic inside the effect to run.

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 94 to 120 in 8375abe

	useEffect(() => {
	const newUsersToInviteDict: Record<number, OptionData> = {};
	const newPersonalDetailsDict: Record<number, OptionData> = {};
	const newSelectedOptionsDict: Record<number, MemberForList> = {};
	const inviteOptions = OptionsListUtils.getMemberInviteOptions(options.personalDetails, betas ?? [], debouncedSearchTerm, excludedUsers, true);
	// Update selectedOptions with the latest personalDetails and policyEmployeeList information
	const detailsMap: Record<string, MemberForList> = {};
	inviteOptions.personalDetails.forEach((detail) => {
	if (!detail.login) {
	return;
	}
	detailsMap[detail.login] = OptionsListUtils.formatMemberForList(detail);
	});
	const newSelectedOptions: MemberForList[] = [];
	if (firstRenderRef.current) {
	// We only want to add the saved selected user on first render
	firstRenderRef.current = false;
	Object.keys(invitedEmailsToAccountIDsDraft ?? {}).forEach((login) => {
	if (!(login in detailsMap)) {
	return;
	}
	newSelectedOptions.push({...detailsMap[login], isSelected: true});
	});
	}

if (!areOptionsInitialized) {
    return;
}

btw, i also noticed that the invite page could load infinitely when refreshed which was fixed before in #22508 but gets broke again in #38039. maybe we can create a new issue and use the same solution that I use in #22508

[melvin-bot]

@dylanexpensify Huh... This is 4 days overdue. Who can take care of this?

[dylanexpensify]

reviewing!

[melvin-bot]

@dylanexpensify Huh... This is 4 days overdue. Who can take care of this?

[dylanexpensify]

Hmm couldn't repro, @bernhardoj can you?

[bernhardoj]

@dylanexpensify I can still repro it whether I refresh on the invite selection page or the invite message page, the selection is always lost.

Screen.Recording.2024-06-05.at.18.23.04.mov

Screen.Recording.2024-06-05.at.18.23.43.mov

[melvin-bot]

@dylanexpensify this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

@dylanexpensify Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01123d71b4084d0c78

[dylanexpensify]

moving external!

[melvin-bot]

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

[ishpaul777]

@bernhardoj Proposal looks good and test well!

🎀 👀 🎀 C+ reviewed

btw, i also noticed that the invite page could load infinitely when refreshed which was fixed before in #22508 but gets broke again in #38039. maybe we can create a new issue and use the same solution that I use in #22508

can you please provide repro steps i'll report it in slack channel so a issue can be created

[melvin-bot]

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

[ishpaul777]

Waiting for review and assignment

[melvin-bot]

@roryabraham @dylanexpensify @ishpaul777 this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[dylanexpensify]

Waiting for @roryabraham to review, he's catching up from being ooo

[melvin-bot]

@roryabraham, @dylanexpensify, @ishpaul777 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

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

[dylanexpensify]

Nice!

[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 9.0.3-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix member is unselected when refresh at workspace invite message page and go back #44189

If no regressions arise, payment will be issued on 2024-07-10. 🎊

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

• @bernhardoj requires payment automatic offer (Contributor)
• @ishpaul777 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:

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

[dylanexpensify]

payment coming up!

[dylanexpensify]

Payment summary:

• Contributor: @bernhardoj $250
• Contributor+: @ishpaul777 $250

Please apply/request!

[dylanexpensify]

done!