Add a Settings page to configure people in workspace

[mountiny]

Details

This PR adds a workspace configuration page where admins can remove people from their workspaces or use modal to invite new members.

cc @marcaaron @MitchExpensify @Jag96 @madmax330

Fixed Issues

Fixes https://github.com/Expensify/Expensify/issues/166468

Tests

1. Create a free workspace policy via the global create menu
2. Navigate to the settings screen and verify this workspace is visible
3. Tap the workspace
4. Tap the "People" option on the next screen
5. If there is only you, the admin, in the workspace, use the green Invite button which will bring in a modal from a side. Enter an email of an account you want to add to the workspace.
6. Once you added the number of accounts to the workspace you would wish, select some using the checkboxes on the left side. As soon as you select one checkbox, the Remove button should turn bright red. Click on the Remove button.
7. A confirmation modal looking like this should show up. Click Remove again to confirm the removal.
   
8. Make sure the person selected has been removed from the list and it does not show up even after page refresh.
9. Now, try selecting the first uppermost checkbox and make sure that all the checkboxes has been checked.
10. Go on and try to remove all of the members of the workspace.
11. Your account, the admin, should stay unremoved after this action. That is the correct behaviour, you cannot remove admin of workspace through this page.

QA Steps

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

[mountiny]

I will be making progress on this one over the weekend so I can ask clarifying questions on Monday.

[mountiny]

@marcaaron Sorry for polluting the PR with merged commits from Rajat's branch. Should I squash the commits to one or can I leave it like that?

@MitchExpensify Progress update:

I have shamelessly used great work from Rajat and Joe. I have added the People page, so far with title, tagline and the two buttons where only Invite button does what it should so far.

I will need to update the src/styles/themes/default.js with appropriate buttonDangerBG and buttonDangerHoveredBG and anything needed there as E.cash does not have red themed buttons yet.

I have set up state property selectedEmployees, which will be used to keep track of the people checked to be potentially removed.

Tomorrow I will work on the table and remove functionality.

[mountiny]

@marcaaron I guess with the commit history, we can just leave it like this and once Rajat's PR will be approved and merged into main, this diff will disappear.

[marcaaron]

@marcaaron Sorry for polluting the PR with merged commits from Rajat's branch. Should I squash the commits to one or can I leave it like that?

Squashing commits is fine as long as reviews have not yet started.

@marcaaron I guess with the commit history, we can just leave it like this and once Rajat's PR will be approved and merged into main, this diff will disappear.

I would maybe suggest we take out the unmerged changes from Rajat's PR and set up this view as as standalone page for now. We can always tie everything together later and it would make the changes here easier to review (or we can wait until Rajat's changes are merged, but that seems less ideal).

[mountiny]

@marcaaron
Update: I have used the InvertedFlatList to create the list of employees. The styling will definitely need some polishing to match the proposed design.

Can you please give me a hint what is the best way for writing something like @media queries as we need to change the cell design slightly for mobile?

For now, I have included mockData for easier troubleshooting of the design and in case you do not have the correct policyId yet. But it works with employeeList too.

Next, I will work on adding the the Remove onyx functionality. The checkboxes on page should already work. i will also look into taking the Rajat changes out.

@shawnborton I thought you might be the best one to ask regarding design, for the Admin badge, there is the little tick. Is that already somewhere in code or is it something new I should add. In that case, would you have an example of something similar? Thank you!

@marcaaron I wanted to ask for a clarification to this last bullet point of the doc:

A badge that indicates the admin (hint: it’s only the current user for now and will be used from ONYXKEYS.SESSION)

I cannot see anything helpful to find out if the user is admin in SESSION. Is that something which is being implemented somewhere else? Or who should I show the admin badge at now? Thank you!

Thank you guys for any feedback on the code so far!

[marcaaron]

Update: I have used the InvertedFlatList to create the list of employees. The styling will definitely need some polishing to match the proposed design.

We probably can just use the regular FlatList that comes with React Native as we don't need to invert the content for this case (only for a chat and anything that has content from the bottom to top).

