Merge branch 'master' into 34102-online-view-of-artifacts-fe

26 files changed, 233 insertions, 122 deletions

diff --git a/app/assets/javascripts/copy_as_gfm.js b/app/assets/javascripts/copy_as_gfm.js
index e3e2c798570..93b0cbf4209 100644
--- a/app/assets/javascripts/copy_as_gfm.js
+++ b/app/assets/javascripts/copy_as_gfm.js
@@ -298,7 +298,7 @@ class CopyAsGFM {
     const documentFragment = getSelectedFragment();
     if (!documentFragment) return;
 
-    const el = transformer(documentFragment.cloneNode(true));
+    const el = transformer(documentFragment.cloneNode(true), e.currentTarget);
     if (!el) return;
 
     e.preventDefault();
@@ -338,55 +338,64 @@ class CopyAsGFM {
   }
 
   static transformGFMSelection(documentFragment) {
-    const gfmEls = documentFragment.querySelectorAll('.md, .wiki');
-    switch (gfmEls.length) {
+    const gfmElements = documentFragment.querySelectorAll('.md, .wiki');
+    switch (gfmElements.length) {
       case 0: {
         return documentFragment;
       }
       case 1: {
-        return gfmEls[0];
+        return gfmElements[0];
       }
       default: {
-        const allGfmEl = document.createElement('div');
+        const allGfmElement = document.createElement('div');
 
-        for (let i = 0; i < gfmEls.length; i += 1) {
-          const lineEl = gfmEls[i];
-          allGfmEl.appendChild(lineEl);
-          allGfmEl.appendChild(document.createTextNode('\n\n'));
+        for (let i = 0; i < gfmElements.length; i += 1) {
+          const gfmElement = gfmElements[i];
+          allGfmElement.appendChild(gfmElement);
+          allGfmElement.appendChild(document.createTextNode('\n\n'));
         }
 
-        return allGfmEl;
+        return allGfmElement;
       }
     }
   }
 
-  static transformCodeSelection(documentFragment) {
-    const lineEls = documentFragment.querySelectorAll('.line');
+  static transformCodeSelection(documentFragment, target) {
+    let lineSelector = '.line';
 
-    let codeEl;
-    if (lineEls.length > 1) {
-      codeEl = document.createElement('pre');
-      codeEl.className = 'code highlight';
+    if (target) {
+      const lineClass = ['left-side', 'right-side'].filter(name => target.classList.contains(name))[0];
+      if (lineClass) {
+        lineSelector = `.line_content.${lineClass} ${lineSelector}`;
+      }
+    }
+
+    const lineElements = documentFragment.querySelectorAll(lineSelector);
+
+    let codeElement;
+    if (lineElements.length > 1) {
+      codeElement = document.createElement('pre');
+      codeElement.className = 'code highlight';
 
-      const lang = lineEls[0].getAttribute('lang');
+      const lang = lineElements[0].getAttribute('lang');
       if (lang) {
-        codeEl.setAttribute('lang', lang);
+        codeElement.setAttribute('lang', lang);
       }
     } else {
-      codeEl = document.createElement('code');
+      codeElement = document.createElement('code');
     }
 
-    if (lineEls.length > 0) {
-      for (let i = 0; i < lineEls.length; i += 1) {
-        const lineEl = lineEls[i];
-        codeEl.appendChild(lineEl);
-        codeEl.appendChild(document.createTextNode('\n'));
+    if (lineElements.length > 0) {
+      for (let i = 0; i < lineElements.length; i += 1) {
+        const lineElement = lineElements[i];
+        codeElement.appendChild(lineElement);
+        codeElement.appendChild(document.createTextNode('\n'));
       }
     } else {
-      codeEl.appendChild(documentFragment);
+      codeElement.appendChild(documentFragment);
     }
 
-    return codeEl;
+    return codeElement;
   }
 
   static nodeToGFM(node, respectWhitespaceParam = false) {
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
index e4d62b649e5..45930145b0a 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
@@ -1,5 +1,7 @@
 <script>
   import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+  import limitWarning from './limit_warning_component.vue';
+  import totalTime from './total_time_component.vue';
 
   export default {
     props: {
@@ -8,6 +10,8 @@
     },
     components: {
       userAvatarImage,
+      limitWarning,
+      totalTime,
     },
   };
 </script>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
index ab730af8f5b..8c98bd249a1 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
@@ -1,5 +1,7 @@
 <script>
   import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+  import limitWarning from './limit_warning_component.vue';
+  import totalTime from './total_time_component.vue';
 
   export default {
     props: {
@@ -8,6 +10,8 @@
     },
     components: {
       userAvatarImage,
+      limitWarning,
+      totalTime,
     },
   };
 </script>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
index 152c086a606..75d2f1fd70c 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
@@ -1,21 +1,25 @@
 <script>
-import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
-import iconCommit from '../svg/icon_commit.svg';
+  import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+  import iconCommit from '../svg/icon_commit.svg';
+  import limitWarning from './limit_warning_component.vue';
+  import totalTime from './total_time_component.vue';
 
-export default {
-  props: {
-    items: Array,
-    stage: Object,
-  },
-  components: {
-    userAvatarImage,
-  },
-  computed: {
-    iconCommit() {
-      return iconCommit;
+  export default {
+    props: {
+      items: Array,
+      stage: Object,
     },
-  },
-};
+    components: {
+      userAvatarImage,
+      totalTime,
+      limitWarning,
+    },
+    computed: {
+      iconCommit() {
+        return iconCommit;
+      },
+    },
+  };
 </script>
 <template>
   <div>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
index 9e66b690404..f54ea7df522 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
@@ -1,5 +1,7 @@
 <script>
   import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+  import limitWarning from './limit_warning_component.vue';
+  import totalTime from './total_time_component.vue';
 
   export default {
     props: {
@@ -8,6 +10,8 @@
     },
     components: {
       userAvatarImage,
+      totalTime,
+      limitWarning,
     },
   };
 </script>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
index 2787b5ea47b..5d95ddcd90e 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
@@ -1,6 +1,8 @@
 <script>
   import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
   import iconBranch from '../svg/icon_branch.svg';
+  import limitWarning from './limit_warning_component.vue';
+  import totalTime from './total_time_component.vue';
 
   export default {
     props: {
@@ -9,6 +11,8 @@
     },
     components: {
       userAvatarImage,
+      totalTime,
+      limitWarning,
     },
     computed: {
       iconBranch() {
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
index 9c3d39ce011..04d5440b77b 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
@@ -1,21 +1,27 @@
 <script>
-import iconBuildStatus from '../svg/icon_build_status.svg';
-import iconBranch from '../svg/icon_branch.svg';
+  import iconBuildStatus from '../svg/icon_build_status.svg';
+  import iconBranch from '../svg/icon_branch.svg';
+  import limitWarning from './limit_warning_component.vue';
+  import totalTime from './total_time_component.vue';
 
-export default {
-  props: {
-    items: Array,
-    stage: Object,
-  },
-  computed: {
-    iconBuildStatus() {
-      return iconBuildStatus;
+  export default {
+    props: {
+      items: Array,
+      stage: Object,
     },
-    iconBranch() {
-      return iconBranch;
+    components: {
+      totalTime,
+      limitWarning,
     },
-  },
-};
+    computed: {
+      iconBuildStatus() {
+        return iconBuildStatus;
+      },
+      iconBranch() {
+        return iconBranch;
+      },
+    },
+  };
 </script>
 <template>
   <div>
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index 8002b0b23c9..991fcf114da 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -3,14 +3,12 @@
 import Vue from 'vue';
 import Cookies from 'js-cookie';
 import Translate from '../vue_shared/translate';
-import limitWarningComponent from './components/limit_warning_component.vue';
 import stageCodeComponent from './components/stage_code_component.vue';
 import stagePlanComponent from './components/stage_plan_component.vue';
 import stageComponent from './components/stage_component.vue';
 import stageReviewComponent from './components/stage_review_component.vue';
 import stageStagingComponent from './components/stage_staging_component.vue';
 import stageTestComponent from './components/stage_test_component.vue';
-import totalTime from './components/total_time_component.vue';
 import CycleAnalyticsService from './cycle_analytics_service';
 import CycleAnalyticsStore from './cycle_analytics_store';
 
@@ -133,8 +131,4 @@ $(() => {
       },
     },
   });
-
-  // Register global components
-  Vue.component('limit-warning', limitWarningComponent);
-  Vue.component('total-time', totalTime);
 });
diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 6a008112203..ae8338f5fd2 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -24,7 +24,8 @@ class Diff {
     if (!isBound) {
       $(document)
         .on('click', '.js-unfold', this.handleClickUnfold.bind(this))
-        .on('click', '.diff-line-num a', this.handleClickLineNum.bind(this));
+        .on('click', '.diff-line-num a', this.handleClickLineNum.bind(this))
+        .on('mousedown', 'td.line_content.parallel', this.handleParallelLineDown.bind(this));
       isBound = true;
     }
 
@@ -100,6 +101,18 @@ class Diff {
     this.highlightSelectedLine();
   }
 
+  handleParallelLineDown(e) {
+    const line = $(e.currentTarget);
+    const table = line.closest('table');
+
+    table.removeClass('left-side-selected right-side-selected');
+
+    const lineClass = ['left-side', 'right-side'].filter(name => line.hasClass(name))[0];
+    if (lineClass) {
+      table.addClass(`${lineClass}-selected`);
+    }
+  }
+
   diffViewType() {
     return $('.inline-parallel-buttons a.active').data('view-type');
   }
diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 50d822eba5a..ff218ccad62 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -548,6 +548,7 @@ GitLabDropdown = (function() {
   GitLabDropdown.prototype.positionMenuAbove = function() {
     var $menu = this.dropdown.find('.dropdown-menu');
 
+    $menu.addClass('dropdown-open-top');
     $menu.css('top', 'initial');
     $menu.css('bottom', '100%');
   };
diff --git a/app/assets/javascripts/issuable_context.js b/app/assets/javascripts/issuable_context.js
index 70c364e51fe..1d305f1eb2f 100644
--- a/app/assets/javascripts/issuable_context.js
+++ b/app/assets/javascripts/issuable_context.js
@@ -67,10 +67,13 @@ const PARTICIPANTS_ROW_COUNT = 7;
       originalText = $(this).data("original-text");
       if (currentText === originalText) {
         $(this).text(lessText);
+
+        if (gl.lazyLoader) gl.lazyLoader.loadCheck();
       } else {
         $(this).text(originalText);
       }
-      return $(".js-participants-hidden").toggle();
+
+      $(".js-participants-hidden").toggle();
     };
 
     return IssuableContext;
diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js
index 1d1763c3963..29fc91733b3 100644
--- a/app/assets/javascripts/lib/utils/datetime_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime_utility.js
@@ -55,7 +55,7 @@ window.dateFormat = dateFormat;
       if (!timeagoInstance) {
         const localeRemaining = function(number, index) {
           return [
-            [s__('Timeago|less than a minute ago'), s__('Timeago|a while')],
+            [s__('Timeago|less than a minute ago'), s__('Timeago|in a while')],
             [s__('Timeago|less than a minute ago'), s__('Timeago|%s seconds remaining')],
             [s__('Timeago|about a minute ago'), s__('Timeago|1 minute remaining')],
             [s__('Timeago|%s minutes ago'), s__('Timeago|%s minutes remaining')],
@@ -73,7 +73,7 @@ window.dateFormat = dateFormat;
         };
         locale = function(number, index) {
           return [
-            [s__('Timeago|less than a minute ago'), s__('Timeago|a while')],
+            [s__('Timeago|less than a minute ago'), s__('Timeago|in a while')],
             [s__('Timeago|less than a minute ago'), s__('Timeago|in %s seconds')],
             [s__('Timeago|about a minute ago'), s__('Timeago|in 1 minute')],
             [s__('Timeago|%s minutes ago'), s__('Timeago|in %s minutes')],
diff --git a/app/assets/javascripts/locale/index.js b/app/assets/javascripts/locale/index.js
index 6a5084efeb8..af718e894cf 100644
--- a/app/assets/javascripts/locale/index.js
+++ b/app/assets/javascripts/locale/index.js
@@ -1,5 +1,7 @@
 import Jed from 'jed';
 
+import sprintf from './sprintf';
+
 /**
   This is required to require all the translation folders in the current directory
   this saves us having to do this manually & keep up to date with new languages
@@ -66,4 +68,5 @@ export { lang };
 export { gettext as __ };
 export { ngettext as n__ };
 export { pgettext as s__ };
+export { sprintf };
 export default locale;
diff --git a/app/assets/javascripts/locale/sprintf.js b/app/assets/javascripts/locale/sprintf.js
new file mode 100644
index 00000000000..5f4a053f98e
--- /dev/null
+++ b/app/assets/javascripts/locale/sprintf.js
@@ -0,0 +1,26 @@
+import _ from 'underscore';
+
+/**
+  Very limited implementation of sprintf supporting only named parameters.
+
+  @param input (translated) text with parameters (e.g. '%{num_users} users use us')
+  @param parameters object mapping parameter names to values (e.g. { num_users: 5 })
+  @param escapeParameters whether parameter values should be escaped (see http://underscorejs.org/#escape)
+  @returns {String} the text with parameters replaces (e.g. '5 users use us')
+
+  @see https://ruby-doc.org/core-2.3.3/Kernel.html#method-i-sprintf
+  @see https://gitlab.com/gitlab-org/gitlab-ce/issues/37992
+**/
+export default (input, parameters, escapeParameters = true) => {
+  let output = input;
+
+  if (parameters) {
+    Object.keys(parameters).forEach((parameterName) => {
+      const parameterValue = parameters[parameterName];
+      const escapedParameterValue = escapeParameters ? _.escape(parameterValue) : parameterValue;
+      output = output.replace(new RegExp(`%{${parameterName}}`, 'g'), escapedParameterValue);
+    });
+  }
+
+  return output;
+};
diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue
index 3483f6c7538..1f43b8a16ad 100644
--- a/app/assets/javascripts/notes/components/issue_note.vue
+++ b/app/assets/javascripts/notes/components/issue_note.vue
@@ -62,7 +62,7 @@
       },
       deleteHandler() {
         // eslint-disable-next-line no-alert
-        if (confirm('Are you sure you want to delete this list?')) {
+        if (confirm('Are you sure you want to delete this comment?')) {
           this.isDeleting = true;
 
           this.deleteNote(this.note)
diff --git a/app/assets/javascripts/projects_dropdown/service/projects_service.js b/app/assets/javascripts/projects_dropdown/service/projects_service.js
index fad956b4c26..9cbd8f21f2a 100644
--- a/app/assets/javascripts/projects_dropdown/service/projects_service.js
+++ b/app/assets/javascripts/projects_dropdown/service/projects_service.js
@@ -19,7 +19,7 @@ export default class ProjectsService {
 
   getSearchedProjects(searchQuery) {
     return this.projectsPath.get({
-      simple: false,
+      simple: true,
       per_page: 20,
       membership: !!gon.current_user_id,
       order_by: 'last_activity_at',
diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/repo/components/repo_file.vue
index 20ebf840774..8b9cbd23456 100644
--- a/app/assets/javascripts/repo/components/repo_file.vue
+++ b/app/assets/javascripts/repo/components/repo_file.vue
@@ -95,7 +95,7 @@ export default RepoFile;
       </div>
     </td>
 
-    <td class="hidden-xs">
+    <td class="hidden-xs text-right">
       <span
         class="commit-update"
         :title="tooltipTitle(file.lastCommitUpdate)">
diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index dc1bda95a01..1e40814b95f 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -75,7 +75,7 @@ export default {
       <tr>
         <th class="name">Name</th>
         <th class="hidden-sm hidden-xs last-commit">Last Commit</th>
-        <th class="hidden-xs last-update">Last Update</th>
+        <th class="hidden-xs last-update text-right">Last Update</th>
       </tr>
     </thead>
     <tbody>
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index 0c1ec276baf..a41548bd694 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -29,30 +29,32 @@ import Cookies from 'js-cookie';
       $('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading);
       $('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded);
 
-      $document.on('click', '.js-sidebar-toggle', function(e, triggered) {
-        var $allGutterToggleIcons, $this, $thisIcon;
-        e.preventDefault();
-        $this = $(this);
-        $thisIcon = $this.find('i');
-        $allGutterToggleIcons = $('.js-sidebar-toggle i');
-        if ($thisIcon.hasClass('fa-angle-double-right')) {
-          $allGutterToggleIcons.removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
-          $('aside.right-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
-          $('.page-with-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
-        } else {
-          $allGutterToggleIcons.removeClass('fa-angle-double-left').addClass('fa-angle-double-right');
-          $('aside.right-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
-          $('.page-with-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
-
-          if (gl.lazyLoader) gl.lazyLoader.loadCheck();
-        }
-        if (!triggered) {
-          return Cookies.set("collapsed_gutter", $('.right-sidebar').hasClass('right-sidebar-collapsed'));
-        }
-      });
+      $document.on('click', '.js-sidebar-toggle', this.sidebarToggleClicked);
       return $(document).off('click', '.js-issuable-todo').on('click', '.js-issuable-todo', this.toggleTodo);
     };
 
+    Sidebar.prototype.sidebarToggleClicked = function (e, triggered) {
+      var $allGutterToggleIcons, $this, $thisIcon;
+      e.preventDefault();
+      $this = $(this);
+      $thisIcon = $this.find('i');
+      $allGutterToggleIcons = $('.js-sidebar-toggle i');
+      if ($thisIcon.hasClass('fa-angle-double-right')) {
+        $allGutterToggleIcons.removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
+        $('aside.right-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
+        $('.page-with-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
+      } else {
+        $allGutterToggleIcons.removeClass('fa-angle-double-left').addClass('fa-angle-double-right');
+        $('aside.right-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
+        $('.page-with-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
+
+        if (gl.lazyLoader) gl.lazyLoader.loadCheck();
+      }
+      if (!triggered) {
+        Cookies.set("collapsed_gutter", $('.right-sidebar').hasClass('right-sidebar-collapsed'));
+      }
+    };
+
     Sidebar.prototype.toggleTodo = function(e) {
       var $btnText, $this, $todoLoading, ajaxType, url;
       $this = $(e.currentTarget);
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js
index 703f3a56a34..4998a47b691 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js
@@ -27,7 +27,7 @@ export default {
       <button
         v-if="showDisabledButton"
         type="button"
-        class="btn btn-success btn-sm"
+        class="js-disabled-merge-button btn btn-success btn-sm"
         disabled="true">
         Merge
       </button>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
index 4078aad7f83..b25cc3443ef 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
@@ -16,9 +16,9 @@ export default {
       <div class="media-body">
         <mr-widget-author-and-time
           actionText="Closed by"
-          :author="mr.closedBy"
-          :dateTitle="mr.updatedAt"
-          :dateReadable="mr.closedAt"
+          :author="mr.closedEvent.author"
+          :dateTitle="mr.closedEvent.updatedAt"
+          :dateReadable="mr.closedEvent.formattedUpdatedAt"
         />
         <section class="mr-info-list">
           <p>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
index f9cb79a0bc1..dc252f8a9b7 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
@@ -10,27 +10,37 @@ export default {
   },
   template: `
     <div class="mr-widget-body media">
-      <status-icon status="failed" showDisabledButton />
+      <status-icon
+        status="failed"
+        showDisabledButton />
       <div class="media-body space-children">
-        <span class="bold">
-          There are merge conflicts<span v-if="!mr.canMerge">.</span>
-          <span v-if="!mr.canMerge">
-            Resolve these conflicts or ask someone with write access to this repository to merge it locally
-          </span>
+        <span
+          v-if="mr.shouldBeRebased"
+          class="bold">
+          Fast-forward merge is not possible.
+          To merge this request, first rebase locally.
         </span>
-        <a
-          v-if="mr.canMerge && mr.conflictResolutionPath"
-          :href="mr.conflictResolutionPath"
-          class="btn btn-default btn-xs js-resolve-conflicts-button">
-          Resolve conflicts
-        </a>
-        <a
-          v-if="mr.canMerge"
-          class="btn btn-default btn-xs js-merge-locally-button"
-          data-toggle="modal"
-          href="#modal_merge_info">
-          Merge locally
-        </a>
+        <template v-else>
+          <span class="bold">
+            There are merge conflicts<span v-if="!mr.canMerge">.</span>
+            <span v-if="!mr.canMerge">
+              Resolve these conflicts or ask someone with write access to this repository to merge it locally
+            </span>
+          </span>
+          <a
+            v-if="mr.canMerge && mr.conflictResolutionPath"
+            :href="mr.conflictResolutionPath"
+            class="js-resolve-conflicts-button btn btn-default btn-xs">
+            Resolve conflicts
+          </a>
+          <a
+            v-if="mr.canMerge"
+            class="js-merge-locally-button btn btn-default btn-xs"
+            data-toggle="modal"
+            href="#modal_merge_info">
+            Merge locally
+          </a>
+        </template>
       </div>
     </div>
   `,
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
index e452260a4d0..74fc52796a0 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
@@ -69,9 +69,9 @@ export default {
         <div class="space-children">
           <mr-widget-author-and-time
             actionText="Merged by"
-            :author="mr.mergedBy"
-            :dateTitle="mr.updatedAt"
-            :dateReadable="mr.mergedAt" />
+            :author="mr.mergedEvent.author"
+            :date-title="mr.mergedEvent.updatedAt"
+            :date-readable="mr.mergedEvent.formattedUpdatedAt" />
           <a
             v-if="mr.canRevertInCurrentMR"
             v-tooltip
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index ad709da51ee..f83d3ca00dd 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -284,10 +284,16 @@ export default {
                 :mr="mr"
                 :is-merge-button-disabled="isMergeButtonDisabled" />
 
+              <span
+                v-if="mr.ffOnlyEnabled"
+                class="js-fast-forward-message">
+                Fast-forward merge without a merge commit
+              </span>
               <button
+                v-else
                 @click="toggleCommitMessageEditor"
                 :disabled="isMergeButtonDisabled"
-                class="btn btn-default btn-xs"
+                class="js-modify-commit-message-button btn btn-default btn-xs"
                 type="button">
                 Modify commit message
               </button>
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 29464662578..e554082149b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -37,10 +37,8 @@ export default class MergeRequestStore {
     }
 
     this.updatedAt = data.updated_at;
-    this.mergedAt = MergeRequestStore.getEventDate(data.merge_event);
-    this.closedAt = MergeRequestStore.getEventDate(data.closed_event);
-    this.mergedBy = MergeRequestStore.getAuthorObject(data.merge_event);
-    this.closedBy = MergeRequestStore.getAuthorObject(data.closed_event);
+    this.mergedEvent = MergeRequestStore.getEventObject(data.merge_event);
+    this.closedEvent = MergeRequestStore.getEventObject(data.closed_event);
     this.setToMWPSBy = MergeRequestStore.getAuthorObject({ author: data.merge_user || {} });
     this.mergeUserId = data.merge_user_id;
     this.currentUserId = gon.current_user_id;
@@ -57,6 +55,8 @@ export default class MergeRequestStore {
     this.onlyAllowMergeIfPipelineSucceeds = data.only_allow_merge_if_pipeline_succeeds || false;
     this.mergeWhenPipelineSucceeds = data.merge_when_pipeline_succeeds || false;
     this.mergePath = data.merge_path;
+    this.ffOnlyEnabled = data.ff_only_enabled;
+    this.shouldBeRebased = !!data.should_be_rebased;
     this.statusPath = data.status_path;
     this.emailPatchesPath = data.email_patches_path;
     this.plainDiffPath = data.plain_diff_path;
@@ -118,6 +118,14 @@ export default class MergeRequestStore {
     }
   }
 
+  static getEventObject(event) {
+    return {
+      author: MergeRequestStore.getAuthorObject(event),
+      updatedAt: gl.utils.formatDate(MergeRequestStore.getEventUpdatedAtDate(event)),
+      formattedUpdatedAt: MergeRequestStore.getEventDate(event),
+    };
+  }
+
   static getAuthorObject(event) {
     if (!event) {
       return {};
@@ -131,6 +139,14 @@ export default class MergeRequestStore {
     };
   }
 
+  static getEventUpdatedAtDate(event) {
+    if (!event) {
+      return '';
+    }
+
+    return event.updated_at;
+  }
+
   static getEventDate(event) {
     const timeagoInstance = new Timeago();
 
@@ -138,7 +154,7 @@ export default class MergeRequestStore {
       return '';
     }
 
-    return timeagoInstance.format(event.updated_at);
+    return timeagoInstance.format(MergeRequestStore.getEventUpdatedAtDate(event));
   }
 
 }
diff --git a/app/assets/javascripts/vue_shared/translate.js b/app/assets/javascripts/vue_shared/translate.js
index f83c4b00761..2c7886ec308 100644
--- a/app/assets/javascripts/vue_shared/translate.js
+++ b/app/assets/javascripts/vue_shared/translate.js
@@ -2,6 +2,7 @@ import {
   __,
   n__,
   s__,
+  sprintf,
 } from '../locale';
 
 export default (Vue) => {
@@ -37,6 +38,7 @@ export default (Vue) => {
         @returns {String} Translated context based text
       **/
       s__,
+      sprintf,
     },
   });
 };