Move ShaMismatch vue component

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js

-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>
-  `,
-};

app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue

+<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>

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 'ee/vue_merge_request_widget/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';

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -19,7 +19,7 @@ import {
   MissingBranchState,
   NotAllowedState,
   ReadyToMergeState,
-  SHAMismatchState,
+  ShaMismatchState,
   UnresolvedDiscussionsState,
   PipelineBlockedState,
   PipelineFailedState,
@@ -228,7 +228,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,

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',
 };
 

changelogs/unreleased/refactor-move-mr-widget-sha-mismatch-vue-component.yml

+---
+title: Move ShaMismatch vue component
+merge_request: 17546
+author: George Tsiolis
+type: performance

qa/qa/ee/page/merge_request/show.rb

@@ -5,7 +5,7 @@ module QA
         module Show
           def self.prepended(page)
             page.module_eval do
-              view 'app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js' do
+              view 'app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue' do
                 element :head_mismatch, "The source branch HEAD has recently changed."
               end
 

spec/javascripts/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js

 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.');
     });
   });
 });