enso-org
Improve Invitation flow
Pull Request Description
Tl;dr
Closes: enso-org/cloud-v2#1186 This PR significantly improves the invitation UX and add ability to view/resend/copy/delete invitations
Demo Presentation
https://github.com/enso-org/enso/assets/61194245/62124243-50ce-47e1-bcac-789463b5e755
Context:
This Change:
What the change does in the larger context? Specific details to highlight for review:
- Redesign the Invitation dialog
- Add the ability to edit emails after typing
- Adds ability to use different separators:
<space>,<semicolon>,<colon>or<newline> - Shows Invitation on the
memberspage in settings. - Adds ability to remove, resend, copy or delete invitations
- Improve the UI of dialogs, buttons
Test Plan:
Go over how you plan to test it. Your test plan should be more thorough the riskier the change is. For major changes, I like to describe how I E2E tested it and will monitor the rollout.
Checklist
Please ensure that the following checklist has been satisfied before submitting the PR:
- [ ] The documentation has been updated, if necessary.
- [ ] Screenshots/screencasts have been attached, if there are any visual changes. For interactive or animated visual changes, a screencast is preferred.
- [ ] All code follows the Scala, Java, TypeScript, and Rust style guides. In case you are using a language not listed above, follow the Rust style guide.
- [ ] Unit tests have been written where possible.
QA :x: ("CSS.highlights is undefined" crashing the entire app the moment i press any key in the invite modal)
QA :x:
- Note: QA performed on Electron as the modal is currently still crashing on Firefox.
- :heavy_check_mark: Emails in the "invite users" modal are now editable
- :heavy_check_mark: Pending invites are visible in the "members" settings tab
- :warning: No warning when typing two of the same email in the input box. Maybe it shouldn't block sending invites, but IMO it should still be highlighted - e.g. in case the user copy-pasted an email because they plan to fill in the rest later (e.g.
[email protected]) - :warning: "Spaces" -> "spaces, commas or semicolons" - or "spaces,
,or;" - :x: The font size of the success screen is way too big:
- :warning: The entire list is surrounded by quotes. Either each individual email should be surrounded by quotes, or there should be no quotes at all.
- :information_source: Cannot mass delete invites. Maybe we should have a button to clear all pending invites?
- Marked as :information_source: because multi-select would require a major refactor and hence is probably out of scope.
- :x: The modal cannot be closed by clicking on the dimmed background
- :x: Username should be a separate column in the "members" table in the settings
- :x: You should not be able to remove yourself from the organization
- :warning: Remove button should probably also always be red
- :x: No dimmed background for "invite" modal in "members" settings tab
- :heavy_check_mark: Clicking outside the modal hides the modal
- :warning: Ideally, deleted invitations would be removed from the list optimistically
- :warning: Deleting multiple invitations at once feels laggy
Minor UI nits:
- :warning: The font size for the title is tiny for some reason
- :warning: we should maybe make the close button red on hover? see the dashboard-122 branch (or related PR) for the specific color that is currently being used
- The border radius of the buttons are a lot lower than those of the buttons everywhere else
- The height of the buttons is also inconsistent
Addressing your QA remarks:
❌ Username should be a separate column in the "members" table in the settings
Why though?
❌ You should not be able to remove yourself from the organization
Currently, this button does nothing, I think we can tune up the behavior in this issue: https://github.com/enso-org/cloud-v2/issues/890
❌ No dimmed background for "invite" modal in "members" settings tab
Popovers do not dim background because basically, they are tooltips with rich content.
we should maybe make the close button red on hover
Not sure. I think generally we should use red color when we want to highlight irreversible actions like "Remove" or cancel. Closing the dialog isn't one of them.
Username should be a separate column why?
for consistency - none of our other tables have multiline cells
Currently, this button does nothing
we have a dedicated button elsewhere for deleting the current user, and it comes with plenty of warning
Popovers do not dim background
in that case we might want an actual modal instead - the "invite users" dialog is something that:
- should take the user's focus, and
- should either be addressed immediately (or closed immediately)
Closing the dialog isn't an irreversible action
oh, i meant the traffic light in the top left, so that it matches the macos traffic lights
for consistency - none of our other tables have multiline cells
We'll have then an empty cell for invitations, which is strange.
in that case we might want an actual modal instead - the "invite users" dialog is something that:
Okay
oh, i meant the traffic light in the top left, so that it matches the macos traffic lights
Good idea 👍
No warning when typing two of the same email in the input box. Maybe it shouldn't block sending invites, but IMO it should still be highlighted - e.g. in case the user copy-pasted an email because they plan to fill in the rest later (e.g. [email protected])
We just ignore duplicates, not sure we need to warn users...
we have a dedicated button elsewhere for deleting the current user, and it comes with plenty of warning
Thanks for noticing, will take a look once when we'll work on this feature. Ideally, I think, we should merge the behavior. But for invitations - I think it's safe if we delete without confirmation (We can create a new invitation anytime)
- Go to members page is not working (nothing happens)
- Secondly if
GET /invitesis not ending with success it hangs Enso. I am on solo so backend responds with 403 but if I reload I dont see Enso only periodically re issued get invites request
https://github.com/enso-org/enso/assets/2855109/8977a404-a928-4fd3-9903-bf4fb6c5e961
