Add reviewers in MR Form

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/216054

In the merge request form, there is a reviewers dropdown.
It behaves similar to the assignee field.

app/assets/javascripts/issuable_form.js

@@ -66,6 +66,7 @@ export default class IssuableForm {
       gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources,
     ).setup();
     this.usersSelect = new UsersSelect();
+    this.reviewersSelect = new UsersSelect(undefined, '.js-reviewer-search');
     this.zenMode = new ZenMode();
 
     this.titleField = this.form.find('input[name*="[title]"]');

app/assets/javascripts/users_select/index.js

@@ -55,6 +55,7 @@ function UsersSelect(currentUser, els, options = {}) {
     const defaultLabel = $dropdown.data('defaultLabel');
     const issueURL = $dropdown.data('issueUpdate');
     const $selectbox = $dropdown.closest('.selectbox');
+    const $assignToMeLink = $selectbox.next('.assign-to-me-link');
     let $block = $selectbox.closest('.block');
     const abilityName = $dropdown.data('abilityName');
     let $value = $block.find('.value');
@@ -161,7 +162,7 @@ function UsersSelect(currentUser, els, options = {}) {
       });
     };
 
-    $('.assign-to-me-link').on('click', e => {
+    $assignToMeLink.on('click', e => {
       e.preventDefault();
       $(e.currentTarget).hide();
 
@@ -451,9 +452,9 @@ function UsersSelect(currentUser, els, options = {}) {
           }
 
           if (getSelected().find(u => u === gon.current_user_id)) {
-            $('.assign-to-me-link').hide();
+            $assignToMeLink.hide();
           } else {
-            $('.assign-to-me-link').show();
+            $assignToMeLink.show();
           }
         }
 

app/helpers/form_helper.rb

@@ -55,6 +55,28 @@ module FormHelper
     dropdown_data
   end
 
+  def reviewers_dropdown_options(issuable_type)
+    {
+      toggle_class: 'js-reviewer-search js-multiselect js-save-user-data',
+      title: 'Request review from',
+      filter: true,
+      dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-reviewer',
+      placeholder: _('Search users'),
+      data: {
+        first_user: current_user&.username,
+        null_user: true,
+        current_user: true,
+        project_id: (@target_project || @project)&.id, field_name: "#{issuable_type}[reviewer_ids][]",
+        default_label: 'Unassigned',
+        'dropdown-header': 'Reviewer(s)',
+        multi_select: true,
+        'input-meta': 'name',
+        'always-show-selectbox': true,
+        current_user_info: UserSerializer.new.represent(current_user)
+      }
+    }
+  end
+
   # Overwritten
   def issue_supports_multiple_assignees?
     false

app/views/shared/issuable/form/_metadata.html.haml

@@ -12,6 +12,10 @@
     .form-group.row.merge-request-assignee
       = render "shared/issuable/form/metadata_issuable_assignee", issuable: issuable, form: form, has_due_date: has_due_date
 
+    - if issuable.allows_reviewers?
+      .form-group.row.merge-request-reviewer
+        = render "shared/issuable/form/metadata_issuable_reviewer", issuable: issuable, form: form, has_due_date: has_due_date
+
     = render_if_exists "shared/issuable/form/epic", issuable: issuable, form: form, project: project
 
     - if issuable.supports_milestone?

app/views/shared/issuable/form/_metadata_issuable_reviewer.html.haml

+= form.label :reviewer_id, "Reviewer", class: "col-form-label #{has_due_date ? "col-md-2 col-lg-4" : "col-sm-2"}"
+.col-sm-10{ class: ("col-md-8" if has_due_date) }
+  .issuable-form-select-holder.selectbox
+    - issuable.reviewers.each do |reviewer|
+      = hidden_field_tag "#{issuable.to_ability_name}[reviewer_ids][]", reviewer.id, id: nil, data: { meta: reviewer.name, avatar_url: reviewer.avatar_url, name: reviewer.name, username: reviewer.username }
+
+    - if issuable.reviewers.length === 0
+      = hidden_field_tag "#{issuable.to_ability_name}[reviewer_ids][]", 0, id: nil, data: { meta: '' }
+
+    = dropdown_tag(users_dropdown_label(issuable.reviewers), options: reviewers_dropdown_options(issuable.to_ability_name))

spec/features/merge_request/user_edits_mr_spec.rb

@@ -7,6 +7,7 @@ RSpec.describe 'Merge request > User edits MR' do
 
   before do
     stub_licensed_features(multiple_merge_request_assignees: false)
+    stub_feature_flags(merge_request_reviewers: true)
   end
 
   context 'non-fork merge request' do

spec/support/shared_examples/features/editable_merge_request_shared_examples.rb

@@ -11,6 +11,15 @@ RSpec.shared_examples 'an editable merge request' do
       expect(page).to have_content user.name
     end
 
+    find('.js-reviewer-search').click
+    page.within '.dropdown-menu-user' do
+      click_link user.name
+    end
+    expect(find('input[name="merge_request[reviewer_ids][]"]', visible: false).value).to match(user.id.to_s)
+    page.within '.js-reviewer-search' do
+      expect(page).to have_content user.name
+    end
+
     click_button 'Milestone'
     page.within '.issue-milestone' do
       click_link milestone.title

spec/views/projects/merge_requests/edit.html.haml_spec.rb

@@ -20,6 +20,7 @@ RSpec.describe 'projects/merge_requests/edit.html.haml' do
       target_project: project,
       author: user,
       assignees: [user],
+      reviewers: [user],
       milestone: milestone)
   end