EE port of Moves remove_issue component into a .vue file

app/assets/javascripts/boards/components/board_sidebar.js

@@ -2,18 +2,18 @@
 
 import $ from 'jquery';
 import Vue from 'vue';
-import weight from 'ee/sidebar/components/weight/weight.vue';
+import Weight from 'ee/sidebar/components/weight/weight.vue';
 import Flash from '../../flash';
 import { __ } from '../../locale';
 import Sidebar from '../../right_sidebar';
 import eventHub from '../../sidebar/event_hub';
-import assigneeTitle from '../../sidebar/components/assignees/assignee_title.vue';
-import assignees from '../../sidebar/components/assignees/assignees.vue';
+import AssigneeTitle from '../../sidebar/components/assignees/assignee_title.vue';
+import Assignees from '../../sidebar/components/assignees/assignees.vue';
 import DueDateSelectors from '../../due_date_select';
-import './sidebar/remove_issue';
+import RemoveBtn from './sidebar/remove_issue.vue';
 import IssuableContext from '../../issuable_context';
 import LabelsSelect from '../../labels_select';
-import subscriptions from '../../sidebar/components/subscriptions/subscriptions.vue';
+import Subscriptions from '../../sidebar/components/subscriptions/subscriptions.vue';
 import MilestoneSelect from '../../milestone_select';
 
 const Store = gl.issueBoards.BoardsStore;
@@ -23,11 +23,11 @@ window.gl.issueBoards = window.gl.issueBoards || {};
 
 gl.issueBoards.BoardSidebar = Vue.extend({
   components: {
-    assigneeTitle,
-    assignees,
-    removeBtn: gl.issueBoards.RemoveIssueBtn,
-    subscriptions,
-    weight,
+    AssigneeTitle,
+    Assignees,
+    RemoveBtn,
+    Subscriptions,
+    Weight,
   },
   props: {
     currentUser: {

app/assets/javascripts/boards/components/modal/header.js

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

app/assets/javascripts/boards/components/modal/tabs.js

-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>
-  `,
-});

app/assets/javascripts/boards/components/modal/tabs.vue

+<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>

app/assets/javascripts/boards/components/sidebar/remove_issue.js

-import Vue from 'vue';
-import Flash from '../../../flash';
-import { __ } from '../../../locale';
-
-const Store = gl.issueBoards.BoardsStore;
-
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-
-gl.issueBoards.RemoveIssueBtn = Vue.extend({
-  props: {
-    issue: {
-      type: Object,
-      required: true,
-    },
-    list: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    updateUrl() {
-      return this.issue.path;
-    },
-  },
-  methods: {
-    removeIssue() {
-      const board = Store.state.currentBoard;
-      const issue = this.issue;
-      const lists = issue.getLists();
-      const boardLabelIds = board.labels.map(label => label.id);
-      const listLabelIds = lists.map(list => list.label.id);
-
-      let labelIds = issue.labels
-        .map(label => label.id)
-        .filter(id => !listLabelIds.includes(id))
-        .filter(id => !boardLabelIds.includes(id));
-      if (labelIds.length === 0) {
-        labelIds = [''];
-      }
-
-      let assigneeIds = issue.assignees
-        .map(assignee => assignee.id)
-        .filter(id => id !== board.assignee.id);
-      if (assigneeIds.length === 0) {
-        // for backend to explicitly set No Assignee
-        assigneeIds = ['0'];
-      }
-
-      const data = {
-        issue: {
-          label_ids: labelIds,
-          assignee_ids: assigneeIds,
-        },
-      };
-
-      if (board.milestone_id) {
-        data.issue.milestone_id = -1;
-      }
-
-      if (board.weight) {
-        data.issue.weight = null;
-      }
-
-      // 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);
-        });
-      });
-
-      // Remove from the frontend store
-      lists.forEach((list) => {
-        list.removeIssue(issue);
-      });
-
-      Store.detail.issue = {};
-    },
-  },
-  template: `
-    <div
-      class="block list">
-      <button
-        class="btn btn-default btn-block"
-        type="button"
-        @click="removeIssue">
-        Remove from board
-      </button>
-    </div>
-  `,
-});

app/assets/javascripts/boards/components/sidebar/remove_issue.vue

+<script>
+  import Vue from 'vue';
+  import Flash from '../../../flash';
+  import { __ } from '../../../locale';
+
+  const Store = gl.issueBoards.BoardsStore;
+
+  export default {
+    props: {
+      issue: {
+        type: Object,
+        required: true,
+      },
+      list: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      updateUrl() {
+        return this.issue.path;
+      },
+    },
+    methods: {
+      removeIssue() {
+        const board = Store.state.currentBoard;
+        const issue = this.issue;
+        const lists = issue.getLists();
+        const boardLabelIds = board.labels.map(label => label.id);
+        const listLabelIds = lists.map(list => list.label.id);
+
+        let labelIds = issue.labels
+          .map(label => label.id)
+          .filter(id => !listLabelIds.includes(id))
+          .filter(id => !boardLabelIds.includes(id));
+        if (labelIds.length === 0) {
+          labelIds = [''];
+        }
+
+        let assigneeIds = issue.assignees
+          .map(assignee => assignee.id)
+          .filter(id => id !== board.assignee.id);
+        if (assigneeIds.length === 0) {
+          // for backend to explicitly set No Assignee
+          assigneeIds = ['0'];
+        }
+
+        const data = {
+          issue: {
+            label_ids: labelIds,
+            assignee_ids: assigneeIds,
+          },
+        };
+
+        if (board.milestone_id) {
+          data.issue.milestone_id = -1;
+        }
+
+        if (board.weight) {
+          data.issue.weight = null;
+        }
+
+        // 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);
+          });
+        });
+
+        // Remove from the frontend store
+        lists.forEach(list => {
+          list.removeIssue(issue);
+        });
+
+        Store.detail.issue = {};
+      },
+    },
+  };
+</script>
+<template>
+  <div
+    class="block list"
+  >
+    <button
+      class="btn btn-default btn-block"
+      type="button"
+      @click="removeIssue"
+    >
+      Remove from board
+    </button>
+  </div>
+</template>