Add multiple assignee support to sidebar

app/models/concerns/issuable.rb

@@ -113,6 +113,10 @@ module Issuable
     def locking_enabled?
       title_changed? || description_changed?
     end
+
+    def assignees
+      [User.first, User.last]
+    end
   end
 
   module ClassMethods

app/serializers/issuable_entity.rb

@@ -2,6 +2,7 @@ class IssuableEntity < Grape::Entity
   expose :id
   expose :iid
   expose :assignee_id
+  expose :assignees, using: UserEntity
   expose :author_id
   expose :description
   expose :lock_version

app/views/shared/issuable/_sidebar.html.haml

@@ -3,6 +3,8 @@
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('issuable')
 
+- puts issuable.is_a?(Issue)
+
 %aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => "101", "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
   .issuable-sidebar
     - can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
@@ -23,35 +25,42 @@
 
     = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, format: :json, html: { class: 'issuable-context-form inline-update js-issuable-update' } do |f|
       .block.assignee
-        .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: (issuable.assignee.name if issuable.assignee) }
-          - if issuable.assignee
-            = link_to_member(@project, issuable.assignee, size: 24)
-          - else
-            = icon('user', 'aria-hidden': 'true')
-        .title.hide-collapsed
-          Assignee
-          = icon('spinner spin', class: 'block-loading', 'aria-hidden': 'true')
-          - if can_edit_issuable
-            = link_to 'Edit', '#', class: 'edit-link pull-right'
-        .value.hide-collapsed
-          - if issuable.assignee
-            = link_to_member(@project, issuable.assignee, size: 32, extra_class: 'bold') do
-              - if issuable.instance_of?(MergeRequest) && !issuable.can_be_merged_by?(issuable.assignee)
-                %span.pull-right.cannot-be-merged{ data: { toggle: 'tooltip', placement: 'left' }, title: 'Not allowed to merge' }
-                  = icon('exclamation-triangle', 'aria-hidden': 'true')
-              %span.username
-                = issuable.assignee.to_reference
-          - else
-            %span.assign-yourself.no-value
-              No assignee
-              - if can_edit_issuable
-                \-
-                %a.js-assign-yourself{ href: '#' }
-                  assign yourself
+        #js-vue-sidebar-assignees
+
+        - content_for :page_specific_javascripts do
+          = page_specific_javascript_bundle_tag('vue_sidebar_assignees')
+        -# .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: (issuable.assignee.name if issuable.assignee) }
+        -#   - if issuable.assignee
+        -#     = link_to_member(@project, issuable.assignee, size: 24)
+        -#   - else
+        -#     = icon('user', 'aria-hidden': 'true')
+        -# .title.hide-collapsed
+        -#   Assignee
+        -#   = icon('spinner spin', class: 'block-loading', 'aria-hidden': 'true')
+        -#   - if can_edit_issuable
+        -#     = link_to 'Edit', '#', class: 'edit-link pull-right'
+        -# .value.hide-collapsed
+        -#   - if issuable.assignee
+        -#     = link_to_member(@project, issuable.assignee, size: 32, extra_class: 'bold') do
+        -#       - if issuable.instance_of?(MergeRequest) && !issuable.can_be_merged_by?(issuable.assignee)
+        -#         %span.pull-right.cannot-be-merged{ data: { toggle: 'tooltip', placement: 'left' }, title: 'Not allowed to merge' }
+        -#           = icon('exclamation-triangle', 'aria-hidden': 'true')
+        -#       %span.username
+        -#         = issuable.assignee.to_reference
+        -#   - else
+        -#     %span.assign-yourself.no-value
+        -#       No assignee
+        -#       - if can_edit_issuable
+        -#         \-
+        -#         %a.js-assign-yourself{ href: '#' }
+        -#           assign yourself
 
         .selectbox.hide-collapsed
           = f.hidden_field 'assignee_id', value: issuable.assignee_id, id: 'issue_assignee_id'
-          = dropdown_tag('Select assignee', options: { toggle_class: 'js-user-search js-author-search', title: 'Assign to', filter: true, dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-author', placeholder: 'Search users', data: { first_user: (current_user.username if current_user), current_user: true, project_id: (@project.id if @project), author_id: issuable.author_id, field_name: "#{issuable.to_ability_name}[assignee_id]", issue_update: issuable_json_path(issuable), ability_name: issuable.to_ability_name, null_user: true } })
+          - if issuable.instance_of?(Issue)
+            = dropdown_tag('Select assignee(s)', options: { toggle_class: 'js-user-search js-author-search', title: 'Assign to', filter: true, dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-author', placeholder: 'Search users', data: { first_user: (current_user.username if current_user), current_user: true, project_id: (@project.id if @project), author_id: issuable.author_id, field_name: "#{issuable.to_ability_name}[assignee_id]", issue_update: issuable_json_path(issuable), ability_name: issuable.to_ability_name, null_user: true } })
+          - else
+            = dropdown_tag('Select assignee', options: { toggle_class: 'js-user-search js-author-search', title: 'Assign to', filter: true, dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-author', placeholder: 'Search users', data: { first_user: (current_user.username if current_user), current_user: true, project_id: (@project.id if @project), author_id: issuable.author_id, field_name: "#{issuable.to_ability_name}[assignee_id]", issue_update: issuable_json_path(issuable), ability_name: issuable.to_ability_name, null_user: true } })
 
       .block.milestone
         .sidebar-collapsed-icon

config/webpack.config.js

@@ -45,6 +45,7 @@ var config = {
     u2f:                  ['vendor/u2f'],
     users:                './users/users_bundle.js',
     vue_pipelines:        './vue_pipelines_index/index.js',
+    vue_sidebar_assignees: './vue_sidebar_assignees/index.js',
   },
 
   output: {