[Vis: Default editor] EUIficate top_aggregate and size param editors

src/legacy/ui/public/agg_types/__tests__/metrics/top_hit.js

@@ -42,7 +42,7 @@ describe('Top hit metric', function () {
         val: sortOrder
       };
       params.aggregate = {
-        val: aggregate
+        value: aggregate
       };
       params.size = size;
       const vis = new Vis(indexPattern, {

src/legacy/ui/public/agg_types/buckets/_inline_comp_wrapper.js

@@ -21,7 +21,7 @@ import React from 'react';
 
 const wrapWithInlineComp = Component => props => (
   <div className={`visEditorAggParam--half visEditorAggParam--half-${props.aggParam.name}`}>
-    <Component {...props} />
+    <Component {...props} wrappedWithInlineComp={true}/>
   </div>);
 
 export { wrapWithInlineComp };

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

@@ -30,6 +30,7 @@ function OrderParamEditor({
   setValue,
   setValidity,
   setTouched,
+  wrappedWithInlineComp,
 }: AggParamEditorProps<SelectValueProp> & SelectParamEditorProps) {
   const label = i18n.translate('common.ui.aggTypes.orderLabel', {
     defaultMessage: 'Order',
@@ -48,7 +49,7 @@ function OrderParamEditor({
       label={label}
       fullWidth={true}
       isInvalid={showValidation ? !isValid : false}
-      className="visEditorSidebar__aggParamFormRow"
+      className={wrappedWithInlineComp ? undefined : 'visEditorSidebar__aggParamFormRow'}
     >
       <EuiSelect
         options={aggParam.options.raw}

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

@@ -21,18 +21,27 @@ import React, { useEffect } from 'react';
 import { isUndefined } from 'lodash';
 import { AggParamEditorProps } from 'ui/vis/editors/default';
 import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+interface SizeParamEditorProps extends AggParamEditorProps<number | ''> {
+  iconTip?: React.ReactNode;
+}
 
 function SizeParamEditor({
+  iconTip,
   value,
   setValue,
   showValidation,
   setValidity,
   setTouched,
-}: AggParamEditorProps<number | ''>) {
-  const label = i18n.translate('common.ui.aggTypes.sizeLabel', {
-    defaultMessage: 'Size',
-  });
+  wrappedWithInlineComp,
+}: SizeParamEditorProps) {
+  const label = (
+    <>
+      <FormattedMessage id="common.ui.aggTypes.sizeLabel" defaultMessage="Size" />
+      {iconTip}
+    </>
+  );
   const isValid = Number(value) > 0;
 
   useEffect(
@@ -47,7 +56,7 @@ function SizeParamEditor({
       label={label}
       fullWidth={true}
       isInvalid={showValidation ? !isValid : false}
-      className="visEditorSidebar__aggParamFormRow"
+      className={wrappedWithInlineComp ? undefined : 'visEditorSidebar__aggParamFormRow'}
     >
       <EuiFieldNumber
         value={isUndefined(value) ? '' : value}

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

@@ -0,0 +1,129 @@
+/*
+ * 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 React, { useEffect, useRef } from 'react';
+import { EuiFormRow, EuiIconTip, EuiSelect } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { AggParamEditorProps } from 'ui/vis/editors/default';
+import { SelectValueProp, SelectParamEditorProps } from '../param_types/select';
+
+interface AggregateValueProp extends SelectValueProp {
+  isCompatibleType(filedType: string): boolean;
+  isCompatibleVis(visName: string): boolean;
+}
+
+function TopAggregateParamEditor({
+  agg,
+  aggParam,
+  value,
+  visName,
+  showValidation,
+  setValue,
+  setValidity,
+  setTouched,
+  wrappedWithInlineComp,
+}: AggParamEditorProps<AggregateValueProp> & SelectParamEditorProps<AggregateValueProp>) {
+  const isValid = !!value;
+  const isFirstRun = useRef(true);
+  const fieldType = agg.params.field && agg.params.field.type;
+  const emptyValue = { text: '', value: 'EMPTY_VALUE', disabled: true, hidden: true };
+  const filteredOptions = aggParam.options.raw
+    .filter(
+      option => fieldType && option.isCompatibleType(fieldType) && option.isCompatibleVis(visName)
+    )
+    .map(({ text, value: val }) => ({ text, value: val }))
+    .sort((a, b) => a.text.toLowerCase().localeCompare(b.text.toLowerCase()));
+  const options = [emptyValue, ...filteredOptions];
+
+  const iconTipContent = filteredOptions.length
+    ? i18n.translate('common.ui.aggTypes.aggregateWithTooltip', {
+        defaultMessage:
+          'Choose a strategy for combining multiple hits or a multi-valued field into a single metric',
+      })
+    : i18n.translate('common.ui.aggTypes.aggregateWith.noAggsErrorTooltip', {
+        defaultMessage: 'Chosen field has no compatible aggregations',
+      });
+
+  const label = (
+    <>
+      <FormattedMessage
+        id="common.ui.aggTypes.aggregateWithLabel"
+        defaultMessage="Aggregate with"
+      />{' '}
+      <EuiIconTip
+        position="right"
+        content={iconTipContent}
+        type={filteredOptions.length ? 'questionInCircle' : 'alert'}
+      />
+    </>
+  );
+
+  useEffect(
+    () => {
+      setValidity(isValid);
+    },
+    [isValid]
+  );
+
+  useEffect(
+    () => {
+      if (isFirstRun.current) {
+        isFirstRun.current = false;
+        return;
+      }
+
+      if (filteredOptions.length === 1) {
+        setValue(aggParam.options.byValue[filteredOptions[0].value]);
+      } else if (value) {
+        setValue();
+      }
+    },
+    [fieldType, visName]
+  );
+
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (event.target.value === emptyValue.value) {
+      setValue();
+    } else {
+      setValue(aggParam.options.byValue[event.target.value]);
+    }
+  };
+
+  return (
+    <EuiFormRow
+      label={label}
+      fullWidth={true}
+      isInvalid={showValidation ? !isValid : false}
+      className={wrappedWithInlineComp ? undefined : 'visEditorSidebar__aggParamFormRow'}
+    >
+      <EuiSelect
+        options={options}
+        value={value ? value.value : emptyValue.value}
+        onChange={handleChange}
+        fullWidth={true}
+        isInvalid={showValidation ? !isValid : false}
+        disabled={!filteredOptions.length}
+        onBlur={setTouched}
+      />
+    </EuiFormRow>
+  );
+}
+
+export { TopAggregateParamEditor };

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

@@ -0,0 +1,44 @@
+/*
+ * 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 React from 'react';
+import { AggParamEditorProps } from 'ui/vis/editors/default';
+import { EuiIconTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { SizeParamEditor } from './size';
+
+function TopSizeParamEditor(props: AggParamEditorProps<number | ''>) {
+  const iconTip = (
+    <>
+      {' '}
+      <EuiIconTip
+        position="right"
+        content={i18n.translate('common.ui.aggTypes.sizeTooltip', {
+          defaultMessage:
+            "Request top-K hits. Multiple hits will be combined via 'aggregate with'.",
+        })}
+        type="questionInCircle"
+      />
+    </>
+  );
+
+  return <SizeParamEditor {...props} iconTip={iconTip} />;
+}
+
+export { TopSizeParamEditor };