Merge remote-tracking branch 'ee/master' into 2302-environment-specific-variables

* ee/master: (362 commits)
  Update CHANGELOG.md for 9.2.6
  Update CHANGELOG-EE.md for 9.2.6-ee
  Fix transient error with filtered search lazy author/assignee tokens
  changed capitalization of headers
  added in the headers of Why You Need This and Who Needs this
  We're doing the same for CE and EE now
  Fix object_store_uploader_spec.rb
  Remove a duplicate method in ObjectStoreUploader
  Add exists? method to ObjectUploader
  Resolve conflicts doc/api/README.md
  Resolve conflicts in CE->EE merge
  Remove duplicate Project after_validation entry
  Use computed property for issue_token state classes
  Better selector to links
  Expose correct path to group
  Disable button after submission
  Even out spacing in panel body token list
  Ignore related issue link that was not found
  Account for "reopened" state
  Adjust token spacing to match 5px issue search bar
  ...

CHANGELOG-EE.md

 Please view this file on the master branch, on stable branches it's out of date.
 
+## 9.2.6 (2017-06-16)
+
+- Geo: backported fix from 9.3 for big repository sync issues. !2000
+- Geo - Properly set tracking database connection and cron jobs on secondary nodes.
+- Fix approvers dropdown when creating a merge request from a fork.
+- Fixed header being over issue boards when in focus mode.
+- Fix bug where files over 2 GB would not be saved in Geo tracking DB.
+
 ## 9.2.5 (2017-06-07)
 
 - No changes.

CHANGELOG.md

@@ -2,19 +2,31 @@
 documentation](doc/development/changelog.md) for instructions on adding your own
 entry.
 
+## 9.2.6 (2017-06-16)
+
+- Fix the last coverage in trace log should be extracted. !11128 (dosuken123)
+- Respect merge, instead of push, permissions for protected actions. !11648
+- Fix pipeline_schedules pages throwing error 500. !11706 (dosuken123)
+- Make backup task to continue on corrupt repositories. !11962
+- Fix incorrect ETag cache key when relative instance URL is used. !11964
+- Fix math rendering on blob pages.
+- Invalidate cache for issue and MR counters more granularly.
+- Fix terminals support for Kubernetes Service.
+- Fix LFS timeouts when trying to save large files.
+- Strip trailing whitespaces in submodule URLs.
+- Make sure reCAPTCHA configuration is loaded when spam checks are initiated.
+- Remove foreigh key on ci_trigger_schedules only if it exists.
+
 ## 9.2.5 (2017-06-07)
 
 - No changes.
 
 ## 9.2.4 (2017-06-02)
 
-- No changes.
 - Fix visibility when referencing snippets.
 
 ## 9.2.3 (2017-05-31)
 
-- No changes.
-- No changes.
 - Move uploads from 'public/uploads' to 'public/uploads/system'.
 - Escapes html content before appending it to the DOM.
 - Restrict API X-Frame-Options to same origin.

Gemfile

@@ -2,6 +2,7 @@ source 'https://rubygems.org'
 
 gem 'rails', '4.2.8'
 gem 'rails-deprecated_sanitizer', '~> 1.0.3'
+gem 'bootsnap', '~> 1.0.0'
 
 # Responders respond_to and respond_with
 gem 'responders', '~> 2.0'
@@ -17,7 +18,7 @@ gem 'pg', '~> 0.18.2', group: :postgres
 
 gem 'rugged', '~> 0.25.1.1'
 
-gem 'faraday', '~> 0.11.0'
+gem 'faraday', '~> 0.12'
 
 # Authentication libraries
 gem 'devise', '~> 4.2'
@@ -268,7 +269,7 @@ gem 'sentry-raven', '~> 2.4.0'
 gem 'premailer-rails', '~> 1.9.0'
 
 # I18n
-gem 'ruby_parser', '~> 3.8.4', require: false
+gem 'ruby_parser', '~> 3.8', require: false
 gem 'gettext_i18n_rails', '~> 1.8.0'
 gem 'gettext_i18n_rails_js', '~> 1.2.0'
 gem 'gettext', '~> 3.2.2', require: false, group: :development
@@ -379,7 +380,7 @@ gem 'html2text'
 gem 'ruby-prof', '~> 0.16.2'
 
 # OAuth
-gem 'oauth2', '~> 1.3.0'
+gem 'oauth2', '~> 1.4'
 
 # Soft deletion
 gem 'paranoia', '~> 2.2'

Gemfile.lock

@@ -91,6 +91,8 @@ GEM
     bindata (2.3.5)
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
+    bootsnap (1.0.0)
+      msgpack (~> 1.0)
     bootstrap-sass (3.3.6)
       autoprefixer-rails (>= 5.2.1)
       sass (>= 3.3.4)
@@ -215,7 +217,7 @@ GEM
     factory_girl_rails (4.7.0)
       factory_girl (~> 4.7.0)
       railties (>= 3.0.0)
-    faraday (0.11.0)
+    faraday (0.12.1)
       multipart-post (>= 1.2, < 3)
     faraday_middleware (0.11.0.1)
       faraday (>= 0.7.4, < 1.0)
@@ -490,6 +492,7 @@ GEM
     minitest (5.7.0)
     mmap2 (2.2.6)
     mousetrap-rails (1.4.6)
+    msgpack (1.1.0)
     multi_json (1.12.1)
     multi_xml (0.6.0)
     multipart-post (2.0.0)
@@ -505,8 +508,8 @@ GEM
       mini_portile2 (~> 2.1.0)
     numerizer (0.1.1)
     oauth (0.5.1)
-    oauth2 (1.3.1)
-      faraday (>= 0.8, < 0.12)
+    oauth2 (1.4.0)
+      faraday (>= 0.8, < 0.13)
       jwt (~> 1.0)
       multi_json (~> 1.3)
       multi_xml (~> 0.5)
@@ -716,7 +719,7 @@ GEM
     retriable (1.4.1)
     rinku (2.0.0)
     rotp (2.1.2)
-    rouge (2.0.7)
+    rouge (2.1.0)
     rqrcode (0.7.0)
       chunky_png
     rqrcode-rails3 (0.1.7)
@@ -764,7 +767,7 @@ GEM
     ruby-progressbar (1.8.1)
     ruby-saml (1.4.1)
       nokogiri (>= 1.5.10)
-    ruby_parser (3.8.4)
+    ruby_parser (3.9.0)
       sexp_processor (~> 4.1)
     rubyntlm (0.5.2)
     rubypants (0.2.0)
@@ -797,7 +800,7 @@ GEM
     sentry-raven (2.4.0)
       faraday (>= 0.7.6, < 1.0)
     settingslogic (2.0.9)
-    sexp_processor (4.8.0)
+    sexp_processor (4.9.0)
     sham_rack (1.3.6)
       rack
     shoulda-matchers (2.8.0)
@@ -950,6 +953,7 @@ DEPENDENCIES
   benchmark-ips (~> 2.3.0)
   better_errors (~> 2.1.0)
   binding_of_caller (~> 0.7.2)
+  bootsnap (~> 1.0.0)
   bootstrap-sass (~> 3.3.0)
   brakeman (~> 3.6.0)
   browser (~> 2.2)
@@ -981,7 +985,7 @@ DEPENDENCIES
   email_reply_trimmer (~> 0.1)
   email_spec (~> 1.6.0)
   factory_girl_rails (~> 4.7.0)
-  faraday (~> 0.11.0)
+  faraday (~> 0.12)
   faraday_middleware-aws-signers-v4
   ffaker (~> 2.4)
   flay (~> 2.8.0)
@@ -1044,7 +1048,7 @@ DEPENDENCIES
   net-ldap
   net-ssh (~> 3.0.1)
   nokogiri (~> 1.6.7, >= 1.6.7.2)
-  oauth2 (~> 1.3.0)
+  oauth2 (~> 1.4)
   octokit (~> 4.6.2)
   oj (~> 2.17.4)
   omniauth (~> 1.4.2)
@@ -1105,7 +1109,7 @@ DEPENDENCIES
   rubocop-rspec (~> 1.15.0)
   ruby-fogbugz (~> 0.2.1)
   ruby-prof (~> 0.16.2)
-  ruby_parser (~> 3.8.4)
+  ruby_parser (~> 3.8)
   rufus-scheduler (~> 3.4)
   rugged (~> 0.25.1.1)
   sanitize (~> 2.0)

app/assets/javascripts/behaviors/gl_emoji.js

