diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js index 1fc7a29f785562187d2dcd90c5e20aa49300affa..75477ebb3b3372558793bffa16efa088ceef41b1 100644 --- a/app/assets/javascripts/boards/components/board.js +++ b/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); }); } } diff --git a/app/assets/javascripts/boards/components/board_blank_state.vue b/app/assets/javascripts/boards/components/board_blank_state.vue index cde22725a897c0d9c293a14397aa70f9b59acd2f..38aaec73d7d39ad10a9dc1e1851c816ce0af33e6 100644 --- a/app/assets/javascripts/boards/components/board_blank_state.vue +++ b/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), }, }; diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue index 0398102ad022faca7728cc23f4ece45610b3bab8..843498f0d06d87301ca0d1955517aaa46616d7b7 100644 --- a/app/assets/javascripts/boards/components/board_card.vue +++ b/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; } } }, diff --git a/app/assets/javascripts/boards/components/board_delete.js b/app/assets/javascripts/boards/components/board_delete.js index 240d0911a313d8d0755a86c828850c2dc3f3517f..a5f9d65e4d52ad523fd5c2457503834122c40ccd 100644 --- a/app/assets/javascripts/boards/components/board_delete.js +++ b/app/assets/javascripts/boards/components/board_delete.js @@ -1,12 +1,7 @@ -/* 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(); } - } - } + }, + }, }); diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue index 7ddb22ad8242185f9aa88a9669fa5ee11232821e..4dc56c670f097180030afa53b4310bd7837a57aa 100644 --- a/app/assets/javascripts/boards/components/board_list.vue +++ b/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(); } }, diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue index 50e15d9f3a89892b167106f8b0c46a543cb785e9..c2e52c8166183afb07d0b30c865df0f5ca3e2738 100644 --- a/app/assets/javascripts/boards/components/board_new_issue.vue +++ b/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 diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js index 6340bb862a769a4930188b6c61b000404127ec85..638f447de9fc5f1013fd76074053a3ad566fba62 100644 --- a/app/assets/javascripts/boards/components/board_sidebar.js +++ b/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; }) diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue index 3d3d0c3670ed918f5359a957d7d61fc578206bc0..35539970da6080a6c04e1201fd046bfefb5321e3 100644 --- a/app/assets/javascripts/boards/components/issue_card_inner.vue +++ b/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'); }, diff --git a/app/assets/javascripts/boards/components/modal/footer.vue b/app/assets/javascripts/boards/components/modal/footer.vue index d4affc8c3dee06ccf07def9e94bebe29ff6f7db3..268ca6bca131052210a51443475aa4c771dcc51d 100644 --- a/app/assets/javascripts/boards/components/modal/footer.vue +++ b/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: { diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue index 4f23e5db35c771b45beb168c1ff35f128db86482..4622fd2822089a8bffadc5bbdee0d52d8228caf3 100644 --- a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue +++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue @@ -1,6 +1,7 @@ <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: { diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js b/app/assets/javascripts/boards/components/new_list_dropdown.js index 448ab9ed135cf5a67ba05289ae626fddcaa5b3ae..2c2045f8901c4b2ec4d5a66ce3dcdcffaa583e2e 100644 --- a/app/assets/javascripts/boards/components/new_list_dropdown.js +++ b/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'); } }, }); }); -}; +} diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.vue b/app/assets/javascripts/boards/components/sidebar/remove_issue.vue index 00ec17a946ba49a3110754b00692c9b8eb16d3c3..4cb9588a6a3c433d684b8062595c21ba4400dc73 100644 --- a/app/assets/javascripts/boards/components/sidebar/remove_issue.vue +++ b/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. diff --git a/app/assets/javascripts/boards/filtered_search_boards.js b/app/assets/javascripts/boards/filtered_search_boards.js index ced108263b4c3d65ff070213c7afc0d36aaaaf46..f8b5529ed0baaf2a49f1d0516cd91e3d63b4c23b 100644 --- a/app/assets/javascripts/boards/filtered_search_boards.js +++ b/app/assets/javascripts/boards/filtered_search_boards.js @@ -1,6 +1,7 @@ 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(); } } diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js index 1e9405936003399147554f72e2e8b05dab7f8e1b..02f800a212ca9783348eff0dc4dfe9982de42940 100644 --- a/app/assets/javascripts/boards/index.js +++ b/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, }, }); }; diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js b/app/assets/javascripts/boards/mixins/sortable_default_options.js index 80d48e62bcd048eda303c82556c76d37a029ceff..873e4e432bbc5681d08e287a9e8b290401021839 100644 --- a/app/assets/javascripts/boards/mixins/sortable_default_options.js +++ b/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; -}; +} diff --git a/app/assets/javascripts/boards/models/issue.js b/app/assets/javascripts/boards/models/issue.js index 618cffa975d79205a9a451c704d6454343f8c3a8..3a0bbd3a72606dc58f88a278ad61b192fb82aa5a 100644 --- a/app/assets/javascripts/boards/models/issue.js +++ b/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) { diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js index ea68573ff2b81b4f875fd1ae94ac6c14c1bdfcc7..0da34bf777a6466310536ba3db60db1be7f7090c 100644 --- a/app/assets/javascripts/boards/models/list.js +++ b/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, }; diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js index c95a3b9167a3fc7711927c9cdb6210caa4afc7f4..b009efc68844aab3b404b0665a6fce80ffd43c7a 100644 --- a/app/assets/javascripts/boards/stores/boards_store.js +++ b/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; diff --git a/app/assets/javascripts/due_date_select.js b/app/assets/javascripts/due_date_select.js index 8abd8bc581acfec023a8ef4810a887cad635d1a6..c7b5a35cc14de6f08e4a05e40fc13bcb50a012aa 100644 --- a/app/assets/javascripts/due_date_select.js +++ b/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); diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js index 68ae1ca68421d4789683fe1f25707e5cad26bf99..3c38d998b6c0c5575c725246a1ddf0ac5300a42b 100644 --- a/app/assets/javascripts/labels_select.js +++ b/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); } diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js index 67c2d7909a2147937b0c2030438d8cf231a72c93..42fb5c7177a77ac0474e08526527af314893bfb6 100644 --- a/app/assets/javascripts/milestone_select.js +++ b/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'); diff --git a/ee/app/assets/javascripts/boards/components/board.js b/ee/app/assets/javascripts/boards/components/board.js index 610ab8b8f392b3fa4ce0898d3d30d107bcc65103..69205c53e72a307304f5058aea00513e9691a620 100644 --- a/ee/app/assets/javascripts/boards/components/board.js +++ b/ee/app/assets/javascripts/boards/components/board.js @@ -1,14 +1,12 @@ -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; diff --git a/ee/app/assets/javascripts/boards/components/board_form.vue b/ee/app/assets/javascripts/boards/components/board_form.vue index 96d308f73cce30086acf0a30c961b9dfa4bee4bc..0b0248bf3c389666eb6aea20a65ab9c3b1818cbd 100644 --- a/ee/app/assets/javascripts/boards/components/board_form.vue +++ b/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) { diff --git a/ee/app/assets/javascripts/boards/components/board_promotion_state.js b/ee/app/assets/javascripts/boards/components/board_promotion_state.js index 1a1b4cc5ea93e850eb1a32faa9bbc436c3c72381..b891923b58af5ecbdd98fed184694060bcc771ef 100644 --- a/ee/app/assets/javascripts/boards/components/board_promotion_state.js +++ b/ee/app/assets/javascripts/boards/components/board_promotion_state.js @@ -1,8 +1,8 @@ -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), }, }; diff --git a/ee/app/assets/javascripts/boards/components/board_sidebar.js b/ee/app/assets/javascripts/boards/components/board_sidebar.js index 40104dea0dec4a6297ff8e542660cf0e840edf67..0067f9bf11b5633fe000f71d978c06e48eacee0f 100644 --- a/ee/app/assets/javascripts/boards/components/board_sidebar.js +++ b/ee/app/assets/javascripts/boards/components/board_sidebar.js @@ -1,9 +1,7 @@ -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, }, diff --git a/ee/app/assets/javascripts/boards/components/boards_list_selector/index.js b/ee/app/assets/javascripts/boards/components/boards_list_selector/index.js index 29e4077c19519e49697327b2219036cc549cabb5..ba55ec54ddb52c7c21e5455278dbb6bd32daf163 100644 --- a/ee/app/assets/javascripts/boards/components/boards_list_selector/index.js +++ b/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() { diff --git a/ee/app/assets/javascripts/boards/components/boards_selector.js b/ee/app/assets/javascripts/boards/components/boards_selector.js index d07e89fef2538887bc524794f23f7194c83ae677..e285209769cd658a007ba4e32b0ff37f6bd7a75e 100644 --- a/ee/app/assets/javascripts/boards/components/boards_selector.js +++ b/ee/app/assets/javascripts/boards/components/boards_selector.js @@ -1,164 +1,155 @@ 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; + } }, - }); -})(); + }, +}); diff --git a/ee/app/assets/javascripts/boards/components/modal/index.js b/ee/app/assets/javascripts/boards/components/modal/index.js index 090b226627037ab0f1d8480d251dc8fdd539d917..075cce552d102e0a686d2e2b6aa22b498318893e 100644 --- a/ee/app/assets/javascripts/boards/components/modal/index.js +++ b/ee/app/assets/javascripts/boards/components/modal/index.js @@ -1,8 +1,8 @@ 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, }, diff --git a/ee/app/assets/javascripts/boards/components/sidebar/remove_issue.js b/ee/app/assets/javascripts/boards/components/sidebar/remove_issue.js index 488a5ec2e869d05753b6d6b7d58ff4aa262a4383..bd58e5349bc7f33e0a9939881c25810ec71389f2 100644 --- a/ee/app/assets/javascripts/boards/components/sidebar/remove_issue.js +++ b/ee/app/assets/javascripts/boards/components/sidebar/remove_issue.js @@ -1,12 +1,11 @@ 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)); diff --git a/ee/spec/javascripts/boards/components/assignee_select_spec.js b/ee/spec/javascripts/boards/components/assignee_select_spec.js index 522fe0e1a0b445897b6f594a08783d1b18d29c58..b8e6a20760233208114e4675a17d1ca66de80566 100644 --- a/ee/spec/javascripts/boards/components/assignee_select_spec.js +++ b/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(); diff --git a/ee/spec/javascripts/boards/components/board_form_spec.js b/ee/spec/javascripts/boards/components/board_form_spec.js index 93fc752ab9cab629839fa921903f06b6439f0865..41e1055812b8e44f6e2364dfc8f467b006018ebc 100644 --- a/ee/spec/javascripts/boards/components/board_form_spec.js +++ b/ee/spec/javascripts/boards/components/board_form_spec.js @@ -1,8 +1,7 @@ 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); diff --git a/ee/spec/javascripts/boards/components/board_list_selector/board_list_selector_spec.js b/ee/spec/javascripts/boards/components/board_list_selector/board_list_selector_spec.js index cc0d7782de6e8210ac2e57de53368e9bfd2718b7..743118f98b89e1f96505da124d215227d73b815b 100644 --- a/ee/spec/javascripts/boards/components/board_list_selector/board_list_selector_spec.js +++ b/ee/spec/javascripts/boards/components/board_list_selector/board_list_selector_spec.js @@ -1,4 +1,4 @@ -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() diff --git a/ee/spec/javascripts/boards/components/boards_selector_spec.js b/ee/spec/javascripts/boards/components/boards_selector_spec.js index 6976cfc0eff923cd11780e8b84fd1e9adf8ec29e..fe843081b34b0daef9402f96f3f31049d7acffe3 100644 --- a/ee/spec/javascripts/boards/components/boards_selector_spec.js +++ b/ee/spec/javascripts/boards/components/boards_selector_spec.js @@ -1,6 +1,6 @@ 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: '', diff --git a/spec/javascripts/boards/board_blank_state_spec.js b/spec/javascripts/boards/board_blank_state_spec.js index 0e4e1697fd0d352b5e44c4a3aa36e3626169bebd..50505b413139caa067f4e3dc6ff84dbbb85dc7ae 100644 --- a/spec/javascripts/boards/board_blank_state_spec.js +++ b/spec/javascripts/boards/board_blank_state_spec.js @@ -1,5 +1,5 @@ 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(); }); diff --git a/spec/javascripts/boards/board_card_spec.js b/spec/javascripts/boards/board_card_spec.js index ad263791cd442018f244d81d35bdfd296dcf1710..20cfe426807ac5c734804b384eb9d91565a6659f 100644 --- a/spec/javascripts/boards/board_card_spec.js +++ b/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'); diff --git a/spec/javascripts/boards/board_list_spec.js b/spec/javascripts/boards/board_list_spec.js index 3a79ef996f5f04d368dacdaac5bf6a27a5755d59..84dd9e5e141809646ae50d91828528e08e9c1026 100644 --- a/spec/javascripts/boards/board_list_spec.js +++ b/spec/javascripts/boards/board_list_spec.js @@ -1,15 +1,15 @@ /* 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); diff --git a/spec/javascripts/boards/board_new_issue_spec.js b/spec/javascripts/boards/board_new_issue_spec.js index 1245e3e099aeeaf130bb31033a576afc4eb7b78b..9fea625a4ac7e3d0be165a25304cfc03e7b64875 100644 --- a/spec/javascripts/boards/board_new_issue_spec.js +++ b/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); diff --git a/spec/javascripts/boards/boards_store_spec.js b/spec/javascripts/boards/boards_store_spec.js index ed43ce9029ef487ed3029ac8da4de69076e16e1b..dfd3ea0db6612e1363cbfcf93a39288849cbe2cd 100644 --- a/spec/javascripts/boards/boards_store_spec.js +++ b/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); diff --git a/spec/javascripts/boards/components/board_spec.js b/spec/javascripts/boards/components/board_spec.js index caa910b47d7cc7c16f75fec09095af792e79a92a..54036e1e1a8976ffa47962fb52159957694bb337 100644 --- a/spec/javascripts/boards/components/board_spec.js +++ b/spec/javascripts/boards/components/board_spec.js @@ -1,6 +1,6 @@ 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, diff --git a/spec/javascripts/boards/issue_card_spec.js b/spec/javascripts/boards/issue_card_spec.js index c15ce1edd615dafdab018e5eef7f755f013595d8..5b1ec002dd0450e175ecba336f67b208dfbd6547 100644 --- a/spec/javascripts/boards/issue_card_spec.js +++ b/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'; diff --git a/spec/javascripts/boards/issue_spec.js b/spec/javascripts/boards/issue_spec.js index 0beb57822834f0631fe01defd765d15eb3065be0..e8387068831185bbbffdbeeeea074590b4869ee8 100644 --- a/spec/javascripts/boards/issue_spec.js +++ b/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', diff --git a/spec/javascripts/boards/list_spec.js b/spec/javascripts/boards/list_spec.js index 4232e0fc22116419201620fe7f847a7248986c56..ba6e81a29a9077f0115002b46952649614de9204 100644 --- a/spec/javascripts/boards/list_spec.js +++ b/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); }); diff --git a/spec/javascripts/boards/mock_data.js b/spec/javascripts/boards/mock_data.js index 1ad9bd6c4e8e7a7c978f45a3c939bbb8e9cd52df..7ebbfc9ea35640861fbf0a7b20068d6d786e4d1d 100644 --- a/spec/javascripts/boards/mock_data.js +++ b/spec/javascripts/boards/mock_data.js @@ -1,4 +1,4 @@ -/* global BoardService */ +import BoardService from '~/boards/services/board_service'; export const boardObj = { id: 1,