Move SquashBeforeMerge vue component

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.js → app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue

@@ -10,6 +10,6 @@ In EE, the configuration extends this object to add a functioning squash-before-
 button.
 */
 
-export default {
-  template: '',
-};
+<script>
+  export default {};
+</script>

app/assets/javascripts/vue_merge_request_widget/dependencies.js

@@ -40,7 +40,7 @@ export { default as MRWidgetService } from 'ee/vue_merge_request_widget/services
 export { default as eventHub } from './event_hub';
 export { default as getStateKey } from 'ee/vue_merge_request_widget/stores/get_state_key';
 export { default as stateMaps } from 'ee/vue_merge_request_widget/stores/state_maps';
-export { default as SquashBeforeMerge } from 'ee/vue_merge_request_widget/components/states/mr_widget_squash_before_merge';
+export { default as SquashBeforeMerge } from 'ee/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue';
 export { default as notify } from '../lib/utils/notify';
 export { default as SourceBranchRemovalStatus } from './components/source_branch_removal_status.vue';
 

changelogs/unreleased/refactor-move-squash-before-merge-vue-component.yml

+---
+title: Move SquashBeforeMerge vue component
+merge_request: 18813
+author: George Tsiolis
+type: performance

ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js

 import eventHub from '~/vue_merge_request_widget/event_hub';
 import ReadyToMergeState from '~/vue_merge_request_widget/components/states/ready_to_merge.vue';
-import SquashBeforeMerge from './mr_widget_squash_before_merge';
+import SquashBeforeMerge from './mr_widget_squash_before_merge.vue';
 
 export default {
   extends: ReadyToMergeState,

ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.js → ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue

+<script>
 import eventHub from '~/vue_merge_request_widget/event_hub';
-import CESquashBeforeMerge from '~/vue_merge_request_widget/components/states/mr_widget_squash_before_merge';
+import CESquashBeforeMerge from '~/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue';
 
 export default {
   extends: CESquashBeforeMerge,
@@ -23,7 +24,10 @@ export default {
       eventHub.$emit('MRWidgetUpdateSquash', this.squashBeforeMerge);
     },
   },
-  template: `
+};
+</script>
+
+<template>
   <div class="accept-control inline">
     <label class="merge-param-checkbox">
       <input
@@ -32,7 +36,8 @@ export default {
         class="qa-squash-checkbox"
         :disabled="isMergeButtonDisabled"
         v-model="squashBeforeMerge"
-          @change="updateSquashModel"/>
+        @change="updateSquashModel"
+      />
       Squash commits
     </label>
     <a
@@ -42,10 +47,12 @@ export default {
       data-placement="bottom"
       target="_blank"
       rel="noopener noreferrer nofollow"
-        data-container="body">
+      data-container="body"
+    >
       <i
         class="fa fa-question-circle"
-          aria-hidden="true"></i>
+        aria-hidden="true">
+      </i>
     </a>
-    </div>`,
-};
+  </div>
+</template>

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

@@ -9,7 +9,7 @@ module QA
                 element :head_mismatch, "The source branch HEAD has recently changed."
               end
 
-              view 'ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.js' do
+              view 'ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue' do
                 element :squash_checkbox
               end
             end