Global Search - Support Non-JS searches
What does this MR do and why?
Closes #353029 (closed)
This change is behind a feature flag (:new_header_search)
This change adds some more solidified experience to the New Header Search. This is done by adding a hidden HTML form that is replaced when the JS is mounted. This is similar to what we are doing in the legacy version: https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/views/layouts/_search.html.haml
This helps the following scenarios:
- User types and submits a search before JS mounts
- User types a search and JS mounts before they submit
- A feature spec uses the header search without
:js(many specs do this but FF is off for specs currently)
Screenshots or screen recordings
Scenario 1
| Before | After |
|---|---|
| Scenario_1_-_Bugged | Scenario_1_-_Fixed |
Scenario 2
| Before | After |
|---|---|
| Scenario_2_-_Bugged | Scenario_2_-_Fixed |
How to set up and validate locally
- Fetch and checkout this branch.
- Activate the Feature Flag (
:new_header_search). - Go to the root dashboard (
http://127.0.0.1:3000/) - Let the page load (DO NOT CLICK THE HEADER SEARCH)
- Using the inspector either throttle or turn off your network on the Network tab
- Click the header search field (the dropdown shouldn't appear right away as the JS should start to load now)
- Test both scenario 1 and 2 above trying ensuring the search works with or without the dropdown appearing.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #353029 (closed)
Edited by Simon Knox