[Vis: Default editor] EUIficate order and size controls (#35134) (#36005

)

* EUIficate order and size controls

src/legacy/ui/public/agg_types/__tests__/agg_params.js

@@ -22,6 +22,7 @@ import { AggParams } from '../agg_params';
 import { BaseParamType } from '../param_types/base';
 import { FieldParamType } from '../param_types/field';
 import { OptionedParamType } from '../param_types/optioned';
+import { SelectParamType } from '../param_types/select';
 
 describe('AggParams class', function () {
 
@@ -63,6 +64,19 @@ describe('AggParams class', function () {
       expect(aggParams[0]).to.be.a(OptionedParamType);
     });
 
+    it('Uses the SelectParamType class for params of type "select"', function () {
+      const params = [
+        {
+          name: 'order',
+          type: 'select'
+        }
+      ];
+      const aggParams = new AggParams(params);
+
+      expect(aggParams).to.have.length(params.length);
+      expect(aggParams[0]).to.be.a(SelectParamType);
+    });
+
     it('Always converts the params to a BaseParamType', function () {
       const params = [
         {

src/legacy/ui/public/agg_types/agg_params.js

@@ -20,14 +20,17 @@
 import { IndexedArray } from '../indexed_array';
 import { FieldParamType } from './param_types/field';
 import { OptionedParamType } from './param_types/optioned';
+import { SelectParamType } from './param_types/select';
 import { StringParamType } from './param_types/string';
 import { JsonParamType } from './param_types/json';
 import { BaseParamType } from './param_types/base';
 import { createLegacyClass } from '../utils/legacy_class';
 
 const paramTypeMap = {
   field: FieldParamType,
+  // todo: remove select type and update optioned type after EUIfication of all components;
   optioned: (OptionedParamType),
+  select: SelectParamType,
   string: (StringParamType),
   json: (JsonParamType),
   _default: (BaseParamType)

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

@@ -0,0 +1,27 @@
+/*
+ * 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';
+
+const wrapWithInlineComp = Component => props => (
+  <div className={`visEditorAggParam--half visEditorAggParam--half-${props.aggParam.name}`}>
+    <Component {...props} />
+  </div>);
+
+export { wrapWithInlineComp };

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

@@ -17,10 +17,10 @@
  * under the License.
  */
 
+import { i18n } from '@kbn/i18n';
+import { SizeParamEditor } from '../controls/size';
 import { BucketAggType } from './_bucket_agg_type';
 import { createFilterTerms } from './create_filter/terms';
-import orderAndSizeTemplate from '../controls/order_and_size.html';
-import { i18n } from '@kbn/i18n';
 import { isStringType, migrateIncludeExcludeFormat } from './migrate_include_exclude_format';
 
 export const significantTermsBucketAgg = new BucketAggType({
@@ -47,7 +47,8 @@ export const significantTermsBucketAgg = new BucketAggType({
     },
     {
       name: 'size',
-      editor: orderAndSizeTemplate,
+      editorComponent: SizeParamEditor,
+      default: '',
     },
     {
       name: 'exclude',

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

@@ -24,7 +24,9 @@ import { AggConfig } from '../../vis/agg_config';
 import { Schemas } from '../../vis/editors/default/schemas';
 import { createFilterTerms } from './create_filter/terms';
 import orderAggTemplate from '../controls/order_agg.html';
-import orderAndSizeTemplate from '../controls/order_and_size.html';
+import { OrderParamEditor } from '../controls/order';
+import { SizeParamEditor } from '../controls/size';
+import { wrapWithInlineComp } from './_inline_comp_wrapper';
 import { i18n } from '@kbn/i18n';
 
 import { getRequestInspectorStats, getResponseInspectorStats } from '../../courier/utils/courier_inspector_utils';
@@ -57,7 +59,7 @@ export const termsBucketAgg = new BucketAggType({
   }),
   makeLabel: function (agg) {
     const params = agg.params;
-    return agg.getFieldDisplayName() + ': ' + params.order.display;
+    return agg.getFieldDisplayName() + ': ' + params.order.text;
   },
   getFormat: function (bucket) {
     return {
@@ -118,10 +120,6 @@ export const termsBucketAgg = new BucketAggType({
       type: 'field',
       filterFieldTypes: ['number', 'boolean', 'date', 'ip',  'string']
     },
-    {
-      name: 'size',
-      default: 5
-    },
     {
       name: 'orderAgg',
       type: AggConfig,
@@ -204,7 +202,7 @@ export const termsBucketAgg = new BucketAggType({
         }
       },
       write: function (agg, output, aggs) {
-        const dir = agg.params.order.val;
+        const dir = agg.params.order.value;
         const order = output.params.order = {};
 
         let orderAgg = agg.params.orderAgg || aggs.getResponseAggById(agg.params.orderBy);
@@ -241,25 +239,30 @@ export const termsBucketAgg = new BucketAggType({
     },
     {
       name: 'order',
-      type: 'optioned',
+      type: 'select',
       default: 'desc',
-      editor: orderAndSizeTemplate,
+      editorComponent: wrapWithInlineComp(OrderParamEditor),
       options: [
         {
-          display: i18n.translate('common.ui.aggTypes.buckets.terms.orderDescendingTitle', {
+          text: i18n.translate('common.ui.aggTypes.buckets.terms.orderDescendingTitle', {
             defaultMessage: 'Descending',
           }),
-          val: 'desc'
+          value: 'desc'
         },
         {
-          display: i18n.translate('common.ui.aggTypes.buckets.terms.orderAscendingTitle', {
+          text: i18n.translate('common.ui.aggTypes.buckets.terms.orderAscendingTitle', {
             defaultMessage: 'Ascending',
           }),
-          val: 'asc'
+          value: 'asc'
         }
       ],
       write: _.noop // prevent default write, it's handled by orderAgg
     },
+    {
+      name: 'size',
+      editorComponent: wrapWithInlineComp(SizeParamEditor),
+      default: 5
+    },
     {
       name: 'orderBy',
       write: _.noop // prevent default write, it's handled by orderAgg

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

@@ -0,0 +1,65 @@
+/*
+ * 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 } from 'react';
+import { EuiFormRow, EuiSelect } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { AggParamEditorProps } from 'ui/vis/editors/default';
+import { SelectValueProp, SelectParamEditorProps } from '../param_types/select';
+
+function OrderParamEditor({
+  aggParam,
+  value,
+  showValidation,
+  setValue,
+  setValidity,
+  setTouched,
+}: AggParamEditorProps<SelectValueProp> & SelectParamEditorProps) {
+  const label = i18n.translate('common.ui.aggTypes.orderLabel', {
+    defaultMessage: 'Order',
+  });
+  const isValid = !!value;
+
+  useEffect(
+    () => {
+      setValidity(isValid);
+    },
+    [isValid]
+  );
+
+  return (
+    <EuiFormRow
+      label={label}
+      fullWidth={true}
+      isInvalid={showValidation ? !isValid : false}
+      className="visEditorSidebar__aggParamFormRow"
+    >
+      <EuiSelect
+        options={aggParam.options.raw}
+        value={value.value}
+        onChange={ev => setValue(aggParam.options.byValue[ev.target.value])}
+        fullWidth={true}
+        isInvalid={showValidation ? !isValid : false}
+        onBlur={setTouched}
+      />
+    </EuiFormRow>
+  );
+}
+
+export { OrderParamEditor };

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

@@ -0,0 +1,65 @@
+/*
+ * 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 } from 'react';
+import { isUndefined } from 'lodash';
+import { AggParamEditorProps } from 'ui/vis/editors/default';
+import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+function SizeParamEditor({
+  value,
+  setValue,
+  showValidation,
+  setValidity,
+  setTouched,
+}: AggParamEditorProps<number | ''>) {
+  const label = i18n.translate('common.ui.aggTypes.sizeLabel', {
+    defaultMessage: 'Size',
+  });
+  const isValid = Number(value) > 0;
+
+  useEffect(
+    () => {
+      setValidity(isValid);
+    },
+    [isValid]
+  );
+
+  return (
+    <EuiFormRow
+      label={label}
+      fullWidth={true}
+      isInvalid={showValidation ? !isValid : false}
+      className="visEditorSidebar__aggParamFormRow"
+    >
+      <EuiFieldNumber
+        value={isUndefined(value) ? '' : value}
+        onChange={ev => setValue(ev.target.value === '' ? '' : parseFloat(ev.target.value))}
+        fullWidth={true}
+        isInvalid={showValidation ? !isValid : false}
+        onBlur={setTouched}
+        min={1}
+        data-test-subj="sizeParamEditor"
+      />
+    </EuiFormRow>
+  );
+}
+
+export { SizeParamEditor };

src/legacy/ui/public/agg_types/param_types/select.d.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 { IndexedArray } from '../../indexed_array';
+
+interface SelectValueProp {
+  value: string;
+  text: string;
+}
+
+interface SelectOptions extends IndexedArray<SelectValueProp> {
+  byValue: {
+    [key: string]: SelectValueProp;
+  };
+}
+
+interface SelectParamEditorProps {
+  aggParam: {
+    options: SelectOptions;
+  };
+}
+
+export { SelectValueProp, SelectParamEditorProps };