Merge branch 'cs-inline-js-search' into 'master'

Remove inline JavaScript for Search autocomplete

## What does this MR do?

Remove inline JavaScript from the search partial for Search autocomplete.

## Are there points in the code the reviewer needs to double check?

That this doesn't break anything (it didn't when I tested it!)

## Why was this MR needed?

Inline scripts are bad, this removes a few of them.

## What are the relevant issue numbers?

#18231 and #19866

## Does this MR meet the acceptance criteria?

- Tests
  - [ ] All builds are passing
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

See merge request !5284

3 files changed, 47 insertions, 31 deletions

diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js
index 8abb09c626f..678d836f56f 100644
--- a/app/assets/javascripts/search_autocomplete.js
+++ b/app/assets/javascripts/search_autocomplete.js
@@ -389,4 +389,41 @@
 
   })();
 
+  $(function() {
+    var $projectOptionsDataEl = $('.js-search-project-options');
+    var $groupOptionsDataEl = $('.js-search-group-options');
+    var $dashboardOptionsDataEl = $('.js-search-dashboard-options');
+
+    if ($projectOptionsDataEl.length) {
+      gl.projectOptions = gl.projectOptions || {};
+
+      var projectPath = $projectOptionsDataEl.data('project-path');
+
+      gl.projectOptions[projectPath] = {
+        name: $projectOptionsDataEl.data('name'),
+        issuesPath: $projectOptionsDataEl.data('issues-path'),
+        mrPath: $projectOptionsDataEl.data('mr-path')
+      };
+    }
+
+    if ($groupOptionsDataEl.length) {
+      gl.groupOptions = gl.groupOptions || {};
+       
+      var groupPath = $groupOptionsDataEl.data('group-path');
+   
+      gl.groupOptions[groupPath] = {
+        name: $groupOptionsDataEl.data('name'),
+        issuesPath: $groupOptionsDataEl.data('issues-path'),
+        mrPath: $groupOptionsDataEl.data('mr-path')
+      };
+    }
+   
+    if ($dashboardOptionsDataEl.length) {
+      gl.dashboardOptions = {
+        issuesPath: $dashboardOptionsDataEl.data('issues-path'),
+        mrPath: $dashboardOptionsDataEl.data('mr-path')
+      };
+    }
+  });
+
 }).call(this);
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 436fb00ba2e..e77f9816d8a 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -103,7 +103,7 @@
 
     // Custom dropdown positioning
     .dropdown-menu {
-      top: 30px;
+      top: 37px;
       left: -5px;
       padding: 0;
 
diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml
index f7580f00159..d7386105b7d 100644
--- a/app/views/layouts/_search.html.haml
+++ b/app/views/layouts/_search.html.haml
@@ -2,15 +2,18 @@
   - label = 'This group'
 - if controller.controller_path =~ /^projects/ && @project.persisted?
   - label = 'This project'
-
+- if @group && @group.persisted? && @group.path
+  - group_data_attrs = { group_path: j(@group.path), name: @group.name, issues_path: issues_group_path(j(@group.path)), mr_path: merge_requests_group_path(j(@group.path)) }
+- if @project && @project.persisted?
+  - project_data_attrs = { project_path: j(@project.path), name: j(@project.name), issues_path: namespace_project_issues_path(@project.namespace, @project), mr_path: namespace_project_merge_requests_path(@project.namespace, @project) }
 .search.search-form{class: "#{'has-location-badge' if label.present?}"}
   = form_tag search_path, method: :get, class: 'navbar-form' do |f|
     .search-input-container
       - if label.present?
         .location-badge= label
       .search-input-wrap
-        .dropdown{ data: {url: search_autocomplete_path } }
-          = search_field_tag "search", nil, placeholder: 'Search', class: "search-input dropdown-menu-toggle", spellcheck: false, tabindex: "1", autocomplete: 'off',  data: { toggle: 'dropdown' }
+        .dropdown{ data: { url: search_autocomplete_path } }
+          = search_field_tag 'search', nil, placeholder: 'Search', class: 'search-input dropdown-menu-toggle js-search-dashboard-options', spellcheck: false, tabindex: '1', autocomplete: 'off', data: { toggle: 'dropdown', issues_path: issues_dashboard_url, mr_path: merge_requests_dashboard_url }
           .dropdown-menu.dropdown-select
             = dropdown_content do
               %ul
@@ -21,8 +24,9 @@
           %i.search-icon
           %i.clear-icon.js-clear-input
 
-    = hidden_field_tag :group_id, @group.try(:id)
-    = hidden_field_tag :project_id, @project && @project.persisted? ? @project.id : '', id: 'search_project_id'
+    = hidden_field_tag :group_id, @group.try(:id), class: 'js-search-group-options', data: group_data_attrs
+
+    = hidden_field_tag :project_id, @project && @project.persisted? ? @project.id : '', id: 'search_project_id', class: 'js-search-project-options', data: project_data_attrs
 
     - if @project && @project.persisted?
       - if current_controller?(:issues)
@@ -36,31 +40,6 @@
       - else
         = hidden_field_tag :search_code, true
 
-      :javascript
-        gl.projectOptions = gl.projectOptions || {};
-        gl.projectOptions["#{j(@project.path)}"] = {
-          issuesPath: "#{namespace_project_issues_path(@project.namespace, @project)}",
-          mrPath: "#{namespace_project_merge_requests_path(@project.namespace, @project)}",
-          name: "#{j(@project.name)}"
-        };
-
-    - if @group && @group.persisted? && @group.path
-      :javascript
-        gl.groupOptions = gl.groupOptions || {};
-        gl.groupOptions["#{j(@group.path)}"] = {
-          name: "#{j(@group.name)}",
-          issuesPath: "#{issues_group_path(j(@group.path))}",
-          mrPath: "#{merge_requests_group_path(j(@group.path))}"
-        };
-
-
-    :javascript
-      gl.dashboardOptions = {
-        issuesPath: "#{issues_dashboard_url}",
-        mrPath: "#{merge_requests_dashboard_url}"
-      };
-
-
     - if @snippet || @snippets
       = hidden_field_tag :snippets, true
     = hidden_field_tag :repository_ref, @ref