From 562011647fd4916f8fb40942f5b82ad274ba1912 Mon Sep 17 00:00:00 2001
From: Lukas Olson <olson.lukas@gmail.com>
Date: Fri, 31 Mar 2017 11:37:10 -0700
Subject: [PATCH] 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                                  |  1 +
 .../__tests__/directives/field_chooser.js     |  3 ++-
 .../field_chooser/field_chooser.html          | 24 ++++++++++---------
 .../components/field_chooser/field_chooser.js |  1 +
 .../kibana/public/discover/index.html         |  1 -
 src/ui/public/styles/sidebar.less             |  7 ++----
 webpackShims/angular-ui-select.js             |  7 ++++++
 7 files changed, 26 insertions(+), 18 deletions(-)
 create mode 100644 webpackShims/angular-ui-select.js

diff --git a/package.json b/package.json
index bfb2ef7acfa68..8c62abea9ab09 100644
--- a/package.json
+++ b/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",
diff --git a/src/core_plugins/kibana/public/discover/__tests__/directives/field_chooser.js b/src/core_plugins/kibana/public/discover/__tests__/directives/field_chooser.js
index bbe845cf9a338..8e142a59cd919 100644
--- a/src/core_plugins/kibana/public/discover/__tests__/directives/field_chooser.js
+++ b/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();
     });
   });
diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html b/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html
index 5afb01b27983c..2788903fb0c42 100644
--- a/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html
+++ b/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">
diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.js b/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.js
index dc0bafe39566f..1f72e1ddc282e 100644
--- a/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.js
+++ b/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';
diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html
index abd460e912735..b4c647e9dddb4 100644
--- a/src/core_plugins/kibana/public/discover/index.html
+++ b/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"
diff --git a/src/ui/public/styles/sidebar.less b/src/ui/public/styles/sidebar.less
index 1e54e9fc5a23b..f69df1cc5e5d7 100644
--- a/src/ui/public/styles/sidebar.less
+++ b/src/ui/public/styles/sidebar.less
@@ -152,11 +152,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;
   }
 
 }
diff --git a/webpackShims/angular-ui-select.js b/webpackShims/angular-ui-select.js
new file mode 100644
index 0000000000000..95e0ac8b91261
--- /dev/null
+++ b/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']);