https://linear.app/unleash/issue/2-1183/improve-users-list-search
This adapts the users list to use the new `useSearch` hook so you can
have a better search that also includes "username" and "email" as
fields. It's also more extensible in case we'd like to add filters in
the future.
## 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>
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
<!-- Thanks for creating a PR! To make it easier for reviewers and
everyone else to understand what your changes relate to, please add some
relevant content to the headings below. Feel free to ignore or delete
sections that you don't think are relevant. Thank you! ❤️ -->
Virtualise the Users' table
## About the changes
<!-- Describe the changes introduced. What are they and why are they
being introduced? Feel free to also add screenshots or steps to view the
changes if they're visual. -->
<!-- Does it close an issue? Multiple? -->
Closes #
<!-- (For internal contributors): Does it relate to an issue on public
roadmap? -->
<!--
Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item:
#
-->
### Important files
<!-- PRs can contain a lot of changes, but not all changes are equally
important. Where should a reviewer start looking to get an overview of
the changes? Are any files particularly important? -->
## Discussion points
<!-- Anything about the PR you'd like to discuss before it gets merged?
Got any questions or doubts? -->
Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.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
* refactor: user creation screen cleanup
* feat: deprecation notice for google sso
* fix: docs openid typo
* invite link bar
* invite link page
* fix prettier docs
* regenerated openapi
* hooks for invite page api
* update openapi
* feat: invite link update
* feat: add public signup token soft-delete
* public signup frontend feature flag
* fix: new user api issues
* feat: allow for creating new user from invite link
* Feat/invite user public controller (#2106)
* added PublicInviteController for public urls
* added PublicInviteController for public urls
* added PublicInviteController for public urls
* added PublicInviteController for public urls
* fix test
* fix test
* update openapi
* refactor: password reset props
* fix: public invite schema and validation
Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>
* user invite frontend
Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>
* invite link delete confirmation dialog
* refactor: password reset action
* fix: new user invite loading state
* fix: run ts check with ci
* revert openapi changes
* fix: invite token api interface
* fix: openapi schema index
* fix: update test snapshots
* update frontend snapshot
* fix: prettier ci
* fix: updates after review
Co-authored-by: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com>
Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>
* feat: upgrade project list search to use the new search field
* cleanup unused imports
* feat: add upgraded search to projects and applications, polish search UX
* refactor: TableSearch to new Search common component
Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>
* feat: add last seen col to admin users list
* fix: header hover effect, duplicate title from TimeAgo
* fix: use YMD format, never logged
* fix: small tooltip change
* refactor: adapt to review suggestions
* add user sort and filter hooks, adapt table to match design
* refactor: abstract away TableActions and TableCellSortable into components, small fixes and improvements
* feat: implement search
* feat: add search word highlighter to match design
* refactor: small UI/UX improvements
* fix: rounded corners for th on responsive breakpoints
* refactor: small UI/UX improvements
* Update src/hooks/useUsersSort.ts
Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>
* refactor: clearer arg name in users filter
* refactor: specify transition properties
* refactor: add theme v2 properties and cleanup styles
* refactor: create lightweight highlighter component
Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>
* refactor: remove unused securityLogger
* refactor: port commonStyles to TS
* refactor: port testIds to TS
* refactor: move app.css into themes
* refactor: use absolute import paths
* refactor: port LayoutPicker to TS
* refactor: port routes to TS
* refactor: port ScrollTop to TS
* refactor: update unused/missing ScrollTop exceptions
* refactor: remove unused route flags field
* refactor: change constants ext to TS
* refactor: remove unused testData file
* refactor: port styles to TS
* refactor: wait before typing in auth spec
* refactor: keep feature toggle name when changing project
* refactor: add missing permission button tooltip
* refactor: add success toast on toggle revival
* refactor: add success toast on stale toggle
* refactor: fix initial user role checkbox value
* refactor: remove duplicated error message
* refactor: fix change-password error parsing
* refactor: remove inaccurate edit toggle toast text
* refactor: truncate long names in project cards
* refactor: truncate long project name in title
* refactor: add ellipses to truncated strings
* refactor: swap truncateString with StringTruncator
* refactor: remove unnecessary truncation
* refactor: mark context fields as optional
* refactor: show all errors from tag type creation
* refactor: show all errors from strategy create/update
* refactor: filter out empty strategies on create/update
* refactor: add an edit button to the addons list
* refactor: add missing labels
* refactor: catch errors from toggling stale features
* refactor: add ref support to PermissionSwitch
* refactor: port global settings to TS/hooks
* refactor: fix file extension
* refactor: format file
* refactor: fix inconsistent locationSettings prop
* refactor: use correct locationSettings hook
* refactor: use objects for settings hooks