Allow editing of Workspace names by HorusGoul · Pull Request #4298 · Expensify/App

HorusGoul · 2021-07-29T11:39:56Z

Details

Adds an edit button at the right side of the workspace name that opens a modal where you can change the workspace name.

Fixed Issues

$ https://github.com/Expensify/Expensify/issues/171962

Tests/QA Steps

Create or open a workspace
Click the shown in along with the avatar
A modal with an avatar editor and a name input should open.
In that modal, change everything and press "Save"
The modal should close, and everything you changed in the modal should get updated everywhere.

Tested On

Screenshots

Web

Screen.Recording.2021-08-02.at.09.50.02.mov

Mobile Web

Screen.Recording.2021-08-02.at.09.54.38.mov

Desktop

Screen.Recording.2021-08-02.at.09.50.02.mov

iOS

Screen.Recording.2021-08-02.at.09.43.59.mov

Android

Screen.Recording.2021-08-02.at.09.48.46.mov

kevinksullivan · 2021-07-29T14:25:53Z

@HorusGoul @MitchExpensify I don't think we want to add another pencil icon. Let's keep the one pencil icon, and then when a user selects that we open this right pane, which allows a user to edit their workspace avatar OR their workspace name.

mountiny · 2021-07-29T14:28:34Z

Was just testing it and I agree with @kevinksullivan, that will be cleared, two same icons right next to each other seem weird.

kevinksullivan · 2021-07-29T14:30:34Z

@shawnborton I am also curious for your thoughts on this one. I think we've discussed the idea of a business overview page for the purpose of editing name, avatar, business address, etc... But in the meantime, I think it is ok to stick with a single pencil icon that opens the right pane for editing avatar and/or name.

shawnborton · 2021-07-29T14:32:38Z

I agree with that sentiment Kevin.

Separately, I wonder if you wouldn't mind making some quick tweaks to the pencil icon/circle that's over the workspace icon? Ideally it would look more like this:

The gray circle is 28x28
The pencil icon is 20x20
The circle is -4 from the bottom edge and -4 from the right edge

HorusGoul · 2021-07-29T14:57:59Z

Awesome, I'll move the avatar editor inside the modal and leave only 1 pencil icon.

Separately, I wonder if you wouldn't mind making some quick tweaks to the pencil icon/circle that's over the workspace icon?

Sure!

MitchExpensify · 2021-07-29T15:13:40Z

Completely agree after seeing the mock! So much better

mountiny

Haven't spotted any blockers in the code! Tested and works well 🎉 Great job!

HorusGoul · 2021-07-29T16:39:54Z

Haven't spotted any blockers in the code! Tested and works well 🎉 Great job!

I just found this little issue regarding the pencil button on iOS. I think it's related to the border being drawn inside the circle instead of outside:

Maybe that's why we had the other width/height values before. I'm gonna send another commit with a fix.

mountiny · 2021-07-29T16:42:57Z

Great catch! I am just wondering whether the Avatar change flow is not getting too hidden with this change. But that is not an issue now I guess, we will find out based on user feedback if they struggle to change the avatar.

HorusGoul · 2021-07-29T17:01:28Z

It should be ready for review again, and all videos have been updated in case you want to take a look!

mountiny

Thanks for catching that small problem. LGTM

shawnborton · 2021-07-29T18:43:49Z

Looks good, thanks!

shawnborton · 2021-07-29T21:38:43Z

src/pages/workspace/WorkspaceEditorPage.js

+                            onChangeText={name => this.setState({name})}
+                            onSubmitEditting={this.submit}
+                        />
+                        <Text style={[styles.mt2]}>{this.props.translate('workspace.editor.nameInputHelpText')}</Text>


Can we also use fontSizeLabel and colorMuted here? This way it appears like hint text under the input.

I see there's a formHint style that has those! I just sent the commit with the changes 😄

shawnborton · 2021-07-29T21:42:55Z

Actually after looking at this a second time, I wonder if it feels weird that you see the avatar image with a pencil icon twice. Maybe for consistency's sake, we should remove the pencil icon from the first screen and just make it so that tapping the avatar or the workspace name will launch the rightDocked modal. From here, I would expect the avatar to have the pencil icon on it. This way we stay more consistent with say editing your profile, where you have to first click on your avatar image (with no pencil icon).

kevinksullivan · 2021-07-29T21:44:38Z

Yeah I agree with Shawn. Showing the pencil icon twice feels like overkill here, and I like keeping user avatar and workspace avatar designs consistent.

HorusGoul · 2021-07-30T08:38:39Z

we should remove the pencil icon from the first screen and just make it so that tapping the avatar or the workspace name will launch the rightDocked modal.

Tapping the avatar or the workspace name to access the editor could look weird, as there would be no visual hints for the user. If we want to make this consistent with the user profile editor, we need to add a new menu option like this one:

What do you think?

mountiny · 2021-07-30T09:47:33Z

That is a good point, at the same time, I would say it is not very uncommon from other applications and UIs that you click on the avatar/name to change it (Facebook for example).

What I would suggest is instead of adding another Profile or its equivalent for Workspace, make the User Avatar and name Pressable too in the Settings panel and it will lead to the Profile page.

This will ensure a consistency between these two without over-engineering the Workspace page. What do you think? 👀

…rkspace editor

…name

…le settings

