New Feature: Add a dedicated Workspaces page in settings

[trjExpensify]

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

---

Deliverables

1. Add Workspaces as a menu item on the Avatar > Settings page, incl. a preview of 2 workspace avatars right-aligned on the row
2. Add a new page and move the list of workspaces to that page
3. Add a New workspace green footer button to the bottom of that new page
4. Remove New workspace from the three dots overflow menu that's accessed from a workspace (leave Delete workspace there)

Platform:

• To be implemented consistently across all platforms

Notes/Photos/Videos:

Figma file

Expensify/Expensify Issue URL: N/A
Issue reported by: @trjExpensify
(Internal) Slack conversation: https://expensify.slack.com/archives/C038T8LKKV5/p1657879133021399

View all open jobs on GitHub

CC: @shawnborton @JmillsExpensify as you may be interested in following along.

[melvin-bot]

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

[trjExpensify]

I'll keep myself assigned for the CM portion. Passing this on to engineering first to triage.

[shawnborton]

Love it!

[thienlnam]

This will have to be on hold for API refactors (specifically for Policy_Create and Policy_Delete) cc @chiragsalian who is working on those -> currently held on Pattern B

After that, the rest of the items can be completed by an external contributor / or internal to make it quicker to correspond to design and UI items

Putting internal / on hold for now for these internal issues

https://github.com/Expensify/Expensify/issues/215184
https://github.com/Expensify/Expensify/issues/215181

[trjExpensify]

Ah cool, fair enough!

[thienlnam]

Still holding

[chiragsalian]

Discussed 1:1 with jack. Taking over the issue.

[chiragsalian]

The refactors all got unblocked and since those are the priority i'll first finish the API refactors and then get to this.

[trjExpensify]

Wahoo, nice! 😍

[JmillsExpensify]

Ya, seriously! This is a nice improvement.

[roryabraham]

If there's only one workspace, will we keep the same UI we have today?

[shawnborton]

@NickTooker this help article about the free plan workspace might be helpful for you.

We basically need a title and a little blurb to help inform and encourage users.

[NickTooker]

Perfect! Thanks, @shawnborton - back shortly!

[NickTooker]

For the title - I'm not sure we need to change much from the title in the current mock. I think this is exactly what we want the user to do.

For the text - I am pulling from the help article that Shawn provided (which was great!). I think we want to convey what the workspace does, and that it needs to be set-up in order to access it's features. Let me know you initial thoughts and we can tweak this together!

Create a Workspace
Workspaces are a one-stop shop for managing your settings, reimbursing receipts, managing cards, sending invoices, paying bills, and more! Create a new Workspace to access all available features!

[shawnborton]

Nice, thanks Nick! What do you think about slightly trimming it down and omitting the !?

[NickTooker]

I think that looks great and reads much better. Thumbs up from my end!

[chiragsalian]

awesome, thanks guys, i'll update the code.

[chiragsalian]

While working on the red brick road testing for another issue i just remembered that with the changes here whats best for showing the red dot. Currently on production its like this,

Should we just show the red dot on the left of the avatars here?

Thoughts @shawnborton?

[shawnborton]

That makes sense to me - though i think I would put the red dot to the right of the avatars so that the red dot is always in the same spot near the arrow?

[chiragsalian]

Actually coming back to this, so shawn is it possible to provide mockups of how you want this to look with and without the red dot. Ideally, I would like things to be in the same place but I wanted to confirm the expectation. Will the avatars move a little left when there is a red dot and then move back more right when there is no red dot? Or were you thinking of static positions?

[shawnborton]

Will the avatars move a little left when there is a red dot and then move back more right when there is no red dot?

This is exactly what I was thinking. Happy to provide a mock if needed, but I think with flexbox you would just add the red dot inbetween avatars and the right arrow, all vertically middle-aligned.

[chiragsalian]

okay sounds good, i'll try that out.

[chiragsalian]

okay, how does this look. Can you check if the alignments are good. Two screenshots, one without redbrick and one with,

Web - Without red brick,

Web - With red brick,

Mobile - Without Red brick

Mobile - With Red brick

Let me know if this looks good. The screenshot includes badge i.e., 0.00 next to Payments to confirm the alignment of workspaces and that was the same. I wasn't sure if it was, if i need to move it around let me know. Or if anything else should be adjusted.

[shawnborton]

I think that looks pretty good to me! Perhaps the badge/red dot could be 4px closer to the arrow though?

[jamesdeanexpensify]

I was looking back at the proposed copy for this screen, and I'm wondering if the suggestion below is still accurate and a bit more succinct? Assuming mostly admins will create workspaces, at least to start...

Create a new Workspace
Workspaces are where you'll chat with your team, reimburse expenses, issue cards, send invoices, pay bills, and more -- all in one place.

[chiragsalian]

Sure, I moved the red dot 4px closer to the arrow. It looks like this,

Cool. I'm not sure of the copy so I'll let @NickTooker weigh in while i build that screen.

[shawnborton]

Sweet, that looks great to me - thanks Chirag!

[chiragsalian]

Shawn, does this look alright for the empty workspace page?

I feel like the subtitle is too close to the title, but i haven't changed it and just used the default values from the existing component. Let me know if you prefer I leave it like this or would prefer me to add some padding/margin after the title "Create a workspace".

Additionally, I'm waiting on the final copy before i ask for Spanish translation.

[shawnborton]

I agree with you, let's add maybe 4 or 8 more pixels in between title and body text to that main component.

[chiragsalian]

Done, this is margin-bottom 8,
Web -

Mobile -

I've updated the component vs having a different style just for this one. I think its fine since previous usages of the same component look fine to me,

[shawnborton]

Nice, that looks good to me.

[chiragsalian]

Moved the copy discussion to slack to maybe finalize it with more speed.

[JmillsExpensify]

Woo! This looks awesome. Great work.

[chiragsalian]

Okay, I took some time fighting with the styles to get things consistent on Mobile/Web without any errors and testing took a bit of time too. Anyway, I finished testing, added screenshots, and just placed the code for review.

[trjExpensify]

Niceeee! Thanks, Chirag! ❤️

[aldo-expensify]

@chiragsalian I think the red dot may be missing for the "Workspaces" entry in the settings menu:

Screen.Recording.2022-10-31.at.4.18.06.PM.mov

We may want to replace this line:

App/src/libs/PolicyUtils.js

Line 51 in 2f4bad7

if (hasPolicyMemberError(policyMemberList) || hasCustomUnitsError(policy)) {

by

if (hasPolicyMemberError(policyMemberList) || hasCustomUnitsError(policy) || hasPolicyError(policy)) {

The detail with this fix is that it will make a red dot appear next to the workspace, and I think it shouldn't be there:

so.. the better fix I think would be to replace the line here:

App/src/pages/settings/InitialSettingsPage.js

Line 132 in 2f4bad7

.find(policy => PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, this.props.policyMembers))

by

.find(policy => PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, this.props.policyMembers) || PolicyUtils.hasPolicyError(policy))

[aldo-expensify]

Sorry, I think it is better if I just create a new GH issue for this and ping Chirag in case he wants to do it.

Update: created issue here: #12327 and draft PR: #12329

[chiragsalian]

I think the red dot may be missing for the "Workspaces" entry in the settings menu:

That's odd. We tested the red dot for the Workspaces in the settings menu. I guess we must've missed a scenario since I tested it against members error and not an individual workspace error. Thanks for the catch.