[$2000] Workspace - When adding a new member, add another screen to invite users

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Access staging.new.expensify.com
2. Login with any account
3. Go to Settings -> Workspaces -> Open any workspace -> Manage members
4. Invite a new user -> Tap in search field

Expected Result:

User can see the list of his contacts without interference.

Actual Result:

When adding a new member to the workspace (using search), the user and search box is overlaid with keyboard. And also when scrolling up, the "Invite" button is hidden, which hides users from the list completely.

Workaround:

Unknown

Platforms:

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

• [ ] Android / native
• [x] Android / Chrome
• [x] iOS / native
• [x] iOS / Safari
• [ ] MacOS / Chrome / Safari
• [ ] MacOS / Desktop

Version Number: 1.2.70.1

Reproducible in staging?: Yes

Reproducible in production?: Yes

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

https://user-images.githubusercontent.com/93399543/218290993-26bdbdb1-dd0d-40aa-9f68-8eac52712cc1.mp4

https://user-images.githubusercontent.com/93399543/218290966-af63fa68-6016-441e-bfab-94cc659e2e80.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0182c8f1bfbd7b65ae
• Upwork Job ID: 1625285025069547520
• Last Price Increase: 2023-02-21

[MelvinBot]

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

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• [x] This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• [x] 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
• [x] 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.
• [x] 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.
• [x] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~0182c8f1bfbd7b65ae

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[mallenexpensify]

Guessing this can be external. I did a quick-check to see if this bug might be occurring in other places on the app but wasn't able to find.

[priyeshshah11]

Proposal

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

The screen is covered by the the personal message view thus the user cannot see the input box where they are typing.

What is the root cause of that problem?

the root cause is using the flexShrink0 styling which is causing the personal message view to move up along with the keyboard. https://github.com/priyeshshah11/App/blob/main/src/pages/workspace/WorkspaceInvitePage.js#L336

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

We should remove the flexShrink0 styling for the personal message view to not bump up along with the keyboard & instead stay in it's position when the search box is focused.

[hellohublot]

Proposal

When the height of the screen is small and the height of the keyboard is large, the pop-up invitation message input box will cover the above search box

We'd better move this invitation message input box to another new page WorkspaceInviteMessagePage

https://github.com/Expensify/App/blob/e31cb5349e802a0c7386e6d171834344f63322a9/src/pages/workspace/WorkspaceInvitePage.js#L263-L274

inviteUser() {
    ...
    this.setState({shouldDisableButton: true}, () => {
        const logins = _.map(this.state.selectedOptions, option => option.login);
        const filteredLogins = _.uniq(_.compact(_.map(logins, login => login.toLowerCase().trim())));
-       Policy.addMembersToWorkspace(filteredLogins, this.state.welcomeNote || this.getWelcomeNote(), this.props.route.params.policyID);
-       Navigation.goBack();
+       Navigation.navigate(ROUTES.getWorkspaceInviteMessageRoute(this.props.route.params.policyID, filteredLogins))
    });
 }

class WorkspaceInviteMessagePage extends React.Component {

    render() {
        return (
            ...
           <TextInput
		    label={this.props.translate('workspace.invite.personalMessagePrompt')}
		    autoCompleteType="off"
		    autoCorrect={false}
		    numberOfLines={4}
		    textAlignVertical="top"
		    multiline
		    containerStyles={[styles.workspaceInviteWelcome]}
		    value={this.state.welcomeNote}
		    onChangeText={text => this.setState({welcomeNote: text})}
		/>
            ...
        );
    }
}

https://user-images.githubusercontent.com/20135674/218670339-99d570a5-d5fa-4c87-81b5-a33483a64c4c.mp4

Waiting for your suggestions

[MelvinBot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[abdulrahuman5196]

Proposal

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

When keyboard is open on the new member invite page, the user list and search box is partially hidden.

What is the root cause of that problem?

We show invite button component, privacy message component, invite message component above the keyboard on user searching the user list. As keyboard takes considerable amount of screen space and other components mentioned above also takes considerable screens space, we are end up with only limited screen space to show the search and list component.

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

There are multiple ways to solve this.

1. We can reduce the number of components we show above keyboard on search. For example we can move the invite message component from the showing above the keyboard by removing the component here and adding it next to the options list selector - https://github.com/priyeshshah11/App/blob/main/src/pages/workspace/WorkspaceInvitePage.js#L337
2. We don't show any component above the keyboard
3. we can reduce the sizes of components which we show above the keyboard.

@mallenexpensify But regardless of any option, we would require answer from design team to let us know what is the expected behaviour and what components to show. I can make the required changes from the design team as well.

Optional: We can make these changes only for small screen devices by check the screen size. Because for bigger screens we won't have these issues.

What alternative solutions did you explore? (Optional)

None

[mallenexpensify]

@mollfpr can you please review the above proposals?

But regardless of any option, we would require answer from design team to let us know what is the expected behaviour and what components to show.

@abdulrahuman5196, correct, thanks for pointing out. I was able to reproduce but didn't think of how we should show. I wonder if we should just minimize this area, possibly removing some/most of the text? (sorry, I have a weird issue where Github doesn't allow me to post images) https://www.screencast.com/t/Qx38wyZu5JPs

