Updated droplab version to webpack version

.eslintignore

@@ -5,5 +5,6 @@
 /public/
 /tmp/
 /vendor/
+/app/assets/javascripts/droplab
 karma.config.js
 webpack.config.js

app/assets/javascripts/droplab/droplab_ajax.js

-/* eslint-disable */
-(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.ajax||(g.ajax = {}));g=(g.datasource||(g.datasource = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-/* global droplab */
-
-require('../window')(function(w){
-  function droplabAjaxException(message) {
-    this.message = message;
-  }
-
-  w.droplabAjax = {
-    _loadUrlData: function _loadUrlData(url) {
-      var self = this;
-      return new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest;
-        xhr.open('GET', url, true);
-        xhr.onreadystatechange = function () {
-          if(xhr.readyState === XMLHttpRequest.DONE) {
-            if (xhr.status === 200) {
-              var data = JSON.parse(xhr.responseText);
-              self.cache[url] = data;
-              return resolve(data);
-            } else {
-              return reject([xhr.responseText, xhr.status]);
-            }
-          }
-        };
-        xhr.send();
-      });
-    },
-
-    _loadData: function _loadData(data, config, self) {
-      if (config.loadingTemplate) {
-        var dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
-
-        if (dataLoadingTemplate) {
-          dataLoadingTemplate.outerHTML = self.listTemplate;
-        }
-      }
-
-      if (!self.destroyed) {
-        self.hook.list[config.method].call(self.hook.list, data);
-      }
-    },
-
-    init: function init(hook) {
-      var self = this;
-      self.destroyed = false;
-      self.cache = self.cache || {};
-      var config = hook.config.droplabAjax;
-      this.hook = hook;
-
-      if (!config || !config.endpoint || !config.method) {
-        return;
-      }
-
-      if (config.method !== 'setData' && config.method !== 'addData') {
-        return;
-      }
-
-      if (config.loadingTemplate) {
-        var dynamicList = hook.list.list.querySelector('[data-dynamic]');
-
-        var loadingTemplate = document.createElement('div');
-        loadingTemplate.innerHTML = config.loadingTemplate;
-        loadingTemplate.setAttribute('data-loading-template', '');
-
-        this.listTemplate = dynamicList.outerHTML;
-        dynamicList.outerHTML = loadingTemplate.outerHTML;
-      }
-
-      if (self.cache[config.endpoint]) {
-        self._loadData(self.cache[config.endpoint], config, self);
-      } else {
-        this._loadUrlData(config.endpoint)
-          .then(function(d) {
-            self._loadData(d, config, self);
-          }, function(xhrError) {
-            // TODO: properly handle errors due to XHR cancellation
-            return;
-          }).catch(function(e) {
-            throw new droplabAjaxException(e.message || e);
-          });
-      }
-    },
-
-    destroy: function() {
-      var dynamicList = this.hook.list.list.querySelector('[data-dynamic]');
-      this.destroyed = true;
-      if (this.listTemplate && dynamicList) {
-        dynamicList.outerHTML = this.listTemplate;
-      }
-    }
-  };
-});
-},{"../window":2}],2:[function(require,module,exports){
-module.exports = function(callback) {
-  return (function() {
-    callback(this);
-  }).call(null);
-};
-
-},{}]},{},[1])(1)
-});

app/assets/javascripts/droplab/droplab_ajax_filter.js

