Merge branch 'master' into 'dm-copy-mr-source-branch-as-gfm'dm-copy-mr-source-branch-as-gfm

# Conflicts:
#   app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js

12 files changed, 76 insertions, 38 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
index 3c23b8e472b..8b59e018836 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
@@ -1,7 +1,7 @@
 /* global Flash */
 
 import '~/lib/utils/datetime_utility';
-import { statusClassToSvgMap } from '../../vue_shared/pipeline_svg_icons';
+import { statusIconEntityMap } from '../../vue_shared/ci_status_icons';
 import MemoryUsage from './mr_widget_memory_usage';
 import MRWidgetService from '../services/mr_widget_service';
 
@@ -16,7 +16,7 @@ export default {
   },
   computed: {
     svg() {
-      return statusClassToSvgMap.icon_status_success;
+      return statusIconEntityMap.icon_status_success;
     },
   },
   methods: {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
index 5440532f559..9e7299fcdeb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
@@ -70,32 +70,34 @@ export default {
         </span>
       </div>
       <div class="normal">
-        <b>Request to merge</b>
-        <span
-          class="label-branch"
-          :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.sourceBranch)}"
-          :title="isBranchTitleLong(mr.sourceBranch) ? mr.sourceBranch : ''"
-          data-placement="bottom"
-          v-html="mr.sourceBranchLink"></span>
-        <button
-          class="btn btn-transparent btn-clipboard has-tooltip"
-          data-title="Copy branch name to clipboard"
-          :data-clipboard-text="branchNameClipboardData">
-          <i
-            aria-hidden="true"
-            class="fa fa-clipboard"></i>
-        </button>
-        <b>into</b>
-        <span
-          class="label-branch"
-          :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.targetBranch)}"
-          :title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
-          data-placement="bottom">
-          <a
-            :href="mr.targetBranchCommitsPath">
-            {{mr.targetBranch}}
-          </a>
-        </span>
+        <strong>
+          Request to merge
+          <span
+            class="label-branch"
+            :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.sourceBranch)}"
+            :title="isBranchTitleLong(mr.sourceBranch) ? mr.sourceBranch : ''"
+            data-placement="bottom"
+            v-html="mr.sourceBranchLink"></span>
+          <button
+            class="btn btn-transparent btn-clipboard has-tooltip"
+            data-title="Copy branch name to clipboard"
+            :data-clipboard-text="branchNameClipboardData">
+            <i
+              aria-hidden="true"
+              class="fa fa-clipboard"></i>
+          </button>
+          into
+          <span
+            class="label-branch"
+            :class="{'label-truncated has-tooltip': isBranchTitleLong(mr.targetBranch)}"
+            :title="isBranchTitleLong(mr.targetBranch) ? mr.targetBranch : ''"
+            data-placement="bottom">
+            <a
+              :href="mr.targetBranchPath">
+              {{mr.targetBranch}}
+            </a>
+          </span>
+        </strong>
         <span
           v-if="shouldShowCommitsBehindText"
           class="diverged-commits-count">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js
