Merge branch 'master' into remove-old-isobjectremove-old-isobject

* master: (226 commits)
  Real time pipeline show action
  Fix `Routable.find_by_full_path` on MySQL
  add CHANGELOG.md entry for !11138
  add tooltips to user contrib graph key
  Use an absolute path for locale path in FastGettext config
  Colorize labels in issue search field
  Fix Karma failures for jQuery deferreds
  Reduce risk of deadlocks
  Fix failing spec and eslint
  Resolve discussions
  Resolve discussions
  Dry up routable lookups. Fixes #30317
  Add “project moved” flash message on redirect
  Resolve discussions
  Fix Rubocop failures
  Index redirect_routes path for LIKE
  Add index for source association and for path
  Fix or workaround spec failure
  Refactor
  Delete conflicting redirects
  ...

1 files changed, 301 insertions, 102 deletions

diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index 68cf9ced3ef..be29b08c343 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -1,6 +1,7 @@
 /* eslint-disable func-names, space-before-function-paren, one-var, no-var, prefer-rest-params, wrap-iife, quotes, max-len, one-var-declaration-per-line, vars-on-top, prefer-arrow-callback, consistent-return, comma-dangle, object-shorthand, no-shadow, no-unused-vars, no-else-return, no-self-compare, prefer-template, no-unused-expressions, no-lonely-if, yoda, prefer-spread, no-void, camelcase, no-param-reassign */
 /* global Issuable */
