Draft: Global Search - Vue Init
What does this MR do?
Initialization to start #249709 (closed)
This MR creates the scaffolding for the V2 of Global Search written in Vue.JS. This allows us to interact with the search via an asynchronous API. We plan to add numerous filters and sort options to the search page to allow for better search control. With our current approach, a reload is required to update your search results. Once this change is completed we not longer will need to require a reload when the search is updated since we will be fetching the search results via the API.
Components (Follow up issues required to implement each of the following)
-
app.vue
Replaced HAML Code:
- N/A
Requirements:
Handle the container view of the new Global Search (mostly implemented as part of this MR)
-
search_form.vue
Replaced HAML Code:
- app/views/search/_form.html.haml
- app/views/search/_filter.html.haml
Requirements:
Search api via search term
API filter search by Group
API filter search by Project
Click Search Button to call API
-
scope_selector.vue
Replaced HAML Code:
- app/views/search/_category.html.haml
Requirements:
Switch scope filter and update search via API
-
search_filters.vue
Replaced HAML Code:
- N/A
Updated Vue Components:
- state_filter.vue
- confidential_filter.vue
- dropdown_filter.vue
Requirements:
Components support old and new functionality until full rollover
Updated components should update the API request with filters
-
search_results.vue
Replaced HAML Code:
- app/views/search/_results.html.haml
- app/views/search/results/**.html.haml
Requirements:
Support rendering results from API
Generically support the different scopes as much as possible.
Try to design to keep things as consistent as possible to avoid extra conditionals
-
search_empty_state.vue
Replaced HAML Code:
- N/A
Requirements:
Handle when nothing comes back from the search (mostly implemented as part of this MR).
-
search_loading.vue
Replaced HAML Code:
- N/A
Requirements:
Handle when API is fetching search (mostly implemented as part of this MR).
Screenshots
Current (No FF) | Vue (FF) | |
---|---|---|
Search View |
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
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