Merge branch 'master' of gitlab.com:gitlab-org/gitlab-ce into dispatcher-projects-c

26 files changed, 298 insertions, 213 deletions

diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index 57457ebd0a3..ff2e0768a87 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -81,8 +81,7 @@
           {
             gitlabIntegrationLink: `<a href="https://docs.gitlab.com/ce/user/project/integrations/prometheus.html"
 target="_blank" rel="noopener noreferrer">
-              ${_.escape(s__('ClusterIntegration|Gitlab Integration'))}
-            </a>`,
+              ${_.escape(s__('ClusterIntegration|GitLab Integration'))}</a>`,
           },
           false,
         );
diff --git a/app/assets/javascripts/commit_merge_requests.js b/app/assets/javascripts/commit_merge_requests.js
new file mode 100644
index 00000000000..f76c9b7e690
--- /dev/null
+++ b/app/assets/javascripts/commit_merge_requests.js
@@ -0,0 +1,73 @@
+/* global Flash */
+
+import axios from './lib/utils/axios_utils';
+import { n__, s__ } from './locale';
+
+export function getHeaderText(childElementCount, mergeRequestCount) {
+  if (childElementCount === 0) {
+    return `${mergeRequestCount} ${n__('merge request', 'merge requests', mergeRequestCount)}`;
+  }
+  return ',';
+}
+
+export function createHeader(childElementCount, mergeRequestCount) {
+  const headerText = getHeaderText(childElementCount, mergeRequestCount);
+
+  return $('<span />', {
+    class: 'append-right-5',
+    text: headerText,
+  });
+}
+
+export function createLink(mergeRequest) {
+  return $('<a />', {
+    class: 'append-right-5',
+    href: mergeRequest.path,
+    text: `!${mergeRequest.iid}`,
+  });
+}
+
+export function createTitle(mergeRequest) {
+  return $('<span />', {
+    text: mergeRequest.title,
+  });
+}
+
+export function createItem(mergeRequest) {
+  const $item = $('<span />');
+  const $link = createLink(mergeRequest);
+  const $title = createTitle(mergeRequest);
+  $item.append($link);
+  $item.append($title);
+
+  return $item;
+}
+
+export function createContent(mergeRequests) {
+  const $content = $('<span />');
+
+  if (mergeRequests.length === 0) {
+    $content.text(s__('Commits|No related merge requests found'));
+  } else {
+    mergeRequests.forEach((mergeRequest) => {
+      const $header = createHeader($content.children().length, mergeRequests.length);
+      const $item = createItem(mergeRequest);
+      $content.append($header);
+      $content.append($item);
+    });
+  }
+
+  return $content;
+}
+
+export function fetchCommitMergeRequests() {
+  const $container = $('.merge-requests');
+
+  axios.get($container.data('projectCommitPath'))
+    .then((response) => {
+      const $content = createContent(response.data);
+
+      $container.html($content);
+    })
+    .catch(() => Flash(s__('Commits|An error occurred while fetching merge requests data.')));
+}
diff --git a/app/assets/javascripts/protected_tags/protected_tag_dropdown.js b/app/assets/javascripts/create_item_dropdown.js
index a0224213aa0..c3eceb285f5 100644
--- a/app/assets/javascripts/protected_tags/protected_tag_dropdown.js
+++ b/app/assets/javascripts/create_item_dropdown.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 
-export default class ProtectedTagDropdown {
+export default class CreateItemDropdown {
   /**
    * @param {Object} options containing
    *                         `$dropdown` target element
@@ -8,11 +8,14 @@ export default class ProtectedTagDropdown {
    * $dropdown must be an element created using `dropdown_tag()` rails helper
    */
   constructor(options) {
-    this.onSelect = options.onSelect;
+    this.defaultToggleLabel = options.defaultToggleLabel;
+    this.fieldName = options.fieldName;
+    this.onSelect = options.onSelect || (() => {});
+    this.getDataOption = options.getData;
     this.$dropdown = options.$dropdown;
     this.$dropdownContainer = this.$dropdown.parent();
     this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer');
-    this.$protectedTag = this.$dropdownContainer.find('.js-create-new-protected-tag');
+    this.$createButton = this.$dropdownContainer.find('.js-dropdown-create-new-item');
 
     this.buildDropdown();
     this.bindEvents();
@@ -23,7 +26,7 @@ export default class ProtectedTagDropdown {
 
   buildDropdown() {
     this.$dropdown.glDropdown({
-      data: this.getProtectedTags.bind(this),
+      data: this.getData.bind(this),
       filterable: true,
       remote: false,
       search: {
@@ -31,14 +34,14 @@ export default class ProtectedTagDropdown {
       },
       selectable: true,
       toggleLabel(selected) {
-        return (selected && 'id' in selected) ? selected.title : 'Protected Tag';
+        return (selected && 'id' in selected) ? selected.title : this.defaultToggleLabel;
       },
-      fieldName: 'protected_tag[name]',
-      text(protectedTag) {
-        return _.escape(protectedTag.title);
+      fieldName: this.fieldName,
+      text(item) {
+        return _.escape(item.title);
       },
-      id(protectedTag) {
-        return _.escape(protectedTag.id);
+      id(item) {
+        return _.escape(item.id);
       },
       onFilter: this.toggleCreateNewButton.bind(this),
       clicked: (options) => {
@@ -49,37 +52,37 @@ export default class ProtectedTagDropdown {
   }
 
   bindEvents() {
-    this.$protectedTag.on('click', this.onClickCreateWildcard.bind(this));
+    this.$createButton.on('click', this.onClickCreateWildcard.bind(this));
   }
 
   onClickCreateWildcard(e) {
+    e.preventDefault();
+
+    // Refresh the dropdown's data, which ends up calling `getData`
     this.$dropdown.data('glDropdown').remote.execute();
     this.$dropdown.data('glDropdown').selectRowAtIndex();
-    e.preventDefault();
   }
 
-  getProtectedTags(term, callback) {
-    if (this.selectedTag) {
-      callback(gon.open_tags.concat(this.selectedTag));
-    } else {
-      callback(gon.open_tags);
-    }
+  getData(term, callback) {
+    this.getDataOption(term, (data = []) => {
+      callback(data.concat(this.selectedItem || []));
+    });
   }
 
-  toggleCreateNewButton(tagName) {
-    if (tagName) {
-      this.selectedTag = {
-        title: tagName,
-        id: tagName,
-        text: tagName,
+  toggleCreateNewButton(item) {
+    if (item) {
+      this.selectedItem = {
+        title: item,
+        id: item,
+        text: item,
       };
 
       this.$dropdownContainer
-        .find('.js-create-new-protected-tag code')
-        .text(tagName);
+        .find('.js-dropdown-create-new-item code')
+        .text(item);
     }
 
-    this.toggleFooter(!tagName);
+    this.toggleFooter(!item);
   }
 
   toggleFooter(toggleState) {
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 111da7bbbd4..892719c4e70 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -28,12 +28,9 @@ import Flash from './flash';
 import Issue from './issue';
 import BindInOut from './behaviors/bind_in_out';
 import SecretValues from './behaviors/secret_values';
-import DeleteModal from './branches/branches_delete_modal';
 import Group from './group';
 import ProjectsList from './projects_list';
 import setupProjectEdit from './project_edit';
-import BlobLinePermalinkUpdater from './blob/blob_line_permalink_updater';
-import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import UserCallout from './user_callout';
 import ShortcutsWiki from './shortcuts_wiki';
 import BlobViewer from './blob/viewer/index';
@@ -41,7 +38,6 @@ import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
 import UsersSelect from './users_select';
 import RefSelectDropdown from './ref_select_dropdown';
 import GfmAutoComplete from './gfm_auto_complete';
-import ShortcutsBlob from './shortcuts_blob';
 import Star from './star';
 import TreeView from './tree';
 import Wikis from './wikis';
@@ -53,7 +49,6 @@ import initIssuableSidebar from './init_issuable_sidebar';
 import initProjectVisibilitySelector from './project_visibility';
 import NewGroupChild from './groups/new_group_child';
 import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
-import AjaxLoadingSpinner from './ajax_loading_spinner';
 import GlFieldErrors from './gl_field_errors';
 import GLForm from './gl_form';
 import Shortcuts from './shortcuts';
@@ -80,7 +75,7 @@ import Activities from './activities';
     }
 
     Dispatcher.prototype.initPageScripts = function() {
-      var path, shortcut_handler, fileBlobPermalinkUrlElement, fileBlobPermalinkUrl;
+      var path, shortcut_handler;
       const page = $('body').attr('data-page');
       if (!page) {
         return false;
@@ -105,33 +100,6 @@ import Activities from './activities';
         });
       });
 
-      function initBlob() {
-        new LineHighlighter();
-
-        new BlobLinePermalinkUpdater(
-          document.querySelector('#blob-content-holder'),
-          '.diff-line-num[data-line-number]',
-          document.querySelectorAll('.js-data-file-blob-permalink-url, .js-blob-blame-link'),
-        );
-
-        shortcut_handler = new ShortcutsNavigation();
-        fileBlobPermalinkUrlElement = document.querySelector('.js-data-file-blob-permalink-url');
-        fileBlobPermalinkUrl = fileBlobPermalinkUrlElement && fileBlobPermalinkUrlElement.getAttribute('href');
-        new ShortcutsBlob({
-          skipResetBindings: true,
-          fileBlobPermalinkUrl,
-        });
-
-        new BlobForkSuggestion({
-          openButtons: document.querySelectorAll('.js-edit-blob-link-fork-toggler'),
-          forkButtons: document.querySelectorAll('.js-fork-suggestion-button'),
-          cancelButtons: document.querySelectorAll('.js-cancel-fork-suggestion-button'),
-          suggestionSections: document.querySelectorAll('.js-file-fork-suggestion-section'),
-          actionTextPieces: document.querySelectorAll('.js-file-fork-suggestion-section-action'),
-        })
-          .init();
-      }
-
       const filteredSearchEnabled = gl.FilteredSearchManager && document.querySelector('.filtered-search');
 
       switch (page) {
@@ -243,8 +211,9 @@ import Activities from './activities';
           new NewBranchForm($('.js-create-branch-form'), JSON.parse(document.getElementById('availableRefs').innerHTML));
           break;
         case 'projects:branches:index':
-          AjaxLoadingSpinner.init();
-          new DeleteModal();
+          import('./pages/projects/branches/index')
+            .then(callDefault)
+            .catch(fail);
           break;
         case 'projects:issues:new':
         case 'projects:issues:edit':
@@ -449,20 +418,37 @@ import Activities from './activities';
           shortcut_handler = true;
           break;
         case 'projects:blob:show':
-          new BlobViewer();
-          initBlob();
+          import('./pages/projects/blob/show')
+            .then(callDefault)
+            .catch(fail);
+          shortcut_handler = true;
           break;
         case 'projects:blame:show':
-          initBlob();
+          import('./pages/projects/blame/show')
+            .then(callDefault)
+            .catch(fail);
+          shortcut_handler = true;
           break;
         case 'groups:labels:new':
         case 'groups:labels:edit':
+          new Labels();
+          break;
         case 'projects:labels:new':
+          import('./pages/projects/labels/new')
+            .then(callDefault)
+            .catch(fail);
+          break;
         case 'projects:labels:edit':
-          new Labels();
+          import('./pages/projects/labels/edit')
+            .then(callDefault)
+            .catch(fail);
           break;
-        case 'groups:labels:index':
         case 'projects:labels:index':
+          import('./pages/projects/labels/index')
+            .then(callDefault)
+            .catch(fail);
+          break;
+        case 'groups:labels:index':
           if ($('.prioritized-labels').length) {
             new LabelManager();
           }
diff --git a/app/assets/javascripts/init_labels.js b/app/assets/javascripts/init_labels.js
new file mode 100644
index 00000000000..5f20055510f
--- /dev/null
+++ b/app/assets/javascripts/init_labels.js
@@ -0,0 +1,18 @@
+import LabelManager from './label_manager';
+import GroupLabelSubscription from './group_label_subscription';
+import ProjectLabelSubscription from './project_label_subscription';
+
+export default () => {
+  if ($('.prioritized-labels').length) {
+    new LabelManager(); // eslint-disable-line no-new
+  }
+  $('.label-subscription').each((i, el) => {
+    const $el = $(el);
+
+    if ($el.find('.dropdown-group-label').length) {
+      new GroupLabelSubscription($el); // eslint-disable-line no-new
+    } else {
+      new ProjectLabelSubscription($el); // eslint-disable-line no-new
+    }
+  });
+};
diff --git a/app/assets/javascripts/jobs/components/header.vue b/app/assets/javascripts/jobs/components/header.vue
index 9e3f659db5f..321a4872ccc 100644
--- a/app/assets/javascripts/jobs/components/header.vue
+++ b/app/assets/javascripts/jobs/components/header.vue
@@ -30,8 +30,12 @@
       shouldRenderContent() {
         return !this.isLoading && Object.keys(this.job).length;
       },
+      /**
+       * When job has not started the key will be `false`
+       * When job started the key will be a string with a date.
+       */
       jobStarted() {
-        return this.job.started;
+        return !this.job.started === false;
       },
     },
     watch: {
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 1f18c196137..3c8452ac808 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -271,7 +271,7 @@ Please check your network connection and try again.`;
           <div class="timeline-content timeline-content-form">
             <form
               ref="commentForm"
-              class="new-note js-quick-submit common-note-form gfm-form js-main-target-form"
+              class="new-note common-note-form gfm-form js-main-target-form"
             >
 
               <div class="error-alert"></div>
@@ -301,7 +301,8 @@ js-gfm-input js-autosize markdown-area js-vue-textarea"
                   :disabled="isSubmitting"
                   placeholder="Write a comment or drag your files here..."
                   @keydown.up="editCurrentUserLastNote()"
-                  @keydown.meta.enter="handleSave()">
+                  @keydown.meta.enter="handleSave()"
+                  @keydown.ctrl.enter="handleSave()">
                 </textarea>
               </markdown-field>
               <div class="note-form-actions">
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index aeda3497715..d382a9bb642 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -155,6 +155,7 @@ js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"
           slot="textarea"
           placeholder="Write a comment or drag your files here..."
           @keydown.meta.enter="handleUpdate()"
+          @keydown.ctrl.enter="handleUpdate()"
           @keydown.up="editMyLastNote()"
           @keydown.esc="cancelHandler(true)">
         </textarea>
diff --git a/app/assets/javascripts/pages/projects/blame/show/index.js b/app/assets/javascripts/pages/projects/blame/show/index.js
new file mode 100644
index 00000000000..480357a309c
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/blame/show/index.js
@@ -0,0 +1,3 @@
+import initBlob from '~/pages/projects/init_blob';
+
+export default initBlob;
diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
new file mode 100644
index 00000000000..a3eeb1cefb6
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -0,0 +1,7 @@
+import BlobViewer from '~/blob/viewer/index';
+import initBlob from '~/pages/projects/init_blob';
+
+export default () => {
+  new BlobViewer(); // eslint-disable-line no-new
+  initBlob();
+};
diff --git a/app/assets/javascripts/pages/projects/branches/index/index.js b/app/assets/javascripts/pages/projects/branches/index/index.js
new file mode 100644
index 00000000000..cee0f19bf2a
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/branches/index/index.js
@@ -0,0 +1,7 @@
+import AjaxLoadingSpinner from '~/ajax_loading_spinner';
+import DeleteModal from '~/branches/branches_delete_modal';
+
+export default () => {
+  AjaxLoadingSpinner.init();
+  new DeleteModal(); // eslint-disable-line no-new
+};
diff --git a/app/assets/javascripts/pages/projects/commit/show/index.js b/app/assets/javascripts/pages/projects/commit/show/index.js
index fee4be87e4a..24581460d06 100644
--- a/app/assets/javascripts/pages/projects/commit/show/index.js
+++ b/app/assets/javascripts/pages/projects/commit/show/index.js
@@ -5,6 +5,7 @@ import ShortcutsNavigation from '~/shortcuts_navigation';
 import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown';
 import initNotes from '~/init_notes';
 import initChangesDropdown from '~/init_changes_dropdown';
+import { fetchCommitMergeRequests } from './commit_merge_requests';
 
 export default () => {
   new Diff();
@@ -17,4 +18,5 @@ export default () => {
   const stickyBarPaddingTop = 16;
   initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight - stickyBarPaddingTop);
   $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
+  fetchCommitMergeRequests();
 };
diff --git a/app/assets/javascripts/pages/projects/init_blob.js b/app/assets/javascripts/pages/projects/init_blob.js
new file mode 100644
index 00000000000..26f0ad46114
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/init_blob.js
@@ -0,0 +1,33 @@
+import LineHighlighter from '~/line_highlighter';
+import BlobLinePermalinkUpdater from '~/blob/blob_line_permalink_updater';
+import ShortcutsNavigation from '~/shortcuts_navigation';
+import ShortcutsBlob from '~/shortcuts_blob';
+import BlobForkSuggestion from '~/blob/blob_fork_suggestion';
+
+export default () => {
+  new LineHighlighter(); // eslint-disable-line no-new
+
+  new BlobLinePermalinkUpdater( // eslint-disable-line no-new
+    document.querySelector('#blob-content-holder'),
+    '.diff-line-num[data-line-number]',
+    document.querySelectorAll('.js-data-file-blob-permalink-url, .js-blob-blame-link'),
+  );
+
+  const fileBlobPermalinkUrlElement = document.querySelector('.js-data-file-blob-permalink-url');
+  const fileBlobPermalinkUrl = fileBlobPermalinkUrlElement && fileBlobPermalinkUrlElement.getAttribute('href');
+
+  new ShortcutsNavigation(); // eslint-disable-line no-new
+
+  new ShortcutsBlob({ // eslint-disable-line no-new
+    skipResetBindings: true,
+    fileBlobPermalinkUrl,
+  });
+
+  new BlobForkSuggestion({ // eslint-disable-line no-new
+    openButtons: document.querySelectorAll('.js-edit-blob-link-fork-toggler'),
+    forkButtons: document.querySelectorAll('.js-fork-suggestion-button'),
+    cancelButtons: document.querySelectorAll('.js-cancel-fork-suggestion-button'),
+    suggestionSections: document.querySelectorAll('.js-file-fork-suggestion-section'),
+    actionTextPieces: document.querySelectorAll('.js-file-fork-suggestion-section-action'),
+  }).init();
+};
diff --git a/app/assets/javascripts/pages/projects/labels/edit/index.js b/app/assets/javascripts/pages/projects/labels/edit/index.js
new file mode 100644
index 00000000000..72c5e4744ac
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/labels/edit/index.js
@@ -0,0 +1,3 @@
+import Labels from '~/labels';
+
+export default () => new Labels();
diff --git a/app/assets/javascripts/pages/projects/labels/index/index.js b/app/assets/javascripts/pages/projects/labels/index/index.js
new file mode 100644
index 00000000000..018345fa112
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/labels/index/index.js
@@ -0,0 +1,3 @@
+import initLabels from '~/init_labels';
+
+export default initLabels;
diff --git a/app/assets/javascripts/pages/projects/labels/new/index.js b/app/assets/javascripts/pages/projects/labels/new/index.js
new file mode 100644
index 00000000000..72c5e4744ac
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/labels/new/index.js
@@ -0,0 +1,3 @@
+import Labels from '~/labels';
+
+export default () => new Labels();
diff --git a/app/assets/javascripts/projects_dropdown/index.js b/app/assets/javascripts/projects_dropdown/index.js
index 2660da3c558..e78ebce2923 100644
--- a/app/assets/javascripts/projects_dropdown/index.js
+++ b/app/assets/javascripts/projects_dropdown/index.js
@@ -19,11 +19,8 @@ document.addEventListener('DOMContentLoaded', () => {
     return;
   }
 
-  $(navEl).on('show.bs.dropdown', (e) => {
-    const dropdownEl = $(e.currentTarget).find('.projects-dropdown-menu');
-    dropdownEl.one('transitionend', () => {
-      eventHub.$emit('dropdownOpen');
-    });
+  $(navEl).on('shown.bs.dropdown', () => {
+    eventHub.$emit('dropdownOpen');
   });
 
   // eslint-disable-next-line no-new
diff --git a/app/assets/javascripts/protected_branches/protected_branch_create.js b/app/assets/javascripts/protected_branches/protected_branch_create.js
index 0a9fdb074e5..2948baeab11 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_create.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_create.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import ProtectedBranchAccessDropdown from './protected_branch_access_dropdown';
-import ProtectedBranchDropdown from './protected_branch_dropdown';
+import CreateItemDropdown from '../create_item_dropdown';
 import AccessorUtilities from '../lib/utils/accessor';
 
 const PB_LOCAL_STORAGE_KEY = 'protected-branches-defaults';
@@ -35,10 +35,12 @@ export default class ProtectedBranchCreate {
       onSelect: this.onSelectCallback,
     });
 
-    // Protected branch dropdown
-    this.protectedBranchDropdown = new ProtectedBranchDropdown({
+    this.createItemDropdown = new CreateItemDropdown({
       $dropdown: $protectedBranchDropdown,
+      defaultToggleLabel: 'Protected Branch',
+      fieldName: 'protected_branch[name]',
       onSelect: this.onSelectCallback,
+      getData: ProtectedBranchCreate.getProtectedBranches,
     });
 
     this.loadPreviousSelection($allowedToMergeDropdown.data('glDropdown'), $allowedToPushDropdown.data('glDropdown'));
@@ -60,6 +62,10 @@ export default class ProtectedBranchCreate {
     this.$form.find('input[type="submit"]').attr('disabled', completedForm);
   }
 
+  static getProtectedBranches(term, callback) {
+    callback(gon.open_branches);
+  }
+
   loadPreviousSelection(mergeDropdown, pushDropdown) {
     let mergeIndex = 0;
     let pushIndex = 0;
diff --git a/app/assets/javascripts/protected_branches/protected_branch_dropdown.js b/app/assets/javascripts/protected_branches/protected_branch_dropdown.js
deleted file mode 100644
index 678882a8d2c..00000000000
--- a/app/assets/javascripts/protected_branches/protected_branch_dropdown.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import _ from 'underscore';
-
-export default class ProtectedBranchDropdown {
-  /**
-   * @param {Object} options containing
-   *                         `$dropdown` target element
-   *                          `onSelect` event callback
-   * $dropdown must be an element created using `dropdown_branch()` rails helper
-   */
-  constructor(options) {
-    this.onSelect = options.onSelect;
-    this.$dropdown = options.$dropdown;
-    this.$dropdownContainer = this.$dropdown.parent();
-    this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer');
-    this.$protectedBranch = this.$dropdownContainer.find('.js-create-new-protected-branch');
-
-    this.buildDropdown();
-    this.bindEvents();
-
-    // Hide footer
-    this.toggleFooter(true);
-  }
-
-  buildDropdown() {
-    this.$dropdown.glDropdown({
-      data: this.getProtectedBranches.bind(this),
-      filterable: true,
-      remote: false,
-      search: {
-        fields: ['title'],
-      },
-      selectable: true,
-      toggleLabel(selected) {
-        return (selected && 'id' in selected) ? selected.title : 'Protected Branch';
-      },
-      fieldName: 'protected_branch[name]',
-      text(protectedBranch) {
-        return _.escape(protectedBranch.title);
-      },
-      id(protectedBranch) {
-        return _.escape(protectedBranch.id);
-      },
-      onFilter: this.toggleCreateNewButton.bind(this),
-      clicked: (options) => {
-        options.e.preventDefault();
-        this.onSelect();
-      },
-    });
-  }
-
-  bindEvents() {
-    this.$protectedBranch.on('click', this.onClickCreateWildcard.bind(this));
-  }
-
-  onClickCreateWildcard(e) {
-    e.preventDefault();
-
-    // Refresh the dropdown's data, which ends up calling `getProtectedBranches`
-    this.$dropdown.data('glDropdown').remote.execute();
-    this.$dropdown.data('glDropdown').selectRowAtIndex();
-  }
-
-  getProtectedBranches(term, callback) {
-    if (this.selectedBranch) {
-      callback(gon.open_branches.concat(this.selectedBranch));
-    } else {
-      callback(gon.open_branches);
-    }
-  }
-
-  toggleCreateNewButton(branchName) {
-    if (branchName) {
-      this.selectedBranch = {
-        title: branchName,
-        id: branchName,
-        text: branchName,
-      };
-
-      this.$dropdownContainer
-        .find('.js-create-new-protected-branch code')
-        .text(branchName);
-    }
-
-    this.toggleFooter(!branchName);
-  }
-
-  toggleFooter(toggleState) {
-    this.$dropdownFooter.toggleClass('hidden', toggleState);
-  }
-}
diff --git a/app/assets/javascripts/protected_tags/protected_tag_create.js b/app/assets/javascripts/protected_tags/protected_tag_create.js
index 91bd140bd12..d1e4a75c17b 100644
--- a/app/assets/javascripts/protected_tags/protected_tag_create.js
+++ b/app/assets/javascripts/protected_tags/protected_tag_create.js
@@ -1,5 +1,5 @@
 import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
-import ProtectedTagDropdown from './protected_tag_dropdown';
+import CreateItemDropdown from '../create_item_dropdown';
 
 export default class ProtectedTagCreate {
   constructor() {
@@ -24,9 +24,12 @@ export default class ProtectedTagCreate {
     $allowedToCreateDropdown.data('glDropdown').selectRowAtIndex(0);
 
     // Protected tag dropdown
-    this.protectedTagDropdown = new ProtectedTagDropdown({
+    this.createItemDropdown = new CreateItemDropdown({
       $dropdown: this.$form.find('.js-protected-tag-select'),
+      defaultToggleLabel: 'Protected Tag',
+      fieldName: 'protected_tag[name]',
       onSelect: this.onSelectCallback,
+      getData: ProtectedTagCreate.getProtectedTags,
     });
   }
 
@@ -38,4 +41,8 @@ export default class ProtectedTagCreate {
 
     this.$form.find('input[type="submit"]').attr('disabled', !($tagInput.val() && $allowedToCreateInput.length));
   }
+
+  static getProtectedTags(term, callback) {
+    callback(gon.open_tags);
+  }
 }
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
index 7226076a8fc..d69d100a26c 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
@@ -1,12 +1,22 @@
 <script>
-  /* eslint-disable vue/require-default-prop */
-  import { __ } from '../../../locale';
+  import { __ } from '~/locale';
+  import icon from '~/vue_shared/components/icon.vue';
+  import toggleButton from '~/vue_shared/components/toggle_button.vue';
+  import tooltip from '~/vue_shared/directives/tooltip';
   import eventHub from '../../event_hub';
-  import loadingButton from '../../../vue_shared/components/loading_button.vue';
+
+  const ICON_ON = 'notifications';
+  const ICON_OFF = 'notifications-off';
+  const LABEL_ON = __('Notifications on');
+  const LABEL_OFF = __('Notifications off');
 
   export default {
+    directives: {
+      tooltip,
+    },
     components: {
-      loadingButton,
+      icon,
+      toggleButton,
     },
     props: {
       loading: {
@@ -17,22 +27,23 @@
       subscribed: {
         type: Boolean,
         required: false,
+        default: null,
       },
       id: {
         type: Number,
         required: false,
+        default: null,
       },
     },
     computed: {
-      buttonLabel() {
-        let label;
-        if (this.subscribed === false) {
-          label = __('Subscribe');
-        } else if (this.subscribed === true) {
-          label = __('Unsubscribe');
-        }
-
-        return label;
+      showLoadingState() {
+        return this.subscribed === null;
+      },
+      notificationIcon() {
+        return this.subscribed ? ICON_ON : ICON_OFF;
+      },
+      notificationTooltip() {
+        return this.subscribed ? LABEL_ON : LABEL_OFF;
       },
     },
     methods: {
@@ -46,21 +57,29 @@
 <template>
   <div>
     <div class="sidebar-collapsed-icon">
-      <i
-        class="fa fa-rss"
-        aria-hidden="true"
+      <span
+        v-tooltip
+        :title="notificationTooltip"
+        data-container="body"
+        data-placement="left"
       >
-      </i>
+        <icon
+          :name="notificationIcon"
+          :size="16"
+          aria-hidden="true"
+          class="sidebar-item-icon is-active"
+        />
+      </span>
     </div>
     <span class="issuable-header-text hide-collapsed pull-left">
       {{ __('Notifications') }}
     </span>
-    <loading-button
-      ref="loadingButton"
-      class="btn btn-default pull-right hide-collapsed js-issuable-subscribe-button"
-      :loading="loading"
-      :label="buttonLabel"
-      @click="toggleSubscription"
+    <toggle-button
+      ref="toggleButton"
+      class="pull-right hide-collapsed js-issuable-subscribe-button"
+      :is-loading="showLoadingState"
+      :value="subscribed"
+      @change="toggleSubscription"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue
index 2b12718ae96..09031d3ffa1 100644
--- a/app/assets/javascripts/vue_shared/components/toggle_button.vue
+++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue
@@ -23,11 +23,12 @@
       name: {
         type: String,
         required: false,
-        default: '',
+        default: null,
       },
       value: {
         type: Boolean,
-        required: true,
+        required: false,
+        default: null,
       },
       disabledInput: {
         type: Boolean,
@@ -61,6 +62,7 @@
 <template>
   <label class="toggle-wrapper">
     <input
+      v-if="name"
       type="hidden"
       :name="name"
       :value="value"
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index d1b3754d4ef..1d2303a3a2b 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -666,6 +666,16 @@
   }
 }
 
+.dropdown-create-new-item-button {
+  @include dropdown-link;
+
+  width: 100%;
+  background-color: transparent;
+  border: 0;
+  text-align: left;
+  text-overflow: ellipsis;
+}
+
 .dropdown-loading {
   position: absolute;
   top: 0;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index ad160f37641..3b7256f3000 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -104,7 +104,10 @@
 
       img {
         height: 28px;
-        margin-right: 8px;
+
+        + .logo-text {
+          margin-left: 8px;
+        }
       }
 
       &.wrap {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index ae9a8b0182c..759719a72da 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -162,10 +162,6 @@
       border: 0;
     }
 
-    span {
-      display: inline-block;
-    }
-
     .select2-container span {
       margin-top: 0;
     }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 61a76d0387a..bf41005b6d5 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -895,17 +895,6 @@ pre.light-well {
   }
 }
 
-.create-new-protected-branch-button,
-.create-new-protected-tag-button {
-  @include dropdown-link;
-
-  width: 100%;
-  background-color: transparent;
-  border: 0;
-  text-align: left;
-  text-overflow: ellipsis;
-}
-
 .protected-branches-list,
 .protected-tags-list {
   margin-bottom: 30px;