Merge branch 'mg-update-issue-board-components-ee' into 'master'

EE Port of "Convert remaining issue board components into ES module syntax"

See merge request gitlab-org/gitlab-ee!7842

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

@@ -4,20 +4,17 @@ import { n__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import Tooltip from '~/vue_shared/directives/tooltip';
 import AccessorUtilities from '../../lib/utils/accessor';
-import boardList from './board_list.vue';
 import BoardBlankState from './board_blank_state.vue';
-import './board_delete';
+import BoardDelete from './board_delete';
+import BoardList from './board_list.vue';
+import boardsStore from '../stores/boards_store';
+import { getBoardSortableDefaultOptions, sortableEnd } from '../mixins/sortable_default_options';
 
-const Store = gl.issueBoards.BoardsStore;
-
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-
-gl.issueBoards.Board = Vue.extend({
+export default Vue.extend({
   components: {
-    boardList,
-    'board-delete': gl.issueBoards.BoardDelete,
     BoardBlankState,
+    BoardDelete,
+    BoardList,
     Icon,
   },
   directives: {
@@ -47,8 +44,8 @@ gl.issueBoards.Board = Vue.extend({
   },
   data () {
     return {
-      detailIssue: Store.detail,
-      filter: Store.filter,
+      detailIssue: boardsStore.detail,
+      filter: boardsStore.filter,
     };
   },
   computed: {
@@ -70,20 +67,20 @@ gl.issueBoards.Board = Vue.extend({
     }
   },
   mounted () {
-    this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
+    this.sortableOptions = getBoardSortableDefaultOptions({
       disabled: this.disabled,
       group: 'boards',
       draggable: '.is-draggable',
       handle: '.js-board-handle',
       onEnd: (e) => {
-        gl.issueBoards.onEnd();
+        sortableEnd();
 
         if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
           const order = this.sortable.toArray();
-          const list = Store.findList('id', parseInt(e.item.dataset.id, 10));
+          const list = boardsStore.findList('id', parseInt(e.item.dataset.id, 10));
 
           this.$nextTick(() => {
-            Store.moveList(list, order);
+            boardsStore.moveList(list, order);
           });
         }
       }

app/assets/javascripts/boards/components/board_blank_state.vue

@@ -2,8 +2,7 @@
 /* global ListLabel */
 import _ from 'underscore';
 import Cookies from 'js-cookie';
-
-const Store = gl.issueBoards.BoardsStore;
+import boardsStore from '../stores/boards_store';
 
 export default {
   data() {
@@ -19,7 +18,7 @@ export default {
       this.clearBlankState();
 
       this.predefinedLabels.forEach((label, i) => {
-        Store.addList({
+        boardsStore.addList({
           title: label.title,
           position: i,
           list_type: 'label',
@@ -30,14 +29,14 @@ export default {
         });
       });
 
-      Store.state.lists = _.sortBy(Store.state.lists, 'position');
+      boardsStore.state.lists = _.sortBy(boardsStore.state.lists, 'position');
 
       // Save the labels
       gl.boardService.generateDefaultLists()
         .then(res => res.data)
         .then((data) => {
           data.forEach((listObj) => {
-            const list = Store.findList('title', listObj.title);
+            const list = boardsStore.findList('title', listObj.title);
 
             list.id = listObj.id;
             list.label.id = listObj.label.id;
@@ -48,14 +47,14 @@ export default {
           });
         })
         .catch(() => {
-          Store.removeList(undefined, 'label');
+          boardsStore.removeList(undefined, 'label');
           Cookies.remove('issue_board_welcome_hidden', {
             path: '',
           });
-          Store.addBlankState();
+          boardsStore.addBlankState();
         });
     },
-    clearBlankState: Store.removeBlankState.bind(Store),
+    clearBlankState: boardsStore.removeBlankState.bind(boardsStore),
   },
 };
 

app/assets/javascripts/boards/components/board_card.vue

@@ -2,8 +2,7 @@
   /* eslint-disable vue/require-default-prop */
   import IssueCardInner from './issue_card_inner.vue';
   import eventHub from '../eventhub';
-
-  const Store = gl.issueBoards.BoardsStore;
+  import boardsStore from '../stores/boards_store';
 
   export default {
     name: 'BoardsIssueCard',
@@ -42,7 +41,7 @@
     data() {
       return {
         showDetail: false,
-        detailIssue: Store.detail,
+        detailIssue: boardsStore.detail,
       };
     },
     computed: {
@@ -63,11 +62,11 @@
         if (this.showDetail) {
           this.showDetail = false;
 
-          if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+          if (boardsStore.detail.issue && boardsStore.detail.issue.id === this.issue.id) {
             eventHub.$emit('clearDetailIssue');
           } else {
             eventHub.$emit('newDetailIssue', this.issue);
-            Store.detail.list = this.list;
+            boardsStore.detail.list = this.list;
           }
         }
       },

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

-/* eslint-disable no-alert */
-
 import $ from 'jquery';
 import Vue from 'vue';
 
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-
-gl.issueBoards.BoardDelete = Vue.extend({
+export default Vue.extend({
   props: {
     list: {
       type: Object,
@@ -14,12 +9,13 @@ gl.issueBoards.BoardDelete = Vue.extend({
     },
   },
   methods: {
-    deleteBoard () {
+    deleteBoard() {
       $(this.$el).tooltip('hide');
 
+      // eslint-disable-next-line no-alert
       if (window.confirm('Are you sure you want to delete this list?')) {
         this.list.destroy();
       }
-    }
-  }
+    },
+  },
 });

app/assets/javascripts/boards/components/board_list.vue

@@ -3,8 +3,8 @@ import Sortable from 'sortablejs';
 import boardNewIssue from './board_new_issue.vue';
 import boardCard from './board_card.vue';
 import eventHub from '../eventhub';
-
-const Store = gl.issueBoards.BoardsStore;
+import boardsStore from '../stores/boards_store';
+import { getBoardSortableDefaultOptions, sortableStart } from '../mixins/sortable_default_options';
 
 export default {
   name: 'BoardList',
@@ -46,7 +46,7 @@ export default {
   data() {
     return {
       scrollOffset: 250,
-      filters: Store.state.filters,
+      filters: boardsStore.state.filters,
       showCount: false,
       showIssueForm: false,
     };
@@ -61,13 +61,14 @@ export default {
     },
     issues() {
       this.$nextTick(() => {
-        if (this.scrollHeight() <= this.listHeight() &&
-          this.list.issuesSize > this.list.issues.length) {
+        if (
+          this.scrollHeight() <= this.listHeight() &&
+          this.list.issuesSize > this.list.issues.length
+        ) {
           this.list.page += 1;
-          this.list.getIssues(false)
-            .catch(() => {
-              // TODO: handle request error
-            });
+          this.list.getIssues(false).catch(() => {
+            // TODO: handle request error
+          });
         }
 
         if (this.scrollHeight() > Math.ceil(this.listHeight())) {
@@ -83,7 +84,7 @@ export default {
     eventHub.$on(`scroll-board-list-${this.list.id}`, this.scrollToTop);
   },
   mounted() {
-    const options = gl.issueBoards.getBoardSortableDefaultOptions({
+    const options = getBoardSortableDefaultOptions({
       scroll: true,
       disabled: this.disabled,
       filter: '.board-list-count, .is-disabled',
@@ -108,7 +109,8 @@ export default {
           // So from there, we can get reference to actual container
           // and thus the container type to enable Copy or Move
           if (e.target) {
-            const containerEl = e.target.closest('.js-board-list') || e.target.querySelector('.js-board-list');
+            const containerEl =
+              e.target.closest('.js-board-list') || e.target.querySelector('.js-board-list');
             const toBoardType = containerEl.dataset.boardType;
             const cloneActions = {
               label: ['milestone', 'assignee'],
@@ -120,8 +122,9 @@ export default {
               const fromBoardType = this.list.type;
               // For each list we check if the destination list is
               // a the list were we should clone the issue
-              const shouldClone = Object.entries(cloneActions).some(entry => (
-                 fromBoardType === entry[0] && entry[1].includes(toBoardType)));
+              const shouldClone = Object.entries(cloneActions).some(
+                entry => fromBoardType === entry[0] && entry[1].includes(toBoardType),
+              );
 
               if (shouldClone) {
                 return 'clone';
@@ -133,28 +136,36 @@ export default {
         },
         revertClone: true,
       },
-      onStart: (e) => {
+      onStart: e => {
         const card = this.$refs.issue[e.oldIndex];
 
         card.showDetail = false;
-        Store.moving.list = card.list;
-        Store.moving.issue = Store.moving.list.findIssue(+e.item.dataset.issueId);
+        boardsStore.moving.list = card.list;
+        boardsStore.moving.issue = boardsStore.moving.list.findIssue(+e.item.dataset.issueId);
 
-        gl.issueBoards.onStart();
+        sortableStart();
       },
-      onAdd: (e) => {
-        gl.issueBoards.BoardsStore
-          .moveIssueToList(Store.moving.list, this.list, Store.moving.issue, e.newIndex);
+      onAdd: e => {
+        boardsStore.moveIssueToList(
+          boardsStore.moving.list,
+          this.list,
+          boardsStore.moving.issue,
+          e.newIndex,
+        );
 
         this.$nextTick(() => {
           e.item.remove();
         });
       },
-      onUpdate: (e) => {
-        const sortedArray = this.sortable.toArray()
-          .filter(id => id !== '-1');
-        gl.issueBoards.BoardsStore
-          .moveIssueInList(this.list, Store.moving.issue, e.oldIndex, e.newIndex, sortedArray);
+      onUpdate: e => {
+        const sortedArray = this.sortable.toArray().filter(id => id !== '-1');
+        boardsStore.moveIssueInList(
+          this.list,
+          boardsStore.moving.issue,
+          e.oldIndex,
+          e.newIndex,
+          sortedArray,
+        );
       },
       onMove(e) {
         return !e.related.classList.contains('board-list-count');
@@ -192,16 +203,14 @@ export default {
 
       if (getIssues) {
         this.list.loadingMore = true;
-        getIssues
-          .then(loadingDone)
-          .catch(loadingDone);
+        getIssues.then(loadingDone).catch(loadingDone);
       }
     },
     toggleForm() {
       this.showIssueForm = !this.showIssueForm;
     },
     onScroll() {
-      if (!this.list.loadingMore && (this.scrollTop() > this.scrollHeight() - this.scrollOffset)) {
+      if (!this.list.loadingMore && this.scrollTop() > this.scrollHeight() - this.scrollOffset) {
         this.loadNextPage();
       }
     },

app/assets/javascripts/boards/components/board_new_issue.vue

@@ -4,8 +4,7 @@ import { Button } from '@gitlab-org/gitlab-ui';
 import eventHub from '../eventhub';
 import ProjectSelect from './project_select.vue';
 import ListIssue from '../models/issue';
-
-const Store = gl.issueBoards.BoardsStore;
+import boardsStore from '../stores/boards_store';
 
 export default {
   name: 'BoardNewIssue',
@@ -71,8 +70,8 @@ export default {
           // Need this because our jQuery very kindly disables buttons on ALL form submissions
           $(this.$refs.submitButton).enable();
 
-          Store.detail.issue = issue;
-          Store.detail.list = this.list;
+          boardsStore.detail.issue = issue;
+          boardsStore.detail.list = this.list;
         })
         .catch(() => {
           // Need this because our jQuery very kindly disables buttons on ALL form submissions

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

@@ -15,13 +15,9 @@ import IssuableContext from '../../issuable_context';
 import LabelsSelect from '../../labels_select';
 import Subscriptions from '../../sidebar/components/subscriptions/subscriptions.vue';
 import MilestoneSelect from '../../milestone_select';
+import boardsStore from '../stores/boards_store';
 
-const Store = gl.issueBoards.BoardsStore;
-
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-
-gl.issueBoards.BoardSidebar = Vue.extend({
+export default Vue.extend({
   components: {
     AssigneeTitle,
     Assignees,
@@ -37,7 +33,7 @@ gl.issueBoards.BoardSidebar = Vue.extend({
   },
   data() {
     return {
-      detail: Store.detail,
+      detail: boardsStore.detail,
       issue: {},
       list: {},
       loadingAssignees: false,
@@ -119,18 +115,18 @@ gl.issueBoards.BoardSidebar = Vue.extend({
       this.saveAssignees();
     },
     removeAssignee (a) {
-      gl.issueBoards.BoardsStore.detail.issue.removeAssignee(a);
+      boardsStore.detail.issue.removeAssignee(a);
     },
     addAssignee (a) {
-      gl.issueBoards.BoardsStore.detail.issue.addAssignee(a);
+      boardsStore.detail.issue.addAssignee(a);
     },
     removeAllAssignees () {
-      gl.issueBoards.BoardsStore.detail.issue.removeAllAssignees();
+      boardsStore.detail.issue.removeAllAssignees();
     },
     saveAssignees () {
       this.loadingAssignees = true;
 
-      gl.issueBoards.BoardsStore.detail.issue.update()
+      boardsStore.detail.issue.update()
         .then(() => {
           this.loadingAssignees = false;
         })

app/assets/javascripts/boards/components/issue_card_inner.vue

@@ -4,8 +4,7 @@
   import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
   import eventHub from '../eventhub';
   import tooltip from '../../vue_shared/directives/tooltip';
-
-  const Store = gl.issueBoards.BoardsStore;
+  import boardsStore from '../stores/boards_store';
 
   export default {
     components: {
@@ -112,7 +111,7 @@
       filterByLabel(label, e) {
         if (!this.updateFilters) return;
 
-        const filterPath = gl.issueBoards.BoardsStore.filter.path.split('&');
+        const filterPath = boardsStore.filter.path.split('&');
         const labelTitle = encodeURIComponent(label.title);
         const param = `label_name[]=${labelTitle}`;
         const labelIndex = filterPath.indexOf(param);
@@ -124,9 +123,9 @@
           filterPath.splice(labelIndex, 1);
         }
 
-        gl.issueBoards.BoardsStore.filter.path = filterPath.join('&');
+        boardsStore.filter.path = filterPath.join('&');
 
-        Store.updateFiltersUrl();
+        boardsStore.updateFiltersUrl();
 
         eventHub.$emit('updateTokens');
       },

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

@@ -5,6 +5,7 @@ import ListsDropdown from './lists_dropdown.vue';
 import { pluralize } from '../../../lib/utils/text_utility';
 import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
+import boardsStore from '../../stores/boards_store';
 
 export default {
   components: {
@@ -14,7 +15,7 @@ export default {
   data() {
     return {
       modal: ModalStore.store,
-      state: gl.issueBoards.BoardsStore.state,
+      state: boardsStore.state,
     };
   },
   computed: {

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

 <script>
 import { Link } from '@gitlab-org/gitlab-ui';
 import ModalStore from '../../stores/modal_store';
+import boardsStore from '../../stores/boards_store';
 
 export default {
   components: {
@@ -9,7 +10,7 @@ export default {
   data() {
     return {
       modal: ModalStore.store,
-      state: gl.issueBoards.BoardsStore.state,
+      state: boardsStore.state,
     };
   },
   computed: {

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

@@ -4,16 +4,12 @@ import $ from 'jquery';
 import axios from '~/lib/utils/axios_utils';
 import _ from 'underscore';
 import CreateLabelDropdown from '../../create_label';
-
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-
-const Store = gl.issueBoards.BoardsStore;
+import boardsStore from '../stores/boards_store';
 
 $(document).off('created.label').on('created.label', (e, label) => {
-  Store.new({
+  boardsStore.new({
     title: label.title,
-    position: Store.state.lists.length - 2,
+    position: boardsStore.state.lists.length - 2,
     list_type: 'label',
     label: {
       id: label.id,
@@ -23,7 +19,7 @@ $(document).off('created.label').on('created.label', (e, label) => {
   });
 });
 
-gl.issueBoards.newListDropdownInit = () => {
+export default function initNewListDropdown() {
   $('.js-new-board-list').each(function () {
     const $this = $(this);
     new CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespacePath'), $this.data('projectPath'));
@@ -36,7 +32,7 @@ gl.issueBoards.newListDropdownInit = () => {
           });
       },
       renderRow (label) {
-        const active = Store.findList('title', label.title);
+        const active = boardsStore.findList('title', label.title);
         const $li = $('<li />');
         const $a = $('<a />', {
           class: (active ? `is-active js-board-list-${active.id}` : ''),
@@ -62,10 +58,10 @@ gl.issueBoards.newListDropdownInit = () => {
         const label = options.selectedObj;
         e.preventDefault();
 
-        if (!Store.findList('title', label.title)) {
-          Store.new({
+        if (!boardsStore.findList('title', label.title)) {
+          boardsStore.new({
             title: label.title,
-            position: Store.state.lists.length - 2,
+            position: boardsStore.state.lists.length - 2,
             list_type: 'label',
             label: {
               id: label.id,
@@ -74,9 +70,9 @@ gl.issueBoards.newListDropdownInit = () => {
             },
           });
 
-          Store.state.lists = _.sortBy(Store.state.lists, 'position');
+          boardsStore.state.lists = _.sortBy(boardsStore.state.lists, 'position');
         }
       },
     });
   });
-};
+}

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

@@ -2,8 +2,7 @@
   import Vue from 'vue';
   import Flash from '../../../flash';
   import { __ } from '../../../locale';
-
-  const Store = gl.issueBoards.BoardsStore;
+  import boardsStore from '../../stores/boards_store';
 
   export default Vue.extend({
     props: {
@@ -49,7 +48,7 @@
           list.removeIssue(issue);
         });
 
-        Store.detail.issue = {};
+        boardsStore.detail.issue = {};
       },
       /**
       * Build the default patch request.

app/assets/javascripts/boards/filtered_search_boards.js

 import IssuesFilteredSearchTokenKeysEE from 'ee/filtered_search/issues_filtered_search_token_keys';
 import FilteredSearchContainer from '../filtered_search/container';
 import FilteredSearchManager from '../filtered_search/filtered_search_manager';
+import boardsStore from './stores/boards_store';
 
 export default class FilteredSearchBoards extends FilteredSearchManager {
   constructor(store, updateUrl = false, cantEdit = []) {
@@ -26,7 +27,7 @@ export default class FilteredSearchBoards extends FilteredSearchManager {
     this.store.path = path.substr(1);
 
     if (this.updateUrl) {
-      gl.issueBoards.BoardsStore.updateFiltersUrl();
+      boardsStore.updateFiltersUrl();
     }
   }
 

app/assets/javascripts/boards/index.js

@@ -12,15 +12,14 @@ import eventHub from './eventhub';
 import sidebarEventHub from '~/sidebar/event_hub';
 import './models/milestone';
 import './models/project';
-import './stores/boards_store';
+import boardsStore from './stores/boards_store';
 import ModalStore from './stores/modal_store';
 import modalMixin from './mixins/modal_mixins';
-import './mixins/sortable_default_options';
 import './filters/due_date_filters';
-import './components/board';
-import './components/board_sidebar';
-import './components/new_list_dropdown';
-import BoardAddIssuesModal from './components/modal/index.vue';
+import Board from 'ee/boards/components/board';
+import BoardSidebar from 'ee/boards/components/board_sidebar';
+import initNewListDropdown from './components/new_list_dropdown';
+import BoardAddIssuesModal from 'ee/boards/components/modal/index';
 import '~/vue_shared/vue_resource_interceptor';
 import { NavigationType } from '~/lib/utils/common_utils';
 
@@ -28,21 +27,17 @@ import 'ee/boards/models/list';
 import 'ee/boards/models/issue';
 import 'ee/boards/models/project';
 import BoardService from 'ee/boards/services/board_service';
-import 'ee/boards/components/board_sidebar';
-import 'ee/boards/components/board';
-import 'ee/boards/components/modal/index';
-import 'ee/boards/components/boards_selector';
+import BoardsSelector from 'ee/boards/components/boards_selector';
 import collapseIcon from 'ee/boards/icons/fullscreen_collapse.svg';
 import expandIcon from 'ee/boards/icons/fullscreen_expand.svg';
 import tooltip from '~/vue_shared/directives/tooltip';
 
+let issueBoardsApp;
+
 export default () => {
   const $boardApp = document.getElementById('board-app');
-  const Store = gl.issueBoards.BoardsStore;
   const issueBoardsContent = document.querySelector('.content-wrapper > .js-focus-mode-board');
 
-  window.gl = window.gl || {};
-
   // check for browser back and trigger a hard reload to circumvent browser caching.
   window.addEventListener('pageshow', (event) => {
     const isNavTypeBackForward = window.performance &&
@@ -53,25 +48,21 @@ export default () => {
     }
   });
 
-  if (gl.IssueBoardsApp) {
-    gl.IssueBoardsApp.$destroy(true);
+  if (issueBoardsApp) {
+    issueBoardsApp.$destroy(true);
   }
 
-  Store.create();
-
-  // hack to allow sidebar scripts like milestone_select manipulate the BoardsStore
-  gl.issueBoards.boardStoreIssueSet = (...args) => Vue.set(Store.detail.issue, ...args);
-  gl.issueBoards.boardStoreIssueDelete = (...args) => Vue.delete(Store.detail.issue, ...args);
+  boardsStore.create();
 
-  gl.IssueBoardsApp = new Vue({
+  issueBoardsApp = new Vue({
     el: $boardApp,
     components: {
-      board: gl.issueBoards.Board,
-      'board-sidebar': gl.issueBoards.BoardSidebar,
+      Board,
+      BoardSidebar,
       BoardAddIssuesModal,
     },
     data: {
-      state: Store.state,
+      state: boardsStore.state,
       loading: true,
       boardsEndpoint: $boardApp.dataset.boardsEndpoint,
       listsEndpoint: $boardApp.dataset.listsEndpoint,
@@ -80,7 +71,7 @@ export default () => {
       issueLinkBase: $boardApp.dataset.issueLinkBase,
       rootPath: $boardApp.dataset.rootPath,
       bulkUpdatePath: $boardApp.dataset.bulkUpdatePath,
-      detailIssue: Store.detail,
+      detailIssue: boardsStore.detail,
       defaultAvatar: $boardApp.dataset.defaultAvatar,
     },
     computed: {
@@ -95,7 +86,7 @@ export default () => {
         bulkUpdatePath: this.bulkUpdatePath,
         boardId: this.boardId,
       });
-      Store.rootPath = this.boardsEndpoint;
+      boardsStore.rootPath = this.boardsEndpoint;
 
       eventHub.$on('updateTokens', this.updateTokens);
       eventHub.$on('newDetailIssue', this.updateDetailIssue);
@@ -109,16 +100,16 @@ export default () => {
       sidebarEventHub.$off('toggleSubscription', this.toggleSubscription);
     },
     mounted() {
-      this.filterManager = new FilteredSearchBoards(Store.filter, true, Store.cantEdit);
+      this.filterManager = new FilteredSearchBoards(boardsStore.filter, true, boardsStore.cantEdit);
       this.filterManager.setup();
 
-      Store.disabled = this.disabled;
+      boardsStore.disabled = this.disabled;
       gl.boardService
         .all()
         .then(res => res.data)
         .then(data => {
           data.forEach(board => {
-            const list = Store.addList(board, this.defaultAvatar);
+            const list = boardsStore.addList(board, this.defaultAvatar);
 
             if (list.type === 'closed') {
               list.position = Infinity;
@@ -129,8 +120,8 @@ export default () => {
 
           this.state.lists = _.sortBy(this.state.lists, 'position');
 
-          Store.addBlankState();
-          Store.addPromotionState();
+          boardsStore.addBlankState();
+          boardsStore.addPromotionState();
           this.loading = false;
         })
         .catch(() => {
@@ -166,13 +157,13 @@ export default () => {
             });
         }
 
-        Store.detail.issue = newIssue;
+        boardsStore.detail.issue = newIssue;
       },
       clearDetailIssue() {
-        Store.detail.issue = {};
+        boardsStore.detail.issue = {};
       },
       toggleSubscription(id) {
-        const { issue } = Store.detail;
+        const { issue } = boardsStore.detail;
         if (issue.id === id && issue.toggleSubscriptionEndpoint) {
           issue.setFetchingState('subscriptions', true);
           BoardService.toggleIssueSubscription(issue.toggleSubscriptionEndpoint)
@@ -191,14 +182,15 @@ export default () => {
     },
   });
 
-  gl.IssueBoardsSearch = new Vue({
+  // eslint-disable-next-line no-new
+  new Vue({
     el: document.getElementById('js-add-list'),
     data: {
-      filters: Store.state.filters,
+      filters: boardsStore.state.filters,
       milestoneTitle: $boardApp.dataset.boardMilestoneTitle,
     },
     mounted() {
-      gl.issueBoards.newListDropdownInit();
+      initNewListDropdown();
     },
   });
 
@@ -214,7 +206,7 @@ export default () => {
         return {
           canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
           hasScope: this.$options.el.hasAttribute('data-has-scope'),
-          state: Store.state,
+          state: boardsStore.state,
         };
       },
       computed: {
@@ -226,7 +218,7 @@ export default () => {
         },
       },
       methods: {
-        showPage: page => gl.issueBoards.BoardsStore.showPage(page),
+        showPage: page => boardsStore.showPage(page),
       },
       template: `
         <div class="prepend-left-10">
@@ -248,13 +240,14 @@ export default () => {
   const issueBoardsModal = document.getElementById('js-add-issues-btn');
 
   if (issueBoardsModal) {
-    gl.IssueBoardsModalAddBtn = new Vue({
+    // eslint-disable-next-line no-new
+    new Vue({
       el: issueBoardsModal,
       mixins: [modalMixin],
       data() {
         return {
           modal: ModalStore.store,
-          store: Store.state,
+          store: boardsStore.state,
           isFullscreen: false,
           focusModeAvailable: $boardApp.hasAttribute('data-focus-mode-available'),
           canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
@@ -320,11 +313,12 @@ export default () => {
     });
   }
 
-  gl.IssueBoardsToggleFocusBtn = new Vue({
+  // eslint-disable-next-line no-new
+  new Vue({
     el: document.getElementById('js-toggle-focus-btn'),
     data: {
       modal: ModalStore.store,
-      store: Store.state,
+      store: boardsStore.state,
       isFullscreen: false,
       focusModeAvailable: $boardApp.hasAttribute('data-focus-mode-available'),
     },
@@ -362,10 +356,11 @@ export default () => {
     `,
   });
 
-  gl.IssueboardsSwitcher = new Vue({
+  // eslint-disable-next-line no-new
+  new Vue({
     el: '#js-multiple-boards-switcher',
     components: {
-      'boards-selector': gl.issueBoards.BoardsSelector,
+      BoardsSelector,
     },
   });
 };

app/assets/javascripts/boards/mixins/sortable_default_options.js

@@ -3,32 +3,29 @@
 import $ from 'jquery';
 import sortableConfig from 'ee/sortable/sortable_config';
 
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-
-gl.issueBoards.onStart = () => {
+export function sortableStart() {
   $('.has-tooltip').tooltip('hide')
     .tooltip('disable');
   document.body.classList.add('is-dragging');
-};
+}
 
-gl.issueBoards.onEnd = () => {
+export function sortableEnd() {
   $('.has-tooltip').tooltip('enable');
   document.body.classList.remove('is-dragging');
-};
+}
 
-gl.issueBoards.touchEnabled = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
+export function getBoardSortableDefaultOptions(obj) {
+  const touchEnabled = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
 
-gl.issueBoards.getBoardSortableDefaultOptions = (obj) => {
   const defaultSortOptions = Object.assign({}, sortableConfig, {
     filter: '.board-delete, .btn',
-    delay: gl.issueBoards.touchEnabled ? 100 : 0,
-    scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100,
+    delay: touchEnabled ? 100 : 0,
+    scrollSensitivity: touchEnabled ? 60 : 100,
     scrollSpeed: 20,
-    onStart: gl.issueBoards.onStart,
-    onEnd: gl.issueBoards.onEnd,
+    onStart: sortableStart,
+    onEnd: sortableEnd,
   });
 
   Object.keys(obj).forEach((key) => { defaultSortOptions[key] = obj[key]; });
   return defaultSortOptions;
-};
+}

app/assets/javascripts/boards/models/issue.js

@@ -6,6 +6,7 @@
 import Vue from 'vue';
 import '~/vue_shared/models/label';
 import IssueProject from './project';
+import boardsStore from '../stores/boards_store';
 
 class ListIssue {
   constructor (obj, defaultAvatar) {
@@ -99,7 +100,7 @@ class ListIssue {
   }
 
   getLists () {
-    return gl.issueBoards.BoardsStore.state.lists.filter(list => list.findIssue(this.id));
+    return boardsStore.state.lists.filter(list => list.findIssue(this.id));
   }
 
   updateData(newData) {

app/assets/javascripts/boards/models/list.js

@@ -5,6 +5,7 @@ import { __ } from '~/locale';
 import ListLabel from '~/vue_shared/models/label';
 import ListAssignee from '~/vue_shared/models/assignee';
 import { urlParamsToObject } from '~/lib/utils/common_utils';
+import boardsStore from '../stores/boards_store';
 import ListMilestone from './milestone';
 
 const PER_PAGE = 20;
@@ -95,9 +96,9 @@ class List {
   }
 
   destroy() {
-    const index = gl.issueBoards.BoardsStore.state.lists.indexOf(this);
-    gl.issueBoards.BoardsStore.state.lists.splice(index, 1);
-    gl.issueBoards.BoardsStore.updateNewListDropdown(this.id);
+    const index = boardsStore.state.lists.indexOf(this);
+    boardsStore.state.lists.splice(index, 1);
+    boardsStore.updateNewListDropdown(this.id);
 
     gl.boardService.destroyList(this.id).catch(() => {
       // TODO: handle request error
@@ -122,7 +123,7 @@ class List {
 
   getIssues(emptyIssues = true) {
     const data = {
-      ...urlParamsToObject(gl.issueBoards.BoardsStore.filter.path),
+      ...urlParamsToObject(boardsStore.filter.path),
       page: this.page,
     };
 

app/assets/javascripts/boards/stores/boards_store.js

@@ -3,14 +3,12 @@
 
 import $ from 'jquery';
 import _ from 'underscore';
+import Vue from 'vue';
 import Cookies from 'js-cookie';
-import boardsStoreEE from 'ee/boards/stores/boards_store_ee';
+import BoardsStoreEE from 'ee/boards/stores/boards_store_ee';
 import { getUrlParamsArray } from '~/lib/utils/common_utils';
 
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-
-gl.issueBoards.BoardsStore = {
+const boardsStore = {
   disabled: false,
   filter: {
     path: '',
@@ -186,4 +184,17 @@ gl.issueBoards.BoardsStore = {
   }
 };
 
-boardsStoreEE.initEESpecific(gl.issueBoards.BoardsStore);
+BoardsStoreEE.initEESpecific(boardsStore);
+
+// hacks added in order to allow milestone_select to function properly
+// TODO: remove these
+
+export function boardStoreIssueSet(...args) {
+  Vue.set(boardsStore.detail.issue, ...args);
+}
+
+export function boardStoreIssueDelete(...args) {
+  Vue.delete(boardsStore.detail.issue, ...args);
+}
+
+export default boardsStore;

app/assets/javascripts/due_date_select.js

@@ -5,6 +5,7 @@ import { __ } from '~/locale';
 import axios from './lib/utils/axios_utils';
 import { timeFor } from './lib/utils/datetime_utility';
 import { parsePikadayDate, pikadayToString } from './lib/utils/datefix';
+import boardsStore from './boards/stores/boards_store';
 
 class DueDateSelect {
   constructor({ $dropdown, $loading } = {}) {
@@ -58,7 +59,7 @@ class DueDateSelect {
         $dueDateInput.val(calendar.toString(dateText));
 
         if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
-          gl.issueBoards.BoardsStore.detail.issue.dueDate = $dueDateInput.val();
+          boardsStore.detail.issue.dueDate = $dueDateInput.val();
           this.updateIssueBoardIssue();
         } else {
           this.saveDueDate(true);
@@ -79,7 +80,7 @@ class DueDateSelect {
       calendar.setDate(null);
 
       if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
-        gl.issueBoards.BoardsStore.detail.issue.dueDate = '';
+        boardsStore.detail.issue.dueDate = '';
         this.updateIssueBoardIssue();
       } else {
         $(`input[name='${this.fieldName}']`).val('');
@@ -123,7 +124,7 @@ class DueDateSelect {
       this.$loading.fadeOut();
     };
 
-    gl.issueBoards.BoardsStore.detail.issue
+    boardsStore.detail.issue
       .update(this.$dropdown.attr('data-issue-update'))
       .then(fadeOutLoader)
       .catch(fadeOutLoader);

app/assets/javascripts/labels_select.js

@@ -11,6 +11,7 @@ import DropdownUtils from './filtered_search/dropdown_utils';
 import CreateLabelDropdown from './create_label';
 import flash from './flash';
 import ModalStore from './boards/stores/modal_store';
+import boardsStore from './boards/stores/boards_store';
 
 export default class LabelsSelect {
   constructor(els, options = {}) {
@@ -378,7 +379,7 @@ export default class LabelsSelect {
           }
           else if ($dropdown.hasClass('js-issue-board-sidebar')) {
             if ($el.hasClass('is-active')) {
-              gl.issueBoards.BoardsStore.detail.issue.labels.push(new ListLabel({
+              boardsStore.detail.issue.labels.push(new ListLabel({
                 id: label.id,
                 title: label.title,
                 color: label.color[0],
@@ -386,16 +387,16 @@ export default class LabelsSelect {
               }));
             }
             else {
-              var { labels } = gl.issueBoards.BoardsStore.detail.issue;
+              var { labels } = boardsStore.detail.issue;
               labels = labels.filter(function (selectedLabel) {
                 return selectedLabel.id !== label.id;
               });
-              gl.issueBoards.BoardsStore.detail.issue.labels = labels;
+              boardsStore.detail.issue.labels = labels;
             }
 
             $loading.fadeIn();
 
-            gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
+            boardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
               .then(fadeOutLoader)
               .catch(fadeOutLoader);
           }

app/assets/javascripts/milestone_select.js

@@ -9,6 +9,7 @@ import '~/gl_dropdown';
 import axios from './lib/utils/axios_utils';
 import { timeFor } from './lib/utils/datetime_utility';
 import ModalStore from './boards/stores/modal_store';
+import boardsStore, { boardStoreIssueSet, boardStoreIssueDelete } from './boards/stores/boards_store';
 
 export default class MilestoneSelect {
   constructor(currentProject, els, options = {}) {
@@ -187,7 +188,7 @@ export default class MilestoneSelect {
             return $dropdown.closest('form').submit();
           } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
             if (selected.id !== -1 && isSelecting) {
-              gl.issueBoards.boardStoreIssueSet(
+              boardStoreIssueSet(
                 'milestone',
                 new ListMilestone({
                   id: selected.id,
@@ -195,13 +196,13 @@ export default class MilestoneSelect {
                 }),
               );
             } else {
-              gl.issueBoards.boardStoreIssueDelete('milestone');
+              boardStoreIssueDelete('milestone');
             }
 
             $dropdown.trigger('loading.gl.dropdown');
             $loading.removeClass('hidden').fadeIn();
 
-            gl.issueBoards.BoardsStore.detail.issue
+            boardsStore.detail.issue
               .update($dropdown.attr('data-issue-update'))
               .then(() => {
                 $dropdown.trigger('loaded.gl.dropdown');

ee/app/assets/javascripts/boards/components/board.js

-import '~/boards/components/board';
+import Board from '~/boards/components/board';
 import { __, n__, sprintf } from '~/locale';
+import boardsStore from '~/boards/stores/boards_store';
 import boardPromotionState from 'ee/boards/components/board_promotion_state';
 
-const Store = gl.issueBoards.BoardsStore;
-const base = gl.issueBoards.Board;
-
-gl.issueBoards.Board = base.extend({
+export default Board.extend({
   data() {
     return {
-      weightFeatureAvailable: Store.weightFeatureAvailable,
+      weightFeatureAvailable: boardsStore.weightFeatureAvailable,
     };
   },
   components: {
@@ -18,7 +16,7 @@ gl.issueBoards.Board = base.extend({
     counterTooltip() {
       if (!this.weightFeatureAvailable) {
         // call computed property from base component (CE board.js)
-        return base.options.computed.counterTooltip.call(this);
+        return Board.options.computed.counterTooltip.call(this);
       }
 
       const { issuesSize, totalWeight } = this.list;

ee/app/assets/javascripts/boards/components/board_form.vue

@@ -8,11 +8,8 @@ import { visitUrl } from '~/lib/utils/url_utility';
 import BoardMilestoneSelect from './milestone_select.vue';
 import BoardWeightSelect from './weight_select.vue';
 import AssigneeSelect from './assignee_select.vue';
+import boardsStore from '~/boards/stores/boards_store';
 
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-
-const Store = gl.issueBoards.BoardsStore;
 const boardDefaults = {
   id: false,
   name: '',
@@ -70,8 +67,8 @@ export default {
       board: { ...boardDefaults, ...this.currentBoard },
       expanded: false,
       issue: {},
-      currentBoard: Store.state.currentBoard,
-      currentPage: Store.state.currentPage,
+      currentBoard: boardsStore.state.currentBoard,
+      currentPage: boardsStore.state.currentPage,
       milestones: [],
       milestoneDropdownOpen: false,
       isLoading: false,
@@ -168,7 +165,7 @@ export default {
         gl.boardService
           .deleteBoard(this.currentBoard)
           .then(() => {
-            visitUrl(Store.rootPath);
+            visitUrl(boardsStore.rootPath);
           })
           .catch(() => {
             Flash('Failed to delete board. Please try again.');
@@ -188,7 +185,7 @@ export default {
       }
     },
     cancel() {
-      Store.state.currentPage = '';
+      boardsStore.state.currentPage = '';
     },
     resetFormState() {
       if (this.isNewForm) {

ee/app/assets/javascripts/boards/components/board_promotion_state.js

-const Store = gl.issueBoards.BoardsStore;
+import boardsStore from '~/boards/stores/boards_store';
 
 export default {
   template: '#js-board-promotion',
   methods: {
-    clearPromotionState: Store.removePromotionState.bind(Store),
+    clearPromotionState: boardsStore.removePromotionState.bind(boardsStore),
   },
 };

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

-import '~/boards/components/board_sidebar';
+import BoardSidebar from '~/boards/components/board_sidebar';
 import RemoveBtn from './sidebar/remove_issue';
 
-const base = gl.issueBoards.BoardSidebar;
-
-gl.issueBoards.BoardSidebar = base.extend({
+export default BoardSidebar.extend({
   components: {
     RemoveBtn,
   },

ee/app/assets/javascripts/boards/components/boards_list_selector/index.js

@@ -3,7 +3,7 @@ import _ from 'underscore';
 import { __, sprintf } from '~/locale';
 import Flash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-
+import boardsStore from '~/boards/stores/boards_store';
 import ListContainer from './list_container.vue';
 
 export default Vue.extend({
@@ -23,7 +23,7 @@ export default Vue.extend({
   data() {
     return {
       loading: true,
-      store: gl.issueBoards.BoardsStore,
+      store: boardsStore,
     };
   },
   mounted() {

ee/app/assets/javascripts/boards/components/boards_selector.js

 import Vue from 'vue';
 import $ from 'jquery';
 import { throttle } from 'underscore';
-import '~/boards/stores/boards_store';
+import boardsStore from '~/boards/stores/boards_store';
 import BoardForm from './board_form.vue';
 import AssigneeList from './assignees_list_slector';
 import MilestoneList from './milestone_list_selector';
 
-(() => {
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
-  const Store = gl.issueBoards.BoardsStore;
-
-  Store.createNewListDropdownData();
-
-  gl.issueBoards.BoardsSelector = Vue.extend({
-    name: 'BoardsSelector',
-    components: {
-      BoardForm,
-    },
-    props: {
-      currentBoard: {
-        type: Object,
-        required: true,
-      },
-      milestonePath: {
-        type: String,
-        required: true,
+export default Vue.extend({
+  name: 'BoardsSelector',
+  components: {
+    BoardForm,
+  },
+  props: {
+    currentBoard: {
+      type: Object,
+      required: true,
+    },
+    milestonePath: {
+      type: String,
+      required: true,
+    },
+    throttleDuration: {
+      type: Number,
+      default: 200,
+    },
+  },
+  data() {
+    return {
+      open: false,
+      loading: true,
+      hasScrollFade: false,
+      hasAssigneesListMounted: false,
+      hasMilestoneListMounted: false,
+      scrollFadeInitialized: false,
+      boards: [],
+      state: boardsStore.state,
+      throttledSetScrollFade: throttle(this.setScrollFade, this.throttleDuration),
+      contentClientHeight: 0,
+      maxPosition: 0,
+      store: boardsStore,
+    };
+  },
+  computed: {
+    currentPage() {
+      return this.state.currentPage;
+    },
+    reload: {
+      get() {
+        return this.state.reload;
       },
-      throttleDuration: {
-        type: Number,
-        default: 200,
+      set(newValue) {
+        this.state.reload = newValue;
       },
     },
-    data() {
+    board() {
+      return this.state.currentBoard;
+    },
+    showDelete() {
+      return this.boards.length > 1;
+    },
+    scrollFadeClass() {
       return {
-        open: false,
-        loading: true,
-        hasScrollFade: false,
-        hasAssigneesListMounted: false,
-        hasMilestoneListMounted: false,
-        scrollFadeInitialized: false,
-        boards: [],
-        state: Store.state,
-        throttledSetScrollFade: throttle(this.setScrollFade, this.throttleDuration),
-        contentClientHeight: 0,
-        maxPosition: 0,
-        store: gl.issueBoards.BoardsStore,
+        'fade-out': !this.hasScrollFade,
       };
     },
-    computed: {
-      currentPage() {
-        return this.state.currentPage;
-      },
-      reload: {
-        get() {
-          return this.state.reload;
-        },
-        set(newValue) {
-          this.state.reload = newValue;
-        },
-      },
-      board() {
-        return this.state.currentBoard;
-      },
-      showDelete() {
-        return this.boards.length > 1;
-      },
-      scrollFadeClass() {
-        return {
-          'fade-out': !this.hasScrollFade,
-        };
-      },
-    },
-    watch: {
-      reload() {
-        if (this.reload) {
-          this.boards = [];
-          this.loading = true;
-          this.reload = false;
+  },
+  watch: {
+    reload() {
+      if (this.reload) {
+        this.boards = [];
+        this.loading = true;
+        this.reload = false;
 
-          this.loadBoards(false);
-        }
-      },
+        this.loadBoards(false);
+      }
     },
-    created() {
-      this.state.currentBoard = this.currentBoard;
-      Store.state.assignees = [];
-      Store.state.milestones = [];
-      $('#js-add-list').on('hide.bs.dropdown', this.handleDropdownHide);
-      $('.js-new-board-list-tabs').on('click', this.handleDropdownTabClick);
-    },
-    methods: {
-      showPage(page) {
-        this.state.reload = false;
-        this.state.currentPage = page;
-      },
-      toggleDropdown() {
-        this.open = !this.open;
-      },
-      loadBoards(toggleDropdown = true) {
-        if (toggleDropdown) {
-          this.toggleDropdown();
-        }
+  },
+  created() {
+    this.state.currentBoard = this.currentBoard;
+    boardsStore.state.assignees = [];
+    boardsStore.state.milestones = [];
+    $('#js-add-list').on('hide.bs.dropdown', this.handleDropdownHide);
+    $('.js-new-board-list-tabs').on('click', this.handleDropdownTabClick);
+  },
+  methods: {
+    showPage(page) {
+      this.state.reload = false;
+      this.state.currentPage = page;
+    },
+    toggleDropdown() {
+      this.open = !this.open;
+    },
+    loadBoards(toggleDropdown = true) {
+      if (toggleDropdown) {
+        this.toggleDropdown();
+      }
 
-        if (this.open && !this.boards.length) {
-          gl.boardService
-            .allBoards()
-            .then(res => res.data)
-            .then(json => {
-              this.loading = false;
-              this.boards = json;
-            })
-            .then(() => this.$nextTick()) // Wait for boards list in DOM
-            .then(this.setScrollFade)
-            .catch(() => {
-              this.loading = false;
-            });
-        }
-      },
-      isScrolledUp() {
-        const { content } = this.$refs;
-        const currentPosition = this.contentClientHeight + content.scrollTop;
+      if (this.open && !this.boards.length) {
+        gl.boardService
+          .allBoards()
+          .then(res => res.data)
+          .then(json => {
+            this.loading = false;
+            this.boards = json;
+          })
+          .then(() => this.$nextTick()) // Wait for boards list in DOM
+          .then(this.setScrollFade)
+          .catch(() => {
+            this.loading = false;
+          });
+      }
+    },
+    isScrolledUp() {
+      const { content } = this.$refs;
+      const currentPosition = this.contentClientHeight + content.scrollTop;
 
-        return content && currentPosition < this.maxPosition;
-      },
-      initScrollFade() {
-        this.scrollFadeInitialized = true;
+      return content && currentPosition < this.maxPosition;
+    },
+    initScrollFade() {
+      this.scrollFadeInitialized = true;
 
-        const { content } = this.$refs;
+      const { content } = this.$refs;
 
-        this.contentClientHeight = content.clientHeight;
-        this.maxPosition = content.scrollHeight;
-      },
-      setScrollFade() {
-        if (!this.scrollFadeInitialized) this.initScrollFade();
+      this.contentClientHeight = content.clientHeight;
+      this.maxPosition = content.scrollHeight;
+    },
+    setScrollFade() {
+      if (!this.scrollFadeInitialized) this.initScrollFade();
 
-        this.hasScrollFade = this.isScrolledUp();
-      },
-      handleDropdownHide(e) {
-        const $currTarget = $(e.currentTarget);
-        if ($currTarget.data('preventClose')) {
-          e.preventDefault();
-        }
-        $currTarget.removeData('preventClose');
-      },
-      handleDropdownTabClick(e) {
-        const $addListEl = $('#js-add-list');
-        $addListEl.data('preventClose', true);
-        if (e.target.dataset.action === 'tab-assignees' &&
-            !this.hasAssigneesListMounted) {
-          this.assigneeList = AssigneeList();
-          this.hasAssigneesListMounted = true;
-        }
+      this.hasScrollFade = this.isScrolledUp();
+    },
+    handleDropdownHide(e) {
+      const $currTarget = $(e.currentTarget);
+      if ($currTarget.data('preventClose')) {
+        e.preventDefault();
+      }
+      $currTarget.removeData('preventClose');
+    },
+    handleDropdownTabClick(e) {
+      const $addListEl = $('#js-add-list');
+      $addListEl.data('preventClose', true);
+      if (e.target.dataset.action === 'tab-assignees' &&
+          !this.hasAssigneesListMounted) {
+        this.assigneeList = AssigneeList();
+        this.hasAssigneesListMounted = true;
+      }
 
-        if (e.target.dataset.action === 'tab-milestones' && !this.hasMilestoneListMounted) {
-          this.milstoneList = MilestoneList();
-          this.hasMilestoneListMounted = true;
-        }
-      },
+      if (e.target.dataset.action === 'tab-milestones' && !this.hasMilestoneListMounted) {
+        this.milstoneList = MilestoneList();
+        this.hasMilestoneListMounted = true;
+      }
     },
-  });
-})();
+  },
+});

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

 import Vue from 'vue';
-import base from '~/boards/components/modal/index.vue';
+import BoardAddIssuesModal from '~/boards/components/modal/index.vue';
 import ModalFooter from './footer';
 
-gl.issueBoards.IssuesModal = Vue.extend(base, {
+export default Vue.extend(BoardAddIssuesModal, {
   components: {
     ModalFooter,
   },

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

 import base from '~/boards/components/sidebar/remove_issue.vue';
-
-const Store = gl.issueBoards.BoardsStore;
+import boardsStore from '~/boards/stores/boards_store';
 
 export default base.extend({
   methods: {
     seedPatchRequest(issue, req) {
       /* eslint-disable no-param-reassign */
-      const board = Store.state.currentBoard;
+      const board = boardsStore.state.currentBoard;
       const boardLabelIds = board.labels.map(label => label.id);
 
       req.label_ids = req.label_ids.filter(id => !boardLabelIds.includes(id));

ee/spec/javascripts/boards/components/assignee_select_spec.js

@@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import Vue from 'vue';
 import axios from '~/lib/utils/axios_utils';
 import '~/boards/services/board_service';
-import '~/boards/stores/boards_store';
+import boardsStore from '~/boards/stores/boards_store';
 import IssuableContext from '~/issuable_context';
 import AssigneeSelect from 'ee/boards/components/assignee_select.vue';
 import { boardObj, mockBoardService } from 'spec/boards/mock_data';
@@ -33,7 +33,7 @@ describe('Assignee select component', () => {
   beforeEach((done) => {
     setFixtures('<div class="test-container"></div>');
     gl.boardService = mockBoardService();
-    gl.issueBoards.BoardsStore.create();
+    boardsStore.create();
 
     // eslint-disable-next-line no-new
     new IssuableContext();

ee/spec/javascripts/boards/components/board_form_spec.js

 import $ from 'jquery';
 import Vue from 'vue';
-
+import boardsStore from '~/boards/stores/boards_store';
 import boardForm from 'ee/boards/components/board_form.vue';
-
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('board_form.vue', () => {
@@ -15,7 +14,7 @@ describe('board_form.vue', () => {
 
   beforeEach(() => {
     spyOn($, 'ajax');
-    gl.issueBoards.BoardsStore.state.currentPage = 'edit';
+    boardsStore.state.currentPage = 'edit';
     const Component = Vue.extend(boardForm);
     vm = mountComponent(Component, props);
   });
@@ -62,7 +61,7 @@ describe('board_form.vue', () => {
 
         Vue.nextTick()
           .then(() => {
-            expect(gl.issueBoards.BoardsStore.state.currentPage).toBe('');
+            expect(boardsStore.state.currentPage).toBe('');
           })
           .then(done)
           .catch(done.fail);

ee/spec/javascripts/boards/components/board_list_selector/board_list_selector_spec.js

-import '~/boards/stores/boards_store';
+import boardsStore from '~/boards/stores/boards_store';
 
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
@@ -21,8 +21,8 @@ describe('BoardListSelectorComponent', () => {
   let vm;
   let mock;
 
-  gl.issueBoards.BoardsStore.create();
-  gl.issueBoards.BoardsStore.state.assignees = [];
+  boardsStore.create();
+  boardsStore.state.assignees = [];
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
@@ -39,7 +39,7 @@ describe('BoardListSelectorComponent', () => {
   describe('data', () => {
     it('returns default data props', () => {
       expect(vm.loading).toBe(true);
-      expect(vm.store).toBe(gl.issueBoards.BoardsStore);
+      expect(vm.store).toBe(boardsStore);
     });
   });
 
@@ -47,7 +47,7 @@ describe('BoardListSelectorComponent', () => {
     describe('loadList', () => {
       it('calls axios.get and sets response to store.state.assignees', done => {
         mock.onGet(dummyEndpoint).reply(200, mockAssigneesList);
-        gl.issueBoards.BoardsStore.state.assignees = [];
+        boardsStore.state.assignees = [];
 
         vm
           .loadList()
@@ -61,7 +61,7 @@ describe('BoardListSelectorComponent', () => {
 
       it('does not call axios.get when store.state.assignees is not empty', done => {
         spyOn(axios, 'get');
-        gl.issueBoards.BoardsStore.state.assignees = mockAssigneesList;
+        boardsStore.state.assignees = mockAssigneesList;
 
         vm
           .loadList()
@@ -74,7 +74,7 @@ describe('BoardListSelectorComponent', () => {
 
       it('calls axios.get and shows Flash error when request fails', done => {
         mock.onGet(dummyEndpoint).replyOnce(500, {});
-        gl.issueBoards.BoardsStore.state.assignees = [];
+        boardsStore.state.assignees = [];
 
         vm
           .loadList()

ee/spec/javascripts/boards/components/boards_selector_spec.js

 import Vue from 'vue';
 import BoardService from 'ee/boards/services/board_service';
-import 'ee/boards/components/boards_selector';
+import BoardsSelector from 'ee/boards/components/boards_selector';
 import setTimeoutPromiseHelper from 'spec/helpers/set_timeout_promise_helper';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
@@ -45,7 +45,7 @@ describe('BoardsSelector', () => {
 
     spyOn(BoardService.prototype, 'allBoards').and.returnValue(boardServiceResponse);
 
-    vm = mountComponent(gl.issueBoards.BoardsSelector, {
+    vm = mountComponent(BoardsSelector, {
       throttleDuration,
       currentBoard: {},
       milestonePath: '',

spec/javascripts/boards/board_blank_state_spec.js

 import Vue from 'vue';
-import '~/boards/stores/boards_store';
+import boardsStore from '~/boards/stores/boards_store';
 import BoardBlankState from '~/boards/components/board_blank_state.vue';
 import { mockBoardService } from './mock_data';
 
@@ -10,7 +10,7 @@ describe('Boards blank state', () => {
   beforeEach((done) => {
     const Comp = Vue.extend(BoardBlankState);
 
-    gl.issueBoards.BoardsStore.create();
+    boardsStore.create();
     gl.boardService = mockBoardService();
 
     spyOn(gl.boardService, 'generateDefaultLists').and.callFake(() => new Promise((resolve, reject) => {
@@ -57,7 +57,7 @@ describe('Boards blank state', () => {
     vm.$el.querySelector('.btn-default').click();
 
     setTimeout(() => {
-      expect(gl.issueBoards.BoardsStore.welcomeIsHidden()).toBeTruthy();
+      expect(boardsStore.welcomeIsHidden()).toBeTruthy();
 
       done();
     });
@@ -67,9 +67,9 @@ describe('Boards blank state', () => {
     vm.$el.querySelector('.btn-success').click();
 
     setTimeout(() => {
-      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
-      expect(gl.issueBoards.BoardsStore.state.lists[0].title).toEqual('To Do');
-      expect(gl.issueBoards.BoardsStore.state.lists[1].title).toEqual('Doing');
+      expect(boardsStore.state.lists.length).toBe(2);
+      expect(boardsStore.state.lists[0].title).toEqual('To Do');
+      expect(boardsStore.state.lists[1].title).toEqual('Doing');
 
       done();
     });
@@ -81,8 +81,8 @@ describe('Boards blank state', () => {
     vm.$el.querySelector('.btn-success').click();
 
     setTimeout(() => {
-      expect(gl.issueBoards.BoardsStore.welcomeIsHidden()).toBeFalsy();
-      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
+      expect(boardsStore.welcomeIsHidden()).toBeFalsy();
+      expect(boardsStore.state.lists.length).toBe(1);
 
       done();
     });

spec/javascripts/boards/board_card_spec.js

@@ -10,7 +10,7 @@ import eventHub from '~/boards/eventhub';
 import '~/vue_shared/models/label';
 import '~/vue_shared/models/assignee';
 import '~/boards/models/list';
-import '~/boards/stores/boards_store';
+import boardsStore from '~/boards/stores/boards_store';
 import boardCard from '~/boards/components/board_card.vue';
 import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';
 
@@ -23,8 +23,8 @@ describe('Board card', () => {
     mock.onAny().reply(boardsMockInterceptor);
 
     gl.boardService = mockBoardService();
-    gl.issueBoards.BoardsStore.create();
-    gl.issueBoards.BoardsStore.detail.issue = {};
+    boardsStore.create();
+    boardsStore.detail.issue = {};
 
     const BoardCardComp = Vue.extend(boardCard);
     const list = new List(listObj);
@@ -62,7 +62,7 @@ describe('Board card', () => {
   });
 
   it('returns true when detailIssue is equal to card issue', () => {
-    gl.issueBoards.BoardsStore.detail.issue = vm.issue;
+    boardsStore.detail.issue = vm.issue;
 
     expect(vm.issueDetailVisible).toBe(true);
   });
@@ -119,19 +119,19 @@ describe('Board card', () => {
     });
 
     it('does not set detail issue if showDetail is false', () => {
-      expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
+      expect(boardsStore.detail.issue).toEqual({});
     });
 
     it('does not set detail issue if link is clicked', () => {
       triggerEvent('mouseup', vm.$el.querySelector('a'));
 
-      expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
+      expect(boardsStore.detail.issue).toEqual({});
     });
 
     it('does not set detail issue if button is clicked', () => {
       triggerEvent('mouseup', vm.$el.querySelector('button'));
 
-      expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
+      expect(boardsStore.detail.issue).toEqual({});
     });
 
     it('does not set detail issue if img is clicked', (done) => {
@@ -145,7 +145,7 @@ describe('Board card', () => {
       Vue.nextTick(() => {
         triggerEvent('mouseup', vm.$el.querySelector('img'));
 
-        expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
+        expect(boardsStore.detail.issue).toEqual({});
 
         done();
       });
@@ -154,7 +154,7 @@ describe('Board card', () => {
     it('does not set detail issue if showDetail is false after mouseup', () => {
       triggerEvent('mouseup');
 
-      expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
+      expect(boardsStore.detail.issue).toEqual({});
     });
 
     it('sets detail issue to card issue on mouse up', () => {
@@ -164,7 +164,7 @@ describe('Board card', () => {
       triggerEvent('mouseup');
 
       expect(eventHub.$emit).toHaveBeenCalledWith('newDetailIssue', vm.issue);
-      expect(gl.issueBoards.BoardsStore.detail.list).toEqual(vm.list);
+      expect(boardsStore.detail.list).toEqual(vm.list);
     });
 
     it('adds active class if detail issue is set', (done) => {
@@ -181,7 +181,7 @@ describe('Board card', () => {
     it('resets detail issue to empty if already set', () => {
       spyOn(eventHub, '$emit');
 
-      gl.issueBoards.BoardsStore.detail.issue = vm.issue;
+      boardsStore.detail.issue = vm.issue;
 
       triggerEvent('mousedown');
       triggerEvent('mouseup');

spec/javascripts/boards/board_list_spec.js

 /* global List */
 /* global ListIssue */
+
 import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import Sortable from 'sortablejs';
 import BoardList from '~/boards/components/board_list.vue';
 import eventHub from '~/boards/eventhub';
-import '~/boards/mixins/sortable_default_options';
 import '~/boards/models/issue';
 import '~/boards/models/list';
-import '~/boards/stores/boards_store';
+import boardsStore from '~/boards/stores/boards_store';
 import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';
 
 window.Sortable = Sortable;
@@ -25,8 +25,7 @@ describe('Board list component', () => {
     mock = new MockAdapter(axios);
     mock.onAny().reply(boardsMockInterceptor);
     gl.boardService = mockBoardService();
-    gl.issueBoards.BoardsStore.create();
-    gl.IssueBoardsApp = new Vue();
+    boardsStore.create();
 
     const BoardListComp = Vue.extend(BoardList);
     const list = new List(listObj);

spec/javascripts/boards/board_new_issue_spec.js

@@ -4,6 +4,7 @@ import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import boardNewIssue from '~/boards/components/board_new_issue.vue';
+import boardsStore from '~/boards/stores/boards_store';
 
 import '~/boards/models/list';
 import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';
@@ -36,8 +37,7 @@ describe('Issue boards new issue form', () => {
     mock.onAny().reply(boardsMockInterceptor);
 
     gl.boardService = mockBoardService();
-    gl.issueBoards.BoardsStore.create();
-    gl.IssueBoardsApp = new Vue();
+    boardsStore.create();
 
     list = new List(listObj);
 
@@ -148,13 +148,13 @@ describe('Issue boards new issue form', () => {
     });
 
     it('sets detail issue after submit', (done) => {
-      expect(gl.issueBoards.BoardsStore.detail.issue.title).toBe(undefined);
+      expect(boardsStore.detail.issue.title).toBe(undefined);
       vm.title = 'submit issue';
 
       Vue.nextTick()
         .then(submitIssue)
         .then(() => {
-          expect(gl.issueBoards.BoardsStore.detail.issue.title).toBe('submit issue');
+          expect(boardsStore.detail.issue.title).toBe('submit issue');
         })
         .then(done)
         .catch(done.fail);
@@ -166,7 +166,7 @@ describe('Issue boards new issue form', () => {
       Vue.nextTick()
         .then(submitIssue)
         .then(() => {
-          expect(gl.issueBoards.BoardsStore.detail.list.id).toBe(list.id);
+          expect(boardsStore.detail.list.id).toBe(list.id);
         })
         .then(done)
         .catch(done.fail);

spec/javascripts/boards/boards_store_spec.js

@@ -11,7 +11,7 @@ import '~/vue_shared/models/assignee';
 import '~/boards/models/issue';
 import '~/boards/models/list';
 import '~/boards/services/board_service';
-import '~/boards/stores/boards_store';
+import boardsStore from '~/boards/stores/boards_store';
 import { listObj, listObjDuplicate, boardsMockInterceptor, mockBoardService } from './mock_data';
 
 describe('Store', () => {
@@ -21,7 +21,7 @@ describe('Store', () => {
     mock = new MockAdapter(axios);
     mock.onAny().reply(boardsMockInterceptor);
     gl.boardService = mockBoardService();
-    gl.issueBoards.BoardsStore.create();
+    boardsStore.create();
 
     spyOn(gl.boardService, 'moveIssue').and.callFake(() => new Promise((resolve) => {
       resolve();
@@ -38,35 +38,35 @@ describe('Store', () => {
   });
 
   it('starts with a blank state', () => {
-    expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(0);
+    expect(boardsStore.state.lists.length).toBe(0);
   });
 
   describe('lists', () => {
     it('creates new list without persisting to DB', () => {
-      gl.issueBoards.BoardsStore.addList(listObj);
+      boardsStore.addList(listObj);
 
-      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
+      expect(boardsStore.state.lists.length).toBe(1);
     });
 
     it('finds list by ID', () => {
-      gl.issueBoards.BoardsStore.addList(listObj);
-      const list = gl.issueBoards.BoardsStore.findList('id', listObj.id);
+      boardsStore.addList(listObj);
+      const list = boardsStore.findList('id', listObj.id);
 
       expect(list.id).toBe(listObj.id);
     });
 
     it('finds list by type', () => {
-      gl.issueBoards.BoardsStore.addList(listObj);
-      const list = gl.issueBoards.BoardsStore.findList('type', 'label');
+      boardsStore.addList(listObj);
+      const list = boardsStore.findList('type', 'label');
 
       expect(list).toBeDefined();
     });
 
     it('gets issue when new list added', (done) => {
-      gl.issueBoards.BoardsStore.addList(listObj);
-      const list = gl.issueBoards.BoardsStore.findList('id', listObj.id);
+      boardsStore.addList(listObj);
+      const list = boardsStore.findList('id', listObj.id);
 
-      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
+      expect(boardsStore.state.lists.length).toBe(1);
 
       setTimeout(() => {
         expect(list.issues.length).toBe(1);
@@ -76,7 +76,7 @@ describe('Store', () => {
     });
 
     it('persists new list', (done) => {
-      gl.issueBoards.BoardsStore.new({
+      boardsStore.new({
         title: 'Test',
         list_type: 'label',
         label: {
@@ -86,10 +86,10 @@ describe('Store', () => {
           description: 'testing;'
         }
       });
-      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
+      expect(boardsStore.state.lists.length).toBe(1);
 
       setTimeout(() => {
-        const list = gl.issueBoards.BoardsStore.findList('id', listObj.id);
+        const list = boardsStore.findList('id', listObj.id);
         expect(list).toBeDefined();
         expect(list.id).toBe(listObj.id);
         expect(list.position).toBe(0);
@@ -98,61 +98,61 @@ describe('Store', () => {
     });
 
     it('check for blank state adding', () => {
-      expect(gl.issueBoards.BoardsStore.shouldAddBlankState()).toBe(true);
+      expect(boardsStore.shouldAddBlankState()).toBe(true);
     });
 
     it('check for blank state not adding', () => {
-      gl.issueBoards.BoardsStore.addList(listObj);
-      expect(gl.issueBoards.BoardsStore.shouldAddBlankState()).toBe(false);
+      boardsStore.addList(listObj);
+      expect(boardsStore.shouldAddBlankState()).toBe(false);
     });
 
     it('check for blank state adding when closed list exist', () => {
-      gl.issueBoards.BoardsStore.addList({
+      boardsStore.addList({
         list_type: 'closed'
       });
 
-      expect(gl.issueBoards.BoardsStore.shouldAddBlankState()).toBe(true);
+      expect(boardsStore.shouldAddBlankState()).toBe(true);
     });
 
     it('adds the blank state', () => {
-      gl.issueBoards.BoardsStore.addBlankState();
+      boardsStore.addBlankState();
 
-      const list = gl.issueBoards.BoardsStore.findList('type', 'blank', 'blank');
+      const list = boardsStore.findList('type', 'blank', 'blank');
       expect(list).toBeDefined();
     });
 
     it('removes list from state', () => {
-      gl.issueBoards.BoardsStore.addList(listObj);
+      boardsStore.addList(listObj);
 
-      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
+      expect(boardsStore.state.lists.length).toBe(1);
 
-      gl.issueBoards.BoardsStore.removeList(listObj.id, 'label');
+      boardsStore.removeList(listObj.id, 'label');
 
-      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(0);
+      expect(boardsStore.state.lists.length).toBe(0);
     });
 
     it('moves the position of lists', () => {
-      const listOne = gl.issueBoards.BoardsStore.addList(listObj);
-      const listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
+      const listOne = boardsStore.addList(listObj);
+      const listTwo = boardsStore.addList(listObjDuplicate);
 
-      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
+      expect(boardsStore.state.lists.length).toBe(2);
 
-      gl.issueBoards.BoardsStore.moveList(listOne, [listObjDuplicate.id, listObj.id]);
+      boardsStore.moveList(listOne, [listObjDuplicate.id, listObj.id]);
 
       expect(listOne.position).toBe(1);
     });
 
     it('moves an issue from one list to another', (done) => {
-      const listOne = gl.issueBoards.BoardsStore.addList(listObj);
-      const listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
+      const listOne = boardsStore.addList(listObj);
+      const listTwo = boardsStore.addList(listObjDuplicate);
 
-      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
+      expect(boardsStore.state.lists.length).toBe(2);
 
       setTimeout(() => {
         expect(listOne.issues.length).toBe(1);
         expect(listTwo.issues.length).toBe(1);
 
-        gl.issueBoards.BoardsStore.moveIssueToList(listOne, listTwo, listOne.findIssue(1));
+        boardsStore.moveIssueToList(listOne, listTwo, listOne.findIssue(1));
 
         expect(listOne.issues.length).toBe(0);
         expect(listTwo.issues.length).toBe(1);
@@ -162,19 +162,19 @@ describe('Store', () => {
     });
 
     it('moves an issue from backlog to a list', (done) => {
-      const backlog = gl.issueBoards.BoardsStore.addList({
+      const backlog = boardsStore.addList({
         ...listObj,
         list_type: 'backlog',
       });
-      const listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
+      const listTwo = boardsStore.addList(listObjDuplicate);
 
-      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
+      expect(boardsStore.state.lists.length).toBe(2);
 
       setTimeout(() => {
         expect(backlog.issues.length).toBe(1);
         expect(listTwo.issues.length).toBe(1);
 
-        gl.issueBoards.BoardsStore.moveIssueToList(backlog, listTwo, backlog.findIssue(1));
+        boardsStore.moveIssueToList(backlog, listTwo, backlog.findIssue(1));
 
         expect(backlog.issues.length).toBe(0);
         expect(listTwo.issues.length).toBe(1);
@@ -184,10 +184,10 @@ describe('Store', () => {
     });
 
     it('moves issue to top of another list', (done) => {
-      const listOne = gl.issueBoards.BoardsStore.addList(listObj);
-      const listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
+      const listOne = boardsStore.addList(listObj);
+      const listTwo = boardsStore.addList(listObjDuplicate);
 
-      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
+      expect(boardsStore.state.lists.length).toBe(2);
 
       setTimeout(() => {
         listOne.issues[0].id = 2;
@@ -195,7 +195,7 @@ describe('Store', () => {
         expect(listOne.issues.length).toBe(1);
         expect(listTwo.issues.length).toBe(1);
 
-        gl.issueBoards.BoardsStore.moveIssueToList(listOne, listTwo, listOne.findIssue(2), 0);
+        boardsStore.moveIssueToList(listOne, listTwo, listOne.findIssue(2), 0);
 
         expect(listOne.issues.length).toBe(0);
         expect(listTwo.issues.length).toBe(2);
@@ -207,10 +207,10 @@ describe('Store', () => {
     });
 
     it('moves issue to bottom of another list', (done) => {
-      const listOne = gl.issueBoards.BoardsStore.addList(listObj);
-      const listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
+      const listOne = boardsStore.addList(listObj);
+      const listTwo = boardsStore.addList(listObjDuplicate);
 
-      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
+      expect(boardsStore.state.lists.length).toBe(2);
 
       setTimeout(() => {
         listOne.issues[0].id = 2;
@@ -218,7 +218,7 @@ describe('Store', () => {
         expect(listOne.issues.length).toBe(1);
         expect(listTwo.issues.length).toBe(1);
 
-        gl.issueBoards.BoardsStore.moveIssueToList(listOne, listTwo, listOne.findIssue(2), 1);
+        boardsStore.moveIssueToList(listOne, listTwo, listOne.findIssue(2), 1);
 
         expect(listOne.issues.length).toBe(0);
         expect(listTwo.issues.length).toBe(2);
@@ -238,14 +238,14 @@ describe('Store', () => {
         labels: [],
         assignees: [],
       });
-      const list = gl.issueBoards.BoardsStore.addList(listObj);
+      const list = boardsStore.addList(listObj);
 
       setTimeout(() => {
         list.addIssue(issue);
 
         expect(list.issues.length).toBe(2);
 
-        gl.issueBoards.BoardsStore.moveIssueInList(list, issue, 0, 1, [1, 2]);
+        boardsStore.moveIssueInList(list, issue, 0, 1, [1, 2]);
 
         expect(list.issues[0].id).toBe(2);
         expect(gl.boardService.moveIssue).toHaveBeenCalledWith(2, null, null, 1, null);

spec/javascripts/boards/components/board_spec.js

 import Vue from 'vue';
 import '~/boards/services/board_service';
-import '~/boards/components/board';
+import Board from '~/boards/components/board';
 import '~/boards/models/list';
 import { mockBoardService } from 'spec/boards/mock_data';
 
@@ -21,7 +21,7 @@ describe('Board component', () => {
       boardId: 1,
     });
 
-    vm = new gl.issueBoards.Board({
+    vm = new Board({
       propsData: {
         boardId: '1',
         disabled: false,

spec/javascripts/boards/issue_card_spec.js

@@ -9,7 +9,6 @@ import '~/vue_shared/models/label';
 import '~/vue_shared/models/assignee';
 import '~/boards/models/issue';
 import '~/boards/models/list';
-import '~/boards/stores/boards_store';
 import IssueCardInner from '~/boards/components/issue_card_inner.vue';
 import { listObj } from './mock_data';
 

spec/javascripts/boards/issue_spec.js

@@ -6,7 +6,7 @@ import '~/vue_shared/models/assignee';
 import '~/boards/models/issue';
 import '~/boards/models/list';
 import '~/boards/services/board_service';
-import '~/boards/stores/boards_store';
+import boardsStore from '~/boards/stores/boards_store';
 import { mockBoardService } from './mock_data';
 
 describe('Issue model', () => {
@@ -14,7 +14,7 @@ describe('Issue model', () => {
 
   beforeEach(() => {
     gl.boardService = mockBoardService();
-    gl.issueBoards.BoardsStore.create();
+    boardsStore.create();
 
     issue = new ListIssue({
       title: 'Testing',

spec/javascripts/boards/list_spec.js

@@ -9,7 +9,7 @@ import '~/vue_shared/models/assignee';
 import '~/boards/models/issue';
 import '~/boards/models/list';
 import '~/boards/services/board_service';
-import '~/boards/stores/boards_store';
+import boardsStore from '~/boards/stores/boards_store';
 import { listObj, listObjDuplicate, boardsMockInterceptor, mockBoardService } from './mock_data';
 
 describe('List model', () => {
@@ -22,7 +22,7 @@ describe('List model', () => {
     gl.boardService = mockBoardService({
       bulkUpdatePath: '/test/issue-boards/board/1/lists',
     });
-    gl.issueBoards.BoardsStore.create();
+    boardsStore.create();
 
     list = new List(listObj);
   });
@@ -58,13 +58,13 @@ describe('List model', () => {
   });
 
   it('destroys the list', (done) => {
-    gl.issueBoards.BoardsStore.addList(listObj);
-    list = gl.issueBoards.BoardsStore.findList('id', listObj.id);
-    expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
+    boardsStore.addList(listObj);
+    list = boardsStore.findList('id', listObj.id);
+    expect(boardsStore.state.lists.length).toBe(1);
     list.destroy();
 
     setTimeout(() => {
-      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(0);
+      expect(boardsStore.state.lists.length).toBe(0);
       done();
     }, 0);
   });

spec/javascripts/boards/mock_data.js

-/* global BoardService */
+import BoardService from '~/boards/services/board_service';
 
 export const boardObj = {
   id: 1,