Cleaned up some code

app/assets/javascripts/boards/components/modal/dismiss.js.es6

-/* global Vue */
-(() => {
-  const ModalStore = gl.issueBoards.ModalStore;
-
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
-  gl.issueBoards.DismissModal = Vue.extend({
-    data() {
-      return ModalStore.store;
-    },
-    methods: {
-      toggleModal(toggle) {
-        this.showAddIssuesModal = toggle;
-      },
-    },
-    template: `
-      <button
-        type="button"
-        class="close"
-        data-dismiss="modal"
-        aria-label="Close"
-        @click="toggleModal(false)">
-        <span aria-hidden="true">×</span>
-      </button>
-    `,
-  });
-})();

app/assets/javascripts/boards/components/modal/footer.js.es6

@@ -32,8 +32,7 @@
         gl.boardService.addMultipleIssues(list, issueIds);
 
         // Add the issues on the frontend
-        issueIds.forEach((id) => {
-          const issue = this.issues.filter(fIssue => fIssue.id === id)[0];
+        this.selectedIssues.forEach((issue) => {
           list.addIssue(issue);
           list.issuesSize += 1;
         });
@@ -54,7 +53,7 @@
             @click="addIssues">
             {{ submitText }}
           </button>
-          <span class="add-issues-footer-to-list">
+          <span class="inline add-issues-footer-to-list">
             to list
           </span>
           <lists-dropdown></lists-dropdown>

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

 /* global Vue */
 //= require ./tabs
-//= require ./dismiss
-//= require ./search
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
@@ -12,21 +10,52 @@
     data() {
       return ModalStore.store;
     },
+    computed: {
+      selectAllText() {
+        if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) {
+          return 'Select all';
+        }
+
+        return 'Un-select all';
+      },
+    },
+    methods: {
+      toggleAll: ModalStore.toggleAll.bind(ModalStore),
+    },
     components: {
-      'modal-dismiss': gl.issueBoards.DismissModal,
       'modal-tabs': gl.issueBoards.ModalTabs,
-      'modal-search': gl.issueBoards.ModalSearch,
     },
     template: `
       <div>
         <header class="add-issues-header form-actions">
           <h2>
             Add issues
-            <modal-dismiss></modal-dismiss>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+              @click="showAddIssuesModal = false">
+              <span aria-hidden="true">×</span>
+            </button>
           </h2>
         </header>
         <modal-tabs v-if="!loading"></modal-tabs>
-        <modal-search v-if="!loading"></modal-search>
+        <div
+          class="add-issues-search prepend-top-10 append-bottom-10"
+          v-if="activeTab == 'all' && !loading">
+          <input
+            placeholder="Search issues..."
+            class="form-control"
+            type="search"
+            v-model="searchTerm" />
+          <button
+            type="button"
+            class="btn btn-success btn-inverted prepend-left-10"
+            @click="toggleAll">
+            {{ selectAllText }}
+          </button>
+        </div>
       </div>
     `,
   });

app/assets/javascripts/boards/components/modal/index.js.es6

@@ -16,14 +16,16 @@
       searchTerm() {
         this.searchOperation();
       },
-    },
-    mounted() {
-      this.loading = true;
+      showAddIssuesModal() {
+        if (this.showAddIssuesModal && !this.issues.length) {
+          this.loading = true;
 
-      this.loadIssues()
-        .then(() => {
-          this.loading = false;
-        });
+          this.loadIssues()
+            .then(() => {
+              this.loading = false;
+            });
+        }
+      },
     },
     methods: {
       searchOperation: _.debounce(function() {
@@ -59,7 +61,7 @@
           <modal-header></modal-header>
           <modal-list v-if="!loading"></modal-list>
           <section
-            class="add-issues-list"
+            class="add-issues-list text-center"
             v-if="loading">
             <div class="add-issues-list-loading">
               <i class="fa fa-spinner fa-spin"></i>

app/assets/javascripts/boards/components/modal/list.js.es6

@@ -64,32 +64,30 @@
       'issue-card-inner': gl.issueBoards.IssueCardInner,
     },
     template: `
-      <section class="add-issues-list">
+      <div
+        class="add-issues-list add-issues-list-columns"
+        ref="list"
+        v-show="!loading">
         <div
-          class="add-issues-list-columns list-unstyled"
-          ref="list"
-          v-show="!loading">
+          v-for="issue in loopIssues"
+          v-if="showIssue(issue)"
+          class="card-parent">
           <div
-            v-for="issue in loopIssues"
-            v-if="showIssue(issue)"
-            class="card-parent">
-            <div
-              class="card"
-              :class="{ 'is-active': issue.selected }"
-              @click="toggleIssue(issue)">
-              <issue-card-inner
-                :issue="issue"
-                :issue-link-base="'/'">
-              </issue-card-inner>
-              <span
-                v-if="issue.selected"
-                class="issue-card-selected">
-                <i class="fa fa-check"></i>
-              </span>
-            </div>
+            class="card"
+            :class="{ 'is-active': issue.selected }"
+            @click="toggleIssue(issue)">
+            <issue-card-inner
+              :issue="issue"
+              :issue-link-base="'/'">
+            </issue-card-inner>
+            <span
+              v-if="issue.selected"
+              class="issue-card-selected text-center">
+              <i class="fa fa-check"></i>
+            </span>
           </div>
         </div>
-      </section>
+      </div>
     `,
   });
 })();

