Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle 666 errors in Policy.removeMembers #7229

Merged
merged 2 commits into from
Feb 7, 2022
Merged

Conversation

flodnv
Copy link
Contributor

@flodnv flodnv commented Jan 14, 2022

cc @iwiznia @marcaaron related to an internal thread here: https://expensify.slack.com/archives/C03TQ48KC/p1642178947340500

Details

This will give more accurate error messages instead of always the generic one.

Fixed Issues

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

Tests

  • Verify that no errors appear in the JS console

QA Steps

  • Verify that no errors appear in the JS console
  1. Setup a new workspace, add a new member
  2. On OldDot, make the new member's domain group restrict policy to the workspace (in Domain Settings > Members)
  3. On NewDot, try to remove the member from the workspace:

Screen Shot 2022-01-14 at 4 54 20 PM

Tested On

  • Web
  • Mobile Web
  • Desktop
  • iOS
  • Android

Screenshots

Web

See above

Mobile Web

Desktop

iOS

Android

@flodnv flodnv requested a review from a team January 14, 2022 16:58
@flodnv flodnv self-assigned this Jan 14, 2022
@MelvinBot MelvinBot requested review from ctkochan22 and removed request for a team January 14, 2022 16:58
@flodnv flodnv requested a review from a team as a code owner January 14, 2022 17:02
@flodnv flodnv removed the request for review from a team January 14, 2022 17:02
@MelvinBot MelvinBot requested a review from AndrewGable January 14, 2022 17:02
Copy link
Contributor

@iwiznia iwiznia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on that thread, it seems we want a better error handling than just a growl

@marcaaron
Copy link
Contributor

Based on that thread, it seems we want a better error handling than just a growl

Maybe we can loop in @Expensify/design to help us with this one.

We don't really have a clear guidance for how to handle server errors in non-forms. Seems like there are a couple of options:

  1. Turn this into a form (I am not evil enough to ask Florent to do this 😂 )
  2. Come up with a slightly different pattern...

Here's a quick attempt at 2 with the following reasoning...

A button that triggers an API request should show a loader like we do for a form

2022-01-14_12-13-50

If the request doesn't not succeed we should remove the option to repeat this action (just a thought but I can see not removing it as well) and replace it with a message

2022-01-14_12-21-21

@iwiznia
Copy link
Contributor

iwiznia commented Jan 14, 2022

That looks fine, but would that mean we would block any actions while the request is being processed? I don't quite like that.
Maybe we could instead show some kind of popup on the button that was pressed?

@marcaaron
Copy link
Contributor

Maybe we could instead show some kind of popup on the button that was pressed

Not sure if I understand the meaning of a "popup", but sounds kind of like you are suggesting an inline Growl. What makes the error popup go away? Is it time-based like the Growl? Can or should it be manually dismissed? Should we leave it there until the user does something else?

2022-01-14_12-39-31

@iwiznia
Copy link
Contributor

iwiznia commented Jan 14, 2022

kind of like you are suggesting an inline Growl

Yeah, like a growl with a small speech bubble pointing to the button that triggered the action. You would manually dismiss it by clicking on it or it can have a close button somewhere. I would guess that interacting again with the button would dismiss it too.

@marcaaron
Copy link
Contributor

Something similar to this but pointed at the button?

a58b4d674e014a38eb764ef062430885168e85af_2_690x360

@shawnborton
Copy link
Contributor

We don't really have a clear guidance for how to handle server errors in non-forms. Seems like there are a couple of options:

How do we currently handle server errors in forms?

@iwiznia
Copy link
Contributor

iwiznia commented Jan 17, 2022

Something similar to this but pointed at the button?

Yeah

@iwiznia
Copy link
Contributor

iwiznia commented Jan 17, 2022

How do we currently handle server errors in forms?

That's explained in this section: https://docs.google.com/document/d/1DI4jQ0nyfi2JczhPT440orwlXsTP_O-aGvg-HLmcbwI/edit#bookmark=id.odca5qx1yozc

@marcaaron
Copy link
Contributor

