app/assets/javascripts/cycle_analytics/components/stage_test_component.js

@@ -29,9 +29,9 @@ global.cycleAnalytics.StageTestComponent = Vue.extend({
               ·
               <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
               <i class="fa fa-code-fork"></i>
-              <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
+              <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
               <span class="icon-branch">${iconBranch}</span>
-              <a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
+              <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
             </h5>
             <span>
               <a :href="build.url" class="issue-date">

app/assets/javascripts/diff_notes/components/diff_note_avatars.js

@@ -3,6 +3,7 @@
 import Vue from 'vue';
 import collapseIcon from '../icons/collapse_icon.svg';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 const DiffNoteAvatars = Vue.extend({
   props: ['discussionId'],
@@ -15,22 +16,24 @@ const DiffNoteAvatars = Vue.extend({
       collapseIcon,
     };
   },
+  components: {
+    userAvatarImage,
+  },
   template: `
     <div class="diff-comment-avatar-holders"
       v-show="notesCount !== 0">
       <div v-if="!isVisible">
-        <img v-for="note in notesSubset"
-          class="avatar diff-comment-avatar has-tooltip js-diff-comment-avatar"
-          width="19"
-          height="19"
-          role="button"
-          data-container="body"
-          data-placement="top"
-          data-html="true"
+        <!-- FIXME: Pass an alt attribute here for accessibility -->
+        <user-avatar-image
+          v-for="note in notesSubset"
+          class="diff-comment-avatar js-diff-comment-avatar"
+          @click.native="clickedAvatar($event)"
+          :img-src="note.authorAvatar"
+          :tooltip-text="getTooltipText(note)"
           :data-line-type="lineType"
-          :title="note.authorName + ': ' + note.noteTruncated"
-          :src="note.authorAvatar"
-          @click="clickedAvatar($event)" />
+          :size="19"
+          data-html="true"
+        />
         <span v-if="notesCount > shownAvatars"
           class="diff-comments-more-count has-tooltip js-diff-comment-avatar"
           data-container="body"
@@ -120,7 +123,7 @@ const DiffNoteAvatars = Vue.extend({
   },
   methods: {
     clickedAvatar(e) {
-      notes.addDiffNote(e);
+      notes.onAddDiffNote(e);
       // Toggle the active state of the toggle all button
       this.toggleDiscussionsToggleState();
@@ -150,6 +153,9 @@ const DiffNoteAvatars = Vue.extend({
     setDiscussionVisible() {
       this.isVisible = $(`.diffs .notes[data-discussion-id="${this.discussion.id}"]`).is(':visible');
     },
+    getTooltipText(note) {
+      return `${note.authorName}: ${note.noteTruncated}`;
+    },
   },
 });

app/assets/javascripts/diff_notes/diff_notes_bundle.js

@@ -65,4 +65,6 @@ $(() => {
       'resolve-count': ResolveCount
     }
   });
+
+  $(window).trigger('resize.nav');
 });

app/assets/javascripts/dispatcher.js

@@ -14,7 +14,6 @@
 /* global NotificationsForm */
 /* global TreeView */
 /* global NotificationsDropdown */
-/* global UsersSelect */
 /* global GroupAvatar */
 /* global LineHighlighter */
 /* global ProjectFork */
@@ -52,6 +51,9 @@ import ShortcutsWiki from './shortcuts_wiki';
 import Pipelines from './pipelines';
 import BlobViewer from './blob/viewer/index';
 import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
+import UsersSelect from './users_select';
+import RefSelectDropdown from './ref_select_dropdown';
+import GfmAutoComplete from './gfm_auto_complete';
 const ShortcutsBlob = require('./shortcuts_blob');
@@ -78,6 +80,8 @@ const ShortcutsBlob = require('./shortcuts_blob');
       path = page.split(':');
       shortcut_handler = null;
+      new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).setup();
+
       function initBlob() {
         new LineHighlighter();
@@ -113,6 +117,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'projects:boards:show':
         case 'projects:boards:index':
           shortcut_handler = new ShortcutsNavigation();
+          new UsersSelect();
           break;
         case 'projects:builds:show':
           new Build();
@@ -127,6 +132,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
             prefixId: page === 'projects:merge_requests:index' ? 'merge_request_' : 'issue_',
           });
           shortcut_handler = new ShortcutsNavigation();
+          new UsersSelect();
           break;
         case 'projects:issues:show':
           new Issue();
@@ -139,6 +145,10 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new Milestone();
           new Sidebar();
           break;
+        case 'groups:issues':
+        case 'groups:merge_requests':
+          new UsersSelect();
+          break;
         case 'dashboard:todos:index':
           new gl.Todos();
           break;
@@ -206,6 +216,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'projects:tags:new':
           new ZenMode();
           new gl.GLForm($('.tag-form'));
+          new RefSelectDropdown($('.js-branch-select'), window.gl.availableRefs);
           break;
         case 'projects:releases:edit':
           new ZenMode();
@@ -223,6 +234,10 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'dashboard:activity':
           new gl.Activities();
           break;
+        case 'dashboard:issues':
+        case 'dashboard:merge_requests':
+          new UsersSelect();
+          break;
         case 'projects:commit:show':
           new Commit();
           new gl.Diff();
@@ -246,6 +261,8 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new NotificationsForm();
           if ($('#tree-slider').length) {
             new TreeView();
+          }
+          if ($('.blob-viewer').length) {
             new BlobViewer();
           }
           break;
@@ -377,6 +394,9 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new LineHighlighter();
           new BlobViewer();
           break;
+        case 'import:fogbugz:new_user_map':
+          new UsersSelect();
+          break;
       }
       switch (path.first()) {
         case 'sessions':

app/assets/javascripts/droplab/drop_down.js

-/* eslint-disable */
-
 import utils from './utils';
 import { SELECTED_CLASS, IGNORE_CLASS } from './constants';
-var DropDown = function(list) {
-  this.currentIndex = 0;
-  this.hidden = true;
-  this.list = typeof list === 'string' ? document.querySelector(list) : list;
-  this.items = [];
-  this.eventWrapper = {};
-  this.getItems();
-  this.initTemplateString();
-  this.addEvents();
-  this.initialState = list.innerHTML;
-};
-Object.assign(DropDown.prototype, {
-  getItems: function() {
+class DropDown {
+  constructor(list) {
+    this.currentIndex = 0;
+    this.hidden = true;
+    this.list = typeof list === 'string' ? document.querySelector(list) : list;
+    this.items = [];
+    this.eventWrapper = {};
+    this.getItems();
+    this.initTemplateString();
+    this.addEvents();
+    this.initialState = list.innerHTML;
+  }
+  getItems() {
     this.items = [].slice.call(this.list.querySelectorAll('li'));
     return this.items;
-  },
-  initTemplateString: function() {
-    var items = this.items || this.getItems();
-    var templateString = '';
+  }
+  initTemplateString() {
+    const items = this.items || this.getItems();
+    let templateString = '';
     if (items.length > 0) templateString = items[items.length - 1].outerHTML;
     this.templateString = templateString;
     return this.templateString;
-  },
-  clickEvent: function(e) {
+  }
+  clickEvent(e) {
     if (e.target.tagName === 'UL') return;
     if (e.target.classList.contains(IGNORE_CLASS)) return;
-    var selected = utils.closest(e.target, 'LI');
+    const selected = utils.closest(e.target, 'LI');
     if (!selected) return;
     this.addSelectedClass(selected);
@@ -46,95 +44,95 @@ Object.assign(DropDown.prototype, {
     e.preventDefault();
     this.hide();
-    var listEvent = new CustomEvent('click.dl', {
+    const listEvent = new CustomEvent('click.dl', {
       detail: {
         list: this,
-        selected: selected,
+        selected,
         data: e.target.dataset,
       },
     });
     this.list.dispatchEvent(listEvent);
-  },
-  addSelectedClass: function (selected) {
+  }
+  addSelectedClass(selected) {
     this.removeSelectedClasses();
     selected.classList.add(SELECTED_CLASS);
-  },
-  removeSelectedClasses: function () {
+  }
+  removeSelectedClasses() {
     const items = this.items || this.getItems();
     items.forEach(item => item.classList.remove(SELECTED_CLASS));
-  },
-  addEvents: function() {
-    this.eventWrapper.clickEvent = this.clickEvent.bind(this)
+  }
+  addEvents() {
+    this.eventWrapper.clickEvent = this.clickEvent.bind(this);
     this.list.addEventListener('click', this.eventWrapper.clickEvent);
-  },
-
-  toggle: function() {
-    this.hidden ? this.show() : this.hide();
-  },
-  setData: function(data) {
+  }
+  setData(data) {
     this.data = data;
     this.render(data);
-  },
-  addData: function(data) {
+  }
+  addData(data) {
     this.data = (this.data || []).concat(data);
     this.render(this.data);
-  },
-  render: function(data) {
+  }
+  render(data) {
     const children = data ? data.map(this.renderChildren.bind(this)) : [];
     const renderableList = this.list.querySelector('ul[data-dynamic]') || this.list;
     renderableList.innerHTML = children.join('');
-  },
-  renderChildren: function(data) {
-    var html = utils.template(this.templateString, data);
-    var template = document.createElement('div');
+  }
+  renderChildren(data) {
+    const html = utils.template(this.templateString, data);
+    const template = document.createElement('div');
     template.innerHTML = html;
-    this.setImagesSrc(template);
+    DropDown.setImagesSrc(template);
     template.firstChild.style.display = data.droplab_hidden ? 'none' : 'block';
     return template.firstChild.outerHTML;
-  },
-
-  setImagesSrc: function(template) {
-    const images = [].slice.call(template.querySelectorAll('img[data-src]'));
-
-    images.forEach((image) => {
-      image.src = image.getAttribute('data-src');
-      image.removeAttribute('data-src');
-    });
-  },
-  show: function() {
+  }
+  show() {
     if (!this.hidden) return;
     this.list.style.display = 'block';
     this.currentIndex = 0;
     this.hidden = false;
-  },
-  hide: function() {
+  }
+  hide() {
     if (this.hidden) return;
     this.list.style.display = 'none';
     this.currentIndex = 0;
     this.hidden = true;
-  },
-  toggle: function () {
-    this.hidden ? this.show() : this.hide();
-  },
-  destroy: function() {
+  }
+  toggle() {
+    if (this.hidden) return this.show();
+    return this.hide();
+  }
+
+  destroy() {
     this.hide();
     this.list.removeEventListener('click', this.eventWrapper.clickEvent);
   }
-});
+
+  static setImagesSrc(template) {
+    const images = [...template.querySelectorAll('img[data-src]')];
+
+    images.forEach((image) => {
+      const img = image;
+
+      img.src = img.getAttribute('data-src');
+      img.removeAttribute('data-src');
+    });
+  }
+}
 export default DropDown;

app/assets/javascripts/droplab/drop_lab.js

-/* eslint-disable */
-
 import HookButton from './hook_button';
 import HookInput from './hook_input';
 import utils from './utils';
 import Keyboard from './keyboard';
 import { DATA_TRIGGER } from './constants';
-var DropLab = function() {
-  this.ready = false;
-  this.hooks = [];
-  this.queuedData = [];
-  this.config = {};
-  this.eventWrapper = {};
-};
-Object.assign(DropLab.prototype, {
-  loadStatic: function(){
-    var dropdownTriggers = [].slice.apply(document.querySelectorAll(`[${DATA_TRIGGER}]`));
+class DropLab {
+  constructor() {
+    this.ready = false;
+    this.hooks = [];
+    this.queuedData = [];
+    this.config = {};
+    this.eventWrapper = {};
+  }
+  loadStatic() {
+    const dropdownTriggers = [].slice.apply(document.querySelectorAll(`[${DATA_TRIGGER}]`));
     this.addHooks(dropdownTriggers);
-  },
-  addData: function () {
-    var args = [].slice.apply(arguments);
-    this.applyArgs(args, '_addData');
-  },
-  setData: function() {
-    var args = [].slice.apply(arguments);
-    this.applyArgs(args, '_setData');
-  },
-  destroy: function() {
+  }
+  addData(...args) {
+    this.applyArgs(args, 'processAddData');
+  }
+  setData(...args) {
+    this.applyArgs(args, 'processSetData');
+  }
+  destroy() {
     this.hooks.forEach(hook => hook.destroy());
     this.hooks = [];
     this.removeEvents();
-  },
-  applyArgs: function(args, methodName) {
-    if (this.ready) return this[methodName].apply(this, args);
+  }
+  applyArgs(args, methodName) {
+    if (this.ready) return this[methodName](...args);
     this.queuedData = this.queuedData || [];
     this.queuedData.push(args);
-  },
-  _addData: function(trigger, data) {
-    this._processData(trigger, data, 'addData');
-  },
-  _setData: function(trigger, data) {
-    this._processData(trigger, data, 'setData');
-  },
-  _processData: function(trigger, data, methodName) {
+    return this.ready;
+  }
+
+  processAddData(trigger, data) {
+    this.processData(trigger, data, 'addData');
+  }
+  processSetData(trigger, data) {
+    this.processData(trigger, data, 'setData');
+  }
+  processData(trigger, data, methodName) {
     this.hooks.forEach((hook) => {
       if (Array.isArray(trigger)) hook.list[methodName](trigger);
       if (hook.trigger.id === trigger) hook.list[methodName](data);
     });
-  },
-  addEvents: function() {
-    this.eventWrapper.documentClicked = this.documentClicked.bind(this)
+  }
+  addEvents() {
+    this.eventWrapper.documentClicked = this.documentClicked.bind(this);
     document.addEventListener('click', this.eventWrapper.documentClicked);
-  },
-  documentClicked: function(e) {
+  }
+  documentClicked(e) {
     let thisTag = e.target;
     if (thisTag.tagName !== 'UL') thisTag = utils.closest(thisTag, 'UL');
-    if (utils.isDropDownParts(thisTag, this.hooks) || utils.isDropDownParts(e.target, this.hooks)) return;
+    if (utils.isDropDownParts(thisTag, this.hooks)) return;
+    if (utils.isDropDownParts(e.target, this.hooks)) return;
     this.hooks.forEach(hook => hook.list.hide());
-  },
-  removeEvents: function(){
+  }
+  removeEvents() {
     document.removeEventListener('click', this.eventWrapper.documentClicked);
-  },
-
-  changeHookList: function(trigger, list, plugins, config) {
-    const availableTrigger =  typeof trigger === 'string' ? document.getElementById(trigger) : trigger;
+  }
+  changeHookList(trigger, list, plugins, config) {
+    const availableTrigger = typeof trigger === 'string' ? document.getElementById(trigger) : trigger;
     this.hooks.forEach((hook, i) => {
-      hook.list.list.dataset.dropdownActive = false;
-      if (hook.trigger !== availableTrigger) return;
-      hook.destroy();
+      const aHook = hook;
+
+      aHook.list.list.dataset.dropdownActive = false;
+      if (aHook.trigger !== availableTrigger) return;
+      aHook.destroy();
       this.hooks.splice(i, 1);
       this.addHook(availableTrigger, list, plugins, config);
     });
-  },
-  addHook: function(hook, list, plugins, config) {
+  }
+  addHook(hook, list, plugins, config) {
     const availableHook = typeof hook === 'string' ? document.querySelector(hook) : hook;
     let availableList;
@@ -111,18 +111,18 @@ Object.assign(DropLab.prototype, {
     this.hooks.push(new HookObject(availableHook, availableList, plugins, config));
     return this;
-  },
-  addHooks: function(hooks, plugins, config) {
+  }
+  addHooks(hooks, plugins, config) {
     hooks.forEach(hook => this.addHook(hook, null, plugins, config));
     return this;
-  },
-  setConfig: function(obj){
+  }
+  setConfig(obj) {
     this.config = obj;
-  },
-  fireReady: function() {
+  }
+  fireReady() {
     const readyEvent = new CustomEvent('ready.dl', {
       detail: {
         dropdown: this,
@@ -131,10 +131,14 @@ Object.assign(DropLab.prototype, {
     document.dispatchEvent(readyEvent);
     this.ready = true;
-  },
-  init: function (hook, list, plugins, config) {
-    hook ? this.addHook(hook, list, plugins, config) : this.loadStatic();
+  }
+  init(hook, list, plugins, config) {
+    if (hook) {
+      this.addHook(hook, list, plugins, config);
+    } else {
+      this.loadStatic();
+    }
     this.addEvents();
@@ -146,7 +150,7 @@ Object.assign(DropLab.prototype, {
     this.queuedData = [];
     return this;
-  },
-});
+  }
+}
 export default DropLab;

app/assets/javascripts/droplab/hook.js

-/* eslint-disable */
-
 import DropDown from './drop_down';
-var Hook = function(trigger, list, plugins, config){
-  this.trigger = trigger;
-  this.list = new DropDown(list);
-  this.type = 'Hook';
-  this.event = 'click';
-  this.plugins = plugins || [];
-  this.config = config || {};
-  this.id = trigger.id;
-};
-
-Object.assign(Hook.prototype, {
-
-  addEvents: function(){},
-
-  constructor: Hook,
-});
+class Hook {
+  constructor(trigger, list, plugins, config) {
+    this.trigger = trigger;
+    this.list = new DropDown(list);
+    this.type = 'Hook';
+    this.event = 'click';
+    this.plugins = plugins || [];
+    this.config = config || {};
+    this.id = trigger.id;
+  }
+}
 export default Hook;

app/assets/javascripts/droplab/hook_button.js

-/* eslint-disable */
-
 import Hook from './hook';
-var HookButton = function(trigger, list, plugins, config) {
-  Hook.call(this, trigger, list, plugins, config);
-
-  this.type = 'button';
-  this.event = 'click';
-  this.eventWrapper = {};
-  this.addEvents();
-  this.addPlugins();
-};
-HookButton.prototype = Object.create(Hook.prototype);
-Object.assign(HookButton.prototype, {
-  addPlugins: function() {
+class HookButton extends Hook {
+  constructor(trigger, list, plugins, config) {
+    super(trigger, list, plugins, config);
+    this.type = 'button';
+    this.event = 'click';
+    this.eventWrapper = {};
+    this.addEvents();
+    this.addPlugins();
+  }
+  addPlugins() {
     this.plugins.forEach(plugin => plugin.init(this));
-  },
-  clicked: function(e){
-    var buttonEvent = new CustomEvent('click.dl', {
+  }
+  clicked(e) {
+    const buttonEvent = new CustomEvent('click.dl', {
       detail: {
         hook: this,
       },
       bubbles: true,
-      cancelable: true
+      cancelable: true,
     });
     e.target.dispatchEvent(buttonEvent);
     this.list.toggle();
-  },
-  addEvents: function(){
+  }
+  addEvents() {
     this.eventWrapper.clicked = this.clicked.bind(this);
     this.trigger.addEventListener('click', this.eventWrapper.clicked);
-  },
-  removeEvents: function(){
+  }
+  removeEvents() {
     this.trigger.removeEventListener('click', this.eventWrapper.clicked);
-  },
-  restoreInitialState: function() {
+  }
+  restoreInitialState() {
     this.list.list.innerHTML = this.list.initialState;
-  },
-  removePlugins: function() {
+  }
+  removePlugins() {
     this.plugins.forEach(plugin => plugin.destroy());
-  },
-  destroy: function() {
+  }
+  destroy() {
     this.restoreInitialState();
     this.removeEvents();
     this.removePlugins();
-  },
-
-  constructor: HookButton,
-});
-
+  }
+}
 export default HookButton;

app/assets/javascripts/droplab/hook_input.js

-/* eslint-disable */
-
 import Hook from './hook';
-var HookInput = function(trigger, list, plugins, config) {
-  Hook.call(this, trigger, list, plugins, config);
-  this.type = 'input';
-  this.event = 'input';
-  this.eventWrapper = {};
-  this.addEvents();
-  this.addPlugins();
-};
-Object.assign(HookInput.prototype, {
-  addPlugins: function() {
+class HookInput extends Hook {
+  constructor(trigger, list, plugins, config) {
+    super(trigger, list, plugins, config);
+    this.type = 'input';
+    this.event = 'input';
+    this.eventWrapper = {};
+    this.addEvents();
+    this.addPlugins();
+  }
+  addPlugins() {
     this.plugins.forEach(plugin => plugin.init(this));
-  },
-  addEvents: function(){
+  }
+  addEvents() {
     this.eventWrapper.mousedown = this.mousedown.bind(this);
     this.eventWrapper.input = this.input.bind(this);
     this.eventWrapper.keyup = this.keyup.bind(this);
@@ -29,19 +27,19 @@ Object.assign(HookInput.prototype, {
     this.trigger.addEventListener('input', this.eventWrapper.input);
     this.trigger.addEventListener('keyup', this.eventWrapper.keyup);
     this.trigger.addEventListener('keydown', this.eventWrapper.keydown);
-  },
-  removeEvents: function() {
+  }
+  removeEvents() {
     this.hasRemovedEvents = true;
     this.trigger.removeEventListener('mousedown', this.eventWrapper.mousedown);
     this.trigger.removeEventListener('input', this.eventWrapper.input);
     this.trigger.removeEventListener('keyup', this.eventWrapper.keyup);
     this.trigger.removeEventListener('keydown', this.eventWrapper.keydown);
-  },
-  input: function(e) {
-    if(this.hasRemovedEvents) return;
+  }
+  input(e) {
+    if (this.hasRemovedEvents) return;
     this.list.show();
@@ -51,12 +49,12 @@ Object.assign(HookInput.prototype, {
         text: e.target.value,
       },
       bubbles: true,
-      cancelable: true
+      cancelable: true,
     });
     e.target.dispatchEvent(inputEvent);
-  },
-  mousedown: function(e) {
+  }
+  mousedown(e) {
     if (this.hasRemovedEvents) return;
     const mouseEvent = new CustomEvent('mousedown.dl', {
@@ -68,21 +66,21 @@ Object.assign(HookInput.prototype, {
       cancelable: true,
     });
     e.target.dispatchEvent(mouseEvent);
-  },
-  keyup: function(e) {
+  }
+  keyup(e) {
     if (this.hasRemovedEvents) return;
     this.keyEvent(e, 'keyup.dl');
-  },
-  keydown: function(e) {
+  }
+  keydown(e) {
     if (this.hasRemovedEvents) return;
     this.keyEvent(e, 'keydown.dl');
-  },
-  keyEvent: function(e, eventName) {
+  }
+  keyEvent(e, eventName) {
     this.list.show();
     const keyEvent = new CustomEvent(eventName, {
@@ -96,17 +94,17 @@ Object.assign(HookInput.prototype, {
       cancelable: true,
     });
     e.target.dispatchEvent(keyEvent);
-  },
-  restoreInitialState: function() {
+  }
+  restoreInitialState() {
     this.list.list.innerHTML = this.list.initialState;
-  },
-  removePlugins: function() {
+  }
+  removePlugins() {
     this.plugins.forEach(plugin => plugin.destroy());
-  },
-  destroy: function() {
+  }
+  destroy() {
     this.restoreInitialState();
     this.removeEvents();
@@ -114,6 +112,6 @@ Object.assign(HookInput.prototype, {
     this.list.destroy();
   }
-});
+}
 export default HookInput;

app/assets/javascripts/dropzone_input.js

@@ -5,104 +5,154 @@ require('./preview_markdown');
 window.DropzoneInput = (function() {
   function DropzoneInput(form) {
-    var $mdArea, alertAttr, alertClass, appendToTextArea, btnAlert, child, closeAlertMessage, closeSpinner, divAlert, divHover, divSpinner, dropzone, form_dropzone, form_textarea, getFilename, handlePaste, iconPaperclip, iconSpinner, insertToTextArea, isImage, max_file_size, pasteText, uploads_path, showError, showSpinner, uploadFile, uploadProgress;
+    var updateAttachingMessage, $attachingFileMessage, $mdArea, $attachButton, $cancelButton, $retryLink, $uploadingErrorContainer, $uploadingErrorMessage, $uploadProgress, $uploadingProgressContainer, appendToTextArea, btnAlert, child, closeAlertMessage, closeSpinner, divHover, divSpinner, dropzone, $formDropzone, formTextarea, getFilename, handlePaste, iconPaperclip, iconSpinner, insertToTextArea, isImage, maxFileSize, pasteText, uploadsPath, showError, showSpinner, uploadFile;
     Dropzone.autoDiscover = false;
-    alertClass = "alert alert-danger alert-dismissable div-dropzone-alert";
-    alertAttr = "class=\"close\" data-dismiss=\"alert\"" + "aria-hidden=\"true\"";
-    divHover = "<div class=\"div-dropzone-hover\"></div>";
-    divSpinner = "<div class=\"div-dropzone-spinner\"></div>";
-    divAlert = "<div class=\"" + alertClass + "\"></div>";
-    iconPaperclip = "<i class=\"fa fa-paperclip div-dropzone-icon\"></i>";
-    iconSpinner = "<i class=\"fa fa-spinner fa-spin div-dropzone-icon\"></i>";
-    uploadProgress = $("<div class=\"div-dropzone-progress\"></div>");
-    btnAlert = "<button type=\"button\"" + alertAttr + ">&times;</button>";
-    uploads_path = window.uploads_path || null;
-    max_file_size = gon.max_file_size || 10;
-    form_textarea = $(form).find(".js-gfm-input");
-    form_textarea.wrap("<div class=\"div-dropzone\"></div>");
-    form_textarea.on('paste', (function(_this) {
+    divHover = '<div class="div-dropzone-hover"></div>';
+    iconPaperclip = '<i class="fa fa-paperclip div-dropzone-icon"></i>';
+    $attachButton = form.find('.button-attach-file');
+    $attachingFileMessage = form.find('.attaching-file-message');
+    $cancelButton = form.find('.button-cancel-uploading-files');
+    $retryLink = form.find('.retry-uploading-link');
+    $uploadProgress = form.find('.uploading-progress');
+    $uploadingErrorContainer = form.find('.uploading-error-container');
+    $uploadingErrorMessage = form.find('.uploading-error-message');
+    $uploadingProgressContainer = form.find('.uploading-progress-container');
+    uploadsPath = window.uploads_path || null;
+    maxFileSize = gon.max_file_size || 10;
+    formTextarea = form.find('.js-gfm-input');
+    formTextarea.wrap('<div class="div-dropzone"></div>');
+    formTextarea.on('paste', (function(_this) {
       return function(event) {
         return handlePaste(event);
       };
     })(this));
-    $mdArea = $(form_textarea).closest('.md-area');
-    $(form).setupMarkdownPreview();
-    form_dropzone = $(form).find('.div-dropzone');
-    form_dropzone.parent().addClass("div-dropzone-wrapper");
-    form_dropzone.append(divHover);
-    form_dropzone.find(".div-dropzone-hover").append(iconPaperclip);
-    form_dropzone.append(divSpinner);
-    form_dropzone.find(".div-dropzone-spinner").append(iconSpinner);
-    form_dropzone.find(".div-dropzone-spinner").append(uploadProgress);
-    form_dropzone.find(".div-dropzone-spinner").css({
-      "opacity": 0,
-      "display": "none"
-    });
-    if (!uploads_path) return;
-    dropzone = form_dropzone.dropzone({
-      url: uploads_path,
-      dictDefaultMessage: "",
+    // Add dropzone area to the form.
+    $mdArea = formTextarea.closest('.md-area');
+    form.setupMarkdownPreview();
+    $formDropzone = form.find('.div-dropzone');
+    $formDropzone.parent().addClass('div-dropzone-wrapper');
+    $formDropzone.append(divHover);
+    $formDropzone.find('.div-dropzone-hover').append(iconPaperclip);
+
+    if (!uploadsPath) return;
+    dropzone = $formDropzone.dropzone({
+      url: uploadsPath,
+      dictDefaultMessage: '',
       clickable: true,
-      paramName: "file",
-      maxFilesize: max_file_size,
+      paramName: 'file',
+      maxFilesize: maxFileSize,
       uploadMultiple: false,
       headers: {
-        "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
+        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
       },
       previewContainer: false,
       processing: function() {
-        return $(".div-dropzone-alert").alert("close");
+        return $('.div-dropzone-alert').alert('close');
       },
       dragover: function() {
         $mdArea.addClass('is-dropzone-hover');
-        form.find(".div-dropzone-hover").css("opacity", 0.7);
+        form.find('.div-dropzone-hover').css('opacity', 0.7);
       },
       dragleave: function() {
         $mdArea.removeClass('is-dropzone-hover');
-        form.find(".div-dropzone-hover").css("opacity", 0);
+        form.find('.div-dropzone-hover').css('opacity', 0);
       },
       drop: function() {
         $mdArea.removeClass('is-dropzone-hover');
-        form.find(".div-dropzone-hover").css("opacity", 0);
-        form_textarea.focus();
+        form.find('.div-dropzone-hover').css('opacity', 0);
+        formTextarea.focus();
       },
       success: function(header, response) {
         const processingFileCount = this.getQueuedFiles().length + this.getUploadingFiles().length;
         const shouldPad = processingFileCount >= 1;
         pasteText(response.link.markdown, shouldPad);
+        // Show 'Attach a file' link only when all files have been uploaded.
+        if (!processingFileCount) $attachButton.removeClass('hide');
       },
-      error: function(temp) {
-        var checkIfMsgExists, errorAlert;
-        errorAlert = $(form).find('.error-alert');
-        checkIfMsgExists = errorAlert.children().length;
-        if (checkIfMsgExists === 0) {
-          errorAlert.append(divAlert);
-          $(".div-dropzone-alert").append(btnAlert + "Attaching the file failed.");
-        }
+      error: function(file, errorMessage = 'Attaching the file failed.', xhr) {
+        // If 'error' event is fired by dropzone, the second parameter is error message.
+        // If the 'errorMessage' parameter is empty, the default error message is set.
+        // If the 'error' event is fired by backend (xhr) error response, the third parameter is
+        // xhr object (xhr.responseText is error message).
+        // On error we hide the 'Attach' and 'Cancel' buttons
+        // and show an error.
+
+        // If there's xhr error message, let's show it instead of dropzone's one.
+        const message = xhr ? xhr.responseText : errorMessage;
+
+        $uploadingErrorContainer.removeClass('hide');
+        $uploadingErrorMessage.html(message);
+        $attachButton.addClass('hide');
+        $cancelButton.addClass('hide');
       },
       totaluploadprogress: function(totalUploadProgress) {
-        uploadProgress.text(Math.round(totalUploadProgress) + "%");
+        updateAttachingMessage(this.files, $attachingFileMessage);
+        $uploadProgress.text(Math.round(totalUploadProgress) + '%');
+      },
+      sending: function(file) {
+        // DOM elements already exist.
+        // Instead of dynamically generating them,
+        // we just either hide or show them.
+        $attachButton.addClass('hide');
+        $uploadingErrorContainer.addClass('hide');
+        $uploadingProgressContainer.removeClass('hide');
+        $cancelButton.removeClass('hide');
       },
-      sending: function() {
-        form_dropzone.find(".div-dropzone-spinner").css({
-          "opacity": 0.7,
-          "display": "inherit"
-        });
+      removedfile: function() {
+        $attachButton.removeClass('hide');
+        $cancelButton.addClass('hide');
+        $uploadingProgressContainer.addClass('hide');
+        $uploadingErrorContainer.addClass('hide');
       },
       queuecomplete: function() {
-        uploadProgress.text("");
-        $(".dz-preview").remove();
-        $(".markdown-area").trigger("input");
-        $(".div-dropzone-spinner").css({
-          "opacity": 0,
-          "display": "none"
-        });
+        $('.dz-preview').remove();
+        $('.markdown-area').trigger('input');
+
+        $uploadingProgressContainer.addClass('hide');
+        $cancelButton.addClass('hide');
       }
     });
-    child = $(dropzone[0]).children("textarea");
+
+    child = $(dropzone[0]).children('textarea');
+
+    // removeAllFiles(true) stops uploading files (if any)
+    // and remove them from dropzone files queue.
+    $cancelButton.on('click', (e) => {
+      const target = e.target.closest('form').querySelector('.div-dropzone');
+
+      e.preventDefault();
+      e.stopPropagation();
+      Dropzone.forElement(target).removeAllFiles(true);
+    });
+
+    // If 'error' event is fired, we store a failed files,
+    // clear dropzone files queue, change status of failed files to undefined,
+    // and add that files to the dropzone files queue again.
+    // addFile() adds file to dropzone files queue and upload it.
+    $retryLink.on('click', (e) => {
+      const dropzoneInstance = Dropzone.forElement(e.target.closest('form').querySelector('.div-dropzone'));
+      const failedFiles = dropzoneInstance.files;
+
+      e.preventDefault();
+
+      // 'true' parameter of removeAllFiles() cancels uploading of files that are being uploaded at the moment.
+      dropzoneInstance.removeAllFiles(true);
+
+      failedFiles.map((failedFile, i) => {
+        const file = failedFile;
+
+        if (file.status === Dropzone.ERROR) {
+          file.status = undefined;
+          file.accepted = undefined;
+        }
+
+        return dropzoneInstance.addFile(file);
+      });
+    });
+
     handlePaste = function(event) {
       var filename, image, pasteEvent, text;
       pasteEvent = event.originalEvent;
@@ -110,25 +160,27 @@ window.DropzoneInput = (function() {
         image = isImage(pasteEvent);
         if (image) {
           event.preventDefault();
-          filename = getFilename(pasteEvent) || "image.png";
-          text = "{{" + filename + "}}";
+          filename = getFilename(pasteEvent) || 'image.png';
+          text = `{{${filename}}}`;
           pasteText(text);
           return uploadFile(image.getAsFile(), filename);
         }
       }
     };
+
     isImage = function(data) {
       var i, item;
       i = 0;
       while (i < data.clipboardData.items.length) {
         item = data.clipboardData.items[i];
-        if (item.type.indexOf("image") !== -1) {
+        if (item.type.indexOf('image') !== -1) {
           return item;
         }
         i += 1;
       }
       return false;
     };
+
     pasteText = function(text, shouldPad) {
       var afterSelection, beforeSelection, caretEnd, caretStart, textEnd;
       var formattedText = text;
@@ -142,31 +194,33 @@ window.DropzoneInput = (function() {
       $(child).val(beforeSelection + formattedText + afterSelection);
       textarea.setSelectionRange(caretStart + formattedText.length, caretEnd + formattedText.length);
       textarea.style.height = `${textarea.scrollHeight}px`;
-      return form_textarea.trigger("input");
+      return formTextarea.trigger('input');
     };
+
     getFilename = function(e) {
       var value;
       if (window.clipboardData && window.clipboardData.getData) {
-        value = window.clipboardData.getData("Text");
+        value = window.clipboardData.getData('Text');
       } else if (e.clipboardData && e.clipboardData.getData) {
-        value = e.clipboardData.getData("text/plain");
+        value = e.clipboardData.getData('text/plain');
       }
       value = value.split("\r");
       return value.first();
     };
+
     uploadFile = function(item, filename) {
       var formData;
       formData = new FormData();
-      formData.append("file", item, filename);
+      formData.append('file', item, filename);
       return $.ajax({
-        url: uploads_path,
-        type: "POST",
+        url: uploadsPath,
+        type: 'POST',
         data: formData,
-        dataType: "json",
+        dataType: 'json',
         processData: false,
         contentType: false,
         headers: {
-          "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
+          'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
         },
         beforeSend: function() {
           showSpinner();
@@ -183,44 +237,54 @@ window.DropzoneInput = (function() {
         }
       });
     };
+
+    updateAttachingMessage = (files, messageContainer) => {
+      let attachingMessage;
+      const filesCount = files.filter(function(file) {
+        return file.status === 'uploading' ||
+               file.status === 'queued';
+      }).length;
+
+      // Dinamycally change uploading files text depending on files number in
+      // dropzone files queue.
+      if (filesCount > 1) {
+        attachingMessage = 'Attaching ' + filesCount + ' files -';
+      } else {
+        attachingMessage = 'Attaching a file -';
+      }
+
+      messageContainer.text(attachingMessage);
+    };
+
     insertToTextArea = function(filename, url) {
       return $(child).val(function(index, val) {
-        return val.replace("{{" + filename + "}}", url);
+        return val.replace(`{{${filename}}}`, url);
       });
     };
+
     appendToTextArea = function(url) {
       return $(child).val(function(index, val) {
         return val + url + "\n";
       });
     };
+
     showSpinner = function(e) {
-      return form.find(".div-dropzone-spinner").css({
-        "opacity": 0.7,
-        "display": "inherit"
-      });
+      return $uploadingProgressContainer.removeClass('hide');
     };
+
     closeSpinner = function() {
-      return form.find(".div-dropzone-spinner").css({
-        "opacity": 0,
-        "display": "none"
-      });
+      return $uploadingProgressContainer.addClass('hide');
     };
+
     showError = function(message) {
-      var checkIfMsgExists, errorAlert;
-      errorAlert = $(form).find('.error-alert');
-      checkIfMsgExists = errorAlert.children().length;
-      if (checkIfMsgExists === 0) {
-        errorAlert.append(divAlert);
-        return $(".div-dropzone-alert").append(btnAlert + message);
-      }
+      $uploadingErrorContainer.removeClass('hide');
+      $uploadingErrorMessage.html(message);
     };
-    closeAlertMessage = function() {
-      return form.find(".div-dropzone-alert").alert("close");
-    };
-    form.find(".markdown-selector").click(function(e) {
+
+    form.find('.markdown-selector').click(function(e) {
       e.preventDefault();
       $(this).closest('.gfm-form').find('.div-dropzone').click();
-      form_textarea.focus();
+      formTextarea.focus();
     });
   }

app/assets/javascripts/environments/components/environment_item.vue

 <script>
 import Timeago from 'timeago.js';
 import _ from 'underscore';
+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import '../../lib/utils/text_utility';
 import ActionsComponent from './environment_actions.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
@@ -20,6 +21,7 @@ const timeagoInstance = new Timeago();
 export default {
   components: {
+    userAvatarLink,
     'commit-component': CommitComponent,
     'actions-component': ActionsComponent,
     'external-url-component': ExternalUrlComponent,
@@ -468,15 +470,13 @@ export default {
       <span v-if="!model.isFolder && deploymentHasUser">
         by
-        <a
-          :href="deploymentUser.web_url"
-          class="js-deploy-user-container">
-          <img
-            class="avatar has-tooltip s20"
-            :src="deploymentUser.avatar_url"
-            :alt="userImageAltDescription"
-            :title="deploymentUser.username" />
-        </a>
+        <user-avatar-link
+          class="js-deploy-user-container"
+          :link-href="deploymentUser.web_url"
+          :img-src="deploymentUser.avatar_url"
+          :img-alt="userImageAltDescription"
+          :tooltip-text="deploymentUser.username"
+        />
       </span>
     </td>

app/assets/javascripts/environments/components/environment_monitoring.vue

@@ -21,7 +21,6 @@ export default {
   <a
     class="btn monitoring-url has-tooltip"
     data-container="body"
-    target="_blank"
     rel="noopener noreferrer nofollow"
     :href="monitoringUrl"
     :title="title"

app/assets/javascripts/filtered_search/filtered_search_manager.js

@@ -16,10 +16,14 @@ class FilteredSearchManager {
     this.recentSearchesStore = new RecentSearchesStore({
       isLocalStorageAvailable: RecentSearchesService.isAvailable(),
     });
-    let recentSearchesKey = 'issue-recent-searches';
+    const searchHistoryDropdownElement = document.querySelector('.js-filtered-search-history-dropdown');
+    const projectPath = searchHistoryDropdownElement ?
+      searchHistoryDropdownElement.dataset.projectFullPath : 'project';
+    let recentSearchesPagePrefix = 'issue-recent-searches';
     if (page === 'merge_requests') {
-      recentSearchesKey = 'merge-request-recent-searches';
+      recentSearchesPagePrefix = 'merge-request-recent-searches';
     }
+    const recentSearchesKey = `${projectPath}-${recentSearchesPagePrefix}`;
     this.recentSearchesService = new RecentSearchesService(recentSearchesKey);
     // Fetch recent searches from localStorage
@@ -47,7 +51,7 @@ class FilteredSearchManager {
       this.recentSearchesRoot = new RecentSearchesRoot(
         this.recentSearchesStore,
         this.recentSearchesService,
-        document.querySelector('.js-filtered-search-history-dropdown'),
+        searchHistoryDropdownElement,
       );
       this.recentSearchesRoot.init();

app/assets/javascripts/filtered_search/stores/recent_searches_store.js

@@ -3,6 +3,7 @@ import _ from 'underscore';
 class RecentSearchesStore {
   constructor(initialState = {}) {
     this.state = Object.assign({
+      isLocalStorageAvailable: true,
       recentSearches: [],
     }, initialState);
   }

app/assets/javascripts/gl_form.js

@@ -3,11 +3,14 @@
 /* global DropzoneInput */
 /* global autosize */
+import GfmAutoComplete from './gfm_auto_complete';
+
 window.gl = window.gl || {};
-function GLForm(form) {
+function GLForm(form, enableGFM = false) {
   this.form = form;
   this.textarea = this.form.find('textarea.js-gfm-input');
+  this.enableGFM = enableGFM;
   // Before we start, we should clean up any previous data for this form
   this.destroy();
   // Setup the form
@@ -30,8 +33,14 @@ GLForm.prototype.setupForm = function() {
     this.form.addClass('gfm-form');
     // remove notify commit author checkbox for non-commit notes
     gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button, .js-note-new-discussion'));
-
-    gl.GfmAutoComplete.setup(this.form.find('.js-gfm-input'));
+    new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).setup(this.form.find('.js-gfm-input'), {
+      emojis: true,
+      members: this.enableGFM,
+      issues: this.enableGFM,
+      milestones: this.enableGFM,
+      mergeRequests: this.enableGFM,
+      labels: this.enableGFM,
+    });
     new DropzoneInput(this.form);
     autosize(this.textarea);
   }

app/assets/javascripts/issuable_context.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-new, comma-dangle, quotes, prefer-arrow-callback, consistent-return, one-var, no-var, one-var-declaration-per-line, no-underscore-dangle, max-len */
-/* global UsersSelect */
 /* global bp */
 import Cookies from 'js-cookie';
+import UsersSelect from './users_select';
 (function() {
   this.IssuableContext = (function() {
@@ -47,7 +47,6 @@ import Cookies from 'js-cookie';
           Cookies.set('collapsed_gutter', true);
         }
       });
-      $(".right-sidebar").niceScroll();
     }
     IssuableContext.prototype.initParticipants = function() {

app/assets/javascripts/issuable_form.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-use-before-define, no-useless-escape, no-new, quotes, object-shorthand, no-unused-vars, comma-dangle, no-alert, consistent-return, no-else-return, prefer-template, one-var, one-var-declaration-per-line, curly, max-len */
 /* global GitLab */
-/* global UsersSelect */
 /* global ZenMode */
 /* global Autosave */
 /* global dateFormat */
 /* global Pikaday */
+import UsersSelect from './users_select';
+import GfmAutoComplete from './gfm_auto_complete';
+
 (function() {
   this.IssuableForm = (function() {
     IssuableForm.prototype.issueMoveConfirmMsg = 'Are you sure you want to move this issue to another project?';
@@ -19,7 +21,7 @@
       this.renderWipExplanation = this.renderWipExplanation.bind(this);
       this.resetAutosave = this.resetAutosave.bind(this);
       this.handleSubmit = this.handleSubmit.bind(this);
-      gl.GfmAutoComplete.setup();
+      new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).setup();
       new UsersSelect();
       new ZenMode();
       this.titleField = this.form.find("input[name*='[title]']");

app/assets/javascripts/issue_show/actions/tasks.js

-export default (newStateData, tasks) => {
-  const $tasks = $('#task_status');
-  const $tasksShort = $('#task_status_short');
-  const $issueableHeader = $('.issuable-header');
-  const tasksStates = { newState: null, currentState: null };
-
-  if ($tasks.length === 0) {
-    if (!(newStateData.task_status.indexOf('0 of 0') === 0)) {
-      $issueableHeader.append(`<span id="task_status">${newStateData.task_status}</span>`);
-    } else {
-      $issueableHeader.append('<span id="task_status"></span>');
-    }
-  } else {
-    tasksStates.newState = newStateData.task_status.indexOf('0 of 0') === 0;
-    tasksStates.currentState = tasks.indexOf('0 of 0') === 0;
-  }
-
-  if ($tasks.length !== 0 && !tasksStates.newState) {
-    $tasks.text(newStateData.task_status);
-    $tasksShort.text(newStateData.task_status);
-  } else if (tasksStates.currentState) {
-    $issueableHeader.append(`<span id="task_status">${newStateData.task_status}</span>`);
-  } else if (tasksStates.newState) {
-    $tasks.remove();
-    $tasksShort.remove();
-  }
-};

app/assets/javascripts/issue_show/components/app.vue

+<script>
+import Visibility from 'visibilityjs';
+import Poll from '../../lib/utils/poll';
+import Service from '../services/index';
+import Store from '../stores';
+import titleComponent from './title.vue';
+import descriptionComponent from './description.vue';
+
+export default {
+  props: {
+    endpoint: {
+      required: true,
+      type: String,
+    },
+    canUpdate: {
+      required: true,
+      type: Boolean,
+    },
+    issuableRef: {
+      type: String,
+      required: true,
+    },
+    initialTitle: {
+      type: String,
+      required: true,
+    },
+    initialDescriptionHtml: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    initialDescriptionText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    const store = new Store({
+      titleHtml: this.initialTitle,
+      descriptionHtml: this.initialDescriptionHtml,
+      descriptionText: this.initialDescriptionText,
+    });
+
+    return {
+      store,
+      state: store.state,
+    };
+  },
+  components: {
+    descriptionComponent,
+    titleComponent,
+  },
+  created() {
+    const resource = new Service(this.endpoint);
+    const poll = new Poll({
+      resource,
+      method: 'getData',
+      successCallback: (res) => {
+        this.store.updateState(res.json());
+      },
+      errorCallback(err) {
+        throw new Error(err);
+      },
+    });
+
+    if (!Visibility.hidden()) {
+      poll.makeRequest();
+    }
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        poll.restart();
+      } else {
+        poll.stop();
+      }
+    });
+  },
+};
+</script>
+
+<template>
+  <div>
+    <title-component
+      :issuable-ref="issuableRef"
+      :title-html="state.titleHtml"
+      :title-text="state.titleText" />
+    <description-component
+      v-if="state.descriptionHtml"
+      :can-update="canUpdate"
+      :description-html="state.descriptionHtml"
+      :description-text="state.descriptionText"
+      :updated-at="state.updatedAt"
+      :task-status="state.taskStatus" />
+  </div>
+</template>