https://linear.app/unleash/issue/2-1171/refactor-custom-root-roles-with-correct-plan-assumptions
This cleans up the hotfix `RoleSelect2` component and makes `RoleSelect`
take in a `roles` prop from the parent component.
This also simplifies the role hooks again to assume Enterprise plan by
default. This means, however, that we must ensure that we only call
these hooks in Enterprise features or, if we do call them in other
plans, that we provide a graceful fallback for non-Enterprise.
Non-Enterprise instances do not have this endpoint, and so they are
currently grabbing role information from e.g. `useUsers` and
`useServiceAccounts`.
I'm not sure how I feel about this. Roles are an overarching concept of
Unleash. To me, having to be extremely conscious about the exact
scenario in which you're using such a hook feels like a trap, instead of
"I need roles, so I'll grab the `useRoles` hook and not think much about
it". I also don't like the way `roles` are currently tied to the users,
service accounts, project access, (...) instead of being its own thing.
This could be solved by a `RoleController` exposing the GET endpoints in
OSS, since all of the logic we need for this use-case lives there
anyways. This would then be overridden with the Enterprise-specific
controller when wrapped. This way we could assume the endpoint is always
there, no matter the plan.
This is just an idea and not something I explored in the PR. For now I'm
just focusing on leaving this feature in a sane state.
Tested this manually on `Pro` and `Enterprise` and I believe everything
is acting the way we intend, but would love some extra eyes.
## About the changes
Implements custom root roles, encompassing a lot of different areas of
the project, and slightly refactoring the current roles logic. It
includes quite a clean up.
This feature itself is behind a flag: `customRootRoles`
This feature covers root roles in:
- Users;
- Service Accounts;
- Groups;
Apologies in advance. I may have gotten a bit carried away 🙈
### Roles
We now have a new admin tab called "Roles" where we can see all root
roles and manage custom ones. We are not allowed to edit or remove
*predefined* roles.
This meant slightly pushing away the existing roles to `project-roles`
instead. One idea we want to explore in the future is to unify both
types of roles in the UI instead of having 2 separate tabs. This
includes modernizing project roles to fit more into our current design
and decisions.
Hovering the permissions cell expands detailed information about the
role:
### Create and edit role
Here's how the role form looks like (create / edit):
Here I categorized permissions so it's easier to visualize and manage
from a UX perspective.
I'm using the same endpoint as before. I tried to unify the logic and
get rid of the `projectRole` specific hooks. What distinguishes custom
root roles from custom project roles is the extra `root-custom` type we
see on the payload. By default we assume `custom` (custom project role)
instead, which should help in terms of backwards compatibility.
### Delete role
When we delete a custom role we try to help the end user make an
informed decision by listing all the entities which currently use this
custom root role:
~~As mentioned in the screenshot, when deleting a custom role, we demote
all entities associated with it to the predefined `Viewer` role.~~
**EDIT**: Apparently we currently block this from the API
(access-service deleteRole) with a message:
What should the correct behavior be?
### Role selector
I added a new easy-to-use role selector component that is present in:
- Users
- Service Accounts
- Groups
### Role description
I also added a new role description component that you can see below the
dropdown in the selector component, but it's also used to better
describe each role in the respective tables:
I'm not listing all the permissions of predefined roles. Those simply
show the description in the tooltip:
### Role badge
Groups is a bit different, since it uses a list of cards, so I added yet
another component - Role badge:
I'm using this same component on the profile tab:
## Discussion points
- Are we being defensive enough with the use of the flag? Should we
cover more?
- Are we breaking backwards compatibility in any way?
- What should we do when removing a role? Block or demote?
- Maybe some existing permission-related issues will surface with this
change: Are we being specific enough with our permissions? A lot of
places are simply checking for `ADMIN`;
- We may want to get rid of the API roles coupling we have with the
users and SAs and instead use the new hooks (e.g. `useRoles`)
explicitly;
- We should update the docs;
- Maybe we could allow the user to add a custom role directly from the
role selector component;
---------
Co-authored-by: Gastón Fournier <gaston@getunleash.io>
feat: adds a way to specify a root role on a group, which will cause any user entering into that group to take on the permissions of that root role
Co-authored-by: Nuno Góis <github@nunogois.com>
## About the changes
Creating the first version of the Dark theme
Refactor: colors variables
Refactor: use theme variable instead
- this change will help us to use MuiCssBaseline, and we can use classes
directly for easy customization when we can't identify MUI classes
Refactor: adjusting some files components
- i’ve touched also the structure of some files, not only the colors
variables (but only to adjust the style, not functionality)
Fix: dark mode persistence on refresh (by Nuno)
Feat: dark mode sees light logos, and light mode sees dark logos (by
Nuno)
---------
Co-authored-by: Nuno Góis <github@nunogois.com>
This PR fixes an issue that would manifest when you navigated directly
to the groups and tried to edit the group from the group card. When you
were redirected to the edit groups view, the data fields would be empty.
The root cause of this issue is that the data has not arrived over the
wire before we load the UI, resulting in the UI showing an empty
dataset.
Normally, if this data came directly from useSWR, the app would
re-render and display the data correctly. However, in this instance we
are passing the data to an intermediary hook (useGroupForm) which does
not have the same re-render logic. Therefore we are effectively working
from stale data. We solve this issue by adding a container that resolves
the group before the edit form is rendered, and that invokes the
intermediary hook only when the data is available.
## About the changes
Refactoring the colors for the light theme to be much easier to continue
with dark mode
This is the first step to finish dark mode
https://linear.app/unleash/project/[low][s][alpha]-dark-mode-in-unleash-admin-ui-31b407d13c4b/1
This PR uses `main-theme` as a placeholder for `dark-theme` for now due
to the new changes. Still need to set the correct values here.
---------
Co-authored-by: Nuno Góis <github@nunogois.com>
This PR fixes an error where useSWR would throw a TypeError: `subs[i] is
not a function`: https://github.com/vercel/swr/issues/2357
I can't be totally sure why this is happening but we had a design flaw
in our setup that caused our group overview to first fetch all groups,
and then subsequently fetch each individual group after the groups were
rendered. This was happening because GroupCard was rendering the
EditGroupUsers component which used the `useGroup(groupId)` getter.
The flow in the old version looked like this:
1. Fetch all the groups
2. Use the groups data to render all the `GroupCard` elements
3. Once the GroupCard was rendered the EditGroupComponent would be
mounted and set up a recurring GET on the individual group, causing each
group to be fetched recurringly in the Group overview.
The useSWR error seems to be connected to setting up these
subscriptions, and then removing the element from the DOM. We were able
to trigger this error by removing the group.
## How did we fix it?
We refactored the components concerned with editing group users and
removing groups to exist outside of the `GroupCard` and have the group
card supply the base data through a state setter. This pattern is also
better for the remove functionality because the remove functionality in
its current state could trigger a react update on a component removed
from the DOM if you awaited the refetching of the data. This is because
the groups data is controlling the rendering of the `GroupCard` and when
the `RemoveGroup` modal is nested underneath the `GroupCard` a refetch
would trigger an update, re-render the overview and remove the entire
`GroupCard` and the associated `RemoveGroup` component.
I'm still not sure if this is a bug with SWR or a side-effect of how we
architected the functionality, but this change seems to remove the
problem.
https://linear.app/unleash/issue/2-563/fix-issue-with-useconditionallyhiddencolumns-and-react-table
It seems like we should add `autoResetHiddenColumns: false` to
`useTable` whenever we use `useConditionallyHiddenColumns`.
Basically the thought is that, if we're controlling column visibility in
our own way, we should not want other things to change that state
unpredictably, otherwise this may make React go _brrrrrr_. And it can be
very hard to pinpoint what exactly may be causing React to go _brrrrrr_.
First detected this issue apparently randomly while developing the new
SA table. Around 10-20 page refreshes would eventually trigger it. Was
not easy to find, but hopefully this fixes it permanently. At least I
haven't been able to reproduce it since. Maybe someone has a better idea
of where the issue could be or if this is a pretty good guess. Doesn't
seem like this change hurts us anyways.
I love React, `useEffect` and these very to-the-point error messages.
Very fun and productive.
Reference: https://react-table-v7.tanstack.com/docs/api/useTable
https://linear.app/unleash/issue/2-514/fix-issues-with-conditionally-hidden-table-columns
This upgrades the old `useHiddenColumns` to a new
`useConditionallyHiddenColumns`. This implementation covers some issues
and edge cases, and should hopefully be the standard way of achieving
responsive visibility for table columns from now on.
Some of these issues included incorrectly showing/hiding table columns,
whether when resizing the window or at page load, even when the proper
conditions were met to toggle their visibility.
This PR adapts the tables that were already using `useHiddenColumns` to
use the new approach.
I'll create a new PR after this one to adapt our other existing tables
to use this new approach as well.
Removes feature flags for syncing sso groups and clone environment.
These features are being made generally available for all who have
access to environments and sso groups
* add clone environment modal base skeleton (WIP)
* refactor HelpIcon common component, fix group form
* add more fields to clone env modal, multi project selector
* implement initial payload signature
* reflect latest design decisions
* misc ui fixes
* update UI to the new designs, change back clone option to use flag
* set env limit to 15
* Update frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx
Co-authored-by: Simon Hornby <liquidwicked64@gmail.com>
* Update frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx
Co-authored-by: Simon Hornby <liquidwicked64@gmail.com>
* Update frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx
Co-authored-by: Simon Hornby <liquidwicked64@gmail.com>
* Update frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx
Co-authored-by: Simon Hornby <liquidwicked64@gmail.com>
* address PR comments
Co-authored-by: Simon Hornby <liquidwicked64@gmail.com>
* feat: new user dropdown and profile page
* fix: add popup boxShadow to dark-theme
* fix: update routes snap
* refactor: move some tab specific logic into tabs component
* add useProfile hook example
* fix profile tab header (no name)
* fix: hide user popup when clicking profile link
* - add PATs to profile;
- add route logic to profile;
- refactor TimeAgoCell title;
- misc fixes and refactoring;
* add profile info to profile tab
* simplify req paths
* add PAT flag to the front-end
* fix: some UI adjustments
* change user popup buttons to links
* fix profile on front-end, add role description
* update delete PAT text
* address some PR comments
* address PR comments
* some more UI fixes and refactoring
* move password request to API hook
* fix: remove group owner concept
* fix: adapt e2e tests accordingly
* refactor users select to match improvement
* refactor: add user -> edit users
* feat: add edit users to group card actions
* add a few more UI improvements
* fix: edit group users icon
* improve loading behaviour
* fix group users refresh on card view
* improvement: create group form validation
* fix edit group, some refactoring
* fix: e2e tests, minor bugs
* fix: infinite re-renders due to useHiddenColumns useEffect array dependency
* fix re-rendering on useHiddenColumns for some tables
* refactor: validations into functions / variables
* Button for 0 groups
* Highlight name on exist
* Add hover to groups
* Change avatar size to 28px
* Add tooltip to project and fix error
* Fix tooltip
* Link to project, change to flex etc
* Reuse badges better
* Limit to max 50% width
* Refinements
* UI refinements
* Update
* Remove import
* Refinement fixes
* Refinement
* Refinement
* Refinement
* Star to star rounded
* feat: add user groups table
* add groups and group view
* fix top level await on mock data
* add UG flag
* create group files, refactor group cards
* add generic badge component
* adapt hooks to use endpoints
* implement basic create group
* fix: update snap
* fix: type id as string for now
* implement create group, use api, refactoring
* add stars to group owners
* refactor GroupForm.tsx to use styled components
* feat: remove group
* add edit group
* add group card actions
* feat: edit and remove group users
* add users to groups
* Initial commit
* refine project access table
* add project access group view
* Take users and groups from backend
* Add onsubmit
* new project access, assign and edit
* fix EditGroup, Group
* Finish assigning roles in project
* List assigned projects in group card
* Run prettier
* Add added column to project access table
Co-authored-by: Jaanus Sellin <jaanus@getunleash.ai>
Co-authored-by: sighphyre <liquidwicked64@gmail.com>
