Move NothingToMerge vue component

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js

-import emptyStateSVG from 'icons/_mr_widget_empty_state.svg';
-
-export default {
-  name: 'MRWidgetNothingToMerge',
-  props: {
-    mr: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return { emptyStateSVG };
-  },
-  template: `
-    <div class="mr-widget-body mr-widget-empty-state">
-      <div class="row">
-        <div class="artwork col-sm-5 col-sm-push-7 col-xs-12 text-center">
-          <span v-html="emptyStateSVG"></span>
-        </div>
-        <div class="text col-sm-7 col-sm-pull-5 col-xs-12">
-          <span>
-            Merge requests are a place to propose changes you have made to a project
-            and discuss those changes with others.
-          </span>
-          <p>
-            Interested parties can even contribute by pushing commits if they want to.
-          </p>
-          <p>
-            Currently there are no changes in this merge request's source branch.
-            Please push new commits or use a different branch.
-          </p>
-          <div>
-            <a
-              v-if="mr.newBlobPath"
-              :href="mr.newBlobPath"
-              class="btn btn-inverted btn-save">
-              Create file
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-};

app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue

+<script>
+import emptyStateSVG from 'icons/_mr_widget_empty_state.svg';
+
+export default {
+  name: 'MRWidgetNothingToMerge',
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return { emptyStateSVG };
+  },
+};
+</script>
+
+<template>
+  <div class="mr-widget-body mr-widget-empty-state">
+    <div class="row">
+      <div class="artwork col-sm-5 col-sm-push-7 col-xs-12 text-center">
+        <span v-html="emptyStateSVG"></span>
+      </div>
+      <div class="text col-sm-7 col-sm-pull-5 col-xs-12">
+        <span>
+          Merge requests are a place to propose changes you have made to a project
+          and discuss those changes with others.
+        </span>
+        <p>
+          Interested parties can even contribute by pushing commits if they want to.
+        </p>
+        <p>
+          Currently there are no changes in this merge request's source branch.
+          Please push new commits or use a different branch.
+        </p>
+        <div>
+          <a
+            v-if="mr.newBlobPath"
+            :href="mr.newBlobPath"
+            class="btn btn-inverted btn-save">
+            Create file
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_merge_request_widget/dependencies.js

@@ -24,7 +24,7 @@ export { default as MergingState } from './components/states/mr_widget_merging.v
 export { default as WipState } from './components/states/mr_widget_wip';
 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/mr_widget_nothing_to_merge';
+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';

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

+---
+title: Move NothingToMerge vue component
+merge_request: 17544
+author: George Tsiolis
+type: performance

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

 import Vue from 'vue';
-import nothingToMergeComponent from '~/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge';
+import NothingToMerge from '~/vue_merge_request_widget/components/states/nothing_to_merge.vue';
 
-describe('MRWidgetNothingToMerge', () => {
+describe('NothingToMerge', () => {
   describe('template', () => {
-    const Component = Vue.extend(nothingToMergeComponent);
+    const Component = Vue.extend(NothingToMerge);
     const newBlobPath = '/foo';
     const vm = new Component({
       el: document.createElement('div'),