Use ui-select for agg selector (#13292)

* Use ui-select for agg selector

* Fix functional tests

* Fix functional tests

* Fix test

* Fix visualize page object

* Use sortPrefixFirst in agg selector

* Fix unit tests

* Fix unit test

* Use not(.ng-hide) rather than last-child

src/ui/public/agg_types/controls/field.html

@@ -6,7 +6,7 @@
   <ui-select
     name="field"
     required
-    class="vis-editor-field-ui-select"
+    class="vis-editor-field-ui-select field-select"
     ng-show="indexedFields.length"
     ng-model="agg.params.field"
     on-select="aggParam.onChange(agg)"

src/ui/public/filter_editor/filter_field_select.html

@@ -13,7 +13,10 @@
   </ui-select-match>
   <ui-select-choices
     class="uiSelectChoices--autoWidth"
-    repeat="field in fieldOptions | filter:{ name: $select.search } | orderBy:'name' | sortPrefixFirst:$select.search:'name'"
+    repeat="field in fieldOptions
+      | filter:{ name: $select.search }
+      | orderBy:'name'
+      | sortPrefixFirst:$select.search:'name'"
     group-by="getFieldIndexPattern"
   >
     <div ng-bind-html="field.name | highlight: $select.search"></div>

src/ui/public/utils/__tests__/sort_prefix_first.js

@@ -39,4 +39,12 @@ describe('sortPrefixFirst', function () {
     expect(result).to.not.be(array);
     expect(result).to.eql([50, 5, 1]);
   });
+
+  it('should handle mixed case', function () {
+    const array = ['Date Histogram', 'Histogram'];
+    const prefix = 'histo';
+    const result = sortPrefixFirst(array, prefix);
+    expect(result).to.not.be(array);
+    expect(result).to.eql(['Histogram', 'Date Histogram']);
+  });
 });

src/ui/public/utils/sort_prefix_first.js

@@ -1,16 +1,20 @@
 export function sortPrefixFirst(array, prefix, property) {
   if (!prefix) return array;
+  const lowerCasePrefix = ('' + prefix).toLowerCase();
   return [...array].sort(sortPrefixFirstComparator);
 
   function sortPrefixFirstComparator(a, b) {
-    const aValue = '' + (property ? a[property] : a);
-    const bValue = '' + (property ? b[property] : b);
+    const aValue = ('' + (property ? a[property] : a)).toLowerCase();
+    const bValue = ('' + (property ? b[property] : b)).toLowerCase();
 
-    const bothStartWith = aValue.startsWith(prefix) && bValue.startsWith(prefix);
-    const neitherStartWith = !aValue.startsWith(prefix) && !bValue.startsWith(prefix);
+    const bothStartWith = aValue.startsWith(lowerCasePrefix) && bValue.startsWith(lowerCasePrefix);
+    const neitherStartWith = !aValue.startsWith(lowerCasePrefix) && !bValue.startsWith(lowerCasePrefix);
 
-    if (bothStartWith || neitherStartWith) return 0;
-    if (aValue.startsWith(prefix)) return -1;
-    else return 1;
+    if (bothStartWith || neitherStartWith) {
+      return 0;
+    } else if (aValue.startsWith(lowerCasePrefix)) {
+      return -1;
+    }
+    return 1;
   }
 }

src/ui/public/vis/editors/default/agg_select.html

@@ -1,12 +1,25 @@
 <div class="form-group">
   <label ng-if="$index < 1 || groupName !== 'buckets'">Aggregation</label>
   <label ng-if="$index >= 1 && groupName === 'buckets'">Sub Aggregation</label>
-  <select
-    name="agg"
-    class="form-control"
-    ng-model="agg.type"
+  <ui-select
     required
-    auto-select-if-only-one="aggTypeOptions | aggFilter:agg.schema.aggFilter"
-    ng-options="agg as agg.title group by agg.subtype for agg in aggTypeOptions | aggFilter:agg.schema.aggFilter">
-  </select>
+    name="agg"
+    class="vis-editor-field-ui-select agg-select"
+    data-test-subj="visEditorAggSelect"
+    ng-model="agg.type"
+  >
+    <ui-select-match placeholder="Select an aggregation">
+      {{$select.selected.title}}
+    </ui-select-match>
+    <ui-select-choices
+      repeat="agg in aggTypeOptions
+        | aggFilter:agg.schema.aggFilter
+        | filter: { title: $select.search }
+        | orderBy:'title'
+        | sortPrefixFirst:$select.search:'title'"
+      group-by="'subtype'"
+    >
+      <div ng-bind-html="agg.title | highlight: $select.search"></div>
+    </ui-select-choices>
+  </ui-select>
 </div>

test/functional/apps/visualize/_point_series_options.js

@@ -49,7 +49,7 @@ export default function ({ getService, getPageObjects }) {
       })
       .then(function selectAggregation() {
         log.debug('Aggregation = Average');
-        return PageObjects.visualize.selectAggregation('Average');
+        return PageObjects.visualize.selectAggregation('Average', 'metrics');
       })
       .then(function selectField() {
         log.debug('Field = memory');

test/functional/apps/visualize/_spy_panel.js

@@ -30,7 +30,7 @@ export default function ({ getService, getPageObjects }) {
         log.debug('Add Average Metric on machine.ram field');
         await PageObjects.visualize.clickAddMetric();
         await PageObjects.visualize.clickBucket('Y-Axis');
-        await PageObjects.visualize.selectAggregation('Average');
+        await PageObjects.visualize.selectAggregation('Average', 'metrics');
         await PageObjects.visualize.selectField('machine.ram', 'metrics');
         await PageObjects.visualize.clickGo();
         await PageObjects.visualize.openSpyPanel();

test/functional/page_objects/visualize_page.js

@@ -215,8 +215,14 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
       await Promise.all(getChartTypesPromises);
     }
 
-    async selectAggregation(myString) {
-      return find.clickByCssSelector('vis-editor-agg-params:not(.ng-hide) option[label="' + myString + '"]');
+    async selectAggregation(myString, groupName = 'buckets') {
+      const selector = `[group-name="${groupName}"] vis-editor-agg-params:not(.ng-hide) .agg-select`;
+      await retry.try(async () => {
+        await find.clickByCssSelector(selector);
+        const input = await find.byCssSelector(`${selector} input.ui-select-search`);
+        await input.type(myString);
+        await remote.pressKeys('\uE006');
+      });
     }
 
     async getField() {
@@ -226,9 +232,10 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
     }
 
     async selectField(fieldValue, groupName = 'buckets') {
+      const selector = `[group-name="${groupName}"] vis-editor-agg-params:not(.ng-hide) .field-select`;
       await retry.try(async () => {
-        await find.clickByCssSelector(`[group-name="${groupName}"] .ui-select-container`);
-        const input = await find.byCssSelector(`[group-name="${groupName}"] input.ui-select-search`);
+        await find.clickByCssSelector(selector);
+        const input = await find.byCssSelector(`${selector} input.ui-select-search`);
         await input.type(fieldValue);
         await remote.pressKeys('\uE006');
       });