[HOLD for payment 2023-08-21] [$1000] Web - User is getting error message "Please select at least one member to invite" when invite members again from deeplink

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

---

Action Performed:

1. Choose a Workspace -> Members.
2. Invite members -> Next.
3. Copy URL of "Add message" page.
4. Open a new tab, go to that URL.
5. Click Invite.
6. Try to invite new members again to reach "Add message" page.

Expected Result:

User can invite members again

Actual Result:

User is getting error message "Please select at least one member to invite" when invite members again from deeplink.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.43-2
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-07-20.at.6.58.50.PM.mov

Recording.3794.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1689856757832959

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018e72fd3799cdf925
• Upwork Job ID: 1682364647495725056
• Last Price Increase: 2023-07-28
• Automatic offers:
• bernhardoj | Contributor | 25910439
• dhanashree-sawant | Reporter | 25910440

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[ginsuma]

Proposal

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

After select members, go to invite message page by deeplink, invite again and get "Please select one member".

What is the root cause of that problem?

After we submit, props.invitedEmailsToAccountIDsDraft becomes empty and the text input is blurred => validate function called two times. The first one is for onSubmit, and the second is for onBlur then error message is visible. Because we set props.invitedEmailsToAccountIDsDraft to empty here when submitting.

We can skip navigating after submitting to see it. (Remove this LOC)

When we start to invite users again after using WorkspaceInviteMessagePage deeplink, WorkspaceInvitePage page is placed above in the stack navigator => reuse the WorkspaceInviteMessagePage is mounted already before => the error message still show.

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

Take advantage of withNavigationFocus already used in WorkspaceInviteMessagePage , we only validate when the page is focused.

validate() {
    const errorFields = {};
    if (this.props.isFocused && _.isEmpty(this.props.invitedEmailsToAccountIDsDraft)) {
        errorFields.welcomeMessage = 'workspace.inviteMessage.inviteNoMembersError';
    }
    return errorFields;
}

As my testing, it's enough to works for both web and native apps, but if we want to make sure we can change order for navigating before updating props.invitedEmailsToAccountIDsDraft to empty.

Navigation.navigate(ROUTES.getWorkspaceMembersRoute(this.props.route.params.policyID));
Policy.setWorkspaceInviteMembersDraft(this.props.route.params.policyID, {});

What alternative solutions did you explore? (Optional)

We can use a ref as a flag when submitting to skip validate too. Then we can reset that flag here

App/src/pages/workspace/WorkspaceInviteMessagePage.js

