Moves tabs.js component into a vue file

4 files changed, 96 insertions, 94 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>
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.vue b/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
index 4ccfe503ef4..806e038a95f 100644
--- a/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
@@ -1,62 +1,61 @@
 <script>
-import Flash from '../../../flash';
-import { __ } from '../../../locale';
+  import Vue from 'vue';
+  import Flash from '../../../flash';
+  import { __ } from '../../../locale';
 
-const Store = gl.issueBoards.BoardsStore;
+  const Store = gl.issueBoards.BoardsStore;
 
-export default {
-  props: {
-    issue: {
-      type: Object,
-      required: true,
+  export default {
+    props: {
+      issue: {
+        type: Object,
+        required: true,
+      },
+      list: {
+        type: Object,
+        required: true,
+      },
     },
-    list: {
-      type: Object,
-      required: true,
+    computed: {
+      updateUrl() {
+        return this.issue.path;
+      },
     },
-  },
-  computed: {
-    updateUrl() {
-      return this.issue.path;
-    },
-  },
-  methods: {
-    removeIssue() {
-      const issue = this.issue;
-      const lists = issue.getLists();
-      const listLabelIds = lists.map(list => list.label.id);
+    methods: {
+      removeIssue() {
+        const issue = this.issue;
+        const lists = issue.getLists();
+        const listLabelIds = lists.map(list => list.label.id);
 
-      let labelIds = issue.labels
-        .map(label => label.id)
-        .filter(id => !listLabelIds.includes(id));
-      if (labelIds.length === 0) {
-        labelIds = [''];
-      }
+        let labelIds = issue.labels.map(label => label.id).filter(id => !listLabelIds.includes(id));
+        if (labelIds.length === 0) {
+          labelIds = [''];
+        }
 
-      const data = {
-        issue: {
-          label_ids: labelIds,
-        },
-      };
+        const data = {
+          issue: {
+            label_ids: labelIds,
+          },
+        };
 
-      // Post the remove data
-      Vue.http.patch(this.updateUrl, data).catch(() => {
-        Flash(__('Failed to remove issue from board, please try again.'));
+        // Post the remove data
+        Vue.http.patch(this.updateUrl, data).catch(() => {
+          Flash(__('Failed to remove issue from board, please try again.'));
 
-        lists.forEach((list) => {
-          list.addIssue(issue);
+          lists.forEach(list => {
+            list.addIssue(issue);
+          });
         });
-      });
 
-      // Remove from the frontend store
-      lists.forEach((list) => {
-        list.removeIssue(issue);
-      });
+        // Remove from the frontend store
+        lists.forEach(list => {
+          list.removeIssue(issue);
+        });
 
-      Store.detail.issue = {};
+        Store.detail.issue = {};
+      },
     },
-  },
-};
+  };
 </script>
 <template>
   <div