Add the User Group tab for the setting page

[knanao]

What this PR does / why we need it: This is the 1st gen of a new RBAC feature and this includes two new features as below. ① A new tab for the User Group ② Replacing an existing RBAC section at the project tab with stuff that can check all of the existing RBAC roles.

I added the User Group tab for the setting page and the user can add a User Group and delete one through this page. The User Group is what represents the relationship between an SSO team and an RBAC role, I mean, this is the same as what could be set in the previous RBAC section but this was implemented to extend the RBAC function. In the near future, the user can create a custom RBAC role and relate it with an SSO team by creating a User Group.

https://user-images.githubusercontent.com/50069775/190377216-cbe80af5-0159-4b9d-89cd-156f2f3084d2.mov

The existing RBAC section at the project tag was replaced with a new one for checking the existing RBAC roles. In the first gen, we're just able to check built-in roles like Admin, Editor, and Viewer, and built-in roles are immutable. If anybody wants to edit an RBAC config, please use the User Group page as above.

Which issue(s) this PR fixes:

Fixes #

Does this PR introduce a user-facing change?:

Add the User Group tab for the setting page

[nghialv]

@knanao I start feeling that the UserGoup and Role UI should be on the same page 🤔 . How about moving them all to the Project tab?

[knanao]

@nghialv Okay, Let's think about it again. Do you have any design ideas? If not, how about the like below?

①

②

③

[khanhtc1202]

I think making those 2 flat as (1) is good, and we can also move the add button to the right side (same line with Roles & User groups) as below

[knanao]

@khanhtc1202 Thank you for your suggestions and added your good suggestion as ③. If there are nothing of the other suggestions, let's vote from 1-3.

[khanhtc1202]

If there are nothing of the other suggestions, let's vote from 1-3.

Thanks @knanao, I vote for (3) as the new UI for this feature. And beside, in the Role table, I guess the pen button at the head of each row is redundant and overlap with the three dots button at the end of each line, so it can be removed as well.

[knanao]

@khanhtc1202 I agree with your points but both of them are different for a purpose. I intended the pen button is used to change into edit mode and the other is used to delete one record as following the editable tables. But I suppose it's redundant also and I wonder about a better way to delete and edit a record.🤔

[khanhtc1202]

@knanao that's true, how about menu showing on click to three dots button and edit also an option in that menu? Just like we do in the application page.

[knanao]

@khanhtc1202 Cool, let's apply this idea to ③.

[nghialv]

@knanao @khanhtc1202 I totally agree with these ideas of your guys. Let's do that. 👍

[knanao]

@nghialv @khanhtc1202 I applied ③, so please review this when you guys have enough time.

https://user-images.githubusercontent.com/50069775/191718199-7a41c220-678b-4bfa-8a92-4ef9e43da02a.mov

[khanhtc1202]

Nice work 🙌 Just think that we should add a confirm dialog on deleting the UserGroup row values, wdyt?

[knanao]

@khanhtc1202 You're right! Let me add a delete dialog to confirm it👍

[knanao]

@khanhtc1202 I added a delete confirm dialog for the user group.

https://user-images.githubusercontent.com/50069775/192441090-5e57d2c0-5d89-4d68-b264-1457f285c9eb.mov