[Vis: Default editor] EUIficate agg-select

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/_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

@@ -221,3 +221,7 @@
   }
 }
 
+.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();

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

@@ -0,0 +1,106 @@
+/*
+ * 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 { has, get } from 'lodash';
+import { uiModules } from '../../../modules';
+import { DefaultEditorAggSelect } from './components/default_editor_agg_select';
+import { wrapInI18nContext } from 'ui/i18n';
+import { documentationLinks } from '../../../documentation_links/documentation_links';
+
+uiModules
+  .get('app/visualize', ['react'])
+  .directive('visAggSelectReactWrapper', reactDirective => reactDirective(wrapInI18nContext(DefaultEditorAggSelect), [
+    ['agg', { watchDepth: 'collection' }],
+    ['aggTypeOptions', { watchDepth: 'collection' }],
+    ['setValue', { watchDepth: 'reference' }],
+    ['setTouched', { watchDepth: 'reference' }],
+    'value',
+    'isSubAggregation',
+    'aggHelpLink',
+    'isSelectInvalid'
+  ]))
+  .directive('visAggSelect', function () {
+    return {
+      restrict: 'E',
+      scope: true,
+      require: '^ngModel',
+      template: function () {
+        return `<vis-agg-select-react-wrapper
+            agg="agg"
+            value="paramValue"
+            set-value="onChange"
+            is-sub-aggregation="isSubAggregation"
+            agg-help-link="aggHelpLink"
+            agg-type-options="aggTypeOptions"
+            is-select-invalid="isSelectInvalid"
+            set-touched="setTouched"
+          ></vis-agg-select-react-wrapper>`;
+      },
+      link: {
+        pre: function ($scope, $el, attr) {
+          $scope.$bind('agg', attr.agg);
+          $scope.$bind('isSubAggregation', attr.isSubAggregation);
+          $scope.$bind('aggTypeOptions', attr.aggTypeOptions);
+        },
+        post: function ($scope, $el, attr, ngModelCtrl) {
+          $scope.$watch('agg.type', (value, oldValue) => {
+            // Whenever the value of the parameter changed (e.g. by a reset or actually by calling)
+            // we store the new value in $scope.paramValue, which will be passed as a new value to the react component.
+            $scope.paramValue = value;
+
+            // Set value to trigger $validators calling
+            ngModelCtrl.$setViewValue(value);
+
+            // We skip the first time the listener is called
+            if (value !== oldValue) {
+              // We should set isSelectInvalid here in case the form is reseted
+              $scope.isSelectInvalid = !value;
+            }
+
+            $scope.aggHelpLink = null;
+            if (has($scope, 'agg.type.name')) {
+              $scope.aggHelpLink = get(documentationLinks, ['aggs', $scope.agg.type.name]);
+            }
+          });
+
+          $scope.onChange = (value) => {
+            // This is obviously not a good code quality, but without using scope binding (which we can't see above)
+            // to bind function values, this is right now the best temporary fix, until all of this will be gone.
+            $scope.$parent.onAggTypeChange($scope.agg, value);
+
+            ngModelCtrl.$setDirty();
+          };
+
+          $scope.setTouched = () => {
+            ngModelCtrl.$setTouched();
+            $scope.isSelectInvalid = !$scope.paramValue;
+          };
+
+          ngModelCtrl.$validators.required = (modelValue) => {
+            // The field will be marked as invalid when the value is empty and the field is untouched.
+            $scope.isSelectInvalid = ngModelCtrl.$touched && !modelValue;
+
+            // Since aggType is required field, the model and the form should become invalid when the aggregation field is set to empty.
+            return !!modelValue;
+          };
+        }
+      }
+    };
+  });

src/legacy/ui/public/vis/editors/default/components/default_editor_agg_select.tsx

@@ -0,0 +1,108 @@
+/*
+ * 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 { get } from 'lodash';
+import React from 'react';
+
+import { EuiComboBox, EuiFormRow, EuiLink } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { AggType } from 'ui/agg_types';
+import { AggConfig } from 'ui/vis/agg_config';
+import { ComboBoxGroupedOption } from '../default_editor_utils';
+
+interface DefaultEditorAggSelectProps {
+  agg: AggConfig;
+  value: AggType;
+  setValue: (aggType: AggType) => void;
+  aggHelpLink: string;
+  aggTypeOptions: AggType[];
+  isSubAggregation: boolean;
+  isSelectInvalid: boolean;
+  setTouched: () => void;
+}
+
+function DefaultEditorAggSelect({
+  agg = {},
+  value = { title: '' },
+  setValue,
+  aggTypeOptions = [],
+  aggHelpLink,
+  isSelectInvalid,
+  isSubAggregation,
+  setTouched,
+}: DefaultEditorAggSelectProps) {
+  const isAggTypeDefined = value && Boolean(value.title);
+  const selectedOptions: ComboBoxGroupedOption[] = isAggTypeDefined
+    ? [{ label: value.title, value }]
+    : [];
+
+  const label = isSubAggregation ? (
+    <FormattedMessage
+      id="common.ui.vis.defaultEditor.aggSelect.subAggregationLabel"
+      defaultMessage="Sub aggregation"
+    />
+  ) : (
+    <FormattedMessage
+      id="common.ui.vis.defaultEditor.aggSelect.aggregationLabel"
+      defaultMessage="Aggregation"
+    />
+  );
+  const helpLink = isAggTypeDefined && aggHelpLink && (
+    <EuiLink
+      href={aggHelpLink}
+      target="_blank"
+      rel="noopener"
+      className="visEditorAggSelect__helpLink"
+    >
+      <FormattedMessage
+        id="common.ui.vis.defaultEditor.aggSelect.helpLinkLabel"
+        defaultMessage="{aggTitle} help"
+        values={{ aggTitle: isAggTypeDefined ? value.title : '' }}
+      />
+    </EuiLink>
+  );
+
+  return (
+    <EuiFormRow
+      label={label}
+      labelAppend={helpLink}
+      isInvalid={isSelectInvalid}
+      fullWidth={true}
+      className="visEditorAggSelect__formRow"
+    >
+      <EuiComboBox
+        placeholder={i18n.translate('common.ui.vis.defaultEditor.aggSelect.selectAggPlaceholder', {
+          defaultMessage: 'Select an aggregation…',
+        })}
+        id={`visDefaultEditorAggSelect${agg.id}`}
+        options={aggTypeOptions}
+        selectedOptions={selectedOptions}
+        singleSelection={{ asPlainText: true }}
+        onChange={options => setValue(get(options, '0.value'))}
+        data-test-subj="defaultEditorAggSelect"
+        isClearable={false}
+        isInvalid={isSelectInvalid}
+        fullWidth={true}
+        onBlur={() => setTouched()}
+      />
+    </EuiFormRow>
+  );
+}
+
+export { DefaultEditorAggSelect };