Merge branch 'master' into bootstrap4

31 files changed, 200 insertions, 355 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index 466a5b5d635..24d63b99a29 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -55,22 +55,20 @@
     },
     methods: {
       successCallback(resp) {
-        return resp.json().then((response) => {
-          // depending of the endpoint the response can either bring a `pipelines` key or not.
-          const pipelines = response.pipelines || response;
-          this.setCommonData(pipelines);
+        // depending of the endpoint the response can either bring a `pipelines` key or not.
+        const pipelines = resp.data.pipelines || resp.data;
+        this.setCommonData(pipelines);
 
-          const updatePipelinesEvent = new CustomEvent('update-pipelines-count', {
-            detail: {
-              pipelines: response,
-            },
-          });
-
-          // notifiy to update the count in tabs
-          if (this.$el.parentElement) {
-            this.$el.parentElement.dispatchEvent(updatePipelinesEvent);
-          }
+        const updatePipelinesEvent = new CustomEvent('update-pipelines-count', {
+          detail: {
+            pipelines: resp.data,
+          },
         });
+
+        // notifiy to update the count in tabs
+        if (this.$el.parentElement) {
+          this.$el.parentElement.dispatchEvent(updatePipelinesEvent);
+        }
       },
     },
   };
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index a195162b7f2..e18972f4298 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -22,7 +22,7 @@ export default {
     ...mapState(['rightPanelCollapsed', 'viewer', 'delayViewerUpdated', 'panelResizing']),
     ...mapGetters(['currentMergeRequest']),
     shouldHideEditor() {
-      return this.file && this.file.binary && !this.file.raw;
+      return this.file && this.file.binary && !this.file.content;
     },
     editTabCSS() {
       return {
@@ -212,7 +212,7 @@ export default {
     <content-viewer
       v-if="shouldHideEditor || file.viewMode === 'preview'"
       :content="file.content || file.raw"
-      :path="file.rawPath"
+      :path="file.rawPath || file.path"
       :file-size="file.size"
       :project-path="file.projectId"/>
   </div>
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index ed72ffc532b..b4daeb7067b 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1190,12 +1190,12 @@ export default class Notes {
     addForm = false;
     let lineTypeSelector = '';
     rowCssToAdd =
-      '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line" colspan="2"></td><td class="notes_content"><div class="content discussion-notes"></div></td></tr>';
+      '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line" colspan="2"></td><td class="notes_content"><div class="content"></div></td></tr>';
     // In parallel view, look inside the correct left/right pane
     if (this.isParallelView()) {
       lineTypeSelector = `.${lineType}`;
       rowCssToAdd =
-        '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line old"></td><td class="notes_content parallel old"><div class="content discussion-notes"></div></td><td class="notes_line new"></td><td class="notes_content parallel new"><div class="content discussion-notes"></div></td></tr>';
+        '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line old"></td><td class="notes_content parallel old"><div class="content"></div></td><td class="notes_line new"></td><td class="notes_content parallel new"><div class="content"></div></td></tr>';
     }
     const notesContentSelector = `.notes_content${lineTypeSelector} .content`;
     let notesContent = targetRow.find(notesContentSelector);
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 439d5fb895f..8d7f65d6a68 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -317,10 +317,10 @@ Please check your network connection and try again.`;
     <note-signed-out-widget v-if="!isLoggedIn" />
     <discussion-locked-widget
       issuable-type="issue"
-      v-else-if="!canCreateNote"
+      v-else-if="isLocked(getNoteableData) && !canCreateNote"
     />
     <ul
-      v-else
+      v-else-if="canCreateNote"
       class="notes notes-form timeline">
       <li class="timeline-entry">
         <div class="timeline-entry-inner">
diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index a7e2d857013..626b0799581 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/app/assets/javascripts/notes/components/note_actions.vue
@@ -40,6 +40,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    canAwardEmoji: {
+      type: Boolean,
+      required: true,
+    },
     canDelete: {
       type: Boolean,
       required: true,
@@ -74,9 +78,6 @@ export default {
     shouldShowActionsDropdown() {
       return this.currentUserId && (this.canEdit || this.canReportAsAbuse);
     },
-    canAddAwardEmoji() {
-      return this.currentUserId;
-    },
     isAuthoredByCurrentUser() {
       return this.authorId === this.currentUserId;
     },
@@ -149,7 +150,7 @@ export default {
       </button>
     </div>
     <div
-      v-if="canAddAwardEmoji"
+      v-if="canAwardEmoji"
       class="note-actions-item">
       <a
         v-tooltip
diff --git a/app/assets/javascripts/notes/components/note_awards_list.vue b/app/assets/javascripts/notes/components/note_awards_list.vue
index 6cb8229e268..e8fd155a1ee 100644
--- a/app/assets/javascripts/notes/components/note_awards_list.vue
+++ b/app/assets/javascripts/notes/components/note_awards_list.vue
@@ -28,6 +28,10 @@ export default {
       type: Number,
       required: true,
     },
+    canAwardEmoji: {
+      type: Boolean,
+      required: true,
+    },
   },
   computed: {
     ...mapGetters(['getUserData']),
@@ -67,9 +71,6 @@ export default {
     isAuthoredByMe() {
       return this.noteAuthorId === this.getUserData.id;
     },
-    isLoggedIn() {
-      return this.getUserData.id;
-    },
   },
   created() {
     this.emojiSmiling = emojiSmiling;
@@ -156,7 +157,7 @@ export default {
       return title;
     },
     handleAward(awardName) {
-      if (!this.isLoggedIn) {
+      if (!this.canAwardEmoji) {
         return;
       }
 
@@ -208,7 +209,7 @@ export default {
         </span>
       </button>
       <div
-        v-if="isLoggedIn"
+        v-if="canAwardEmoji"
         class="award-menu-holder">
         <button
           v-tooltip
diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index 069f94c5845..0cb626c14f4 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/app/assets/javascripts/notes/components/note_body.vue
@@ -112,6 +112,7 @@ export default {
       :note-author-id="note.author.id"
       :awards="note.award_emoji"
       :toggle-award-path="note.toggle_award_path"
+      :can-award-emoji="note.current_user.can_award_emoji"
     />
     <note-attachment
       v-if="note.attachment"
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 64283fa5f37..7b9ff2b14f1 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -258,7 +258,9 @@ Please check your network connection and try again.`;
                     :key="note.id"
                   />
                 </ul>
-                <div class="discussion-reply-holder">
+                <div
+                  :class="{ 'is-replying': isReplying }"
+                  class="discussion-reply-holder">
                   <template v-if="!isReplying && canReply">
                     <div
                       class="btn-group d-flex discussion-with-resolve-btn"
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index 3554027d2b4..566f5c68e66 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -177,6 +177,7 @@ export default {
             :note-id="note.id"
             :access-level="note.human_access"
             :can-edit="note.current_user.can_edit"
+            :can-award-emoji="note.current_user.can_award_emoji"
             :can-delete="note.current_user.can_edit"
             :can-report-as-abuse="canReportAsAbuse"
             :report-abuse-path="note.report_abuse_path"
diff --git a/app/assets/javascripts/pages/projects/edit/index.js b/app/assets/javascripts/pages/projects/edit/index.js
index be37df36be8..628913483c6 100644
--- a/app/assets/javascripts/pages/projects/edit/index.js
+++ b/app/assets/javascripts/pages/projects/edit/index.js
@@ -1,12 +1,12 @@
 import initSettingsPanels from '~/settings_panels';
 import setupProjectEdit from '~/project_edit';
 import initConfirmDangerModal from '~/confirm_danger_modal';
-import ProjectNew from '../shared/project_new';
+import initProjectLoadingSpinner from '../shared/save_project_loader';
 import projectAvatar from '../shared/project_avatar';
 import initProjectPermissionsSettings from '../shared/permissions';
 
 document.addEventListener('DOMContentLoaded', () => {
-  new ProjectNew(); // eslint-disable-line no-new
+  initProjectLoadingSpinner();
   setupProjectEdit();
   // Initialize expandable settings panels
   initSettingsPanels();
diff --git a/app/assets/javascripts/pages/projects/new/index.js b/app/assets/javascripts/pages/projects/new/index.js
index ea6fd961393..7db644e2477 100644
--- a/app/assets/javascripts/pages/projects/new/index.js
+++ b/app/assets/javascripts/pages/projects/new/index.js
@@ -1,9 +1,9 @@
-import ProjectNew from '../shared/project_new';
+import initProjectLoadingSpinner from '../shared/save_project_loader';
 import initProjectVisibilitySelector from '../../../project_visibility';
 import initProjectNew from '../../../projects/project_new';
 
 document.addEventListener('DOMContentLoaded', () => {
-  new ProjectNew(); // eslint-disable-line no-new
+  initProjectLoadingSpinner();
   initProjectVisibilitySelector();
   initProjectNew.bindEvents();
 });
diff --git a/app/assets/javascripts/pages/projects/shared/project_new.js b/app/assets/javascripts/pages/projects/shared/project_new.js
deleted file mode 100644
index 56d5574aa2f..00000000000
--- a/app/assets/javascripts/pages/projects/shared/project_new.js
+++ /dev/null
@@ -1,152 +0,0 @@
-/* eslint-disable func-names, no-var, no-underscore-dangle, prefer-template, prefer-arrow-callback*/
-
-import $ from 'jquery';
-import VisibilitySelect from '../../../visibility_select';
-
-function highlightChanges($elm) {
-  $elm.addClass('highlight-changes');
-  setTimeout(() => $elm.removeClass('highlight-changes'), 10);
-}
-
-export default class ProjectNew {
-  constructor() {
-    this.toggleSettings = this.toggleSettings.bind(this);
-    this.$selects = $('.features select');
-    this.$repoSelects = this.$selects.filter('.js-repo-select');
-    this.$projectSelects = this.$selects.not('.js-repo-select');
-
-    $('.project-edit-container').on('ajax:before', () => {
-      $('.project-edit-container').hide();
-      return $('.save-project-loader').show();
-    });
-
-    this.initVisibilitySelect();
-
-    this.toggleSettings();
-    this.toggleSettingsOnclick();
-    this.toggleRepoVisibility();
-  }
-
-  initVisibilitySelect() {
-    const visibilityContainer = document.querySelector('.js-visibility-select');
-    if (!visibilityContainer) return;
-    const visibilitySelect = new VisibilitySelect(visibilityContainer);
-    visibilitySelect.init();
-
-    const $visibilitySelect = $(visibilityContainer).find('select');
-    let projectVisibility = $visibilitySelect.val();
-    const PROJECT_VISIBILITY_PRIVATE = '0';
-
-    $visibilitySelect.on('change', () => {
-      const newProjectVisibility = $visibilitySelect.val();
-
-      if (projectVisibility !== newProjectVisibility) {
-        this.$projectSelects.each((idx, select) => {
-          const $select = $(select);
-          const $options = $select.find('option');
-          const values = $.map($options, e => e.value);
-
-          // if switched to "private", limit visibility options
-          if (newProjectVisibility === PROJECT_VISIBILITY_PRIVATE) {
-            if ($select.val() !== values[0] && $select.val() !== values[1]) {
-              $select.val(values[1]).trigger('change');
-              highlightChanges($select);
-            }
-            $options.slice(2).disable();
-          }
-
-          // if switched from "private", increase visibility for non-disabled options
-          if (projectVisibility === PROJECT_VISIBILITY_PRIVATE) {
-            $options.enable();
-            if ($select.val() !== values[0] && $select.val() !== values[values.length - 1]) {
-              $select.val(values[values.length - 1]).trigger('change');
-              highlightChanges($select);
-            }
-          }
-        });
-
-        projectVisibility = newProjectVisibility;
-      }
-    });
-  }
-
-  toggleSettings() {
-    this.$selects.each(function () {
-      var $select = $(this);
-      var className = $select.data('field')
-        .replace(/_/g, '-')
-        .replace('access-level', 'feature');
-      ProjectNew._showOrHide($select, '.' + className);
-    });
-  }
-
-  toggleSettingsOnclick() {
-    this.$selects.on('change', this.toggleSettings);
-  }
-
-  static _showOrHide(checkElement, container) {
-    const $container = $(container);
-
-    if ($(checkElement).val() !== '0') {
-      return $container.show();
-    }
-    return $container.hide();
-  }
-
-  toggleRepoVisibility() {
-    var $repoAccessLevel = $('.js-repo-access-level select');
-    var $lfsEnabledOption = $('.js-lfs-enabled select');
-    var containerRegistry = document.querySelectorAll('.js-container-registry')[0];
-    var containerRegistryCheckbox = document.getElementById('project_container_registry_enabled');
-    var prevSelectedVal = parseInt($repoAccessLevel.val(), 10);
-
-    this.$repoSelects.find("option[value='" + $repoAccessLevel.val() + "']")
-      .nextAll()
-      .hide();
-
-    $repoAccessLevel
-      .off('change')
-      .on('change', function () {
-        var selectedVal = parseInt($repoAccessLevel.val(), 10);
-
-        this.$repoSelects.each(function () {
-          var $this = $(this);
-          var repoSelectVal = parseInt($this.val(), 10);
-
-          $this.find('option').enable();
-
-          if (selectedVal < repoSelectVal || repoSelectVal === prevSelectedVal) {
-            $this.val(selectedVal).trigger('change');
-            highlightChanges($this);
-          }
-
-          $this.find("option[value='" + selectedVal + "']").nextAll().disable();
-        });
-
-        if (selectedVal) {
-          this.$repoSelects.removeClass('disabled');
-
-          if ($lfsEnabledOption.length) {
-            $lfsEnabledOption.removeClass('disabled');
-            highlightChanges($lfsEnabledOption);
-          }
-          if (containerRegistry) {
-            containerRegistry.style.display = '';
-          }
-        } else {
-          this.$repoSelects.addClass('disabled');
-
-          if ($lfsEnabledOption.length) {
-            $lfsEnabledOption.val('false').addClass('disabled');
-            highlightChanges($lfsEnabledOption);
-          }
-          if (containerRegistry) {
-            containerRegistry.style.display = 'none';
-            containerRegistryCheckbox.checked = false;
-          }
-        }
-
-        prevSelectedVal = selectedVal;
-      }.bind(this));
-  }
-}
diff --git a/app/assets/javascripts/pages/projects/shared/save_project_loader.js b/app/assets/javascripts/pages/projects/shared/save_project_loader.js
new file mode 100644
index 00000000000..aa3589ac88d
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/shared/save_project_loader.js
@@ -0,0 +1,12 @@
+import $ from 'jquery';
+
+export default function initProjectLoadingSpinner() {
+  const $formContainer = $('.project-edit-container');
+  const $loadingSpinner = $('.save-project-loader');
+
+  // show loading spinner when saving
+  $formContainer.on('ajax:before', () => {
+    $formContainer.hide();
+    $loadingSpinner.show();
+  });
+}
diff --git a/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js b/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js
index 08f0afdcce3..d321892d2d2 100644
--- a/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js
+++ b/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js
@@ -5,7 +5,7 @@ import AccessorUtilities from '~/lib/utils/accessor';
  * Does that setting the current selected tab in the localStorage
  */
 export default class SigninTabsMemoizer {
-  constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.nav-tabs' } = {}) {
+  constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.new-session-tabs' } = {}) {
     this.currentTabKey = currentTabKey;
     this.tabSelector = tabSelector;
     this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index e0a7284124d..497a09cec65 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -7,10 +7,7 @@
   import TablePagination from '../../vue_shared/components/table_pagination.vue';
   import NavigationTabs from '../../vue_shared/components/navigation_tabs.vue';
   import NavigationControls from './nav_controls.vue';
-  import {
-    getParameterByName,
-    parseQueryStringIntoObject,
-  } from '../../lib/utils/common_utils';
+  import { getParameterByName } from '../../lib/utils/common_utils';
   import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
 
   export default {
@@ -19,10 +16,7 @@
       NavigationTabs,
       NavigationControls,
     },
-    mixins: [
-      pipelinesMixin,
-      CIPaginationMixin,
-    ],
+    mixins: [pipelinesMixin, CIPaginationMixin],
     props: {
       store: {
         type: Object,
@@ -147,25 +141,26 @@
        */
       shouldRenderTabs() {
         const { stateMap } = this.$options;
-        return this.hasMadeRequest &&
-          [
-            stateMap.loading,
-            stateMap.tableList,
-            stateMap.error,
-            stateMap.emptyTab,
-          ].includes(this.stateToRender);
+        return (
+          this.hasMadeRequest &&
+          [stateMap.loading, stateMap.tableList, stateMap.error, stateMap.emptyTab].includes(
+            this.stateToRender,
+          )
+        );
       },
 
       shouldRenderButtons() {
-        return (this.newPipelinePath ||
-          this.resetCachePath ||
-          this.ciLintPath) && this.shouldRenderTabs;
+        return (
+          (this.newPipelinePath || this.resetCachePath || this.ciLintPath) && this.shouldRenderTabs
+        );
       },
 
       shouldRenderPagination() {
-        return !this.isLoading &&
+        return (
+          !this.isLoading &&
           this.state.pipelines.length &&
-          this.state.pageInfo.total > this.state.pageInfo.perPage;
+          this.state.pageInfo.total > this.state.pageInfo.perPage
+        );
       },
 
       emptyTabMessage() {
@@ -229,15 +224,13 @@
     },
     methods: {
       successCallback(resp) {
-        return resp.json().then((response) => {
-          // Because we are polling & the user is interacting verify if the response received
-          // matches the last request made
-          if (_.isEqual(parseQueryStringIntoObject(resp.url.split('?')[1]), this.requestData)) {
-            this.store.storeCount(response.count);
-            this.store.storePagination(resp.headers);
-            this.setCommonData(response.pipelines);
-          }
-        });
+        // Because we are polling & the user is interacting verify if the response received
+        // matches the last request made
+        if (_.isEqual(resp.config.params, this.requestData)) {
+          this.store.storeCount(resp.data.count);
+          this.store.storePagination(resp.headers);
+          this.setCommonData(resp.data.pipelines);
+        }
       },
       /**
        * Handles URL and query parameter changes.
@@ -251,8 +244,9 @@
         this.updateInternalState(parameters);
 
         // fetch new data
-        return this.service.getPipelines(this.requestData)
-          .then((response) => {
+        return this.service
+          .getPipelines(this.requestData)
+          .then(response => {
             this.isLoading = false;
             this.successCallback(response);
 
@@ -271,13 +265,11 @@
       handleResetRunnersCache(endpoint) {
         this.isResetCacheButtonLoading = true;
 
-        this.service.postAction(endpoint)
+        this.service
+          .postAction(endpoint)
           .then(() => {
             this.isResetCacheButtonLoading = false;
-            createFlash(
-              s__('Pipelines|Project cache successfully reset.'),
-              'notice',
-            );
+            createFlash(s__('Pipelines|Project cache successfully reset.'), 'notice');
           })
           .catch(() => {
             this.isResetCacheButtonLoading = false;
diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index 8bc7a1f20b2..b3fcaf0ccd1 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -13,16 +13,16 @@
    * 3. Merge request widget
    * 4. Commit widget
    */
-
+  import axios from '../../lib/utils/axios_utils';
   import Flash from '../../flash';
-  import icon from '../../vue_shared/components/icon.vue';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+  import Icon from '../../vue_shared/components/icon.vue';
+  import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
 
   export default {
     components: {
-      loadingIcon,
-      icon,
+      LoadingIcon,
+      Icon,
     },
 
     directives: {
@@ -88,9 +88,8 @@
       },
 
       fetchJobs() {
-        this.$http.get(this.stage.dropdown_path)
-          .then(response => response.json())
-          .then((data) => {
+        axios.get(this.stage.dropdown_path)
+          .then(({ data }) => {
             this.dropdownContent = data.html;
             this.isLoading = false;
           })
@@ -98,8 +97,7 @@
             this.closeDropdown();
             this.isLoading = false;
 
-            const flash = new Flash('Something went wrong on our end.');
-            return flash;
+            Flash('Something went wrong on our end.');
           });
       },
 
diff --git a/app/assets/javascripts/pipelines/pipeline_details_mediator.js b/app/assets/javascripts/pipelines/pipeline_details_mediator.js
index 621969cd622..5633e54b28a 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_mediator.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_mediator.js
@@ -40,10 +40,8 @@ export default class pipelinesMediator {
   }
 
   successCallback(response) {
-    return response.json().then((data) => {
-      this.state.isLoading = false;
-      this.store.storePipeline(data);
-    });
+    this.state.isLoading = false;
+    this.store.storePipeline(response.data);
   }
 
   errorCallback() {
diff --git a/app/assets/javascripts/pipelines/services/pipeline_service.js b/app/assets/javascripts/pipelines/services/pipeline_service.js
index 3e0c52c7726..a53a9cc8365 100644
--- a/app/assets/javascripts/pipelines/services/pipeline_service.js
+++ b/app/assets/javascripts/pipelines/services/pipeline_service.js
@@ -1,19 +1,16 @@
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
+import axios from '../../lib/utils/axios_utils';
 
 export default class PipelineService {
   constructor(endpoint) {
-    this.pipeline = Vue.resource(endpoint);
+    this.pipeline = endpoint;
   }
 
   getPipeline() {
-    return this.pipeline.get();
+    return axios.get(this.pipeline);
   }
 
-  // eslint-disable-next-line
+  // eslint-disable-next-line class-methods-use-this
   postAction(endpoint) {
-    return Vue.http.post(`${endpoint}.json`);
+    return axios.post(`${endpoint}.json`);
   }
 }
diff --git a/app/assets/javascripts/pipelines/services/pipelines_service.js b/app/assets/javascripts/pipelines/services/pipelines_service.js
index 47736fc5f42..001286f5d52 100644
--- a/app/assets/javascripts/pipelines/services/pipelines_service.js
+++ b/app/assets/javascripts/pipelines/services/pipelines_service.js
@@ -1,35 +1,27 @@
-/* eslint-disable class-methods-use-this */
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-import '../../vue_shared/vue_resource_interceptor';
-
-Vue.use(VueResource);
+import axios from '../../lib/utils/axios_utils';
 
 export default class PipelinesService {
-
   /**
-  * Commits and merge request endpoints need to be requested with `.json`.
-  *
-  * The url provided to request the pipelines in the new merge request
-  * page already has `.json`.
-  *
-  * @param  {String} root
-  */
+   * Commits and merge request endpoints need to be requested with `.json`.
+   *
+   * The url provided to request the pipelines in the new merge request
+   * page already has `.json`.
+   *
+   * @param  {String} root
+   */
   constructor(root) {
-    let endpoint;
-
     if (root.indexOf('.json') === -1) {
-      endpoint = `${root}.json`;
+      this.endpoint = `${root}.json`;
     } else {
-      endpoint = root;
+      this.endpoint = root;
     }
-
-    this.pipelines = Vue.resource(endpoint);
   }
 
   getPipelines(data = {}) {
     const { scope, page } = data;
-    return this.pipelines.get({ scope, page });
+    return axios.get(this.endpoint, {
+      params: { scope, page },
+    });
   }
 
   /**
@@ -38,7 +30,8 @@ export default class PipelinesService {
    * @param  {String} endpoint
    * @return {Promise}
    */
+  // eslint-disable-next-line class-methods-use-this
   postAction(endpoint) {
-    return Vue.http.post(`${endpoint}.json`);
+    return axios.post(`${endpoint}.json`);
   }
 }
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.js b/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.js
deleted file mode 100644
index 2d324c71379..00000000000
--- a/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default {
-  name: 'time-tracking-estimate-only-pane',
-  props: {
-    timeEstimateHumanReadable: {
-      type: String,
-      required: true,
-    },
-  },
-  template: `
-    <div class="time-tracking-estimate-only-pane">
-      <span class="bold">
-        {{ s__('TimeTracking|Estimated:') }}
-      </span>
-      {{ timeEstimateHumanReadable }}
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.vue
new file mode 100644
index 00000000000..08fce597e50
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.vue
@@ -0,0 +1,20 @@
+<script>
+export default {
+  name: 'TimeTrackingEstimateOnlyPane',
+  props: {
+    timeEstimateHumanReadable: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="time-tracking-estimate-only-pane">
+    <span class="bold">
+      {{ s__('TimeTracking|Estimated:') }}
+    </span>
+    {{ timeEstimateHumanReadable }}
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/help_state.js b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
index 19f74ad3c6d..825063d9ba6 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/help_state.js
+++ b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
@@ -1,7 +1,8 @@
+<script>
 import { sprintf, s__ } from '../../../locale';
 
 export default {
-  name: 'time-tracking-help-state',
+  name: 'TimeTrackingHelpState',
   props: {
     rootPath: {
       type: String,
@@ -27,26 +28,28 @@ export default {
       );
     },
   },
-  template: `
-    <div class="time-tracking-help-state">
-      <div class="time-tracking-info">
-        <h4>
-          {{ __('Track time with quick actions') }}
-        </h4>
-        <p>
-          {{ __('Quick actions can be used in the issues description and comment boxes.') }}
-        </p>
-        <p v-html="estimateText">
-        </p>
-        <p v-html="spendText">
-        </p>
-        <a
-          class="btn btn-default learn-more-button"
-          :href="href"
-        >
-          {{ __('Learn more') }}
-        </a>
-      </div>
-    </div>
-  `,
 };
+</script>
+
+<template>
+  <div class="time-tracking-help-state">
+    <div class="time-tracking-info">
+      <h4>
+        {{ __('Track time with quick actions') }}
+      </h4>
+      <p>
+        {{ __('Quick actions can be used in the issues description and comment boxes.') }}
+      </p>
+      <p v-html="estimateText">
+      </p>
+      <p v-html="spendText">
+      </p>
+      <a
+        class="btn btn-default learn-more-button"
+        :href="href"
+      >
+        {{ __('Learn more') }}
+      </a>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
index 37fa5560d28..1ef0764bf2b 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -1,9 +1,9 @@
 <script>
-import timeTrackingHelpState from './help_state';
+import TimeTrackingHelpState from './help_state.vue';
 import TimeTrackingCollapsedState from './collapsed_state.vue';
 import timeTrackingSpentOnlyPane from './spent_only_pane';
 import timeTrackingNoTrackingPane from './no_tracking_pane';
-import timeTrackingEstimateOnlyPane from './estimate_only_pane';
+import TimeTrackingEstimateOnlyPane from './estimate_only_pane.vue';
 import TimeTrackingComparisonPane from './comparison_pane.vue';
 
 import eventHub from '../../event_hub';
@@ -12,11 +12,11 @@ export default {
   name: 'IssuableTimeTracker',
   components: {
     TimeTrackingCollapsedState,
-    'time-tracking-estimate-only-pane': timeTrackingEstimateOnlyPane,
+    TimeTrackingEstimateOnlyPane,
     'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
     'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,
     TimeTrackingComparisonPane,
-    'time-tracking-help-state': timeTrackingHelpState,
+    TimeTrackingHelpState,
   },
   props: {
     time_estimate: {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
index eeead11650f..be9b2e463d4 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
@@ -7,7 +7,10 @@ export default {
     statusIcon,
   },
   props: {
-    mr: { type: Object, required: true },
+    mr: {
+      type: Object,
+      required: true,
+    },
   },
 };
 </script>
@@ -20,13 +23,14 @@ export default {
     />
     <div class="media-body space-children">
       <span class="bold">
-        There are unresolved discussions. Please resolve these discussions
+        {{ s__("mrWidget|There are unresolved discussions. Please resolve these discussions") }}
       </span>
       <a
         v-if="mr.createIssueToResolveDiscussionsPath"
         :href="mr.createIssueToResolveDiscussionsPath"
-        class="btn btn-secondary btn-xs js-create-issue">
-        Create an issue to resolve them later
+        class="btn btn-secondary btn-xs js-create-issue"
+      >
+        {{ s__("mrWidget|Create an issue to resolve them later") }}
       </a>
     </div>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index d91fe3cf0c5..db453c30576 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -27,20 +27,22 @@
       $(document).off('markdown-preview:hide.vue', this.writeMarkdownTab);
     },
     methods: {
-      isMarkdownForm(form) {
-        return form && !form.find('.js-vue-markdown-field').length;
+      isValid(form) {
+        return !form ||
+          form.find('.js-vue-markdown-field').length ||
+          $(this.$el).closest('form') === form[0];
       },
 
       previewMarkdownTab(event, form) {
         if (event.target.blur) event.target.blur();
-        if (this.isMarkdownForm(form)) return;
+        if (!this.isValid(form)) return;
 
         this.$emit('preview-markdown');
       },
 
       writeMarkdownTab(event, form) {
         if (event.target.blur) event.target.blur();
-        if (this.isMarkdownForm(form)) return;
+        if (!this.isValid(form)) return;
 
         this.$emit('write-markdown');
       },
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index bdb915e6acd..2382c5e6251 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -813,7 +813,6 @@
 }
 
 .discussion-notes {
-  padding: 0 $gl-padding $gl-padding;
   min-height: 35px;
 
   &:first-child {
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index a7196a9f8df..c1b1d2e028d 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -154,26 +154,10 @@
       a {
         width: 100%;
         font-size: 18px;
-        margin-right: 0;
-
-        &:hover {
-          border: 1px solid transparent;
-        }
       }
 
-      &.active {
-        border-bottom: 1px solid $border-color;
-
-        a {
-          border: 0;
-          border-bottom: 2px solid $link-underline-blue;
-          margin-right: 0;
-          color: $black;
-
-          &:hover {
-            border-bottom: 2px solid $link-underline-blue;
-          }
-        }
+      &.active > a {
+        cursor: default;
       }
     }
   }
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 82570c0653e..e08912e72ab 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -173,7 +173,11 @@
 }
 
 .discussion-form {
-  padding-top: $gl-padding-top;
+  background-color: $white-light;
+}
+
+.discussion-form-container {
+  padding: $gl-padding-top $gl-padding $gl-padding;
 }
 
 .discussion-notes .disabled-comment {
@@ -233,7 +237,12 @@
 .discussion-body,
 .diff-file {
   .discussion-reply-holder {
-    padding-top: $gl-padding;
+    background-color: $white-light;
+    padding: 10px 16px;
+
+    &.is-replying {
+      padding-bottom: $gl-padding;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 9a25ca275c4..998c37cd455 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -47,7 +47,7 @@ ul.notes {
     }
 
     .timeline-entry-inner {
-      padding: $gl-padding 0;
+      padding: $gl-padding $gl-btn-padding;
       border-bottom: 1px solid $white-normal;
     }
 
@@ -94,6 +94,12 @@ ul.notes {
       }
     }
 
+    &.note-discussion {
+      .timeline-entry-inner {
+        padding: $gl-padding 10px;
+      }
+    }
+
     .editing-spinner {
       display: none;
     }
@@ -346,8 +352,6 @@ ul.notes {
         }
 
         .discussion-notes {
-          background-color: $white-light;
-
           &:not(:first-child) {
             border-top: 1px solid $white-normal;
             margin-top: 20px;
@@ -359,6 +363,10 @@ ul.notes {
           }
         }
 
+        .notes {
+          background-color: $white-light;
+        }
+
         a code {
           top: 0;
           margin-right: 0;
@@ -639,6 +647,8 @@ ul.notes {
     border-bottom: 1px solid $white-normal;
 
     .timeline-entry-inner {
+      padding-left: $gl-padding;
+      padding-right: $gl-padding;
       border-bottom: 0;
     }
   }
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index d38b066bfe4..bea1ec4d006 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -344,7 +344,6 @@
 
   svg {
     vertical-align: middle;
-    margin-right: 3px;
   }
 
   .stage-column {
@@ -495,17 +494,12 @@
         svg {
           fill: $gl-text-color-secondary;
           position: relative;
-          left: 1px;
           top: -1px;
-          width: 16px;
-          height: 16px;
         }
 
         &.play {
           svg {
-            width: 16px;
-            height: 16px;
-            left: 3px;
+            left: 2px;
           }
         }
       }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 9395140cf4a..9edb30835b3 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -935,11 +935,6 @@ pre.light-well {
     }
   }
 
-  .dropdown-menu-toggle {
-    width: 100%;
-    max-width: 300px;
-  }
-
   .flash-container {
     padding: 0;
   }