Merge branch 'project-title-dropdown' into 'master'

Project dropdown in header uses new dropdown



See merge request !3339

10 files changed, 82 insertions, 37 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 07274ab5c1d..071e35167fa 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -46,6 +46,7 @@ v 8.7.0 (unreleased)
 
 v 8.6.6
   - Fix error on language detection when repository has no HEAD (e.g., master branch). !3654 (Jeroen Bobbeldijk)
+  - Project switcher uses new dropdown styling
 
 v 8.6.5
   - Fix importing from GitHub Enterprise. !3529
diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index ee1d0fad289..2dc37257e22 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -122,7 +122,9 @@ class GitLabDropdown
   FILTER_INPUT = '.dropdown-input .dropdown-input-field'
 
   constructor: (@el, @options) ->
-    @dropdown = $(@el).parent()
+    self = @
+    selector = $(@el).data "target"
+    @dropdown = if selector? then $(selector) else $(@el).parent()
 
     # Set Defaults
     {
diff --git a/app/assets/javascripts/project_select.js.coffee b/app/assets/javascripts/project_select.js.coffee
index be8ab9b428d..704bd8dee53 100644
--- a/app/assets/javascripts/project_select.js.coffee
+++ b/app/assets/javascripts/project_select.js.coffee
@@ -1,5 +1,37 @@
 class @ProjectSelect
   constructor: ->
+    $('.js-projects-dropdown-toggle').each (i, dropdown) ->
+      $dropdown = $(dropdown)
+
+      $dropdown.glDropdown(
+        filterable: true
+        filterRemote: true
+        search:
+          fields: ['name_with_namespace']
+        data: (term, callback) ->
+          finalCallback = (projects) ->
+            callback projects
+
+          if @includeGroups
+            projectsCallback = (projects) ->
+              groupsCallback = (groups) ->
+                data = groups.concat(projects)
+                finalCallback(data)
+
+              Api.groups term, false, groupsCallback
+          else
+            projectsCallback = finalCallback
+
+          if @groupId
+            Api.groupProjects @groupId, term, projectsCallback
+          else
+            Api.projects term, @orderBy, projectsCallback
+        url: (project) ->
+          project.web_url
+        text: (project) ->
+          project.name_with_namespace
+      )
+
     $('.ajax-project-select').each (i, select) ->
       @groupId = $(select).data('group-id')
       @includeGroups = $(select).data('include-groups')
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index b3397d16016..3f015427d07 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -69,6 +69,7 @@ header {
   }
 
   .header-content {
+    position: relative;
     height: $header-height;
     padding-right: 20px;
 
@@ -76,6 +77,10 @@ header {
       padding-right: 0;
     }
 
+    .dropdown-menu {
+      margin-top: -5px;
+    }
+
     .title {
       margin: 0;
       font-size: 19px;
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index 4e4c6e301d5..7e00aacceaa 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -65,21 +65,14 @@ module ProjectsHelper
         link_to(simple_sanitize(owner.name), user_path(owner))
       end
 
-    project_link = link_to project_path(project), { class: "project-item-select-holder" } do
-      link_output = simple_sanitize(project.name)
+    project_link = link_to simple_sanitize(project.name), project_path(project), { class: "project-item-select-holder" }
 
-      if current_user
-        link_output += project_select_tag :project_path,
-          class: "project-item-select js-projects-dropdown",
-          data: { include_groups: false, order_by: 'last_activity_at' }
-      end
-
-      link_output
+    if current_user
+      project_link << icon("chevron-down", class: "dropdown-toggle-caret js-projects-dropdown-toggle", data: { target: ".js-dropdown-menu-projects", toggle: "dropdown" })
     end
-    project_link += icon "chevron-down", class: "dropdown-toggle-caret js-projects-dropdown-toggle" if current_user
 
-    full_title = namespace_link + ' / ' + project_link
-    full_title += ' &middot; '.html_safe + link_to(simple_sanitize(name), url) if name
+    full_title = "#{namespace_link} / #{project_link}".html_safe
+    full_title << ' &middot; '.html_safe << link_to(simple_sanitize(name), url) if name
 
     full_title
   end
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 0f3b8119379..44339293095 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -45,6 +45,8 @@
 
       %h1.title= title
 
+      = yield :header_content
+
 = render 'shared/outdated_browser'
 
 - if @project && !@project.empty_repo?
diff --git a/app/views/layouts/project.html.haml b/app/views/layouts/project.html.haml
index a7ef31acd3d..6dfe7fbdae8 100644
--- a/app/views/layouts/project.html.haml
+++ b/app/views/layouts/project.html.haml
@@ -17,4 +17,12 @@
 - content_for :scripts_body do
   = render "layouts/init_auto_complete" if current_user
 
+- content_for :header_content do
+  .js-dropdown-menu-projects
+    .dropdown-menu.dropdown-select.dropdown-menu-projects
+      = dropdown_title("Go to a project")
+      = dropdown_filter("Search your projects")
+      = dropdown_content
+      = dropdown_loading
+
 = render template: "layouts/application"
diff --git a/spec/features/projects_spec.rb b/spec/features/projects_spec.rb
index ed97b6cb577..782c0bfe666 100644
--- a/spec/features/projects_spec.rb
+++ b/spec/features/projects_spec.rb
@@ -100,8 +100,7 @@ feature 'Project', feature: true do
 
     it 'click toggle and show dropdown', js: true do
       find('.js-projects-dropdown-toggle').click
-      wait_for_ajax
-      expect(page).to have_css('.select2-results li', count: 1)
+      expect(page).to have_css('.dropdown-menu-projects .dropdown-content li', count: 1)
     end
   end
 
diff --git a/spec/javascripts/fixtures/project_title.html.haml b/spec/javascripts/fixtures/project_title.html.haml
index e5850b62659..4547feeb212 100644
--- a/spec/javascripts/fixtures/project_title.html.haml
+++ b/spec/javascripts/fixtures/project_title.html.haml
@@ -1,7 +1,20 @@
-%h1.title
-  %a
-    GitLab Org
-  %a.project-item-select-holder{href: "/gitlab-org/gitlab-test"}
-    GitLab Test
-    %input#project_path.project-item-select.js-projects-dropdown.ajax-project-select{type: "hidden", name: "project_path", "data-include-groups" => "false"}
-  %i.fa.chevron-down.dropdown-toggle-caret.js-projects-dropdown-toggle
+.header-content
+  %h1.title
+    %a
+      GitLab Org
+    %a.project-item-select-holder{href: "/gitlab-org/gitlab-test"}
+      GitLab Test
+    %i.fa.chevron-down.dropdown-toggle-caret.js-projects-dropdown-toggle{ "data-toggle" => "dropdown", "data-target" => ".header-content" }
+  .js-dropdown-menu-projects
+    .dropdown-menu.dropdown-select.dropdown-menu-projects
+      .dropdown-title
+        %span Go to a project
+        %button.dropdown-title-button.dropdown-menu-close{"aria-label" => "Close", type: "button"}
+          %i.fa.fa-times.dropdown-menu-close-icon
+      .dropdown-input
+        %input.dropdown-input-field{id: "", placeholder: "Search your projects", type: "search", value: ""}
+        %i.fa.fa-search.dropdown-input-search
+        %i.fa.fa-times.dropdown-input-clear.js-dropdown-input-clear{role: "button"}
+      .dropdown-content
+      .dropdown-loading
+        %i.fa.fa-spinner.fa-spin
diff --git a/spec/javascripts/project_title_spec.js.coffee b/spec/javascripts/project_title_spec.js.coffee
index 47c7b7febe3..3d8de2ff989 100644
--- a/spec/javascripts/project_title_spec.js.coffee
+++ b/spec/javascripts/project_title_spec.js.coffee
@@ -1,4 +1,6 @@
+#= require bootstrap
 #= require select2
+#= require gl_dropdown
 #= require api
 #= require project_select
 #= require project
@@ -14,9 +16,6 @@ describe 'Project Title', ->
     fixture.load('project_title.html')
     @project = new Project()
 
-    spyOn(@project, 'changeProject').and.callFake (url) ->
-      window.current_project_url = url
-
   describe 'project list', ->
     beforeEach =>
       @projects_data = fixture.load('projects.json')[0]
@@ -29,18 +28,9 @@ describe 'Project Title', ->
 
     it 'to show on toggle click', =>
       $('.js-projects-dropdown-toggle').click()
-
-      expect($('.title .select2-container').hasClass('select2-dropdown-open')).toBe(true)
-      expect($('.ajax-project-dropdown li').length).toBe(@projects_data.length)
+      expect($('.header-content').hasClass('open')).toBe(true)
 
     it 'hide dropdown', ->
-      $("#select2-drop-mask").click()
-
-      expect($('.title .select2-container').hasClass('select2-dropdown-open')).toBe(false)
-
-    it 'change project when clicking item', ->
-      $('.js-projects-dropdown-toggle').click()
-      $('.ajax-project-dropdown li:nth-child(2)').trigger('mouseup')
+      $(".dropdown-menu-close-icon").click()
 
-      expect($('.title .select2-container').hasClass('select2-dropdown-open')).toBe(false)
-      expect(window.current_project_url).toBe('http://localhost:3000/h5bp/html5-boilerplate')
+      expect($('.header-content').hasClass('open')).toBe(false)