Skip to content

Global Search - Dynamic Import Header Search

Zack Cuddy requested to merge 345745_04-better-main-import into master

What does this MR do and why?

This addresses a regressions found in Production: !68681 (comment 763161800)
Work towards #297396 (closed)

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

As part of the new Header Search Application being implemented behind the above feature flag we are now importing a Vue application to manage the new search.

Currently the way we are doing it is importing it in main.js always which introduces some unneeded bloat to our main javascript file. As with the current JQuery implementation we bootstrap the javascript code once the user focuses the input. We can and should do the same for the Vue App. This change does just that.

Thank you @timzallmann for exposing this issue 🎸

Screenshots or screen recordings

Dynamic Bootstrapping on Input Focus
_sorry for the bad quality, Kap the software I've used for years suddenly stopped working today_
Bootstrap_720

How to set up and validate locally

note: While technically this is a feature flag change it is worth testing both w/ and w/o the FF for this particular change.

W/ Feature Flag

  1. Fetch and checkout this branch
  2. Turn on Feature Flag
  3. Load Home Page of GitLab
  4. Ensure the Search or jump to... text is located in the header search with the search svg
  5. Focus the input field with a click, tab, or s, / key
  6. Ensure the Javascript bootstraps and the dropdown appears without any visual issues

W/O Feature Flag

  1. Fetch and checkout this branch
  2. Turn off Feature Flag
  3. Load Home Page of GitLab
  4. Ensure the Search or jump to... text is located in the header search with the search svg
  5. Focus the input field with a click, tab, or s, / key
  6. Ensure the Javascript bootstraps and the dropdown appears without any visual issues

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports