Location aware search

Closes #3400 (closed) #14217 (closed)

Introduces suggestion grouping on the search box and adds the ability to the user to remove the location to search on.

Notes

• Suggestions are now grouped by category.
• Suggestions are displayed when no location is set.
  • Would be great to provide suggestions for the specified location which could be a project or group.
• A location is set from the server for projects/groups related urls.

Default Apparence

When location badge is present

Suggestions

Suggestions when location badge is present

Closes #3400 (closed)

Added 207 commits:

• ac01cf6f...ca3fc229 - 192 commits from branch master
• 8a8db0ad - Working version of autocomplete with categorized results
• 7a08bb9a - Apply styling and tweaks to autocomplete dropdown
• b4814178 - Tweak behaviours
• ec5ed139 - Change hidden input id to avoid duplicated IDs
• e2df1bf7 - Add icons
• 1ddf4d93 - Better wording
• c32ede57 - Replace spinner icon for th FontAwesome one
• 4de31109 - Allow to pass non-asynchronous data to GitLabDropdown
• 236ef18d - Allow data with desired format
• a65ada83 - Allow to pass input filter param
• 15f44d83 - Allow to pass header items
• 08176058 - Allow to hightlight matches
• e6e3fd7f - Disable highlighting by default
• 37f67085 - Use new dropdown class for search suggestions
• 12be2099 - Delete unused file

Added 28 commits:

• 12be2099...c4b35a62 - 12 commits from branch master
• 424428da - Working version of autocomplete with categorized results
• 118220de - Apply styling and tweaks to autocomplete dropdown
• 80cb248a - Tweak behaviours
• c1864d96 - Change hidden input id to avoid duplicated IDs
• d18c9bab - Add icons
• 8585e4e6 - Better wording
• 60048e3b - Replace spinner icon for th FontAwesome one
• 33bc8d53 - Allow to pass non-asynchronous data to GitLabDropdown
• 5d7381b7 - Allow data with desired format
• 090b545a - Allow to pass input filter param
• ef886f2b - Allow to pass header items
• 1a702d28 - Allow to hightlight matches
• 093c709d - Disable highlighting by default
• eaa15508 - Use new dropdown class for search suggestions
• 54c285d5 - Delete unused file
• c10dfe98 - Fixes failing spec

Reassigned to @jschatz1

Added 69 commits:

• c10dfe98...bc590ce6 - 53 commits from branch master
• 4b3d3446 - Working version of autocomplete with categorized results
• 6f449c63 - Apply styling and tweaks to autocomplete dropdown
• d6f82242 - Tweak behaviours
• f825b60b - Change hidden input id to avoid duplicated IDs
• 1879057c - Add icons
• 651e893d - Better wording
• 8048d611 - Replace spinner icon for th FontAwesome one
• 2f4bdefc - Allow to pass non-asynchronous data to GitLabDropdown
• 761a8d98 - Allow data with desired format
• 238328f5 - Allow to pass input filter param
• 03afe766 - Allow to pass header items
• 424927a7 - Allow to hightlight matches
• dce5e9ce - Disable highlighting by default
• d38ef7b5 - Use new dropdown class for search suggestions
• 2925fc96 - Delete unused file
• 37440200 - Fixes failing spec

Added 217 commits:

• 37440200...eba00325 - 200 commits from branch master
• c9e202c1 - Working version of autocomplete with categorized results
• 6a7f4a07 - Apply styling and tweaks to autocomplete dropdown
• 54797957 - Tweak behaviours
• 82e3c1f2 - Change hidden input id to avoid duplicated IDs
• ec0dfff2 - Add icons
• 2541f592 - Better wording
• dccda7d0 - Replace spinner icon for th FontAwesome one
• a0c1aa6d - Allow to pass non-asynchronous data to GitLabDropdown
• 0b893bec - Allow data with desired format
• 4e486c61 - Allow to pass input filter param
• f858ee43 - Allow to pass header items
• b5bd497a - Allow to hightlight matches
• 2d0f8f92 - Disable highlighting by default
• 53df7263 - Use new dropdown class for search suggestions
• 73e043d1 - Delete unused file
• cdd7e185 - Fixes failing spec
• 46f9790c - Fixing rebase conflicts

Added 18 commits:

• 4b3d3446 - Working version of autocomplete with categorized results
• 6f449c63 - Apply styling and tweaks to autocomplete dropdown
• d6f82242 - Tweak behaviours
• f825b60b - Change hidden input id to avoid duplicated IDs
• 1879057c - Add icons
• 651e893d - Better wording
• 8048d611 - Replace spinner icon for th FontAwesome one
• 2f4bdefc - Allow to pass non-asynchronous data to GitLabDropdown
• 761a8d98 - Allow data with desired format
• 238328f5 - Allow to pass input filter param
• 03afe766 - Allow to pass header items
• 424927a7 - Allow to hightlight matches
• dce5e9ce - Disable highlighting by default
• d38ef7b5 - Use new dropdown class for search suggestions
• 2925fc96 - Delete unused file
• 37440200 - Fixes failing spec
• 79a4292f - Merge branch 'issue_3400_port' of https://gitlab.com/gitlab-org/gitlab-ce into issue_3400_port
• 3898bffd - Code improvements

I've found a small issue. Request always triggers when typing on the search input.

Added 13 commits:

• 3898bffd...18fc7c66 - 10 commits from branch master
• b96d049e - Merge branch 'master' into issue_3400_port
• 9008457a - Save instance and avoid multiple instantiation
• b4593a1b - Fix multiple ajax calls and plugin instantiation

What problem does this mediate?

This saves the GitLabDropdown instance as data for the referred element. So you can access its methods by doing $(el).data('glDropdown').method() and avoids multiple instantiation on the same element by mistake preventing, multiple event listeners to be set. This is a good practice for jQuery Plugins.

Couldn't you just loop through your list of inputs as before?

done, nice catch btw.

Set variables for these.

done!

Reassigned to @alfredo1

Added 110 commits:

• b4593a1b...2bcbc7c6 - 105 commits from branch master
• fb0d20c5 - Merge branch 'master' of https://gitlab.com/gitlab-org/gitlab-ce into issue_3400_port
• 80174538 - Use .empty()
• 6e9ff2e5 - Delete .remove-badge from badge
• f7a97291 - Add variables
• 3a8c4ebb - Loop through form inputs

Added 2 commits:

• eff98ffe - TAB is not used
• a477d604 - Add ability to clear location badge

Added 2 commits:

• 521c0f5f - Reduce the use of loops
• 4fcd7ba9 - Set constants for category names

Reassigned to @jschatz1

@alfredo1 this looks great! Really nice clean up too!

This might be a separate issue but do we want both search bars on the search page? cc @JobV @skyruler @dzaporozhets

Milestone changed to 8.6

Added ~149423 label

@jschatz1 Yeah I was wondering the same, I think there's no need to keep both search forms on the search page.

Removed ~149423 label

Milestone changed to 8.7

@alfredo1 were we going to rename self to _this?

Reassigned to @alfredo1

@jschatz1 as per your comment here https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/3212#note_4328660 I thought I should rename those self

mentioned in merge request !3132 (closed)

@alfredo1 You said:

Oh. I know now what you meant. Let's use _this

https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/3212#note_4331681

Reassigned to @jschatz1

@alfredo1 I noticed that there is a situation which I can't reproduce regularly, which gives me an empty dropdown. Can we make sure that the dropdown has contents in it before showing it? That way we never show an empty one.

@dzaporozhets This is a large feature that I've reviewed at length. I am due to review it one more time but would you mind taking a look first?

@jschatz1 I'm going to check the empty dropdown issue

The empty dropdown issue is happening because the ajax request is not being made for the first character. I need to change the logic a bit. We need to create an instance of GitLabDropdown before hand so event listeners are set before we start typing.

Added 2 commits:

• 44817726 - Fixes empty menu when typing on search input for the very first time
• c3773584 - Restore menu content when emptying the search input

@alfredo1 Can't we just (I only imagine this is how it would work), show the dropdown once data from the ajax call is received and before that make sure it is hidden? Then we would never show an empty dropdown?

@alfredo1 I understand what you are saying.

@jschatz1 There are another case, the dropdown menu is displayed when we click the input too. This behaviour is inherited from the dropdown. We need to handle that as well.

@dzaporozhets This MR looks good to me. I've tested and @alfredo1 made some great changes. I am ready to merge. Take a look real quick and let me know if you have any issues.

@jschatz1 Ok, Just let me do a fix for the unwanted menu toggling when clicking the input.

@alfredo1 You got it. I'll assign to you. Assign back to me when you are ready.

Reassigned to @alfredo1

Added 4 commits:

• 30eeb453 - Remove unused instance variable
• abe56ad6 - Prevents unwanted menu toggling
• 8c1d50e6 - Fixes removing the location badge with backspace on the last character
• 62b260cc - Change key name to match input Id

@jschatz1 fixed minor issues included the issue with the empty menu. I'll assign it to you after build passes.

@jschatz1 Doesn't work with the latest changes on gl_dropdown.js I'll see what's happening.

Added 188 commits:

• 62b260cc...4a4a79aa - 183 commits from branch master
• 0dff7b44 - Merge branch 'master' into issue_3400_port
• 8f2587c2 - Pass proper input element
• 98e22730 - Fix input reference
• d7350dea - Make sure we are looking inside dropdpown wrapper
• 187f1c41 - Add param to skip enterCallback

This

Autocomplete inside project and group does not work for me.

Also make sure UI match design. For example active label should be blue. cc @jschatz1

@dzaporozhets I think he said he just did a rebase and was having conflicts. I think that's why there's problems right now.

When it's ready again I'll assign to you. @dzaporozhets. Sorry for the confusion.

@jschatz1 ok no problem.

@dzaporozhets On which browser did you tested? It shouldn't look like that. This is how it should looks now.

