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