[Vis: Default editor] EUIficate top_sort param editor (elastic#36629)

* EUIficate top_sort param editor

* Set field if only one available

* Remove unused translations

* Fix functional tests

* Fix browser tests

* Rewrite functional test for combo_box field select

* Remove unused translations

* Update label

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

@@ -39,7 +39,7 @@ describe('Top hit metric', function () {
         params.field = field;
       }
       params.sortOrder = {
-        val: sortOrder
+        value: sortOrder
       };
       params.aggregate = {
         val: aggregate

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

@@ -30,16 +30,21 @@ import { FieldParamType } from '../param_types';
 
 const label = i18n.translate('common.ui.aggTypes.field.fieldLabel', { defaultMessage: 'Field' });
 
+interface FieldParamEditorProps extends AggParamEditorProps<FieldParamType> {
+  customLabel?: string;
+}
+
 function FieldParamEditor({
   agg,
   aggParam,
+  customLabel,
   indexedFields = [],
   showValidation,
   value,
   setTouched,
   setValidity,
   setValue,
-}: AggParamEditorProps<FieldParamType>) {
+}: FieldParamEditorProps) {
   const selectedOptions: ComboBoxGroupedOption[] = value
     ? [{ label: value.displayName, value }]
     : [];
@@ -79,9 +84,24 @@ function FieldParamEditor({
     [isValid]
   );
 
+  useEffect(() => {
+    // set field if only one available
+    if (indexedFields.length !== 1) {
+      return;
+    }
+
+    const options = indexedFields[0].options;
+
+    if (!options) {
+      setValue(indexedFields[0].value);
+    } else if (options.length === 1) {
+      setValue(options[0].value);
+    }
+  }, []);
+
   return (
     <EuiFormRow
-      label={label}
+      label={customLabel || label}
       isInvalid={showValidation ? !isValid : false}
       fullWidth={true}
       error={errors}

src/legacy/ui/public/agg_types/filters/sort_prefix_first.js → src/legacy/ui/public/agg_types/controls/top_sort_field.tsx

@@ -17,11 +17,18 @@
  * under the License.
  */
 
-import { uiModules } from '../../modules';
-import { sortPrefixFirst } from '../../utils/sort_prefix_first';
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { AggParamEditorProps } from '../../vis/editors/default';
+import { FieldParamType } from '../param_types';
+import { FieldParamEditor } from './field';
 
-uiModules
-  .get('kibana')
-  .filter('sortPrefixFirst', function () {
-    return sortPrefixFirst;
+function TopSortFieldParamEditor(props: AggParamEditorProps<FieldParamType>) {
+  const customLabel = i18n.translate('common.ui.aggTypes.sortOnLabel', {
+    defaultMessage: 'Sort on',
   });
+
+  return <FieldParamEditor {...props} customLabel={customLabel} />;
+}
+
+export { TopSortFieldParamEditor };

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

@@ -19,11 +19,9 @@
 
 import _ from 'lodash';
 import { MetricAggType } from './metric_agg_type';
-import '../directives/auto_select_if_only_one';
-import '../directives/scroll_bottom';
-import '../filters/sort_prefix_first';
-import topSortEditor from '../controls/top_sort.html';
 import aggregateAndSizeEditor from '../controls/top_aggregate_and_size.html';
+import { TopSortFieldParamEditor } from '../controls/top_sort_field';
+import { OrderParamEditor } from '../controls/order';
 import { aggTypeFieldFilters } from '../param_types/filter';
 import { i18n } from '@kbn/i18n';
 
@@ -57,7 +55,7 @@ export const topHitMetricAgg = new MetricAggType({
     const firstPrefixLabel = i18n.translate('common.ui.aggTypes.metrics.topHit.firstPrefixLabel', {
       defaultMessage: 'First'
     });
-    let prefix = aggConfig.params.sortOrder.val === 'desc' ? lastPrefixLabel : firstPrefixLabel;
+    let prefix = aggConfig.params.sortOrder.value === 'desc' ? lastPrefixLabel : firstPrefixLabel;
     if (aggConfig.params.size !== 1) {
       prefix += ` ${aggConfig.params.size}`;
     }
@@ -171,7 +169,7 @@ export const topHitMetricAgg = new MetricAggType({
     {
       name: 'sortField',
       type: 'field',
-      editor: null,
+      editorComponent: TopSortFieldParamEditor,
       filterFieldTypes: [ 'number', 'date', 'ip',  'string' ],
       default: function (agg) {
         return agg.getIndexPattern().timeFieldName;
@@ -180,21 +178,21 @@ export const topHitMetricAgg = new MetricAggType({
     },
     {
       name: 'sortOrder',
-      type: 'optioned',
+      type: 'select',
       default: 'desc',
-      editor: topSortEditor,
+      editorComponent: OrderParamEditor,
       options: [
         {
-          display: i18n.translate('common.ui.aggTypes.metrics.topHit.descendingLabel', {
+          text: i18n.translate('common.ui.aggTypes.metrics.topHit.descendingLabel', {
             defaultMessage: 'Descending'
           }),
-          val: 'desc'
+          value: 'desc'
         },
         {
-          display: i18n.translate('common.ui.aggTypes.metrics.topHit.ascendingLabel', {
+          text: i18n.translate('common.ui.aggTypes.metrics.topHit.ascendingLabel', {
             defaultMessage: 'Ascending'
           }),
-          val: 'asc'
+          value: 'asc'
         }
       ],
       write(agg, output) {
@@ -210,15 +208,15 @@ export const topHitMetricAgg = new MetricAggType({
                   lang: sortField.lang
                 },
                 type: sortField.type,
-                order: sortOrder.val
+                order: sortOrder.value
               }
             }
           ];
         } else {
           output.params.sort = [
             {
               [ sortField.name ]: {
-                order: sortOrder.val
+                order: sortOrder.value
               }
             }
           ];