Can you please give me a hint what is the best way for writing something like @media queries as we need to change the cell design slightly for mobile?

https://github.com/Expensify/Expensify.cash/blob/main/src/components/withWindowDimensions.js

I cannot see anything helpful to find out if the user is admin in SESSION. Is that something which is being implemented somewhere else? Or who should I show the admin badge at now? Thank you!

We can access the current user's login via session key and then compare to the admin email. For example, here we check to see if the currently logged in user has a "phone login" so we can do something similar to that...

https://github.com/Expensify/Expensify.cash/blob/c1536a83ef628f27dcae5d0320bfba16d7bff58e/src/pages/ReimbursementAccount/ReimbursementAccountPage.js#L112

[shawnborton]

@mountiny the asset already exists as an .svg, it's probably named checkmark.svg

There is some other design feedback I have too about the overall style of the modal, but I know we have another contributor working on some of these styles for the Expensify Card stuff. @marcaaron what do you recommend we do here? Wait and do a follow up?

[marcaaron]

Sounds fine as long as the focus is on what's inside the modal @shawnborton? The rest we can cover with Rajat since we should be removing the code from here so we can tackle the relevant changes in each. So just this area and not the overall style of the modal.

[shawnborton]

Cool, that works for me!

[mountiny]

@shawnborton Feel free to leave the design feedback here, I will tackle this first thing in a morning tomorrow and hopefully get close to finish!

[shawnborton]

Things look good to me. But actually @michelle-thompson can you remind me, what do we need the checkmark for in the little Admin pill?

[michelle-thompson]

I think we actually decided against that since this table will only show who's already been added to the workspace.

[shawnborton]

Oh nice, that was easy. Mind adding an up-to-date mock here when you get a chance?

[michelle-thompson]

Hmm, none of the above mockups have checkmarks in the pills though?

Here it is in case I'm missing something:

[shawnborton]

Check out the linked issue though: https://github.com/Expensify/Expensify/issues/166468 You will see the checkmark there

[TomatoToaster]

Boom! It's working very nicely now. I am testing it with the banner here (right now it won't work on localhost on the master branch, but I'm updating it in this PR:https://github.com/Expensify/Web-Expensify/pull/31302 and will test it when that one goes live)

[TomatoToaster]

Nice 👍🏾

[shawnborton]

Another small design comment: maybe my eyes are playing tricks on me, but can someone confirm that the border width of the lines above & below the user rows are 1px? Same with the border divider between the left pane and right pane - is that 1px wide? Optically it feels like it might be 2 so just want to double check.

[mountiny]

@shawnborton The divider between left and main part is actually 2px wide and the row dividers are also 2px wide.

Should it all be only 1px?

[shawnborton]

Yup - they should all be 1px, thanks!

[mountiny]

Gonna update it!

[marcaaron]

Gonna merge this since it's blocking some other things + the only remaining blocker was the border which is fixed. Thanks for the reviews @TomatoToaster !!

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[roryabraham]

Unfortunately the deploy comments are not working right now. This was deployed to staging yesterday.

[kavimuru]

Android - App is crashing after entered an email of an account to add to the workspace

Expected Result:

Able to add the number of accounts to the workspace

Actual Result:

App is crashing after entered an email of account

Actions Performed:

1. Lunch the app
2. Log in with expensifail account
3. Click on Plus button and Select Workspace
4. Tap the workspace
5. Tap the "People" option on the next screen
6. use the green Invite button which will bring in a modal from a side.
7. Enter an email of an account you want to add to the workspace

Platform:

iOS
mWeb
Android ✔️

Build:

1.0.76-0

Notes/Images/Video:

Bug5144843_Screen_Recording_20210708-220332_Expensifycash.mp4

log file.txt

[Jag96]

Looks like this is caused by this line because policy.employeeList is undefined for this flow. I'll move this to an issue and make a PR for this.

[s77rt]

This PR caused a bug #17166. The WorkspacePeoplePage suffers from stale data issue.
Selected employees are stored in a state that is filled with values from policy.employeeList prop but it does not react to changes to that prop e.g. if we clear policy.employeeList the selectedEmployees array would still hold values.