merge master

.gitlab-ci.yml

@@ -55,7 +55,7 @@ stages:
 
 .use-pg: &use-pg
   services:
-    - postgres:latest
+    - postgres:9.2
     - redis:alpine
     - elasticsearch:5.3
 
@@ -68,6 +68,7 @@ stages:
 .only-master-and-ee-or-mysql: &only-master-and-ee-or-mysql
   only:
     - /mysql/
+    - /-stable$/
     - master@gitlab-org/gitlab-ce
     - master@gitlab/gitlabhq
     - tags@gitlab-org/gitlab-ce
@@ -89,7 +90,7 @@ stages:
     - JOB_NAME=( $CI_JOB_NAME )
     - export CI_NODE_INDEX=${JOB_NAME[-2]}
     - export CI_NODE_TOTAL=${JOB_NAME[-1]}
-    - export KNAPSACK_REPORT_PATH=knapsack/${CI_PROJECT_NAME}/${JOB_NAME[0]}_${JOB_NAME[1]}_node_${CI_NODE_INDEX}_${CI_NODE_TOTAL}_report.json
+    - export KNAPSACK_REPORT_PATH=knapsack/${CI_PROJECT_NAME}/${JOB_NAME[0]}_node_${CI_NODE_INDEX}_${CI_NODE_TOTAL}_report.json
     - export KNAPSACK_GENERATE_REPORT=true
     - export CACHE_CLASSES=true
     - cp ${KNAPSACK_RSPEC_SUITE_REPORT_PATH} ${KNAPSACK_REPORT_PATH}
@@ -120,7 +121,7 @@ stages:
     - JOB_NAME=( $CI_JOB_NAME )
     - export CI_NODE_INDEX=${JOB_NAME[-2]}
     - export CI_NODE_TOTAL=${JOB_NAME[-1]}
-    - export KNAPSACK_REPORT_PATH=knapsack/${CI_PROJECT_NAME}/${JOB_NAME[0]}_${JOB_NAME[1]}_node_${CI_NODE_INDEX}_${CI_NODE_TOTAL}_report.json
+    - export KNAPSACK_REPORT_PATH=knapsack/${CI_PROJECT_NAME}/${JOB_NAME[0]}_node_${CI_NODE_INDEX}_${CI_NODE_TOTAL}_report.json
     - export KNAPSACK_GENERATE_REPORT=true
     - export CACHE_CLASSES=true
     - cp ${KNAPSACK_SPINACH_SUITE_REPORT_PATH} ${KNAPSACK_REPORT_PATH}
@@ -154,6 +155,7 @@ stages:
 # Trigger a package build on omnibus-gitlab repository
 
 build-package:
+  image: ruby:2.3-alpine
   before_script: []
   services: []
   variables:
@@ -183,8 +185,8 @@ update-knapsack:
   <<: *only-canonical-masters
   stage: post-test
   script:
-    - scripts/merge-reports ${KNAPSACK_RSPEC_SUITE_REPORT_PATH} knapsack/${CI_PROJECT_NAME}/rspec_pg_node_*.json
-    - scripts/merge-reports ${KNAPSACK_SPINACH_SUITE_REPORT_PATH} knapsack/${CI_PROJECT_NAME}/spinach_pg_node_*.json
+    - scripts/merge-reports ${KNAPSACK_RSPEC_SUITE_REPORT_PATH} knapsack/${CI_PROJECT_NAME}/rspec-pg_node_*.json
+    - scripts/merge-reports ${KNAPSACK_SPINACH_SUITE_REPORT_PATH} knapsack/${CI_PROJECT_NAME}/spinach-pg_node_*.json
     - '[[ -z ${KNAPSACK_S3_BUCKET} ]] || scripts/sync-reports put $KNAPSACK_S3_BUCKET $KNAPSACK_RSPEC_SUITE_REPORT_PATH $KNAPSACK_SPINACH_SUITE_REPORT_PATH'
     - rm -f knapsack/${CI_PROJECT_NAME}/*_node_*.json
 

.rubocop.yml

@@ -971,7 +971,7 @@ RSpec/DescribeSymbol:
 RSpec/DescribedClass:
   Enabled: true
 
-# Configuration parameters: CustomIncludeMethods.
+# Checks if an example group does not include any tests.
 RSpec/EmptyExampleGroup:
   Enabled: true
   CustomIncludeMethods:
@@ -998,6 +998,10 @@ RSpec/ExampleWording:
 RSpec/ExpectActual:
   Enabled: true
 
+# Checks for opportunities to use `expect { … }.to output`.
+RSpec/ExpectOutput:
+  Enabled: true
+
 # Checks the file and folder naming of the spec file.
 RSpec/FilePath:
   Enabled: true

.rubocop_todo.yml

@@ -18,10 +18,6 @@ RSpec/EmptyLineAfterFinalLet:
 RSpec/EmptyLineAfterSubject:
   Enabled: false
 
-# Offense count: 3
-RSpec/ExpectOutput:
-  Enabled: false
-
 # Offense count: 72
 # Configuration parameters: EnforcedStyle, SupportedStyles.
 # SupportedStyles: implicit, each, example

CHANGELOG-EE.md

 Please view this file on the master branch, on stable branches it's out of date.
 
+## 9.2.2 (2017-05-25)
+
+- No changes.
+
 ## 9.2.1 (2017-05-23)
 
 - No changes.

CHANGELOG.md

@@ -2,6 +2,11 @@
 documentation](doc/development/changelog.md) for instructions on adding your own
 entry.
 
+## 9.2.2 (2017-05-25)
+
+- Fix issue where real time pipelines were not cached. !11615
+- Make all notes use equal padding.
+
 ## 9.2.1 (2017-05-23)
 
 - Fix placement of note emoji on hover.

GITLAB_SHELL_VERSION

-5.0.3
+5.0.4

VERSION

-9.2.0-pre
+9.3.0-pre

app/assets/javascripts/admin_email_select.js

 /* eslint-disable no-var, wrap-iife, func-names, space-before-function-paren, camelcase, no-unused-vars, quotes, object-shorthand, one-var, one-var-declaration-per-line, prefer-arrow-callback, comma-dangle, prefer-template, no-else-return, yoda, prefer-rest-params, prefer-spread, max-len */
-/* global Api */
+import Api from './api';
 
 var slice = [].slice;
 

app/assets/javascripts/api.js

-/* eslint-disable func-names, space-before-function-paren, quotes, object-shorthand, camelcase, no-var, comma-dangle, prefer-arrow-callback, quote-props, no-param-reassign, max-len */
+import $ from 'jquery';
 
-var Api = {
+const Api = {
   groupsPath: '/api/:version/groups.json',
   groupPath: '/api/:version/groups/:id.json',
   namespacesPath: '/api/:version/namespaces.json',
@@ -13,165 +13,190 @@ var Api = {
   ldapGroupsPath: '/api/:version/ldap/:provider/groups.json',
   dockerfilePath: '/api/:version/templates/dockerfiles/:key',
   issuableTemplatePath: '/:namespace_path/:project_path/templates/:type/:key',
-  group: function(group_id, callback) {
-    var url = Api.buildUrl(Api.groupPath)
-      .replace(':id', group_id);
-    return $.ajax({
-      url: url,
-      dataType: 'json'
-    }).done(function(group) {
-      return callback(group);
-    });
-  },
-  users: function(search, options, callback = $.noop) {
-    var url = Api.buildUrl('/autocomplete/users.json');
+  usersPath: '/api/:version/users.json',
+  group(groupId, callback) {
+    const url = Api.buildUrl(Api.groupPath)
+      .replace(':id', groupId);
     return $.ajax({
       url,
-      data: $.extend({
-        search,
-        per_page: 20
-      }, options),
-      dataType: 'json'
-    }).done(callback);
+      dataType: 'json',
+    })
+      .done(group => callback(group));
   },
+
   // Return groups list. Filtered by query
-  groups: function(query, options, callback = $.noop) {
-    var url = Api.buildUrl(Api.groupsPath);
+  groups(query, options, callback = $.noop) {
+    const url = Api.buildUrl(Api.groupsPath);
     return $.ajax({
-      url: url,
-      data: $.extend({
+      url,
+      data: Object.assign({
         search: query,
-        per_page: 20
+        per_page: 20,
       }, options),
-      dataType: 'json'
-    }).done(function(groups) {
-      return callback(groups);
-    });
+      dataType: 'json',
+    })
+      .done(groups => callback(groups));
   },
+
   // Return namespaces list. Filtered by query
-  namespaces: function(query, callback) {
-    var url = Api.buildUrl(Api.namespacesPath);
+  namespaces(query, callback) {
+    const url = Api.buildUrl(Api.namespacesPath);
     return $.ajax({
-      url: url,
+      url,
       data: {
         search: query,
-        per_page: 20
+        per_page: 20,
       },
-      dataType: 'json'
-    }).done(function(namespaces) {
-      return callback(namespaces);
-    });
+      dataType: 'json',
+    }).done(namespaces => callback(namespaces));
   },
+
   // Return projects list. Filtered by query
-  projects: function(query, options, callback) {
-    var url = Api.buildUrl(Api.projectsPath);
+  projects(query, options, callback) {
+    const url = Api.buildUrl(Api.projectsPath);
     return $.ajax({
-      url: url,
-      data: $.extend({
+      url,
+      data: Object.assign({
         search: query,
         per_page: 20,
-        membership: true
+        membership: true,
       }, options),
-      dataType: 'json'
-    }).done(function(projects) {
-      return callback(projects);
-    });
+      dataType: 'json',
+    })
+      .done(projects => callback(projects));
   },
-  newLabel: function(namespace_path, project_path, data, callback) {
-    var url = Api.buildUrl(Api.labelsPath)
-      .replace(':namespace_path', namespace_path)
-      .replace(':project_path', project_path);
+
+  newLabel(namespacePath, projectPath, data, callback) {
+    const url = Api.buildUrl(Api.labelsPath)
+      .replace(':namespace_path', namespacePath)
+      .replace(':project_path', projectPath);
     return $.ajax({
-      url: url,
+      url,
       type: 'POST',
-      data: { 'label': data },
-      dataType: 'json'
-    }).done(function(label) {
-      return callback(label);
-    }).error(function(message) {
-      return callback(message.responseJSON);
-    });
+      data: { label: data },
+      dataType: 'json',
+    })
+      .done(label => callback(label))
+      .error(message => callback(message.responseJSON));
   },
+
   // Return group projects list. Filtered by query
-  groupProjects: function(group_id, query, callback) {
-    var url = Api.buildUrl(Api.groupProjectsPath)
-      .replace(':id', group_id);
+  groupProjects(groupId, query, callback) {
+    const url = Api.buildUrl(Api.groupProjectsPath)
+      .replace(':id', groupId);
     return $.ajax({
-      url: url,
+      url,
       data: {
         search: query,
-        per_page: 20
+        per_page: 20,
       },
-      dataType: 'json'
-    }).done(function(projects) {
-      return callback(projects);
-    });
+      dataType: 'json',
+    })
+      .done(projects => callback(projects));
   },
+
   // Return text for a specific license
-  licenseText: function(key, data, callback) {
-    var url = Api.buildUrl(Api.licensePath)
+  licenseText(key, data, callback) {
+    const url = Api.buildUrl(Api.licensePath)
       .replace(':key', key);
     return $.ajax({
-      url: url,
-      data: data
-    }).done(function(license) {
-      return callback(license);
-    });
+      url,
+      data,
+    })
+      .done(license => callback(license));
   },
