[Vis: Default editor] EUIficate agg-select (#31892) (#34049)

* EUIficate agg-select

* Improve validation; update TS

* Apply styles for helpLink

* Fix unit test

* Update functional tests

* Adjust comboBox service to chose the item where the text mates exactly

* Update vis page object

* Add default value for agg

* Move aggs grouping function to a separate file

* Use labelAppend prop for help link node

* Add watcher for aggType to manage to discard changes

* Add default value for agg type title

* Fix defining selected option when aggType is defined

* Fix validation issues

* Remove a bootstrap specific class

* Change css selector in test

* Update according to SASS guidelines

* Update functinal comboBox service

* Added check for undefined

* Add jsdoc for groupAggregationsBy function

* Add unit tests for groupAggregationsBy

* Move setValidity invocation to DefaultEditorAggSelect component

* Wrap setValidity into useEffect due to react warning when select is cleaned at the first time

* Move help link definition to select component

src/legacy/ui/public/agg_types/controls/string.tsx

@@ -26,8 +26,8 @@ function StringParamEditor({ agg, aggParam, value, setValue }: AggParamEditorPro
   return (
     <EuiFormRow
       label={aggParam.displayName || aggParam.name}
-      className="form-group"
       fullWidth={true}
+      className="visEditorSidebar__aggParamFormRow"
     >
       <EuiFieldText
         value={value || ''}

src/legacy/ui/public/vis/editors/default/__tests__/default_editor_utils.test.tsx

@@ -0,0 +1,194 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { groupAggregationsBy } from '../default_editor_utils';
+
+const aggs = [
+  {
+    title: 'Count',
+    type: 'metrics',
+    subtype: 'Metric Aggregations',
+  },
+  {
+    title: 'Average',
+    type: 'metrics',
+    subtype: 'Metric Aggregations',
+  },
+  {
+    title: 'Cumulative Sum',
+    type: 'metrics',
+    subtype: 'Parent Pipeline Aggregations',
+  },
+  {
+    title: 'Min Bucket',
+    type: 'metrics',
+    subtype: 'Parent Pipeline Aggregations',
+  },
+  {
+    title: 'Sub string agg',
+    type: 'string',
+    subtype: 'Sub-String aggregations',
+  },
+  {
+    title: 'String agg',
+    type: 'string',
+    subtype: 'String aggregations',
+  },
+];
+
+describe('Default Editor groupAggregationsBy', () => {
+  it('should return aggs grouped by default type field', () => {
+    const groupedAggs = [
+      {
+        label: 'metrics',
+        options: [
+          {
+            label: 'Average',
+            value: {
+              title: 'Average',
+              type: 'metrics',
+              subtype: 'Metric Aggregations',
+            },
+          },
+          {
+            label: 'Count',
+            value: {
+              title: 'Count',
+              type: 'metrics',
+              subtype: 'Metric Aggregations',
+            },
+          },
+          {
+            label: 'Cumulative Sum',
+            value: {
+              title: 'Cumulative Sum',
+              type: 'metrics',
+              subtype: 'Parent Pipeline Aggregations',
+            },
+          },
+
+          {
+            label: 'Min Bucket',
+            value: {
+              title: 'Min Bucket',
+              type: 'metrics',
+              subtype: 'Parent Pipeline Aggregations',
+            },
+          },
+        ],
+      },
+      {
+        label: 'string',
+        options: [
+          {
+            label: 'String agg',
+            value: {
+              title: 'String agg',
+              type: 'string',
+              subtype: 'String aggregations',
+            },
+          },
+          {
+            label: 'Sub string agg',
+            value: {
+              title: 'Sub string agg',
+              type: 'string',
+              subtype: 'Sub-String aggregations',
+            },
+          },
+        ],
+      },
+    ];
+    expect(groupAggregationsBy(aggs)).toEqual(groupedAggs);
+  });
+  it('should return aggs grouped by subtype field', () => {
+    const groupedAggs = [
+      {
+        label: 'Metric Aggregations',
+        options: [
+          {
+            label: 'Average',
+            value: {
+              title: 'Average',
+              type: 'metrics',
+              subtype: 'Metric Aggregations',
+            },
+          },
+          {
+            label: 'Count',
+            value: {
+              title: 'Count',
+              type: 'metrics',
+              subtype: 'Metric Aggregations',
+            },
+          },
+        ],
+      },
+      {
+        label: 'Parent Pipeline Aggregations',
+        options: [
+          {
+            label: 'Cumulative Sum',
+            value: {
+              title: 'Cumulative Sum',
+              type: 'metrics',
+              subtype: 'Parent Pipeline Aggregations',
+            },
+          },
+
+          {
+            label: 'Min Bucket',
+            value: {
+              title: 'Min Bucket',
+              type: 'metrics',
+              subtype: 'Parent Pipeline Aggregations',
+            },
+          },
+        ],
+      },
+      {
+        label: 'String aggregations',
+        options: [
+          {
+            label: 'String agg',
+            value: {
+              title: 'String agg',
+              type: 'string',
+              subtype: 'String aggregations',
+            },
+          },
+        ],
+      },
+      {
+        label: 'Sub-String aggregations',
+        options: [
+          {
+            label: 'Sub string agg',
+            value: {
+              title: 'Sub string agg',
+              type: 'string',
+              subtype: 'Sub-String aggregations',
+            },
+          },
+        ],
+      },
+    ];
+    expect(groupAggregationsBy(aggs, 'subtype')).toEqual(groupedAggs);
+  });
+});

src/legacy/ui/public/vis/editors/default/_agg_select.scss

@@ -20,3 +20,7 @@
 .visEditorAggSelect__helpLink {
   @include euiFontSizeXS;
 }
+
+.visEditorAggSelect__formRow {
+  margin-bottom: $euiSizeS;
+}

src/legacy/ui/public/vis/editors/default/_sidebar.scss

@@ -222,5 +222,6 @@
 }
 
 .visEditorSidebar__aggParamFormRow {
+  margin-top: $euiSizeS;
   margin-bottom: $euiSizeS;
 }

src/legacy/ui/public/vis/editors/default/agg.js

@@ -53,7 +53,7 @@ uiModules
        * @return {[type]} [description]
        */
         $scope.describe = function () {
-          if (!$scope.agg.type.makeLabel) return '';
+          if (!$scope.agg.type || !$scope.agg.type.makeLabel) return '';
           const label = $scope.agg.type.makeLabel($scope.agg);
           return label ? label : '';
         };

src/legacy/ui/public/vis/editors/default/agg_params.html

@@ -33,4 +33,11 @@
   </p>
 </div>
 
+<vis-agg-select
+  agg="agg"
+  is-sub-aggregation="isSubAggregation"
+  agg-type-options="groupedAggTypeOptions"
+  ng-model="_internalNgModelStateAggType"
+/>
+
 <!-- schema editors get added down here: aggSelect.html, agg_types/controls/*.html -->

src/legacy/ui/public/vis/editors/default/agg_params.js

@@ -18,18 +18,18 @@
  */
 
 import $ from 'jquery';
-import { get, has } from 'lodash';
+import { get } from 'lodash';
 import { aggTypes } from '../../../agg_types';
 import { aggTypeFilters } from '../../../agg_types/filter';
 import { aggTypeFieldFilters } from '../../../agg_types/param_types/filter';
-import { documentationLinks } from '../../../documentation_links/documentation_links';
 import '../../../filters/match_any';
 import { uiModules } from '../../../modules';
 import { editorConfigProviders } from '../config/editor_config_providers';
 import advancedToggleHtml from './advanced_toggle.html';
 import './agg_param';
+import './agg_select';
 import aggParamsTemplate from './agg_params.html';
-import aggSelectHtml from './agg_select.html';
+import { groupAggregationsBy } from './default_editor_utils';
 
 uiModules
   .get('app/visualize')
@@ -56,6 +56,15 @@ uiModules
           updateEditorConfig('default');
         });
 
