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

@dylanexpensify

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:

Create Workspace
Go to Members> Invite> Enter any email> Next
Refresh the Add message page
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?

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

@dylanexpensify

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.

@dylanexpensify

@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

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.

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

@dylanexpensify

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

reviewing!

@dylanexpensify

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

@bernhardoj

Hmm couldn't repro, @bernhardoj can you?

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

@bernhardoj

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)

@ishpaul777

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:

payment coming up!

@bernhardoj

Payment summary:

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

Please apply/request!

done!

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

Proposal

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

What is the root cause of that problem?

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

38 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

	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});
	});
	}

	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 {options, areOptionsInitialized} = useOptionsList({
	shouldInitialize: didScreenTransitionEnd,
	});

	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});
	});
	}

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on May 23, 2024

lanitochka17 commented on May 23, 2024

dragnoir commented on May 23, 2024

Proposal

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

What is the root cause of that problem?

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

bernhardoj commented on May 24, 2024

Proposal

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

What is the root cause of that problem?

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

melvin-bot commented on May 28, 2024

dylanexpensify commented on May 29, 2024

melvin-bot commented on Jun 3, 2024

dylanexpensify commented on Jun 5, 2024

38 remaining items

melvin-bot commented on Jul 3, 2024

melvin-bot commented on Jul 3, 2024

melvin-bot commented on Jul 3, 2024

dylanexpensify commented on Jul 10, 2024

dylanexpensify commented on Jul 12, 2024

dylanexpensify commented on Jul 12, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions