Global Filtered Search Component with History and Sorting support
What does this MR do?
We have been using HAML+JS based Filtered Search bar in almost every place within GitLab where any form of token based filtering is supported. However, in newer product areas where entire page is written in Vue, using a Vue version of filtered search bar is ideal. We already have GlFilteredSearch component that's part of GitLab UI. While this new component fully supports token based searching, it leaves implementation of search history on user (i.e. fetching and saving recent searches in localStorage). Also, sorting feature is a standard in all the listing pages within GitLab but GlFilteredSearch doesn't support sorting in any way.
This MR is aimed at utilizing GlFilteredSearch (and family of other related components) to create a wrapper component that includes all the baseline features we want in filtered search bar, which includes; a) Token-based search b) Recent searches history c) Sorting. Please note that this wrapper component is just a way of conveniently using GlFilteredSearch in any place within GitLab where we want standard search UI without implementing history and sorting features.
Working with tokens
This MR only adds app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue, for each additional Token type, user can define it either in shared namespace just like author_token.vue or in app's own namespace if it is not generic.
Known Issues
- Recent searches doesn't quite work, see gitlab-ui#813 (closed).
- Working with labels as one of the token type doesn't quite work, see gitlab-ui#81 (closed) & gitlab-ui#766 (closed).
Usage examples
This MR has temporarily used this component in Requirements page (but the implementation will be moved out of this MR before it is ready for merge). We also plan to use this component in Roadmap page.
Screenshots
| Default View | Recent Searches | Tokens | Sort Options |
|---|---|---|---|
 |
 |
 |
 |
Does this MR meet the acceptance criteria?
Conformity
-
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