+        $scope.groupedAggTypeOptions = groupAggregationsBy($scope.aggTypeOptions, 'subtype');
+        $scope.isSubAggregation = $scope.$index >= 1 && $scope.groupName === 'buckets';
+
+        $scope.onAggTypeChange = (agg, value) => {
+          if (agg.type !== value) {
+            agg.type = value;
+          }
+        };
+
         $scope.onParamChange = (agg, paramName, value) => {
           if(agg.params[paramName] !== value) {
             agg.params[paramName] = value;
@@ -91,9 +100,6 @@ uiModules
         // controls for the agg, which is why they are first
         addSchemaEditor();
 
-        // allow selection of an aggregation
-        addAggSelector();
-
         function addSchemaEditor() {
           const $schemaEditor = $('<div>').addClass('schemaEditors form-group').appendTo($el);
 
@@ -103,21 +109,12 @@ uiModules
           }
         }
 
-        function addAggSelector() {
-          const $aggSelect = $(aggSelectHtml).appendTo($el);
-          $compile($aggSelect)($scope);
-        }
-
         // params for the selected agg, these are rebuilt every time the agg in $aggSelect changes
         let $aggParamEditors; //  container for agg type param editors
         let $aggParamEditorsScope;
 
         function updateAggParamEditor() {
           updateEditorConfig();
-          $scope.aggHelpLink = null;
-          if (has($scope, 'agg.type.name')) {
-            $scope.aggHelpLink = get(documentationLinks, ['aggs', $scope.agg.type.name]);
-          }
 
           if ($aggParamEditors) {
             $aggParamEditors.remove();