-  gitignoreText: function(key, callback) {
-    var url = Api.buildUrl(Api.gitignorePath)
+
+  gitignoreText(key, callback) {
+    const url = Api.buildUrl(Api.gitignorePath)
       .replace(':key', key);
-    return $.get(url, function(gitignore) {
-      return callback(gitignore);
-    });
+    return $.get(url, gitignore => callback(gitignore));
   },
-  gitlabCiYml: function(key, callback) {
-    var url = Api.buildUrl(Api.gitlabCiYmlPath)
+
+  gitlabCiYml(key, callback) {
+    const url = Api.buildUrl(Api.gitlabCiYmlPath)
       .replace(':key', key);
-    return $.get(url, function(file) {
-      return callback(file);
-    });
+    return $.get(url, file => callback(file));
   },
-  dockerfileYml: function(key, callback) {
-    var url = Api.buildUrl(Api.dockerfilePath).replace(':key', key);
+
+  dockerfileYml(key, callback) {
+    const url = Api.buildUrl(Api.dockerfilePath).replace(':key', key);
     $.get(url, callback);
   },
-  issueTemplate: function(namespacePath, projectPath, key, type, callback) {
-    var url = Api.buildUrl(Api.issuableTemplatePath)
+
+  issueTemplate(namespacePath, projectPath, key, type, callback) {
+    const url = Api.buildUrl(Api.issuableTemplatePath)
       .replace(':key', key)
       .replace(':type', type)
       .replace(':project_path', projectPath)
       .replace(':namespace_path', namespacePath);
     $.ajax({
-      url: url,
-      dataType: 'json'
-    }).done(function(file) {
-      callback(null, file);
-    }).error(callback);
+      url,
+      dataType: 'json',
+    })
+      .done(file => callback(null, file))
+      .error(callback);
   },
-  buildUrl: function(url) {
-    if (gon.relative_url_root != null) {
-      url = gon.relative_url_root + url;
-    }
-    return url.replace(':version', gon.api_version);
+
+  users(query, options) {
+    const url = Api.buildUrl(this.usersPath);
+    return Api.wrapAjaxCall({
+      url,
+      data: Object.assign({
+        search: query,
+        per_page: 20,
+      }, options),
+      dataType: 'json',
+    });
   },
-  ldap_groups: function(query, provider, callback) {
-    var url;
-    url = Api.buildUrl(Api.ldapGroupsPath);
-    url = url.replace(':provider', provider);
+
+  approverUsers(search, options, callback = $.noop) {
+    const url = Api.buildUrl('/autocomplete/users.json');
     return $.ajax({
-      url: url,
-      data: {
+      url,
+      data: $.extend({
+        search,
+        per_page: 20,
+      }, options),
+      dataType: 'json',
+    }).done(callback);
+  },
+
+  ldap_groups(query, provider, callback) {
+    const url = Api.buildUrl(this.ldapGroupsPath).replace(':provider', provider);
+    return Api.wrapAjaxCall({
+      url,
+      data: Object.assign({
         private_token: gon.api_token,
         search: query,
         per_page: 20,
-        active: true
-      },
-      dataType: 'json'
-    }).done(function(groups) {
-      return callback(groups);
+        active: true,
+      }),
+      dataType: 'json',
+    })
+      .done(groups => callback(groups));
+  },
+
+  buildUrl(url) {
+    let urlRoot = '';
+    if (gon.relative_url_root != null) {
+      urlRoot = gon.relative_url_root;
+    }
+    return urlRoot + url.replace(':version', gon.api_version);
+  },
+
+  wrapAjaxCall(options) {
+    return new Promise((resolve, reject) => {
+      // jQuery 2 is not Promises/A+ compatible (missing catch)
+      $.ajax(options) // eslint-disable-line promise/catch-or-return
+      .then(data => resolve(data),
+        (jqXHR, textStatus, errorThrown) => {
+          const error = new Error(`${options.url}: ${errorThrown}`);
+          error.textStatus = textStatus;
+          reject(error);
+        },
+      );
     });
-  }
+  },
 };
 
-window.Api = Api;
+export default Api;

app/assets/javascripts/approvers_select.js

-/* global Api */
+import Api from './api';
 
 export default class ApproversSelect {
   constructor() {
@@ -46,7 +46,7 @@ export default class ApproversSelect {
       skip_users: ApproversSelect.getApprovers(this.fieldNames[0], '.js-approver'),
       project_id: $('#project_id').val(),
     };
-    return Api.users(term, options);
+    return Api.approverUsers(term, options);
   }
 
   handleSelectChange(e) {

app/assets/javascripts/blob/file_template_selector.js

-/* global Api */
-
 export default class FileTemplateSelector {
   constructor(mediator) {
     this.mediator = mediator;
@@ -65,4 +63,3 @@ export default class FileTemplateSelector {
     this.reportSelection(opts);
   }
 }
-

app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js

-/* global Api */
+import Api from '../../api';
 
 import FileTemplateSelector from '../file_template_selector';
 

app/assets/javascripts/blob/template_selectors/dockerfile_selector.js

-/* global Api */
+import Api from '../../api';
 
 import FileTemplateSelector from '../file_template_selector';
 

app/assets/javascripts/blob/template_selectors/gitignore_selector.js

-/* global Api */
+import Api from '../../api';
 
 import FileTemplateSelector from '../file_template_selector';
 

app/assets/javascripts/blob/template_selectors/license_selector.js

-/* global Api */
+import Api from '../../api';
 
 import FileTemplateSelector from '../file_template_selector';
 

app/assets/javascripts/blob/viewer/index.js

@@ -50,9 +50,9 @@ export default class BlobViewer {
 
     if (this.copySourceBtn) {
       this.copySourceBtn.addEventListener('click', () => {
-        if (this.copySourceBtn.classList.contains('disabled')) return;
+        if (this.copySourceBtn.classList.contains('disabled')) return this.copySourceBtn.blur();
 
-        this.switchToViewer('simple');
+        return this.switchToViewer('simple');
       });
     }
   }

app/assets/javascripts/boards/components/board_new_form.js

@@ -72,8 +72,6 @@ import extraMilestones from '../mixins/extra_milestones';
             const milestoneDropdown = this.$refs.milestoneDropdown;
             const rect = e.target.getBoundingClientRect();
 
-            milestoneDropdown.style.left = `${rect.left}px`;
-            milestoneDropdown.style.top = `${rect.bottom}px`;
             milestoneDropdown.style.width = `${rect.width}px`;
           });
         }

app/assets/javascripts/boards/components/issue_card_inner.js

 import Vue from 'vue';
+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import eventHub from '../eventhub';
 
 const Store = gl.issueBoards.BoardsStore;
@@ -38,6 +39,9 @@ gl.issueBoards.IssueCardInner = Vue.extend({
       maxCounter: 99,
     };
   },
+  components: {
+    userAvatarLink,
+  },
   computed: {
     numberOverLimit() {
       return this.issue.assignees.length - this.limitBeforeCounter;
@@ -146,23 +150,16 @@ gl.issueBoards.IssueCardInner = Vue.extend({
           </span>
         </h4>
         <div class="card-assignee">
-          <a
-            class="has-tooltip js-no-trigger"
-            :href="assigneeUrl(assignee)"
-            :title="assigneeUrlTitle(assignee)"
+          <user-avatar-link
             v-for="(assignee, index) in issue.assignees"
             v-if="shouldRenderAssignee(index)"
-            data-container="body"
-            data-placement="bottom"
-          >
-            <img
-              class="avatar avatar-inline s20"
-              :src="assignee.avatar"
-              width="20"
-              height="20"
-              :alt="avatarUrlTitle(assignee)"
-            />
-          </a>
+            class="js-no-trigger"
+            :link-href="assigneeUrl(assignee)"
+            :img-alt="avatarUrlTitle(assignee)"
+            :img-src="assignee.avatar"
+            :tooltip-text="assigneeUrlTitle(assignee)"
+            tooltip-placement="bottom"
+          />
           <span
             class="avatar-counter has-tooltip"
             :title="assigneeCounterTooltip"

app/assets/javascripts/boards/components/modal/index.js

@@ -3,7 +3,6 @@
 import Vue from 'vue';
 import queryData from '../../utils/query_data';
 import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
-
 import './header';
 import './list';
 import './footer';

app/assets/javascripts/copy_as_gfm.js

@@ -18,12 +18,12 @@ const gfmRules = {
     },
   },
   TaskListFilter: {
-    'input[type=checkbox].task-list-item-checkbox'(el, text) {
+    'input[type=checkbox].task-list-item-checkbox'(el) {
       return `[${el.checked ? 'x' : ' '}]`;
     },
   },
   ReferenceFilter: {
-    '.tooltip'(el, text) {
+    '.tooltip'(el) {
       return '';
     },
     'a.gfm:not([data-link=true])'(el, text) {
@@ -39,15 +39,15 @@ const gfmRules = {
     },
   },
   TableOfContentsFilter: {
-    'ul.section-nav'(el, text) {
+    'ul.section-nav'(el) {
       return '[[_TOC_]]';
     },
   },
   EmojiFilter: {
-    'img.emoji'(el, text) {
+    'img.emoji'(el) {
       return el.getAttribute('alt');
     },
-    'gl-emoji'(el, text) {
+    'gl-emoji'(el) {
       return `:${el.getAttribute('data-name')}:`;
     },
   },
@@ -57,13 +57,13 @@ const gfmRules = {
     },
   },
   VideoLinkFilter: {
-    '.video-container'(el, text) {
+    '.video-container'(el) {
       const videoEl = el.querySelector('video');
       if (!videoEl) return false;
 
       return CopyAsGFM.nodeToGFM(videoEl);
     },
-    'video'(el, text) {
+    'video'(el) {
       return `![${el.dataset.title}](${el.getAttribute('src')})`;
     },
   },
@@ -74,19 +74,19 @@ const gfmRules = {
     'code.code.math[data-math-style=inline]'(el, text) {
       return `$\`${text}\`$`;
     },
-    'span.katex-display span.katex-mathml'(el, text) {
+    'span.katex-display span.katex-mathml'(el) {
       const mathAnnotation = el.querySelector('annotation[encoding="application/x-tex"]');
       if (!mathAnnotation) return false;
 
       return `\`\`\`math\n${CopyAsGFM.nodeToGFM(mathAnnotation)}\n\`\`\``;
     },
-    'span.katex-mathml'(el, text) {
+    'span.katex-mathml'(el) {
       const mathAnnotation = el.querySelector('annotation[encoding="application/x-tex"]');
       if (!mathAnnotation) return false;
 
       return `$\`${CopyAsGFM.nodeToGFM(mathAnnotation)}\`$`;
     },
-    'span.katex-html'(el, text) {
+    'span.katex-html'(el) {
       // We don't want to include the content of this element in the copied text.
       return '';
     },
@@ -95,7 +95,7 @@ const gfmRules = {
     },
   },
   SanitizationFilter: {
-    'a[name]:not([href]):empty'(el, text) {
+    'a[name]:not([href]):empty'(el) {
       return el.outerHTML;
     },
     'dl'(el, text) {
@@ -143,7 +143,7 @@ const gfmRules = {
     },
   },
   MarkdownFilter: {
-    'br'(el, text) {
+    'br'(el) {
       // Two spaces at the end of a line are turned into a BR
       return '  ';
     },
@@ -162,7 +162,7 @@ const gfmRules = {
     'blockquote'(el, text) {
       return text.trim().split('\n').map(s => `> ${s}`.trim()).join('\n');
     },
-    'img'(el, text) {
+    'img'(el) {
       return `![${el.getAttribute('alt')}](${el.getAttribute('src')})`;
     },
     'a.anchor'(el, text) {
@@ -222,10 +222,10 @@ const gfmRules = {
     'sup'(el, text) {
       return `^${text}`;
     },
-    'hr'(el, text) {
+    'hr'(el) {
       return '-----';
     },
-    'table'(el, text) {
+    'table'(el) {
       const theadEl = el.querySelector('thead');
       const tbodyEl = el.querySelector('tbody');
       if (!theadEl || !tbodyEl) return false;
@@ -233,11 +233,11 @@ const gfmRules = {
       const theadText = CopyAsGFM.nodeToGFM(theadEl);
       const tbodyText = CopyAsGFM.nodeToGFM(tbodyEl);
 
-      return theadText + tbodyText;
+      return [theadText, tbodyText].join('\n');
     },
     'thead'(el, text) {
       const cells = _.map(el.querySelectorAll('th'), (cell) => {
-        let chars = CopyAsGFM.nodeToGFM(cell).trim().length + 2;
+        let chars = CopyAsGFM.nodeToGFM(cell).length + 2;
 
         let before = '';
         let after = '';
@@ -262,10 +262,15 @@ const gfmRules = {
         return before + middle + after;
       });
 
-      return `${text}|${cells.join('|')}|`;
+      const separatorRow = `|${cells.join('|')}|`;
+
+      return [text, separatorRow].join('\n');
     },
-    'tr'(el, text) {
-      const cells = _.map(el.querySelectorAll('td, th'), cell => CopyAsGFM.nodeToGFM(cell).trim());
+    'tr'(el) {
+      const cellEls = el.querySelectorAll('td, th');
+      if (cellEls.length === 0) return false;
+
+      const cells = _.map(cellEls, cell => CopyAsGFM.nodeToGFM(cell));
       return `| ${cells.join(' | ')} |`;
     },
   },
@@ -273,12 +278,12 @@ const gfmRules = {
 
 class CopyAsGFM {
   constructor() {
-    $(document).on('copy', '.md, .wiki', (e) => { this.copyAsGFM(e, CopyAsGFM.transformGFMSelection); });
-    $(document).on('copy', 'pre.code.highlight, .diff-content .line_content', (e) => { this.copyAsGFM(e, CopyAsGFM.transformCodeSelection); });
-    $(document).on('paste', '.js-gfm-input', this.pasteGFM.bind(this));
+    $(document).on('copy', '.md, .wiki', (e) => { CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformGFMSelection); });
+    $(document).on('copy', 'pre.code.highlight, .diff-content .line_content', (e) => { CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformCodeSelection); });
+    $(document).on('paste', '.js-gfm-input', CopyAsGFM.pasteGFM);
   }
 
-  copyAsGFM(e, transformer) {
+  static copyAsGFM(e, transformer) {
     const clipboardData = e.originalEvent.clipboardData;
     if (!clipboardData) return;
 
@@ -292,26 +297,59 @@ class CopyAsGFM {
     e.stopPropagation();
 
     clipboardData.setData('text/plain', el.textContent);
-    clipboardData.setData('text/x-gfm', CopyAsGFM.nodeToGFM(el));
+    clipboardData.setData('text/x-gfm', this.nodeToGFM(el));
   }
 
-  pasteGFM(e) {
+  static pasteGFM(e) {
     const clipboardData = e.originalEvent.clipboardData;
     if (!clipboardData) return;
 
+    const text = clipboardData.getData('text/plain');
     const gfm = clipboardData.getData('text/x-gfm');
     if (!gfm) return;
 
     e.preventDefault();
 
-    window.gl.utils.insertText(e.target, gfm);
+    window.gl.utils.insertText(e.target, (textBefore, textAfter) => {
+      // If the text before the cursor contains an odd number of backticks,
+      // we are either inside an inline code span that starts with 1 backtick
+      // or a code block that starts with 3 backticks.
+      // This logic still holds when there are one or more _closed_ code spans
+      // or blocks that will have 2 or 6 backticks.
+      // This will break down when the actual code block contains an uneven
+      // number of backticks, but this is a rare edge case.
+      const backtickMatch = textBefore.match(/`/g);
+      const insideCodeBlock = backtickMatch && (backtickMatch.length % 2) === 1;
+
+      if (insideCodeBlock) {
+        return text;
+      }
+
+      return gfm;
+    });
   }
 
   static transformGFMSelection(documentFragment) {
-    // If the documentFragment contains more than just Markdown, don't copy as GFM.
-    if (documentFragment.querySelector('.md, .wiki')) return null;
+    const gfmEls = documentFragment.querySelectorAll('.md, .wiki');
+    switch (gfmEls.length) {
+      case 0: {
+        return documentFragment;
+      }
+      case 1: {
+        return gfmEls[0];
+      }
+      default: {
+        const allGfmEl = document.createElement('div');
+
+        for (let i = 0; i < gfmEls.length; i += 1) {
+          const lineEl = gfmEls[i];
+          allGfmEl.appendChild(lineEl);
+          allGfmEl.appendChild(document.createTextNode('\n\n'));
+        }
 
-    return documentFragment;
+        return allGfmEl;
+      }
+    }
   }
 
   static transformCodeSelection(documentFragment) {
@@ -343,7 +381,7 @@ class CopyAsGFM {
     return codeEl;
   }
 
-  static nodeToGFM(node) {
+  static nodeToGFM(node, respectWhitespaceParam = false) {
     if (node.nodeType === Node.COMMENT_NODE) {
       return '';
     }
@@ -352,7 +390,9 @@ class CopyAsGFM {
       return node.textContent;
     }
 
-    const text = this.innerGFM(node);
+    const respectWhitespace = respectWhitespaceParam || (node.nodeName === 'PRE' || node.nodeName === 'CODE');
+
+    const text = this.innerGFM(node, respectWhitespace);
 
     if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
       return text;
@@ -366,7 +406,17 @@ class CopyAsGFM {
 
         if (!window.gl.utils.nodeMatchesSelector(node, selector)) continue;
 
-        const result = func(node, text);
+        let result;
+        if (func.length === 2) {
+          // if `func` takes 2 arguments, it depends on text.
+          // if there is no text, we don't need to generate GFM for this node.
+          if (text.length === 0) continue;
+
+          result = func(node, text);
+        } else {
+          result = func(node);
+        }
+
         if (result === false) continue;
 
         return result;
@@ -376,7 +426,7 @@ class CopyAsGFM {
     return text;
   }
 
-  static innerGFM(parentNode) {
+  static innerGFM(parentNode, respectWhitespace = false) {
     const nodes = parentNode.childNodes;
 
     const clonedParentNode = parentNode.cloneNode(true);
@@ -386,13 +436,19 @@ class CopyAsGFM {
       const node = nodes[i];
       const clonedNode = clonedNodes[i];
 
-      const text = this.nodeToGFM(node);
+      const text = this.nodeToGFM(node, respectWhitespace);
 
       // `clonedNode.replaceWith(text)` is not yet widely supported
       clonedNode.parentNode.replaceChild(document.createTextNode(text), clonedNode);
     }
 
-    return clonedParentNode.innerText || clonedParentNode.textContent;
+    let nodeText = clonedParentNode.innerText || clonedParentNode.textContent;
+
+    if (!respectWhitespace) {
+      nodeText = nodeText.trim();
+    }
+
+    return nodeText;
   }
 }
 

app/assets/javascripts/create_label.js

 /* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, comma-dangle, prefer-template, quotes, no-param-reassign, wrap-iife, max-len */
-/* global Api */
+import Api from './api';
 
 class CreateLabelDropdown {
   constructor ($el, namespacePath, projectPath) {

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

 /* eslint-disable no-param-reassign */
 
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const global = window.gl || (window.gl = {});
 global.cycleAnalytics = global.cycleAnalytics || {};
@@ -10,6 +11,9 @@ global.cycleAnalytics.StageCodeComponent = Vue.extend({
     items: Array,
     stage: Object,
   },
+  components: {
+    userAvatarImage,
+  },
   template: `
     <div>
       <div class="events-description">
@@ -19,7 +23,8 @@ global.cycleAnalytics.StageCodeComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="mergeRequest in items" class="stage-event-item">
           <div class="item-details">
-            <img class="avatar" :src="mergeRequest.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="mergeRequest.author.avatarUrl"/>
             <h5 class="item-title merge-merquest-title">
               <a :href="mergeRequest.url">
                 {{ mergeRequest.title }}
@@ -28,11 +33,11 @@ global.cycleAnalytics.StageCodeComponent = Vue.extend({
             <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a>
             &middot;
             <span>
-              {{ __('OpenedNDaysAgo|Opened') }}
+              {{ s__('OpenedNDaysAgo|Opened') }}
               <a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
             </span>
             <span>
-              {{ __('ByAuthor|by') }}
+              {{ s__('ByAuthor|by') }}
               <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a>
             </span>
           </div>

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

 /* eslint-disable no-param-reassign */
-
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const global = window.gl || (window.gl = {});
 global.cycleAnalytics = global.cycleAnalytics || {};
@@ -10,6 +10,9 @@ global.cycleAnalytics.StageIssueComponent = Vue.extend({
     items: Array,
     stage: Object,
   },
+  components: {
+    userAvatarImage,
+  },
   template: `
     <div>
       <div class="events-description">
@@ -19,7 +22,8 @@ global.cycleAnalytics.StageIssueComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="issue in items" class="stage-event-item">
           <div class="item-details">
-            <img class="avatar" :src="issue.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="issue.author.avatarUrl"/>
             <h5 class="item-title issue-title">
               <a class="issue-title" :href="issue.url">
                 {{ issue.title }}
@@ -28,11 +32,11 @@ global.cycleAnalytics.StageIssueComponent = Vue.extend({
             <a :href="issue.url" class="issue-link">#{{ issue.iid }}</a>
             &middot;
             <span>
-              {{ __('OpenedNDaysAgo|Opened') }}
+              {{ s__('OpenedNDaysAgo|Opened') }}
               <a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
             </span>
             <span>
-              {{ __('ByAuthor|by') }}
+              {{ s__('ByAuthor|by') }}
               <a :href="issue.author.webUrl" class="issue-author-link">
                 {{ issue.author.name }}
               </a>

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

 /* eslint-disable no-param-reassign */
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 import iconCommit from '../svg/icon_commit.svg';
 
 const global = window.gl || (window.gl = {});
@@ -10,11 +11,12 @@ global.cycleAnalytics.StagePlanComponent = Vue.extend({
     items: Array,
     stage: Object,
   },
-
+  components: {
+    userAvatarImage,
+  },
   data() {
     return { iconCommit };
   },
-
   template: `
     <div>
       <div class="events-description">
@@ -24,17 +26,18 @@ global.cycleAnalytics.StagePlanComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="commit in items" class="stage-event-item">
           <div class="item-details item-conmmit-component">
-            <img class="avatar" :src="commit.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="commit.author.avatarUrl"/>
             <h5 class="item-title commit-title">
               <a :href="commit.commitUrl">
                 {{ commit.title }}
               </a>
             </h5>
             <span>
-              {{ __('FirstPushedBy|First') }}
+              {{ s__('FirstPushedBy|First') }}
               <span class="commit-icon">${iconCommit}</span>
               <a :href="commit.commitUrl" class="commit-hash-link commit-sha">{{ commit.shortSha }}</a>
-              {{ __('FirstPushedBy|pushed by') }}
+              {{ s__('FirstPushedBy|pushed by') }}
               <a :href="commit.author.webUrl" class="commit-author-link">
                 {{ commit.author.name }}
               </a>

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

 /* eslint-disable no-param-reassign */
-
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const global = window.gl || (window.gl = {});
 global.cycleAnalytics = global.cycleAnalytics || {};
@@ -10,6 +10,9 @@ global.cycleAnalytics.StageProductionComponent = Vue.extend({
     items: Array,
     stage: Object,
   },
+  components: {
+    userAvatarImage,
+  },
   template: `
     <div>
       <div class="events-description">
@@ -19,7 +22,8 @@ global.cycleAnalytics.StageProductionComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="issue in items" class="stage-event-item">
           <div class="item-details">
-            <img class="avatar" :src="issue.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="issue.author.avatarUrl"/>
             <h5 class="item-title issue-title">
               <a class="issue-title" :href="issue.url">
                 {{ issue.title }}
@@ -28,11 +32,11 @@ global.cycleAnalytics.StageProductionComponent = Vue.extend({
             <a :href="issue.url" class="issue-link">#{{ issue.iid }}</a>
             &middot;
             <span>
-              {{ __('OpenedNDaysAgo|Opened') }}
+              {{ s__('OpenedNDaysAgo|Opened') }}
               <a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
             </span>
             <span>
-            {{ __('ByAuthor|by') }}
+            {{ s__('ByAuthor|by') }}
             <a :href="issue.author.webUrl" class="issue-author-link">
               {{ issue.author.name }}
             </a>

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

 /* eslint-disable no-param-reassign */
-
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const global = window.gl || (window.gl = {});
 global.cycleAnalytics = global.cycleAnalytics || {};
@@ -10,6 +10,9 @@ global.cycleAnalytics.StageReviewComponent = Vue.extend({
     items: Array,
     stage: Object,
   },
+  components: {
+    userAvatarImage,
+  },
   template: `
     <div>
       <div class="events-description">
@@ -19,7 +22,8 @@ global.cycleAnalytics.StageReviewComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="mergeRequest in items" class="stage-event-item">
           <div class="item-details">
-            <img class="avatar" :src="mergeRequest.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="mergeRequest.author.avatarUrl"/>
             <h5 class="item-title merge-merquest-title">
               <a :href="mergeRequest.url">
                 {{ mergeRequest.title }}
@@ -28,11 +32,11 @@ global.cycleAnalytics.StageReviewComponent = Vue.extend({
             <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a>
             &middot;
             <span>
-              {{ __('OpenedNDaysAgo|Opened') }}
+              {{ s__('OpenedNDaysAgo|Opened') }}
               <a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
             </span>
             <span>
-              {{ __('ByAuthor|by') }}
+              {{ s__('ByAuthor|by') }}
               <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a>
             </span>
             <template v-if="mergeRequest.state === 'closed'">

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

 /* eslint-disable no-param-reassign */
 import Vue from 'vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 import iconBranch from '../svg/icon_branch.svg';
 
 const global = window.gl || (window.gl = {});
@@ -13,6 +14,9 @@ global.cycleAnalytics.StageStagingComponent = Vue.extend({
   data() {
     return { iconBranch };
   },
+  components: {
+    userAvatarImage,
+  },
   template: `
     <div>
       <div class="events-description">
@@ -22,7 +26,8 @@ global.cycleAnalytics.StageStagingComponent = Vue.extend({
       <ul class="stage-event-list">
         <li v-for="build in items" class="stage-event-item item-build-component">
           <div class="item-details">
-            <img class="avatar" :src="build.author.avatarUrl">
+            <!-- FIXME: Pass an alt attribute here for accessibility -->
+            <user-avatar-image :img-src="build.author.avatarUrl"/>
             <h5 class="item-title">
               <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
               <i class="fa fa-code-fork"></i>
@@ -32,7 +37,7 @@ global.cycleAnalytics.StageStagingComponent = Vue.extend({
             </h5>
             <span>
               <a :href="build.url" class="build-date">{{ build.date }}</a>
-              {{ __('ByAuthor|by') }}
+              {{ s__('ByAuthor|by') }}
               <a :href="build.author.webUrl" class="issue-author-link">
                 {{ build.author.name }}
               </a>

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"
@@ -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/dispatcher.js

@@ -42,6 +42,7 @@ import Group from './group';
 import GroupName from './group_name';
 import GroupsList from './groups_list';
 import ProjectsList from './projects_list';
+import setupProjectEdit from './project_edit';
 import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
 import BlobLinePermalinkUpdater from './blob/blob_line_permalink_updater';
 import Landing from './landing';
@@ -52,7 +53,6 @@ import ShortcutsWiki from './shortcuts_wiki';
 import Pipelines from './pipelines';
 import BlobViewer from './blob/viewer/index';
 import GeoNodes from './geo_nodes';
-import ServiceDeskRoot from './projects/settings_service_desk/service_desk_root';
 import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
 import UsersSelect from './users_select';
 import RefSelectDropdown from './ref_select_dropdown';
@@ -264,20 +264,20 @@ import ApproversSelect from './approvers_select';
           break;
         case 'projects:edit':
           new UsersSelect();
-          const el = document.querySelector('.js-service-desk-setting-root');
-          if (el) {
-            const serviceDeskRoot = new ServiceDeskRoot(el);
-            serviceDeskRoot.init();
-          }
           break;
         case 'projects:show':
           shortcut_handler = new ShortcutsNavigation();
           new NotificationsForm();
           if ($('#tree-slider').length) {
             new TreeView();
+          }
+          if ($('.blob-viewer').length) {
             new BlobViewer();
           }
           break;
+        case 'projects:edit':
+          setupProjectEdit();
+          break;
         case 'projects:pipelines:builds':
         case 'projects:pipelines:failures':
         case 'projects:pipelines:show':

app/assets/javascripts/droplab/plugins/ajax.js

 /* eslint-disable */
 
+import AjaxCache from '~/lib/utils/ajax_cache';
+
 const Ajax = {
-  _loadUrlData: function _loadUrlData(url) {
-    var self = this;
-    return new Promise(function(resolve, reject) {
-      var xhr = new XMLHttpRequest;
-      xhr.open('GET', url, true);
-      xhr.onreadystatechange = function () {
-        if(xhr.readyState === XMLHttpRequest.DONE) {
-          if (xhr.status === 200) {
-            var data = JSON.parse(xhr.responseText);
-            self.cache[url] = data;
-            return resolve(data);
-          } else {
-            return reject([xhr.responseText, xhr.status]);
-          }
-        }
-      };
-      xhr.send();
-    });
-  },
   _loadData: function _loadData(data, config, self) {
     if (config.loadingTemplate) {
       var dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
@@ -31,7 +14,6 @@ const Ajax = {
   init: function init(hook) {
     var self = this;
     self.destroyed = false;
-    self.cache = self.cache || {};
     var config = hook.config.Ajax;
     this.hook = hook;
     if (!config || !config.endpoint || !config.method) {
@@ -48,14 +30,10 @@ const Ajax = {
       this.listTemplate = dynamicList.outerHTML;
       dynamicList.outerHTML = loadingTemplate.outerHTML;
     }
-    if (self.cache[config.endpoint]) {
-      self._loadData(self.cache[config.endpoint], config, self);
-    } else {
-      this._loadUrlData(config.endpoint)
-        .then(function(d) {
-          self._loadData(d, config, self);
-        }, config.onError).catch(config.onError);
-    }
+
+    AjaxCache.retrieve(config.endpoint)
+      .then((data) => self._loadData(data, config, self))
+      .catch(config.onError);
   },
   destroy: function() {
     this.destroyed = true;

app/assets/javascripts/droplab/plugins/ajax_filter.js

 /* eslint-disable */
+import AjaxCache from '../../lib/utils/ajax_cache';
 
 const AjaxFilter = {
   init: function(hook) {
@@ -58,50 +59,24 @@ const AjaxFilter = {
     this.loading = true;
     var params = config.params || {};
     params[config.searchKey] = searchValue;
-    var self = this;
-    self.cache = self.cache || {};
     var url = config.endpoint + this.buildParams(params);
-    var urlCachedData = self.cache[url];
-    if (urlCachedData) {
-      self._loadData(urlCachedData, config, self);
-    } else {
-      this._loadUrlData(url)
-        .then(function(data) {
-          self._loadData(data, config, self);
-        }, config.onError).catch(config.onError);
-    }
+    return AjaxCache.retrieve(url)
+      .then((data) => {
+        this._loadData(data, config);
+      })
+      .catch(config.onError);
   },
 
-  _loadUrlData: function _loadUrlData(url) {
-    var self = this;
-    return new Promise(function(resolve, reject) {
-      var xhr = new XMLHttpRequest;
-      xhr.open('GET', url, true);
-      xhr.onreadystatechange = function () {
-        if(xhr.readyState === XMLHttpRequest.DONE) {
-          if (xhr.status === 200) {
-            var data = JSON.parse(xhr.responseText);
-            self.cache[url] = data;
-            return resolve(data);
-          } else {
-            return reject([xhr.responseText, xhr.status]);
-          }
-        }
-      };
-      xhr.send();
-    });
-  },
-
-  _loadData: function _loadData(data, config, self) {
-    const list = self.hook.list;
+  _loadData(data, config) {
+    const list = this.hook.list;
     if (config.loadingTemplate && list.data === undefined ||
       list.data.length === 0) {
       const dataLoadingTemplate = list.list.querySelector('[data-loading-template]');
       if (dataLoadingTemplate) {
-        dataLoadingTemplate.outerHTML = self.listTemplate;
+        dataLoadingTemplate.outerHTML = this.listTemplate;
       }
     }
-    if (!self.destroyed) {
+    if (!this.destroyed) {
       var hookListChildren = list.list.children;
       var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic');
       if (onlyDynamicList && data.length === 0) {
@@ -109,7 +84,7 @@ const AjaxFilter = {
       }
       list.setData.call(list, data);
     }
-    self.notLoading();
+    this.notLoading();
     list.currentIndex = 0;
   },
 

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';
@@ -15,6 +16,7 @@ const timeagoInstance = new Timeago();
 
 export default {
   components: {
+    userAvatarLink,
     'commit-component': CommitComponent,
     'actions-component': ActionsComponent,
     'external-url-component': ExternalUrlComponent,
@@ -485,15 +487,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/environments_table.vue

@@ -49,6 +49,11 @@ export default {
       required: false,
       default: () => ({}),
     },
+
+    service: {
+      type: Object,
+      required: true,
+    },
   },
 
   methods: {

app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js

@@ -13,13 +13,17 @@ export default {
       required: false,
       default: true,
     },
+    allowedKeys: {
+      type: Array,
+      required: true,
+    },
   },
 
   computed: {
     processedItems() {
       return this.items.map((item) => {
         const { tokens, searchToken }
-          = gl.FilteredSearchTokenizer.processTokens(item);
+          = gl.FilteredSearchTokenizer.processTokens(item, this.allowedKeys);
 
         const resultantTokens = tokens.map(token => ({
           prefix: `${token.key}:`,

app/assets/javascripts/filtered_search/dropdown_hint.js

@@ -2,14 +2,18 @@ import Filter from '~/droplab/plugins/filter';
 import './filtered_search_dropdown';
 
 class DropdownHint extends gl.FilteredSearchDropdown {
-  constructor(droplab, dropdown, input, filter) {
+  constructor(droplab, dropdown, input, tokenKeys, filter) {
     super(droplab, dropdown, input, filter);
     this.config = {
       Filter: {
         template: 'hint',
-        filterFunction: gl.DropdownUtils.filterHint.bind(null, input),
+        filterFunction: gl.DropdownUtils.filterHint.bind(null, {
+          input,
+          allowedKeys: tokenKeys.getKeys(),
+        }),
       },
     };
+    this.tokenKeys = tokenKeys;
   }
 
   itemClicked(e) {
@@ -52,20 +56,13 @@ class DropdownHint extends gl.FilteredSearchDropdown {
   }
 
   renderContent() {
-    const dropdownData = [];
-
-    [].forEach.call(this.input.closest('.filtered-search-box-input-container').querySelectorAll('.dropdown-menu'), (dropdownMenu) => {
-      const { icon, hint, tag, type } = dropdownMenu.dataset;
-      if (icon && hint && tag) {
-        dropdownData.push(
-          Object.assign({
-            icon: `fa-${icon}`,
-            hint,
-            tag: `<${tag}>`,
-          }, type && { type }),
-        );
-      }
-    });
+    const dropdownData = this.tokenKeys.get()
+      .map(tokenKey => ({
+        icon: `fa-${tokenKey.icon}`,
+        hint: tokenKey.key,
+        tag: `<${tokenKey.symbol}${tokenKey.key}>`,
+        type: tokenKey.type,
+      }));
 
     this.droplab.changeHookList(this.hookId, this.dropdown, [Filter], this.config);
     this.droplab.setData(this.hookId, dropdownData);

app/assets/javascripts/filtered_search/dropdown_non_user.js

@@ -5,7 +5,7 @@ import Filter from '~/droplab/plugins/filter';
 import './filtered_search_dropdown';
 
 class DropdownNonUser extends gl.FilteredSearchDropdown {
-  constructor(droplab, dropdown, input, filter, endpoint, symbol) {
+  constructor(droplab, dropdown, input, tokenKeys, filter, endpoint, symbol) {
     super(droplab, dropdown, input, filter);
     this.symbol = symbol;
     this.config = {

app/assets/javascripts/filtered_search/dropdown_user.js

@@ -4,7 +4,7 @@ import AjaxFilter from '~/droplab/plugins/ajax_filter';
 import './filtered_search_dropdown';
 
 class DropdownUser extends gl.FilteredSearchDropdown {
-  constructor(droplab, dropdown, input, filter) {
+  constructor(droplab, dropdown, input, tokenKeys, filter) {
     super(droplab, dropdown, input, filter);
     this.config = {
       AjaxFilter: {
@@ -25,6 +25,7 @@ class DropdownUser extends gl.FilteredSearchDropdown {
         },
       },
     };
+    this.tokenKeys = tokenKeys;
   }
 
   itemClicked(e) {
@@ -43,7 +44,7 @@ class DropdownUser extends gl.FilteredSearchDropdown {
 
   getSearchInput() {
     const query = gl.DropdownUtils.getSearchInput(this.input);
-    const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query);
+    const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query, this.tokenKeys.get());
 
     let value = lastToken || '';
 

app/assets/javascripts/filtered_search/dropdown_utils.js

@@ -50,10 +50,12 @@ class DropdownUtils {
     return updatedItem;
   }
 
-  static filterHint(input, item) {
+  static filterHint(config, item) {
+    const { input, allowedKeys } = config;
     const updatedItem = item;
     const searchInput = gl.DropdownUtils.getSearchQuery(input);
-    const { lastToken, tokens } = gl.FilteredSearchTokenizer.processTokens(searchInput);
+    const { lastToken, tokens } =
+      gl.FilteredSearchTokenizer.processTokens(searchInput, allowedKeys);
     const lastKey = lastToken.key || lastToken || '';
     const allowMultiple = item.type === 'array';
     const itemInExistingTokens = tokens.some(t => t.key === item.hint);

app/assets/javascripts/filtered_search/filtered_search_bundle.js

@@ -10,4 +10,4 @@ import './filtered_search_tokenizer';
 import './filtered_search_visual_tokens';
 
 // EE-only
-import './filtered_search_token_keys_with_weights';
+import './filtered_search_token_keys_issues_ee';

app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js

@@ -2,16 +2,16 @@ import DropLab from '~/droplab/drop_lab';
 import FilteredSearchContainer from './container';
 
 class FilteredSearchDropdownManager {
-  constructor(baseEndpoint = '', page) {
+  constructor(baseEndpoint = '', tokenizer, page) {
     this.container = FilteredSearchContainer.container;
     this.baseEndpoint = baseEndpoint.replace(/\/$/, '');
-    this.tokenizer = gl.FilteredSearchTokenizer;
+    this.tokenizer = tokenizer;
     this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
     this.filteredSearchInput = this.container.querySelector('.filtered-search');
     this.page = page;
 
     if (this.page === 'issues' || this.page === 'boards') {
-      this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeysWithWeights;
+      this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeysIssuesEE;
     }
 
     this.setupMapping();
@@ -66,7 +66,7 @@ class FilteredSearchDropdownManager {
       this.mapping.weight = {
         reference: null,
         gl: 'DropdownNonUser',
-        element: document.querySelector('#js-dropdown-weight'),
+        element: this.container.querySelector('#js-dropdown-weight'),
       };
     }
   }
@@ -110,7 +110,8 @@ class FilteredSearchDropdownManager {
 
     if (!mappingKey.reference) {
       const dl = this.droplab;
-      const defaultArguments = [null, dl, element, this.filteredSearchInput, key];
+      const defaultArguments =
+        [null, dl, element, this.filteredSearchInput, this.filteredSearchTokenKeys, key];
       const glArguments = defaultArguments.concat(mappingKey.extraArguments || []);
 
       // Passing glArguments to `new gl[glClass](<arguments>)`
@@ -153,7 +154,8 @@ class FilteredSearchDropdownManager {
 
   setDropdown() {
     const query = gl.DropdownUtils.getSearchQuery(true);
-    const { lastToken, searchToken } = this.tokenizer.processTokens(query);
+    const { lastToken, searchToken } =
+      this.tokenizer.processTokens(query, this.filteredSearchTokenKeys.getKeys());
 
     if (this.currentDropdown) {
       this.updateCurrentDropdownOffset();

app/assets/javascripts/filtered_search/filtered_search_manager.js

@@ -14,11 +14,12 @@ class FilteredSearchManager {
     this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
 
     if (page === 'issues' || page === 'boards') {
-      this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeysWithWeights;
+      this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeysIssuesEE;
     }
 
     this.recentSearchesStore = new RecentSearchesStore({
       isLocalStorageAvailable: RecentSearchesService.isAvailable(),
+      allowedKeys: this.filteredSearchTokenKeys.getKeys(),
     });
     const searchHistoryDropdownElement = document.querySelector('.js-filtered-search-history-dropdown');
     const projectPath = searchHistoryDropdownElement ?
@@ -50,7 +51,7 @@ class FilteredSearchManager {
 
     if (this.filteredSearchInput) {
       this.tokenizer = gl.FilteredSearchTokenizer;
-      this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', page);
+      this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', this.tokenizer, page);
 
       this.recentSearchesRoot = new RecentSearchesRoot(
         this.recentSearchesStore,
@@ -326,7 +327,7 @@ class FilteredSearchManager {
   handleInputVisualToken() {
     const input = this.filteredSearchInput;
     const { tokens, searchToken }
-      = gl.FilteredSearchTokenizer.processTokens(input.value);
+      = this.tokenizer.processTokens(input.value, this.filteredSearchTokenKeys.getKeys());
     const { isLastVisualTokenValid }
       = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
@@ -452,7 +453,7 @@ class FilteredSearchManager {
     this.saveCurrentSearchQuery();
 
     const { tokens, searchToken }
-      = this.tokenizer.processTokens(searchQuery);
+      = this.tokenizer.processTokens(searchQuery, this.filteredSearchTokenKeys.getKeys());
     const currentState = gl.utils.getParameterByName('state') || 'opened';
     paths.push(`state=${currentState}`);
 

app/assets/javascripts/filtered_search/filtered_search_token_keys.js

@@ -3,21 +3,25 @@ const tokenKeys = [{
   type: 'string',
   param: 'username',
   symbol: '@',
+  icon: 'pencil',
 }, {
   key: 'assignee',
   type: 'string',
   param: 'username',
   symbol: '@',
+  icon: 'user',
 }, {
   key: 'milestone',
   type: 'string',
   param: 'title',
   symbol: '%',
+  icon: 'clock-o',
 }, {
   key: 'label',
   type: 'array',
   param: 'name[]',
   symbol: '~',
+  icon: 'tag',
 }];
 
 const alternativeTokenKeys = [{
@@ -56,6 +60,10 @@ class FilteredSearchTokenKeys {
     return tokenKeys;
   }
 
+  static getKeys() {
+    return tokenKeys.map(i => i.key);
+  }
+
   static getAlternatives() {
     return alternativeTokenKeys;
   }

app/assets/javascripts/filtered_search/filtered_search_token_keys_with_weights.js → app/assets/javascripts/filtered_search/filtered_search_token_keys_issues_ee.js

@@ -5,6 +5,7 @@ const weightTokenKey = {
   type: 'string',
   param: '',
   symbol: '',
+  icon: 'balance-scale',
 };
 
 const weightConditions = [{
@@ -17,13 +18,23 @@ const weightConditions = [{
   value: 'any',
 }];
 
-class FilteredSearchTokenKeysWithWeights extends gl.FilteredSearchTokenKeys {
+class FilteredSearchTokenKeysIssuesEE extends gl.FilteredSearchTokenKeys {
   static get() {
-    const tokenKeys = super.get();
+    const tokenKeys = Array.from(super.get());
+
+    // Enable multiple assignees
+    const assigneeTokenKey = tokenKeys.find(tk => tk.key === 'assignee');
+    assigneeTokenKey.type = 'array';
+
     tokenKeys.push(weightTokenKey);
     return tokenKeys;
   }
 
+  static getKeys() {
+    const tokenKeys = FilteredSearchTokenKeysIssuesEE.get();
+    return tokenKeys.map(i => i.key);
+  }
+
   static getAlternatives() {
     return super.getAlternatives();
   }
@@ -34,18 +45,18 @@ class FilteredSearchTokenKeysWithWeights extends gl.FilteredSearchTokenKeys {
   }
 
   static searchByKey(key) {
-    const tokenKeys = FilteredSearchTokenKeysWithWeights.get();
+    const tokenKeys = FilteredSearchTokenKeysIssuesEE.get();
     return tokenKeys.find(tokenKey => tokenKey.key === key) || null;
   }
 
   static searchBySymbol(symbol) {
-    const tokenKeys = FilteredSearchTokenKeysWithWeights.get();
+    const tokenKeys = FilteredSearchTokenKeysIssuesEE.get();
     return tokenKeys.find(tokenKey => tokenKey.symbol === symbol) || null;
   }
 
   static searchByKeyParam(keyParam) {
-    const tokenKeys = FilteredSearchTokenKeysWithWeights.get();
-    const alternativeTokenKeys = FilteredSearchTokenKeysWithWeights.getAlternatives();
+    const tokenKeys = FilteredSearchTokenKeysIssuesEE.get();
+    const alternativeTokenKeys = FilteredSearchTokenKeysIssuesEE.getAlternatives();
     const tokenKeysWithAlternative = tokenKeys.concat(alternativeTokenKeys);
 
     return tokenKeysWithAlternative.find((tokenKey) => {
@@ -60,16 +71,16 @@ class FilteredSearchTokenKeysWithWeights extends gl.FilteredSearchTokenKeys {
   }
 
   static searchByConditionUrl(url) {
-    const conditions = FilteredSearchTokenKeysWithWeights.getConditions();
+    const conditions = FilteredSearchTokenKeysIssuesEE.getConditions();
     return conditions.find(condition => condition.url === url) || null;
   }
 
   static searchByConditionKeyValue(key, value) {
-    const conditions = FilteredSearchTokenKeysWithWeights.getConditions();
+    const conditions = FilteredSearchTokenKeysIssuesEE.getConditions();
     return conditions
       .find(condition => condition.tokenKey === key && condition.value === value) || null;
   }
 }
 
 window.gl = window.gl || {};
-gl.FilteredSearchTokenKeysWithWeights = FilteredSearchTokenKeysWithWeights;
+gl.FilteredSearchTokenKeysIssuesEE = FilteredSearchTokenKeysIssuesEE;

app/assets/javascripts/filtered_search/filtered_search_tokenizer.js

 import './filtered_search_token_keys';
 
 class FilteredSearchTokenizer {
-  static processTokens(input) {
-    const allowedKeys = gl.FilteredSearchTokenKeys.get().map(i => i.key);
+  static processTokens(input, allowedKeys) {
     // Regex extracts `(token):(symbol)(value)`
     // Values that start with a double quote must end in a double quote (same for single)
     const tokenRegex = new RegExp(`(${allowedKeys.join('|')}):([~%@]?)(?:('[^']*'{0,1})|("[^"]*"{0,1})|(\\S+))`, 'g');

app/assets/javascripts/filtered_search/recent_searches_root.js

@@ -37,6 +37,7 @@ class RecentSearchesRoot {
         <recent-searches-dropdown-content
           :items="recentSearches"
           :is-local-storage-available="isLocalStorageAvailable"
+          :allowed-keys="allowedKeys"
           />
       `,
       components: {

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

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

app/assets/javascripts/flash.js

@@ -16,7 +16,8 @@ window.Flash = (function() {
       parent = null;
     }
     if (parent) {
-      this.flashContainer = parent.find('.flash-container');
+      const $parent = $(parent);
+      this.flashContainer = $parent.find('.flash-container');
     } else {
       this.flashContainer = $('.flash-container-page');
     }
@@ -37,5 +38,9 @@ window.Flash = (function() {
     this.flashContainer.show();
   }
 
+  Flash.prototype.destroy = function() {
+    this.flashContainer.html('');
+  };
+
   return Flash;
 })();

app/assets/javascripts/gl_form.js

@@ -7,9 +7,10 @@ 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
@@ -32,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'));
-
-    new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).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/group_name.js

@@ -44,18 +44,18 @@ export default class GroupName {
   showToggle() {
     this.title.classList.add('wrap');
     this.toggle.classList.remove('hidden');
-    if (this.isHidden) this.groupTitle.classList.add('is-hidden');
+    if (this.isHidden) this.groupTitle.classList.add('hidden');
   }
 
   hideToggle() {
     this.title.classList.remove('wrap');
     this.toggle.classList.add('hidden');
-    if (this.isHidden) this.groupTitle.classList.remove('is-hidden');
+    if (this.isHidden) this.groupTitle.classList.remove('hidden');
   }
 
   toggleGroups() {
     this.isHidden = !this.isHidden;
-    this.groupTitle.classList.toggle('is-hidden');
+    this.groupTitle.classList.toggle('hidden');
   }
 
   render() {

app/assets/javascripts/groups_select.js

@@ -3,7 +3,7 @@
                   prefer-arrow-callback, comma-dangle, consistent-return, yoda,
                   prefer-rest-params, prefer-spread, no-unused-vars, prefer-template,
                   promise/catch-or-return */
-/* global Api */
+import Api from './api';
 
 var slice = [].slice;
 

app/assets/javascripts/ldap_groups_select.js

 /* eslint-disable space-before-function-paren, prefer-arrow-callback, no-var, one-var, one-var-declaration-per-line, object-shorthand, quotes, comma-dangle, consistent-return, no-unused-vars, padded-blocks, func-names, max-len */
-/* global Api */
+import Api from './api';
 
 (function() {
   $(function() {

app/assets/javascripts/lib/utils/ajax_cache.js

-class AjaxCache {
+import Cache from './cache';
+
+class AjaxCache extends Cache {
   constructor() {
-    this.internalStorage = { };
+    super();
     this.pendingRequests = { };
   }
 
-  get(endpoint) {
-    return this.internalStorage[endpoint];
-  }
-
-  hasData(endpoint) {
-    return Object.prototype.hasOwnProperty.call(this.internalStorage, endpoint);
-  }
-
-  remove(endpoint) {
-    delete this.internalStorage[endpoint];
-  }
-
   retrieve(endpoint) {
     if (this.hasData(endpoint)) {
       return Promise.resolve(this.get(endpoint));

app/assets/javascripts/lib/utils/cache.js

+class Cache {
+  constructor() {
+    this.internalStorage = { };
+  }
+
+  get(key) {
+    return this.internalStorage[key];
+  }
+
+  hasData(key) {
+    return Object.prototype.hasOwnProperty.call(this.internalStorage, key);
+  }
+
+  remove(key) {
+    delete this.internalStorage[key];
+  }
+}
+
+export default Cache;

app/assets/javascripts/lib/utils/common_utils.js

@@ -198,10 +198,12 @@
 
       const textBefore = value.substring(0, selectionStart);
       const textAfter = value.substring(selectionEnd, value.length);
-      const newText = textBefore + text + textAfter;
+
+      const insertedText = text instanceof Function ? text(textBefore, textAfter) : text;
+      const newText = textBefore + insertedText + textAfter;
 
       target.value = newText;
-      target.selectionStart = target.selectionEnd = selectionStart + text.length;
+      target.selectionStart = target.selectionEnd = selectionStart + insertedText.length;
 
       // Trigger autosave
       $(target).trigger('input');

app/assets/javascripts/lib/utils/users_cache.js

+import Api from '../../api';
+import Cache from './cache';
+
+class UsersCache extends Cache {
+  retrieve(username) {
+    if (this.hasData(username)) {
+      return Promise.resolve(this.get(username));
+    }
+
+    return Api.users('', { username })
+      .then((users) => {
+        if (!users.length) {
+          throw new Error(`User "${username}" could not be found!`);
+        }
+
+        if (users.length > 1) {
+          throw new Error(`Expected username "${username}" to be unique!`);
+        }
+
+        const user = users[0];
+        this.internalStorage[username] = user;
+        return user;
+      });
+      // missing catch is intentional, error handling depends on use case
+  }
+}
+
+export default new UsersCache();

app/assets/javascripts/merge_request_tabs.js

@@ -288,7 +288,11 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
           if (anchor) {
             const notesContent = anchor.closest('.notes_content');
             const lineType = notesContent.hasClass('new') ? 'new' : 'old';
-            notes.addDiffNote(anchor, lineType, false);
+            notes.toggleDiffNote({
+              target: anchor,
+              lineType,
+              forceShow: true,
+            });
             anchor[0].scrollIntoView();
             // We have multiple elements on the page with `#note_xxx`
             // (discussion and diff tabs) and `:target` only applies to the first

app/assets/javascripts/namespace_select.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, vars-on-top, one-var-declaration-per-line, comma-dangle, object-shorthand, no-else-return, prefer-template, quotes, prefer-arrow-callback, no-param-reassign, no-cond-assign, max-len */
-/* global Api */
+import Api from './api';
 
 (function() {
   window.NamespaceSelect = (function() {

app/assets/javascripts/notes.js

@@ -29,7 +29,7 @@ const normalizeNewlines = function(str) {
 
     Notes.interval = null;
 
-    function Notes(notes_url, note_ids, last_fetched_at, view) {
+    function Notes(notes_url, note_ids, last_fetched_at, view, enableGFM = true) {
       this.updateTargetButtons = this.updateTargetButtons.bind(this);
       this.updateComment = this.updateComment.bind(this);
       this.visibilityChange = this.visibilityChange.bind(this);
@@ -52,6 +52,7 @@ const normalizeNewlines = function(str) {
 
       this.notes_url = notes_url;
       this.note_ids = note_ids;
+      this.enableGFM = enableGFM;
       // Used to keep track of updated notes while people are editing things
       this.updatedNotesTrackingMap = {};
       this.last_fetched_at = last_fetched_at;
@@ -288,6 +289,13 @@ const normalizeNewlines = function(str) {
       }
     };
 
+    Notes.prototype.setupNewNote = function($note) {
+      // Update datetime format on the recent note
+      gl.utils.localTimeAgo($note.find('.js-timeago'), false);
+      this.collapseLongCommitList();
+      this.taskList.init();
+    };
+
     /*
     Render note in main comments area.
 
@@ -308,20 +316,17 @@ const normalizeNewlines = function(str) {
       }
 
       const $note = $notesList.find(`#note_${noteEntity.id}`);
-      if (this.isNewNote(noteEntity)) {
+      if (Notes.isNewNote(noteEntity, this.note_ids)) {
         this.note_ids.push(noteEntity.id);
 
         const $newNote = Notes.animateAppendNote(noteEntity.html, $notesList);
 
-        // Update datetime format on the recent note
-        gl.utils.localTimeAgo($newNote.find('.js-timeago'), false);
-        this.collapseLongCommitList();
-        this.taskList.init();
+        this.setupNewNote($newNote);
         this.refresh();
         return this.updateNotesCount(1);
       }
       // The server can send the same update multiple times so we need to make sure to only update once per actual update.
-      else if (this.isUpdatedNote(noteEntity, $note)) {
+      else if (Notes.isUpdatedNote(noteEntity, $note)) {
         const isEditing = $note.hasClass('is-editing');
         const initialContent = normalizeNewlines(
           $note.find('.original-note-content').text().trim()
@@ -342,30 +347,11 @@ const normalizeNewlines = function(str) {
         }
         else {
           const $updatedNote = Notes.animateUpdateNote(noteEntity.html, $note);
-
-          // Update datetime format on the recent note
-          gl.utils.localTimeAgo($updatedNote.find('.js-timeago'), false);
+          this.setupNewNote($updatedNote);
         }
       }
     };
 
-    /*
-    Check if note does not exists on page
-     */
-
-    Notes.prototype.isNewNote = function(noteEntity) {
-      return $.inArray(noteEntity.id, this.note_ids) === -1;
-    };
-
-    Notes.prototype.isUpdatedNote = function(noteEntity, $note) {
-      // There can be CRLF vs LF mismatches if we don't sanitize and compare the same way
-      const sanitizedNoteNote = normalizeNewlines(noteEntity.note);
-      const currentNoteText = normalizeNewlines(
-        $note.find('.original-note-content').text().trim()
-      );
-      return sanitizedNoteNote !== currentNoteText;
-    };
-
     Notes.prototype.isParallelView = function() {
       return Cookies.get('diff_view') === 'parallel';
     };
@@ -378,7 +364,7 @@ const normalizeNewlines = function(str) {
 
     Notes.prototype.renderDiscussionNote = function(noteEntity, $form) {
       var discussionContainer, form, row, lineType, diffAvatarContainer;
-      if (!this.isNewNote(noteEntity)) {
+      if (!Notes.isNewNote(noteEntity, this.note_ids)) {
         return;
       }
       this.note_ids.push(noteEntity.id);
@@ -525,7 +511,7 @@ const normalizeNewlines = function(str) {
 
     Notes.prototype.setupNoteForm = function(form) {
       var textarea, key;
-      new gl.GLForm(form);
+      new gl.GLForm(form, this.enableGFM);
       textarea = form.find(".js-note-text");
       key = [
         "Note",
@@ -596,12 +582,12 @@ const normalizeNewlines = function(str) {
     Updates the current note field.
      */
 
-    Notes.prototype.updateNote = function(_xhr, noteEntity, _status) {
+    Notes.prototype.updateNote = function(noteEntity, $targetNote) {
       var $noteEntityEl, $note_li;
       // Convert returned HTML to a jQuery object so we can modify it further
       $noteEntityEl = $(noteEntity.html);
       $noteEntityEl.addClass('fade-in-full');
-      this.revertNoteEditForm();
+      this.revertNoteEditForm($targetNote);
       gl.utils.localTimeAgo($('.js-timeago', $noteEntityEl));
       $noteEntityEl.renderGFM();
       $noteEntityEl.find('.js-task-list-container').taskList('enable');
@@ -683,10 +669,8 @@ const normalizeNewlines = function(str) {
       if (this.updatedNotesTrackingMap[noteId]) {
         const $newNote = $(this.updatedNotesTrackingMap[noteId].html);
         $note.replaceWith($newNote);
+        this.setupNewNote($newNote);
         this.updatedNotesTrackingMap[noteId] = null;
-
-        // Update datetime format on the recent note
-        gl.utils.localTimeAgo($newNote.find('.js-timeago'), false);
       }
       else {
         $note.find('.js-finish-edit-warning').hide();
@@ -876,12 +860,22 @@ const normalizeNewlines = function(str) {
 
     Notes.prototype.onAddDiffNote = function(e) {
       e.preventDefault();
-      const $link = $(e.currentTarget || e.target);
+      const link = e.currentTarget || e.target;
+      const $link = $(link);
       const showReplyInput = !$link.hasClass('js-diff-comment-avatar');
-      this.addDiffNote($link, $link.data('lineType'), showReplyInput);
+      this.toggleDiffNote({
+        target: $link,
+        lineType: link.dataset.lineType,
+        showReplyInput
+      });
     };
 
-    Notes.prototype.addDiffNote = function(target, lineType, showReplyInput) {
+    Notes.prototype.toggleDiffNote = function({
+      target,
+      lineType,
+      forceShow,
+      showReplyInput = false,
+    }) {
       var $link, addForm, hasNotes, newForm, noteForm, replyButton, row, rowCssToAdd, targetContent, isDiffCommentAvatar;
       $link = $(target);
       row = $link.closest("tr");
@@ -926,12 +920,12 @@ const normalizeNewlines = function(str) {
         notesContent = targetRow.find(notesContentSelector);
         addForm = true;
       } else {
-        targetRow.show();
-        notesContent.toggle(!notesContent.is(':visible'));
+        const isCurrentlyShown = targetRow.find('.content:not(:empty)').is(':visible');
+        const isForced = forceShow === true || forceShow === false;
+        const showNow = forceShow === true || (!isCurrentlyShown && !isForced);
 
-        if (!targetRow.find('.content:not(:empty)').is(':visible')) {
-          targetRow.hide();
-        }
+        targetRow.toggle(showNow);
+        notesContent.toggle(showNow);
       }
 
       if (addForm) {
@@ -1139,6 +1133,25 @@ const normalizeNewlines = function(str) {
       return $form;
     };
 
+    /**
+     * Check if note does not exists on page
+     */
+    Notes.isNewNote = function(noteEntity, noteIds) {
+      return $.inArray(noteEntity.id, noteIds) === -1;
+    };
+
+    /**
+     * Check if $note already contains the `noteEntity` content
+     */
+    Notes.isUpdatedNote = function(noteEntity, $note) {
+      // There can be CRLF vs LF mismatches if we don't sanitize and compare the same way
+      const sanitizedNoteEntityText = normalizeNewlines(noteEntity.note.trim());
+      const currentNoteText = normalizeNewlines(
+        $note.find('.original-note-content').first().text().trim()
+      );
+      return sanitizedNoteEntityText !== currentNoteText;
+    };
+
     Notes.checkMergeRequestStatus = function() {
       if (gl.utils.getPagePath(1) === 'merge_requests') {
         gl.mrWidget.checkStatus();
@@ -1394,7 +1407,7 @@ const normalizeNewlines = function(str) {
       gl.utils.ajaxPost(formAction, formData)
         .then((note) => {
           // Submission successful! render final note element
-          this.updateNote(null, note, null);
+          this.updateNote(note, $editingNote);
         })
         .fail(() => {
           // Submission failed, revert back to original note

app/assets/javascripts/pipelines/components/pipeline_url.js

+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+
 export default {
   props: [
     'pipeline',
@@ -7,6 +9,9 @@ export default {
       return !!this.pipeline.user;
     },
   },
+  components: {
+    userAvatarLink,
+  },
   template: `
     <td>
       <a
@@ -15,18 +20,13 @@ export default {
         <span class="pipeline-id">#{{pipeline.id}}</span>
       </a>
       <span>by</span>
-      <a
-        class="js-pipeline-url-user"
+      <user-avatar-link
         v-if="user"
-        :href="pipeline.user.web_url">
-        <img
-          v-if="user"
-          class="avatar has-tooltip s20 "
-          :title="pipeline.user.name"
-          data-container="body"
-          :src="pipeline.user.avatar_url"
-        >
-      </a>
+        class="js-pipeline-url-user"
+        :link-href="pipeline.user.web_url"
+        :img-src="pipeline.user.avatar_url"
+        :tooltip-text="pipeline.user.name"
+      />
       <span
         v-if="!user"
         class="js-pipeline-url-api api">

app/assets/javascripts/project_edit.js

+export default function setupProjectEdit() {
+  const $transferForm = $('.js-project-transfer-form');
+  const $selectNamespace = $transferForm.find('.select2');
+
+  $selectNamespace.on('change', () => {
+    $transferForm.find(':submit').prop('disabled', !$selectNamespace.val());
+  });
+  $selectNamespace.trigger('change');
+}

app/assets/javascripts/project_select.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-var, comma-dangle, object-shorthand, one-var, one-var-declaration-per-line, no-else-return, quotes, max-len */
-/* global Api */
+import Api from './api';
 
 (function() {
   this.ProjectSelect = (function() {

app/assets/javascripts/projects/settings_service_desk/components/service_desk_root.vue

+<script>
+/* global Flash */
+
+import serviceDeskSetting from './service_desk_setting.vue';
+import ServiceDeskStore from '../stores/service_desk_store';
+import ServiceDeskService from '../services/service_desk_service';
+import eventHub from '../event_hub';
+
+export default {
+  name: 'ServiceDeskRoot',
+
+  props: {
+    initialIsEnabled: {
+      type: Boolean,
+      required: true,
+    },
+    endpoint: {
+      type: String,
+      required: true,
+    },
+    incomingEmail: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  data() {
+    const store = new ServiceDeskStore({
+      incomingEmail: this.incomingEmail,
+    });
+
+    return {
+      store,
+      state: store.state,
+      isEnabled: this.initialIsEnabled,
+    };
+  },
+
+  components: {
+    serviceDeskSetting,
+  },
+
+  methods: {
+    fetchIncomingEmail() {
+      if (this.flash) {
+        this.flash.destroy();
+      }
+
+      this.service.fetchIncomingEmail()
+        .then(res => res.json())
+        .then((data) => {
+          const email = data.service_desk_address;
+          if (!email) {
+            throw new Error('Response didn\'t include `service_desk_address`');
+          }
+
+          this.store.setIncomingEmail(email);
+        })
+        .catch(() => {
+          this.flash = new Flash('An error occurred while fetching the Service Desk address.', 'alert', this.$el);
+        });
+    },
+
+    onEnableToggled(isChecked) {
+      this.isEnabled = isChecked;
+      this.store.resetIncomingEmail();
+      if (this.flash) {
+        this.flash.destroy();
+      }
+
+      this.service.toggleServiceDesk(isChecked)
+        .then(res => res.json())
+        .then((data) => {
+          const email = data.service_desk_address;
+          if (isChecked && !email) {
+            throw new Error('Response didn\'t include `service_desk_address`');
+          }
+
+          this.store.setIncomingEmail(email);
+        })
+        .catch(() => {
+          const verb = isChecked ? 'enabling' : 'disabling';
+          this.flash = new Flash(`An error occurred while ${verb} Service Desk.`, 'alert', this.$el);
+        });
+    },
+  },
+
+  created() {
+    eventHub.$on('serviceDeskEnabledCheckboxToggled', this.onEnableToggled);
+
+    this.service = new ServiceDeskService(this.endpoint);
+
+    if (this.isEnabled && !this.store.state.incomingEmail) {
+      this.fetchIncomingEmail();
+    }
+  },
+
+  beforeDestroy() {
+    eventHub.$off('serviceDeskEnabledCheckboxToggled', this.onEnableToggled);
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="flash-container"></div>
+    <service-desk-setting
+      :is-enabled="isEnabled"
+      :incoming-email="state.incomingEmail" />
+  </div>
+</template>

app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.js

-import eventHub from '../event_hub';
-
-export default {
-  name: 'ServiceDeskSetting',
-
-  props: {
-    isEnabled: {
-      type: Boolean,
-      required: true,
-    },
-    incomingEmail: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    fetchError: {
-      type: Error,
-      required: false,
-      default: null,
-    },
-  },
-
-  methods: {
-    onCheckboxToggle(e) {
-      const isChecked = e.target.checked;
-      eventHub.$emit('serviceDeskEnabledCheckboxToggled', isChecked);
-    },
-  },
-
-  template: `
-    <div>
-      <div class="checkbox">
-        <label for="service-desk-enabled-checkbox">
-          <input
-            ref="enabled-checkbox"
-            type="checkbox"
-            id="service-desk-enabled-checkbox"
-            :checked="isEnabled"
-            @change="onCheckboxToggle($event)">
-          <span class="descr">
-            Activate Service Desk
-          </span>
-        </label>
-      </div>
-      <template v-if="isEnabled">
-        <div
-          class="panel-slim panel-default">
-          <div class="panel-heading">
-            <h3 class="panel-title">
-              Forward external support email address to:
-            </h3>
-          </div>
-          <div class="panel-body">
-            <template v-if="fetchError">
-              <i class="fa fa-exclamation-circle" aria-hidden="true" />
-              An error occurred while fetching the incoming email
-            </template>
-            <template v-else-if="incomingEmail">
-              <span
-                ref="service-desk-incoming-email">
-                {{ incomingEmail }}
-              </span>
-              <button
-                class="btn btn-clipboard btn-transparent has-tooltip"
-                title="Copy incoming email address to clipboard"
-                :data-clipboard-text="incomingEmail"
-                @click.prevent>
-                <i class="fa fa-clipboard" aria-hidden="true" />
-              </button>
-            </template>
-            <template v-else>
-              <i class="fa fa-spinner fa-spin" aria-hidden="true" />
-              <span class="sr-only">
-                Fetching incoming email
-              </span>
-            </template>
-          </div>
-        </div>
-      </template>
-    </div>
-  `,
-};

app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue

+<script>
+import eventHub from '../event_hub';
+
+export default {
+  name: 'ServiceDeskSetting',
+
+  props: {
+    isEnabled: {
+      type: Boolean,
+      required: true,
+    },
+    incomingEmail: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  methods: {
+    onCheckboxToggle(e) {
+      const isChecked = e.target.checked;
+      eventHub.$emit('serviceDeskEnabledCheckboxToggled', isChecked);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="checkbox">
+      <label for="service-desk-enabled-checkbox">
+        <input
+          ref="enabled-checkbox"
+          type="checkbox"
+          id="service-desk-enabled-checkbox"
+          :checked="isEnabled"
+          @change="onCheckboxToggle($event)">
+        <span class="descr">
+          Activate Service Desk
+        </span>
+      </label>
+    </div>
+    <div
+      v-if="isEnabled"
+      class="panel-slim panel-default">
+      <div class="panel-heading">
+        <h3 class="panel-title">
+          Forward external support email address to:
+        </h3>
+      </div>
+      <div class="panel-body">
+        <template v-if="incomingEmail">
+          <span
+            ref="service-desk-incoming-email">
+            {{ incomingEmail }}
+          </span>
+          <button
+            type="button"
+            class="btn btn-clipboard btn-transparent has-tooltip"
+            title="Copy incoming email address to clipboard"
+            :data-clipboard-text="incomingEmail">
+            <i
+              class="fa fa-clipboard"
+              aria-hidden="true" />
+          </button>
+        </template>
+        <template v-else>
+          <i
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true">
+          </i>
+          <span class="sr-only">
+            Fetching incoming email
+          </span>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

app/assets/javascripts/projects/settings_service_desk/service_desk_bundle.js

+import Vue from 'vue';
+import serviceDeskRoot from './components/service_desk_root.vue';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const serviceDeskRootElement = document.querySelector('.js-service-desk-setting-root');
+  if (serviceDeskRootElement) {
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: serviceDeskRootElement,
+      data() {
+        const dataset = serviceDeskRootElement.dataset;
+        return {
+          initialIsEnabled: gl.utils.convertPermissionToBoolean(
+            dataset.enabled,
+          ),
+          endpoint: dataset.endpoint,
+          incomingEmail: dataset.incomingEmail,
+        };
+      },
+      components: {
+        serviceDeskRoot,
+      },
+      render(createElement) {
+        return createElement('service-desk-root', {
+          props: {
+            initialIsEnabled: this.initialIsEnabled,
+            endpoint: this.endpoint,
+            incomingEmail: this.incomingEmail,
+          },
+        });
+      },
+    });
+  }
+});

app/assets/javascripts/projects/settings_service_desk/service_desk_root.js

-/* eslint-disable no-new */
-import Vue from 'vue';
-import ServiceDeskSetting from './components/service_desk_setting';
-import ServiceDeskStore from './stores/service_desk_store';
-import ServiceDeskService from './services/service_desk_service';
-import eventHub from './event_hub';
-
-class ServiceDeskRoot {
-  constructor(wrapperElement) {
-    this.wrapperElement = wrapperElement;
-    const isEnabled = typeof this.wrapperElement.dataset.enabled !== 'undefined' &&
-      this.wrapperElement.dataset.enabled !== 'false';
-    const incomingEmail = this.wrapperElement.dataset.incomingEmail;
-    const endpoint = this.wrapperElement.dataset.endpoint;
-
-    this.store = new ServiceDeskStore({
-      isEnabled,
-      incomingEmail,
-    });
-    this.service = new ServiceDeskService(endpoint);
-  }
-
-  init() {
-    this.bindEvents();
-
-    if (this.store.state.isEnabled && !this.store.state.incomingEmail) {
-      this.fetchIncomingEmail();
-    }
-
-    this.render();
-  }
-
-  bindEvents() {
-    this.onEnableToggledWrapper = this.onEnableToggled.bind(this);
-
-    eventHub.$on('serviceDeskEnabledCheckboxToggled', this.onEnableToggledWrapper);
-  }
-
-  unbindEvents() {
-    eventHub.$off('serviceDeskEnabledCheckboxToggled', this.onEnableToggledWrapper);
-  }
-
-  render() {
-    this.vm = new Vue({
-      el: this.wrapperElement,
-      data: this.store.state,
-      template: `
-        <service-desk-setting
-          :isEnabled="isEnabled"
-          :incomingEmail="incomingEmail"
-          :fetchError="fetchError" />
-      `,
-      components: {
-        'service-desk-setting': ServiceDeskSetting,
-      },
-    });
-  }
-
-  fetchIncomingEmail() {
-    this.service.fetchIncomingEmail()
-      .then((incomingEmail) => {
-        this.store.setIncomingEmail(incomingEmail);
-      })
-      .catch((err) => {
-        this.store.setFetchError(err);
-      });
-  }
-
-  onEnableToggled(isChecked) {
-    this.store.setIsActivated(isChecked);
-    this.store.setIncomingEmail('');
-    this.store.setFetchError(null);
-
-    this.service.toggleServiceDesk(isChecked)
-      .then((incomingEmail) => {
-        this.store.setIncomingEmail(incomingEmail);
-      })
-      .catch((err) => {
-        this.store.setFetchError(err);
-      });
-  }
-
-  destroy() {
-    this.unbindEvents();
-    if (this.vm) {
-      this.vm.$destroy();
-    }
-  }
-}
-
-export default ServiceDeskRoot;

app/assets/javascripts/projects/settings_service_desk/services/service_desk_service.js

 import Vue from 'vue';
 import vueResource from 'vue-resource';
-import '../../../vue_shared/vue_resource_interceptor';
 
 Vue.use(vueResource);
 
@@ -10,29 +9,13 @@ class ServiceDeskService {
   }
 
   fetchIncomingEmail() {
-    return this.serviceDeskResource.get()
-      .then((res) => {
-        const email = res.data.service_desk_address;
-        if (!email) {
-          throw new Error('Response didn\'t include `service_desk_address`');
-        }
-
-        return email;
-      });
+    return this.serviceDeskResource.get();
   }
 
   toggleServiceDesk(enable) {
     return this.serviceDeskResource.update({
       service_desk_enabled: enable,
-    })
-      .then((res) => {
-        const email = res.data.service_desk_address;
-        if (enable && !email) {
-          throw new Error('Response didn\'t include `service_desk_address`');
-        }
-
-        return email;
-      });
+    });
   }
 }
 

app/assets/javascripts/projects/settings_service_desk/stores/service_desk_store.js

 class ServiceDeskStore {
   constructor(initialState = {}) {
     this.state = Object.assign({
-      isEnabled: false,
       incomingEmail: '',
-      fetchError: null,
     }, initialState);
   }
 
-  setIsActivated(value) {
-    this.state.isEnabled = value;
-  }
-
   setIncomingEmail(value) {
     this.state.incomingEmail = value;
   }
 
-  setFetchError(value) {
-    this.state.fetchError = new Error(value);
+  resetIncomingEmail() {
+    this.state.incomingEmail = '';
   }
 }
 

app/assets/javascripts/raven/index.js

@@ -6,6 +6,10 @@ const index = function index() {
     currentUserId: gon.current_user_id,
     whitelistUrls: [gon.gitlab_url],
     isProduction: process.env.NODE_ENV,
+    release: gon.revision,
+    tags: {
+      revision: gon.revision,
+    },
   });
 
   return RavenConfig;

app/assets/javascripts/raven/raven_config.js

 import Raven from 'raven-js';
+import $ from 'jquery';
 
 const IGNORE_ERRORS = [
   // Random plugins/extensions
@@ -57,6 +58,8 @@ const RavenConfig = {
 
   configure() {
     Raven.config(this.options.sentryDsn, {
+      release: this.options.release,
+      tags: this.options.tags,
       whitelistUrls: this.options.whitelistUrls,
       environment: this.options.isProduction ? 'production' : 'development',
       ignoreErrors: this.IGNORE_ERRORS,
@@ -72,7 +75,7 @@ const RavenConfig = {
   },
 
   bindRavenErrors() {
-    window.$(document).on('ajaxError.raven', this.handleRavenErrors);
+    $(document).on('ajaxError.raven', this.handleRavenErrors);
   },
 
   handleRavenErrors(event, req, config, err) {

app/assets/javascripts/search.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, object-shorthand, prefer-arrow-callback, comma-dangle, prefer-template, quotes, no-else-return, max-len */
 /* global Flash */
-/* global Api */
+import Api from './api';
 
 (function() {
   this.Search = (function() {

app/assets/javascripts/shortcuts_issuable.js

@@ -38,7 +38,7 @@ import './shortcuts_navigation';
     }
 
     ShortcutsIssuable.prototype.replyWithSelectedText = function() {
-      var quote, documentFragment, selected, separator;
+      var quote, documentFragment, el, selected, separator;
       var replyField = $('.js-main-target-form #note_note');
 
       documentFragment = window.gl.utils.getSelectedFragment();
@@ -47,10 +47,8 @@ import './shortcuts_navigation';
         return;
       }
 
-      // If the documentFragment contains more than just Markdown, don't copy as GFM.
-      if (documentFragment.querySelector('.md, .wiki')) return;
-
-      selected = window.gl.CopyAsGFM.nodeToGFM(documentFragment);
+      el = window.gl.CopyAsGFM.transformGFMSelection(documentFragment.cloneNode(true));
+      selected = window.gl.CopyAsGFM.nodeToGFM(el);
 
       if (selected.trim() === "") {
         return;

app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js

@@ -67,10 +67,11 @@ export default {
     <div>
       <assignee-title
         :number-of-assignees="store.assignees.length"
-        :loading="loading"
+        :loading="loading || store.isFetching.assignees"
         :editable="store.editable"
       />
       <assignees
+        v-if="!store.isFetching.assignees"
         class="value"
         :root-path="store.rootPath"
         :users="store.assignees"

app/assets/javascripts/sidebar/stores/sidebar_store.js

@@ -10,6 +10,9 @@ export default class SidebarStore {
       this.humanTimeEstimate = '';
       this.humanTimeSpent = '';
       this.assignees = [];
+      this.isFetching = {
+        assignees: true,
+      };
 
       SidebarStore.singleton = this;
     }
@@ -18,6 +21,7 @@ export default class SidebarStore {
   }
 
   setAssigneeData(data) {
+    this.isFetching.assignees = false;
     if (data.assignees) {
       this.assignees = data.assignees;
     }

app/assets/javascripts/templates/issuable_template_selector.js

 /* eslint-disable comma-dangle, max-len, no-useless-return, no-param-reassign, max-len */
-/* global Api */
+import Api from '../api';
 
 import TemplateSelector from '../blob/template_selector';
 

app/assets/javascripts/users_select.js

@@ -451,6 +451,15 @@ function UsersSelect(currentUser, els) {
             selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('field-name')) + "']").val();
             return assignTo(selected);
           }
+
+          // Automatically close dropdown after assignee is selected
+          // since CE has no multiple assignees
+          // EE does not have a max-select
+          if ($dropdown.data('max-select') &&
+              getSelected().length === $dropdown.data('max-select')) {
+            // Close the dropdown
+            $dropdown.dropdown('toggle');
+          }
         },
         id: function (user) {
           return user.id;

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js

@@ -56,7 +56,7 @@ export default {
         <div class="ci-widget">
           <div class="ci-status-icon ci-status-icon-success">
             <span class="js-icon-link icon-link">
-              <span
+              <span class="ci-status-icon"
                 v-html="svg"
                 aria-hidden="true"></span>
             </span>

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js

@@ -92,10 +92,7 @@ export default {
             :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.targetBranch)}"
             :title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
             data-placement="bottom">
-            <a
-              :href="mr.targetBranchPath">
-              {{mr.targetBranch}}
-            </a>
+            <a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
           </span>
         </strong>
         <span

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js

+import eventHub from '../../event_hub';
+
 export default {
   name: 'MRWidgetAutoMergeFailed',
   props: {
     mr: { type: Object, required: true },
   },
+  data() {
+    return {
+      isRefreshing: false,
+    };
+  },
+  methods: {
+    refreshWidget() {
+      this.isRefreshing = true;
+      eventHub.$emit('MRWidgetUpdateRequested', () => {
+        this.isRefreshing = false;
+      });
+    },
+  },
   template: `
     <div class="mr-widget-body">
       <button
@@ -13,8 +28,19 @@ export default {
       </button>
       <span class="bold danger">
         This merge request failed to be merged automatically.
+        <button
+          @click="refreshWidget"
+          :class="{ disabled: isRefreshing }"
+          type="button"
+          class="btn btn-xs btn-default">
+          <i
+            v-if="isRefreshing"
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true" />
+          Refresh
+        </button>
       </span>
-      <div class="merge-error-text">
+      <div class="merge-error-text danger bold">
         {{mr.mergeError}}
       </div>
     </div>

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js

@@ -33,7 +33,7 @@ export default {
       return this.useCommitMessageWithDescription ? withoutDesc : withDesc;
     },
     mergeButtonClass() {
-      const defaultClass = 'btn btn-success accept-merge-request';
+      const defaultClass = 'btn btn-small btn-success accept-merge-request';
       const failedClass = `${defaultClass} btn-danger`;
       const inActionClass = `${defaultClass} btn-info`;
       const { pipeline, isPipelineActive, isPipelineFailed, hasCI, ciStatus } = this.mr;
@@ -214,7 +214,7 @@ export default {
           v-if="shouldShowMergeOptionsDropdown"
           :disabled="isMergeButtonDisabled"
           type="button"
-          class="btn btn-info dropdown-toggle"
+          class="btn btn-small btn-info dropdown-toggle"
           data-toggle="dropdown">
           <i
             class="fa fa-caret-down"

app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js

@@ -11,10 +11,6 @@ export default function deviseState(data) {
     return 'conflicts';
   } else if (data.work_in_progress) {
     return 'workInProgress';
-  } else if (this.mergeWhenPipelineSucceeds) {
-    return this.mergeError ? 'autoMergeFailed' : 'mergeWhenPipelineSucceeds';
-  } else if (!this.canMerge) {
-    return 'notAllowedToMerge';
   } else if (this.onlyAllowMergeIfPipelineSucceeds && this.isPipelineFailed) {
     return 'pipelineFailed';
   } else if (this.hasMergeableDiscussionsState) {
@@ -23,6 +19,10 @@ export default function deviseState(data) {
     return 'pipelineBlocked';
   } else if (this.hasSHAChanged) {
     return 'shaMismatch';
+  } else if (this.mergeWhenPipelineSucceeds) {
+    return this.mergeError ? 'autoMergeFailed' : 'mergeWhenPipelineSucceeds';
+  } else if (!this.canMerge) {
+    return 'notAllowedToMerge';
   } else if (this.canBeMerged) {
     return 'readyToMerge';
   }

app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

@@ -4,7 +4,7 @@ import { getStateKey } from '../dependencies';
 export default class MergeRequestStore {
 
   constructor(data) {
-    this.startingSha = data.diff_head_sha;
+    this.sha = data.diff_head_sha;
     this.setData(data);
   }
 
@@ -19,7 +19,6 @@ export default class MergeRequestStore {
     this.targetBranch = data.target_branch;
     this.sourceBranch = data.source_branch;
     this.mergeStatus = data.merge_status;
-    this.sha = data.diff_head_sha;
     this.commitMessage = data.merge_commit_message;
     this.commitMessageWithDescription = data.merge_commit_message_with_description;
     this.commitsCount = data.commits_count;
@@ -72,7 +71,7 @@ export default class MergeRequestStore {
     this.canMerge = !!data.merge_path;
     this.canCreateIssue = currentUser.can_create_issue || false;
     this.canCancelAutomaticMerge = !!data.cancel_merge_when_pipeline_succeeds_path;
-    this.hasSHAChanged = this.sha !== this.startingSha;
+    this.hasSHAChanged = this.sha !== data.diff_head_sha;
     this.canBeMerged = data.can_be_merged || false;
 
     // Cherry-pick and Revert actions related

app/assets/javascripts/vue_shared/components/commit.js

 import commitIconSvg from 'icons/_icon_commit.svg';
+import userAvatarLink from './user_avatar/user_avatar_link.vue';
 
 export default {
   props: {
@@ -110,6 +111,9 @@ export default {
     return { commitIconSvg };
   },
 
+  components: {
+    userAvatarLink,
+  },
   template: `
     <div class="branch-commit">
 
@@ -133,16 +137,14 @@ export default {
 
       <p class="commit-title">
         <span v-if="title">
-          <a v-if="hasAuthor"
+          <user-avatar-link
+            v-if="hasAuthor"
             class="avatar-image-container"
-            :href="author.web_url">
-            <img
-              class="avatar has-tooltip s20"
-              :src="author.avatar_url"
-              :alt="userImageAltDescription"
-              :title="author.username" />
-          </a>
-
+            :link-href="author.web_url"
+            :img-src="author.avatar_url"
+            :img-alt="userImageAltDescription"
+            :tooltip-text="author.username"
+          />
           <a class="commit-row-message"
             :href="commitUrl">
             {{title}}

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue

+<script>
+
+/* This is a re-usable vue component for rendering a user avatar that
+  does not need to link to the user's profile. The image and an optional
+  tooltip can be configured by props passed to this component.
+
+  Sample configuration:
+
+  <user-avatar-image
+    :img-src="userAvatarSrc"
+    :img-alt="tooltipText"
+    :tooltip-text="tooltipText"
+    tooltip-placement="top"
+  />
+
+*/
+
+import defaultAvatarUrl from 'images/no_avatar.png';
+import TooltipMixin from '../../mixins/tooltip';
+
+export default {
+  name: 'UserAvatarImage',
+  mixins: [TooltipMixin],
+  props: {
+    imgSrc: {
+      type: String,
+      required: false,
+      default: defaultAvatarUrl,
+    },
+    cssClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgAlt: {
+      type: String,
+      required: false,
+      default: 'user avatar',
+    },
+    size: {
+      type: Number,
+      required: false,
+      default: 20,
+    },
+    tooltipText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+  },
+  computed: {
+    tooltipContainer() {
+      return this.tooltipText ? 'body' : null;
+    },
+    avatarSizeClass() {
+      return `s${this.size}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <img
+    class="avatar"
+    :class="[avatarSizeClass, cssClasses]"
+    :src="imgSrc"
+    :width="size"
+    :height="size"
+    :alt="imgAlt"
+    :data-container="tooltipContainer"
+    :data-placement="tooltipPlacement"
+    :title="tooltipText"
+    ref="tooltip"
+  />
+</template>

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue

+<script>
+
+/* This is a re-usable vue component for rendering a user avatar wrapped in
+  a clickable link (likely to the user's profile). The link, image, and
+  tooltip can be configured by props passed to this component.
+
+  Sample configuration:
+
+  <user-avatar-link
+    :link-href="userProfileUrl"
+    :img-src="userAvatarSrc"
+    :img-alt="tooltipText"
+    :img-size="20"
+    :tooltip-text="tooltipText"
+    tooltip-placement="top"
+  />
+
+*/
+
+import userAvatarImage from './user_avatar_image.vue';
+
+export default {
+  name: 'UserAvatarLink',
+  components: {
+    userAvatarImage,
+  },
+  props: {
+    linkHref: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgSrc: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgAlt: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgCssClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgSize: {
+      type: Number,
+      required: false,
+      default: 20,
+    },
+    tooltipText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+  },
+};
+</script>
+
+<template>
+  <a
+    class="user-avatar-link"
+    :href="linkHref">
+    <user-avatar-image
+      :img-src="imgSrc"
+      :img-alt="imgAlt"
+      :css-classes="imgCssClasses"
+      :size="imgSize"
+      :tooltip-text="tooltipText"
+      :tooltip-placement="tooltipPlacement"
+    />
+  </a>
+</template>

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue

+<script>
+
+/* This is a re-usable vue component for rendering a user avatar svg (typically
+  for a blank state). It will receive styles comparable to the user avatar,
+  but no image is loaded, it isn't wrapped in a link, and tooltips aren't supported.
+  The svg and avatar size can be configured by props passed to this component.
+
+  Sample configuration:
+
+  <user-avatar-svg
+    :svg="potentialApproverSvg"
+    :size="20"
+  />
+
+*/
+
+export default {
+  props: {
+    svg: {
+      type: String,
+      required: true,
+    },
+    size: {
+      type: Number,
+      required: false,
+      default: 20,
+    },
+  },
+  computed: {
+    avatarSizeClass() {
+      return `s${this.size}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <svg
+    :class="avatarSizeClass"
+    :height="size"
+    :width="size"
+    v-html="svg">
+  </svg>
+</template>
+

app/assets/javascripts/vue_shared/vue_resource_interceptor.js

@@ -4,7 +4,7 @@ import VueResource from 'vue-resource';
 Vue.use(VueResource);
 
 // Maintain a global counter for active requests
-// see: spec/support/wait_for_vue_resource.rb
+// see: spec/support/wait_for_requests.rb
 Vue.http.interceptors.push((request, next) => {
   window.activeVueResources = window.activeVueResources || 0;
   window.activeVueResources += 1;

app/assets/stylesheets/framework/avatar.scss

@@ -10,6 +10,8 @@
   border-radius: $avatar_radius;
   border: 1px solid $avatar-border;
   &.s16 { @include avatar-size(16px, 6px); }
+  &.s18 { @include avatar-size(18px, 6px); }
+  &.s19 { @include avatar-size(19px, 6px); }
   &.s20 { @include avatar-size(20px, 7px); }
   &.s24 { @include avatar-size(24px, 8px); }
   &.s26 { @include avatar-size(26px, 8px); }

app/assets/stylesheets/framework/awards.scss

@@ -108,8 +108,9 @@
 }
 
 .award-control {
-  margin-right: 5px;
+  margin: 0 5px 6px 0;
   outline: 0;
+  position: relative;
 
   &.disabled {
     cursor: default;
@@ -227,8 +228,8 @@
   .award-control-icon-positive,
   .award-control-icon-super-positive {
     position: absolute;
-    left: 11px;
-    bottom: 7px;
+    left: 10px;
+    bottom: 6px;
     opacity: 0;
     @include transition(opacity, transform);
   }
@@ -237,7 +238,3 @@
     vertical-align: middle;
   }
 }
-
-.note-awards .award-control-icon-positive {
-  left: 6px;
-}

app/assets/stylesheets/framework/filters.scss

@@ -263,7 +263,9 @@
 }
 
 .filtered-search-input-dropdown-menu {
+  max-height: 215px;
   max-width: 280px;
+  overflow: auto;
 
   @media (max-width: $screen-xs-min) {
     width: auto;
@@ -372,11 +374,6 @@
   padding: 0;
 }
 
-.filter-dropdown {
-  max-height: 215px;
-  overflow: auto;
-}
-
 @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
   .issue-bulk-update-dropdown-toggle {
     width: 100px;

app/assets/stylesheets/framework/header.scss

@@ -31,7 +31,6 @@ header {
     border: none;
     border-bottom: 1px solid $border-color;
     position: fixed;
-    z-index: 300;
     top: 0;
     left: 0;
     right: 0;
@@ -41,7 +40,17 @@ header {
     }
 
     &.with-horizontal-nav {
-      border-color: transparent;
+      border-bottom: 0;
+
+      .navbar-border {
+        height: 1px;
+        position: absolute;
+        right: 0;
+        left: 0;
+        bottom: -1px;
+        background-color: $border-color;
+        opacity: 0;
+      }
     }
 
     .container-fluid {
@@ -115,16 +124,6 @@ header {
     }
   }
 
-  .navbar-border {
-    height: 1px;
-    position: absolute;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    background-color: $border-color;
-    opacity: 0;
-  }
-
   .global-dropdown {
     position: absolute;
     left: -10px;

app/assets/stylesheets/framework/icons.scss

@@ -65,3 +65,7 @@
     text-decoration: none;
   }
 }
+
+.user-avatar-link {
+  text-decoration: none;
+}

app/assets/stylesheets/framework/nav.scss

@@ -470,8 +470,8 @@
   }
 }
 
-.activities {
-  .nav-block {
+.nav-block {
+  &.activities {
     border-bottom: 1px solid $border-color;
 
     .nav-links {

app/assets/stylesheets/framework/sidebar.scss

@@ -83,4 +83,8 @@
     position: fixed;
     top: $header-height;
   }
+
+  &:not(.affix-top) {
+    min-height: 100%;
+  }
 }

app/assets/stylesheets/framework/timeline.scss

@@ -5,7 +5,7 @@
 
   .note-text {
     p:last-child {
-      margin-bottom: 0;
+      margin-bottom: 0 !important;
     }
   }
 
@@ -23,7 +23,6 @@
 }
 
 .timeline-entry {
-  padding: $gl-padding $gl-btn-padding 0;
   border-color: $white-normal;
   color: $gl-text-color;
   border-bottom: 1px solid $border-white-light;

app/assets/stylesheets/framework/typography.scss

@@ -139,6 +139,15 @@
     line-height: 1.6em;
     overflow-x: auto;
     border-radius: 2px;
+
+
+    &.plain-readme {
+      background: none;
+      border: none;
+      padding: 0;
+      margin: 0;
+      font-size: 14px;
+    }
   }
 
   p > code {
@@ -169,14 +178,14 @@
   }
 
   ul.task-list {
-    li.task-list-item {
+    > li.task-list-item {
       list-style-type: none;
       position: relative;
       min-height: 22px;
       padding-left: 28px;
       margin-left: 0 !important;
 
-      input.task-list-item-checkbox {
+      > input.task-list-item-checkbox {
         position: absolute;
         left: 8px;
         top: 5px;
@@ -279,14 +288,6 @@ h6 {
 /** CODE **/
 pre {
   font-family: $monospace_font;
-
-  &.plain-readme {
-    background: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-    font-size: 14px;
-  }
 }
 
 code {

app/assets/stylesheets/framework/variables.scss

@@ -573,3 +573,12 @@ $filter-value-selected-color: #d7d7d7;
 Animation Functions
 */
 $dropdown-animation-timing: cubic-bezier(0.23, 1, 0.32, 1);
+
+/*
+GitLab Plans
+*/
+
+$gl-gold-plan: #d4af37;
+$gl-silver-plan: #91a1ab;
+$gl-bronze-plan: #cd7f32;
+$gl-no-plan: $gl-gray-light;

app/assets/stylesheets/pages/boards.scss

@@ -669,6 +669,9 @@
 
   .dropdown-menu {
     position: fixed;
+    left: 10px;
+    top: 175px;
+    min-width: 200px;
   }
 }