[Vis: Default editor] EUIficate agg-select

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

@@ -18,5 +18,13 @@
 }
 
 .visEditorAggSelect__helpLink {
+  font-weight: $euiFontWeightRegular;
   @include euiFontSizeXS;
+
+  &:hover {
+    text-decoration: none;
+  }
+  &:focus {
+    text-decoration: none;
+  }
 }

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,16 @@
   </p>
 </div>
 
+<vis-editor-agg-select
+  agg="agg"
+  label="label"
+  agg-help-link="aggHelpLink"
+  on-change-agg-type="onChangeAggType"
+  agg-type-options="aggTypeOptions"
+  is-select-valid="isSelectValid"
+  ng-model="agg.type"
+  name="aggType"
+  required
+/>
+
 <!-- schema editors get added down here: aggSelect.html, agg_types/controls/*.html -->

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

@@ -19,7 +19,6 @@
 
 import $ from 'jquery';
 import { has, get } from 'lodash';
-import aggSelectHtml from './agg_select.html';
 import advancedToggleHtml from './advanced_toggle.html';
 import '../../../filters/match_any';
 import './agg_param';
@@ -33,13 +32,14 @@ import { aggTypeFieldFilters } from '../../../agg_types/param_types/filter';
 
 uiModules
   .get('app/visualize')
-  .directive('visEditorAggParams', function ($compile) {
+  .directive('visEditorAggParams', function ($compile, i18n) {
 
     return {
       restrict: 'E',
       template: aggParamsTemplate,
       scope: true,
-      link: function ($scope, $el, attr) {
+      require: '^form',
+      link: function ($scope, $el, attr, aggForm) {
         $scope.$bind('agg', attr.agg);
         $scope.$bind('groupName', attr.groupName);
         $scope.$bind('indexPattern', attr.indexPattern);
@@ -56,6 +56,13 @@ uiModules
           updateEditorConfig('default');
         });
 
+        $scope.label = getAggSelectLabel();
+        $scope.isSelectValid = () => Boolean($scope.agg.type);
+        $scope.onChangeAggType = (agg, aggType) => {
+          agg.type = aggType;
+          aggForm.aggType.$setDirty();
+        };
+
         function updateEditorConfig(property = 'fixedValue') {
           $scope.editorConfig = editorConfigProviders.getConfigForAgg(
             aggTypes.byType[$scope.groupName],
@@ -85,9 +92,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);
 
@@ -97,11 +101,6 @@ 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;
@@ -202,6 +201,23 @@ uiModules
             .append(param.editor)
             .get(0);
         }
+
+        function getAggSelectLabel() {
+          let aggSelectLabel = '';
+
+          if ($scope.$index < 1 || $scope.groupName !== 'buckets') {
+            aggSelectLabel = i18n('common.ui.vis.editors.aggSelect.aggregationLabel', {
+              defaultMessage: 'Aggregation',
+            });
+          }
+          if ($scope.$index >= 1 && $scope.groupName === 'buckets') {
+            aggSelectLabel = i18n('common.ui.vis.editors.aggSelect.subAggregationLabel', {
+              defaultMessage: 'Sub Aggregation',
+            });
+          }
+
+          return aggSelectLabel;
+        }
       }
     };
   });

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

@@ -0,0 +1,34 @@
+/*
+ * 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 'ngreact';
+import { uiModules } from '../../../modules';
+import { VisEditorAggSelect } from './vis_editor_agg_select';
+import { wrapInI18nContext } from 'ui/i18n';
+
+uiModules
+  .get('app/kibana', ['react'])
+  .directive('visEditorAggSelect', reactDirective => reactDirective(wrapInI18nContext(VisEditorAggSelect), [
+    'label',
+    'aggHelpLink',
+    'onChangeAggType',
+    'isSelectValid',
+    ['agg', { watchDepth: 'collection' }],
+    ['aggTypeOptions', { watchDepth: 'collection' }]
+  ]));

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

@@ -21,6 +21,7 @@ import './sidebar';
 import './vis_options';
 import './vis_editor_resizer';
 import './vis_type_agg_filter';
+import './agg_select';
 import $ from 'jquery';
 
 import _ from 'lodash';

src/legacy/ui/public/vis/editors/default/vis_editor_agg_select/index.tsx

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export { VisEditorAggSelect } from './vis_editor_agg_select';

src/legacy/ui/public/vis/editors/default/vis_editor_agg_select/vis_editor_agg_select.tsx

@@ -0,0 +1,130 @@
+/*
+ * 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 { EuiComboBox, EuiComboBoxOptionProps, EuiFormRow, EuiLink } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import _ from 'lodash';
+import React from 'react';
+import { AggType } from 'ui/agg_types';
+import { AggConfig } from 'ui/vis/agg_config';
+
+interface VisEditorAggSelectProps {
+  agg: AggConfig;
+  label: string;
+  aggHelpLink: string;
+  aggTypeOptions: AggType[];
+  isSelectValid: () => boolean;
+  onChangeAggType: (agg: AggConfig, aggType: AggType) => void;
+}
+
+type ComboBoxGroupedOption = EuiComboBoxOptionProps & {
+  label: string;
+  options?: EuiComboBoxOptionProps[];
+};
+
+function VisEditorAggSelect({
+  agg,
+  label,
+  aggHelpLink,
+  aggTypeOptions,
+  onChangeAggType,
+  isSelectValid,
+}: VisEditorAggSelectProps) {
+  const selectedOptions = agg.type ? [{ label: agg.type.title, value: agg.type }] : [];
+  const labelNode = (
+    <div>
+      {label}
+      {aggHelpLink && (
+        <EuiLink
+          href={aggHelpLink}
+          target="_blank"
+          rel="noopener"
+          className="visEditorAggSelect__helpLink pull-right"
+          type="button"
+        >
+          <FormattedMessage
+            id="common.ui.vis.editors.aggSelect.helpLinkLabel"
+            defaultMessage="{aggTitle} help"
+            values={{ aggTitle: agg.type.title }}
+          />
+        </EuiLink>
+      )}
+    </div>
+  );
+
+  const onChange = (options: ComboBoxGroupedOption[]) => {
+    onChangeAggType(agg, _.get(options, '0.value'));
+  };
+
+  const getGroupedOptions = (): ComboBoxGroupedOption[] => {
+    const groupedOptions: ComboBoxGroupedOption[] =
+      aggTypeOptions && aggTypeOptions.length
+        ? aggTypeOptions.reduce((array: AggType[], type: AggType) => {
+            const group = array.find(element => element.label === type.subtype);
+            const option = {
+              label: type.title,
+              value: type,
+            };
+
+            if (group) {
+              group.options.push(option);
+            } else {
+              array.push({ label: type.subtype, options: [option] });
+            }
+
+            return array;
+          }, [])
+        : [];
+
+    groupedOptions.sort(sortByLabel);
+
+    groupedOptions.forEach((group: ComboBoxGroupedOption) => {
+      if (Array.isArray(group.options)) {
+        group.options.sort(sortByLabel);
+      }
+    });
+
+    return groupedOptions;
+  };
+
+  return (
+    <EuiFormRow label={labelNode} className="form-group">
+      <EuiComboBox
+        placeholder={i18n.translate('common.ui.vis.editors.aggSelect.selectAggPlaceholder', {
+          defaultMessage: 'Select an aggregation',
+        })}
+        id="agg"
+        options={getGroupedOptions()}
+        selectedOptions={selectedOptions}
+        singleSelection={{ asPlainText: true }}
+        onChange={onChange}
+        data-test-subj={agg.title}
+        isClearable={false}
+        isInvalid={isSelectValid && !isSelectValid()}
+      />
+    </EuiFormRow>
+  );
+}
+
+function sortByLabel(a: { label: string }, b: { label: string }) {
+  return a.label.toLowerCase().localeCompare(b.label.toLowerCase());
+}
+
+export { VisEditorAggSelect };