User Groups and User Management redesign

[PClmnt]

User groups and Users UI redesign

This PR introduces the concept of User Groups as well as delivering an updated experience for the Users UI and how they are managed.

User Groups will be a Pro feature will allow admins to manage how users are managed and added to their application, as well as the access and control of them.

User Groups

A new user groups tab has been added to the portal section of the builder, from there, users can manage their groups and add users from and to them.

New groups can be added through the following modal, I've also added a new icon picker fopr spectrum icons (maybe we could use this in the app icon section as well?)

Once a group is created, it can be viewed, along with the count of assosicated apps and users from the list screen:

User groups and Users UI redesign

This PR introduces the concept of User Groups as well as delivering an updated experience for the Users UI and how they are managed.

User Groups will be a Pro feature will allow admins to manage how users are managed and added to their application, as well as the access and control of them.

User Groups

A new user groups tab has been added to the portal section of the builder, from there, users can manage their groups and add users from and to them. It is gated by a check for a Pro license and the screen looks like the following whenever a user is on a free license:

New groups can be added through the following modal, I've also added a new icon picker fopr spectrum icons (maybe we could use this in the app icon section as well?)

Once a group is created, it can be viewed, along with the count of assosicated apps and users from the list screen:

Clicking into a group leads to the group management screen, where users can be added to the group, as well as what apps are associated with it can be viewed. You can search users in order to add them to your group

When no users or apps are assosicated with the group, we just show empty lists with some text:

Users UI

The User management UI has been refactored heavily to provide a better and easier experience to manage users

The first thing to notice is how there are new Budibase roles - App User / Developer / Admin. These correlate under the hood to what we had before, but just in this case we've added App User, to make it more explicit that the only action a user with this level can do, is view / access the application. The BBUI table component has been slightly updated here, to follow Andy's designs, the header border has been removed, i'm passing a prop to the component in order to do that. You can also bulk delete users now by clicking the checkboxes and then clicking the delete button.

After clicking into a user, you can manage different aspects such as the groups (gated by a pro plan license, nothing is shown for it if you don't have one), the same UX is used here as in the group page for adding a new group, you can search by group and add a user directly to one here. You can also see what app and associated role the user has for it. You can switch the users role on this screen as well through the dropdown. Clicking on the app will take you to the app overview screen

The adding of users has also been refactored quite heavily, you can add multiple users and assign their roles from this screen:

Clicking through then gives you the option of what way to create the user:

Clciking the Generate Passwords prompt will then take you to a modal which gives you the option to download the passwords via CSV or just copy them directly

the same flow can be done with the importing of users via CSV.

App Management

The ability to manage users and groups on a per app basis has also been added, going into the app overview screen you can get a summary of how many users have been assigned to an app, as well as a count of the total. the access tab also provides the ability to manage groups and users on a per app basis.

Clicking on the role dropdowns for groups or users will update the role, and new users / groups can be added by clicking on the assign users button

this is a new component specifically for this work that takes a prop that is an array of objects (users object and groups object) and presents it alongside a picker for the role. you can search through and select. You can add as many users and groups as you want through this interface

For the actual User Group roles / access handling, it's currently set up ls follow

• An individual user's role will always override the role of the group it is in, i.e if a user has BASIC access but the group has POWER access the user will not be able to access any Power screens within the application.
• The same is true for the opposite, if a user has POWER access but the group only has BASIC access, the user will be able to access POWER as well as BASIC screens in the application.
• If a user has no specific access assigned, then it will always use the access of the group it is in.

[Rory-Powell]

I think there's some test coverage that we'll have to add here.

The most value we could get from the fewest tests would be

• Any new user management endpoints
• New group endpoints (these should go into the pro repo)

[PClmnt]

Added tests and resolved the remaining comments (hopefully).

I have reduced the user object within the groups document to {_id: string, email: string}, I know this has implications later if we allow a user to update their email etc, but I would really like to get this PR in, even if I put a solution for that particular scenario in place before the licensing work goes out.

EDIT: The groups tests are failing because the USER_GROUPS feature isn't turned on for CI