## 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>
## What
This (admittedly massive) PR updates the "physical" documentation
structure and fixes url inconsistencies and SEO problems reported by
marketing. The main points are:
- remove or move directories : advanced, user_guide, deploy, api
- move the files contained within to the appropriate one of topics,
how-to, tutorials, or reference
- update internal doc links and product links to the content
- create client-side redirects for all the urls that have changed.
A number of the files have been renamed in small ways to better match
their url and to make them easier to find. Additionally, the top-level
api directory has been moved to /reference/api/legacy/unleash (see the
discussion points section for more on this).
## Why
When moving our doc structure to diataxis a while back, we left the
"physical' files lying where they were, because it didn't matter much to
the new structure. However, that did introduce some inconsistencies with
where you place docs and how we organize them.
There's also the discrepancies in whether urls us underscores or hyphens
(which isn't necessarily the same as their file name), which has been
annoying me for a while, but now has also been raised by marketing as an
issue in terms of SEO.
## Discussion points
The old, hand-written API docs have been moved from /api to
/reference/api/legacy/unleash. There _is_ a /reference/api/unleash
directory, but this is being populated by the OpenAPI plugin, and mixing
those could only cause trouble. However, I'm unsure about putting
/legacy/ in the title, because the API isn't legacy, the docs are. Maybe
we could use another path? Like /old-docs/ or something? I'd appreciate
some input on this.
* chore: add prettier as a dev dependency
The project has a .prettierrc, so seems to depend on that for its
formatting, but there was no prettier installed with the node modules.
* chore: add autofocus to all clearly defined first inputs on dialogs.
* fix: wrap the disable env input in a form and give it autofocus.
* fix: submit form when pressing enter
* fix: only autofocus the submit button if there is no other content.
When multiple (enabled) elements have the autofocus attribute, the
browser picks the last element in the tree. This means that if there
is a form with a text input with autofocus and a submit button with
autofocus, the button will win, causing the user to have to tab back up.
Only doing this if there are no children will cause some changes,
however:
Dialogs with textual children will no longer focus the accept-button
when appearing.
However, dialogs such as the create new api token dialog will give the
focus to the first input field instead of to the create button.
* fix: add formId prop to dialog element; adapt behavior
If the component receives a form id, it will treat the primary button
as the submit button for that form. To stop a full page reload, we
call the `preventDefault` on the submit event before calling the handler.
* chore: remove redundant spacing in component.
* fix: hook environment disable form up with the new form id system.
* chore: Update existing modal forms to pass in formId
* fix: Type the dialog event wrapper
* fix: change 'allows' => 'allow' because the noun is pluralized.
* fix: add autofocus to js add-tag-dialog-component.
I've got a feeling this component isn't in use anymore, though, as the
exact same text appears in a TS-version of this component.
* fix: add autofocus to add user form.
This seems to only be used as the main piece of a modal, so adding
autofocus seems pretty safe here, but I could be wrong.
* fix: Update snapshot test after changing wording.
* fix: add autofocus to update user form
* fix: add autofocus to the create toggle form.
This is a little besides the task's actual point. However! This form
is only ever used on the page where it's the only bit of content. I'd
argue that when the user navigates to this form, it's because they
want to create a feature. Thus, adding autofocus to the first field
makes a lot of sense to me.
* refactor: set button type to 'undefined' when it isn't 'submit'
This allows Material to use their default type based on whatever
heuristics they use. It's most likely going to be 'button' for the
foreseeable future, but in the event that they change it, passing
undefined instead should future-proof this a bit.
* fix: set type to button when formId is not present
Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>
