[HOLD][$500] Feature request: Unable to add multiple emails at once as members to a room #26242

[mallenexpensify]

Coming from the below, which should be very similar

• https://github.com/Expensify/App/issues/26242

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. Go to staging.new.expensify.com
2. Log in with any account
3. Add multiple emails at once as members to a room

Expected Result:

Allow for multiple emails addresses to be added at once via a comma-separated list when inviting new members to a room.

Actual Result:

Unable to add multiple emails at once as members to a workspace

Workaround:

Unknown

Platforms:

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

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

Version Number: 1.3.95-5 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

Expensify/Expensify Issue URL: Issue reported by: @mallenexpensify Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1692837155454539

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017b2a4652d665e512
• Upwork Job ID: 1699456983730249728
• Last Price Increase: 2023-11-06

[melvin-bot[bot]]

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

[mallenexpensify]

@Samueljh1 would you like to work on this since you worked on the other? If so, the job price is $500.

[mananjadhav]

@mallenexpensify in this gets worked upon, can I work as C+? Helped with the previous issue too.

[mallenexpensify]

Yes, good 👀 Manan, I didn't think about the benefit of having the same C+ too

[Samueljh1]

@Samueljh1 would you like to work on this since you worked on the other? If so, the job price is $500.

Yes, happy to work on this

[melvin-bot[bot]]

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

