Move WorkInProgress vue component

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js → app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue

+<script>
 import $ from 'jquery';
 import statusIcon from '../mr_widget_status_icon.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import eventHub from '../../event_hub';
 
 export default {
-  name: 'MRWidgetWIP',
-  props: {
-    mr: { type: Object, required: true },
-    service: { type: Object, required: true },
+  name: 'WorkInProgress',
+  components: {
+    statusIcon,
   },
   directives: {
     tooltip,
   },
+  props: {
+    mr: { type: Object, required: true },
+    service: { type: Object, required: true },
+  },
   data() {
     return {
       isMakingRequest: false,
     };
   },
-  components: {
-    statusIcon,
-  },
   methods: {
     removeWIP() {
       this.isMakingRequest = true;
@@ -36,17 +37,25 @@ export default {
         });
     },
   },
-  template: `
+};
+</script>
+
+<template>
   <div class="mr-widget-body media">
-      <status-icon status="warning" :show-disabled-button="Boolean(mr.removeWIPPath)" />
+    <status-icon
+      status="warning"
+      :show-disabled-button="Boolean(mr.removeWIPPath)"
+    />
     <div class="media-body space-children">
       <span class="bold">
         This is a Work in Progress
         <i
           v-tooltip
           class="fa fa-question-circle"
-            title="When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged"
-            aria-label="When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged">
+          title="When this merge request is ready,
+          remove the WIP: prefix from the title to allow it to be merged"
+          aria-label="When this merge request is ready,
+          remove the WIP: prefix from the title to allow it to be merged">
         </i>
       </span>
       <button
@@ -58,10 +67,10 @@ export default {
         <i
           v-if="isMakingRequest"
           class="fa fa-spinner fa-spin"
-            aria-hidden="true" />
+          aria-hidden="true">
+        </i>
         Resolve WIP status
       </button>
     </div>
   </div>
-  `,
-};
+</template>

app/assets/javascripts/vue_merge_request_widget/dependencies.js

@@ -21,7 +21,7 @@ export { default as MergedState } from './components/states/mr_widget_merged.vue
 export { default as FailedToMerge } from './components/states/mr_widget_failed_to_merge.vue';
 export { default as ClosedState } from './components/states/mr_widget_closed.vue';
 export { default as MergingState } from './components/states/mr_widget_merging.vue';
-export { default as WipState } from './components/states/mr_widget_wip';
+export { default as WorkInProgressState } from './components/states/work_in_progress.vue';
 export { default as ArchivedState } from './components/states/mr_widget_archived.vue';
 export { default as ConflictsState } from './components/states/mr_widget_conflicts.vue';
 export { default as NothingToMergeState } from './components/states/nothing_to_merge.vue';

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -12,7 +12,7 @@ import {
   ClosedState,
   MergingState,
   RebaseState,
-  WipState,
+  WorkInProgressState,
   ArchivedState,
   ConflictsState,
   NothingToMergeState,
@@ -220,7 +220,7 @@ export default {
     'mr-widget-closed': ClosedState,
     'mr-widget-merging': MergingState,
     'mr-widget-failed-to-merge': FailedToMerge,
-    'mr-widget-wip': WipState,
+    'mr-widget-wip': WorkInProgressState,
     'mr-widget-archived': ArchivedState,
     'mr-widget-conflicts': ConflictsState,
     'mr-widget-nothing-to-merge': NothingToMergeState,

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

+---
+title: Move WorkInProgress vue component
+merge_request: 17536
+author: George Tsiolis
+type: performance

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

 import Vue from 'vue';
-import wipComponent from '~/vue_merge_request_widget/components/states/mr_widget_wip';
+import WorkInProgress from '~/vue_merge_request_widget/components/states/work_in_progress.vue';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 
 const createComponent = () => {
-  const Component = Vue.extend(wipComponent);
+  const Component = Vue.extend(WorkInProgress);
   const mr = {
     title: 'The best MR ever',
     removeWIPPath: '/path/to/remove/wip',
@@ -17,10 +17,10 @@ const createComponent = () => {
   });
 };
 
-describe('MRWidgetWIP', () => {
+describe('Wip', () => {
   describe('props', () => {
     it('should have props', () => {
-      const { mr, service } = wipComponent.props;
+      const { mr, service } = WorkInProgress.props;
 
       expect(mr.type instanceof Object).toBeTruthy();
       expect(mr.required).toBeTruthy();