Add new search/filter categories for Admin->Users

🎨 Figma working file

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 #238183 (comment 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
• 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.