[melvin-bot[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

[melvin-bot[bot]]

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

[mananjadhav]

@Samueljh1 Can you post a proposal so that we're aligned on the approach and the changes?

[Samueljh1]

• [HOLD for payment 2023-10-23] [$1000] Feature request: Unable to add multiple emails at once as members to a workspace #26242

The code changes are basically the same.

Proposal

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

When adding new members to a room, we can only invite one at a time.

What is the root cause of that problem?

The handlers and code in RoomInvitePage.js only have logic that support inviting one member at a time (e.g., userToInvite is a single value, instead of an array).

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

Update single-user state variable userToInvite to an array, and update all handling logic to support multiple users (e.g., iterate through the invited emails when updating the list view instead of updating a single item). When handling updates to searchTerm, we can parse the string with the same parsing logic from WorkspaceInvitePage.

What alternative solutions did you explore? (Optional)

N/A.

[Samueljh1]

https://github.com/Expensify/App/assets/10816880/f77d99a2-29f1-4dc4-a08e-99b6d8cd5343

Any reason why this is happening? I am not able to open the invite page. I cannot work on the task until this is resolved. I hope this will be considered in the timing as well of the fix?

Thanks

[mallenexpensify]

I have no idea @Samueljh1 , what platform and version are you on?

[Samueljh1]

I have no idea @Samueljh1 , what platform and version are you on?

Chrome MacOS new.expensify.com. Same issue on iOS Safari.

[DylanDylann]

Proposal

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

• Feature request: Unable to add multiple emails at once as members to a room

What is the root cause of that problem?

• Before, In WorkspaceInvitePage, if user types multiple emails in the search box, for example, "[email protected], [email protected], [email protected]", it will parse these text to the array [[email protected], [email protected], [email protected]] and for each string in this array, we can call the OptionsListUtils.getMemberInviteOptions(props.personalDetails, props.betas, email, excludedUsers); to get the result, and then wrap all the results to display in the search result sections.
• But the https://github.com/Expensify/App/pull/30859 removed this feature in WorkspaceInvitePage.

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

• If we still allow user to add multiple emails at once in room, we can apply the same logic as we did with WorkspaceInvitePage before, like below:

 useEffect(() => {
        let emails = _.compact(
            searchTerm
                .trim()
                .replace(/\s*,\s*/g, ',')
                .split(','),
        );

        if (emails.length === 0) {
            emails = [''];
        }

        const newUsersToInviteDict = {};
        const newPersonalDetailsDict = {};
        const newSelectedOptionsDict = {};

        _.each(emails, (email) => {
            const inviteOptions = OptionsListUtils.getMemberInviteOptions(props.personalDetails, props.betas, email, excludedUsers);

            // Update selectedOptions with the latest personalDetails and policyMembers information
            const detailsMap = {};
            _.each(inviteOptions.personalDetails, (detail) => (detailsMap[detail.login] = OptionsListUtils.formatMemberForList(detail)));

            const newSelectedOptions = [];
            _.each(selectedOptions, (option) => {
                newSelectedOptions.push(_.has(detailsMap, option.login) ? {...detailsMap[option.login], isSelected: true} : option);
            });

            const userToInvite = inviteOptions.userToInvite;

            // Only add the user to the invites list if it is valid
            if (userToInvite) {
                newUsersToInviteDict[userToInvite.accountID] = userToInvite;
            }

            // Add all personal details to the new dict
            _.each(inviteOptions.personalDetails, (details) => {
                newPersonalDetailsDict[details.accountID] = details;
            });

            // Add all selected options to the new dict
            _.each(newSelectedOptions, (option) => {
                newSelectedOptionsDict[option.accountID] = option;
            });
        });

        // Strip out dictionary keys and update arrays
        setUsersToInvite(_.values(newUsersToInviteDict));
        setPersonalDetails(_.values(newPersonalDetailsDict));
        setSelectedOptions(_.values(newSelectedOptionsDict));

        // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to recalculate when selectedOptions change
    }, [props.personalDetails, props.policyMembers, props.betas, searchTerm, excludedUsers]);

What alternative solutions did you explore? (Optional)

• NA

[mallenexpensify]

@Samueljh1 , I wasn't able to reproduce the issue you're encountering, I tried a few times/ways on staging on MacOS / Chrome.
@DylanDylann I've already assigned @Samueljh1 to the issue, they worked on a similar issue so they'll be working on this. I'll tag you if things don't work out and we want to consider your proposal

[DylanDylann]

Many thanks @mallenexpensify

[Samueljh1]

@Samueljh1 , I wasn't able to reproduce the issue you're encountering, I tried a few times/ways on staging on MacOS / Chrome. @DylanDylann I've already assigned @Samueljh1 to the issue, they worked on a similar issue so they'll be working on this. I'll tag you if things don't work out and we want to consider your proposal

Still unable to get it working. Do you mind sending a screen recording so I can see what you are doing? Thanks.

I have the code ready, I am just unable to test it because I can't get the drawer to open. (And it hasn't got anything to do with my changes, because I can't even get it working on new.expensify.com)

[Samueljh1]

This is the console message that appears when I click the invite button.

[mallenexpensify]

@mananjadhav do you have any idea what might be going on with/for @Samueljh1 ?

[mananjadhav]

@Samueljh1 Can you try creating a new room and checking? Are you sure you were able to add the members earlier?

[mallenexpensify]

I just checked and this is what I see for a private room in a workspace

[Samueljh1]

@Samueljh1 Can you try creating a new room and checking? Are you sure you were able to add the members earlier?

I can't even see the 'New room' option in the FAB. How can I do this? I own a workspace.

[Samueljh1]

This thread seems to explain why I can't add my own room: https://expensify.slack.com/archives/C01GTK53T8Q/p1641598356166900. Any way to get access to this feature so I can work on this issue @mallenexpensify?

Thanks

[mallenexpensify]

@Samueljh1 , I added [email protected] to the below betas, can you test/try now?

• policyRooms
• defaultRooms

[Samueljh1]

@Samueljh1 , I added [email protected] to the below betas, can you test/try now?

• policyRooms
• defaultRooms

Thank you, I can test it now.

[Samueljh1]

PR Created @mallenexpensify @mananjadhav https://github.com/Expensify/App/pull/31285

[mananjadhav]

Will review this by tomorrow.

[mananjadhav]

Confirming the expected behavior from the comment here.

@mallenexpensify What will be the expected behavior when we have some of the emails already a part of the room.

[mallenexpensify]

@mananjadhav and @Samueljh1 , before answering

What will be the expected behavior when we have some of the emails already a part of the room.

I was checking the flow for adding multiple users to a workspace via a comma-separated list and it didn't appear to be working, do either of you know why?

[DylanDylann]

@mallenexpensify I `ve commented in my proposal

But the https://github.com/Expensify/App/pull/30859 removed this feature in WorkspaceInvitePage.