Skip to content

User mapping - Add FilteredSearchBar with search functionality

Justin Ho Tuan Duong requested to merge 477703-user-mapping-fe-add-ui-for-search-and-filtering-by-status-of-placeholder-users into master

What does this MR do and why?

This change is behind a feature flag importer_user_mapping.

  • Add FilteredSearchBar that allows users to search to narrow down results in the table. Each search sends a new GraphQL query only if it's more than 3 characters. A new empty state is shown if there are no results / search query is too short.
  • Update the URL with the current search term. Automatically apply search when search query is present on load.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

FilteredSearchBar_video

Before After
FilteredSearchBar_before FilteredSearchBar_after

How to set up and validate locally

  1. Create a few dummy Import::SourceUser records:
    1. Checkout the branch seed-placeholder-users-task.
    2. Run this rake task bin/rake gitlab:seed:placeholder_users\[22,50\], replacing 22 with any group_id. (Note: 50 is the number of users created)
  2. Go to Group > Members and select the Placeholders tab. For example, http://127.0.0.1:3000/groups/gitlab-org/-/group_members?tab=placeholders.

Related to #477703 (closed)

Edited by Justin Ho Tuan Duong

Merge request reports