-/* eslint-disable */
-(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.ajax||(g.ajax = {}));g=(g.datasource||(g.datasource = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-/* global droplab */
-
-require('../window')(function(w){
-  w.droplabAjaxFilter = {
-    init: function(hook) {
-      this.destroyed = false;
-      this.hook = hook;
-      this.notLoading();
-
-      this.debounceTriggerWrapper = this.debounceTrigger.bind(this);
-      this.hook.trigger.addEventListener('keydown.dl', this.debounceTriggerWrapper);
-      this.hook.trigger.addEventListener('focus', this.debounceTriggerWrapper);
-      this.trigger(true);
-    },
-
-    notLoading: function notLoading() {
-      this.loading = false;
-    },
-
-    debounceTrigger: function debounceTrigger(e) {
-      var NON_CHARACTER_KEYS = [16, 17, 18, 20, 37, 38, 39, 40, 91, 93];
-      var invalidKeyPressed = NON_CHARACTER_KEYS.indexOf(e.detail.which || e.detail.keyCode) > -1;
-      var focusEvent = e.type === 'focus';
-
-      if (invalidKeyPressed || this.loading) {
-        return;
-      }
-
-      if (this.timeout) {
-        clearTimeout(this.timeout);
-      }
-
-      this.timeout = setTimeout(this.trigger.bind(this, focusEvent), 200);
-    },
-
-    trigger: function trigger(getEntireList) {
-      var config = this.hook.config.droplabAjaxFilter;
-      var searchValue = this.trigger.value;
-
-      if (!config || !config.endpoint || !config.searchKey) {
-        return;
-      }
-
-      if (config.searchValueFunction) {
-        searchValue = config.searchValueFunction();
-      }
-
-      if (config.loadingTemplate && this.hook.list.data === undefined ||
-        this.hook.list.data.length === 0) {
-        var dynamicList = this.hook.list.list.querySelector('[data-dynamic]');
-
-        var loadingTemplate = document.createElement('div');
-        loadingTemplate.innerHTML = config.loadingTemplate;
-        loadingTemplate.setAttribute('data-loading-template', true);
-
-        this.listTemplate = dynamicList.outerHTML;
-        dynamicList.outerHTML = loadingTemplate.outerHTML;
-      }
-
-      if (getEntireList) {
-        searchValue = '';
-      }
-
-      if (config.searchKey === searchValue) {
-        return this.list.show();
-      }
-
-      this.loading = true;
-
-      var params = config.params || {};
-      params[config.searchKey] = searchValue;
-      var self = this;
-      self.cache = self.cache || {};
-      var url = config.endpoint + this.buildParams(params);
-      var urlCachedData = self.cache[url];
-
-      if (urlCachedData) {
-        self._loadData(urlCachedData, config, self);
-      } else {
-        this._loadUrlData(url)
-          .then(function(data) {
-            self._loadData(data, config, self);
-          }, function(xhrError) {
-            // TODO: properly handle errors due to XHR cancellation
-            return;
-          });
-      }
-    },
-
-    _loadUrlData: function _loadUrlData(url) {
-      var self = this;
-      return new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest;
-        xhr.open('GET', url, true);
-        xhr.onreadystatechange = function () {
-          if(xhr.readyState === XMLHttpRequest.DONE) {
-            if (xhr.status === 200) {
-              var data = JSON.parse(xhr.responseText);
-              self.cache[url] = data;
-              return resolve(data);
-            } else {
-              return reject([xhr.responseText, xhr.status]);
-            }
-          }
-        };
-        xhr.send();
-      });
-    },
-
-    _loadData: function _loadData(data, config, self) {
-      if (config.loadingTemplate && self.hook.list.data === undefined ||
-        self.hook.list.data.length === 0) {
-        const dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
-
-        if (dataLoadingTemplate) {
-          dataLoadingTemplate.outerHTML = self.listTemplate;
-        }
-      }
-
-      if (!self.destroyed) {
-        var hookListChildren = self.hook.list.list.children;
-        var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic');
-
-        if (onlyDynamicList && data.length === 0) {
-          self.hook.list.hide();
-        }
-
-        self.hook.list.setData.call(self.hook.list, data);
-      }
-      self.notLoading();
-      self.hook.list.currentIndex = 0;
-    },
-
-    buildParams: function(params) {
-      if (!params) return '';
-      var paramsArray = Object.keys(params).map(function(param) {
-        return param + '=' + (params[param] || '');
-      });
-      return '?' + paramsArray.join('&');
-    },
-
-    destroy: function destroy() {
-      if (this.timeout) {
-        clearTimeout(this.timeout);
-      }
-
-      this.destroyed = true;
-
-      this.hook.trigger.removeEventListener('keydown.dl', this.debounceTriggerWrapper);
-      this.hook.trigger.removeEventListener('focus', this.debounceTriggerWrapper);
-    }
-  };
-});
-},{"../window":2}],2:[function(require,module,exports){
-module.exports = function(callback) {
-  return (function() {
-    callback(this);
-  }).call(null);
-};
-
-},{}]},{},[1])(1)
-});