-/* global ListUser */
+
+import eventHub from './sidebar/event_hub';
 
 (function() {
   var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; },
@@ -54,42 +55,115 @@
           selectedIdDefault = (defaultNullUser && showNullUser) ? 0 : null;
           selectedId = $dropdown.data('selected') || selectedIdDefault;
 
-          var updateIssueBoardsIssue = function () {
-            $loading.removeClass('hidden').fadeIn();
-            gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
-              .then(function () {
-                $loading.fadeOut();
-              })
-              .catch(function () {
-                $loading.fadeOut();
-              });
+          const assignYourself = function () {
+            const unassignedSelected = $dropdown.closest('.selectbox')
+              .find(`input[name='${$dropdown.data('field-name')}'][value=0]`);
+
+            if (unassignedSelected) {
+              unassignedSelected.remove();
+            }
+
+            // Save current selected user to the DOM
+            const input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = $dropdown.data('field-name');
+
+            const currentUserInfo = $dropdown.data('currentUserInfo');
+
+            if (currentUserInfo) {
+              input.value = currentUserInfo.id;
+              input.dataset.meta = currentUserInfo.name;
+            } else if (_this.currentUser) {
+              input.value = _this.currentUser.id;
+            }
+
+            if ($selectbox) {
+              $dropdown.parent().before(input);
+            } else {
+              $dropdown.after(input);
+            }
+          };
+
+          if ($block[0]) {
+            $block[0].addEventListener('assignYourself', assignYourself);
+          }
+
+          const getSelectedUserInputs = function() {
+            return $selectbox
+              .find(`input[name="${$dropdown.data('field-name')}"]`);
+          };
+
+          const getSelected = function() {
+            return getSelectedUserInputs()
+              .map((index, input) => parseInt(input.value, 10))
+              .get();
+          };
+
+          const checkMaxSelect = function() {
+            const maxSelect = $dropdown.data('max-select');
+            if (maxSelect) {
+              const selected = getSelected();
+
+              if (selected.length > maxSelect) {
+                const firstSelectedId = selected[0];
+                const firstSelected = $dropdown.closest('.selectbox')
+                  .find(`input[name='${$dropdown.data('field-name')}'][value=${firstSelectedId}]`);
+
+                firstSelected.remove();
+                eventHub.$emit('sidebar.removeAssignee', {
+                  id: firstSelectedId,
+                });
+              }
+            }
+          };
+
+          const getMultiSelectDropdownTitle = function(selectedUser, isSelected) {
+            const selectedUsers = getSelected()
+              .filter(u => u !== 0);
+
+            const firstUser = getSelectedUserInputs()
+              .map((index, input) => ({
+                name: input.dataset.meta,
+                value: parseInt(input.value, 10),
+              }))
+              .filter(u => u.id !== 0)
+              .get(0);
+
+            if (selectedUsers.length === 0) {
+              return 'Unassigned';
+            } else if (selectedUsers.length === 1) {
+              return firstUser.name;
+            } else if (isSelected) {
+              const otherSelected = selectedUsers.filter(s => s !== selectedUser.id);
+              return `${selectedUser.name} + ${otherSelected.length} more`;
+            } else {
+              return `${firstUser.name} + ${selectedUsers.length - 1} more`;
+            }
           };
 
           $('.assign-to-me-link').on('click', (e) => {
             e.preventDefault();
             $(e.currentTarget).hide();
-            const $input = $(`input[name="${$dropdown.data('field-name')}"]`);
-            $input.val(gon.current_user_id);
-            selectedId = $input.val();
-            $dropdown.find('.dropdown-toggle-text').text(gon.current_user_fullname).removeClass('is-default');
-          });
 
-          $block.on('click', '.js-assign-yourself', function(e) {
-            e.preventDefault();
-
-            if ($dropdown.hasClass('js-issue-board-sidebar')) {
-              gl.issueBoards.boardStoreIssueSet('assignee', new ListUser({
-                id: _this.currentUser.id,
-                username: _this.currentUser.username,
-                name: _this.currentUser.name,
-                avatar_url: _this.currentUser.avatar_url
-              }));
+            if ($dropdown.data('multiSelect')) {
+              assignYourself();
+              checkMaxSelect();
 
-              updateIssueBoardsIssue();
+              const currentUserInfo = $dropdown.data('currentUserInfo');
+              $dropdown.find('.dropdown-toggle-text').text(getMultiSelectDropdownTitle(currentUserInfo)).removeClass('is-default');
             } else {
-              return assignTo(_this.currentUser.id);
+              const $input = $(`input[name="${$dropdown.data('field-name')}"]`);
+              $input.val(gon.current_user_id);
+              selectedId = $input.val();
+              $dropdown.find('.dropdown-toggle-text').text(gon.current_user_fullname).removeClass('is-default');
             }
           });
+
+          $block.on('click', '.js-assign-yourself', (e) => {
+            e.preventDefault();
+            return assignTo(_this.currentUser.id);
+          });
+
           assignTo = function(selected) {
             var data;
             data = {};
@@ -97,6 +171,7 @@
             data[abilityName].assignee_id = selected != null ? selected : null;
             $loading.removeClass('hidden').fadeIn();
             $dropdown.trigger('loading.gl.dropdown');
+
             return $.ajax({
               type: 'PUT',
               dataType: 'json',
@@ -106,7 +181,6 @@
               var user;
               $dropdown.trigger('loaded.gl.dropdown');
               $loading.fadeOut();
-              $selectbox.hide();
               if (data.assignee) {
                 user = {
                   name: data.assignee.name,
@@ -133,51 +207,90 @@
               var isAuthorFilter;
               isAuthorFilter = $('.js-author-search');
               return _this.users(term, options, function(users) {
-                var anyUser, index, j, len, name, obj, showDivider;
-                if (term.length === 0) {
-                  showDivider = 0;
-                  if (firstUser) {
-                    // Move current user to the front of the list
-                    for (index = j = 0, len = users.length; j < len; index = (j += 1)) {
-                      obj = users[index];
-                      if (obj.username === firstUser) {
-                        users.splice(index, 1);
-                        users.unshift(obj);
-                        break;
-                      }
+                // GitLabDropdownFilter returns this.instance
+                // GitLabDropdownRemote returns this.options.instance
+                const glDropdown = this.instance || this.options.instance;
+                glDropdown.options.processData(term, users, callback);
+              }.bind(this));
+            },
+            processData: function(term, users, callback) {
+              let anyUser;
+              let index;
+              let j;
+              let len;
+              let name;
+              let obj;
+              let showDivider;
+              if (term.length === 0) {
+                showDivider = 0;
+                if (firstUser) {
+                  // Move current user to the front of the list
+                  for (index = j = 0, len = users.length; j < len; index = (j += 1)) {
+                    obj = users[index];
+                    if (obj.username === firstUser) {
+                      users.splice(index, 1);
+                      users.unshift(obj);
+                      break;
                     }
                   }
-                  if (showNullUser) {
-                    showDivider += 1;
-                    users.unshift({
-                      beforeDivider: true,
-                      name: 'Unassigned',
-                      id: 0
-                    });
-                  }
-                  if (showAnyUser) {
-                    showDivider += 1;
-                    name = showAnyUser;
-                    if (name === true) {
-                      name = 'Any User';
-                    }
-                    anyUser = {
-                      beforeDivider: true,
-                      name: name,
-                      id: null
-                    };
-                    users.unshift(anyUser);
+                }
+                if (showNullUser) {
+                  showDivider += 1;
+                  users.unshift({
+                    beforeDivider: true,
+                    name: 'Unassigned',
+                    id: 0
+                  });
+                }
+                if (showAnyUser) {
+                  showDivider += 1;
+                  name = showAnyUser;
+                  if (name === true) {
+                    name = 'Any User';
                   }
+                  anyUser = {
+                    beforeDivider: true,
+                    name: name,
+                    id: null
+                  };
+                  users.unshift(anyUser);
                 }
+
                 if (showDivider) {
-                  users.splice(showDivider, 0, "divider");
+                  users.splice(showDivider, 0, 'divider');
                 }
 
-                callback(users);
-                if (showMenuAbove) {
-                  $dropdown.data('glDropdown').positionMenuAbove();
+                if ($dropdown.hasClass('js-multiselect')) {
+                  const selected = getSelected().filter(i => i !== 0);
+
+                  if (selected.length > 0) {
+                    if ($dropdown.data('dropdown-header')) {
+                      showDivider += 1;
+                      users.splice(showDivider, 0, {
+                        header: $dropdown.data('dropdown-header'),
+                      });
+                    }
+
+                    const selectedUsers = users
+                      .filter(u => selected.indexOf(u.id) !== -1)
+                      .sort((a, b) => a.name > b.name);
+
+                    users = users.filter(u => selected.indexOf(u.id) === -1);
+
+                    selectedUsers.forEach((selectedUser) => {
+                      showDivider += 1;
+                      users.splice(showDivider, 0, selectedUser);
+                    });
+
+                    users.splice(showDivider + 1, 0, 'divider');
+                  }
                 }
-              });
+              }
+
+              callback(users);
+              if (showMenuAbove) {
+                $dropdown.data('glDropdown').positionMenuAbove();
+              }
             },
             filterable: true,
             filterRemote: true,
@@ -186,7 +299,22 @@
             },
             selectable: true,
             fieldName: $dropdown.data('field-name'),
-            toggleLabel: function(selected, el) {
+            toggleLabel: function(selected, el, glDropdown) {
+              const inputValue = glDropdown.filterInput.val();
+
+              if (this.multiSelect && inputValue === '') {
+                // Remove non-users from the fullData array
+                const users = glDropdown.filteredFullData();
+                const callback = glDropdown.parseData.bind(glDropdown);
+
+                // Update the data model
+                this.processData(inputValue, users, callback);
+              }
+
+              if (this.multiSelect) {
+                return getMultiSelectDropdownTitle(selected, $(el).hasClass('is-active'));
+              }
+
               if (selected && 'id' in selected && $(el).hasClass('is-active')) {
                 $dropdown.find('.dropdown-toggle-text').removeClass('is-default');
                 if (selected.text) {
@@ -200,22 +328,81 @@
               }
             },
             defaultLabel: defaultLabel,
-            inputId: 'issue_assignee_id',
             hidden: function(e) {
-              $selectbox.hide();
-              // display:block overrides the hide-collapse rule
-              return $value.css('display', '');
+              if ($dropdown.hasClass('js-multiselect')) {
+                eventHub.$emit('sidebar.saveAssignees');
+              }
+
+              if (!$dropdown.data('always-show-selectbox')) {
+                $selectbox.hide();
+
+                // Recalculate where .value is because vue might have changed it
+                $block = $selectbox.closest('.block');
+                $value = $block.find('.value');
+                // display:block overrides the hide-collapse rule
+                $value.css('display', '');
+              }
             },
-            vue: $dropdown.hasClass('js-issue-board-sidebar'),
-            clicked: function(user, $el, e) {
-              var isIssueIndex, isMRIndex, page, selected, isSelecting;
+            multiSelect: $dropdown.hasClass('js-multiselect'),
+            inputMeta: $dropdown.data('input-meta'),
+            clicked: function(options) {
+              const { $el, e, isMarking } = options;
+              const user = options.selectedObj;
+
+              if ($dropdown.hasClass('js-multiselect')) {
+                const isActive = $el.hasClass('is-active');
+                const previouslySelected = $dropdown.closest('.selectbox')
+                    .find("input[name='" + ($dropdown.data('field-name')) + "'][value!=0]");
+
+                // Enables support for limiting the number of users selected
+                // Automatically removes the first on the list if more users are selected
+                checkMaxSelect();
+
+                if (user.beforeDivider && user.name.toLowerCase() === 'unassigned') {
+                  // Unassigned selected
+                  previouslySelected.each((index, element) => {
+                    const id = parseInt(element.value, 10);
+                    element.remove();
+                  });
+                  eventHub.$emit('sidebar.removeAllAssignees');
+                } else if (isActive) {
+                  // user selected
+                  eventHub.$emit('sidebar.addAssignee', user);
+
+                  // Remove unassigned selection (if it was previously selected)
+                  const unassignedSelected = $dropdown.closest('.selectbox')
+                    .find("input[name='" + ($dropdown.data('field-name')) + "'][value=0]");
+
+                  if (unassignedSelected) {
+                    unassignedSelected.remove();
+                  }
+                } else {
+                  if (previouslySelected.length === 0) {
+                  // Select unassigned because there is no more selected users
+                    this.addInput($dropdown.data('field-name'), 0, {});
+                  }
+
+                  // User unselected
+                  eventHub.$emit('sidebar.removeAssignee', user);
+                }
+
+                if (getSelected().find(u => u === gon.current_user_id)) {
+                  $('.assign-to-me-link').hide();
+                } else {
+                  $('.assign-to-me-link').show();
+                }
+              }
+
+              var isIssueIndex, isMRIndex, page, selected;
               page = $('body').data('page');
               isIssueIndex = page === 'projects:issues:index';
               isMRIndex = (page === page && page === 'projects:merge_requests:index');
-              isSelecting = (user.id !== selectedId);
-              selectedId = isSelecting ? user.id : selectedIdDefault;
               if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
                 e.preventDefault();
+
+                const isSelecting = (user.id !== selectedId);
+                selectedId = isSelecting ? user.id : selectedIdDefault;
+
                 if (selectedId === gon.current_user_id) {
                   $('.assign-to-me-link').hide();
                 } else {
@@ -229,20 +416,7 @@
                 return Issuable.filterResults($dropdown.closest('form'));
               } else if ($dropdown.hasClass('js-filter-submit')) {
                 return $dropdown.closest('form').submit();
-              } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
-                if (user.id && isSelecting) {
-                  gl.issueBoards.boardStoreIssueSet('assignee', new ListUser({
-                    id: user.id,
-                    username: user.username,
-                    name: user.name,
-                    avatar_url: user.avatar_url
-                  }));
-                } else {
-                  gl.issueBoards.boardStoreIssueDelete('assignee');
-                }
-
-                updateIssueBoardsIssue();
-              } else {
+              } else if (!$dropdown.hasClass('js-multiselect')) {
                 selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('field-name')) + "']").val();
                 return assignTo(selected);
               }
@@ -256,29 +430,54 @@
                 selectedId = parseInt($dropdown[0].dataset.selected, 10) || selectedIdDefault;
               }
               $el.find('.is-active').removeClass('is-active');
-              $el.find(`li[data-user-id="${selectedId}"] .dropdown-menu-user-link`).addClass('is-active');
+
+              function highlightSelected(id) {
+                $el.find(`li[data-user-id="${id}"] .dropdown-menu-user-link`).addClass('is-active');
+              }
+
+              if ($selectbox[0]) {
+                getSelected().forEach(selectedId => highlightSelected(selectedId));
+              } else {
+                highlightSelected(selectedId);
+              }
             },
+            updateLabel: $dropdown.data('dropdown-title'),
             renderRow: function(user) {
-              var avatar, img, listClosingTags, listWithName, listWithUserName, selected, username;
+              var avatar, img, listClosingTags, listWithName, listWithUserName, username;
               username = user.username ? "@" + user.username : "";
               avatar = user.avatar_url ? user.avatar_url : false;
-              selected = user.id === parseInt(selectedId, 10) ? "is-active" : "";
+
+              let selected = user.id === parseInt(selectedId, 10);
+
+              if (this.multiSelect) {
+                const fieldName = this.fieldName;
+                const field = $dropdown.closest('.selectbox').find("input[name='" + fieldName + "'][value='" + user.id + "']");
+
+                if (field.length) {
+                  selected = true;
+                }
+              }
+
               img = "";
               if (user.beforeDivider != null) {
-                "<li> <a href='#' class='" + selected + "'> " + user.name + " </a> </li>";
+                `<li><a href='#' class='${selected === true ? 'is-active' : ''}'>${user.name}</a></li>`;
               } else {
                 if (avatar) {
-                  img = "<img src='" + avatar + "' class='avatar avatar-inline' width='30' />";
+                  img = "<img src='" + avatar + "' class='avatar avatar-inline' width='32' />";
                 }
               }
-              // split into three parts so we can remove the username section if nessesary
-              listWithName = "<li data-user-id=" + user.id + "> <a href='#' class='dropdown-menu-user-link " + selected + "'> " + img + " <strong class='dropdown-menu-user-full-name'> " + user.name + " </strong>";
-              listWithUserName = "<span class='dropdown-menu-user-username'> " + username + " </span>";
-              listClosingTags = "</a> </li>";
-              if (username === '') {
-                listWithUserName = '';
-              }
-              return listWithName + listWithUserName + listClosingTags;
+
+              return `
+                <li data-user-id=${user.id}>
+                  <a href='#' class='dropdown-menu-user-link ${selected === true ? 'is-active' : ''}'>
+                    ${img}
+                    <strong class='dropdown-menu-user-full-name'>
+                      ${user.name}
+                    </strong>
+                    ${username ? `<span class='dropdown-menu-user-username'>${username}</span>` : ''}
+                  </a>
+                </li>
+              `;
             }
           });
         };