[Vis: Default editor] EUIficate IP Ranges (#36896)

* Create IpRangeType and IpRanges controls

* Add validation

* Refactoring

* Add behavior when discarding changes

* Refactoring: create common input list

* Remove old template

* Move add btn to input_list, add placeholder

* Remove unused directives

* Remove unused translations

* Refactoring

* Use EuiButtonGroup instead of toggle button

* Update options ids, add aria-labels

* Remove unused translations

* Update mask model, update TS, update aria labels

* Add validation for CIRD mask

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

@@ -18,11 +18,10 @@
  */
 
 import _ from 'lodash';
-import '../directives/validate_ip';
-import '../directives/validate_cidr_mask';
 import { BucketAggType } from './_bucket_agg_type';
 import { createFilterIpRange } from './create_filter/ip_range';
-import ipRangesTemplate from '../controls/ip_ranges.html';
+import { IpRangeTypeParamEditor } from '../controls/ip_range_type';
+import { IpRangesParamEditor } from '../controls/ip_ranges';
 import { i18n } from '@kbn/i18n';
 
 export const ipRangeBucketAgg = new BucketAggType({
@@ -52,6 +51,7 @@ export const ipRangeBucketAgg = new BucketAggType({
       filterFieldTypes: 'ip'
     }, {
       name: 'ipRangeType',
+      editorComponent: IpRangeTypeParamEditor,
       default: 'fromTo',
       write: _.noop
     }, {
@@ -66,7 +66,7 @@ export const ipRangeBucketAgg = new BucketAggType({
           { mask: '128.0.0.0/2' }
         ]
       },
-      editor: ipRangesTemplate,
+      editorComponent: IpRangesParamEditor,
       write: function (aggConfig, output) {
         const ipRangeType = aggConfig.params.ipRangeType;
         let ranges = aggConfig.params.ranges[ipRangeType];

src/legacy/ui/public/agg_types/controls/components/from_to_list.tsx

@@ -0,0 +1,124 @@
+/*
+ * 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 { EuiFieldText, EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import Ipv4Address from '../../../utils/ipv4_address';
+import { InputList, InputListConfig, InputModel, InputObject, InputItem } from './input_list';
+
+const EMPTY_STRING = '';
+
+export interface FromToObject extends InputObject {
+  from?: string;
+  to?: string;
+}
+
+type FromToModel = InputModel & {
+  from: InputItem;
+  to: InputItem;
+};
+
+interface FromToListProps {
+  list: FromToObject[];
+  showValidation: boolean;
+  onBlur(): void;
+  onChange(list: FromToObject[]): void;
+  setValidity(isValid: boolean): void;
+}
+
+function FromToList({ showValidation, onBlur, ...rest }: FromToListProps) {
+  const fromToListConfig: InputListConfig = {
+    defaultValue: {
+      from: { value: '0.0.0.0', model: '0.0.0.0', isInvalid: false },
+      to: { value: '255.255.255.255', model: '255.255.255.255', isInvalid: false },
+    },
+    defaultEmptyValue: {
+      from: { value: EMPTY_STRING, model: EMPTY_STRING, isInvalid: false },
+      to: { value: EMPTY_STRING, model: EMPTY_STRING, isInvalid: false },
+    },
+    validateClass: Ipv4Address,
+    getModelValue: (item: FromToObject) => ({
+      from: {
+        value: item.from || EMPTY_STRING,
+        model: item.from || EMPTY_STRING,
+        isInvalid: false,
+      },
+      to: { value: item.to || EMPTY_STRING, model: item.to || EMPTY_STRING, isInvalid: false },
+    }),
+    getRemoveBtnAriaLabel: (item: FromToModel) =>
+      i18n.translate('common.ui.aggTypes.ipRanges.removeRangeAriaLabel', {
+        defaultMessage: 'Remove the range of {from} to {to}',
+        values: { from: item.from.value || '*', to: item.to.value || '*' },
+      }),
+    onChangeFn: ({ from, to }: FromToModel) => {
+      const result: FromToObject = {};
+      if (from.model) {
+        result.from = from.model;
+      }
+      if (to.model) {
+        result.to = to.model;
+      }
+      return result;
+    },
+    hasInvalidValuesFn: ({ from, to }: FromToModel) => from.isInvalid || to.isInvalid,
+    renderInputRow: (item: FromToModel, index, onChangeValue) => (
+      <>
+        <EuiFlexItem>
+          <EuiFieldText
+            aria-label={i18n.translate('common.ui.aggTypes.ipRanges.ipRangeFromAriaLabel', {
+              defaultMessage: 'IP range from: {value}',
+              values: { value: item.from.value || '*' },
+            })}
+            isInvalid={showValidation ? item.from.isInvalid : false}
+            placeholder="*"
+            onChange={ev => {
+              onChangeValue(index, ev.target.value, 'from');
+            }}
+            value={item.from.value}
+            onBlur={onBlur}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFieldText
+            aria-label={i18n.translate('common.ui.aggTypes.ipRanges.ipRangeToAriaLabel', {
+              defaultMessage: 'IP range to: {value}',
+              values: { value: item.to.value || '*' },
+            })}
+            isInvalid={showValidation ? item.to.isInvalid : false}
+            placeholder="*"
+            onChange={ev => {
+              onChangeValue(index, ev.target.value, 'to');
+            }}
+            value={item.to.value}
+            onBlur={onBlur}
+          />
+        </EuiFlexItem>
+      </>
+    ),
+    validateModel: (validateFn, object: FromToObject, model: FromToModel) => {
+      validateFn(object.from, model.from);
+      validateFn(object.to, model.to);
+    },
+  };
+
+  return <InputList config={fromToListConfig} {...rest} />;
+}
+
+export { FromToList };