Merge master into 26723-discussion-filters

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

 <script>
 import { Link } from '@gitlab-org/gitlab-ui';
+import Icon from '~/vue_shared/components/icon.vue';
 import ModalStore from '../../stores/modal_store';
+import boardsStore from '../../stores/boards_store';
 export default {
   components: {
     'gl-link': Link,
+    Icon,
   },
   data() {
     return {
       modal: ModalStore.store,
-      state: gl.issueBoards.BoardsStore.state,
+      state: boardsStore.state,
     };
   },
   computed: {
@@ -34,7 +37,9 @@ export default {
         class="dropdown-label-box">
       </span>
       {{ selected.title }}
-      <i class="fa fa-chevron-down"></i>
+      <icon
+        name="chevron-down"
+      />
     </button>
     <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
       <ul>

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

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

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

 <script>
 import $ from 'jquery';
 import _ from 'underscore';
+import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../eventhub';
 import Api from '../../api';
 export default {
   name: 'BoardProjectSelect',
+  components: {
+    Icon,
+  },
   props: {
     groupId: {
       type: Number,
@@ -78,11 +82,9 @@ export default {
         aria-expanded="false"
       >
         {{ selectedProjectName }}
-        <i
-          class="fa fa-chevron-down"
-          aria-hidden="true"
-        >
-        </i>
+        <icon
+          name="chevron-down"
+        />
       </button>
       <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
         <div class="dropdown-title">
@@ -92,12 +94,11 @@ export default {
             type="button"
             class="dropdown-title-button dropdown-menu-close"
           >
-            <i
-              aria-hidden="true"
+            <icon
+              name="merge-request-close-m"
               data-hidden="true"
-              class="fa fa-times dropdown-menu-close-icon"
-            >
-            </i>
+              class="dropdown-menu-close-icon"
+            />
           </button>
         </div>
         <div class="dropdown-input">
@@ -106,12 +107,11 @@ export default {
             type="search"
             placeholder="Search projects"
           />
-          <i
-            aria-hidden="true"
+          <icon
+            name="search"
+            class="dropdown-input-search"
             data-hidden="true"
-            class="fa fa-search dropdown-input-search"
-          >
-          </i>
+          />
         </div>
         <div class="dropdown-content"></div>
         <div class="dropdown-loading">

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

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

app/assets/javascripts/boards/filtered_search_boards.js

 import 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 = []) {
@@ -23,7 +24,7 @@ export default class FilteredSearchBoards extends FilteredSearchManager {
     this.store.path = path.substr(1);
     if (this.updateUrl) {
-      gl.issueBoards.BoardsStore.updateFiltersUrl();
+      boardsStore.updateFiltersUrl();
     }
   }

app/assets/javascripts/boards/index.js

@@ -14,24 +14,22 @@ import './models/issue';
 import './models/list';
 import './models/milestone';
 import './models/project';
-import './stores/boards_store';
+import boardsStore from './stores/boards_store';
 import ModalStore from './stores/modal_store';
 import BoardService from './services/board_service';
 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 Board from './components/board';
+import BoardSidebar from './components/board_sidebar';
+import initNewListDropdown from './components/new_list_dropdown';
 import BoardAddIssuesModal from './components/modal/index.vue';
 import '~/vue_shared/vue_resource_interceptor';
 import { NavigationType } from '~/lib/utils/common_utils';
+let issueBoardsApp;
+
 export default () => {
   const $boardApp = document.getElementById('board-app');
-  const Store = gl.issueBoards.BoardsStore;
-
-  window.gl = window.gl || {};
   // check for browser back and trigger a hard reload to circumvent browser caching.
   window.addEventListener('pageshow', (event) => {
@@ -43,25 +41,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);
-  gl.IssueBoardsApp = new Vue({
+  boardsStore.create();
+  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,
@@ -70,7 +64,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: {
@@ -85,7 +79,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);
@@ -99,16 +93,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;
@@ -119,7 +113,7 @@ export default () => {
           this.state.lists = _.sortBy(this.state.lists, 'position');
-          Store.addBlankState();
+          boardsStore.addBlankState();
           this.loading = false;
         })
         .catch(() => {
@@ -148,13 +142,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)
@@ -173,26 +167,28 @@ 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,
     },
     mounted() {
-      gl.issueBoards.newListDropdownInit();
+      initNewListDropdown();
     },
   });
   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,
           canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
         };
       },

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

@@ -3,32 +3,29 @@
 import $ from 'jquery';
 import sortableConfig from '../../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;
-gl.issueBoards.getBoardSortableDefaultOptions = (obj) => {
+}
+export function getBoardSortableDefaultOptions(obj) {
+  const touchEnabled = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
   const defaultSortOptions = Object.assign({}, sortableConfig, {
     filter: '.board-delete, .btn',
-    delay: gl.issueBoards.touchEnabled ? 100 : 0,
-    scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100,
+    delay: touchEnabled ? 100 : 0,
+    scrollSensitivity: touchEnabled ? 60 : 100,
     scrollSpeed: 20,
-    onStart: gl.issueBoards.onStart,
-    onEnd: gl.issueBoards.onEnd,
+    onStart: sortableStart,
+    onEnd: sortableEnd,
   });
   Object.keys(obj).forEach((key) => { defaultSortOptions[key] = obj[key]; });
   return defaultSortOptions;
-};
+}

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

-/* eslint-disable no-unused-vars, comma-dangle */
+/* eslint-disable no-unused-vars */
 /* global ListLabel */
 /* global ListMilestone */
 /* global ListAssignee */
@@ -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) {
@@ -86,7 +87,7 @@ class ListIssue {
   }
   getLists () {
-    return gl.issueBoards.BoardsStore.state.lists.filter(list => list.findIssue(this.id));
+    return boardsStore.state.lists.filter(list => list.findIssue(this.id));
   }
   updateData(newData) {

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

-/* eslint-disable no-underscore-dangle, class-methods-use-this, consistent-return, no-shadow, no-param-reassign, max-len */
+/* eslint-disable no-underscore-dangle, class-methods-use-this, consistent-return, no-shadow, no-param-reassign */
 /* global ListIssue */
 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';
 const PER_PAGE = 20;
@@ -89,9 +90,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
@@ -116,7 +117,7 @@ class List {
   getIssues(emptyIssues = true) {
     const data = {
-      ...urlParamsToObject(gl.issueBoards.BoardsStore.filter.path),
+      ...urlParamsToObject(boardsStore.filter.path),
       page: this.page,
     };

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

-/* eslint-disable comma-dangle, no-shadow */
+/* eslint-disable no-shadow */
 /* global List */
 import $ from 'jquery';
 import _ from 'underscore';
+import Vue from 'vue';
 import Cookies from 'js-cookie';
 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: '',
@@ -167,3 +165,16 @@ gl.issueBoards.BoardsStore = {
     window.history.pushState(null, null, `?${this.filter.path}`);
   }
 };
+
+// hacks added in order to allow milestone_select to function properly
+// TODO: remove these
+
+export function boardStoreIssueSet(...args) {
+  Vue.set(boardsStore.detail.issue, ...args);
+}
+
+export function boardStoreIssueDelete(...args) {
+  Vue.delete(boardsStore.detail.issue, ...args);
+}
+
+export default boardsStore;

app/assets/javascripts/clusters/components/applications.vue

 <script>
 import _ from 'underscore';
-import helmInstallIllustration from '@gitlab-org/gitlab-svgs/illustrations/kubernetes-installation.svg';
+import helmInstallIllustration from '@gitlab-org/gitlab-svgs/dist/illustrations/kubernetes-installation.svg';
 import elasticsearchLogo from 'images/cluster_app_logos/elasticsearch.png';
 import gitlabLogo from 'images/cluster_app_logos/gitlab.png';
 import helmLogo from 'images/cluster_app_logos/helm.png';

app/assets/javascripts/commit/image_file.js

-/* eslint-disable func-names, wrap-iife, no-var, prefer-arrow-callback, no-else-return, consistent-return, prefer-template, quotes, one-var, one-var-declaration-per-line, no-unused-vars, no-return-assign, comma-dangle, quote-props, no-unused-expressions, no-sequences, max-len */
+/* eslint-disable func-names, no-var, prefer-arrow-callback, no-else-return, consistent-return, prefer-template, one-var, no-unused-vars, no-return-assign, no-unused-expressions, no-sequences */
 import $ from 'jquery';

app/assets/javascripts/compare_autocomplete.js

-/* eslint-disable func-names, one-var, no-var, one-var-declaration-per-line, object-shorthand, no-else-return, max-len */
+/* eslint-disable func-names, one-var, no-var, object-shorthand, no-else-return */
 import $ from 'jquery';
 import { __ } from './locale';

app/assets/javascripts/cycle_analytics/components/banner.vue

 <script>
+  import Icon from '~/vue_shared/components/icon.vue';
   import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg';
   export default {
+    components: {
+      Icon,
+    },
     props: {
       documentationLink: {
         type: String,
@@ -28,10 +32,9 @@
       type="button"
       @click="dismissOverviewDialog"
     >
-      <i
-        class="fa fa-times"
-        aria-hidden="true">
-      </i>
+      <icon
+        name="close"
+      />
     </button>
     <div
       class="svg-container"

app/assets/javascripts/diff_notes/components/comment_resolve_btn.js

-/* eslint-disable comma-dangle, object-shorthand, func-names, no-else-return, quotes, no-lonely-if, max-len */
+/* eslint-disable object-shorthand, func-names, no-else-return, no-lonely-if */
 /* global CommentsStore */
 import $ from 'jquery';

app/assets/javascripts/diff_notes/components/jump_to_discussion.js

-/* eslint-disable comma-dangle, object-shorthand, func-names, no-else-return, guard-for-in, no-restricted-syntax, no-lonely-if, no-continue, brace-style, max-len, quotes */
+/* eslint-disable object-shorthand, func-names, no-else-return, guard-for-in, no-restricted-syntax, no-lonely-if, no-continue */
 /* global CommentsStore */
 import $ from 'jquery';

app/assets/javascripts/diff_notes/components/resolve_count.js

-/* eslint-disable comma-dangle, object-shorthand, func-names */
+/* eslint-disable object-shorthand, func-names */
 /* global CommentsStore */
 import Vue from 'vue';

app/assets/javascripts/diff_notes/mixins/discussion.js

-/* eslint-disable object-shorthand, func-names, guard-for-in, no-restricted-syntax, comma-dangle, */
+/* eslint-disable object-shorthand, func-names, guard-for-in, no-restricted-syntax, */
 const DiscussionMixins = {
   computed: {

app/assets/javascripts/diff_notes/stores/comments.js

-/* eslint-disable object-shorthand, func-names, camelcase, no-restricted-syntax, guard-for-in, comma-dangle, max-len */
+/* eslint-disable object-shorthand, func-names, camelcase, no-restricted-syntax, guard-for-in */
 /* global DiscussionModel */
 import Vue from 'vue';

app/assets/javascripts/diffs/components/app.vue

@@ -127,7 +127,6 @@ export default {
       'startRenderDiffsQueue',
       'assignDiscussionsToDiff',
     ]),
-
     fetchData() {
       this.fetchDiffFiles()
         .then(() => {