Merge master into 26723-discussion-filters

app/assets/javascripts/awards_handler.js

@@ -42,10 +42,11 @@ export class AwardsHandler {
   }
   bindEvents() {
+    const $parentEl = this.targetContainerEl ? $(this.targetContainerEl) : $(document);
     // If the user shows intent let's pre-build the menu
     this.registerEventListener(
       'one',
-      $(document),
+      $parentEl,
       'mouseenter focus',
       this.toggleButtonSelector,
       'mouseenter focus',
@@ -58,7 +59,7 @@ export class AwardsHandler {
         }
       },
     );
-    this.registerEventListener('on', $(document), 'click', this.toggleButtonSelector, e => {
+    this.registerEventListener('on', $parentEl, 'click', this.toggleButtonSelector, e => {
       e.stopPropagation();
       e.preventDefault();
       this.showEmojiMenu($(e.currentTarget));
@@ -76,7 +77,7 @@ export class AwardsHandler {
     });
     const emojiButtonSelector = `.js-awards-block .js-emoji-btn, .${this.menuClass} .js-emoji-btn`;
-    this.registerEventListener('on', $(document), 'click', emojiButtonSelector, e => {
+    this.registerEventListener('on', $parentEl, 'click', emojiButtonSelector, e => {
       e.preventDefault();
       const $target = $(e.currentTarget);
       const $glEmojiElement = $target.find('gl-emoji');
@@ -168,7 +169,8 @@ export class AwardsHandler {
       </div>
     `;
-    document.body.insertAdjacentHTML('beforeend', emojiMenuMarkup);
+    const targetEl = this.targetContainerEl ? this.targetContainerEl : document.body;
+    targetEl.insertAdjacentHTML('beforeend', emojiMenuMarkup);
     this.addRemainingEmojiMenuCategories();
     this.setupSearch();
@@ -250,6 +252,12 @@ export class AwardsHandler {
   }
   positionMenu($menu, $addBtn) {
+    if (this.targetContainerEl) {
+      return $menu.css({
+        top: `${$addBtn.outerHeight()}px`,
+      });
+    }
+
     const position = $addBtn.data('position');
     // The menu could potentially be off-screen or in a hidden overflow element
     // So we position the element absolute in the body
@@ -424,9 +432,7 @@ export class AwardsHandler {
       users = origTitle.trim().split(FROM_SENTENCE_REGEX);
     }
     users.unshift('You');
-    return awardBlock
-      .attr('title', this.toSentence(users))
-      .tooltip('_fixTitle');
+    return awardBlock.attr('title', this.toSentence(users)).tooltip('_fixTitle');
   }
   createAwardButtonForVotesBlock(votesBlock, emojiName) {
@@ -609,13 +615,11 @@ export class AwardsHandler {
 let awardsHandlerPromise = null;
 export default function loadAwardsHandler(reload = false) {
   if (!awardsHandlerPromise || reload) {
-    awardsHandlerPromise = import(/* webpackChunkName: 'emoji' */ './emoji').then(
-      Emoji => {
-        const awardsHandler = new AwardsHandler(Emoji);
-        awardsHandler.bindEvents();
-        return awardsHandler;
-      },
-    );
+    awardsHandlerPromise = import(/* webpackChunkName: 'emoji' */ './emoji').then(Emoji => {
+      const awardsHandler = new AwardsHandler(Emoji);
+      awardsHandler.bindEvents();
+      return awardsHandler;
+    });
   }
   return awardsHandlerPromise;
 }

app/assets/javascripts/behaviors/markdown/copy_as_gfm.js

-/* eslint-disable object-shorthand, no-unused-vars, no-use-before-define, max-len, no-restricted-syntax, guard-for-in, no-continue */
+/* eslint-disable object-shorthand, no-unused-vars, no-use-before-define, no-restricted-syntax, guard-for-in, no-continue */
 import $ from 'jquery';
 import _ from 'underscore';

app/assets/javascripts/blob/file_template_mediator.js

-/* eslint-disable class-methods-use-this */
+import Api from '~/api';
 import $ from 'jquery';
 import Flash from '../flash';
@@ -9,9 +9,10 @@ import GitignoreSelector from './template_selectors/gitignore_selector';
 import LicenseSelector from './template_selectors/license_selector';
 export default class FileTemplateMediator {
-  constructor({ editor, currentAction }) {
+  constructor({ editor, currentAction, projectId }) {
     this.editor = editor;
     this.currentAction = currentAction;
+    this.projectId = projectId;
     this.initTemplateSelectors();
     this.initTemplateTypeSelector();
@@ -33,15 +34,14 @@ export default class FileTemplateMediator {
   initTemplateTypeSelector() {
     this.typeSelector = new FileTemplateTypeSelector({
       mediator: this,
-      dropdownData: this.templateSelectors
-        .map((templateSelector) => {
-          const cfg = templateSelector.config;
-
-          return {
-            name: cfg.name,
-            key: cfg.key,
-          };
-        }),
+      dropdownData: this.templateSelectors.map(templateSelector => {
+        const cfg = templateSelector.config;
+
+        return {
+          name: cfg.name,
+          key: cfg.key,
+        };
+      }),
     });
   }
@@ -89,7 +89,7 @@ export default class FileTemplateMediator {
   }
   listenForPreviewMode() {
-    this.$navLinks.on('click', 'a', (e) => {
+    this.$navLinks.on('click', 'a', e => {
       const urlPieces = e.target.href.split('#');
       const hash = urlPieces[1];
       if (hash === 'preview') {
@@ -105,7 +105,7 @@ export default class FileTemplateMediator {
       e.preventDefault();
     }
-    this.templateSelectors.forEach((selector) => {
+    this.templateSelectors.forEach(selector => {
       if (selector.config.key === item.key) {
         selector.show();
       } else {
@@ -126,8 +126,8 @@ export default class FileTemplateMediator {
     selector.renderLoading();
     // in case undo menu is already already there
     this.destroyUndoMenu();
-    this.fetchFileTemplate(selector.config.endpoint, query, data)
-      .then((file) => {
+    this.fetchFileTemplate(selector.config.type, query, data)
+      .then(file => {
         this.showUndoMenu();
         this.setEditorContent(file);
         this.setFilename(selector.config.name);
@@ -138,7 +138,7 @@ export default class FileTemplateMediator {
   displayMatchedTemplateSelector() {
     const currentInput = this.getFilename();
-    this.templateSelectors.forEach((selector) => {
+    this.templateSelectors.forEach(selector => {
       const match = selector.config.pattern.test(currentInput);
       if (match) {
@@ -149,15 +149,11 @@ export default class FileTemplateMediator {
     });
   }
-  fetchFileTemplate(apiCall, query, data) {
-    return new Promise((resolve) => {
+  fetchFileTemplate(type, query, data = {}) {
+    return new Promise(resolve => {
       const resolveFile = file => resolve(file);
-      if (!data) {
-        apiCall(query, resolveFile);
-      } else {
-        apiCall(query, data, resolveFile);
-      }
+      Api.projectTemplate(this.projectId, type, query, data, resolveFile);
     });
   }

app/assets/javascripts/blob/template_selector.js

@@ -66,9 +66,6 @@ export default class TemplateSelector {
     // be added by all subclasses.
   }
-  // To be implemented on the extending class
-  // e.g. Api.gitlabCiYml(query.name, file => this.setEditorContent(file));
-
   setEditorContent(file, { skipFocus } = {}) {
     if (!file) return;

app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js

-import Api from '../../api';
-
 import FileTemplateSelector from '../file_template_selector';
 export default class BlobCiYamlSelector extends FileTemplateSelector {
@@ -9,7 +7,7 @@ export default class BlobCiYamlSelector extends FileTemplateSelector {
       key: 'gitlab-ci-yaml',
       name: '.gitlab-ci.yml',
       pattern: /(.gitlab-ci.yml)/,
-      endpoint: Api.gitlabCiYml,
+      type: 'gitlab_ci_ymls',
       dropdown: '.js-gitlab-ci-yml-selector',
       wrapper: '.js-gitlab-ci-yml-selector-wrap',
     };

app/assets/javascripts/blob/template_selectors/dockerfile_selector.js

-import Api from '../../api';
-
 import FileTemplateSelector from '../file_template_selector';
 export default class DockerfileSelector extends FileTemplateSelector {
@@ -9,7 +7,7 @@ export default class DockerfileSelector extends FileTemplateSelector {
       key: 'dockerfile',
       name: 'Dockerfile',
       pattern: /(Dockerfile)/,
-      endpoint: Api.dockerfileYml,
+      type: 'dockerfiles',
       dropdown: '.js-dockerfile-selector',
       wrapper: '.js-dockerfile-selector-wrap',
     };

app/assets/javascripts/blob/template_selectors/gitignore_selector.js

-import Api from '../../api';
-
 import FileTemplateSelector from '../file_template_selector';
 export default class BlobGitignoreSelector extends FileTemplateSelector {
@@ -9,7 +7,7 @@ export default class BlobGitignoreSelector extends FileTemplateSelector {
       key: 'gitignore',
       name: '.gitignore',
       pattern: /(.gitignore)/,
-      endpoint: Api.gitignoreText,
+      type: 'gitignores',
       dropdown: '.js-gitignore-selector',
       wrapper: '.js-gitignore-selector-wrap',
     };

app/assets/javascripts/blob/template_selectors/license_selector.js

-import Api from '../../api';
-
 import FileTemplateSelector from '../file_template_selector';
 export default class BlobLicenseSelector extends FileTemplateSelector {
@@ -9,7 +7,7 @@ export default class BlobLicenseSelector extends FileTemplateSelector {
       key: 'license',
       name: 'LICENSE',
       pattern: /^(.+\/)?(licen[sc]e|copying)($|\.)/i,
-      endpoint: Api.licenseText,
+      type: 'licenses',
       dropdown: '.js-license-selector',
       wrapper: '.js-license-selector-wrap',
     };

app/assets/javascripts/blob_edit/blob_bundle.js

@@ -13,10 +13,11 @@ export default () => {
   if (editBlobForm.length) {
     const urlRoot = editBlobForm.data('relativeUrlRoot');
     const assetsPath = editBlobForm.data('assetsPrefix');
-    const blobLanguage = editBlobForm.data('blobLanguage');
+    const filePath = editBlobForm.data('blobFilename')
     const currentAction = $('.js-file-title').data('currentAction');
-    new EditBlob(`${urlRoot}${assetsPath}`, blobLanguage, currentAction);
+    const projectId = editBlobForm.data('project-id');
+    new EditBlob(`${urlRoot}${assetsPath}`, filePath, currentAction, projectId);
     new NewCommitForm(editBlobForm);
   }

app/assets/javascripts/blob_edit/edit_blob.js

@@ -5,18 +5,20 @@ import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import TemplateSelectorMediator from '../blob/file_template_mediator';
+import getModeByFileExtension from '~/lib/utils/ace_utils';
 export default class EditBlob {
-  constructor(assetsPath, aceMode, currentAction) {
+  constructor(assetsPath, aceMode, currentAction, projectId) {
     this.configureAceEditor(aceMode, assetsPath);
     this.initModePanesAndLinks();
     this.initSoftWrap();
-    this.initFileSelectors(currentAction);
+    this.initFileSelectors(currentAction, projectId);
   }
-  configureAceEditor(aceMode, assetsPath) {
+  configureAceEditor(filePath, assetsPath) {
     ace.config.set('modePath', `${assetsPath}/ace`);
     ace.config.loadModule('ace/ext/searchbox');
+    ace.config.loadModule('ace/ext/modelist');
     this.editor = ace.edit('editor');
@@ -25,15 +27,16 @@ export default class EditBlob {
     this.editor.focus();
-    if (aceMode) {
-      this.editor.getSession().setMode(`ace/mode/${aceMode}`);
+    if (filePath) {
+      this.editor.getSession().setMode(getModeByFileExtension(filePath));
     }
   }
-  initFileSelectors(currentAction) {
+  initFileSelectors(currentAction, projectId) {
     this.fileTemplateMediator = new TemplateSelectorMediator({
       currentAction,
       editor: this.editor,
+      projectId,
     });
   }
@@ -60,14 +63,15 @@ export default class EditBlob {
     if (paneId === '#preview') {
       this.$toggleButton.hide();
-      axios.post(currentLink.data('previewUrl'), {
-        content: this.editor.getValue(),
-      })
-      .then(({ data }) => {
-        currentPane.empty().append(data);
-        currentPane.renderGFM();
-      })
-      .catch(() => createFlash(__('An error occurred previewing the blob')));
+      axios
+        .post(currentLink.data('previewUrl'), {
+          content: this.editor.getValue(),
+        })
+        .then(({ data }) => {
+          currentPane.empty().append(data);
+          currentPane.renderGFM();
+        })
+        .catch(() => createFlash(__('An error occurred previewing the blob')));
     }
     this.$toggleButton.show();

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

-/* eslint-disable comma-dangle */
-
 import Sortable from 'sortablejs';
 import Vue from 'vue';
 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';
-
-const Store = gl.issueBoards.BoardsStore;
-
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-gl.issueBoards.Board = Vue.extend({
+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';
+export default Vue.extend({
   components: {
-    boardList,
-    'board-delete': gl.issueBoards.BoardDelete,
     BoardBlankState,
+    BoardDelete,
+    BoardList,
     Icon,
   },
   directives: {
@@ -49,8 +44,8 @@ gl.issueBoards.Board = Vue.extend({
   },
   data () {
     return {
-      detailIssue: Store.detail,
-      filter: Store.filter,
+      detailIssue: boardsStore.detail,
+      filter: boardsStore.filter,
     };
   },
   computed: {
@@ -72,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 comma-dangle, 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);
-        gl.issueBoards.onStart();
+        boardsStore.moving.list = card.list;
+        boardsStore.moving.issue = boardsStore.moving.list.findIssue(+e.item.dataset.issueId);
+        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',
@@ -68,8 +67,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

-/* eslint-disable comma-dangle, no-new */
+/* eslint-disable no-new */
 import $ from 'jquery';
 import Vue from 'vue';
@@ -14,13 +14,9 @@ import IssuableContext from '../../issuable_context';
 import LabelsSelect from '../../labels_select';
 import Subscriptions from '../../sidebar/components/subscriptions/subscriptions.vue';
 import MilestoneSelect from '../../milestone_select';
-const Store = gl.issueBoards.BoardsStore;
-
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-
-gl.issueBoards.BoardSidebar = Vue.extend({
+import boardsStore from '../stores/boards_store';
+export default Vue.extend({
   components: {
     AssigneeTitle,
     Assignees,
@@ -35,7 +31,7 @@ gl.issueBoards.BoardSidebar = Vue.extend({
   },
   data() {
     return {
-      detail: Store.detail,
+      detail: boardsStore.detail,
       issue: {},
       list: {},
       loadingAssignees: false,
@@ -117,18 +113,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

 <script>
   import $ from 'jquery';
+  import Icon from '~/vue_shared/components/icon.vue';
   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: {
       UserAvatarLink,
+      Icon,
     },
     directives: {
       tooltip,
@@ -110,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);
@@ -122,9 +123,9 @@
           filterPath.splice(labelIndex, 1);
         }
-        gl.issueBoards.BoardsStore.filter.path = filterPath.join('&');
-        Store.updateFiltersUrl();
+        boardsStore.filter.path = filterPath.join('&');
+        boardsStore.updateFiltersUrl();
         eventHub.$emit('updateTokens');
       },
@@ -141,11 +142,11 @@
   <div>
     <div class="board-card-header">
       <h4 class="board-card-title">
-        <i
+        <icon
           v-if="issue.confidential"
-          class="fa fa-eye-slash confidential-icon"
-          aria-hidden="true"
-        ></i>
+          name="eye-slash"
+          class="confidential-icon"
+        />
         <a
           :href="issue.path"
           :title="issue.title"

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/list.vue

 <script>
+  import Icon from '~/vue_shared/components/icon.vue';
   import bp from '../../../breakpoints';
   import ModalStore from '../../stores/modal_store';
   import IssueCardInner from '../issue_card_inner.vue';
@@ -6,6 +7,7 @@
   export default {
     components: {
       IssueCardInner,
+      Icon,
     },
     props: {
       issueLinkBase: {
@@ -147,13 +149,13 @@
             :issue="issue"
             :issue-link-base="issueLinkBase"
             :root-path="rootPath"/>
-          <span
+          <icon
             v-if="issue.selected"
             :aria-label="'Issue #' + issue.id + ' selected'"
+            name="mobile-issue-close"
             aria-checked="true"
-            class="issue-card-selected text-center">
-            <i class="fa fa-check"></i>
-          </span>
+            class="issue-card-selected text-center"
+          />
         </div>
       </div>
     </div>