Move NothingToMerge vue component

5 files changed, 56 insertions, 48 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js
deleted file mode 100644
index ebfd6765934..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js
+++ /dev/null
@@ -1,44 +0,0 @@
-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>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
new file mode 100644
index 00000000000..3d9161f6926
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
@@ -0,0 +1,47 @@
+<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>
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index a1bc28873df..e865a325a55 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/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';
diff --git a/changelogs/unreleased/refactor-move-mr-widget-nothing-to-merge-vue-component.yml b/changelogs/unreleased/refactor-move-mr-widget-nothing-to-merge-vue-component.yml
new file mode 100644
index 00000000000..dc8ff95dc27
--- /dev/null
+++ b/changelogs/unreleased/refactor-move-mr-widget-nothing-to-merge-vue-component.yml
@@ -0,0 +1,5 @@
+---
+title: Move NothingToMerge vue component
+merge_request: 17544
+author: George Tsiolis
+type: performance
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js
index a8a02fa6b66..2a762c9336e 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js
@@ -1,9 +1,9 @@
 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'),