app/assets/javascripts/filtered_search/dropdown_hint.js

@@ -55,7 +55,6 @@ require('./filtered_search_dropdown');
 
     renderContent() {
       const dropdownData = [];
-
       [].forEach.call(this.input.closest('.filtered-search-input-container').querySelectorAll('.dropdown-menu'), (dropdownMenu) => {
         const { icon, hint, tag, type } = dropdownMenu.dataset;
         if (icon && hint && tag) {

app/assets/javascripts/filtered_search/dropdown_non_user.js

@@ -16,6 +16,7 @@ require('./filtered_search_dropdown');
         },
         droplabFilter: {
           filterFunction: gl.DropdownUtils.filterWithSymbol.bind(null, this.symbol, input),
+          template: 'title',
         },
       };
     }

app/assets/javascripts/filtered_search/filtered_search_dropdown.js

@@ -4,7 +4,7 @@
   class FilteredSearchDropdown {
     constructor(droplab, dropdown, input, filter) {
       this.droplab = droplab;
-      this.hookId = input && input.getAttribute('data-id');
+      this.hookId = input && input.id;
       this.input = input;
       this.filter = filter;
       this.dropdown = dropdown;

app/assets/javascripts/filtered_search/filtered_search_manager.js

@@ -110,7 +110,7 @@ import FilteredSearchContainer from './container';
       if (e.keyCode === 13) {
         const dropdown = this.dropdownManager.mapping[this.dropdownManager.currentDropdown];
         const dropdownEl = dropdown.element;
-        const activeElements = dropdownEl.querySelectorAll('.dropdown-active');
+        const activeElements = dropdownEl.querySelectorAll('.droplab-item-active');
 
         e.preventDefault();
 

app/assets/javascripts/main.js

@@ -77,9 +77,9 @@ import './u2f/util';
 
 // droplab
 import './droplab/droplab';
-import './droplab/droplab_ajax';
-import './droplab/droplab_ajax_filter';
-import './droplab/droplab_filter';
+import './droplab/plugins/ajax';
+import './droplab/plugins/ajax_filter';
+import './droplab/plugins/filter';
 
 // everything else
 import './abuse_reports';

app/assets/stylesheets/framework/filters.scss

@@ -343,7 +343,7 @@
   }
 }
 
-.filter-dropdown-item.dropdown-active {
+.filter-dropdown-item.droplab-item-active {
   .btn {
     @extend %filter-dropdown-item-btn-hover;
   }

app/views/shared/issuable/_search_bar.html.haml

@@ -15,7 +15,7 @@
           .scroll-container
             %ul.tokens-container.list-unstyled
               %li.input-token
-                %input.form-control.filtered-search{ placeholder: 'Search or filter results...', data: { id: "filtered-search-#{type.to_s}", 'project-id' => @project.id, 'username-params' => @users.to_json(only: [:id, :username]), 'base-endpoint' => namespace_project_path(@project.namespace, @project) } }
+                %input.form-control.filtered-search{ id: "filtered-search-#{type.to_s}", placeholder: 'Search or filter results...', data: { 'project-id' => @project.id, 'username-params' => @users.to_json(only: [:id, :username]), 'base-endpoint' => namespace_project_path(@project.namespace, @project) } }
             = icon('filter')
             %button.clear-search.hidden{ type: 'button' }
               = icon('times')

spec/features/issues/filtered_search/dropdown_hint_spec.rb

 require 'rails_helper'
 
-describe 'Dropdown hint', js: true, feature: true do
+describe 'Dropdown hint', :js, :feature do
   include FilteredSearchHelpers
   include WaitForAjax
 
@@ -9,10 +9,6 @@ describe 'Dropdown hint', js: true, feature: true do
   let(:filtered_search) { find('.filtered-search') }
   let(:js_dropdown_hint) { '#js-dropdown-hint' }
 
-  def dropdown_hint_size
-    page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size
-  end
-
   def click_hint(text)
     find('#js-dropdown-hint .filter-dropdown .filter-dropdown-item', text: text).click
   end
@@ -46,14 +42,16 @@ describe 'Dropdown hint', js: true, feature: true do
     it 'does not filter `Press Enter or click to search`' do
       filtered_search.set('randomtext')
 
-      expect(page).to have_css(js_dropdown_hint, text: 'Press Enter or click to search', visible: false)
-      expect(dropdown_hint_size).to eq(0)
+      hint_dropdown = find(js_dropdown_hint)
+
+      expect(hint_dropdown).to have_content('Press Enter or click to search')
+      expect(hint_dropdown).to have_selector('.filter-dropdown .filter-dropdown-item', count: 0)
     end
 
     it 'filters with text' do
       filtered_search.set('a')
 
-      expect(dropdown_hint_size).to eq(3)
+      expect(find(js_dropdown_hint)).to have_selector('.filter-dropdown .filter-dropdown-item', count: 3)
     end
   end
 

spec/features/issues/filtered_search/dropdown_label_spec.rb

@@ -28,10 +28,6 @@ describe 'Dropdown label', js: true, feature: true do
     filter_dropdown.find('.filter-dropdown-item', text: text).click
   end
 
-  def dropdown_label_size
-    filter_dropdown.all('.filter-dropdown-item').size
-  end
-
   def clear_search_field
     find('.filtered-search-input-container .clear-search').click
   end
@@ -81,7 +77,7 @@ describe 'Dropdown label', js: true, feature: true do
       filtered_search.set('label:')
 
       expect(filter_dropdown).to have_content(bug_label.title)
-      expect(dropdown_label_size).to eq(1)
+      expect(filter_dropdown).to have_selector('.filter-dropdown-item', count: 1)
     end
   end
 
@@ -97,7 +93,8 @@ describe 'Dropdown label', js: true, feature: true do
 
       expect(filter_dropdown.find('.filter-dropdown-item', text: bug_label.title)).to be_visible
       expect(filter_dropdown.find('.filter-dropdown-item', text: uppercase_label.title)).to be_visible
-      expect(dropdown_label_size).to eq(2)
+
+      expect(filter_dropdown).to have_selector('.filter-dropdown-item', count: 2)
 
       clear_search_field
       init_label_search
@@ -106,14 +103,14 @@ describe 'Dropdown label', js: true, feature: true do
 
       expect(filter_dropdown.find('.filter-dropdown-item', text: bug_label.title)).to be_visible
       expect(filter_dropdown.find('.filter-dropdown-item', text: uppercase_label.title)).to be_visible
-      expect(dropdown_label_size).to eq(2)
+      expect(filter_dropdown).to have_selector('.filter-dropdown-item', count: 2)
     end
 
     it 'filters by multiple words with or without symbol' do
       filtered_search.send_keys('Hig')
 
       expect(filter_dropdown.find('.filter-dropdown-item', text: two_words_label.title)).to be_visible
-      expect(dropdown_label_size).to eq(1)
+      expect(filter_dropdown).to have_selector('.filter-dropdown-item', count: 1)
 
       clear_search_field
       init_label_search
@@ -121,14 +118,14 @@ describe 'Dropdown label', js: true, feature: true do
       filtered_search.send_keys('~Hig')
 
       expect(filter_dropdown.find('.filter-dropdown-item', text: two_words_label.title)).to be_visible
-      expect(dropdown_label_size).to eq(1)
+      expect(filter_dropdown).to have_selector('.filter-dropdown-item', count: 1)
     end
 
     it 'filters by multiple words containing single quotes with or without symbol' do
       filtered_search.send_keys('won\'t')
 
       expect(filter_dropdown.find('.filter-dropdown-item', text: wont_fix_single_label.title)).to be_visible
-      expect(dropdown_label_size).to eq(1)
+      expect(filter_dropdown).to have_selector('.filter-dropdown-item', count: 1)
 
       clear_search_field
       init_label_search
@@ -136,14 +133,14 @@ describe 'Dropdown label', js: true, feature: true do
       filtered_search.send_keys('~won\'t')
 
       expect(filter_dropdown.find('.filter-dropdown-item', text: wont_fix_single_label.title)).to be_visible
-      expect(dropdown_label_size).to eq(1)
+      expect(filter_dropdown).to have_selector('.filter-dropdown-item', count: 1)
     end
 
     it 'filters by multiple words containing double quotes with or without symbol' do
       filtered_search.send_keys('won"t')
 
       expect(filter_dropdown.find('.filter-dropdown-item', text: wont_fix_label.title)).to be_visible
-      expect(dropdown_label_size).to eq(1)
+      expect(filter_dropdown).to have_selector('.filter-dropdown-item', count: 1)
 
       clear_search_field
       init_label_search
@@ -151,14 +148,14 @@ describe 'Dropdown label', js: true, feature: true do
       filtered_search.send_keys('~won"t')
 
       expect(filter_dropdown.find('.filter-dropdown-item', text: wont_fix_label.title)).to be_visible
-      expect(dropdown_label_size).to eq(1)
+      expect(filter_dropdown).to have_selector('.filter-dropdown-item', count: 1)
     end
 
     it 'filters by special characters with or without symbol' do
       filtered_search.send_keys('^+')
 
       expect(filter_dropdown.find('.filter-dropdown-item', text: special_label.title)).to be_visible
-      expect(dropdown_label_size).to eq(1)
+      expect(filter_dropdown).to have_selector('.filter-dropdown-item', count: 1)
 
       clear_search_field
       init_label_search
@@ -166,7 +163,7 @@ describe 'Dropdown label', js: true, feature: true do
       filtered_search.send_keys('~^+')
 
       expect(filter_dropdown.find('.filter-dropdown-item', text: special_label.title)).to be_visible
-      expect(dropdown_label_size).to eq(1)
+      expect(filter_dropdown).to have_selector('.filter-dropdown-item', count: 1)
     end
   end
 
@@ -280,13 +277,13 @@ describe 'Dropdown label', js: true, feature: true do
       create(:label, project: project, title: 'bug-label')
       init_label_search
 
-      expect(dropdown_label_size).to eq(1)
+      expect(filter_dropdown).to have_selector('.filter-dropdown-item', count: 1)
 
       create(:label, project: project)
       clear_search_field
       init_label_search
 
-      expect(dropdown_label_size).to eq(1)
+      expect(filter_dropdown).to have_selector('.filter-dropdown-item', count: 1)
     end
   end
 end

spec/features/issues/filtered_search/search_bar_spec.rb

@@ -26,7 +26,7 @@ describe 'Search bar', js: true, feature: true do
       filtered_search.native.send_keys(:down)
 
       page.within '#js-dropdown-hint' do
-        expect(page).to have_selector('.dropdown-active')
+        expect(page).to have_selector('.droplab-item-active')
       end
     end
 
@@ -79,28 +79,30 @@ describe 'Search bar', js: true, feature: true do
 
       filtered_search.set('author')
 
-      expect(page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size).to eq(1)
+      expect(find('#js-dropdown-hint')).to have_selector('.filter-dropdown .filter-dropdown-item', count: 1)
 
       find('.filtered-search-input-container .clear-search').click
       filtered_search.click
 
-      expect(page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size).to eq(original_size)
+      expect(find('#js-dropdown-hint')).to have_selector('.filter-dropdown .filter-dropdown-item', count: original_size)
     end
 
     it 'resets the dropdown filters' do
+      filtered_search.click
+
+      hint_offset = get_left_style(find('#js-dropdown-hint')['style'])
+
       filtered_search.set('a')
-      hint_style = page.find('#js-dropdown-hint')['style']
-      hint_offset = get_left_style(hint_style)
 
       filtered_search.set('author:')
 
-      expect(page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size).to eq(0)
+      find('#js-dropdown-hint', visible: false)
 
       find('.filtered-search-input-container .clear-search').click
       filtered_search.click
 
-      expect(page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size).to be > 0
-      expect(get_left_style(page.find('#js-dropdown-hint')['style'])).to eq(hint_offset)
+      expect(find('#js-dropdown-hint')).to have_selector('.filter-dropdown .filter-dropdown-item', count: 4)
+      expect(get_left_style(find('#js-dropdown-hint')['style'])).to eq(hint_offset)
     end
   end
 end