Move boards modal EmptyState vue component

2 files changed, 35 insertions, 31 deletions

diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js b/app/assets/javascripts/boards/components/modal/empty_state.vue
index 888bc9d7ef2..dbd69f84526 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.js
+++ b/app/assets/javascripts/boards/components/modal/empty_state.vue
@@ -1,8 +1,8 @@
-import Vue from 'vue';
+<script>
 import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
 
-gl.issueBoards.ModalEmptyState = Vue.extend({
+export default {
   mixins: [modalMixin],
   props: {
     newIssuePath: {
@@ -38,32 +38,36 @@ gl.issueBoards.ModalEmptyState = Vue.extend({
       return obj;
     },
   },
-  template: `
-    <section class="empty-state">
-      <div class="row">
-        <div class="col-12 col-md-6 order-md-last">
-          <aside class="svg-content"><img :src="emptyStateSvg"/></aside>
-        </div>
-        <div class="col-12 col-md-6 order-md-first">
-          <div class="text-content">
-            <h4>{{ contents.title }}</h4>
-            <p v-html="contents.content"></p>
-            <a
-              :href="newIssuePath"
-              class="btn btn-success btn-inverted"
-              v-if="activeTab === 'all'">
-              New issue
-            </a>
-            <button
-              type="button"
-              class="btn btn-default"
-              @click="changeTab('all')"
-              v-if="activeTab === 'selected'">
-              Open issues
-            </button>
-          </div>
+};
+</script>
+
+<template>
+  <section class="empty-state">
+    <div class="row">
+      <div class="col-12 col-md-6 order-md-last">
+        <aside class="svg-content"><img :src="emptyStateSvg"/></aside>
+      </div>
+      <div class="col-12 col-md-6 order-md-first">
+        <div class="text-content">
+          <h4>{{ contents.title }}</h4>
+          <p v-html="contents.content"></p>
+          <a
+            v-if="activeTab === 'all'"
+            :href="newIssuePath"
+            class="btn btn-success btn-inverted"
+          >
+            New issue
+          </a>
+          <button
+            v-if="activeTab === 'selected'"
+            class="btn btn-default"
+            type="button"
+            @click="changeTab('all')"
+          >
+            Open issues
+          </button>
         </div>
       </div>
-    </section>
-  `,
-});
+    </div>
+  </section>
+</template>
diff --git a/app/assets/javascripts/boards/components/modal/index.js b/app/assets/javascripts/boards/components/modal/index.js
index c8b2f45f177..c10397eaaba 100644
--- a/app/assets/javascripts/boards/components/modal/index.js
+++ b/app/assets/javascripts/boards/components/modal/index.js
@@ -6,15 +6,15 @@ import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import './header';
 import './list';
 import './footer';
-import './empty_state';
+import EmptyState from './empty_state.vue';
 import ModalStore from '../../stores/modal_store';
 
 gl.issueBoards.IssuesModal = Vue.extend({
   components: {
+    EmptyState,
     'modal-header': gl.issueBoards.ModalHeader,
     'modal-list': gl.issueBoards.ModalList,
     'modal-footer': gl.issueBoards.ModalFooter,
-    'empty-state': gl.issueBoards.ModalEmptyState,
     loadingIcon,
   },
   props: {