Also, right now we are not requesting suggestions when there's a location badge. If a location badge is present the search will be scoped for the selected project/group. I think suggestions should have also the same behaviour. Since there aren't proper suggestions for the current location we are not doing any request. However would be great to have proper suggestions for the selected group/project.

This how it will look if we request suggestions when a location is set.

You can always remove the location badge to get suggestions and do a global search.

/cc @jschatz1

@alfredo1 Safari, osx.

I see we are returning autocomplete results for logged in users only. I'll fix this to not send unnecessary requests for not logged in users.

Added 4 commits:

• 91cb0786 - Increase time because of Safari
• 180da813 - Fixes overlapping on Safari
• 8b68142a - Prevent creating autocomplete dropdown is user is not logged in
• 5447d8b3 - Add separator at the end of categories

Added 1 commit:

• 4d8c5828 - Adjust menu positioning

Added 1 commit:

• ebd329fe - Make form width the same as dropdown width

Added 1 commit:

• bd1fbe18 - Use strings instead of constants

• Updated gifs on the description.
• Fixed overlapping on Safari.
• Now suggestions are requested when user is logged in only.
• Added separator between categories and visual tweaks.
• Use strings over constants on search_helper.rb for category names.

@dzaporozhets Do you think we still should display suggestions when a location is set? Or keep it as it is now?

@alfredo1 As discussed your search box colors should match the specs in search.atype

Current

Spec

Also your HR lines in the dropdowns should be full width. This means you will change the styles in the dropdowns too.

Dropdowns vs search Drop down

Once you get those colors right we should be good to have it checked again.

Added 3 commits:

• 69166b22 - Add separator as a line divider
• 8e53cf94 - Use separators between categories
• fe50f783 - Makes autocomplete dropdown look the same as others

Added 1 commit:

• 9d51f866 - Makes autocomplete dropdown look the same as others

Do you think we still should display suggestions when a location is set? Or keep it as it is now?

@alfredo1 it should show suggestions inside project like it was before (Files, Commits, Settings....)

@alfredo1 UI suggestions:

1. Test starts too close to label. Check mockups

2. Label color should be blue

cc @jschatz1

Added 43 commits:

• 9d51f866...1922e3a8 - 41 commits from branch master
• 47405485 - Merge branch 'master' into issue_3400_port
• 55afebe1 - Always display suggestions

Added 2 commits:

• 4c268027 - Fix SCSS Lint errors
• b169046e - Initialize autocomplete only when search form is present

Added 1 commit:

• c1e7351b - Fix broken spec

Added 2 commits:

• d681623c - Add option to submit the typed query
• 07a0278d - Do not show dropdown menu if when no suggestions returned

Added 1 commit:

• d5b4b4e0 - Hide suggestions when deleting all input value using other than backspace

This is pretty much done. I'll update the screenshots.

@alfredo1 Assign when done!

@alfredo1 When the search box has a context, like "This project", can I use backspace to clear it? It should be able to.

@rspeicher yes you can :)

@rspeicher See:

@alfredo1 I wanted to mention my appreciation for your work on this feature, it's been something I've really wanted in GitLab!

One question: How does it work on mobile?

@connorshea That is a good question. Unfortunately for mobile we are hiding the search form and we show a link which redirects to the search page. Not sure if we are going to enable this functionality for mobile too. /cc: @jschatz1

Reassigned to @jschatz1

@alfredo1 as long as you can search on mobile in general for right now. I know it's kind of a different bag.

@jschatz1 I'm going to remove unnecessary CSS then it's all yours

Added 1 commit:

• 2e5cd0f1 - Remove unused CSS

@jschatz1 Done!

@alfredo1 CONFLICTS Argh! 😠 It's my fault.

Reassigned to @alfredo1

@jschatz1 about 2 search bars we will need to hire one, but I was not sure how long it will take to implement that so you decide we can move it separate issue as you proposed

Added 91 commits:

• 2e5cd0f1...54957d69 - 90 commits from branch master
• a41f5f59 - Merge branch 'master' into issue_3400_port

Reassigned to @jschatz1

@skyruler https://gitlab.com/gitlab-org/gitlab-ce/issues/14771 for later.

@alfredo1 I am going to merge this but please make a new MR and fix these thing right away!!!:

1. X button shouldn't clear the search context. Just the text IMO.
2. If you type in a search and it comes up with the project it shouldn't redirect to the same page, it should just put the context pill back in.
3. Do these two colors look the same to you? Did you use the designs??? #4f91f8:
   
   
4. Those two search boxes are completely different sizes.
5. Does this X's color look like the design? I understand we are using Font Awesome but at least get the color right. Use some slightly disabled color. I got #807E7E
   
   

I want to get people using the new search so we can make sure it's ok before launch.

@alfredo1 Fix the issues in this new issue: https://gitlab.com/gitlab-org/gitlab-ce/issues/14800

Status changed to merged

mentioned in commit 403b7fe1

Added ~123454 label

Removed ~123454 label