[Vis: Default editor] EUIficate date_ranges param editor (elastic#38647)

* EUIficate date_ranges param editor

* Add unit tests

* Move link before the list

* Add validation

* Fix comments

# Conflicts:
#	src/legacy/ui/public/agg_types/controls/date_ranges.html

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

@@ -20,12 +20,10 @@ import { get } from 'lodash';
 import chrome from '../../chrome';
 import moment from 'moment-timezone';
 import { dateRange } from '../../utils/date_range';
-import '../directives/validate_date_math';
-import '../directives/documentation_href';
 import { BucketAggType } from './_bucket_agg_type';
 import { createFilterDateRange } from './create_filter/date_range';
 import { fieldFormats } from '../../registry/field_formats';
-import dateRangesTemplate from '../controls/date_ranges.html';
+import { DateRangesParamEditor } from '../controls/date_ranges';
 import { i18n } from '@kbn/i18n';
 
 const config = chrome.getUiSettingsClient();
@@ -61,7 +59,7 @@ export const dateRangeBucketAgg = new BucketAggType({
       from: 'now-1w/w',
       to: 'now'
     }],
-    editor: dateRangesTemplate
+    editorComponent: DateRangesParamEditor,
   }, {
     name: 'time_zone',
     default: undefined,

src/legacy/ui/public/agg_types/controls/date_ranges.test.tsx

@@ -0,0 +1,92 @@
+/*
+ * 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 { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { DateRangesParamEditor } from './date_ranges';
+
+jest.mock('../../documentation_links', () => ({
+  getDocLink: jest.fn(),
+}));
+
+describe('DateRangesParamEditor component', () => {
+  let setValue: jest.Mock;
+  let setValidity: jest.Mock;
+  let setTouched: jest.Mock;
+  let defaultProps: any;
+
+  beforeEach(() => {
+    setValue = jest.fn();
+    setValidity = jest.fn();
+    setTouched = jest.fn();
+
+    defaultProps = {
+      agg: {},
+      aggParam: {
+        name: 'ranges',
+      },
+      value: [],
+      editorConfig: {},
+      showValidation: false,
+      setValue,
+      setValidity,
+      setTouched,
+    };
+  });
+
+  it('should add default range if there is an empty ininitial value', () => {
+    mountWithIntl(<DateRangesParamEditor {...defaultProps} />);
+
+    expect(setValue).toHaveBeenCalledWith([{}]);
+  });
+
+  it('should validate range values with date math', function() {
+    const component = mountWithIntl(<DateRangesParamEditor {...defaultProps} />);
+
+    // should allow empty values
+    expect(setValidity).toHaveBeenNthCalledWith(1, true);
+
+    component.setProps({ value: [{ from: 'hello, world' }] });
+    expect(setValidity).toHaveBeenNthCalledWith(2, false);
+
+    component.setProps({ value: [{ from: 'now' }] });
+    expect(setValidity).toHaveBeenNthCalledWith(3, true);
+
+    component.setProps({ value: [{ from: 'now', to: 'Hello, Dan! =)' }] });
+    expect(setValidity).toHaveBeenNthCalledWith(4, false);
+
+    component.setProps({ value: [{ from: '2012-02-28' }] });
+    expect(setValidity).toHaveBeenNthCalledWith(5, true);
+
+    component.setProps({ value: [{ from: 'now+-5w', to: 'now-3d' }] });
+    expect(setValidity).toHaveBeenNthCalledWith(6, false);
+
+    component.setProps({ value: [{ from: 'now-3M/M' }] });
+    expect(setValidity).toHaveBeenNthCalledWith(7, true);
+
+    component.setProps({ value: [{ from: '2012-02-31', to: 'now-3d' }] });
+    expect(setValidity).toHaveBeenNthCalledWith(8, false);
+
+    component.setProps({ value: [{ to: '2012-05-31||-3M/M' }] });
+    expect(setValidity).toHaveBeenNthCalledWith(9, true);
+
+    component.setProps({ value: [{ from: '5/5/2005+3d' }] });
+    expect(setValidity).toHaveBeenNthCalledWith(10, false);
+  });
+});