Merge branch 'master' into issues-modal-filters

12 files changed, 264 insertions, 264 deletions

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 529ea9aec5b..e3241974e59 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -1,20 +1,22 @@
-/* eslint-disable one-var, quote-props, comma-dangle, space-before-function-paren */
+/* eslint-disable one-var, quote-props, comma-dangle, space-before-function-paren, import/newline-after-import, no-multi-spaces, max-len */
 /* global Vue */
 /* global BoardService */
 
-//= require vue
-//= require vue-resource
-//= require Sortable
-//= require_tree ./models
-//= require_tree ./stores
-//= require_tree ./services
-//= require_tree ./mixins
-//= require_tree ./filters
-//= require ./components/board
-//= require ./components/board_sidebar
-//= require ./components/new_list_dropdown
-//= require ./components/modal/index
-//= require ./vue_resource_interceptor
+function requireAll(context) { return context.keys().map(context); }
+
+window.Vue = require('vue');
+window.Vue.use(require('vue-resource'));
+window.Sortable = require('vendor/Sortable');
+requireAll(require.context('./models',   true, /^\.\/.*\.(js|es6)$/));
+requireAll(require.context('./stores',   true, /^\.\/.*\.(js|es6)$/));
+requireAll(require.context('./services', true, /^\.\/.*\.(js|es6)$/));
+requireAll(require.context('./mixins',   true, /^\.\/.*\.(js|es6)$/));
+requireAll(require.context('./filters',  true, /^\.\/.*\.(js|es6)$/));
+require('./components/board');
+require('./components/board_sidebar');
+require('./components/new_list_dropdown');
+require('./components/modal/index');
+require('./vue_resource_interceptor');
 
 $(() => {
   const $boardApp = document.getElementById('board-app');
@@ -76,7 +78,7 @@ $(() => {
   });
 
   gl.IssueBoardsSearch = new Vue({
-    el: '#js-boards-search',
+    el: document.getElementById('js-boards-search'),
     data: {
       filters: Store.state.filters
     },
@@ -87,7 +89,7 @@ $(() => {
 
   gl.IssueBoardsModalAddBtn = new Vue({
     mixins: [gl.issueBoards.ModalMixins],
-    el: '#js-add-issues-btn',
+    el: document.getElementById('js-add-issues-btn'),
     data: {
       modal: ModalStore.store,
       store: Store.state,
diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6
index d6148ae748a..18324de18b3 100644
--- a/app/assets/javascripts/boards/components/board.js.es6
+++ b/app/assets/javascripts/boards/components/board.js.es6
@@ -2,9 +2,9 @@
 /* global Vue */
 /* global Sortable */
 
-//= require ./board_blank_state
-//= require ./board_delete
-//= require ./board_list
+require('./board_blank_state');
+require('./board_delete');
+require('./board_list');
 
 (() => {
   const Store = gl.issueBoards.BoardsStore;
diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6
index 032b93da021..0ea66bd027c 100644
--- a/app/assets/javascripts/boards/components/board_card.js.es6
+++ b/app/assets/javascripts/boards/components/board_card.js.es6
@@ -1,7 +1,8 @@
 /* eslint-disable comma-dangle, space-before-function-paren, dot-notation */
-//= require ./issue_card_inner
 /* global Vue */
 
+require('./issue_card_inner');
+
 (() => {
   const Store = gl.issueBoards.BoardsStore;
 
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index 6906a910a2f..60b0a30af3f 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/app/assets/javascripts/boards/components/board_list.js.es6
@@ -2,8 +2,8 @@
 /* global Vue */
 /* global Sortable */
 
-//= require ./board_card
-//= require ./board_new_issue
+require('./board_card');
+require('./board_new_issue');
 
 (() => {
   const Store = gl.issueBoards.BoardsStore;
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js.es6 b/app/assets/javascripts/boards/components/board_sidebar.js.es6
index 126ccdb4978..dfc6eed785c 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js.es6
+++ b/app/assets/javascripts/boards/components/board_sidebar.js.es6
@@ -4,7 +4,8 @@
 /* global MilestoneSelect */
 /* global LabelsSelect */
 /* global Sidebar */
-//= require ./sidebar/remove_issue
+
+require('./sidebar/remove_issue');
 
 (() => {
   const Store = gl.issueBoards.BoardsStore;
diff --git a/app/assets/javascripts/boards/components/modal/filters.js.es6 b/app/assets/javascripts/boards/components/modal/filters.js.es6
index f1828781c5a..f7d89855998 100644
--- a/app/assets/javascripts/boards/components/modal/filters.js.es6
+++ b/app/assets/javascripts/boards/components/modal/filters.js.es6
@@ -1,49 +1,45 @@
 /* global Vue */
-//= require_tree ./filters
-(() => {
-  const ModalStore = gl.issueBoards.ModalStore;
-
-  gl.issueBoards.ModalFilters = Vue.extend({
-    props: {
-      projectId: {
-        type: Number,
-        required: true,
-      },
-      milestonePath: {
-        type: String,
-        required: true,
-      },
-      labelPath: {
-        type: String,
-        required: true,
-      },
+module.exports = Vue.extend({
+  name: 'modal-filters',
+  props: {
+    projectId: {
+      type: Number,
+      required: true,
     },
-    destroyed() {
-      ModalStore.setDefaultFilter();
+    milestonePath: {
+      type: String,
+      required: true,
     },
-    components: {
-      'user-filter': gl.issueBoards.ModalFilterUser,
-      'milestone-filter': gl.issueBoards.ModalFilterMilestone,
-      'label-filter': gl.issueBoards.ModalLabelFilter,
+    labelPath: {
+      type: String,
+      required: true,
     },
-    template: `
-      <div class="modal-filters">
-        <user-filter
-          dropdown-class-name="dropdown-menu-author"
-          toggle-class-name="js-user-search js-author-search"
-          toggle-label="Author"
-          field-name="author_id"
-          :project-id="projectId"></user-filter>
-        <user-filter
-          dropdown-class-name="dropdown-menu-author"
-          toggle-class-name="js-assignee-search"
-          toggle-label="Assignee"
-          field-name="assignee_id"
-          :null-user="true"
-          :project-id="projectId"></user-filter>
-        <milestone-filter :milestone-path="milestonePath"></milestone-filter>
-        <label-filter :label-path="labelPath"></label-filter>
-      </div>
-    `,
-  });
-})();
+  },
+  destroyed() {
+    gl.issueBoards.ModalStore.setDefaultFilter();
+  },
+  components: {
+    'user-filter': require('./filters/user'),
+    'milestone-filter': require('./filters/milestone'),
+    'label-filter': require('./filters/label'),
+  },
+  template: `
+    <div class="modal-filters">
+      <user-filter
+        dropdown-class-name="dropdown-menu-author"
+        toggle-class-name="js-user-search js-author-search"
+        toggle-label="Author"
+        field-name="author_id"
+        :project-id="projectId"></user-filter>
+      <user-filter
+        dropdown-class-name="dropdown-menu-author"
+        toggle-class-name="js-assignee-search"
+        toggle-label="Assignee"
+        field-name="assignee_id"
+        :null-user="true"
+        :project-id="projectId"></user-filter>
+      <milestone-filter :milestone-path="milestonePath"></milestone-filter>
+      <label-filter :label-path="labelPath"></label-filter>
+    </div>
+  `,
+});
diff --git a/app/assets/javascripts/boards/components/modal/filters/label.js.es6 b/app/assets/javascripts/boards/components/modal/filters/label.js.es6
index ac5fbc487d9..4fc8f72a145 100644
--- a/app/assets/javascripts/boards/components/modal/filters/label.js.es6
+++ b/app/assets/javascripts/boards/components/modal/filters/label.js.es6
@@ -1,55 +1,54 @@
 /* eslint-disable no-new */
 /* global Vue */
 /* global LabelsSelect */
-(() => {
-  gl.issueBoards.ModalLabelFilter = Vue.extend({
-    props: {
-      labelPath: {
-        type: String,
-        required: true,
-      },
+module.exports = Vue.extend({
+  name: 'filter-label',
+  props: {
+    labelPath: {
+      type: String,
+      required: true,
     },
-    mounted() {
-      new LabelsSelect(this.$refs.dropdown);
-    },
-    template: `
-      <div class="dropdown">
-        <button
-          class="dropdown-menu-toggle js-label-select js-multiselect js-extra-options"
-          type="button"
-          data-toggle="dropdown"
-          data-show-any="true"
-          data-show-no="true"
-          :data-labels="labelPath"
-          ref="dropdown">
-          <span class="dropdown-toggle-text">
-            Label
-          </span>
-          <i class="fa fa-chevron-down"></i>
-        </button>
-        <div class="dropdown-menu dropdown-select dropdown-menu-paging dropdown-menu-labels dropdown-menu-selectable">
-          <div class="dropdown-title">
-            Filter by label
-            <button
-              class="dropdown-title-button dropdown-menu-close"
-              aria-label="Close"
-              type="button">
-              <i class="fa fa-times dropdown-menu-close-icon"></i>
-            </button>
-          </div>
-          <div class="dropdown-input">
-            <input
-              type="search"
-              class="dropdown-input-field"
-              placeholder="Search"
-              autocomplete="off" />
-            <i class="fa fa-search dropdown-input-search"></i>
-            <i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
-          </div>
-          <div class="dropdown-content"></div>
-          <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
+  },
+  mounted() {
+    new LabelsSelect(this.$refs.dropdown);
+  },
+  template: `
+    <div class="dropdown">
+      <button
+        class="dropdown-menu-toggle js-label-select js-multiselect js-extra-options"
+        type="button"
+        data-toggle="dropdown"
+        data-show-any="true"
+        data-show-no="true"
+        :data-labels="labelPath"
+        ref="dropdown">
+        <span class="dropdown-toggle-text">
+          Label
+        </span>
+        <i class="fa fa-chevron-down"></i>
+      </button>
+      <div class="dropdown-menu dropdown-select dropdown-menu-paging dropdown-menu-labels dropdown-menu-selectable">
+        <div class="dropdown-title">
+          Filter by label
+          <button
+            class="dropdown-title-button dropdown-menu-close"
+            aria-label="Close"
+            type="button">
+            <i class="fa fa-times dropdown-menu-close-icon"></i>
+          </button>
+        </div>
+        <div class="dropdown-input">
+          <input
+            type="search"
+            class="dropdown-input-field"
+            placeholder="Search"
+            autocomplete="off" />
+          <i class="fa fa-search dropdown-input-search"></i>
+          <i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
         </div>
+        <div class="dropdown-content"></div>
+        <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
       </div>
-    `,
-  });
-})();
+    </div>
+  `,
+});
diff --git a/app/assets/javascripts/boards/components/modal/filters/milestone.js.es6 b/app/assets/javascripts/boards/components/modal/filters/milestone.js.es6
index e84345ddc2b..d555599d300 100644
--- a/app/assets/javascripts/boards/components/modal/filters/milestone.js.es6
+++ b/app/assets/javascripts/boards/components/modal/filters/milestone.js.es6
@@ -1,56 +1,55 @@
 /* eslint-disable no-new */
 /* global Vue */
 /* global MilestoneSelect */
-(() => {
-  gl.issueBoards.ModalFilterMilestone = Vue.extend({
-    props: {
-      milestonePath: {
-        type: String,
-        required: true,
-      },
+module.exports = Vue.extend({
+  name: 'filter-milestone',
+  props: {
+    milestonePath: {
+      type: String,
+      required: true,
     },
-    mounted() {
-      new MilestoneSelect(null, this.$refs.dropdown);
-    },
-    template: `
-      <div class="dropdown">
-        <button
-          class="dropdown-menu-toggle js-milestone-select"
-          type="button"
-          data-toggle="dropdown"
-          data-show-any="true"
-          data-show-upcoming="true"
-          data-field-name="milestone_title"
-          :data-milestones="milestonePath"
-          ref="dropdown">
-          <span class="dropdown-toggle-text">
-            Milestone
-          </span>
-          <i class="fa fa-chevron-down"></i>
-        </button>
-        <div class="dropdown-menu dropdown-select dropdown-menu-selectable dropdown-menu-milestone">
-          <div class="dropdown-title">
-            <span>Filter by milestone</span>
-            <button
-              class="dropdown-title-button dropdown-menu-close"
-              aria-label="Close"
-              type="button">
-              <i class="fa fa-times dropdown-menu-close-icon"></i>
-            </button>
-          </div>
-          <div class="dropdown-input">
-            <input
-              type="search"
-              class="dropdown-input-field"
-              placeholder="Search milestones"
-              autocomplete="off" />
-            <i class="fa fa-search dropdown-input-search"></i>
-            <i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
-          </div>
-          <div class="dropdown-content"></div>
-          <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
+  },
+  mounted() {
+    new MilestoneSelect(null, this.$refs.dropdown);
+  },
+  template: `
+    <div class="dropdown">
+      <button
+        class="dropdown-menu-toggle js-milestone-select"
+        type="button"
+        data-toggle="dropdown"
+        data-show-any="true"
+        data-show-upcoming="true"
+        data-field-name="milestone_title"
+        :data-milestones="milestonePath"
+        ref="dropdown">
+        <span class="dropdown-toggle-text">
+          Milestone
+        </span>
+        <i class="fa fa-chevron-down"></i>
+      </button>
+      <div class="dropdown-menu dropdown-select dropdown-menu-selectable dropdown-menu-milestone">
+        <div class="dropdown-title">
+          <span>Filter by milestone</span>
+          <button
+            class="dropdown-title-button dropdown-menu-close"
+            aria-label="Close"
+            type="button">
+            <i class="fa fa-times dropdown-menu-close-icon"></i>
+          </button>
+        </div>
+        <div class="dropdown-input">
+          <input
+            type="search"
+            class="dropdown-input-field"
+            placeholder="Search milestones"
+            autocomplete="off" />
+          <i class="fa fa-search dropdown-input-search"></i>
+          <i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
         </div>
+        <div class="dropdown-content"></div>
+        <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
       </div>
-    `,
-  });
-})();
+    </div>
+  `,
+});
diff --git a/app/assets/javascripts/boards/components/modal/filters/user.js.es6 b/app/assets/javascripts/boards/components/modal/filters/user.js.es6
index 6462e1fe2af..8523028c29c 100644
--- a/app/assets/javascripts/boards/components/modal/filters/user.js.es6
+++ b/app/assets/javascripts/boards/components/modal/filters/user.js.es6
@@ -1,97 +1,96 @@
 /* eslint-disable no-new */
 /* global Vue */
 /* global UsersSelect */
-(() => {
-  gl.issueBoards.ModalFilterUser = Vue.extend({
-    props: {
-      toggleClassName: {
-        type: String,
-        required: true,
-      },
-      dropdownClassName: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      toggleLabel: {
-        type: String,
-        required: true,
-      },
-      fieldName: {
-        type: String,
-        required: true,
-      },
-      nullUser: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      projectId: {
-        type: Number,
-        required: true,
-      },
+module.exports = Vue.extend({
+  name: 'filter-user',
+  props: {
+    toggleClassName: {
+      type: String,
+      required: true,
     },
-    mounted() {
-      new UsersSelect(null, this.$refs.dropdown);
+    dropdownClassName: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      currentUsername() {
-        return gon.current_username;
-      },
-      dropdownTitle() {
-        return `Filter by ${this.toggleLabel.toLowerCase()}`;
-      },
-      inputPlaceholder() {
-        return `Search ${this.toggleLabel.toLowerCase()}`;
-      },
+    toggleLabel: {
+      type: String,
+      required: true,
     },
-    template: `
-      <div class="dropdown">
-        <button
-          class="dropdown-menu-toggle js-user-search"
-          :class="toggleClassName"
-          type="button"
-          data-toggle="dropdown"
-          data-current-user="true"
-          :data-any-user="'Any ' + toggleLabel"
-          :data-null-user="nullUser"
-          :data-field-name="fieldName"
-          :data-project-id="projectId"
-          :data-first-user="currentUsername"
-          ref="dropdown">
-          <span class="dropdown-toggle-text">
-            {{ toggleLabel }}
-          </span>
-          <i class="fa fa-chevron-down"></i>
-        </button>
-        <div
-          class="dropdown-menu dropdown-select dropdown-menu-user dropdown-menu-selectable"
-          :class="dropdownClassName">
-          <div class="dropdown-title">
-            {{ dropdownTitle }}
-            <button
-              class="dropdown-title-button dropdown-menu-close"
-              aria-label="Close"
-              type="button">
-              <i class="fa fa-times dropdown-menu-close-icon"></i>
-            </button>
-          </div>
-          <div class="dropdown-input">
-            <input
-              type="search"
-              class="dropdown-input-field"
-              autocomplete="off"
-              :placeholder="inputPlaceholder" />
-            <i class="fa fa-search dropdown-input-search"></i>
-            <i
-              role="button"
-              class="fa fa-times dropdown-input-clear js-dropdown-input-clear">
-            </i>
-          </div>
-          <div class="dropdown-content"></div>
-          <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
+    fieldName: {
+      type: String,
+      required: true,
+    },
+    nullUser: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    projectId: {
+      type: Number,
+      required: true,
+    },
+  },
+  mounted() {
+    new UsersSelect(null, this.$refs.dropdown);
+  },
+  computed: {
+    currentUsername() {
+      return gon.current_username;
+    },
+    dropdownTitle() {
+      return `Filter by ${this.toggleLabel.toLowerCase()}`;
+    },
+    inputPlaceholder() {
+      return `Search ${this.toggleLabel.toLowerCase()}`;
+    },
+  },
+  template: `
+    <div class="dropdown">
+      <button
+        class="dropdown-menu-toggle js-user-search"
+        :class="toggleClassName"
+        type="button"
+        data-toggle="dropdown"
+        data-current-user="true"
+        :data-any-user="'Any ' + toggleLabel"
+        :data-null-user="nullUser"
+        :data-field-name="fieldName"
+        :data-project-id="projectId"
+        :data-first-user="currentUsername"
+        ref="dropdown">
+        <span class="dropdown-toggle-text">
+          {{ toggleLabel }}
+        </span>
+        <i class="fa fa-chevron-down"></i>
+      </button>
+      <div
+        class="dropdown-menu dropdown-select dropdown-menu-user dropdown-menu-selectable"
+        :class="dropdownClassName">
+        <div class="dropdown-title">
+          {{ dropdownTitle }}
+          <button
+            class="dropdown-title-button dropdown-menu-close"
+            aria-label="Close"
+            type="button">
+            <i class="fa fa-times dropdown-menu-close-icon"></i>
+          </button>
+        </div>
+        <div class="dropdown-input">
+          <input
+            type="search"
+            class="dropdown-input-field"
+            autocomplete="off"
+            :placeholder="inputPlaceholder" />
+          <i class="fa fa-search dropdown-input-search"></i>
+          <i
+            role="button"
+            class="fa fa-times dropdown-input-clear js-dropdown-input-clear">
+          </i>
         </div>
+        <div class="dropdown-content"></div>
+        <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
       </div>
-    `,
-  });
-})();
+    </div>
+  `,
+});
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index a71d71106b4..1cbc422c961 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -1,7 +1,9 @@
 /* eslint-disable no-new */
-//= require ./lists_dropdown
 /* global Vue */
 /* global Flash */
+
+require('./lists_dropdown');
+
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index c220c200d9a..01f5b318fb2 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -1,6 +1,5 @@
 /* global Vue */
-//= require ./tabs
-//= require ./filters
+require('./tabs');
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
@@ -44,7 +43,7 @@
     },
     components: {
       'modal-tabs': gl.issueBoards.ModalTabs,
-      'modal-filters': gl.issueBoards.ModalFilters,
+      'modal-filters': require('./filters'),
     },
     template: `
       <div>
diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index 30c0098d35f..f290cd13763 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -1,9 +1,11 @@
 /* global Vue */
 /* global ListIssue */
-//= require ./header
-//= require ./list
-//= require ./footer
-//= require ./empty_state
+
+require('./header');
+require('./list');
+require('./footer');
+require('./empty_state');
+
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;