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,29 +24,35 @@ export default {
       eventHub.$emit('MRWidgetUpdateSquash', this.squashBeforeMerge);
     },
   },
-  template: `
-    <div class="accept-control inline">
-      <label class="merge-param-checkbox">
-        <input
-          type="checkbox"
-          name="squash"
-          class="qa-squash-checkbox"
-          :disabled="isMergeButtonDisabled"
-          v-model="squashBeforeMerge"
-          @change="updateSquashModel"/>
-        Squash commits
-      </label>
-      <a
-        :href="mr.squashBeforeMergeHelpPath"
-        data-title="About this feature"
-        data-toggle="tooltip"
-        data-placement="bottom"
-        target="_blank"
-        rel="noopener noreferrer nofollow"
-        data-container="body">
-        <i
-          class="fa fa-question-circle"
-          aria-hidden="true"></i>
-      </a>
-    </div>`,
 };
+</script>
+
+<template>
+  <div class="accept-control inline">
+    <label class="merge-param-checkbox">
+      <input
+        type="checkbox"
+        name="squash"
+        class="qa-squash-checkbox"
+        :disabled="isMergeButtonDisabled"
+        v-model="squashBeforeMerge"
+        @change="updateSquashModel"
+      />
+      Squash commits
+    </label>
+    <a
+      :href="mr.squashBeforeMergeHelpPath"
+      data-title="About this feature"
+      data-toggle="tooltip"
+      data-placement="bottom"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      data-container="body"
+    >
+      <i
+        class="fa fa-question-circle"
+        aria-hidden="true">
+      </i>
+    </a>
+  </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