Move boards modal EmptyState vue component

4 files changed, 41 insertions, 32 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: {
diff --git a/changelogs/unreleased/move-boards-modal-empty-state-vue-component.yml b/changelogs/unreleased/move-boards-modal-empty-state-vue-component.yml
new file mode 100644
index 00000000000..54a61d7c914
--- /dev/null
+++ b/changelogs/unreleased/move-boards-modal-empty-state-vue-component.yml
@@ -0,0 +1,5 @@
+---
+title: Move boards modal EmptyState vue component
+merge_request: 20068
+author: George Tsiolis
+type: performance
diff --git a/spec/javascripts/test_bundle.js b/spec/javascripts/test_bundle.js
index 994011b262a..6b049392fdf 100644
--- a/spec/javascripts/test_bundle.js
+++ b/spec/javascripts/test_bundle.js
@@ -135,7 +135,7 @@ if (process.env.BABEL_ENV === 'coverage') {
   // exempt these files from the coverage report
   const troubleMakers = [
     './blob_edit/blob_bundle.js',
-    './boards/components/modal/empty_state.js',
+    './boards/components/modal/empty_state.vue',
     './boards/components/modal/footer.js',
     './boards/components/modal/header.js',
     './cycle_analytics/cycle_analytics_bundle.js',