Search for label on project labels page by title or description
What does this MR do?
Adds ability to search for label on project labels page by title or description
Are there points in the code the reviewer needs to double check?
Why was this MR needed?
Its impossible to find a label on https://gitlab.com/gitlab-org/gitlab-ce/labels page as its 17 pages of them
Screenshots (if relevant)
no search
nothing found
priority and other label match
only other label match
only priority match
Does this MR meet the acceptance criteria?
-
Changelog entry added, if necessary -
Documentation created/updated -
API support added -
Tests added for this feature/bug - Conforms to the code review guidelines
-
Has been reviewed by a UX Designer -
Has been reviewed by a Frontend maintainer -
Has been reviewed by a Backend maintainer -
Has been reviewed by a Database specialist
-
-
Conforms to the merge request performance guidelines -
Conforms to the style guides -
Conforms to the database guides -
If you have multiple commits, please combine them into a few logically organized commits by squashing them -
Internationalization required/considered -
End-to-end tests pass ( package-and-qa
manual pipeline job)
What are the relevant issue numbers?
https://gitlab.com/gitlab-org/gitlab-ce/issues/34837, https://gitlab.com/gitlab-org/gitlab-ce/issues/27031
Merge request reports
Activity
added Category:Global Search and removed issues labels
added Plan [DEPRECATED] label
@tauriedavis I need some guidance by UX people here.
- Labels page looks a bit ugly now. I think it worth separate issue to fix that.
- I simply added a search field here. What else is necessary to make this feature complete? Button, empty state? How UI should look like?
Edited by Dmytro Zaporozhets (DZ)added 130 commits
-
c2b574d0...f915b5e0 - 124 commits from branch
master
- 3ee61b5c - Add ability to filter labels by title or description
- 7fd71866 - Add search form to project labels page
- 1b0595c7 - Add feature specs for project labels search
- a5a46a75 - Add changelog for label search feature
- db714a42 - Add specs for label search backend code
- 7c86ecdf - Add locale entry for filtering by label sentence
Toggle commit list-
c2b574d0...f915b5e0 - 124 commits from branch
@sarrahvesselov can someone from UX help me with this MR? See https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/20749#note_89339699. Thanks
@matejlatin, do you have some time to look at this? I know you were interested in refining and aligning our search paradigms so I instantly thought of you here.
@sarrahvesselov sure I can take a look at it
@dzaporozhets does that search filter both: prioritized labels and other labels?
does that search filter both: prioritized labels and other labels?
@matejlatin yes the search goes over a single collection, before separation by prioritization for UI.
@dzaporozhets is this developed far enough so I can check out the branch and take a look?
@matejlatin yes, it should work. type, press enter and you should get filtered results
@dzaporozhets I can't get my GDK to work with this branch
but I can suggest improvements by looking at screenshots.- I think we can use 'Filter' alone for the placeholder. The users can search by either label name or description. It would make sense to have a more specific placeholder if only one of the two was 'searchable' (for example 'Filter by label name')
- I would really like it to be placed on top right because it's a well-established pattern and users know it 'belongs' there and expect it to be there
- Let's limit the width of the search box. In the mockup attached it's 240px wide. I think either that or 320px should work well.
- As I can understand from your comments, the search is triggered by pressing enter. Because the search isn't triggered by simply typing letters, we need to have an indicator that the search action needs to be confirmed. The button with the magnifying glass icon is that indicator.
- if you show any instructions like 'Press enter to search' you can remove that.
- a 'clear' icon should appear whenever the search box isn't empty. Clicking it clears the search box, focuses it and hides the clear icon.
The specs for the newly updated search box patterns are here.
The guidelines for search patterns are a WIP but I expect them to be merged next week.
Let me know if you need more help with this. I would really like to get this working with my GDK to be able to review it, especially after you apply the changes.
@matejlatin thank you for feedback. I agree with all the points you made. I will apply design as shown on your screenshot and ping you. Hopefully, I can just copy-paste UI from another page.
Hopefully, I can just copy-paste UI from another page.
@dzaporozhets I don't think we have an exact example of that anywhere else but you should be able to get something similar and adapt it accordingly
@matejlatin I checked other pages and for consistency, search form should go the right of the text.
Example pages:
- https://gitlab.com/gitlab-org/gitlab-ce/commits/master
- https://gitlab.com/gitlab-org/gitlab-ce/branches
- https://gitlab.com/gitlab-org/gitlab-ce/tags
I propose we do the same thing for labels page. It will allow me 100% to re-use existing components.
The only problem I see is the text is too long, we should not use 3 sentences in the navigation row. I propose to break the line. after first sentence.
People without the ability to admin labels
People with ability to admin labels:
Edited by Dmytro Zaporozhets (DZ)As an alternative, we can move a message that displayed only to maintainers to another block. Example:
Edited by Dmytro Zaporozhets (DZ)added 1 commit
- fae9c8c2 - Improve labels search UI on project labels page
@matejlatin in meantime I pushed a change based on https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/20749#note_90826175.
@felipe_artur please review backend
@kushalpandya please review frontend
added 1 commit
- c656ab52 - Add no labels found block for project labels page
FYI search by less than 3 characters does not work for me. That's probably because I re-used existing search functionality. Same happens in other places like issues page. Try https://gitlab.com/gitlab-org/gitlab-ce/issues?scope=all&utf8=%E2%9C%93&state=opened&search=bu.
Thanks @matejlatin for picking this up while I was unavailable
@dzaporozhets Looks good to me!
Just left a suggestion.
Edited by Felipe Cardozo- Resolved by Dmytro Zaporozhets (DZ)
added 1 commit
- 8ff07e17 - Move search param check into own method in app/finders/labels_finder.rb
marked the checklist item Conforms to the style guides as completed
marked the checklist item Conforms to the merge request performance guidelines as completed
marked the checklist item Has been reviewed by a Backend maintainer as completed
marked the checklist item Tests added for this feature/bug as completed
marked the checklist item Changelog entry added, if necessary as completed
added 1 commit
- 3d6794cc - Add more UI logic to label search functionality
@matejlatin I updated MR description with new screenshots for different behavior. I believe it should be more user-friendly now
- Resolved by Dmytro Zaporozhets (DZ)
@dzaporozhets Only one suggestion for HAML, rest looks good.
As an alternative, we can move a message that displayed only to maintainers to another block.
@dzaporozhets I like this one the best
Is it possible to change the 'no results' texts? It's confusing that it says 'no labels found' in one section but then there are results in the other section. Can we say 'No prioritised labels found...' in the prioritised labels section and 'No other labels found...' in the other labels section?
@tauriedavis no worries, I'm glad to help out with anything search related
I like this one the best
Cool, I will update UI then
Can we say 'No prioritised labels found...' in the prioritised labels section and 'No other labels found...' in the other labels section?
@matejlatin sure. Or maybe hide the whole section if no labels found in one?
@dzaporozhets I like to be very careful when it comes to hiding UI parts. Lack of presence of a certain UI can be confusing ('where are my prioritised labels?') while simply saying 'No results' is very clear.
In this case, I think it's better if we keep the 'No results' messages present.
Cool, I will update UI then
Awesome, tnx
mentioned in issue #34837 (closed)
added 340 commits
-
861338d1...02e35a0d - 326 commits from branch
master
- f42fe0b6 - Add ability to filter labels by title or description
- 692d4795 - Add search form to project labels page
- 85a8c7ef - Add feature specs for project labels search
- cb328517 - Add changelog for label search feature
- 4996876e - Add specs for label search backend code
- bdb1f790 - Add locale entry for filtering by label sentence
- 26b2790e - Improve labels search UI on project labels page
- 4b1b6acf - Add no labels found block for project labels page
- 8e8cb5b9 - Re-generate locale after text modification
- c0bf3615 - Move search param check into own method in app/finders/labels_finder.rb
- 300f6aba - Add more UI logic to label search functionality
- f128cdb8 - Add more specs to labels search feature
- 5137df53 - Make few minor styling changes to project labels page
- d860cf0f - Show different not fount message for project labels search
Toggle commit list-
861338d1...02e35a0d - 326 commits from branch
@matejlatin I made changes. here are some screenshots:
I think its ready to merge once you approve UX
marked the checklist item Has been reviewed by a Frontend maintainer as completed
added 1 commit
- e0a3701d - Update locale with labels search page strings
added 1 commit
- ac05ebc3 - Add frozen_string_literal to search_labels_spec.rb according to GitLab bot
@dzaporozhets it looks good to me, thanks for making the changes
changed milestone to %11.2
@kushalpandya can you please approve the MR so I can merge?
assigned to @kushalpandya
@matejlatin great, thank you for the review!
@felipe_artur or maybe you can approve :)
@dzaporozhets Done!
assigned to @dzaporozhets
mentioned in commit 9b433c37
mentioned in issue gitlab-org/release/tasks#381 (closed)
mentioned in merge request !21480 (merged)
mentioned in issue #50835 (closed)
mentioned in issue #49695 (moved)
added devopsplan label
mentioned in issue gitlab#23468