"User groups" settings page

[somebody1234]

Pull Request Description

• Close https://github.com/enso-org/cloud-v2/issues/907
  • Add a settings page for listing groups
  • Add users list with drag-n-drop into user groups
  • Show users below user groups
  • Add delete button for users and user groups

Other changes:

• Add delete button for users on "Members" settings page. Note that it currently does not work as corresponding backend functionality is missing.

Important Notes

None

Testing Instructions

Just the new "User Groups" page, and testing deletion of users in the "Members" page

Screenshots

User groups table:

• The last group has two users, shown as indented rows.
• Both users in the "Users" table below (to the right, if on a wider screen) are selected. These rows have the same styling as in the rest of the tables when not selected.
  

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,
  and
  Rust
  style guides. In case you are using a language not listed above, follow the Rust style guide.
• All code has been tested:
  • Unit tests have been written where possible.
  • If GUI codebase was changed, the GUI was tested when built using ./run ide build.

[PabloBuchu]

Sorry we made you waiting with this.

Member Roles

1. No Roles but User Groups
2. On group row make the same x as with the invitation emails (on hover). delete user group

DELETE /usergroups/usergrup-12313/

3. 2nd table with users list (in format username (user email)
4. Drag n drop user -> group to add user to that group.

PUT /users/{user_id}/usergroups {userGroups: [ids]}

5. Users being appended to the list below the group. You can indent this sublist a bit

Members

1. Add small x on the user same on hover

[somebody1234]

member roles:

1. done
2. todo
3. done, but i've decided to just use the same table as we are using on the members page instead. so two columns
4. done, but there are minor style issues when a row for a usergroup is being hovered over, when dragging a user over the usergroup
5. theoretically done, but i'm not able to test

members:

1. todo, just like (2) on member roles. i think though, that we shouldn't be using the same x (mostly because table rows are a different size, partly because table rows can be very wide. i think it would make sense to have a "floating" (and larger) (x) to the left of the row. i imagine the appearance would be similar to the (+) buttons for the "shared with" and "labels" rows

[somebody1234]

1. (done) yeah i kinda forgot about this one because removing users from groups is still broken on the backend i think? which makes it a bit more difficult to debug... but not super hard so i'll take a look at it after addressing everything else
2. (done) yeah makes sense. tbh the main reason it's gone is that it's placed past the right edge of the overflow container...
   • for now i'll just move it left so that it no longer gets clipped into non-existence
3. (done) i guess we should disallow it. added to backend issue mentioned in part (4)
4. (done) opened issue for backend as well:
   • https://github.com/enso-org/cloud-v2/issues/1197
5. (done)
6. (done) mb-16 is a lot! for now i've decided to use mb-4 lg:mb-8. that said... we're supposed to be using a shadow on the bottom to indicate if it is still scrollable
   • edit: replaced with shadow. it might be a bit too hard to see though...
7. (idk?) yeah this is mainly an issue with CSS... i did try getting it to work for a long while but had no luck. maybe that was only an issue when i was using aria.Button as a workaround to get the tooltips to trigger.
   • upon further testing it seems like using ellipsis still breaks tooltips for some reason.

[MrFlashAccount]

edit: replaced with shadow. it might be a bit too hard to see though...

Yea shadow is great, and together with margins should be an awesome solution

[MrFlashAccount]

upon further testing it seems like using ellipsis still breaks tooltips for some reason.

I haven't seen your solution for tooltips yet, but I assume it's because they are inside the element with ellipsis applied. Moving it away from the container should fix the issue.

[somebody1234]

together with margins should be an awesome solution

note that i've more or less removed margins for now.
pushed changes if you want to test (every point other than (7) should be addressed now).
i'm not against margins, but we do need to be careful that it doesn't make spacing look funky. also note that the scrollbar will extend into the margins as well, which (imo) looks more like a bug than a feature

[somebody1234]

still no clue why point 7 is broken unfortunately

[MrFlashAccount]

still no clue why point 7 is broken unfortunately

I did a fix in your branch, now it should be ok

[somebody1234]

@MrFlashAccount doesn't work unfortunately. i've tried that before, and just tested it out on the current commit.
the tooltip is broken now, and the formatting too:

(no tooltip + blank line)

[MrFlashAccount]

QA ✅

Nice work, @somebody1234 !