We add them to the bottom of the screen above the submit button. We could do the same here, but we are exploring alternatives because this is not a form.

@shawnborton
Copy link
Contributor

Well just because it's not a "form" doesn't mean we can't do something similar right? Personally I really like what you outlined in your comment here.

@marcaaron
Copy link
Contributor

Well just because it's not a "form" doesn't mean we can't do something similar right?

Let's explore whether it works or not. The "form" gives the user some indication that things are loading in a button and then we show server errors above this button once the loading is done. Without the submit button the error message would just pop up at the bottom of the screen. Which does not seem much better than a Growl and also adds the question of how long the message should persist on screen.

Probably this conversation is getting a little deep for this particular issue - but if we don't want to use a Growl then it would be nice to settle on various patterns and have a bunch of common UI error handling scenarios to pull from or advise people to implement when this topic comes up.

@iwiznia
Copy link
Contributor

iwiznia commented Jan 17, 2022

Also this being a list which can (and probably will) be long, showing the error on the bottom is probably not the best, because it's possible it's out of the user's view...

@shawnborton
Copy link
Contributor

What about the two mockups you posted in your comment above? It seems like that would be a great way to handle this? Essentially the "form" is encapsulated into the small bottom-docked modal.

@marcaaron
Copy link
Contributor

I like it, but @iwiznia pointed out here that maybe this action should have an optimistic UI i.e. should the user wait to find out if it was successful and be aware of the "loading" state? Or should they simply see the change happen, then get rolled back, then see some indication that it was not successful.

@shawnborton
Copy link
Contributor

Got it, I hear ya. I think most of the time I agree with wanting an optimistic UI. But I can see an argument that we don't need it when taking some kind of delete/remove action like this. Otherwise I guess we could optimistically take the action, close out the modal, and then relaunch the modal with an error message if we have one.

@flodnv
Copy link
Contributor Author

flodnv commented Feb 2, 2022

@iwiznia Can we:

  1. Merge this PR to provide instant value to users. This PR is only improving things, it is not making anything worse / different than it is today
  2. Create an External issue to improve this flow further
    ?

@iwiznia
Copy link
Contributor

iwiznia commented Feb 7, 2022

Sure

@iwiznia
Copy link
Contributor

iwiznia commented Feb 7, 2022

Not up to me though, @AndrewGable is tagged as reviewer and did not approve

@AndrewGable AndrewGable merged commit bea8b19 into main Feb 7, 2022
@AndrewGable AndrewGable deleted the flo_remove666error branch February 7, 2022 20:47
@OSBotify
Copy link
Contributor

OSBotify commented Feb 7, 2022

✋ 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
Copy link
Contributor

OSBotify commented Feb 9, 2022

🚀 Deployed to staging by @AndrewGable in version: 1.1.38-0 🚀

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

@mvtglobally
Copy link

@flodnv We are unable to find ""new member's domain group restrict policy to the workspace" in the OldDot. Can you please confirm where in the profile this settings should appear?

@flodnv
Copy link
Contributor Author

flodnv commented Feb 11, 2022 via email

@mvtglobally
Copy link

@flodnv Here is what we see in the Groups. What options out of these restricts Workspace?
Screen Shot 2022-02-12 at 1 24 50 PM
When we tried to enable "Restrict expense policy creation/removal" It blocked us from creating any workspaces

@Julesssss
Copy link
Contributor

Hey @flodnv, could you confirm which switch is the correct one please

@flodnv
Copy link
Contributor Author

flodnv commented Feb 14, 2022 via email

@mvtglobally
Copy link

We are checking

@mvtglobally
Copy link

@flodnv Can you please double check the issue above. We are seeing different error in PROD, but I assume its expected. Pls confirm it doesnt need to be a deploy blocker

@flodnv
Copy link
Contributor Author

flodnv commented Feb 14, 2022

That's definitely unrelated to this PR. Thanks!

@OSBotify
Copy link
Contributor

🚀 Deployed to production by @Julesssss in version: 1.1.38-3 🚀

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants