Move ReadyToMerge vue component

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js → app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue

+<script>
 import successSvg from 'icons/_icon_status_success.svg';
 import warningSvg from 'icons/_icon_status_warning.svg';
 import simplePoll from '~/lib/utils/simple_poll';
@@ -7,7 +8,10 @@ import statusIcon from '../mr_widget_status_icon.vue';
 import eventHub from '../../event_hub';
 
 export default {
-  name: 'MRWidgetReadyToMerge',
+  name: 'ReadyToMerge',
+  components: {
+    statusIcon,
+  },
   props: {
     mr: { type: Object, required: true },
     service: { type: Object, required: true },
@@ -26,9 +30,6 @@ export default {
       warningSvg,
     };
   },
-  components: {
-    statusIcon,
-  },
   computed: {
     shouldShowMergeWhenPipelineSucceedsText() {
       return this.mr.isPipelineActive;
@@ -221,7 +222,10 @@ export default {
         });
     },
   },
-  template: `
+};
+</script>
+
+<template>
   <div class="mr-widget-body media">
     <status-icon :status="iconClass" />
     <div class="media-body">
@@ -236,8 +240,9 @@ export default {
             <i
               v-if="isMakingRequest"
               class="fa fa-spinner fa-spin"
-                aria-hidden="true" />
-              {{mergeButtonText}}
+              aria-hidden="true"
+            ></i>
+            {{ mergeButtonText }}
           </button>
           <button
             v-if="shouldShowMergeOptionsDropdown"
@@ -248,7 +253,8 @@ export default {
             aria-label="Select merge moment">
             <i
               class="fa fa-chevron-down"
-                aria-hidden="true" />
+              aria-hidden="true"
+            ></i>
           </button>
           <ul
             v-if="shouldShowMergeOptionsDropdown"
@@ -335,22 +341,27 @@ export default {
             <div class="commit-message-container">
               <div class="max-width-marker"></div>
               <textarea
+                id="commit-message"
                 v-model="commitMessage"
                 class="form-control js-commit-message"
                 required="required"
                 rows="14"
                 name="Commit message"></textarea>
             </div>
-              <p class="hint">Try to keep the first line under 52 characters and the others under 72</p>
+            <p class="hint">
+              Try to keep the first line under 52 characters and the others under 72
+            </p>
             <div class="hint">
               <a
                 @click.prevent="updateCommitMessage"
-                  href="#">{{commitMessageLinkTitle}}</a>
+                href="#"
+              >
+                {{ commitMessageLinkTitle }}
+              </a>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-  `,
-};
+</template>

changelogs/unreleased/refactor-move-mr-widget-ready-to-merge-vue-component.yml

+---
+title: Move ReadyToMerge vue component
+merge_request: 17545
+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/mr_widget_ready_to_merge';
+import ReadyToMergeState from '~/vue_merge_request_widget/components/states/ready_to_merge.vue';
 import SquashBeforeMerge from './mr_widget_squash_before_merge';
 
 export default {
   extends: ReadyToMergeState,
-  name: 'MRWidgetReadyToMerge',
+  name: 'ReadyToMerge',
   components: {
     'squash-before-merge': SquashBeforeMerge,
   },

qa/qa/page/merge_request/show.rb

@@ -4,7 +4,7 @@ module QA
       class Show < Page::Base
         prepend QA::EE::Page::MergeRequest::Show
 
-        view 'app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js' do
+        view 'app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue' do
           element :merge_button
           element :fast_forward_message, 'Fast-forward merge without a merge commit'
         end

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

 import Vue from 'vue';
-import readyToMergeComponent from '~/vue_merge_request_widget/components/states/mr_widget_ready_to_merge';
+import ReadyToMerge from '~/vue_merge_request_widget/components/states/ready_to_merge.vue';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 import * as simplePoll from '~/lib/utils/simple_poll';
 
 const commitMessage = 'This is the commit message';
 const commitMessageWithDescription = 'This is the commit message description';
 const createComponent = (customConfig = {}) => {
-  const Component = Vue.extend(readyToMergeComponent);
+  const Component = Vue.extend(ReadyToMerge);
   const mr = {
     isPipelineActive: false,
     pipeline: null,
@@ -36,7 +36,7 @@ const createComponent = (customConfig = {}) => {
   });
 };
 
-describe('MRWidgetReadyToMerge', () => {
+describe('ReadyToMerge', () => {
   let vm;
 
   beforeEach(() => {
@@ -49,7 +49,7 @@ describe('MRWidgetReadyToMerge', () => {
 
   describe('props', () => {
     it('should have props', () => {
-      const { mr, service } = readyToMergeComponent.props;
+      const { mr, service } = ReadyToMerge.props;
 
       expect(mr.type instanceof Object).toBeTruthy();
       expect(mr.required).toBeTruthy();