Global Search - Header Search Refactor Init

Merged Zack Cuddy requested to merge 297396_01-gldropdown-topbar-search-init into master


This change is broken off from !66007 (closed)
Work towards #297396 (closed)

This change is behind a feature flag (:new_header_search)
Feature Flag Rollout Issue: #339348

This end goal here is to replace the large deprecated jquery component used for the Header Search:

Replacing it with GitLab UI will allow us to add features more effectively as well as true up the styles permanently by using the GitLab UI component.

What does this MR do?

This MR is the first step towards a full refactor of the deprecated component mentioned above. Here we bootstrap the new component, add styles to respect the GitLab Header Theme, and implement the Feature Flag.

IMPORTANT: No actual functionality is implemented in this change. We simply are ensuring the feature flag is working and that an input field is created that respects the theme.

Here is a full roadmap for when the missing features will be added: #297396 (comment 665578315)

Screenshots or Screencasts (strongly suggested)

Blur States

Click to expand
Before After
Indigo Indigo_-Before-_Blur Indigo_-After-_Blur
Light Indigo Light_Indigo_-Before-_Blur Light_Indigo_-After-_Blur
Blue Blue_-Before-_Blur Blue_-After-_Blur
Light Blue Light_Blue_-Before-_Blur Light_Blue_-After-_Blur
Green Green_-Before-_Blur Green_-After-_Blur
Light Green Light_Green_-Before-_Blur Light_Green_-After-_Blur
Red Red_-Before-_Blur Red_-After-_Blur
Light Red Light_Red_-Before-_Blur Light_Red_-After-_Blur
Dark Dark_-Before-_Blur Dark_-After-_Blur
Light Light_-Before-_Blur Light_-After-_Blur
Dark Mode (alpha) Dark_Mode_-Before-_Blur Dark_Mode_-After-_Blur

Focus States

Click to expand
Before After
Indigo Indigo_-Before-_Focus Indigo_-After-_Focus
Light Indigo Light_Indigo_-Before-_Focus Light_Indigo_-After-_Focus
Blue Blue_-Before-_Focus Blue_-After-_Focus
Light Blue Light_Blue_-Before-_Focus Light_Blue_-After-_Focus
Green Green_-Before-_Focus Green_-After-_Focus
Light Green Light_Green_-Before-_Focus Light_Green_-After-_Focus
Red Red_-Before-_Focus Red_-After-_Focus
Light Red Light_Red_-Before-_Focus Light_Red_-After-_Focus
Dark Dark_-Before-_Focus Dark_-After-_Focus
Light Light_-Before-_Focus Light_-After-_Focus
Dark Mode (alpha) Dark_Mode_-Before-_Focus Dark_Mode_-After-_Focus

How to test?

  1. Fetch and checkout this branch
  2. From your GDK terminal, access the rails console by typing rails c
  3. Enable the feature flag by typing Feature.enable(:new_header_search)
  4. View the Top Nav Search UI with various themes
  5. Ensure the UI handles each theme correctly
  6. IMPORTANT: No functionality has been implemented in this MR aside from rending the search field.

Does this MR meet the acceptance criteria?


Availability and Testing


Does this MR contain changes to processing or storing of credentials or tokens, authorization and authentication methods or other items described in the security review guidelines? If not, then delete this Security section.

  • [-] Label as security and @ mention @gitlab-com/gl-security/appsec
  • [-] The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • [-] Security reports checked/validated by a reviewer from the AppSec team
Edited by Zack Cuddy