1 files changed, 117 insertions, 114 deletions

diff --git a/app/assets/javascripts/boards/components/modal/index.vue b/app/assets/javascripts/boards/components/modal/index.vue
index 0c4c709324d..fdd1346d4c7 100644
--- a/app/assets/javascripts/boards/components/modal/index.vue
+++ b/app/assets/javascripts/boards/components/modal/index.vue
@@ -1,143 +1,146 @@
 <script>
-  /* global ListIssue */
-  import { urlParamsToObject } from '~/lib/utils/common_utils';
-  import ModalHeader from './header.vue';
-  import ModalList from './list.vue';
-  import ModalFooter from './footer.vue';
-  import EmptyState from './empty_state.vue';
-  import ModalStore from '../../stores/modal_store';
+/* global ListIssue */
+import { urlParamsToObject } from '~/lib/utils/common_utils';
+import ModalHeader from './header.vue';
+import ModalList from './list.vue';
+import ModalFooter from './footer.vue';
+import EmptyState from './empty_state.vue';
+import ModalStore from '../../stores/modal_store';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 
-  export default {
-    components: {
-      EmptyState,
-      ModalHeader,
-      ModalList,
-      ModalFooter,
+export default {
+  components: {
+    EmptyState,
+    ModalHeader,
+    ModalList,
+    ModalFooter,
+    GlLoadingIcon,
+  },
+  props: {
+    newIssuePath: {
+      type: String,
+      required: true,
     },
-    props: {
-      newIssuePath: {
-        type: String,
-        required: true,
-      },
-      emptyStateSvg: {
-        type: String,
-        required: true,
-      },
-      issueLinkBase: {
-        type: String,
-        required: true,
-      },
-      rootPath: {
-        type: String,
-        required: true,
-      },
-      projectId: {
-        type: Number,
-        required: true,
-      },
-      milestonePath: {
-        type: String,
-        required: true,
-      },
-      labelPath: {
-        type: String,
-        required: true,
-      },
+    emptyStateSvg: {
+      type: String,
+      required: true,
     },
-    data() {
-      return ModalStore.store;
+    issueLinkBase: {
+      type: String,
+      required: true,
     },
-    computed: {
-      showList() {
-        if (this.activeTab === 'selected') {
-          return this.selectedIssues.length > 0;
-        }
+    rootPath: {
+      type: String,
+      required: true,
+    },
+    projectId: {
+      type: Number,
+      required: true,
+    },
+    milestonePath: {
+      type: String,
+      required: true,
+    },
+    labelPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return ModalStore.store;
+  },
+  computed: {
+    showList() {
+      if (this.activeTab === 'selected') {
+        return this.selectedIssues.length > 0;
+      }
 
-        return this.issuesCount > 0;
-      },
-      showEmptyState() {
-        if (!this.loading && this.issuesCount === 0) {
-          return true;
-        }
+      return this.issuesCount > 0;
+    },
+    showEmptyState() {
+      if (!this.loading && this.issuesCount === 0) {
+        return true;
+      }
 
-        return this.activeTab === 'selected' && this.selectedIssues.length === 0;
-      },
+      return this.activeTab === 'selected' && this.selectedIssues.length === 0;
     },
-    watch: {
-      page() {
-        this.loadIssues();
-      },
-      showAddIssuesModal() {
-        if (this.showAddIssuesModal && !this.issues.length) {
-          this.loading = true;
+  },
+  watch: {
+    page() {
+      this.loadIssues();
+    },
+    showAddIssuesModal() {
+      if (this.showAddIssuesModal && !this.issues.length) {
+        this.loading = true;
+        const loadingDone = () => {
+          this.loading = false;
+        };
+
+        this.loadIssues()
+          .then(loadingDone)
+          .catch(loadingDone);
+      } else if (!this.showAddIssuesModal) {
+        this.issues = [];
+        this.selectedIssues = [];
+        this.issuesCount = false;
+      }
+    },
+    filter: {
+      handler() {
+        if (this.$el.tagName) {
+          this.page = 1;
+          this.filterLoading = true;
           const loadingDone = () => {
-            this.loading = false;
+            this.filterLoading = false;
           };
 
-          this.loadIssues()
+          this.loadIssues(true)
             .then(loadingDone)
             .catch(loadingDone);
-        } else if (!this.showAddIssuesModal) {
-          this.issues = [];
-          this.selectedIssues = [];
-          this.issuesCount = false;
         }
       },
-      filter: {
-        handler() {
-          if (this.$el.tagName) {
-            this.page = 1;
-            this.filterLoading = true;
-            const loadingDone = () => {
-              this.filterLoading = false;
-            };
-
-            this.loadIssues(true)
-              .then(loadingDone)
-              .catch(loadingDone);
-          }
-        },
-        deep: true,
-      },
+      deep: true,
     },
-    created() {
-      this.page = 1;
-    },
-    methods: {
-      loadIssues(clearIssues = false) {
-        if (!this.showAddIssuesModal) return false;
+  },
+  created() {
+    this.page = 1;
+  },
+  methods: {
+    loadIssues(clearIssues = false) {
+      if (!this.showAddIssuesModal) return false;
 
-        return gl.boardService.getBacklog({
+      return gl.boardService
+        .getBacklog({
           ...urlParamsToObject(this.filter.path),
           page: this.page,
           per: this.perPage,
         })
-          .then(res => res.data)
-          .then(data => {
-            if (clearIssues) {
-              this.issues = [];
-            }
+        .then(res => res.data)
+        .then(data => {
+          if (clearIssues) {
+            this.issues = [];
+          }
 
-            data.issues.forEach(issueObj => {
-              const issue = new ListIssue(issueObj);
-              const foundSelectedIssue = ModalStore.findSelectedIssue(issue);
-              issue.selected = !!foundSelectedIssue;
+          data.issues.forEach(issueObj => {
+            const issue = new ListIssue(issueObj);
+            const foundSelectedIssue = ModalStore.findSelectedIssue(issue);
+            issue.selected = !!foundSelectedIssue;
 
-              this.issues.push(issue);
-            });
+            this.issues.push(issue);
+          });
 
-            this.loadingNewPage = false;
+          this.loadingNewPage = false;
 
-            if (!this.issuesCount) {
-              this.issuesCount = data.size;
-            }
-          })
-          .catch(() => {
-            // TODO: handle request error
-          });
-      },
+          if (!this.issuesCount) {
+            this.issuesCount = data.size;
+          }
+        })
+        .catch(() => {
+          // TODO: handle request error
+        });
     },
-  };
+  },
+};
 </script>
 <template>
   <div