Merge branch 'refactor/move-mr-widget-sha-mismatch-vue-component' into 'master'

Move ShaMismatch vue component

See merge request gitlab-org/gitlab-ce!17546

7 files changed, 39 insertions, 26 deletions

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
deleted file mode 100644
index 142ddf477f1..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import statusIcon from '../mr_widget_status_icon.vue';
-
-export default {
-  name: 'MRWidgetSHAMismatch',
-  components: {
-    statusIcon,
-  },
-  template: `
-    <div class="mr-widget-body media">
-      <status-icon status="warning" :show-disabled-button="true" />
-      <div class="media-body space-children">
-        <span class="bold">
-          The source branch HEAD has recently changed. Please reload the page and review the changes before merging
-        </span>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
new file mode 100644
index 00000000000..04100871a94
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
@@ -0,0 +1,25 @@
+<script>
+import statusIcon from '../mr_widget_status_icon.vue';
+
+export default {
+  name: 'ShaMismatch',
+  components: {
+    statusIcon,
+  },
+};
+</script>
+
+<template>
+  <div class="mr-widget-body media">
+    <status-icon
+      status="warning"
+      :show-disabled-button="true"
+    />
+    <div class="media-body space-children">
+      <span class="bold">
+        The source branch HEAD has recently changed.
+        Please reload the page and review the changes before merging.
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index 021c2237661..ed15fc6ab0f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -28,7 +28,7 @@ export { default as NothingToMergeState } from './components/states/nothing_to_m
 export { default as MissingBranchState } from './components/states/mr_widget_missing_branch.vue';
 export { default as NotAllowedState } from './components/states/mr_widget_not_allowed.vue';
 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 ShaMismatchState } from './components/states/sha_mismatch.vue';
 export { default as UnresolvedDiscussionsState } from './components/states/unresolved_discussions.vue';
 export { default as PipelineBlockedState } from './components/states/mr_widget_pipeline_blocked.vue';
 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 169adfe0a1d..0be5d9e5a55 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
@@ -19,7 +19,7 @@ import {
   MissingBranchState,
   NotAllowedState,
   ReadyToMergeState,
-  SHAMismatchState,
+  ShaMismatchState,
   UnresolvedDiscussionsState,
   PipelineBlockedState,
   PipelineFailedState,
@@ -227,7 +227,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-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/state_maps.js b/app/assets/javascripts/vue_merge_request_widget/stores/state_maps.js
index 483ad52b8cc..e080ce5c229 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,7 +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',
+  shaMismatch: 'sha-mismatch',
   rebase: 'mr-widget-rebase',
 };
 
diff --git a/changelogs/unreleased/refactor-move-mr-widget-sha-mismatch-vue-component.yml b/changelogs/unreleased/refactor-move-mr-widget-sha-mismatch-vue-component.yml
new file mode 100644
index 00000000000..ac41fe23d3d
--- /dev/null
+++ b/changelogs/unreleased/refactor-move-mr-widget-sha-mismatch-vue-component.yml
@@ -0,0 +1,5 @@
+---
+title: Move ShaMismatch vue component
+merge_request: 17546
+author: George Tsiolis
+type: performance
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js
index 4c67504b642..25684861724 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js
@@ -1,16 +1,17 @@
 import Vue from 'vue';
-import shaMismatchComponent from '~/vue_merge_request_widget/components/states/mr_widget_sha_mismatch';
+import ShaMismatch from '~/vue_merge_request_widget/components/states/sha_mismatch.vue';
 
-describe('MRWidgetSHAMismatch', () => {
+describe('ShaMismatch', () => {
   describe('template', () => {
-    const Component = Vue.extend(shaMismatchComponent);
+    const Component = Vue.extend(ShaMismatch);
     const vm = new Component({
       el: document.createElement('div'),
     });
     it('should have correct elements', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(vm.$el.innerText).toContain('The source branch HEAD has recently changed. Please reload the page and review the changes before merging');
+      expect(vm.$el.innerText).toContain('The source branch HEAD has recently changed.');
+      expect(vm.$el.innerText).toContain('Please reload the page and review the changes before merging.');
     });
   });
 });