CE backport of issue-boards-js-fix

app/assets/javascripts/boards/index.js

@@ -1,5 +1,3 @@
-/* eslint-disable quote-props, comma-dangle */
-
 import $ from 'jquery';
 import _ from 'underscore';
 import Vue from 'vue';
@@ -47,7 +45,7 @@ export default () => {
   gl.IssueBoardsApp = new Vue({
     el: $boardApp,
     components: {
-      'board': gl.issueBoards.Board,
+      board: gl.issueBoards.Board,
       'board-sidebar': gl.issueBoards.BoardSidebar,
       BoardAddIssuesModal,
     },
@@ -65,11 +63,11 @@ export default () => {
       defaultAvatar: $boardApp.dataset.defaultAvatar,
     },
     computed: {
-      detailIssueVisible () {
+      detailIssueVisible() {
         return Object.keys(this.detailIssue.issue).length;
       },
     },
-    created () {
+    created() {
       gl.boardService = new BoardService({
         boardsEndpoint: this.boardsEndpoint,
         listsEndpoint: this.listsEndpoint,
@@ -89,15 +87,16 @@ export default () => {
       eventHub.$off('clearDetailIssue', this.clearDetailIssue);
       sidebarEventHub.$off('toggleSubscription', this.toggleSubscription);
     },
-    mounted () {
+    mounted() {
       this.filterManager = new FilteredSearchBoards(Store.filter, true, Store.cantEdit);
       this.filterManager.setup();
 
       Store.disabled = this.disabled;
-      gl.boardService.all()
+      gl.boardService
+        .all()
         .then(res => res.data)
-        .then((data) => {
+        .then(data => {
-          data.forEach((board) => {
+          data.forEach(board => {
             const list = Store.addList(board, this.defaultAvatar);
 
             if (list.type === 'closed') {
@@ -126,7 +125,7 @@ export default () => {
           newIssue.setFetchingState('subscriptions', true);
           BoardService.getIssueInfo(sidebarInfoEndpoint)
             .then(res => res.data)
-            .then((data) => {
+            .then(data => {
               newIssue.setFetchingState('subscriptions', false);
               newIssue.updateData({
                 subscribed: data.subscribed,
@@ -159,7 +158,7 @@ export default () => {
               Flash(__('An error occurred when toggling the notification subscription'));
             });
         }
-      }
+      },
     },
   });
 
@@ -168,77 +167,81 @@ export default () => {
     data: {
       filters: Store.state.filters,
     },
-    mounted () {
+    mounted() {
       gl.issueBoards.newListDropdownInit();
     },
   });
 
-  gl.IssueBoardsModalAddBtn = new Vue({
+  const issueBoardsModal = document.getElementById('js-add-issues-btn');
-    el: document.getElementById('js-add-issues-btn'),
-    mixins: [modalMixin],
-    data() {
-      return {
-        modal: ModalStore.store,
-        store: Store.state,
-        canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
-      };
-    },
-    computed: {
-      disabled() {
-        if (!this.store) {
-          return true;
-        }
-        return !this.store.lists.filter(list => !list.preset).length;
-      },
-      tooltipTitle() {
-        if (this.disabled) {
-          return 'Please add a list to your board first';
-        }
 
-        return '';
+  if (issueBoardsModal) {
+    gl.IssueBoardsModalAddBtn = new Vue({
+      el: issueBoardsModal,
+      mixins: [modalMixin],
+      data() {
+        return {
+          modal: ModalStore.store,
+          store: Store.state,
+          canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
+        };
       },
-    },
+      computed: {
-    watch: {
+        disabled() {
-      disabled() {
+          if (!this.store) {
+            return true;
+          }
+          return !this.store.lists.filter(list => !list.preset).length;
+        },
+        tooltipTitle() {
+          if (this.disabled) {
+            return 'Please add a list to your board first';
+          }
+
+          return '';
+        },
+      },
+      watch: {
+        disabled() {
+          this.updateTooltip();
+        },
+      },
+      mounted() {
         this.updateTooltip();
       },
-    },
+      methods: {
-    mounted() {
+        updateTooltip() {
-      this.updateTooltip();
+          const $tooltip = $(this.$refs.addIssuesButton);
-    },
-    methods: {
-      updateTooltip() {
-        const $tooltip = $(this.$refs.addIssuesButton);
 
-        this.$nextTick(() => {
+          this.$nextTick(() => {
-          if (this.disabled) {
+            if (this.disabled) {
-            $tooltip.tooltip();
+              $tooltip.tooltip();
-          } else {
+            } else {
-            $tooltip.tooltip('dispose');
+              $tooltip.tooltip('dispose');
+            }
+          });
+        },
+        openModal() {
+          if (!this.disabled) {
+            this.toggleModal(true);
           }
-        });
+        },
       },
-      openModal() {
+      template: `
-        if (!this.disabled) {
+        <div class="board-extra-actions">
-          this.toggleModal(true);
+          <button
-        }
+            class="btn btn-create prepend-left-10"
-      },
+            type="button"
-    },
+            data-placement="bottom"
-    template: `
+            ref="addIssuesButton"
-      <div class="board-extra-actions">
+            :class="{ 'disabled': disabled }"
-        <button
+            :title="tooltipTitle"
-          class="btn btn-create prepend-left-10"
+            :aria-disabled="disabled"
-          type="button"
+            v-if="canAdminList"
-          data-placement="bottom"
+            @click="openModal">
-          ref="addIssuesButton"
+            Add issues
-          :class="{ 'disabled': disabled }"
+          </button>
-          :title="tooltipTitle"
+        </div>
-          :aria-disabled="disabled"
+      `,
-          v-if="canAdminList"
+    });
-          @click="openModal">
+  }
-          Add issues
-        </button>
-      </div>
-    `,
-  });
 };