@@ -88,6 +88,7 @@ function installGlEmojiElement() {
     const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
 
     if (
+      emojiUnicode &&
       isEmojiUnicode &&
       !isEmojiUnicodeSupported(generatedUnicodeSupportMap, emojiUnicode, unicodeVersion)
     ) {

app/assets/javascripts/behaviors/gl_emoji/is_emoji_unicode_supported.js

@@ -28,7 +28,8 @@ function isSkinToneComboEmoji(emojiUnicode) {
 // doesn't support the skin tone versions of horse racing
 const horseRacingCodePoint = 127943;// parseInt('1F3C7', 16)
 function isHorceRacingSkinToneComboEmoji(emojiUnicode) {
-  return Array.from(emojiUnicode)[0].codePointAt(0) === horseRacingCodePoint &&
+  const firstCharacter = Array.from(emojiUnicode)[0];
+  return firstCharacter && firstCharacter.codePointAt(0) === horseRacingCodePoint &&
     isSkinToneComboEmoji(emojiUnicode);
 }
 

app/assets/javascripts/blob/blob_file_dropzone.js

@@ -35,7 +35,7 @@ export default class BlobFileDropzone {
           this.removeFile(file);
         });
         this.on('sending', function (file, xhr, formData) {
-          formData.append('branch_name', form.find('input[name="branch_name"]').val());
+          formData.append('branch_name', form.find('.js-branch-name').val());
           formData.append('create_merge_request', form.find('.js-create-merge-request').val());
           formData.append('commit_message', form.find('.js-commit-message').val());
         });

app/assets/javascripts/blob/create_branch_dropdown.js

-class CreateBranchDropdown {
-  constructor(el, targetBranchDropdown) {
-    this.targetBranchDropdown = targetBranchDropdown;
-    this.el = el;
-    this.dropdownBack = this.el.closest('.dropdown').querySelector('.dropdown-menu-back');
-    this.cancelButton = this.el.querySelector('.js-cancel-branch-btn');
-    this.newBranchField = this.el.querySelector('#new_branch_name');
-    this.newBranchCreateButton = this.el.querySelector('.js-new-branch-btn');
-
-    this.newBranchCreateButton.setAttribute('disabled', '');
-
-    this.addBindings();
-    this.cleanupWrapper = this.cleanup.bind(this);
-    document.addEventListener('beforeunload', this.cleanupWrapper);
-  }
-
-  cleanup() {
-    this.cleanBindings();
-    document.removeEventListener('beforeunload', this.cleanupWrapper);
-  }
-
-  cleanBindings() {
-    this.newBranchField.removeEventListener('keyup', this.enableBranchCreateButtonWrapper);
-    this.newBranchField.removeEventListener('change', this.enableBranchCreateButtonWrapper);
-    this.newBranchField.removeEventListener('keydown', this.handleNewBranchKeydownWrapper);
-    this.dropdownBack.removeEventListener('click', this.resetFormWrapper);
-    this.cancelButton.removeEventListener('click', this.handleCancelClickWrapper);
-    this.newBranchCreateButton.removeEventListener('click', this.createBranchWrapper);
-  }
-
-  addBindings() {
-    this.enableBranchCreateButtonWrapper = this.enableBranchCreateButton.bind(this);
-    this.handleNewBranchKeydownWrapper = this.handleNewBranchKeydown.bind(this);
-    this.resetFormWrapper = this.resetForm.bind(this);
-    this.handleCancelClickWrapper = this.handleCancelClick.bind(this);
-    this.createBranchWrapper = this.createBranch.bind(this);
-
-    this.newBranchField.addEventListener('keyup', this.enableBranchCreateButtonWrapper);
-    this.newBranchField.addEventListener('change', this.enableBranchCreateButtonWrapper);
-    this.newBranchField.addEventListener('keydown', this.handleNewBranchKeydownWrapper);
-    this.dropdownBack.addEventListener('click', this.resetFormWrapper);
-    this.cancelButton.addEventListener('click', this.handleCancelClickWrapper);
-    this.newBranchCreateButton.addEventListener('click', this.createBranchWrapper);
-  }
-
-  handleCancelClick(e) {
-    e.preventDefault();
-    e.stopPropagation();
-
-    this.resetForm();
-    this.dropdownBack.click();
-  }
-
-  handleNewBranchKeydown(e) {
-    const keyCode = e.which;
-    const ENTER_KEYCODE = 13;
-    if (keyCode === ENTER_KEYCODE) {
-      this.createBranch(e);
-    }
-  }
-
-  enableBranchCreateButton() {
-    if (this.newBranchField.value !== '') {
-      this.newBranchCreateButton.removeAttribute('disabled');
-    } else {
-      this.newBranchCreateButton.setAttribute('disabled', '');
-    }
-  }
-
-  resetForm() {
-    this.newBranchField.value = '';
-    this.enableBranchCreateButtonWrapper();
-  }
-
-  createBranch(e) {
-    e.preventDefault();
-
-    if (this.newBranchCreateButton.getAttribute('disabled') === '') {
-      return;
-    }
-    const newBranchName = this.newBranchField.value;
-    this.targetBranchDropdown.setNewBranch(newBranchName);
-    this.resetForm();
-  }
-}
-
-window.gl = window.gl || {};
-gl.CreateBranchDropdown = CreateBranchDropdown;

app/assets/javascripts/blob/target_branch_dropdown.js

-/* eslint-disable class-methods-use-this */
-const SELECT_ITEM_MSG = 'Select';
-
-class TargetBranchDropDown {
-  constructor(dropdown) {
-    this.dropdown = dropdown;
-    this.$dropdown = $(dropdown);
-    this.fieldName = this.dropdown.getAttribute('data-field-name');
-    this.form = this.dropdown.closest('form');
-    this.createDropdown();
-  }
-
-  static bootstrap() {
-    const dropdowns = document.querySelectorAll('.js-project-branches-dropdown');
-    [].forEach.call(dropdowns, dropdown => new TargetBranchDropDown(dropdown));
-  }
-
-  createDropdown() {
-    const self = this;
-    this.$dropdown.glDropdown({
-      selectable: true,
-      filterable: true,
-      search: {
-        fields: ['title'],
-      },
-      data: (term, callback) => $.ajax({
-        url: self.dropdown.getAttribute('data-refs-url'),
-        data: {
-          ref: self.dropdown.getAttribute('data-ref'),
-          show_all: true,
-        },
-        dataType: 'json',
-      }).done(refs => callback(self.dropdownData(refs))),
-      toggleLabel(item, el) {
-        if (el.is('.is-active')) {
-          return item.text;
-        }
-        return SELECT_ITEM_MSG;
-      },
-      clicked(options) {
-        options.e.preventDefault();
-        self.onClick.call(self);
-      },
-      fieldName: self.fieldName,
-    });
-    return new gl.CreateBranchDropdown(this.form.querySelector('.dropdown-new-branch'), this);
-  }
-
-  onClick() {
-    this.enableSubmit();
-    this.$dropdown.trigger('change.branch');
-  }
-
-  enableSubmit() {
-    const submitBtn = this.form.querySelector('[type="submit"]');
-    if (this.branchInput && this.branchInput.value) {
-      submitBtn.removeAttribute('disabled');
-    } else {
-      submitBtn.setAttribute('disabled', '');
-    }
-  }
-
-  dropdownData(refs) {
-    const branchList = this.dropdownItems(refs);
-    this.cachedRefs = refs;
-    this.addDefaultBranch(branchList);
-    this.addNewBranch(branchList);
-    return { Branches: branchList };
-  }
-
-  dropdownItems(refs) {
-    return refs.map(this.dropdownItem);
-  }
-
-  dropdownItem(ref) {
-    return { id: ref, text: ref, title: ref };
-  }
-
-  addDefaultBranch(branchList) {
-    // when no branch is selected do nothing
-    if (!this.branchInput) {
-      return;
-    }
-
-    const branchInputVal = this.branchInput.value;
-    const currentBranchIndex = this.searchBranch(branchList, branchInputVal);
-
-    if (currentBranchIndex === -1) {
-      this.unshiftBranch(branchList, this.dropdownItem(branchInputVal));
-    }
-  }
-
-  addNewBranch(branchList) {
-    if (this.newBranch) {
-      this.unshiftBranch(branchList, this.newBranch);
-    }
-  }
-
-  searchBranch(branchList, branchName) {
-    return _.findIndex(branchList, el => branchName === el.id);
-  }
-
-  unshiftBranch(branchList, branch) {
-    const branchIndex = this.searchBranch(branchList, branch.id);
-
-    if (branchIndex === -1) {
-      branchList.unshift(branch);
-    }
-  }
-
-  setNewBranch(newBranchName) {
-    this.newBranch = this.dropdownItem(newBranchName);
-    this.refreshData();
-    this.selectBranch(this.searchBranch(this.glDropdown.fullData.Branches, newBranchName));
-  }
-
-  refreshData() {
-    this.glDropdown.fullData = this.dropdownData(this.cachedRefs);
-    this.clearFilter();
-  }
-
-  clearFilter() {
-    // apply an empty filter in order to refresh the data
-    this.glDropdown.filter.filter('');
-    this.dropdown.closest('.dropdown').querySelector('.dropdown-page-one .dropdown-input-field').value = '';
-  }
-
-  selectBranch(index) {
-    const branch = this.dropdown.closest('.dropdown').querySelectorAll('li a')[index];
-
-    if (!branch.classList.contains('is-active')) {
-      branch.click();
-    } else {
-      this.closeDropdown();
-    }
-  }
-
-  closeDropdown() {
-    this.dropdown.closest('.dropdown').querySelector('.dropdown-menu-close').click();
-  }
-
-  get branchInput() {
-    return this.form.querySelector(`input[name="${this.fieldName}"]`);
-  }
-
-  get glDropdown() {
-    return this.$dropdown.data('glDropdown');
-  }
-}
-
-window.gl = window.gl || {};
-gl.TargetBranchDropDown = TargetBranchDropDown;

app/assets/javascripts/boards/boards_bundle.js

@@ -105,6 +105,8 @@ $(() => {
             if (list.type === 'closed') {
               list.position = Infinity;
               list.label = { description: 'Shows all closed issues. Moving an issue to this list closes it' };
+            } else if (list.type === 'backlog') {
+              list.position = -1;
             }
           });
 
@@ -147,7 +149,7 @@ $(() => {
     },
     computed: {
       disabled() {
-        return !this.store.lists.filter(list => list.type !== 'blank' && list.type !== 'done').length;
+        return !this.store.lists.filter(list => !list.preset).length;
       },
       tooltipTitle() {
         if (this.disabled) {

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

 /* eslint-disable comma-dangle, space-before-function-paren, one-var */
 /* global Sortable */
 import Vue from 'vue';
+import AccessorUtilities from '../../lib/utils/accessor';
 import boardList from './board_list';
 import boardBlankState from './board_blank_state';
 import './board_delete';
@@ -22,6 +23,10 @@ gl.issueBoards.Board = Vue.extend({
     disabled: Boolean,
     issueLinkBase: String,
     rootPath: String,
+    boardId: {
+      type: String,
+      required: true,
+    },
   },
   data () {
     return {
@@ -78,7 +83,16 @@ gl.issueBoards.Board = Vue.extend({
   methods: {
     showNewIssueForm() {
       this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
-    }
+    },
+    toggleExpanded(e) {
+      if (this.list.isExpandable && !e.target.classList.contains('js-no-trigger-collapse')) {
+        this.list.isExpanded = !this.list.isExpanded;
+
+        if (AccessorUtilities.isLocalStorageAccessSafe()) {
+          localStorage.setItem(`boards.${this.boardId}.${this.list.type}.expanded`, this.list.isExpanded);
+        }
+      }
+    },
   },
   mounted () {
     this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
@@ -102,4 +116,11 @@ gl.issueBoards.Board = Vue.extend({
 
     this.sortable = Sortable.create(this.$el.parentNode, this.sortableOptions);
   },
+  created() {
+    if (this.list.isExpandable && AccessorUtilities.isLocalStorageAccessSafe()) {
+      const isCollapsed = localStorage.getItem(`boards.${this.boardId}.${this.list.type}.expanded`) === 'false';
+
+      this.list.isExpanded = !isCollapsed;
+    }
+  },
 });

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

@@ -32,9 +32,6 @@ gl.issueBoards.BoardSidebar = Vue.extend({
     showSidebar () {
       return Object.keys(this.issue).length;
     },
-    assigneeId() {
-      return this.issue.assignee ? this.issue.assignee.id : 0;
-    },
     milestoneTitle() {
       return this.issue.milestone ? this.issue.milestone.title : 'No Milestone';
     }

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

@@ -152,6 +152,7 @@ gl.issueBoards.IssueCardInner = Vue.extend({
         <div class="card-assignee">
           <user-avatar-link
             v-for="(assignee, index) in issue.assignees"
+            :key="assignee.id"
             v-if="shouldRenderAssignee(index)"
             class="js-no-trigger"
             :link-href="assigneeUrl(assignee)"

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

@@ -26,7 +26,8 @@ gl.issueBoards.ModalFooter = Vue.extend({
   },
   methods: {
     addIssues() {
-      const list = this.modal.selectedList || this.state.lists[0];
+      const firstListIndex = 1;
+      const list = this.modal.selectedList || this.state.lists[firstListIndex];
       const selectedIssues = ModalStore.getSelectedIssues();
       const issueIds = selectedIssues.map(issue => issue.globalId);
 

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

@@ -11,7 +11,7 @@ gl.issueBoards.ModalFooterListsDropdown = Vue.extend({
   },
   computed: {
     selected() {
-      return this.modal.selectedList || this.state.lists[0];
+      return this.modal.selectedList || this.state.lists[1];
     },
   },
   destroyed() {

app/assets/javascripts/boards/models/list.js

@@ -12,7 +12,9 @@ class List {
     this.position = obj.position;
     this.title = obj.title;
     this.type = obj.list_type;
-    this.preset = ['closed', 'blank'].indexOf(this.type) > -1;
+    this.preset = ['backlog', 'closed', 'blank'].indexOf(this.type) > -1;
+    this.isExpandable = ['backlog', 'closed'].indexOf(this.type) > -1;
+    this.isExpanded = true;
     this.page = 1;
     this.loading = true;
     this.loadingMore = false;

app/assets/javascripts/boards/stores/boards_store.js

@@ -37,10 +37,14 @@ gl.issueBoards.BoardsStore = {
   },
   new (listObj) {
     const list = this.addList(listObj);
+    const backlogList = this.findList('type', 'backlog', 'backlog');
 
     list
       .save()
       .then(() => {
+        // Remove any new issues from the backlog
+        // as they will be visible in the new list
+        list.issues.forEach(backlogList.removeIssue.bind(backlogList));
         this.state.lists = _.sortBy(this.state.lists, 'position');
       })
       .catch(() => {
@@ -53,7 +57,7 @@ gl.issueBoards.BoardsStore = {
   },
   shouldAddBlankState () {
     // Decide whether to add the blank state
-    return !(this.state.lists.filter(list => list.type !== 'closed')[0]);
+    return !(this.state.lists.filter(list => list.type !== 'backlog' && list.type !== 'closed')[0]);
   },
   addBlankState () {
     if (!this.shouldAddBlankState() || this.welcomeIsHidden() || this.disabled) return;
@@ -106,7 +110,7 @@ gl.issueBoards.BoardsStore = {
       issueTo.removeLabel(listFrom.label);
     }
 
-    if (listTo.type === 'closed') {
+    if (listTo.type === 'closed' && listFrom.type !== 'backlog') {
       issueLists.forEach((list) => {
         list.removeIssue(issue);
       });

app/assets/javascripts/build.js

@@ -20,6 +20,7 @@ window.Build = (function () {
     this.$document = $(document);
     this.logBytes = 0;
     this.scrollOffsetPadding = 30;
+    this.hasBeenScrolled = false;
 
     this.updateDropdown = this.updateDropdown.bind(this);
     this.getBuildTrace = this.getBuildTrace.bind(this);
@@ -62,6 +63,15 @@ window.Build = (function () {
       .off('click')
       .on('click', this.scrollToBottom.bind(this));
 
+    const scrollThrottled = _.throttle(this.toggleScroll.bind(this), 100);
+
+    this.$scrollContainer
+      .off('scroll')
+      .on('scroll', () => {
+        this.hasBeenScrolled = true;
+        scrollThrottled();
+      });
+
     $(window)
       .off('resize.build')
       .on('resize.build', _.throttle(this.sidebarOnResize.bind(this), 100));
@@ -70,25 +80,16 @@ window.Build = (function () {
 
     // eslint-disable-next-line
     this.getBuildTrace()
-      .then(() => this.makeTraceScrollable())
-      .then(() => this.scrollToBottom());
+      .then(() => this.toggleScroll())
+      .then(() => {
+        if (!this.hasBeenScrolled) {
+          this.scrollToBottom();
+        }
+      });
 
     this.verifyTopPosition();
   }
 
-  Build.prototype.makeTraceScrollable = function () {
-    this.$scrollContainer.niceScroll({
-      cursorcolor: '#fff',
-      cursoropacitymin: 1,
-      cursorwidth: '3px',
-      railpadding: { top: 5, bottom: 5, right: 5 },
-    });
-
-    this.$scrollContainer.on('scroll', _.throttle(this.toggleScroll.bind(this), 100));
-
-    this.toggleScroll();
-  };
-
   Build.prototype.canScroll = function () {
     return (this.$scrollContainer.prop('scrollHeight') - this.scrollOffsetPadding) > this.$scrollContainer.height();
   };
@@ -104,12 +105,11 @@ window.Build = (function () {
    *
    */
   Build.prototype.toggleScroll = function () {
-    const bottomScroll = this.$scrollContainer.scrollTop() +
-      this.scrollOffsetPadding +
-      this.$scrollContainer.height();
+    const currentPosition = this.$scrollContainer.scrollTop();
+    const bottomScroll = currentPosition + this.$scrollContainer.innerHeight();
 
     if (this.canScroll()) {
-      if (this.$scrollContainer.scrollTop() === 0) {
+      if (currentPosition === 0) {
         this.toggleDisableButton(this.$scrollTopBtn, true);
         this.toggleDisableButton(this.$scrollBottomBtn, false);
       } else if (bottomScroll === this.$scrollContainer.prop('scrollHeight')) {
@@ -123,12 +123,14 @@ window.Build = (function () {
   };
 
   Build.prototype.scrollToTop = function () {
-    this.$scrollContainer.getNiceScroll(0).doScrollTop(0);
+    this.hasBeenScrolled = true;
+    this.$scrollContainer.scrollTop(0);
     this.toggleScroll();
   };
 
   Build.prototype.scrollToBottom = function () {
-    this.$scrollContainer.getNiceScroll(0).doScrollTo(this.$scrollContainer.prop('scrollHeight'));
+    this.hasBeenScrolled = true;
+    this.$scrollContainer.scrollTop(this.$scrollContainer.prop('scrollHeight'));
     this.toggleScroll();
   };
 
@@ -216,7 +218,11 @@ window.Build = (function () {
           Build.timeout = setTimeout(() => {
             //eslint-disable-next-line
             this.getBuildTrace()
-              .then(() => this.scrollToBottom());
+              .then(() => {
+                if (!this.hasBeenScrolled) {
+                  this.scrollToBottom();
+                }
+              });
           }, 4000);
         } else {
           this.$buildRefreshAnimation.remove();
@@ -238,7 +244,7 @@ window.Build = (function () {
   };
 
   Build.prototype.toggleSidebar = function (shouldHide) {
-    const shouldShow = !shouldHide;
+    const shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
 
     this.$buildTrace
       .toggleClass('sidebar-expanded', shouldShow)
@@ -253,7 +259,7 @@ window.Build = (function () {
 
     this.verifyTopPosition();
 
-    if (this.$scrollContainer.getNiceScroll(0)) {
+    if (this.canScroll()) {
       this.toggleScroll();
     }
   };

app/assets/javascripts/commons/polyfills.js

 // ECMAScript polyfills
 import 'core-js/fn/array/find';
+import 'core-js/fn/array/find-index';
 import 'core-js/fn/array/from';
 import 'core-js/fn/array/includes';
 import 'core-js/fn/object/assign';

app/assets/javascripts/deploy_keys/components/app.vue

@@ -80,21 +80,27 @@
       v-if="isLoading && !hasKeys"
       size="2"
       label="Loading deploy keys"
-      />
+    />
     <div v-else-if="hasKeys">
       <keys-panel
         title="Enabled deploy keys for this project"
         :keys="keys.enabled_keys"
-        :store="store" />
+        :store="store"
+        :endpoint="endpoint"
+      />
       <keys-panel
         title="Deploy keys from projects you have access to"
         :keys="keys.available_project_keys"
-        :store="store" />
+        :store="store"
+        :endpoint="endpoint"
+      />
       <keys-panel
         v-if="keys.public_keys.length"
         title="Public deploy keys available to any project"
         :keys="keys.public_keys"
-        :store="store" />
+        :store="store"
+        :endpoint="endpoint"
+      />
     </div>
   </div>
 </template>

app/assets/javascripts/deploy_keys/components/key.vue

@@ -11,6 +11,10 @@
         type: Object,
         required: true,
       },
+      endpoint: {
+        type: String,
+        required: true,
+      },
     },
     components: {
       actionBtn,
@@ -19,6 +23,9 @@
       timeagoDate() {
         return gl.utils.getTimeago().format(this.deployKey.created_at);
       },
+      editDeployKeyPath() {
+        return `${this.endpoint}/${this.deployKey.id}/edit`;
+      },
     },
     methods: {
       isEnabled(id) {
@@ -33,7 +40,8 @@
     <div class="pull-left append-right-10 hidden-xs">
       <i
         aria-hidden="true"
-        class="fa fa-key key-icon">
+        class="fa fa-key key-icon"
+      >
       </i>
     </div>
     <div class="deploy-key-content key-list-item-info">
@@ -45,7 +53,8 @@
       </div>
       <div
         v-if="deployKey.can_push"
-        class="write-access-allowed">
+        class="write-access-allowed"
+      >
         Write access allowed
       </div>
     </div>
@@ -53,7 +62,8 @@
       <a
         v-for="project in deployKey.projects"
         class="label deploy-project-label"
-        :href="project.full_path">
+        :href="project.full_path"
+      >
         {{ project.full_name }}
       </a>
     </div>
@@ -61,20 +71,30 @@
       <span class="key-created-at">
         created {{ timeagoDate }}
       </span>
+      <a
+        v-if="deployKey.can_edit"
+        class="btn btn-small"
+        :href="editDeployKeyPath"
+      >
+        Edit
+      </a>
       <action-btn
         v-if="!isEnabled(deployKey.id)"
         :deploy-key="deployKey"
-        type="enable"/>
+        type="enable"
+      />
       <action-btn
         v-else-if="deployKey.destroyed_when_orphaned && deployKey.almost_orphaned"
         :deploy-key="deployKey"
         btn-css-class="btn-warning"
-        type="remove" />
+        type="remove"
+      />
       <action-btn
         v-else
         :deploy-key="deployKey"
         btn-css-class="btn-warning"
-        type="disable" />
+        type="disable"
+      />
     </div>
   </div>
 </template>

app/assets/javascripts/deploy_keys/components/keys_panel.vue

@@ -20,6 +20,10 @@
         type: Object,
         required: true,
       },
+      endpoint: {
+        type: String,
+        required: true,
+      },
     },
     components: {
       key,
@@ -34,18 +38,22 @@
       ({{ keys.length }})
     </h5>
     <ul class="well-list"
-      v-if="keys.length">
+      v-if="keys.length"
+    >
       <li
         v-for="deployKey in keys"
         :key="deployKey.id">
         <key
           :deploy-key="deployKey"
-          :store="store" />
+          :store="store"
+          :endpoint="endpoint"
+        />
       </li>
     </ul>
     <div
       class="settings-message text-center"
-      v-else-if="showHelpBox">
+      v-else-if="showHelpBox"
+    >
       No deploy keys found. Create one with the form above.
     </div>
   </div>

app/assets/javascripts/dispatcher.js

@@ -167,9 +167,6 @@ import AuditLogs from './audit_logs';
         case 'admin:projects:index':
           new ProjectsList();
           break;
-        case 'dashboard:groups:index':
-          new GroupsList();
-          break;
         case 'explore:groups:index':
           new GroupsList();
 
@@ -343,25 +340,14 @@ import AuditLogs from './audit_logs';
           shortcut_handler = new ShortcutsNavigation();
           new TreeView();
           new BlobViewer();
-          gl.TargetBranchDropDown.bootstrap();
           break;
         case 'projects:find_file:show':
           shortcut_handler = true;
           break;
-        case 'projects:blob:new':
-          gl.TargetBranchDropDown.bootstrap();
-          break;
-        case 'projects:blob:create':
-          gl.TargetBranchDropDown.bootstrap();
-          break;
         case 'projects:blob:show':
           new BlobViewer();
-          gl.TargetBranchDropDown.bootstrap();
           initBlob();
           break;
-        case 'projects:blob:edit':
-          gl.TargetBranchDropDown.bootstrap();
-          break;
         case 'projects:blame:show':
           initBlob();
           break;
@@ -385,9 +371,11 @@ import AuditLogs from './audit_logs';
           new ProjectFork();
           break;
         case 'projects:artifacts:browse':
+          new ShortcutsNavigation();
           new BuildArtifacts();
           break;
         case 'projects:artifacts:file':
+          new ShortcutsNavigation();
           new BlobViewer();
           break;
         case 'help:index':

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

@@ -252,7 +252,7 @@ export default {
       </div>
     </div>
 
-    <div class="content-list environments-container">
+    <div class="environments-container">
       <loading-icon
         label="Loading environments"
         size="3"

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

@@ -69,7 +69,7 @@ export default {
       </span>
     </button>
 
-    <ul class="dropdown-menu">
+    <ul class="dropdown-menu dropdown-menu-align-right">
       <li v-for="action in actions">
         <button
           type="button"

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

@@ -423,11 +423,13 @@ export default {
 </script>
 <template>
   <div
-    :class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, 'gl-responsive-table-row': !model.isFolder }">
+    :class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, 'gl-responsive-table-row': !model.isFolder }"
+    role="row">
     <div class="table-section section-10" role="gridcell">
       <div
         v-if="!model.isFolder"
-        class="table-mobile-header">
+        class="table-mobile-header"
+        role="rowheader">
         Environment
       </div>
       <span
@@ -513,6 +515,7 @@ export default {
     <div class="table-section section-25" role="gridcell">
       <div
         v-if="!model.isFolder"
+        role="rowheader"
         class="table-mobile-header">
         Commit
       </div>
@@ -529,7 +532,7 @@ export default {
       </div>
       <div
         v-if="!model.isFolder && !hasLastDeploymentKey"
-        class="commit-title">
+        class="commit-title table-mobile-content">
         No deployments yet
       </div>
     </div>
@@ -537,6 +540,7 @@ export default {
     <div class="table-section section-10" role="gridcell">
       <div
         v-if="!model.isFolder"
+        role="rowheader"
         class="table-mobile-header">
         Updated
       </div>

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

@@ -66,19 +66,19 @@ export default {
 <template>
   <div class="ci-table" role="grid">
     <div class="gl-responsive-table-row table-row-header" role="row">
-      <div class="table-section section-10 environments-name" role="rowheader">
+      <div class="table-section section-10 environments-name" role="columnheader">
         Environment
       </div>
-      <div class="table-section section-10 environments-deploy" role="rowheader">
+      <div class="table-section section-10 environments-deploy" role="columnheader">
         Deployment
       </div>
-      <div class="table-section section-15 environments-build" role="rowheader">
+      <div class="table-section section-15 environments-build" role="columnheader">
         Job
       </div>
-      <div class="table-section section-25 environments-commit" role="rowheader">
+      <div class="table-section section-25 environments-commit" role="columnheader">
         Commit
       </div>
-      <div class="table-section section-10 environments-date" role="rowheader">
+      <div class="table-section section-10 environments-date" role="columnheader">
         Updated
       </div>
     </div>

app/assets/javascripts/filterable_list.js

@@ -8,39 +8,87 @@ export default class FilterableList {
     this.filterForm = form;
     this.listFilterElement = filter;
     this.listHolderElement = holder;
+    this.isBusy = false;
+  }
+
+  getFilterEndpoint() {
+    return `${this.filterForm.getAttribute('action')}?${$(this.filterForm).serialize()}`;
+  }
+
+  getPagePath() {
+    return this.getFilterEndpoint();
   }
 
   initSearch() {
-    this.debounceFilter = _.debounce(this.filterResults.bind(this), 500);
+    // Wrap to prevent passing event arguments to .filterResults;
+    this.debounceFilter = _.debounce(this.onFilterInput.bind(this), 500);
 
-    this.listFilterElement.removeEventListener('input', this.debounceFilter);
+    this.unbindEvents();
+    this.bindEvents();
+  }
+
+  onFilterInput() {
+    const $form = $(this.filterForm);
+    const queryData = {};
+    const filterGroupsParam = $form.find('[name="filter_groups"]').val();
+
+    if (filterGroupsParam) {
+      queryData.filter_groups = filterGroupsParam;
+    }
+
+    this.filterResults(queryData);
+
+    if (this.setDefaultFilterOption) {
+      this.setDefaultFilterOption();
+    }
+  }
+
+  bindEvents() {
     this.listFilterElement.addEventListener('input', this.debounceFilter);
   }
 
-  filterResults() {
-    const form = this.filterForm;
-    const filterUrl = `${form.getAttribute('action')}?${$(form).serialize()}`;
+  unbindEvents() {
+    this.listFilterElement.removeEventListener('input', this.debounceFilter);
+  }
+
+  filterResults(queryData) {
+    if (this.isBusy) {
+      return false;
+    }
 
     $(this.listHolderElement).fadeTo(250, 0.5);
 
     return $.ajax({
-      url: form.getAttribute('action'),
-      data: $(form).serialize(),
+      url: this.getFilterEndpoint(),
+      data: queryData,
       type: 'GET',
       dataType: 'json',
       context: this,
-      complete() {
-        $(this.listHolderElement).fadeTo(250, 1);
+      complete: this.onFilterComplete,
+      beforeSend: () => {
+        this.isBusy = true;
       },
-      success(data) {
-        this.listHolderElement.innerHTML = data.html;
-
-       // Change url so if user reload a page - search results are saved
-        return window.history.replaceState({
-          page: filterUrl,
-
-        }, document.title, filterUrl);
+      success: (response, textStatus, xhr) => {
+        this.onFilterSuccess(response, xhr, queryData);
       },
     });
   }
+
+  onFilterSuccess(response, xhr, queryData) {
+    if (response.html) {
+      this.listHolderElement.innerHTML = response.html;
+    }
+
+    // Change url so if user reload a page - search results are saved
+    const currentPath = this.getPagePath(queryData);
+
+    return window.history.replaceState({
+      page: currentPath,
+    }, document.title, currentPath);
+  }
+
+  onFilterComplete() {
+    this.isBusy = false;
+    $(this.listHolderElement).fadeTo(250, 1);
+  }
 }

app/assets/javascripts/filtered_search/filtered_search_manager.js

@@ -81,6 +81,41 @@ class FilteredSearchManager {
     }
   }
 
+  bindStateEvents() {
+    this.stateFilters = document.querySelector('.container-fluid .issues-state-filters');
+
+    if (this.stateFilters) {
+      this.searchStateWrapper = this.searchState.bind(this);
+
+      this.stateFilters.querySelector('[data-state="opened"]')
+        .addEventListener('click', this.searchStateWrapper);
+      this.stateFilters.querySelector('[data-state="closed"]')
+        .addEventListener('click', this.searchStateWrapper);
+      this.stateFilters.querySelector('[data-state="all"]')
+        .addEventListener('click', this.searchStateWrapper);
+
+      this.mergedState = this.stateFilters.querySelector('[data-state="merged"]');
+      if (this.mergedState) {
+        this.mergedState.addEventListener('click', this.searchStateWrapper);
+      }
+    }
+  }
+
+  unbindStateEvents() {
+    if (this.stateFilters) {
+      this.stateFilters.querySelector('[data-state="opened"]')
+        .removeEventListener('click', this.searchStateWrapper);
+      this.stateFilters.querySelector('[data-state="closed"]')
+        .removeEventListener('click', this.searchStateWrapper);
+      this.stateFilters.querySelector('[data-state="all"]')
+        .removeEventListener('click', this.searchStateWrapper);
+
+      if (this.mergedState) {
+        this.mergedState.removeEventListener('click', this.searchStateWrapper);
+      }
+    }
+  }
+
   bindEvents() {
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
     this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);
@@ -116,6 +151,8 @@ class FilteredSearchManager {
     document.addEventListener('click', this.removeInputContainerFocusWrapper);
     document.addEventListener('keydown', this.removeSelectedTokenKeydownWrapper);
     eventHub.$on('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
+
+    this.bindStateEvents();
   }
 
   unbindEvents() {
@@ -136,6 +173,8 @@ class FilteredSearchManager {
     document.removeEventListener('click', this.removeInputContainerFocusWrapper);
     document.removeEventListener('keydown', this.removeSelectedTokenKeydownWrapper);
     eventHub.$off('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
+
+    this.unbindStateEvents();
   }
 
   checkForBackspace(e) {
@@ -451,7 +490,19 @@ class FilteredSearchManager {
     }
   }
 
-  search() {
+  searchState(e) {
+    const target = e.currentTarget;
+    // remove focus outline after click
+    target.blur();
+
+    const state = target.dataset && target.dataset.state;
+
+    if (state) {
+      this.search(state);
+    }
+  }
+
+  search(state = null) {
     const paths = [];
     const searchQuery = gl.DropdownUtils.getSearchQuery();
 
@@ -459,7 +510,7 @@ class FilteredSearchManager {
 
     const { tokens, searchToken }
       = this.tokenizer.processTokens(searchQuery, this.filteredSearchTokenKeys.getKeys());
-    const currentState = gl.utils.getParameterByName('state') || 'opened';
+    const currentState = state || gl.utils.getParameterByName('state') || 'opened';
     paths.push(`state=${currentState}`);
 
     tokens.forEach((token) => {

app/assets/javascripts/gl_dropdown.js

@@ -248,7 +248,7 @@ GitLabDropdown = (function() {
             return function(data) {
               _this.fullData = data;
               _this.parseData(_this.fullData);
-              _this.focusTextInput();
+              _this.focusTextInput(true);
               if (_this.options.filterable && _this.filter && _this.filter.input && _this.filter.input.val() && _this.filter.input.val().trim() !== '') {
                 return _this.filter.input.trigger('input');
               }
@@ -743,8 +743,20 @@ GitLabDropdown = (function() {
     return [selectedObject, isMarking];
   };
 
-  GitLabDropdown.prototype.focusTextInput = function() {
-    if (this.options.filterable) { this.filterInput.focus(); }
+  GitLabDropdown.prototype.focusTextInput = function(triggerFocus = false) {
+    if (this.options.filterable) {
+      $(':focus').blur();
+
+      this.dropdown.one('transitionend', () => {
+        this.filterInput.focus();
+      });
+
+      if (triggerFocus) {
+        // This triggers after a ajax request
+        // in case of slow requests, the dropdown transition could already be finished
+        this.dropdown.trigger('transitionend');
+      }
+    }
   };
 
   GitLabDropdown.prototype.addInput = function(fieldName, value, selectedObject) {

app/assets/javascripts/groups/components/group_folder.vue

+<script>
+export default {
+  props: {
+    groups: {
+      type: Object,
+      required: true,
+    },
+    baseGroup: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+};
+</script>
+
+<template>
+  <ul class="content-list group-list-tree">
+    <group-item
+      v-for="(group, index) in groups"
+      :key="index"
+      :group="group"
+      :base-group="baseGroup"
+      :collection="groups"
+    />
+  </ul>
+</template>

app/assets/javascripts/groups/components/group_item.vue

+<script>
+import eventHub from '../event_hub';
+
+export default {
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    },
+    baseGroup: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    collection: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  methods: {
+    onClickRowGroup(e) {
+      e.stopPropagation();
+
+      // Skip for buttons
+      if (!(e.target.tagName === 'A') && !(e.target.tagName === 'I' && e.target.parentElement.tagName === 'A')) {
+        if (this.group.hasSubgroups) {
+          eventHub.$emit('toggleSubGroups', this.group);
+        } else {
+          window.location.href = this.group.webUrl;
+        }
+      }
+    },
+    onLeaveGroup(e) {
+      e.preventDefault();
+
+      // eslint-disable-next-line no-alert
+      if (confirm(`Are you sure you want to leave the "${this.group.fullName}" group?`)) {
+        this.leaveGroup();
+      }
+    },
+    leaveGroup() {
+      eventHub.$emit('leaveGroup', this.group, this.collection);
+    },
+  },
+  computed: {
+    groupDomId() {
+      return `group-${this.group.id}`;
+    },
+    rowClass() {
+      return {
+        'group-row': true,
+        'is-open': this.group.isOpen,
+        'has-subgroups': this.group.hasSubgroups,
+        'no-description': !this.group.description,
+      };
+    },
+    visibilityIcon() {
+      return {
+        fa: true,
+        'fa-globe': this.group.visibility === 'public',
+        'fa-shield': this.group.visibility === 'internal',
+        'fa-lock': this.group.visibility === 'private',
+      };
+    },
+    fullPath() {
+      let fullPath = '';
+
+      if (this.group.isOrphan) {
+        // check if current group is baseGroup
+        if (Object.keys(this.baseGroup).length > 0 && this.baseGroup !== this.group) {
+          // Remove baseGroup prefix from our current group.fullName. e.g:
+          // baseGroup.fullName: `level1`
+          // group.fullName: `level1 / level2 / level3`
+          // Result: `level2 / level3`
+          const gfn = this.group.fullName;
+          const bfn = this.baseGroup.fullName;
+          const length = bfn.length;
+          const start = gfn.indexOf(bfn);
+          const extraPrefixChars = 3;
+
+          fullPath = gfn.substr(start + length + extraPrefixChars);
+        } else {
+          fullPath = this.group.fullName;
+        }
+      } else {
+        fullPath = this.group.name;
+      }
+
+      return fullPath;
+    },
+    hasGroups() {
+      return Object.keys(this.group.subGroups).length > 0;
+    },
+  },
+};
+</script>
+
+<template>
+  <li
+    @click.stop="onClickRowGroup"
+    :id="groupDomId"
+    :class="rowClass"
+    >
+    <div
+      class="group-row-contents">
+      <div
+        class="controls">
+        <a
+          v-if="group.canEdit"
+          class="edit-group btn"
+          :href="group.editPath">
+          <i
+            class="fa fa-cogs"
+            aria-hidden="true"
+          >
+          </i>
+        </a>
+        <a
+          @click="onLeaveGroup"
+          :href="group.leavePath"
+          class="leave-group btn"
+          title="Leave this group">
+          <i
+            class="fa fa-sign-out"
+            aria-hidden="true"
+          >
+          </i>
+        </a>
+      </div>
+      <div
+        class="stats">
+        <span
+          class="number-projects">
+          <i
+            class="fa fa-bookmark"
+            aria-hidden="true"
+          >
+          </i>
+          {{group.numberProjects}}
+        </span>
+        <span
+          class="number-users">
+          <i
+            class="fa fa-users"
+            aria-hidden="true"
+          >
+          </i>
+          {{group.numberUsers}}
+        </span>
+        <span
+          class="group-visibility">
+          <i
+            :class="visibilityIcon"
+            aria-hidden="true"
+          >
+          </i>
+        </span>
+      </div>
+      <div
+        class="folder-toggle-wrap">
+        <span
+          class="folder-caret"
+          v-if="group.hasSubgroups">
+          <i
+            v-if="group.isOpen"
+            class="fa fa-caret-down"
+            aria-hidden="true"
+          >
+          </i>
+          <i
+            v-if="!group.isOpen"
+            class="fa fa-caret-right"
+            aria-hidden="true"
+          >
+          </i>
+        </span>
+        <span class="folder-icon">
+          <i
+            v-if="group.isOpen"
+            class="fa fa-folder-open"
+            aria-hidden="true"
+          >
+          </i>
+          <i
+            v-if="!group.isOpen"
+            class="fa fa-folder"
+            aria-hidden="true">
+          </i>
+        </span>
+      </div>
+      <div
+        class="avatar-container s40 hidden-xs">
+        <a
+          :href="group.webUrl">
+          <img
+            class="avatar s40"
+            :src="group.avatarUrl"
+          />
+        </a>
+      </div>
+      <div
+        class="title">
+        <a
+          :href="group.webUrl">{{fullPath}}</a>
+        <template v-if="group.permissions.humanGroupAccess">
+        as
+        <span class="access-type">{{group.permissions.humanGroupAccess}}</span>
+        </template>
+      </div>
+      <div
+        class="description">{{group.description}}</div>
+    </div>
+    <group-folder
+      v-if="group.isOpen && hasGroups"
+      :groups="group.subGroups"
+      :baseGroup="group"
+    />
+  </li>
+</template>

app/assets/javascripts/groups/components/groups.vue

+<script>
+import tablePagination from '~/vue_shared/components/table_pagination.vue';
+import eventHub from '../event_hub';
+
+export default {
+  props: {
+    groups: {
+      type: Object,
+      required: true,
+    },
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    tablePagination,
+  },
+  methods: {
+    change(page) {
+      const filterGroupsParam = gl.utils.getParameterByName('filter_groups');
+      const sortParam = gl.utils.getParameterByName('sort');
+      eventHub.$emit('fetchPage', page, filterGroupsParam, sortParam);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="groups-list-tree-container">
+    <group-folder
+      :groups="groups"
+    />
+    <table-pagination
+      :change="change"
+      :pageInfo="pageInfo"
+    />
+  </div>
+</template>

app/assets/javascripts/groups/event_hub.js

+import Vue from 'vue';
+
+export default new Vue();

app/assets/javascripts/groups/groups_filterable_list.js

+import FilterableList from '~/filterable_list';
+import eventHub from './event_hub';
+
+export default class GroupFilterableList extends FilterableList {
+  constructor({ form, filter, holder, filterEndpoint, pagePath }) {
+    super(form, filter, holder);
+    this.form = form;
+    this.filterEndpoint = filterEndpoint;
+    this.pagePath = pagePath;
+    this.$dropdown = $('.js-group-filter-dropdown-wrap');
+  }
+
+  getFilterEndpoint() {
+    return this.filterEndpoint;
+  }
+
+  getPagePath(queryData) {
+    const params = queryData ? $.param(queryData) : '';
+    const queryString = params ? `?${params}` : '';
+    return `${this.pagePath}${queryString}`;
+  }
+
+  bindEvents() {
+    super.bindEvents();
+
+    this.onFormSubmitWrapper = this.onFormSubmit.bind(this);
+    this.onFilterOptionClikWrapper = this.onOptionClick.bind(this);
+
+    this.filterForm.addEventListener('submit', this.onFormSubmitWrapper);
+    this.$dropdown.on('click', 'a', this.onFilterOptionClikWrapper);
+  }
+
+  onFormSubmit(e) {
+    e.preventDefault();
+
+    const $form = $(this.form);
+    const filterGroupsParam = $form.find('[name="filter_groups"]').val();
+    const queryData = {};
+
+    if (filterGroupsParam) {
+      queryData.filter_groups = filterGroupsParam;
+    }
+
+    this.filterResults(queryData);
+    this.setDefaultFilterOption();
+  }
+
+  setDefaultFilterOption() {
+    const defaultOption = $.trim(this.$dropdown.find('.dropdown-menu a:first-child').text());
+    this.$dropdown.find('.dropdown-label').text(defaultOption);
+  }
+
+  onOptionClick(e) {
+    e.preventDefault();
+
+    const queryData = {};
+    const sortParam = gl.utils.getParameterByName('sort', e.currentTarget.href);
+
+    if (sortParam) {
+      queryData.sort = sortParam;
+    }
+
+    this.filterResults(queryData);
+
+    // Active selected option
+    this.$dropdown.find('.dropdown-label').text($.trim(e.currentTarget.text));
+
+    // Clear current value on search form
+    this.form.querySelector('[name="filter_groups"]').value = '';
+  }
+
+  onFilterSuccess(data, xhr, queryData) {
+    super.onFilterSuccess(data, xhr, queryData);
+
+    const paginationData = {
+      'X-Per-Page': xhr.getResponseHeader('X-Per-Page'),
+      'X-Page': xhr.getResponseHeader('X-Page'),
+      'X-Total': xhr.getResponseHeader('X-Total'),
+      'X-Total-Pages': xhr.getResponseHeader('X-Total-Pages'),
+      'X-Next-Page': xhr.getResponseHeader('X-Next-Page'),
+      'X-Prev-Page': xhr.getResponseHeader('X-Prev-Page'),
+    };
+
+    eventHub.$emit('updateGroups', data);
+    eventHub.$emit('updatePagination', paginationData);
+  }
+}

app/assets/javascripts/groups/index.js

+/* global Flash */
+
+import Vue from 'vue';
+import GroupFilterableList from './groups_filterable_list';
+import GroupsComponent from './components/groups.vue';
+import GroupFolder from './components/group_folder.vue';
+import GroupItem from './components/group_item.vue';
+import GroupsStore from './stores/groups_store';
+import GroupsService from './services/groups_service';
+import eventHub from './event_hub';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const el = document.getElementById('dashboard-group-app');
+
+  // Don't do anything if element doesn't exist (No groups)
+  // This is for when the user enters directly to the page via URL
+  if (!el) {
+    return;
+  }
+
+  Vue.component('groups-component', GroupsComponent);
+  Vue.component('group-folder', GroupFolder);
+  Vue.component('group-item', GroupItem);
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    data() {
+      this.store = new GroupsStore();
+      this.service = new GroupsService(el.dataset.endpoint);
+
+      return {
+        store: this.store,
+        isLoading: true,
+        state: this.store.state,
+        loading: true,
+      };
+    },
+    computed: {
+      isEmpty() {
+        return Object.keys(this.state.groups).length === 0;
+      },
+    },
+    methods: {
+      fetchGroups(parentGroup) {
+        let parentId = null;
+        let getGroups = null;
+        let page = null;
+        let sort = null;
+        let pageParam = null;
+        let sortParam = null;
+        let filterGroups = null;
+        let filterGroupsParam = null;
+
+        if (parentGroup) {
+          parentId = parentGroup.id;
+        } else {
+          this.isLoading = true;
+        }
+
+        pageParam = gl.utils.getParameterByName('page');
+        if (pageParam) {
+          page = pageParam;
+        }
+
+        filterGroupsParam = gl.utils.getParameterByName('filter_groups');
+        if (filterGroupsParam) {
+          filterGroups = filterGroupsParam;
+        }
+
+        sortParam = gl.utils.getParameterByName('sort');
+        if (sortParam) {
+          sort = sortParam;
+        }
+
+        getGroups = this.service.getGroups(parentId, page, filterGroups, sort);
+        getGroups
+          .then(response => response.json())
+          .then((response) => {
+            this.isLoading = false;
+
+            this.updateGroups(response, parentGroup);
+          })
+          .catch(this.handleErrorResponse);
+
+        return getGroups;
+      },
+      fetchPage(page, filterGroups, sort) {
+        this.isLoading = true;
+
+        return this.service
+          .getGroups(null, page, filterGroups, sort)
+          .then((response) => {
+            this.isLoading = false;
+            $.scrollTo(0);
+
+            const currentPath = gl.utils.mergeUrlParams({ page }, window.location.href);
+            window.history.replaceState({
+              page: currentPath,
+            }, document.title, currentPath);
+
+            this.updateGroups(response.json());
+            this.updatePagination(response.headers);
+          })
+          .catch(this.handleErrorResponse);
+      },
+      toggleSubGroups(parentGroup = null) {
+        if (!parentGroup.isOpen) {
+          this.store.resetGroups(parentGroup);
+          this.fetchGroups(parentGroup);
+        }
+
+        this.store.toggleSubGroups(parentGroup);
+      },
+      leaveGroup(group, collection) {
+        this.service.leaveGroup(group.leavePath)
+          .then((response) => {
+            $.scrollTo(0);
+
+            this.store.removeGroup(group, collection);
+
+            // eslint-disable-next-line no-new
+            new Flash(response.json().notice, 'notice');
+          })
+          .catch((response) => {
+            let message = 'An error occurred. Please try again.';
+
+            if (response.status === 403) {
+              message = 'Failed to leave the group. Please make sure you are not the only owner';
+            }
+
+            // eslint-disable-next-line no-new
+            new Flash(message);
+          });
+      },
+      updateGroups(groups, parentGroup) {
+        this.store.setGroups(groups, parentGroup);
+      },
+      updatePagination(headers) {
+        this.store.storePagination(headers);
+      },
+      handleErrorResponse() {
+        this.isLoading = false;
+        $.scrollTo(0);
+
+        // eslint-disable-next-line no-new
+        new Flash('An error occurred. Please try again.');
+      },
+    },
+    created() {
+      eventHub.$on('fetchPage', this.fetchPage);
+      eventHub.$on('toggleSubGroups', this.toggleSubGroups);
+      eventHub.$on('leaveGroup', this.leaveGroup);
+      eventHub.$on('updateGroups', this.updateGroups);
+      eventHub.$on('updatePagination', this.updatePagination);
+    },
+    beforeMount() {
+      let groupFilterList = null;
+      const form = document.querySelector('form#group-filter-form');
+      const filter = document.querySelector('.js-groups-list-filter');
+      const holder = document.querySelector('.js-groups-list-holder');
+
+      const opts = {
+        form,
+        filter,
+        holder,
+        filterEndpoint: el.dataset.endpoint,
+        pagePath: el.dataset.path,
+      };
+
+      groupFilterList = new GroupFilterableList(opts);
+      groupFilterList.initSearch();
+    },
+    mounted() {
+      this.fetchGroups()
+        .then((response) => {
+          this.updatePagination(response.headers);
+          this.isLoading = false;
+        })
+        .catch(this.handleErrorResponse);
+    },
+    beforeDestroy() {
+      eventHub.$off('fetchPage', this.fetchPage);
+      eventHub.$off('toggleSubGroups', this.toggleSubGroups);
+      eventHub.$off('leaveGroup', this.leaveGroup);
+      eventHub.$off('updateGroups', this.updateGroups);
+      eventHub.$off('updatePagination', this.updatePagination);
+    },
+  });
+});

app/assets/javascripts/groups/services/groups_service.js

+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
+
+export default class GroupsService {
+  constructor(endpoint) {
+    this.groups = Vue.resource(endpoint);
+  }
+
+  getGroups(parentId, page, filterGroups, sort) {
+    const data = {};
+
+    if (parentId) {
+      data.parent_id = parentId;
+    } else {
+      // Do not send the following param for sub groups
+      if (page) {
+        data.page = page;
+      }
+
+      if (filterGroups) {
+        data.filter_groups = filterGroups;
+      }
+
+      if (sort) {
+        data.sort = sort;
+      }
+    }
+
+    return this.groups.get(data);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  leaveGroup(endpoint) {
+    return Vue.http.delete(endpoint);
+  }
+}

app/assets/javascripts/groups/stores/groups_store.js

+import Vue from 'vue';
+
+export default class GroupsStore {
+  constructor() {
+    this.state = {};
+    this.state.groups = {};
+    this.state.pageInfo = {};
+  }
+
+  setGroups(rawGroups, parent) {
+    const parentGroup = parent;
+    const tree = this.buildTree(rawGroups, parentGroup);
+
+    if (parentGroup) {
+      parentGroup.subGroups = tree;
+    } else {
+      this.state.groups = tree;
+    }
+
+    return tree;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  resetGroups(parent) {
+    const parentGroup = parent;
+    parentGroup.subGroups = {};
+  }
+
+  storePagination(pagination = {}) {
+    let paginationInfo;
+
+    if (Object.keys(pagination).length) {
+      const normalizedHeaders = gl.utils.normalizeHeaders(pagination);
+      paginationInfo = gl.utils.parseIntPagination(normalizedHeaders);
+    } else {
+      paginationInfo = pagination;
+    }
+
+    this.state.pageInfo = paginationInfo;
+  }
+
+  buildTree(rawGroups, parentGroup) {
+    const groups = this.decorateGroups(rawGroups);
+    const tree = {};
+    const mappedGroups = {};
+    const orphans = [];
+
+    // Map groups to an object
+    groups.map((group) => {
+      mappedGroups[group.id] = group;
+      mappedGroups[group.id].subGroups = {};
+      return group;
+    });
+
+    Object.keys(mappedGroups).map((key) => {
+      const currentGroup = mappedGroups[key];
+      if (currentGroup.parentId) {
+        // If the group is not at the root level, add it to its parent array of subGroups.
+        const findParentGroup = mappedGroups[currentGroup.parentId];
+        if (findParentGroup) {
+          mappedGroups[currentGroup.parentId].subGroups[currentGroup.id] = currentGroup;
+          mappedGroups[currentGroup.parentId].isOpen = true; // Expand group if it has subgroups
+        } else if (parentGroup && parentGroup.id === currentGroup.parentId) {
+          tree[currentGroup.id] = currentGroup;
+        } else {
+          // Means the groups hast no direct parent.
+          // Save for later processing, we will add them to its corresponding base group
+          orphans.push(currentGroup);
+        }
+      } else {
+        // If the group is at the root level, add it to first level elements array.
+        tree[currentGroup.id] = currentGroup;
+      }
+
+      return key;
+    });
+
+    // Hopefully this array will be empty for most cases
+    if (orphans.length) {
+      orphans.map((orphan) => {
+        let found = false;
+        const currentOrphan = orphan;
+
+        Object.keys(tree).map((key) => {
+          const group = tree[key];
+          if (currentOrphan.fullPath.lastIndexOf(group.fullPath) === 0) {
+            group.subGroups[currentOrphan.id] = currentOrphan;
+            group.isOpen = true;
+            currentOrphan.isOrphan = true;
+            found = true;
+          }
+
+          return key;
+        });
+
+        if (!found) {
+          currentOrphan.isOrphan = true;
+          tree[currentOrphan.id] = currentOrphan;
+        }
+
+        return orphan;
+      });
+    }
+
+    return tree;
+  }
+
+  decorateGroups(rawGroups) {
+    this.groups = rawGroups.map(this.decorateGroup);
+    return this.groups;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  decorateGroup(rawGroup) {
+    return {
+      id: rawGroup.id,
+      fullName: rawGroup.full_name,
+      fullPath: rawGroup.full_path,
+      avatarUrl: rawGroup.avatar_url,
+      name: rawGroup.name,
+      hasSubgroups: rawGroup.has_subgroups,
+      canEdit: rawGroup.can_edit,
+      description: rawGroup.description,
+      webUrl: rawGroup.web_url,
+      parentId: rawGroup.parent_id,
+      visibility: rawGroup.visibility,
+      leavePath: rawGroup.leave_path,
+      editPath: rawGroup.edit_path,
+      isOpen: false,
+      isOrphan: false,
+      numberProjects: rawGroup.number_projects_with_delimiter,
+      numberUsers: rawGroup.number_users_with_delimiter,
+      permissions: {
+        humanGroupAccess: rawGroup.permissions.human_group_access,
+      },
+      subGroups: {},
+    };
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  removeGroup(group, collection) {
+    Vue.delete(collection, group.id);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  toggleSubGroups(toggleGroup) {
+    const group = toggleGroup;
+    group.isOpen = !group.isOpen;
+    return group;
+  }
+}

app/assets/javascripts/issuable/issuable_bundle.js

+import Vue from 'vue';
+import RelatedIssuesRoot from './related_issues/components/related_issues_root.vue';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const relatedIssuesRootElement = document.querySelector('.js-related-issues-root');
+  if (relatedIssuesRootElement) {
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: relatedIssuesRootElement,
+      components: {
+        relatedIssuesRoot: RelatedIssuesRoot,
+      },
+      render: createElement => createElement('related-issues-root', {
+        props: {
+          endpoint: relatedIssuesRootElement.dataset.endpoint,
+          canAddRelatedIssues: gl.utils.convertPermissionToBoolean(
+            relatedIssuesRootElement.dataset.canAddRelatedIssues,
+          ),
+          helpPath: relatedIssuesRootElement.dataset.helpPath,
+        },
+      }),
+    });
+  }
+});

app/assets/javascripts/issuable/related_issues/components/add_issuable_form.vue

+<script>
+import GfmAutoComplete from '~/gfm_auto_complete';
+import eventHub from '../event_hub';
+import IssueToken from './issue_token.vue';
+
+export default {
+  name: 'AddIssuableForm',
+
+  props: {
+    inputValue: {
+      type: String,
+      required: true,
+    },
+    addButtonLabel: {
+      type: String,
+      required: true,
+    },
+    pendingReferences: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    autoCompleteSources: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    isSubmitting: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      isInputFocused: false,
+      isAutoCompleteOpen: false,
+    };
+  },
+
+  components: {
+    issueToken: IssueToken,
+  },
+
+  computed: {
+    isSubmitButtonDisabled() {
+      return this.pendingReferences.length === 0 || this.isSubmitting;
+    },
+  },
+
+  methods: {
+    onInput() {
+      const value = this.$refs.input.value;
+      eventHub.$emit('addIssuableFormInput', value, $(this.$refs.input).caret('pos'));
+    },
+    onFocus() {
+      this.isInputFocused = true;
+    },
+    onBlur() {
+      this.isInputFocused = false;
+
+      // Avoid tokenizing partial input when clicking an autocomplete item
+      if (!this.isAutoCompleteOpen) {
+        const value = this.$refs.input.value;
+        eventHub.$emit('addIssuableFormBlur', value);
+      }
+    },
+    onAutoCompleteToggled(isOpen) {
+      this.isAutoCompleteOpen = isOpen;
+    },
+    onInputWrapperClick() {
+      this.$refs.input.focus();
+    },
+    onFormSubmit() {
+      eventHub.$emit('addIssuableFormSubmit');
+    },
+    onFormCancel() {
+      eventHub.$emit('addIssuableFormCancel');
+    },
+  },
+
+  mounted() {
+    const $input = $(this.$refs.input);
+    new GfmAutoComplete(this.autoCompleteSources).setup($input, {
+      issues: true,
+    });
+    $input.on('shown-issues.atwho', this.onAutoCompleteToggled.bind(this, true));
+    $input.on('hidden-issues.atwho', this.onAutoCompleteToggled.bind(this, false));
+    $input.on('inserted-issues.atwho', this.onInput);
+  },
+
+  beforeDestroy() {
+    const $input = $(this.$refs.input);
+    $input.off('shown-issues.atwho');
+    $input.off('hidden-issues.atwho');
+    $input.off('inserted-issues.atwho', this.onInput);
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      ref="issuableFormWrapper"
+      class="add-issuable-form-input-wrapper form-control"
+      :class="{ focus: isInputFocused }"
+      role="button"
+      @click="onInputWrapperClick">
+      <ul class="add-issuable-form-input-token-list">
+        <li
+          :key="reference"
+          v-for="(reference, index) in pendingReferences"
+          class="js-add-issuable-form-token-list-item add-issuable-form-token-list-item">
+          <issue-token
+            event-namespace="pendingIssuable"
+            :id-key="index"
+            :display-reference="reference"
+            :can-remove="true" />
+        </li>
+        <li class="add-issuable-form-input-list-item">
+          <input
+            ref="input"
+            type="text"
+            class="js-add-issuable-form-input add-issuable-form-input"
+            :value="inputValue"
+            placeholder="Search issues..."
+            @input="onInput"
+            @focus="onFocus"
+            @blur="onBlur" />
+        </li>
+      </ul>
+    </div>
+    <div class="add-issuable-form-actions clearfix">
+      <button
+        ref="addButton"
+        type="button"
+        class="js-add-issuable-form-add-button btn btn-new pull-left"
+        @click="onFormSubmit"
+        :disabled="isSubmitButtonDisabled">
+        {{ addButtonLabel }}
+      </button>
+      <button
+        type="button"
+        class="btn btn-default pull-right"
+        @click="onFormCancel">
+        Cancel
+      </button>
+    </div>
+  </div>
+</template>

app/assets/javascripts/issuable/related_issues/components/issue_token.vue

+<script>
+import eventHub from '../event_hub';
+
+export default {
+  name: 'IssueToken',
+
+  props: {
+    idKey: {
+      type: Number,
+      required: true,
+    },
+    displayReference: {
+      type: String,
+      required: true,
+    },
+    eventNamespace: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    path: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    state: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    canRemove: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  computed: {
+    removeButtonLabel() {
+      return `Remove related issue ${this.displayReference}`;
+    },
+    hasState() {
+      return this.state && this.state.length > 0;
+    },
+    isOpen() {
+      return this.state === 'opened' || this.state === 'reopened';
+    },
+    isClosed() {
+      return this.state === 'closed';
+    },
+    hasTitle() {
+      return this.title.length > 0;
+    },
+    computedLinkElementType() {
+      return this.path.length > 0 ? 'a' : 'span';
+    },
+    computedPath() {
+      return this.path.length ? this.path : null;
+    },
+  },
+
+  methods: {
+    onRemoveRequest() {
+      let namespacePrefix = '';
+      if (this.eventNamespace && this.eventNamespace.length > 0) {
+        namespacePrefix = `${this.eventNamespace}-`;
+      }
+
+      eventHub.$emit(`${namespacePrefix}removeRequest`, this.idKey);
+    },
+  },
+  updated() {
+    const link = this.$refs.link;
+    const removeButton = this.$refs.removeButton;
+
+    if (link) {
+      $(link).tooltip('fixTitle');
+    }
+
+    if (removeButton) {
+      $(removeButton).tooltip('fixTitle');
+    }
+  },
+};
+</script>
+
+<template>
+  <div class="issue-token">
+    <component
+      :is="this.computedLinkElementType"
+      ref="link"
+      class="issue-token-link"
+      :href="computedPath"
+      :title="title"
+      data-toggle="tooltip"
+      data-placement="top">
+      <span
+        ref="reference"
+        class="issue-token-reference">
+        <i
+          ref="stateIcon"
+          v-if="hasState"
+          class="fa"
+          :class="{
+            'issue-token-state-icon-open fa-circle-o': isOpen,
+            'issue-token-state-icon-closed fa-minus': isClosed,
+          }"
+          :aria-label="state">
+        </i>
+        {{ displayReference }}
+      </span>
+      <span
+        v-if="hasTitle"
+        ref="title"
+        class="js-issue-token-title issue-token-title"
+        :class="{ 'issue-token-title-standalone': !canRemove }">
+        <span class="issue-token-title-text">
+          {{ title }}
+        </span>
+      </span>
+    </component>
+    <button
+      ref="removeButton"
+      v-if="canRemove"
+      type="button"
+      class="js-issue-token-remove-button issue-token-remove-button"
+      :title="removeButtonLabel"
+      data-toggle="tooltip"
+      @click="onRemoveRequest">
+      <i
+        class="fa fa-times"
+        aria-hidden="true">
+      </i>
+    </button>
+  </div>
+</template>

app/assets/javascripts/issuable/related_issues/components/related_issues_block.vue

+<script>
+import eventHub from '../event_hub';
+import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
+import issueToken from './issue_token.vue';
+import addIssuableForm from './add_issuable_form.vue';
+
+export default {
+  name: 'RelatedIssuesBlock',
+
+  props: {
+    isFetching: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isSubmitting: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    relatedIssues: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    canAddRelatedIssues: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isFormVisible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    pendingReferences: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    inputValue: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    helpPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    autoCompleteSources: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+
+  components: {
+    loadingIcon,
+    addIssuableForm,
+    issueToken,
+  },
+
+  computed: {
+    hasRelatedIssues() {
+      return this.relatedIssues.length > 0;
+    },
+    relatedIssueCount() {
+      return this.relatedIssues.length;
+    },
+    hasHelpPath() {
+      return this.helpPath.length > 0;
+    },
+  },
+
+  methods: {
+    toggleAddRelatedIssuesForm() {
+      eventHub.$emit('toggleAddRelatedIssuesForm');
+    },
+  },
+
+  updated() {
+    const addIssueButton = this.$refs.issueCountBadgeAddButton;
+    if (addIssueButton) {
+      $(addIssueButton).tooltip('fixTitle');
+    }
+  },
+};
+</script>
+
+<template>
+  <div class="related-issues-block">
+    <div
+      class="panel-slim panel-default">
+      <div
+        class="panel-heading"
+        :class="{ 'panel-empty-heading': !this.hasRelatedIssues }">
+        <h3 class="panel-title related-issues-panel-title">
+          <div>
+            Related issues
+            <a
+              v-if="hasHelpPath"
+              :href="helpPath">
+              <i
+                class="related-issues-header-help-icon fa fa-question-circle"
+                aria-label="Read more about related issues">
+              </i>
+            </a>
+            <div class="js-related-issues-header-issue-count related-issues-header-issue-count issue-count-badge">
+              <span
+                class="issue-count-badge-count"
+                :class="{ 'has-btn': this.canAddRelatedIssues }">
+                {{ relatedIssueCount }}
+              </span>
+              <button
+                ref="issueCountBadgeAddButton"
+                v-if="canAddRelatedIssues"
+                type="button"
+                class="js-issue-count-badge-add-button issue-count-badge-add-button btn btn-small btn-default"
+                title="Add an issue"
+                aria-label="Add an issue"
+                data-toggle="tooltip"
+                data-placement="top"
+                @click="toggleAddRelatedIssuesForm">
+                <i
+                  class="fa fa-plus"
+                  aria-hidden="true">
+                </i>
+              </button>
+            </div>
+          </div>
+          <div>
+            <loadingIcon
+              ref="loadingIcon"
+              v-if="isFetching"
+              label="Fetching related issues" />
+          </div>
+        </h3>
+      </div>
+      <div
+        v-if="isFormVisible"
+        class="js-add-related-issues-form-area panel-body"
+        :class="{
+          'related-issues-add-related-issues-form-with-break': hasRelatedIssues
+        }">
+        <add-issuable-form
+          :is-submitting="isSubmitting"
+          :input-value="inputValue"
+          :pending-references="pendingReferences"
+          add-button-label="Add related issues"
+          :auto-complete-sources="autoCompleteSources" />
+      </div>
+      <div
+        v-if="hasRelatedIssues"
+        class="related-issues-token-body panel-body">
+        <ul
+          class="related-issues-token-list">
+          <li
+            :key="issue.id"
+            v-for="issue in relatedIssues"
+            class="js-related-issues-token-list-item related-issues-token-list-item">
+            <issue-token
+              event-namespace="relatedIssue"
+              :id-key="issue.id"
+              :display-reference="issue.reference"
+              :title="issue.title"
+              :path="issue.path"
+              :state="issue.state"
+              :can-remove="true" />
+          </li>
+        </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/assets/javascripts/issuable/related_issues/components/related_issues_root.vue

+<script>
+/* global Flash */
+
+/*
+`rawReferences` are separated by spaces.
+Given `abc 123 zxc`, `rawReferences = ['abc', '123', 'zxc']`
+
+Consider you are typing `abc 123 zxc` in the input and your caret position is
+at position 4 right before the `123` `rawReference`. Then you type `#` and
+it becomes a valid reference, `#123`, but we don't want to jump it straight into
+`pendingReferences` because you could still want to type. Say you typed `999`
+and now we have `#999123`. Only when you move your caret away from that `rawReference`
+do we actually put it in the `pendingReferences`.
+
+Your caret can stop touching a `rawReference` can happen in a variety of ways:
+
+ - As you type, we only tokenize after you type a space or move with the arrow keys
+ - On blur, we consider your caret not touching anything
+
+---
+
+ - When you click the "Add related issues"(in the `AddIssuableForm`),
+   we submit the `pendingReferences` to the server and they come back as actual `relatedIssues`
+ - When you click the "Cancel"(in the `AddIssuableForm`), we clear out `pendingReferences`
+   and hide the `AddIssuableForm` area.
+
+*/
+
+import eventHub from '../event_hub';
+import RelatedIssuesBlock from './related_issues_block.vue';
+import RelatedIssuesStore from '../stores/related_issues_store';
+import RelatedIssuesService from '../services/related_issues_service';
+
+const SPACE_FACTOR = 1;
+
+export default {
+  name: 'RelatedIssuesRoot',
+
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
+    },
+    canAddRelatedIssues: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    helpPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  data() {
+    this.store = new RelatedIssuesStore();
+
+    return {
+      state: this.store.state,
+      isFetching: false,
+      isSubmitting: false,
+      isFormVisible: false,
+      inputValue: '',
+    };
+  },
+
+  components: {
+    relatedIssuesBlock: RelatedIssuesBlock,
+  },
+
+  computed: {
+    autoCompleteSources() {
+      return gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources;
+    },
+  },
+
+  methods: {
+    onRelatedIssueRemoveRequest(idToRemove) {
+      const issueToRemove = _.find(this.state.relatedIssues, issue => issue.id === idToRemove);
+
+      if (issueToRemove) {
+        this.service.removeRelatedIssue(issueToRemove.destroy_relation_path)
+          .then(res => res.json())
+          .then((data) => {
+            this.store.setRelatedIssues(data.issues);
+          })
+          .catch((res) => {
+            if (res && res.status !== 404) {
+              // eslint-disable-next-line no-new
+              new Flash('An error occurred while removing related issues.');
+            }
+          });
+      } else {
+        // eslint-disable-next-line no-new
+        new Flash('We could not determine the path to remove the related issue');
+      }
+    },
+    onToggleAddRelatedIssuesForm() {
+      this.isFormVisible = !this.isFormVisible;
+    },
+    onPendingIssueRemoveRequest(indexToRemove) {
+      this.store.removePendingRelatedIssue(indexToRemove);
+    },
+    onPendingFormSubmit() {
+      if (this.state.pendingReferences.length > 0) {
+        this.isSubmitting = true;
+        this.service.addRelatedIssues(this.state.pendingReferences)
+          .then(res => res.json())
+          .then((data) => {
+            // We could potentially lose some pending issues in the interim here
+            this.store.setPendingReferences([]);
+            this.store.setRelatedIssues(data.issues);
+
+            this.isSubmitting = false;
+            // Close the form on submission
+            this.isFormVisible = false;
+          })
+          .catch((res) => {
+            this.isSubmitting = false;
+            // eslint-disable-next-line no-new
+            new Flash(res.data.message || 'An error occurred while submitting related issues.');
+          });
+      }
+    },
+    onPendingFormCancel() {
+      this.isFormVisible = false;
+      this.store.setPendingReferences([]);
+      this.inputValue = '';
+    },
+    fetchRelatedIssues() {
+      this.isFetching = true;
+      this.service.fetchRelatedIssues()
+        .then(res => res.json())
+        .then((issues) => {
+          this.store.setRelatedIssues(issues);
+          this.isFetching = false;
+        })
+        .catch(() => new Flash('An error occurred while fetching related issues.'));
+    },
+
+    onInput(newValue, caretPos) {
+      const rawReferences = newValue
+        .split(/\s/);
+
+      let touchedReference;
+      let iteratingPos = 0;
+      const untouchedRawReferences = rawReferences
+        .filter((reference) => {
+          let isTouched = false;
+          if (caretPos >= iteratingPos && caretPos <= (iteratingPos + reference.length)) {
+            touchedReference = reference;
+            isTouched = true;
+          }
+
+          // `+ SPACE_FACTOR` to factor in the missing space we split at earlier
+          iteratingPos = iteratingPos + reference.length + SPACE_FACTOR;
+          return !isTouched;
+        })
+        .filter(reference => reference.trim().length > 0);
+
+      this.store.setPendingReferences(
+        this.state.pendingReferences.concat(untouchedRawReferences),
+      );
+      this.inputValue = `${touchedReference}`;
+    },
+    onBlur(newValue) {
+      const rawReferences = newValue
+        .split(/\s+/)
+        .filter(reference => reference.trim().length > 0);
+
+      this.store.setPendingReferences(
+        this.state.pendingReferences.concat(rawReferences),
+      );
+      this.inputValue = '';
+    },
+  },
+
+  created() {
+    eventHub.$on('relatedIssue-removeRequest', this.onRelatedIssueRemoveRequest);
+    eventHub.$on('toggleAddRelatedIssuesForm', this.onToggleAddRelatedIssuesForm);
+    eventHub.$on('pendingIssuable-removeRequest', this.onPendingIssueRemoveRequest);
+    eventHub.$on('addIssuableFormSubmit', this.onPendingFormSubmit);
+    eventHub.$on('addIssuableFormCancel', this.onPendingFormCancel);
+    eventHub.$on('addIssuableFormInput', this.onInput);
+    eventHub.$on('addIssuableFormBlur', this.onBlur);
+
+    this.service = new RelatedIssuesService(this.endpoint);
+    this.fetchRelatedIssues();
+  },
+
+  beforeDestroy() {
+    eventHub.$off('relatedIssue-removeRequest', this.onRelatedIssueRemoveRequest);
+    eventHub.$off('toggleAddRelatedIssuesForm', this.onToggleAddRelatedIssuesForm);
+    eventHub.$off('pendingIssuable-removeRequest', this.onPendingIssueRemoveRequest);
+    eventHub.$off('addIssuableFormSubmit', this.onPendingFormSubmit);
+    eventHub.$off('addIssuableFormCancel', this.onPendingFormCancel);
+    eventHub.$off('addIssuableFormInput', this.onInput);
+    eventHub.$off('addIssuableFormBlur', this.onBlur);
+  },
+};
+</script>
+
+<template>
+  <related-issues-block
+    :help-path="helpPath"
+    :is-fetching="isFetching"
+    :is-submitting="isSubmitting"
+    :related-issues="state.relatedIssues"
+    :can-add-related-issues="canAddRelatedIssues"
+    :pending-references="state.pendingReferences"
+    :is-form-visible="isFormVisible"
+    :input-value="inputValue"
+    :auto-complete-sources="autoCompleteSources" />
+</template>

app/assets/javascripts/issuable/related_issues/event_hub.js

+import Vue from 'vue';
+
+export default new Vue();

app/assets/javascripts/issuable/related_issues/services/related_issues_service.js

+import Vue from 'vue';
+import vueResource from 'vue-resource';
+
+Vue.use(vueResource);
+
+class RelatedIssuesService {
+  constructor(endpoint) {
+    this.relatedIssuesResource = Vue.resource(endpoint);
+  }
+
+  fetchRelatedIssues() {
+    return this.relatedIssuesResource.get();
+  }
+
+  addRelatedIssues(newIssueReferences) {
+    return this.relatedIssuesResource.save({}, {
+      issue_references: newIssueReferences,
+    });
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  removeRelatedIssue(endpoint) {
+    return Vue.http.delete(endpoint);
+  }
+}
+
+export default RelatedIssuesService;

app/assets/javascripts/issuable/related_issues/stores/related_issues_store.js

+class RelatedIssuesStore {
+  constructor() {
+    this.state = {
+      // Stores issue objects of the known related issues
+      relatedIssues: [],
+      // Stores references of the "staging area" related issues that are planned to be added
+      pendingReferences: [],
+    };
+  }
+
+  setRelatedIssues(issues) {
+    this.state.relatedIssues = issues;
+  }
+
+  removeRelatedIssue(idToRemove) {
+    this.state.relatedIssues = this.state.relatedIssues.filter(issue => issue.id !== idToRemove);
+  }
+
+  setPendingReferences(issues) {
+    this.state.pendingReferences = issues;
+  }
+
+  removePendingRelatedIssue(indexToRemove) {
+    this.state.pendingReferences =
+      this.state.pendingReferences.filter((reference, index) => index !== indexToRemove);
+  }
+
+}
+
+export default RelatedIssuesStore;

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

@@ -167,8 +167,8 @@
       if the name does not exist this function will return `null`
       otherwise it will return the value of the param key provided
     */
-    w.gl.utils.getParameterByName = (name) => {
-      const url = window.location.href;
+    w.gl.utils.getParameterByName = (name, parseUrl) => {
+      const url = parseUrl || window.location.href;
       name = name.replace(/[[\]]/g, '\\$&');
       const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`);
       const results = regex.exec(url);

app/assets/javascripts/main.js

@@ -39,10 +39,6 @@ import './shortcuts_network';
 // behaviors
 import './behaviors/';
 
-// blob
-import './blob/create_branch_dropdown';
-import './blob/target_branch_dropdown';
-
 // templates
 import './templates/issuable_template_selector';
 import './templates/issuable_template_selectors';

app/assets/javascripts/new_commit_form.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-return-assign, max-len */
 (function() {
   this.NewCommitForm = (function() {
-    function NewCommitForm(form, targetBranchName = 'target_branch') {
+    function NewCommitForm(form) {
       this.form = form;
-      this.targetBranchName = targetBranchName;
       this.renderDestination = this.renderDestination.bind(this);
-      this.targetBranchDropdown = form.find('button.js-target-branch');
+      this.branchName = form.find('.js-branch-name');
       this.originalBranch = form.find('.js-original-branch');
       this.createMergeRequest = form.find('.js-create-merge-request');
       this.createMergeRequestContainer = form.find('.js-create-merge-request-container');
-      this.targetBranchDropdown.on('change.branch', this.renderDestination);
+      this.branchName.keyup(this.renderDestination);
       this.renderDestination();
     }
 
     NewCommitForm.prototype.renderDestination = function() {
       var different;
-      var targetBranch = this.form.find(`input[name="${this.targetBranchName}"]`);
-
-      different = targetBranch.val() !== this.originalBranch.val();
+      different = this.branchName.val() !== this.originalBranch.val();
       if (different) {
         this.createMergeRequestContainer.show();
         if (!this.wasDifferent) {

app/assets/javascripts/pipelines/components/stage.vue

@@ -16,6 +16,7 @@
 /* global Flash */
 import { borderlessStatusIconEntityMap } from '../../vue_shared/ci_status_icons';
 import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import tooltipMixin from '../../vue_shared/mixins/tooltip';
 
 export default {
   props: {
@@ -31,6 +32,10 @@ export default {
     },
   },
 
+  mixins: [
+    tooltipMixin,
+  ],
+
   data() {
     return {
       isLoading: false,
@@ -127,9 +132,10 @@ export default {
 <template>
   <div class="dropdown">
     <button
+      ref="tooltip"
       :class="triggerButtonClass"
       @click="onClickStage"
-      class="mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button"
+      class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button"
       :title="stage.title"
       data-placement="top"
       data-toggle="dropdown"

app/assets/javascripts/pipelines/pipelines.js

@@ -284,9 +284,7 @@ export default {
 
         <table-pagination
           v-if="shouldRenderPagination"
-          :pagenum="pagenum"
           :change="change"
-          :count="state.count.all"
           :pageInfo="state.pageInfo"
           />
       </div>

app/assets/stylesheets/framework/awards.scss

 .awards {
+  display: flex;
+  flex-wrap: wrap;
+
   .emoji-icon {
     width: 20px;
     height: 20px;
@@ -100,7 +103,6 @@
 
 .award-menu-holder {
   display: inline-block;
-  position: absolute;
 
   .tooltip {
     white-space: nowrap;
@@ -108,9 +110,11 @@
 }
 
 .award-control {
-  margin: 0 5px 6px 0;
+  margin: 4px 8px 4px 0;
   outline: 0;
   position: relative;
+  display: block;
+  float: left;
 
   &.disabled {
     cursor: default;

app/assets/stylesheets/framework/dropdowns.scss

@@ -48,6 +48,10 @@
     @include chevron-active;
     border-color: $gray-darkest;
   }
+
+  [data-toggle="dropdown"] {
+    outline: 0;
+  }
 }
 
 .dropdown-toggle {
@@ -109,6 +113,7 @@
   &:focus:active {
     @include chevron-active;
     border-color: $dropdown-toggle-active-border-color;
+    outline: 0;
   }
 }
 
@@ -201,6 +206,11 @@
     width: 100%;
   }
 
+  &.dropdown-open-left {
+    right: 0;
+    left: auto;
+  }
+
   &.is-loading {
     .dropdown-content {
       display: none;
@@ -261,7 +271,14 @@
     text-transform: capitalize;
   }
 
-  .separator + .dropdown-header {
+  .dropdown-bold-header {
+    font-weight: 600;
+    line-height: 22px;
+    padding: 0 16px;
+  }
+
+  .separator + .dropdown-header,
+  .separator + .dropdown-bold-header {
     padding-top: 2px;
   }
 

app/assets/stylesheets/framework/lists.scss

@@ -270,3 +270,103 @@ ul.controls {
 ul.indent-list {
   padding: 10px 0 0 30px;
 }
+
+
+// Specific styles for tree list
+.group-list-tree {
+  .folder-toggle-wrap {
+    float: left;
+    line-height: $list-text-height;
+    font-size: 0;
+
+    span {
+      font-size: $gl-font-size;
+    }
+  }
+
+  .folder-caret,
+  .folder-icon {
+    display: inline-block;
+  }
+
+  .folder-caret {
+    width: 15px;
+  }
+
+  .folder-icon {
+    width: 20px;
+  }
+
+  > .group-row:not(.has-subgroups) {
+    .folder-caret .fa {
+      opacity: 0;
+    }
+  }
+
+  .content-list li:last-child {
+    padding-bottom: 0;
+  }
+
+  .group-list-tree {
+    margin-bottom: 0;
+    margin-left: 30px;
+    position: relative;
+
+    &::before {
+      content: '';
+      display: block;
+      width: 0;
+      position: absolute;
+      top: 5px;
+      bottom: 0;
+      left: -16px;
+      border-left: 2px solid $border-white-normal;
+    }
+
+    .group-row {
+      position: relative;
+
+      &::before {
+        content: "";
+        display: block;
+        width: 10px;
+        height: 0;
+        border-top: 2px solid $border-white-normal;
+        position: absolute;
+        top: 30px;
+        left: -16px;
+      }
+
+      &:last-child::before {
+        background: $white-light;
+        height: auto;
+        top: 30px;
+        bottom: 0;
+      }
+    }
+  }
+
+  .group-row {
+    padding: 0;
+    border: none;
+  }
+
+  .group-row-contents {
+    padding: 10px 10px 8px;
+    border-top: solid 1px transparent;
+    border-bottom: solid 1px $white-normal;
+
+    &:hover {
+      border-color: $row-hover-border;
+      background-color: $row-hover;
+      cursor: pointer;
+    }
+  }
+}
+
+.js-groups-list-holder {
+  .groups-list-loading {
+    font-size: 34px;
+    text-align: center;
+  }
+}

app/assets/stylesheets/framework/nav.scss

@@ -45,7 +45,8 @@
   li {
     display: flex;
 
-    a {
+    a,
+    .btn-link {
       padding: $gl-btn-padding;
       padding-bottom: 11px;
       font-size: 14px;
@@ -67,7 +68,29 @@
       }
     }
 
-    &.active a {
+    .btn-link {
+      padding-top: 16px;
+      padding-left: 15px;
+      padding-right: 15px;
+      border-left: none;
+      border-right: none;
+      border-top: none;
+      border-radius: 0;
+
+      &:hover,
+      &:active,
+      &:focus {
+        background-color: transparent;
+      }
+
+      &:active {
+        outline: 0;
+        box-shadow: none;
+      }
+    }
+
+    &.active a,
+    &.active .btn-link {
       border-bottom: 2px solid $link-underline-blue;
       color: $black;
       font-weight: 600;

app/assets/stylesheets/framework/panels.scss

-@mixin panel {
-  .panel-heading {
-    padding: $gl-vert-padding $gl-padding;
-    line-height: 36px;
-
-    .controls {
-      margin-top: -2px;
-      float: right;
-    }
-
-    .dropdown-menu-toggle {
-      line-height: 20px;
-    }
-
-    .badge {
-      margin-top: -2px;
-      margin-left: 5px;
-    }
-
-    &.split {
-      display: flex;
-      align-items: center;
-    }
-
-    .left {
-      flex: 1 1 auto;
-    }
-
-    .right {
-      flex: 0 0 auto;
-      text-align: right;
-    }
+.panel {
+  margin-bottom: $gl-padding;
+}
+
+.panel-slim {
+  @extend .panel;
+  margin-bottom: $gl-vert-padding;
+}
+
+
+.panel-heading {
+  padding: $gl-vert-padding $gl-padding;
+  line-height: 36px;
+
+  .controls {
+    margin-top: -2px;
+    float: right;
   }
 
-  .panel-body {
-    padding: $gl-padding;
+  .dropdown-menu-toggle {
+    line-height: 20px;
+  }
 
-    .form-actions {
-      margin: -$gl-padding;
-      margin-top: $gl-padding;
-    }
+  .badge {
+    margin-top: -2px;
+    margin-left: 5px;
   }
 
-  .panel-title {
-    font-size: inherit;
-    line-height: inherit;
+  &.split {
+    display: flex;
+    align-items: center;
+  }
+
+  .left {
+    flex: 1 1 auto;
+  }
+
+  .right {
+    flex: 0 0 auto;
+    text-align: right;
   }
 }
 
-.panel {
-  @include panel;
-  margin-bottom: $gl-padding;
+.panel-empty-heading {
+  border-bottom: 0;
 }
 
-.panel-slim {
-  @extend .panel;
-  @include panel;
-  margin-bottom: $gl-vert-padding;
+.panel-body {
+  padding: $gl-padding;
+
+  .form-actions {
+    margin: -$gl-padding;
+    margin-top: $gl-padding;
+  }
+}
+
+.panel-title {
+  font-size: inherit;
+  line-height: inherit;
 }

app/assets/stylesheets/framework/responsive-tables.scss

@@ -19,10 +19,6 @@
   .table-section {
     white-space: nowrap;
 
-    .branch-commit {
-      max-width: 100%;
-    }
-
     $section-widths: 10 15 20 25 30 40;
     @each $width in $section-widths {
       &.section-#{$width} {
@@ -87,4 +83,9 @@
   @media (min-width: $screen-md-min) {
     flex: 0 0 90%;
   }
+
+  .avatar {
+    float: none;
+    margin-right: 4px;
+  }
 }

app/assets/stylesheets/framework/variables.scss

@@ -597,4 +597,3 @@ Convdev Index
 $color-high-score: $green-400;
 $color-average-score: $orange-400;
 $color-low-score: $red-400;
-

app/assets/stylesheets/pages/boards.scss

+@import "./issues/issue_count_badge";
+
 [v-cloak] {
   display: none;
 }
@@ -125,9 +127,51 @@
   @media (min-width: $screen-sm-min) {
     width: 400px;
   }
+
+  &.is-expandable {
+    .board-header {
+      cursor: pointer;
+    }
+  }
+
+  &.is-collapsed {
+    width: 50px;
+
+    .board-header {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    .board-title {
+      position: initial;
+      padding: 0;
+      border-bottom: 0;
+
+      > span {
+        display: block;
+        transform: rotate(90deg) translate(25px, 0);
+      }
+    }
+
+    .board-title-expandable-toggle {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-left: -10px;
+    }
+
+    .board-list-component,
+    .board-issue-count-holder {
+      display: none;
+    }
+  }
 }
 
 .board-inner {
+  position: relative;
   height: 100%;
   font-size: $issue-boards-font-size;
   background: $gray-light;
@@ -415,30 +459,6 @@
   margin: 5px;
 }
 
-.board-issue-count-holder {
-  margin-top: -3px;
-
-  .btn {
-    line-height: 12px;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-}
-
-.board-issue-count {
-  padding-right: 10px;
-  padding-left: 10px;
-  line-height: 21px;
-  border-radius: $border-radius-base;
-  border: 1px solid $border-color;
-
-  &.has-btn {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-width: 1px 0 1px 1px;
-  }
-}
-
 .boards-title-holder {
   padding: 25px 13px $gl-padding;
 

app/assets/stylesheets/pages/builds.scss

@@ -71,7 +71,9 @@
       height: 35px;
       display: flex;
       justify-content: flex-end;
-      border-bottom: 1px outset $white-light;
+      background: $gray-light;
+      border: 1px solid $gray-normal;
+      color: $gl-text-color;
 
       .truncated-info {
         margin: 0 auto;
@@ -82,7 +84,7 @@
         }
 
         .raw-link {
-          color: inherit;
+          color: $gl-text-color;
           margin-left: 5px;
           text-decoration: underline;
         }
@@ -93,17 +95,25 @@
       display: flex;
       align-self: center;
       font-size: 15px;
+      margin-bottom: 4px;
 
       svg {
         height: 15px;
         display: block;
-        fill: $white-light;
+        fill: $gl-text-color;
       }
 
-      a,
+      .controllers-buttons,
       .btn-scroll {
-        margin: 0 8px;
-        color: $white-light;
+        color: $gl-text-color;
+        height: 15px;
+        vertical-align: middle;
+        padding: 0;
+        width: 12px;
+      }
+
+      .controllers-buttons {
+        margin: 1px 10px;
       }
 
       .btn-scroll.animate {
@@ -137,9 +147,9 @@
     top: 35px;
     left: 10px;
     bottom: 0;
-    overflow-y: hidden;
-    padding-bottom: 20px;
-    padding-right: 20px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    padding: 10px 20px 20px 5px;
   }
 
   .environment-information {

app/assets/stylesheets/pages/commits.scss

@@ -228,7 +228,7 @@
     margin: 10px 0;
     background: $gray-light;
     display: none;
-    white-space: pre-line;
+    white-space: pre-wrap;
     word-break: normal;
 
     pre {

app/assets/stylesheets/pages/environments.scss

@@ -285,7 +285,7 @@
       border-top: 1px solid $border-color;
 
       .environment-action-buttons {
-        padding: 10px;
+        padding: 10px 5px;
         display: flex;
 
         .btn {
@@ -293,15 +293,20 @@
         }
 
         > .btn-group,
-        .external-url,
-        .btn {
+        > .external-url,
+        > .btn {
           flex: 1;
           flex-basis: 28px;
+          margin: 0 5px;
         }
 
         .dropdown-new {
           width: 100%;
         }
+
+        .dropdown-menu {
+          min-width: initial;
+        }
       }
     }
   }

app/assets/stylesheets/pages/issuable.scss

@@ -58,7 +58,7 @@
   }
 
   .emoji-block {
-    padding: 10px 0 4px;
+    padding: 10px 0;
   }
 }
 
@@ -727,3 +727,78 @@
     }
   }
 }
+
+.confidential-issue-warning {
+  background-color: $gl-gray;
+  border-radius: 3px;
+  padding: $gl-btn-padding $gl-padding;
+  margin-top: $gl-padding-top;
+  font-size: 14px;
+  color: $white-light;
+
+  .fa {
+    margin-right: 8px;
+  }
+
+  a {
+    color: $white-light;
+    text-decoration: underline;
+  }
+
+  &.affix {
+    position: static;
+    width: initial;
+
+    @media (min-width: $screen-sm-min) {
+      position: sticky;
+      position: -webkit-sticky;
+      top: 60px;
+      z-index: 200;
+    }
+  }
+}
+
+.add-issuable-form-input-wrapper {
+  height: auto;
+  padding: $gl-vert-padding $gl-vert-padding 0 $gl-input-padding;
+
+  &.focus,
+  &.focus:hover {
+    border-color: $dropdown-input-focus-border;
+    box-shadow: 0 0 4px $search-input-focus-shadow-color;
+  }
+}
+
+.add-issuable-form-input-token-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  list-style: none;
+  margin-bottom: 0;
+  padding-left: 0;
+}
+
+.add-issuable-form-token-list-item {
+  max-width: 100%;
+  margin-bottom: $gl-vert-padding;
+  margin-right: 5px;
+}
+
+.add-issuable-form-input-list-item {
+  flex: 1;
+  min-width: 200px;
+  margin-bottom: $gl-vert-padding;
+}
+
+.add-issuable-form-input {
+  width: 100%;
+  border: 0;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.add-issuable-form-actions {
+  margin-top: $gl-padding;
+}

app/assets/stylesheets/pages/issues.scss

+@import "./issues/issue_count_badge";
+@import "./issues/related_issues";
+
 .issues-list {
   .issue {
     padding: 10px 0 10px $gl-padding;
@@ -264,14 +267,134 @@ ul.related-merge-requests > li {
 }
 
 @media (min-width: $screen-sm-min) {
-  .new-branch-col {
-    padding-top: 0;
-    text-align: right;
-  }
+  .emoji-block .row {
+    display: flex;
 
-  .create-mr-dropdown-wrap {
-    .btn-group:not(.hide) {
-      display: inline-block;
+    .new-branch-col {
+      padding-top: 0;
+      text-align: right;
+      align-self: center;
+    }
+
+    .create-mr-dropdown-wrap {
+      .btn-group:not(.hide) {
+        display: inline-block;
+      }
     }
   }
 }
+
+
+.issue-token {
+  display: inline-flex;
+  align-items: stretch;
+  max-width: 100%;
+  line-height: 1.75;
+  white-space: nowrap;
+}
+
+.issue-token-link {
+  display: inline-flex;
+  min-width: 0;
+
+  color: $gl-text-color-secondary;
+
+  &[href] {
+    color: $gl-link-color;
+  }
+
+  &:hover,
+  &:focus {
+    outline: none;
+    text-decoration: none;
+  }
+}
+
+.issue-token-reference {
+  display: flex;
+  align-items: center;
+  margin-right: 1px;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  background-color: $gray-lighter;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+  transition: background $general-hover-transition-duration $general-hover-transition-curve, color $general-hover-transition-duration $general-hover-transition-curve;
+
+  .issue-token:hover &,
+  .issue-token-link:focus > & {
+    background-color: $gray-normal;
+    color: $gl-link-hover-color;
+    text-decoration: none;
+  }
+}
+
+@mixin issue-token-state-icon {
+  margin-right: 0.35em;
+  font-size: 0.9em;
+}
+
+.issue-token-state-icon-open {
+  @include issue-token-state-icon;
+  color: $green-600;
+}
+
+.issue-token-state-icon-closed {
+  @include issue-token-state-icon;
+  color: $red-600;
+}
+
+.issue-token-title {
+  overflow: hidden;
+  display: flex;
+  align-items: baseline;
+  padding-left: 0.5em;
+  background-color: $gray-normal;
+  color: $gl-text-color-secondary;
+  transition: background $general-hover-transition-duration $general-hover-transition-curve;
+
+  .issue-token:hover &,
+  .issue-token-link:focus > & {
+    background-color: $border-gray-normal;
+  }
+
+  & > .fa {
+    line-height: inherit;
+  }
+}
+
+.issue-token-title-standalone {
+  padding-right: 0.5em;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+.issue-token-title-text {
+  overflow: hidden;
+  max-width: 264px;
+  text-overflow: ellipsis;
+}
+
+.issue-token-remove-button {
+  display: flex;
+  align-items: center;
+  padding: 0 0.5em;
+  background-color: $gray-normal;
+  border: 0;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+  color: $gl-text-color-secondary;
+  transition: background $general-hover-transition-duration $general-hover-transition-curve;
+
+  &:hover,
+  &:focus,
+  .issue-token:hover &,
+  .issue-token-link:focus + & {
+    background-color: $border-gray-normal;
+    outline: none;
+  }
+
+  & > .fa {
+    font-size: 0.9em;
+  }
+}

app/assets/stylesheets/pages/issues/issue_count_badge.scss

+.issue-count-badge {
+  display: inline-flex;
+  align-items: stretch;
+  height: 24px;
+}
+
+.issue-count-badge-count {
+  display: flex;
+  align-items: center;
+  padding-right: 10px;
+  padding-left: 10px;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-base;
+  line-height: 1;
+
+  &.has-btn {
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.issue-count-badge-add-button {
+  display: flex;
+  align-items: center;
+  border: 1px solid $border-color;
+  border-radius: 0 $border-radius-base $border-radius-base 0;
+  line-height: 1;
+}

app/assets/stylesheets/pages/issues/related_issues.scss

+$token_spacing_bottom: 0.5em;
+
+.related-issues-block {
+  margin-top: 3 * $gl-vert-padding;
+}
+
+.related-issues-panel-title {
+  display: flex;
+  justify-content: space-between;
+}
+
+.related-issues-header-help-icon {
+  margin-left: 0.25em;
+  color: $gl-text-color-secondary;
+}
+
+.related-issues-header-issue-count {
+  margin-left: 0.5em;
+}
+
+.related-issues-add-related-issues-form-with-break {
+  border-bottom: 1px solid $border-color;
+}
+
+.related-issues-token-body {
+  padding-bottom: calc(#{$gl-padding} - #{$token_spacing_bottom});
+}
+
+.related-issues-token-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.related-issues-token-list-item {
+  max-width: 100%;
+  margin-bottom: $token_spacing_bottom;
+  margin-right: 5px;
+}

app/assets/stylesheets/pages/login.scss

@@ -128,6 +128,7 @@
       a {
         width: 100%;
         font-size: 18px;
+        margin-right: 0;
 
         &:hover {
           border: 1px solid transparent;
@@ -140,6 +141,7 @@
         a {
           border: none;
           border-bottom: 2px solid $link-underline-blue;
+          margin-right: 0;
           color: $black;
 
           &:hover {

app/assets/stylesheets/pages/members.scss

@@ -3,6 +3,41 @@
   border-bottom: 1px solid $border-color;
 }
 
+.project-member-tabs {
+  background: $gray-light;
+  border: 1px solid $border-color;
+
+  li {
+    width: 50%;
+
+    &.active {
+      background: $white-light;
+    }
+
+    &:first-child {
+      border-right: 1px solid $border-color;
+    }
+
+    a {
+      width: 100%;
+      text-align: center;
+    }
+  }
+}
+
+.users-project-form {
+  .btn-create {
+    margin-right: 10px;
+  }
+}
+
+.project-member-tab-content {
+  padding: $gl-padding;
+  border: 1px solid $border-color;
+  border-top: 0;
+  margin-bottom: $gl-padding;
+}
+
 .member {
   &.is-overriden {
     .btn-ldap-override {

app/assets/stylesheets/pages/note_form.scss

@@ -103,41 +103,6 @@
   }
 }
 
-.confidential-issue-warning {
-  background-color: $gray-normal;
-  border-radius: 3px;
-  padding: 3px 12px;
-  margin: auto;
-  margin-top: 0;
-  text-align: center;
-  font-size: 12px;
-  align-items: center;
-
-  @media (max-width: $screen-md-max) {
-    // On smaller devices the warning becomes the fourth item in the list,
-    // rather than centering, and grows to span the full width of the
-    // comment area.
-    order: 4;
-    margin: 6px auto;
-    width: 100%;
-  }
-
-  .fa {
-    margin-right: 8px;
-  }
-}
-
-.right-sidebar-expanded {
-  .confidential-issue-warning {
-    // When the sidebar is open the warning becomes the fourth item in the list,
-    // rather than centering, and grows to span the full width of the
-    // comment area.
-    order: 4;
-    margin: 6px auto;
-    width: 100%;
-  }
-}
-
 .discussion-form {
   padding: $gl-padding-top $gl-padding $gl-padding;
   background-color: $white-light;

app/assets/stylesheets/pages/notes.scss

@@ -38,9 +38,12 @@ ul.notes {
   }
 
   .discussion {
-    overflow: hidden;
     display: block;
     position: relative;
+
+    .diff-content {
+      overflow: visible;
+    }
   }
 
   > li {
@@ -443,6 +446,52 @@ ul.notes {
   .note-action-button {
     margin-left: 8px;
   }
+
+  .more-actions-toggle {
+    margin-left: 2px;
+  }
+}
+
+.more-actions {
+  display: inline;
+
+  .tooltip {
+    white-space: nowrap;
+  }
+}
+
+.more-actions-toggle {
+  padding: 0;
+
+  &:hover .icon,
+  &:focus .icon {
+    color: $blue-600;
+  }
+
+  .icon {
+    padding: 0 6px;
+  }
+}
+
+.more-actions-dropdown {
+  width: 180px;
+  min-width: 180px;
+  margin-top: $gl-btn-padding;
+
+  li > a,
+  li > .btn {
+    color: $gl-text-color;
+    padding: $gl-btn-padding;
+    width: 100%;
+    text-align: left;
+
+    &:hover,
+    &:focus {
+      color: $gl-text-color;
+      background-color: $blue-25;
+      border-radius: $border-radius-default;
+    }
+  }
 }
 
 .discussion-actions {

app/assets/stylesheets/pages/projects.scss

@@ -793,8 +793,7 @@ a.allowed-to-push {
 }
 
 .project-refs-form .dropdown-menu,
-.dropdown-menu-projects,
-.dropdown-menu-branches {
+.dropdown-menu-projects {
   width: 300px;
 
   @media (min-width: $screen-sm-min) {

app/controllers/admin/deploy_keys_controller.rb

 class Admin::DeployKeysController < Admin::ApplicationController
   before_action :deploy_keys, only: [:index]
-  before_action :deploy_key, only: [:destroy]
+  before_action :deploy_key, only: [:destroy, :edit, :update]
 
   def index
   end
@@ -10,12 +10,24 @@ class Admin::DeployKeysController < Admin::ApplicationController
   end
 
   def create
-    @deploy_key = deploy_keys.new(deploy_key_params.merge(user: current_user))
+    @deploy_key = deploy_keys.new(create_params.merge(user: current_user))
 
     if @deploy_key.save
       redirect_to admin_deploy_keys_path
     else
-      render "new"
+      render 'new'
+    end
+  end
+
+  def edit
+  end
+
+  def update
+    if deploy_key.update_attributes(update_params)
+      flash[:notice] = 'Deploy key was successfully updated.'
+      redirect_to admin_deploy_keys_path
+    else
+      render 'edit'
     end
   end
 
@@ -38,7 +50,11 @@ class Admin::DeployKeysController < Admin::ApplicationController
     @deploy_keys ||= DeployKey.are_public
   end
 
-  def deploy_key_params
+  def create_params
     params.require(:deploy_key).permit(:key, :title, :can_push)
   end
+
+  def update_params
+    params.require(:deploy_key).permit(:title, :can_push)
+  end
 end

app/controllers/concerns/creates_commit.rb

 module CreatesCommit
   extend ActiveSupport::Concern
 
-  def set_start_branch_to_branch_name
-    branch_exists = @repository.find_branch(@branch_name)
-    @start_branch = @branch_name if branch_exists
-  end
-
   def create_commit(service, success_path:, failure_path:, failure_view: nil, success_notice: nil)
     if can?(current_user, :push_code, @project)
       @project_to_commit_into = @project

app/controllers/concerns/membership_actions.rb

@@ -56,9 +56,14 @@ module MembershipActions
 
     log_audit_event(member, action: :destroy) unless member.request?
 
-    redirect_path = member.request? ? member.source : [:dashboard, membershipable.class.to_s.tableize]
+    respond_to do |format|
+      format.html do
+        redirect_path = member.request? ? member.source : [:dashboard, membershipable.class.to_s.tableize]
+        redirect_to redirect_path, notice: notice
+      end
 
-    redirect_to redirect_path, notice: notice
+      format.json { render json: { notice: notice } }
+    end
   end
 
   protected

app/controllers/concerns/milestone_actions.rb

@@ -46,8 +46,10 @@ module MilestoneActions
   def milestone_redirect_path
     if @project
       namespace_project_milestone_path(@project.namespace, @project, @milestone)
-    else
+    elsif @group
       group_milestone_path(@group, @milestone.safe_title, title: @milestone.title)
+    else
+      dashboard_milestone_path(@milestone.safe_title, title: @milestone.title)
     end
   end
 end

app/controllers/dashboard/groups_controller.rb

 class Dashboard::GroupsController < Dashboard::ApplicationController
   def index
-    @group_members = current_user.group_members.includes(source: :route).joins(:group)
-    @group_members = @group_members.merge(Group.search(params[:filter_groups])) if params[:filter_groups].present?
-    @group_members = @group_members.merge(Group.sort(@sort = params[:sort]))
-    @group_members = @group_members.page(params[:page])
+    @groups =
+      if params[:parent_id] && Group.supports_nested_groups?
+        parent = Group.find_by(id: params[:parent_id])
+
+        if can?(current_user, :read_group, parent)
+          GroupsFinder.new(current_user, parent: parent).execute
+        else
+          Group.none
+        end
+      else
+        current_user.groups
+      end
+
+    @groups = @groups.search(params[:filter_groups]) if params[:filter_groups].present?
+    @groups = @groups.includes(:route)
+    @groups = @groups.sort(@sort = params[:sort])
+    @groups = @groups.page(params[:page])
 
     respond_to do |format|
       format.html
       format.json do
-        render json: {
-          html: view_to_html_string("dashboard/groups/_groups", locals: { group_members: @group_members })
-        }
+        render json: GroupSerializer
+          .new(current_user: @current_user)
+          .with_pagination(request, response)
+          .represent(@groups)
       end
     end
   end

app/controllers/dashboard/milestones_controller.rb

 class Dashboard::MilestonesController < Dashboard::ApplicationController
+  include MilestoneActions
+
   before_action :projects
-  before_action :milestone, only: [:show]
+  before_action :milestone, only: [:show, :merge_requests, :participants, :labels]
 
   def index
     respond_to do |format|

app/controllers/jwt_controller.rb

@@ -39,7 +39,7 @@ class JwtController < ApplicationController
       errors: [
         { code: 'UNAUTHORIZED',
           message: "HTTP Basic: Access denied\n" \
-                   "You have 2FA enabled, please use a personal access token for Git over HTTP.\n" \
+                   "You must use a personal access token with 'api' scope for Git over HTTP.\n" \
                    "You can generate one at #{profile_personal_access_tokens_url}" }
       ]
     }, status: 401

app/controllers/projects/blob_controller.rb

@@ -26,8 +26,6 @@ class Projects::BlobController < Projects::ApplicationController
   end
 
   def create
-    set_start_branch_to_branch_name
-
     create_commit(Files::CreateService, success_notice: "The file has been successfully created.",
                                         success_path: -> { namespace_project_blob_path(@project.namespace, @project, File.join(@branch_name, @file_path)) },
                                         failure_view: :new,
@@ -55,7 +53,7 @@ class Projects::BlobController < Projects::ApplicationController
 
   def edit
     if can_collaborate_with_project?
-      blob.load_all_data!(@repository)
+      blob.load_all_data!
     else
       redirect_to action: 'show'
     end
@@ -74,7 +72,7 @@ class Projects::BlobController < Projects::ApplicationController
 
   def preview
     @content = params[:content]
-    @blob.load_all_data!(@repository)
+    @blob.load_all_data!
     diffy = Diffy::Diff.new(@blob.data, @content, diff: '-U 3', include_diff_info: true)
     diff_lines = diffy.diff.scan(/.*\n/)[2..-1]
     diff_lines = Gitlab::Diff::Parser.new.parse(diff_lines)
@@ -93,9 +91,11 @@ class Projects::BlobController < Projects::ApplicationController
   def diff
     apply_diff_view_cookie!
 
-    @form  = UnfoldForm.new(params)
-    @lines = Gitlab::Highlight.highlight_lines(repository, @ref, @path)
-    @lines = @lines[@form.since - 1..@form.to - 1]
+    @blob.load_all_data!
+    @lines = Gitlab::Highlight.highlight(@blob.path, @blob.data, repository: @repository).lines
+
+    @form = UnfoldForm.new(params)
+    @lines = @lines[@form.since - 1..@form.to - 1].map(&:html_safe)
 
     if @form.bottom?
       @match_line = ''
@@ -111,7 +111,7 @@ class Projects::BlobController < Projects::ApplicationController
   private
 
   def blob
-    @blob ||= Blob.decorate(@repository.blob_at(@commit.id, @path), @project)
+    @blob ||= @repository.blob_at(@commit.id, @path)
 
     if @blob
       @blob

app/controllers/projects/boards/lists_controller.rb

@@ -5,7 +5,9 @@ module Projects
       before_action :authorize_read_list!, only: [:index]
 
       def index
-        render json: serialize_as_json(board.lists)
+        lists = ::Boards::Lists::ListService.new(project, current_user).execute(board)
+
+        render json: serialize_as_json(lists)
       end
 
       def create

app/controllers/projects/branches_controller.rb

@@ -10,10 +10,10 @@ class Projects::BranchesController < Projects::ApplicationController
   def index
     @sort = params[:sort].presence || sort_value_name
     @branches = BranchesFinder.new(@repository, params).execute
+    @branches = Kaminari.paginate_array(@branches).page(params[:page])
 
     respond_to do |format|
       format.html do
-        paginate_branches
         @refs_pipelines = @project.pipelines.latest_successful_for_refs(@branches.map(&:name))
 
         @max_commits = @branches.reduce(0) do |memo, branch|
@@ -22,7 +22,6 @@ class Projects::BranchesController < Projects::ApplicationController
         end
       end
       format.json do
-        paginate_branches unless params[:show_all]
         render json: @branches.map(&:name)
       end
     end
@@ -106,10 +105,6 @@ class Projects::BranchesController < Projects::ApplicationController
     end
   end
 
-  def paginate_branches
-    @branches = Kaminari.paginate_array(@branches).page(params[:page])
-  end
-
   def url_to_autodeploy_setup(project, branch_name)
     namespace_project_new_blob_path(
       project.namespace,

app/controllers/projects/deploy_keys_controller.rb

@@ -4,6 +4,7 @@ class Projects::DeployKeysController < Projects::ApplicationController
 
   # Authorize
   before_action :authorize_admin_project!
+  before_action :authorize_update_deploy_key!, only: [:edit, :update]
 
   layout "project_settings"
 
@@ -21,7 +22,7 @@ class Projects::DeployKeysController < Projects::ApplicationController
   end
 
   def create
-    @key = DeployKey.new(deploy_key_params.merge(user: current_user))
+    @key = DeployKey.new(create_params.merge(user: current_user))
 
     unless @key.valid? && @project.deploy_keys << @key
       flash[:alert] = @key.errors.full_messages.join(', ').html_safe
@@ -32,6 +33,18 @@ class Projects::DeployKeysController < Projects::ApplicationController
     redirect_to_repository_settings(@project)
   end
 
+  def edit
+  end
+
+  def update
+    if deploy_key.update_attributes(update_params)
+      flash[:notice] = 'Deploy key was successfully updated.'
+      redirect_to_repository_settings(@project)
+    else
+      render 'edit'
+    end
+  end
+
   def enable
     load_key
     Projects::EnableDeployKeyService.new(@project, current_user, params).execute
@@ -59,10 +72,22 @@ class Projects::DeployKeysController < Projects::ApplicationController
 
   protected
 
-  def deploy_key_params
+  def deploy_key
+    @deploy_key ||= @project.deploy_keys.find(params[:id])
+  end
+
+  def create_params
     params.require(:deploy_key).permit(:key, :title, :can_push)
   end
 
+  def update_params
+    params.require(:deploy_key).permit(:title, :can_push)
+  end
+
+  def authorize_update_deploy_key!
+    access_denied! unless can?(current_user, :update_deploy_key, deploy_key)
+  end
+
   def log_audit_event(key_title, options = {})
     AuditEventService.new(current_user, @project, options)
       .for_deploy_key(key_title).security_event

app/controllers/projects/git_http_client_controller.rb

@@ -104,7 +104,7 @@ class Projects::GitHttpClientController < Projects::ApplicationController
 
   def render_missing_personal_token
     render plain: "HTTP Basic: Access denied\n" \
-                  "You have 2FA enabled, please use a personal access token for Git over HTTP.\n" \
+                  "You must use a personal access token with 'api' scope for Git over HTTP.\n" \
                   "You can generate one at #{profile_personal_access_tokens_url}",
            status: 401
   end

app/controllers/projects/labels_controller.rb

@@ -8,7 +8,7 @@ class Projects::LabelsController < Projects::ApplicationController
   before_action :authorize_admin_labels!, only: [:new, :create, :edit, :update,
                                                  :generate, :destroy, :remove_priority,
                                                  :set_priorities]
-  before_action :authorize_admin_group!, only: [:promote]
+  before_action :authorize_admin_group_labels!, only: [:promote]
 
   respond_to :js, :html
 
@@ -161,7 +161,7 @@ class Projects::LabelsController < Projects::ApplicationController
     return render_404 unless can?(current_user, :admin_label, @project)
   end
 
-  def authorize_admin_group!
-    return render_404 unless can?(current_user, :admin_group, @project.group)
+  def authorize_admin_group_labels!
+    return render_404 unless can?(current_user, :admin_label, @project.group)
   end
 end

app/controllers/projects/pipeline_schedules_controller.rb

@@ -43,7 +43,7 @@ class Projects::PipelineSchedulesController < Projects::ApplicationController
     if schedule.update(owner: current_user)
       redirect_to pipeline_schedules_path(@project)
     else
-      redirect_to pipeline_schedules_path(@project), alert: "Failed to change the owner"
+      redirect_to pipeline_schedules_path(@project), alert: _("Failed to change the owner")
     end
   end
 
@@ -53,7 +53,7 @@ class Projects::PipelineSchedulesController < Projects::ApplicationController
     else
       redirect_to pipeline_schedules_path(@project),
                   status: 302,
-                  alert: "Failed to remove the pipeline schedule"
+                  alert: _("Failed to remove the pipeline schedule")
     end
   end
 

app/controllers/projects/tree_controller.rb

@@ -36,7 +36,6 @@ class Projects::TreeController < Projects::ApplicationController
   def create_dir
     return render_404 unless @commit_params.values.all?
 
-    set_start_branch_to_branch_name
     create_commit(Files::CreateDirService,  success_notice: "The directory has been successfully created.",
                                             success_path: namespace_project_tree_path(@project.namespace, @project, File.join(@branch_name, @dir_name)),
                                             failure_path: namespace_project_tree_path(@project.namespace, @project, @ref))

app/helpers/groups_helper.rb

@@ -8,7 +8,7 @@ module GroupsHelper
       group = Group.find_by_full_path(group)
     end
 
-    group.try(:avatar_url) || image_path('no_group_avatar.png')
+    group.try(:avatar_url) || ActionController::Base.helpers.image_path('no_group_avatar.png')
   end
 
   def group_title(group, name = nil, url = nil)

app/helpers/milestones_helper.rb

@@ -138,6 +138,8 @@ module MilestonesHelper
       merge_requests_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json)
     elsif @group
       merge_requests_group_milestone_path(@group, milestone.safe_title, title: milestone.title, format: :json)
+    else
+      merge_requests_dashboard_milestone_path(milestone, title: milestone.title, format: :json)
     end
   end
 
@@ -146,6 +148,8 @@ module MilestonesHelper
       participants_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json)
     elsif @group
       participants_group_milestone_path(@group, milestone.safe_title, title: milestone.title, format: :json)
+    else
+      participants_dashboard_milestone_path(milestone, title: milestone.title, format: :json)
     end
   end
 
@@ -154,6 +158,8 @@ module MilestonesHelper
       labels_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json)
     elsif @group
       labels_group_milestone_path(@group, milestone.safe_title, title: milestone.title, format: :json)
+    else
+      labels_dashboard_milestone_path(milestone, title: milestone.title, format: :json)
     end
   end
 end

app/helpers/nav_helper.rb

@@ -13,7 +13,7 @@ module NavHelper
       else
         "page-gutter right-sidebar-expanded"
       end
-    elsif current_path?('builds#show')
+    elsif current_path?('jobs#show')
       "page-gutter build-sidebar right-sidebar-expanded"
     elsif current_path?('wikis#show') ||
         current_path?('wikis#edit') ||

app/helpers/notes_helper.rb

@@ -90,14 +90,18 @@ module NotesHelper
     end
   end
 
-  def note_url(note)
+  def note_url(note, project = @project)
     if note.noteable.is_a?(PersonalSnippet)
       snippet_note_path(note.noteable, note)
     else
-      namespace_project_note_path(@project.namespace, @project, note)
+      namespace_project_note_path(project.namespace, project, note)
     end
   end
 
+  def noteable_note_url(note)
+    Gitlab::UrlBuilder.build(note)
+  end
+
   def form_resources
     if @snippet.is_a?(PersonalSnippet)
       [@note]

app/helpers/projects_helper.rb

@@ -146,7 +146,7 @@ module ProjectsHelper
     end
 
     options = options_for_select(
-      options,
+      options.invert,
       selected: highest_available_option || @project.project_feature.public_send(field),
       disabled: disabled_option
     )
@@ -485,9 +485,9 @@ module ProjectsHelper
 
   def project_feature_options
     {
-      s_('ProjectFeature|Disabled') => ProjectFeature::DISABLED,
-      s_('ProjectFeature|Only team members') => ProjectFeature::PRIVATE,
-      s_('ProjectFeature|Everyone with access') => ProjectFeature::ENABLED
+      ProjectFeature::DISABLED => s_('ProjectFeature|Disabled'),
+      ProjectFeature::PRIVATE => s_('ProjectFeature|Only team members'),
+      ProjectFeature::ENABLED => s_('ProjectFeature|Everyone with access')
     }
   end
 

app/helpers/system_note_helper.rb

@@ -20,7 +20,9 @@ module SystemNoteHelper
     'moved' => 'icon_arrow_circle_o_right',
     'outdated' => 'icon_edit',
     'approved' => 'icon_check',
-    'unapproved' => 'icon_fa_close'
+    'unapproved' => 'icon_fa_close',
+    'relate' => 'icon_anchor',
+    'unrelate' => 'icon_anchor_broken'
   }.freeze
 
   def icon_for_system_note(note)