Skip to content

Draft: Global Search - Vue Init

Zack Cuddy requested to merge seach-v2-init into master

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 Screen_Shot_2020-09-18_at_1.38.09_PM Screen_Shot_2020-09-18_at_12.50.17_PM

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

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

Merge request reports