Moves tabs.js component into a vue file

3 files changed, 51 insertions, 48 deletions

diff --git a/app/assets/javascripts/boards/components/modal/header.js b/app/assets/javascripts/boards/components/modal/header.js
index 5e511bb8935..cc9848058ca 100644
--- a/app/assets/javascripts/boards/components/modal/header.js
+++ b/app/assets/javascripts/boards/components/modal/header.js
@@ -1,12 +1,12 @@
 import Vue from 'vue';
 import modalFilters from './filters';
-import './tabs';
+import modalTabs from './tabs.vue';
 import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
 
 gl.issueBoards.ModalHeader = Vue.extend({
   components: {
-    'modal-tabs': gl.issueBoards.ModalTabs,
+    modalTabs,
     modalFilters,
   },
   mixins: [modalMixin],
diff --git a/app/assets/javascripts/boards/components/modal/tabs.js b/app/assets/javascripts/boards/components/modal/tabs.js
deleted file mode 100644
index 9d331de8e22..00000000000
--- a/app/assets/javascripts/boards/components/modal/tabs.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import Vue from 'vue';
-import ModalStore from '../../stores/modal_store';
-import modalMixin from '../../mixins/modal_mixins';
-
-gl.issueBoards.ModalTabs = Vue.extend({
-  mixins: [modalMixin],
-  data() {
-    return ModalStore.store;
-  },
-  computed: {
-    selectedCount() {
-      return ModalStore.selectedCount();
-    },
-  },
-  destroyed() {
-    this.activeTab = 'all';
-  },
-  template: `
-    <div class="top-area prepend-top-10 append-bottom-10">
-      <ul class="nav-links issues-state-filters">
-        <li :class="{ 'active': activeTab == 'all' }">
-          <a
-            href="#"
-            role="button"
-            @click.prevent="changeTab('all')">
-            Open issues
-            <span class="badge badge-pill">
-              {{ issuesCount }}
-            </span>
-          </a>
-        </li>
-        <li :class="{ 'active': activeTab == 'selected' }">
-          <a
-            href="#"
-            role="button"
-            @click.prevent="changeTab('selected')">
-            Selected issues
-            <span class="badge badge-pill">
-              {{ selectedCount }}
-            </span>
-          </a>
-        </li>
-      </ul>
-    </div>
-  `,
-});
diff --git a/app/assets/javascripts/boards/components/modal/tabs.vue b/app/assets/javascripts/boards/components/modal/tabs.vue
new file mode 100644
index 00000000000..d926b080094
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/tabs.vue
@@ -0,0 +1,49 @@
+<script>
+  import ModalStore from '../../stores/modal_store';
+  import modalMixin from '../../mixins/modal_mixins';
+
+  export default {
+    mixins: [modalMixin],
+    data() {
+      return ModalStore.store;
+    },
+    computed: {
+      selectedCount() {
+        return ModalStore.selectedCount();
+      },
+    },
+    destroyed() {
+      this.activeTab = 'all';
+    },
+  };
+</script>
+<template>
+  <div class="top-area prepend-top-10 append-bottom-10">
+    <ul class="nav-links issues-state-filters">
+      <li :class="{ 'active': activeTab == 'all' }">
+        <a
+          href="#"
+          role="button"
+          @click.prevent="changeTab('all')"
+        >
+          Open issues
+          <span class="badge badge-pill">
+            {{ issuesCount }}
+          </span>
+        </a>
+      </li>
+      <li :class="{ 'active': activeTab == 'selected' }">
+        <a
+          href="#"
+          role="button"
+          @click.prevent="changeTab('selected')"
+        >
+          Selected issues
+          <span class="badge badge-pill">
+            {{ selectedCount }}
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>