app/assets/javascripts/boards/components/modal/search.js.es6

-/* global Vue */
-(() => {
-  const ModalStore = gl.issueBoards.ModalStore;
-
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
-  gl.issueBoards.ModalSearch = Vue.extend({
-    data() {
-      return ModalStore.store;
-    },
-    computed: {
-      selectAllText() {
-        if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) {
-          return 'Select all';
-        }
-
-        return 'Un-select all';
-      },
-    },
-    methods: {
-      toggleAll: ModalStore.toggleAll.bind(ModalStore),
-    },
-    template: `
-      <div
-        class="add-issues-search"
-        v-if="activeTab == 'all'">
-        <input
-          placeholder="Search issues..."
-          class="form-control"
-          type="search"
-          v-model="searchTerm" />
-        <button
-          type="button"
-          class="btn btn-success btn-inverted"
-          @click="toggleAll">
-          {{ selectAllText }}
-        </button>
-      </div>
-    `,
-  });
-})();

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

@@ -9,11 +9,6 @@
     data() {
       return ModalStore.store;
     },
-    methods: {
-      changeTab(tab) {
-        this.activeTab = tab;
-      },
-    },
     computed: {
       selectedCount() {
         return ModalStore.selectedCount();
@@ -23,13 +18,13 @@
       this.activeTab = 'all';
     },
     template: `
-      <div class="top-area">
+      <div class="top-area prepend-top-10">
         <ul class="nav-links issues-state-filters">
           <li :class="{ 'active': activeTab == 'all' }">
             <a
               href="#"
               role="button"
-              @click.prevent="changeTab('all')">
+              @click.prevent="activeTab = 'all'">
               <span>All issues</span>
               <span class="badge">
                 {{ issues.length }}
@@ -40,7 +35,7 @@
             <a
               href="#"
               role="button"
-              @click.prevent="changeTab('selected')">
+              @click.prevent="activeTab = 'selected'">
               <span>Selected issues</span>
               <span class="badge">
                 {{ selectedCount }}

app/assets/stylesheets/pages/boards.scss

@@ -358,7 +358,6 @@
 
 .add-issues-modal {
   display: flex;
-  align-items: center;
   position: fixed;
   top: 0;
   right: 0;
@@ -374,8 +373,7 @@
   width: 90vw;
   height: 85vh;
   min-height: 500px;
-  margin-left: auto;
-  margin-right: auto;
+  margin: auto;
   padding: 25px 15px 0;
   background-color: $white-light;
   border-radius: $border-radius-default;
@@ -391,57 +389,19 @@
     margin: 0;
     font-size: 18px;
   }
-
-  .top-area {
-    margin-bottom: 10px;
-  }
 }
 
 .add-issues-search {
   display: flex;
-  margin-bottom: 10px;
-  margin-top: 10px;
-
-  .btn {
-    margin-left: 10px;
-  }
 }
 
 .add-issues-list {
   display: flex;
   flex: 1;
+  padding-top: 3px;
   margin-left: -$gl-vert-padding;
   margin-right: -$gl-vert-padding;
   overflow-y: scroll;
-}
-
-.add-issues-list-loading {
-  align-self: center;
-  width: 100%;
-  padding-left: $gl-vert-padding;
-  padding-right: $gl-vert-padding;
-  font-size: 35px;
-  text-align: center;
-}
-
-.add-issues-footer {
-  margin-top: auto;
-  margin-left: -15px;
-  margin-right: -15px;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-.add-issues-footer-to-list {
-  display: inline-block;
-  padding-left: 6px;
-  padding-right: 6px;
-  line-height: 34px;
-}
-
-.add-issues-list-columns {
-  width: 100%;
-  padding-top: 3px;
 
   .card-parent {
     width: 100%;
@@ -462,9 +422,26 @@
   }
 }
 
-.all-issues-selected-empty {
+.add-issues-list-loading {
   align-self: center;
-  margin-bottom: 0;
+  width: 100%;
+  padding-left: $gl-vert-padding;
+  padding-right: $gl-vert-padding;
+  font-size: 35px;
+}
+
+.add-issues-footer {
+  margin-top: auto;
+  margin-left: -15px;
+  margin-right: -15px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.add-issues-footer-to-list {
+  padding-left: $gl-vert-padding;
+  padding-right: $gl-vert-padding;
+  line-height: 34px;
 }
 
 .issue-card-selected {
@@ -472,11 +449,9 @@
   right: -3px;
   top: -3px;
   width: 20px;
-  height: 20px;
   background-color: $blue-dark;
   color: $white-light;
   font-size: 12px;
-  text-align: center;
   line-height: 20px;
   border-radius: 50%;
 }