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

Added dropdown to list all projects on project header

Fixes https://gitlab.com/gitlab-org/gitlab-ce/issues/4212

When clicking the current project name, it shows a dropdown menu with a list of all projects for that group or user.

When closed:

![Screen_Shot_2016-01-14_at_19.17.44](/uploads/a7258ba388dba238fc2f0468711fc729/Screen_Shot_2016-01-14_at_19.17.44.png)

When open:

![Screen_Shot_2016-01-14_at_19.17.51](/uploads/716533d9eb44b123c5fdff36a4740489/Screen_Shot_2016-01-14_at_19.17.51.png)


cc. @jschatz1

See merge request !2438

app/assets/javascripts/project.js.coffee

@@ -50,3 +50,19 @@ class @Project
       $('#notifications-button').empty().append("<i class='fa fa-bell'></i>" + label + "<i class='fa fa-angle-down'></i>")
       $(@).parents('ul').find('li.active').removeClass 'active'
       $(@).parent().addClass 'active'
+
+    @projectSelectDropdown()
+
+  projectSelectDropdown: ->
+    new ProjectSelect()
+
+    $('.project-item-select').on 'click', (e) =>
+      @changeProject $(e.currentTarget).val()
+
+    $('.js-projects-dropdown-toggle').on 'click', (e) ->
+      e.preventDefault()
+
+      $('.js-projects-dropdown').select2('open')
+
+  changeProject: (url) ->
+    window.location = url

app/assets/stylesheets/framework/common.scss

@@ -376,11 +376,11 @@ table {
   margin-bottom: $gl-padding;
 }
 
-.new-project-item-select-holder {
+.project-item-select-holder {
   display: inline-block;
   position: relative;
 
-  .new-project-item-select {
+  .project-item-select {
     position: absolute;
     top: 0;
     right: 0;

app/assets/stylesheets/framework/header.scss

@@ -73,7 +73,6 @@ header {
 
     .title {
       margin: 0;
-      overflow: hidden;
       font-size: 19px;
       line-height: $header-height;
       font-weight: normal;
@@ -88,6 +87,13 @@ header {
           text-decoration: underline;
         }
       }
+
+      .dropdown-toggle-caret {
+        position: relative;
+        top: -2px;
+        margin-left: 5px;
+        font-size: 10px;
+      }
     }
 
     .navbar-collapse {

app/helpers/projects_helper.rb

@@ -53,14 +53,19 @@ module ProjectsHelper
         link_to(simple_sanitize(owner.name), user_path(owner))
       end
 
-    project_link = link_to(simple_sanitize(project.name), project_path(project))
+    project_link = link_to project_path(project), { class: "project-item-select-holder #{"js-projects-dropdown-toggle" if current_user}" } do
+      link_output = simple_sanitize(project.name)
+      link_output += content_tag :span, nil, { class: "fa fa-chevron-down dropdown-toggle-caret" } if current_user
+
+      link_output += project_select_tag :project_path, class: "project-item-select js-projects-dropdown", data: { include_groups: false } if current_user
+
+      link_output
+    end
 
     full_title = namespace_link + ' / ' + project_link
     full_title += ' · '.html_safe + link_to(simple_sanitize(name), url) if name
 
-    content_tag :span do
-      full_title
-    end
+    full_title
   end
 
   def remove_project_message(project)

app/views/shared/_new_project_item_select.html.haml

@@ -1,6 +1,6 @@
 - if @projects.any?
-  .prepend-left-10.new-project-item-select-holder
-    = project_select_tag :project_path, class: "new-project-item-select", data: { include_groups: local_assigns[:include_groups] }
+  .prepend-left-10.project-item-select-holder
+    = project_select_tag :project_path, class: "project-item-select", data: { include_groups: local_assigns[:include_groups] }
     %a.btn.btn-new.new-project-item-select-button
       = icon('plus')
       = local_assigns[:label]
@@ -8,12 +8,12 @@
 
   :javascript
     $('.new-project-item-select-button').on('click', function() {
-      $('.new-project-item-select').select2('open');
+      $('.project-item-select').select2('open');
     });
 
     var relativePath = '#{local_assigns[:path]}';
 
-    $('.new-project-item-select').on('click', function() {
+    $('.project-item-select').on('click', function() {
       window.location = $(this).val() + '/' + relativePath;
     });
 

spec/features/projects_spec.rb

@@ -82,7 +82,26 @@ feature 'Project', feature: true do
 
     it 'click project-settings and find leave project' do
       find('#project-settings-button').click
-      expect(page).to have_link('Leave Project') 
+      expect(page).to have_link('Leave Project')
+    end
+  end
+
+  describe 'project title' do
+    include WaitForAjax
+
+    let(:user)    { create(:user) }
+    let(:project) { create(:project, namespace: user.namespace) }
+
+    before do
+      login_with(user)
+      project.team.add_user(user, Gitlab::Access::MASTER)
+      visit namespace_project_path(project.namespace, project)
+    end
+
+    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)
     end
   end
 

spec/javascripts/fixtures/project_title.html.haml

@@ -0,0 +1,7 @@
+%h1.title
+  %a
+    GitLab Org
+  %a.project-item-select-holder.js-projects-dropdown-toggle{href: "/gitlab-org/gitlab-test"}
+    GitLab Test
+    %span.fa.fa-chevron-down.dropdown-toggle-caret
+    %input#project_path.project-item-select.js-projects-dropdown.ajax-project-select{type: "hidden", name: "project_path", "data-include-groups" => "false"}

spec/javascripts/project_title_spec.js.coffee

@@ -0,0 +1,46 @@
+#= require select2
+#= require api
+#= require project_select
+#= require project
+
+window.gon = {}
+window.gon.api_version = 'v3'
+
+describe 'Project Title', ->
+  fixture.preload('project_title.html')
+  fixture.preload('projects.json')
+
+  beforeEach ->
+    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]
+
+      spyOn(jQuery, 'ajax').and.callFake (req) =>
+        expect(req.url).toBe('/api/v3/projects.json')
+        d = $.Deferred()
+        d.resolve @projects_data
+        d.promise()
+
+    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)
+
+    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')
+
+      expect($('.title .select2-container').hasClass('select2-dropdown-open')).toBe(false)
+      expect(window.current_project_url).toBe('http://localhost:3000/h5bp/html5-boilerplate')