Use ui-select for index pattern selector (#10144)

* Replace index pattern selector with ui-select

* Show index patterns in alphabetical order

* Add highlighting to select

package.json

@@ -193,6 +193,7 @@
     "tinygradient": "0.3.0",
     "trunc-html": "1.0.2",
     "trunc-text": "1.0.2",
+    "ui-select": "0.19.6",
     "url-loader": "0.5.6",
     "validate-npm-package-name": "2.2.2",
     "vision": "4.1.0",

src/core_plugins/kibana/public/discover/__tests__/directives/field_chooser.js

@@ -101,7 +101,8 @@ describe('discover field chooser directives', function () {
 
   describe('Index list', function () {
     it('should be in alphabetical order', function (done) {
-      expect($elem.find('li.sidebar-item-title').text()).to.be('abc');
+      $elem.find('.ui-select-toggle').click();
+      expect($elem.find('[role=option]').text().replace(/\W+/g, '')).to.be('abc');
       done();
     });
   });

src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html

@@ -1,16 +1,18 @@
 <div class="sidebar-list">
   <div ng-show="indexPatternList.length > 1">
-    <div class="index-pattern" ng-click="showIndexPatternSelection = !showIndexPatternSelection"
-    ng-class="{active: showIndexPatternSelection === true}">
-      <div css-truncate title="{{indexPattern.id}}">{{indexPattern.id}}</div>
-      <i ng-hide="showIndexPatternSelection" class="fa fa-caret-down"></i>
-      <i ng-show="showIndexPatternSelection" class="fa fa-caret-up"></i>
-    </div>
-    <div ng-show="showIndexPatternSelection">
-      <ul class="list-unstyled sidebar-item index-pattern-selection">
-        <li css-truncate class="sidebar-item-title" title="{{id}}" ng-repeat="id in indexPatternList | orderBy" ng-show="indexPattern.id != id" ng-click="setIndexPattern(id)">{{id}}</li>
-      </ul>
-    </div>
+    <ui-select
+      class="index-pattern-selection"
+      ng-model="selectedIndexPattern"
+      on-select="setIndexPattern($item)"
+      ng-init="selectedIndexPattern = indexPattern.id"
+    >
+      <ui-select-match>
+        {{$select.selected}}
+      </ui-select-match>
+      <ui-select-choices repeat="id in indexPatternList | filter:$select.search | orderBy">
+        <div ng-bind-html="id | highlight: $select.search"></div>
+      </ui-select-choices>
+    </ui-select>
   </div>
   <div ng-hide="indexPatternList.length > 1">
     <div class="index-pattern">

src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.js

@@ -2,6 +2,7 @@ import 'ui/directives/css_truncate';
 import 'ui/directives/field_name';
 import 'ui/filters/unique';
 import 'plugins/kibana/discover/components/field_chooser/discover_field';
+import 'angular-ui-select';
 import _ from 'lodash';
 import $ from 'jquery';
 import rison from 'rison-node';

src/core_plugins/kibana/public/discover/index.html

@@ -59,7 +59,6 @@
       <div class="col-md-2 sidebar-container collapsible-sidebar">
         <disc-field-chooser
           columns="state.columns"
-          refresh="refreshFieldList"
           hits="rows"
           field-counts="fieldCounts"
           filter="filterQuery"

src/ui/public/styles/sidebar.less

@@ -153,11 +153,8 @@
     }
   }
 
-  .index-pattern-selection .sidebar-item-title {
-    background-color: @sidebar-index-pattern-selection-bg;
-    &:hover {
-      background-color: @sidebar-index-pattern-selection-bg-hover;
-    }
+  .index-pattern-selection .ui-select-toggle {
+    border-radius: 0;
   }
 
 }

webpackShims/angular-ui-select.js

@@ -0,0 +1,7 @@
+require('jquery');
+require('angular');
+require('angular-sanitize');
+require('ui-select/dist/select');
+require('ui-select/dist/select.css');
+
+require('ui/modules').get('kibana', ['ui.select', 'ngSanitize']);