Skip to content

Global Search - Search Topbar Vue

Zack Cuddy requested to merge 262063-global-search-topbar-vue into master

What does this MR do?

Closes #262063 (closed)

This MR finishes the work of converting the topbar on the Search Page into Vue. This change started as we removed the deprecated jQuery Dropdowns as part of this issue: #262060 (closed)

After doing so we noticed some inconsitencies between the new GlDropdown component and the existing button and search bar. Instead of trying to add custom properties to match the specs (temporarily), we decided it made sense to move into the GitLab UI Component library.

This change also allows us to no longer need to bootstrap both of the dropdowns independently and instead allow us simply bootstrap the topbar component and bring all the vue components in that way.

Notes about this change

The highlighting logic for the search results depended on fetching the sanitized search term from the DOM. This change implements a way to pass the sanitized search to the highlighting logic rather than trying to time it with the Vue bootstrapping.

Screenshots (strongly suggested)

Before After
Desktop Desktop__Before_ Desktop__After_
Mobile Mobile__Before_ Mobile__After_

GIF

Functionality Check

Kapture_2021-01-14_at_14.38.31

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

Related to #262063 (closed)

Edited by Zack Cuddy

Merge request reports