From 77723e2f3ac230e806af315c45ebecb8ba23d12d Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Thu, 21 Jun 2018 15:55:17 +0300
Subject: Move boards modal EmptyState vue component

---
 .../boards/components/modal/empty_state.js         | 69 --------------------
 .../boards/components/modal/empty_state.vue        | 73 ++++++++++++++++++++++
 .../javascripts/boards/components/modal/index.js   |  4 +-
 ...move-boards-modal-empty-state-vue-component.yml |  5 ++
 spec/javascripts/test_bundle.js                    |  2 +-
 5 files changed, 81 insertions(+), 72 deletions(-)
 delete mode 100644 app/assets/javascripts/boards/components/modal/empty_state.js
 create mode 100644 app/assets/javascripts/boards/components/modal/empty_state.vue
 create mode 100644 changelogs/unreleased/move-boards-modal-empty-state-vue-component.yml

diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js b/app/assets/javascripts/boards/components/modal/empty_state.js
deleted file mode 100644
index 888bc9d7ef2..00000000000
--- a/app/assets/javascripts/boards/components/modal/empty_state.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import Vue from 'vue';
-import ModalStore from '../../stores/modal_store';
-import modalMixin from '../../mixins/modal_mixins';
-
-gl.issueBoards.ModalEmptyState = Vue.extend({
-  mixins: [modalMixin],
-  props: {
-    newIssuePath: {
-      type: String,
-      required: true,
-    },
-    emptyStateSvg: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return ModalStore.store;
-  },
-  computed: {
-    contents() {
-      const obj = {
-        title: 'You haven\'t added any issues to your project yet',
-        content: `
-          An issue can be a bug, a todo or a feature request that needs to be
-          discussed in a project. Besides, issues are searchable and filterable.
-        `,
-      };
-
-      if (this.activeTab === 'selected') {
-        obj.title = 'You haven\'t selected any issues yet';
-        obj.content = `
-          Go back to <strong>Open issues</strong> and select some issues
-          to add to your board.
-        `;
-      }
-
-      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>
-        </div>
-      </div>
-    </section>
-  `,
-});
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.vue b/app/assets/javascripts/boards/components/modal/empty_state.vue
new file mode 100644
index 00000000000..dbd69f84526
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/empty_state.vue
@@ -0,0 +1,73 @@
+<script>
+import ModalStore from '../../stores/modal_store';
+import modalMixin from '../../mixins/modal_mixins';
+
+export default {
+  mixins: [modalMixin],
+  props: {
+    newIssuePath: {
+      type: String,
+      required: true,
+    },
+    emptyStateSvg: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return ModalStore.store;
+  },
+  computed: {
+    contents() {
+      const obj = {
+        title: 'You haven\'t added any issues to your project yet',
+        content: `
+          An issue can be a bug, a todo or a feature request that needs to be
+          discussed in a project. Besides, issues are searchable and filterable.
+        `,
+      };
+
+      if (this.activeTab === 'selected') {
+        obj.title = 'You haven\'t selected any issues yet';
+        obj.content = `
+          Go back to <strong>Open issues</strong> and select some issues
+          to add to your board.
+        `;
+      }
+
+      return obj;
+    },
+  },
+};
+</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>
+    </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',
-- 
cgit v1.2.1