HorusGoul · 2021-08-02T08:24:15Z

I just submitted the changes to make it that way for both the User profile and the Workspace profile. I've also updated the videos 😄

mountiny

Great, tested! Love this flow.

OSBotify · 2021-08-02T13:28:32Z

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

OSBotify · 2021-08-06T03:18:13Z

🚀 Deployed to staging in version: 1.0.82-8🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2021-08-11T22:18:39Z

🚀 Deployed to production by @francoisl in version: 1.0.83-1 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	failure ❌
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

HorusGoul added 7 commits July 29, 2021 11:38

Add edit button for workspace name

58e9005

Add WorkspaceNameEditor modal

529b62e

Remove debug statement

f172716

Add locales for the WorkspaceNameEditorPage

8f861f9

More locale changes

23208cc

Add setName function in the Policy actions file

dd0f53f

Connect WorkspaceNameEditorPage with the backend

00619b4

HorusGoul self-assigned this Jul 29, 2021

HorusGoul marked this pull request as ready for review July 29, 2021 12:48

HorusGoul requested a review from a team as a code owner July 29, 2021 12:48

MelvinBot requested review from mountiny and removed request for a team July 29, 2021 12:48

kevinksullivan self-requested a review July 29, 2021 14:26

HorusGoul added 2 commits July 29, 2021 17:08

Rename WorkspaceEditor routes and components

873a59b

Update locale key for the editor

3d19750

HorusGoul added 5 commits July 29, 2021 17:23

Update WorkspaceSidebar to only have 1 pencil icon

16046ae

Add Avatar selector to the WorkspaceEditorPage

8b10e0b

Upload avatars from the WorkspaceEditorPage correctly

6dc3caa

Update locales and add an error message when the avatar upload fails

7775758

Apply edit button style changes

e0a793f

mountiny previously approved these changes Jul 29, 2021

View reviewed changes

mountiny self-requested a review July 29, 2021 16:43

Make pencil icon consistent between platforms

12d183d

HorusGoul dismissed mountiny’s stale review via 12d183d July 29, 2021 16:59

mountiny previously approved these changes Jul 29, 2021

View reviewed changes

shawnborton reviewed Jul 29, 2021

View reviewed changes

Use formHint styles for the input help text

b20f1df

HorusGoul dismissed mountiny’s stale review via b20f1df July 30, 2021 08:33

mountiny mentioned this pull request Jul 30, 2021

Directly create a workspace and add the Edit Workspace page #4310

Merged

5 tasks

HorusGoul added 3 commits August 2, 2021 09:56

Wrap Workspace avatar and name in Pressable components to open the wo…

cbea851

…rkspace editor

Merge remote-tracking branch 'origin/main' into horus-edit-workspace-…

f62afb9

…name

Wrap User avatar and name with Pressable components to open the profi…

c7d41df

…le settings

HorusGoul requested review from mountiny and shawnborton August 2, 2021 08:18

mountiny approved these changes Aug 2, 2021

View reviewed changes

kevinksullivan merged commit 588700e into main Aug 2, 2021

kevinksullivan deleted the horus-edit-workspace-name branch August 2, 2021 13:27

This was referenced Aug 2, 2021

Deploy Checklist: Expensify.cash 2021-07-30 #4333

Closed

Deploy Checklist: Expensify.cash 2021-08-06 #4447

Closed

kavimuru mentioned this pull request Aug 7, 2021

[HOLD for payment 2021-09-17] Workspace - Add Loading UI after user saves profile photo #4487

Closed

Beamanator mentioned this pull request Aug 9, 2021

Edit workspace page gets automatically closed on Submit #4491

Closed

Conversation

HorusGoul commented Jul 29, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests/QA Steps

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

Uh oh!

kevinksullivan commented Jul 29, 2021

Uh oh!

mountiny commented Jul 29, 2021

Uh oh!

kevinksullivan commented Jul 29, 2021

Uh oh!

shawnborton commented Jul 29, 2021

Uh oh!

HorusGoul commented Jul 29, 2021

Uh oh!

MitchExpensify commented Jul 29, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mountiny left a comment

Choose a reason for hiding this comment

Uh oh!

HorusGoul commented Jul 29, 2021

Uh oh!

mountiny commented Jul 29, 2021

Uh oh!

HorusGoul commented Jul 29, 2021

Uh oh!

mountiny left a comment

Choose a reason for hiding this comment

Uh oh!

shawnborton commented Jul 29, 2021

Uh oh!

shawnborton Jul 29, 2021

Choose a reason for hiding this comment

Uh oh!

HorusGoul Jul 30, 2021

Choose a reason for hiding this comment

Uh oh!

shawnborton commented Jul 29, 2021

Uh oh!

kevinksullivan commented Jul 29, 2021

Uh oh!

HorusGoul commented Jul 30, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mountiny commented Jul 30, 2021

Uh oh!

HorusGoul commented Aug 2, 2021

Uh oh!

mountiny left a comment

Choose a reason for hiding this comment

Uh oh!

OSBotify commented Aug 2, 2021

Uh oh!

OSBotify commented Aug 6, 2021

Uh oh!

OSBotify commented Aug 11, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

HorusGoul commented Jul 29, 2021 •

edited

Loading

MitchExpensify commented Jul 29, 2021 •

edited

Loading

HorusGoul commented Jul 30, 2021 •

edited

Loading