[mollfpr]

Reviewing proposals now!

[mollfpr]

@priyeshshah11 I try your solution, but it's not working.

@abdulrahuman5196 Could you provide the screenshot for your suggestion before we ask for the design team's opinion?

[priyeshshah11]

Thanks @mollfpr, my bad I don't know why it worked for me then but it's not working now.

[priyeshshah11]

Proposal

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

The screen is covered by the the personal message view thus the user cannot see the input box where they are typing.

What is the root cause of that problem?

the root cause is that the list height shrinks which is causing the personal message view to move up along with the keyboard & cover the search & list.

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

We should give the view around the optionsSelector a min height to fix the message box overlapping issue (Tested it properly this time, haha)

@mollfpr

[mollfpr]

@priyeshshah11 Could you share the screenshot of the result?

[priyeshshah11]

@priyeshshah11 Could you share the screenshot of the result?

@mollfpr Screenshot for above proposal

[mollfpr]

Sorry @priyeshshah11 on second thought will be helpful if you can record it with focus the search input and focus on the message input 😅

[priyeshshah11]

@mollfpr There you go

https://user-images.githubusercontent.com/38547776/219018381-a20f8551-97b6-4472-bfaa-3ca571116100.mov

[mollfpr]

Thanks @priyeshshah11!

[abdulrahuman5196]

@abdulrahuman5196 Could you provide the screenshot for your suggestion before we ask for the design team's opinion?

@mollfpr I asked the design team's opinion because there are multiple UI ways to solve this.

But as requested I am providing a sample of my suggestion.

1) Suggestion is to hide the privacy when the search field is focused and reduce paddings on the invite message component. This can free up atleast one row of extra space

https://user-images.githubusercontent.com/46707890/219037813-cdf991bd-a144-45e4-9c0f-7cb4e744c2ac.mov

2) We can reduce the invite message component to show one line alone on the input when Search field is focused. This could provide us with atleast 2 more rows of extra space

https://user-images.githubusercontent.com/46707890/219038879-186a60ea-9897-4e5d-bc1e-813a5a99a983.mov

Note: We can also try variations of the above suggestion to get other desired outputs as well. For example not hiding privacy and reducing invite message component alone to one liner.

Reference video without my change

https://user-images.githubusercontent.com/46707890/219040314-763d2d00-968d-4868-b96a-16a4df02b262.mov

[mollfpr]

Thanks, @abdulrahuman5196 that helps a lot! I like option 2 better.

---

@shawnborton We need your help here. The main issue is the input message is covered a lot of space in the options selector and needs more space for the user to scroll through the options while using the search input.

We have several proposals that will enhance the UI/UX.

1. Creating a new page for only submitting the message when inviting new members to the workspace. Ref https://github.com/Expensify/App/issues/15083#issuecomment-1429264426
2. Make the message input not overlap when the search input is focused. Ref https://github.com/Expensify/App/issues/15083#issuecomment-1431238247
3. Hide some of the components/some of the height from the message input when the search input is focused. Ref https://github.com/Expensify/App/issues/15083#issuecomment-1431373699

Also, you can put other preferred expected results about the issue. Thanks!

[shawnborton]

Started a discussion here

[mallenexpensify]

Thanks for raising Shawn. Is sounds like @priyeshshah11 recommendation here is the consensus winner. Do you and @thienlnam and @mollfpr agree?

https://user-images.githubusercontent.com/22508304/219520833-69697a53-7b49-4c67-a58a-44761ca01c8e.mov

[mollfpr]

I am concerned about @priyeshshah11's proposal result. The keyboard is not closed after selecting the option on the workspace invite page. We need to blur the search input to show the message input. On mWeb/Safari we can use the Done button on the keyboard, but on iOS, there's no Done button. The other way to blur the search input is, to scroll the options selector.

[priyeshshah11]

I am concerned about @priyeshshah11's proposal result. The keyboard is not closed after selecting the option on the workspace invite page. We need to blur the search input to show the message input. On mWeb/Safari we can use the Done button on the keyboard, but on iOS, there's no Done button. The other way to blur the search input is, to scroll the options selector.

@mollfpr Touching outside the input does close the keyboard & also pressing return in the keyboard does the same thing but yes we can blur the input on the options being selected during the PR if needed.

[priyeshshah11]

but yes we can blur the input on the options being selected during the PR if needed.

Actually, now I think we don't really need to do this as scrolling in the list & pressing return does dismiss the keyboard.

[mollfpr]

Still waiting for clarity on Slack...

[mallenexpensify]

@thienlnam @mollfpr what do you two propose we do next to keep this moving along?