#### [🎨 Figma working file](https://www.figma.com/file/HleI3QERmiISph4ChGa3Mv/%234219-Admin-%3EUsers-screen-UX-updates?node-id=19%3A3553) ## Problem Currently there is a search field in the Admin->Users section, however it only appears to allow for `Search`: - `Name` - `email` - `username` The use of tabs as `filter` categories feels like bad UX, rather than utilizing a proper filtering logic. Should tabs be reserved for User types. - Active (seats?) - Admins - 2fa state - External - Blocked - Banned - Pending - Deactivated - with out projects  ##### Update from Oct-2022 The problem has gotten much worse, with numerous tabs causing a scroll behavior. | first half | second half | | ------ | ------ | |  |  | ## Proposal * move `Cohorts` to its own sub section of `Users` * Tabs: `Active`, `Pending approval` * Dropdown filters: * Admin: `Yes` * LDAP User: `Yes` * With out projects: `Yes` * 2FA Enabled: `Yes` * External User: `Yes` ---- * `Deactivated` * `Blocked` * `Banned` * Can search by name, email or username  #### Caveats: * These filter bar will only show on the `Active` tab. See https://gitlab.com/gitlab-org/gitlab/-/issues/238183#note_416216604 for more info * Currently the backend only supports one filter at a time. Once a user selects a filter they will not be able to select another filter. We will, however, be able to search and use one filter at the same time. * As far as I know the "Pending" tab has not been implemented yet, not planning on having this be part of the MVC. #### Estimation Based on the above I am going to weight this a `5` because there are going to be a number of feature specs to update. This is what I am thinking for a breakdown ##### This issue - weighted a `3` * Keep the tabs in HAML for now * Create a Vue app and use the [GitLab UI filtered search component](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-filtered-search--default) * When the user selects a filter reload the page with the correct query string ##### Issue dedicated to updating feature specs - weighted a `2` I will create an issue dedicated to updating the feature specs. This issue will list out which specs need to be updated. These two issues should be scheduled in the same milestone.