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;
@@ -217,7 +218,10 @@ export default {
         });
     },
   },
-  template: `
+};
+</script>
+
+<template>
   <div class="mr-widget-body media">
     <status-icon :status="iconClass" />
     <div class="media-body">
@@ -232,8 +236,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"
@@ -244,7 +249,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"
@@ -331,22 +337,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>

app/assets/javascripts/vue_merge_request_widget/dependencies.js

@@ -27,7 +27,7 @@ export { default as ConflictsState } from './components/states/mr_widget_conflic
 export { default as NothingToMergeState } from './components/states/nothing_to_merge.vue';
 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 ReadyToMergeState } from './components/states/ready_to_merge.vue';
 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';

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

qa/qa/page/merge_request/show.rb

@@ -2,7 +2,7 @@ module QA
   module Page
     module MergeRequest
       class Show < Page::Base
-        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();