Move boards modal EmptyState vue component

app/assets/javascripts/boards/components/modal/empty_state.js → app/assets/javascripts/boards/components/modal/empty_state.vue

-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,7 +38,10 @@ gl.issueBoards.ModalEmptyState = Vue.extend({
       return obj;
     },
   },
-  template: `
+};
+</script>
+
+<template>
   <section class="empty-state">
     <div class="row">
       <div class="col-12 col-md-6 order-md-last">
@@ -49,21 +52,22 @@ gl.issueBoards.ModalEmptyState = Vue.extend({
           <h4>{{ contents.title }}</h4>
           <p v-html="contents.content"></p>
           <a
+            v-if="activeTab === 'all'"
             :href="newIssuePath"
             class="btn btn-success btn-inverted"
-              v-if="activeTab === 'all'">
+          >
             New issue
           </a>
           <button
-              type="button"
+            v-if="activeTab === 'selected'"
             class="btn btn-default"
+            type="button"
             @click="changeTab('all')"
-              v-if="activeTab === 'selected'">
+          >
             Open issues
           </button>
         </div>
       </div>
     </div>
   </section>
-  `,
-});
+</template>

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: {

changelogs/unreleased/move-boards-modal-empty-state-vue-component.yml

+---
+title: Move boards modal EmptyState vue component
+merge_request: 20068
+author: George Tsiolis
+type: performance

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',