Lines 94 to 97 in be2c81f

	componentDidUpdate(prevProps) {
	if (!prevProps.isFocused && this.props.isFocused) {
	this.focusWelcomeMessageInput();
	}

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~018e72fd3799cdf925

[melvin-bot]

Current assignee @garrettmknight is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[tienifr]

Proposal

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

Web - User is getting error message "Please select at least one member to invite" when invite members again from deeplink

What is the root cause of that problem?

When users go to InviteMessagePage page through deeplink and click Invite button

we clear invitedEmailsToAccountIDsDraft

App/src/pages/workspace/WorkspaceInviteMessagePage.js

Line 126 in 041d640

Policy.setWorkspaceInviteMembersDraft(this.props.route.params.policyID, {});

then the input is blurred and onValidate is executed, at that time invitedEmailsToAccountIDsDraft is empty so we set the error. Unfortunately, InviteMessagePage page is not unmounted because this path isn't in the history. So when we go to InviteMessagePage again, the error will appear

App/src/components/Form.js

Lines 297 to 305 in 041d640

	onBlur: (event) => {
	// We delay the validation in order to prevent Checkbox loss of focus when
	// the user are focusing a TextInput and proceeds to toggle a CheckBox in
	// web and mobile web platforms.
	setTimeout(() => {
	setTouchedInput(inputID);
	onValidate(inputValues);
	}, 200);

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

We should create the new function (isRouteInHistory) in Navigation.js to check the route (in this case it is workspace/<<id>>/members) and check if it's in the history or not by using navigationRef.current.getState()

and update this line

App/src/pages/workspace/WorkspaceInviteMessagePage.js

Line 127 in 041d640

Navigation.navigate(ROUTES.getWorkspaceMembersRoute(this.props.route.params.policyID));

const wsMemberRoute = ROUTES.getWorkspaceMembersRoute(this.props.route.params.policyID);
Navigation.navigate(wsMemberRoute, !Navigation.isRouteInHistory(wsMemberRoute) ? 'UP' : undefined);

When we use type = 'UP' we can make sure the inviteMessage page is unmounted.

Note

If we don't use navigate(route, 'UP') in this case, when users click back button in InviteMember page, they will go to 'InviteMessage' page (it should be Workspace page)

What alternative solutions did you explore? (Optional)

We can add the new parameter to navigate function like shouldNavigateUp

if shouldNavigateUp is true, we'll check if the route isn't in history we will execute linkTo(navigationRef.current, route, 'UP');

Result

Screen.Recording.2023-07-21.at.20.39.39.mov

[bernhardoj]

Proposal

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

Getting an error when going to the invite message page after finishing an invite from a deep link.

What is the root cause of that problem?

To go to the workspace invite message page, the user needs to open Settings > Workspace List > Workspace Detail > Workspace Members > Invite page > Invite message page. Navigating through the page normally will result in the following navigation stack: [Settings, WS List, WS Detail, WS Members, WS Invite, WS Invite message]

In the WS Invite message page, pressing the Invite button will:

1. Add the member to WS
2. Clear up the member list draft from Onyx
3. NAVIGATE to WS Members

App/src/pages/workspace/WorkspaceInviteMessagePage.js

Lines 123 to 128 in 041d640

	sendInvitation() {
	Keyboard.dismiss();
	Policy.addMembersToWorkspace(this.props.invitedEmailsToAccountIDsDraft, this.state.welcomeNote, this.props.route.params.policyID, this.props.betas);
	Policy.setWorkspaceInviteMembersDraft(this.props.route.params.policyID, {});
	Navigation.navigate(ROUTES.getWorkspaceMembersRoute(this.props.route.params.policyID));
	}

On the web, pressing the Invite button also blurs the text input, which triggers the Form validation. The validation will give an error if the member list draft is empty. As we clear the draft when pressing the Invite button, an error is returned from the validation.

App/src/pages/workspace/WorkspaceInviteMessagePage.js

Lines 150 to 156 in 041d640

	validate() {
	const errorFields = {};
	if (_.isEmpty(this.props.invitedEmailsToAccountIDsDraft)) {
	errorFields.welcomeMessage = 'workspace.inviteMessage.inviteNoMembersError';
	}
	return errorFields;
	}

But this is fine because we already navigated to the WS Members page and the WS Invite message page is popped from the stack, so we won't be able to see the error message. Btw, the navigation stack now looks like this: [Settings, WS List, WS Detail, WS Members]. So, when we navigate again to the WS Invite message page, we will have a fresh page with a fresh Form state.

However, when we directly go to the invite message page (/workspace/{policyID}/invite-message), the navigation stack will be: [WS Invite message], and pressing the Invite button will push WS Members to the stack. On WS Members, we then press the Invite button which will also push it to the stack and now it looks like this: [WS Invite message, WS Members, WS Invite]. Notice that the WS Invite message is still in the stack.

Here is the issue. When we press Next, it will navigate to the existing WS Invite message that is still there on the stack. Because we are just navigating to the existing WS Invite message, the error from the Form validation is still there, thus we can see it.

So, the real issue here is that we should make sure the WS Invite message is popped out after inviting users.

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

Pop the WS invite message page before navigating to WS Members page.

sendInvitation() {
    ...
    Navigation.goBack();
    Navigation.navigate(ROUTES.getWorkspaceMembersRoute(this.props.route.params.policyID));
}