Use select2 dropdown for dashboard/group 'New X' buttons

app/assets/javascripts/api.js.coffee

@@ -2,6 +2,8 @@
   groups_path: "/api/:version/groups.json"
   group_path: "/api/:version/groups/:id.json"
   namespaces_path: "/api/:version/namespaces.json"
+  group_projects_path: "/api/:version/groups/:id/projects.json"
+  projects_path: "/api/:version/projects.json"
 
   group: (group_id, callback) ->
     url = Api.buildUrl(Api.group_path)
@@ -44,6 +46,35 @@
     ).done (namespaces) ->
       callback(namespaces)
 
+  # Return projects list. Filtered by query
+  projects: (query, callback) ->
+    url = Api.buildUrl(Api.projects_path)
+
+    $.ajax(
+      url: url
+      data:
+        private_token: gon.api_token
+        search: query
+        per_page: 20
+      dataType: "json"
+    ).done (projects) ->
+      callback(projects)
+
+  # Return group projects list. Filtered by query
+  groupProjects: (group_id, query, callback) ->
+    url = Api.buildUrl(Api.group_projects_path)
+    url = url.replace(':id', group_id)
+
+    $.ajax(
+      url: url
+      data:
+        private_token: gon.api_token
+        search: query
+        per_page: 20
+      dataType: "json"
+    ).done (projects) ->
+      callback(projects)
+
   buildUrl: (url) ->
     url = gon.relative_url_root + url if gon.relative_url_root?
     return url.replace(':version', gon.api_version)

app/assets/javascripts/project_select.js.coffee

+class @ProjectSelect
+  constructor: ->
+    $('.ajax-project-select').each (i, select) ->
+      @groupId = $(select).data('group-id')
+
+      $(select).select2
+        placeholder: "Search for project"
+        multiple: $(select).hasClass('multiselect')
+        minimumInputLength: 0
+        query: (query) =>
+          callback = (projects) ->
+            data = { results: projects }
+            query.callback(data)
+
+          if @groupId
+            Api.groupProjects @groupId, query.term, callback
+          else
+            Api.projects query.term, callback
+
+        id: (project) ->
+          project.web_url
+
+        text: (project) ->
+          project.name_with_namespace
+
+        dropdownCssClass: "ajax-project-dropdown"

app/assets/stylesheets/framework/common.scss

@@ -441,3 +441,16 @@ table {
 .alert, .progress {
   margin-bottom: $gl-padding;
 }
+
+.new-project-item-select-holder {
+  display: inline-block;
+  position: relative;
+
+  .new-project-item-select {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 250px !important;
+    visibility: hidden;
+  }
+}

app/helpers/selects_helper.rb

@@ -46,6 +46,19 @@ module SelectsHelper
     select2_tag(id, opts)
   end
 
+  def project_select_tag(id, opts = {})
+    opts[:class] ||= ''
+    opts[:class] << ' ajax-project-select'
+
+    unless opts.delete(:scope) == :all
+      if @group
+        opts['data-group-id'] = @group.id
+      end
+    end
+
+    hidden_field_tag(id, opts[:selected], opts)
+  end
+
   def select2_tag(id, opts = {})
     css_class = ''
     css_class << 'multiselect ' if opts[:multiple]

app/views/dashboard/issues.html.haml

@@ -12,18 +12,7 @@
           = link_to issues_dashboard_url(format: :atom, private_token: current_user.private_token), class: 'btn' do
             %i.fa.fa-rss
 
-    - if @projects.any? { |project| can?(current_user, :create_issue, project) }
-      .dropdown.inline.prepend-left-10
-        %button.dropdown-toggle.btn.btn-new{type: 'button', 'data-toggle' => 'dropdown'}
-          %i.fa.fa-plus
-          New Issue
-          %b.caret
-        %ul.dropdown-menu.dropdown-menu-align-right
-          - @projects.each do |project|
-            - if can?(current_user, :create_issue, project)
-              %li
-                = link_to new_namespace_project_issue_path(project.namespace, project) do
-                  = project.name_with_namespace
+    = render 'shared/new_project_item_select', path: 'issues/new', label: "New Issue"
 
   = render 'shared/issuable/filter', type: :issues
 

app/views/dashboard/merge_requests.html.haml

@@ -3,18 +3,7 @@
 
 .project-issuable-filter
   .controls
-    - if @projects.any? { |project| can?(current_user, :create_merge_request, project) }
-      .dropdown.inline
-        %button.dropdown-toggle.btn.btn-new{type: 'button', 'data-toggle' => 'dropdown'}
-          %i.fa.fa-plus
-          New Merge Request
-          %b.caret
-        %ul.dropdown-menu.dropdown-menu-align-right
-          - @projects.each do |project|
-            - if can?(current_user, :create_merge_request, project)
-              %li
-                = link_to new_namespace_project_merge_request_path(project.namespace, project) do
-                  = project.name_with_namespace
+    = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New Merge Request"
 
   = render 'shared/issuable/filter', type: :merge_requests
 

app/views/dashboard/milestones/index.html.haml

@@ -3,18 +3,7 @@
 
 .project-issuable-filter
   .controls
-    - if @projects.any? { |project| can?(current_user, :admin_milestone, project) }
-      .dropdown.inline
-        %button.dropdown-toggle.btn.btn-new{type: 'button', 'data-toggle' => 'dropdown'}
-          %i.fa.fa-plus
-          New Milestone
-          %b.caret
-        %ul.dropdown-menu.dropdown-menu-align-right
-          - @projects.each do |project|
-            - if can?(current_user, :admin_milestone, project)
-              %li
-                = link_to new_namespace_project_milestone_path(project.namespace, project) do
-                  = project.name_with_namespace
+    = render 'shared/new_project_item_select', path: 'milestones/new', label: "New Milestone"
 
   = render 'shared/milestones_filter'
 

app/views/groups/issues.html.haml

@@ -12,18 +12,7 @@
           = link_to issues_group_url(@group, format: :atom, private_token: current_user.private_token), class: 'btn' do
             %i.fa.fa-rss
 
-    - if @projects.any? { |project| can?(current_user, :create_issue, project) }
-      .dropdown.inline.prepend-left-10
-        %button.dropdown-toggle.btn.btn-new{type: 'button', 'data-toggle' => 'dropdown'}
-          %i.fa.fa-plus
-          New Issue
-          %b.caret
-        %ul.dropdown-menu.dropdown-menu-align-right
-          - @projects.each do |project|
-            - if can?(current_user, :create_issue, project)
-              %li
-                = link_to new_namespace_project_issue_path(project.namespace, project) do
-                  = project.name_with_namespace
+    = render 'shared/new_project_item_select', path: 'issues/new', label: "New Issue"
 
   = render 'shared/issuable/filter', type: :issues
 

app/views/groups/merge_requests.html.haml

@@ -3,18 +3,7 @@
 
 .project-issuable-filter
   .controls
-    - if @projects.any? { |project| can?(current_user, :create_merge_request, project) }
-      .dropdown.inline
-        %button.dropdown-toggle.btn.btn-new{type: 'button', 'data-toggle' => 'dropdown'}
-          %i.fa.fa-plus
-          New Merge Request
-          %b.caret
-        %ul.dropdown-menu.dropdown-menu-align-right
-          - @projects.each do |project|
-            - if can?(current_user, :create_merge_request, project)
-              %li
-                = link_to new_namespace_project_merge_request_path(project.namespace, project) do
-                  = project.name_with_namespace
+    = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New Merge Request"
 
   = render 'shared/issuable/filter', type: :merge_requests
 

app/views/shared/_new_project_item_select.html.haml

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