index 801b9fb1ba1..517838f92ac 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js
@@ -1,6 +1,6 @@
-import PipelineStage from '../../pipelines/components/stage';
-import pipelineStatusIcon from '../../vue_shared/components/pipeline_status_icon';
-import { statusClassToSvgMap } from '../../vue_shared/pipeline_svg_icons';
+import PipelineStage from '../../pipelines/components/stage.vue';
+import ciIcon from '../../vue_shared/components/ci_icon.vue';
+import { statusIconEntityMap } from '../../vue_shared/ci_status_icons';
 
 export default {
   name: 'MRWidgetPipeline',
@@ -9,7 +9,7 @@ export default {
   },
   components: {
     'pipeline-stage': PipelineStage,
-    'pipeline-status-icon': pipelineStatusIcon,
+    ciIcon,
   },
   computed: {
     hasCIError() {
@@ -18,11 +18,14 @@ export default {
       return hasCI && !ciStatus;
     },
     svg() {
-      return statusClassToSvgMap.icon_status_failed;
+      return statusIconEntityMap.icon_status_failed;
     },
     stageText() {
       return this.mr.pipeline.details.stages.length > 1 ? 'stages' : 'stage';
     },
+    status() {
+      return this.mr.pipeline.details.status || {};
+    },
   },
   template: `
     <div class="mr-widget-heading">
@@ -38,13 +41,22 @@ export default {
           <span>Could not connect to the CI server. Please check your settings and try again.</span>
         </template>
         <template v-else>
-          <pipeline-status-icon :pipelineStatus="mr.pipelineDetailedStatus" />
+          <div>
+            <a
+              class="icon-link"
+              :href="this.status.details_path">
+              <ci-icon :status="status" />
+            </a>
+          </div>
           <span>
             Pipeline
             <a
               :href="mr.pipeline.path"
               class="pipeline-id">#{{mr.pipeline.id}}</a>
             {{mr.pipeline.details.status.label}}
+          </span>
+          <span
+            v-if="mr.pipeline.details.stages.length > 0">
             with {{stageText}}
           </span>
           <div class="mr-widget-pipeline-graph">
@@ -61,7 +73,7 @@ export default {
             for
             <a
               :href="mr.pipeline.commit.commit_path"
-              class="monospace js-commit-link">
+              class="commit-sha js-commit-link">
               {{mr.pipeline.commit.short_id}}</a>.
           </span>
           <span
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 7e66441e5ff..fc2e42c6821 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
@@ -20,7 +20,7 @@ export default {
         <p>
           The changes were not merged into
           <a
-            :href="mr.targetBranchCommitsPath"
+            :href="mr.targetBranchPath"
             class="label-branch">
             {{mr.targetBranch}}</a>.
         </p>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
index e3c27dfb76d..0bd31731a0b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
@@ -16,7 +16,7 @@ export default {
           The changes will be merged into
           <span class="label-branch">
             <a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
-          </span>
+          </span>.
         </p>
       </section>
     </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
index bcdbedcd46b..419d174f3ff 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
@@ -87,7 +87,7 @@ export default {
             :href="mr.targetBranchPath"
             class="label-branch">
             {{mr.targetBranch}}
-          </a>
+          </a>.
         </p>
         <p v-if="mr.shouldRemoveSourceBranch">
           The source branch will be removed.
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js
new file mode 100644
index 00000000000..79f8ef408e6
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js
@@ -0,0 +1,16 @@
+export default {
+  name: 'MRWidgetSHAMismatch',
+  template: `
+    <div class="mr-widget-body">
+      <button
+        type="button"
+        class="btn btn-success btn-small"
+        disabled="true">
+        Merge
+      </button>
+      <span class="bold">
+        The source branch HEAD has recently changed. Please reload the page and review the changes before merging.
+      </span>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index b2eb32ead5f..bfe30ee4c08 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -27,6 +27,7 @@ export { default as NothingToMergeState } from './components/states/mr_widget_no
 export { default as MissingBranchState } from './components/states/mr_widget_missing_branch';
 export { default as NotAllowedState } from './components/states/mr_widget_not_allowed';
 export { default as ReadyToMergeState } from './components/states/mr_widget_ready_to_merge';
+export { default as SHAMismatchState } from './components/states/mr_widget_sha_mismatch';
 export { default as UnresolvedDiscussionsState } from './components/states/mr_widget_unresolved_discussions';
 export { default as PipelineBlockedState } from './components/states/mr_widget_pipeline_blocked';
 export { default as PipelineFailedState } from './components/states/mr_widget_pipeline_failed';
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
index 7c6c2d21714..5452e19bd8e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
@@ -16,6 +16,7 @@ import {
   MissingBranchState,
   NotAllowedState,
   ReadyToMergeState,
+  SHAMismatchState,
   UnresolvedDiscussionsState,
   PipelineBlockedState,
   PipelineFailedState,
@@ -203,6 +204,7 @@ export default {
     'mr-widget-not-allowed': NotAllowedState,
     'mr-widget-missing-branch': MissingBranchState,
     'mr-widget-ready-to-merge': ReadyToMergeState,
+    'mr-widget-sha-mismatch': SHAMismatchState,
     'mr-widget-squash-before-merge': SquashBeforeMerge,
     'mr-widget-checking': CheckingState,
     'mr-widget-unresolved-discussions': UnresolvedDiscussionsState,
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js b/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js
index fee4113f3c8..fb78ea92da1 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js
@@ -21,6 +21,8 @@ export default function deviseState(data) {
     return 'unresolvedDiscussions';
   } else if (this.isPipelineBlocked) {
     return 'pipelineBlocked';
+  } else if (this.hasSHAChanged) {
+    return 'shaMismatch';
   } else if (this.canBeMerged) {
     return 'readyToMerge';
   }
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 faafeae5c5b..05e67706983 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
@@ -4,6 +4,7 @@ import { getStateKey } from '../dependencies';
 export default class MergeRequestStore {
 
   constructor(data) {
+    this.startingSha = data.diff_head_sha;
     this.setData(data);
   }
 
@@ -67,6 +68,7 @@ export default class MergeRequestStore {
     this.canMerge = !!data.merge_path;
     this.canCreateIssue = currentUser.can_create_issue || false;
     this.canCancelAutomaticMerge = !!data.cancel_merge_when_pipeline_succeeds_path;
+    this.hasSHAChanged = this.sha !== this.startingSha;
     this.canBeMerged = data.can_be_merged || false;
 
     // Cherry-pick and Revert actions related
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
index 625d7a01c65..605dd3a1ff4 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
@@ -16,6 +16,7 @@ const stateToComponentMap = {
   mergeWhenPipelineSucceeds: 'mr-widget-merge-when-pipeline-succeeds',
   failedToMerge: 'mr-widget-failed-to-merge',
   autoMergeFailed: 'mr-widget-auto-merge-failed',
+  shaMismatch: 'mr-widget-sha-mismatch',
 };
 
 const statesToShowHelpWidget = [