Add custom formatting for Date Nanos Format (#42445) (#43012)

* Add custom formatting for Date Nanos format

* Add date nanoseconds samples

* Add jest test for DateNanosFormatEditor

src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/__snapshots__/date_nanos.test.js.snap

@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DateFormatEditor should render normally 1`] = `
+<Fragment>
+  <EuiFormRow
+    describedByIds={Array []}
+    error={null}
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <span>
+        <EuiLink
+          color="primary"
+          href="https://momentjs.com/"
+          target="_blank"
+          type="button"
+        >
+          <FormattedMessage
+            defaultMessage="Documentation"
+            id="common.ui.fieldEditor.date.documentationLabel"
+            values={Object {}}
+          />
+           
+          <EuiIcon
+            type="link"
+          />
+        </EuiLink>
+      </span>
+    }
+    isInvalid={false}
+    label={
+      <FormattedMessage
+        defaultMessage="Moment.js format pattern (Default: {defaultPattern})"
+        id="common.ui.fieldEditor.date.momentLabel"
+        values={
+          Object {
+            "defaultPattern": <EuiCode>
+              MMM D, YYYY @ HH:mm:ss.SSSSSSSSS
+            </EuiCode>,
+          }
+        }
+      />
+    }
+    labelType="label"
+  >
+    <EuiFieldText
+      compressed={false}
+      data-test-subj="dateEditorPattern"
+      fullWidth={false}
+      isInvalid={false}
+      isLoading={false}
+      onChange={[Function]}
+      placeholder="MMM D, YYYY @ HH:mm:ss.SSSSSSSSS"
+    />
+  </EuiFormRow>
+  <InjectIntl(FormatEditorSamplesComponent)
+    samples={
+      Array [
+        Object {
+          "input": "2015-01-01T12:10:30.123456789Z",
+          "output": "converted date for 2015-01-01T12:10:30.123456789Z",
+        },
+        Object {
+          "input": "2019-05-08T06:55:21.567891234Z",
+          "output": "converted date for 2019-05-08T06:55:21.567891234Z",
+        },
+        Object {
+          "input": "2019-08-06T17:22:30.987654321Z",
+          "output": "converted date for 2019-08-06T17:22:30.987654321Z",
+        },
+      ]
+    }
+  />
+</Fragment>
+`;

src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.js

@@ -0,0 +1,96 @@
+/*
+ * 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, { Fragment } from 'react';
+
+import {
+  EuiCode,
+  EuiFieldText,
+  EuiFormRow,
+  EuiIcon,
+  EuiLink,
+} from '@elastic/eui';
+
+import {
+  DefaultFormatEditor
+} from '../default';
+
+import {
+  FormatEditorSamples
+} from '../../samples';
+
+import { FormattedMessage } from '@kbn/i18n/react';
+
+export class DateNanosFormatEditor extends DefaultFormatEditor {
+  static formatId = 'date_nanos';
+
+  constructor(props) {
+    super(props);
+    this.state.sampleInputs = [
+      '2015-01-01T12:10:30.123456789Z',
+      '2019-05-08T06:55:21.567891234Z',
+      '2019-08-06T17:22:30.987654321Z'
+    ];
+  }
+
+  render() {
+    const { format, formatParams } = this.props;
+    const { error, samples } = this.state;
+    const defaultPattern = format.getParamDefaults().pattern;
+
+    return (
+      <Fragment>
+        <EuiFormRow
+          label={
+            <FormattedMessage
+              id="common.ui.fieldEditor.date.momentLabel"
+              defaultMessage="Moment.js format pattern (Default: {defaultPattern})"
+              values={{
+                defaultPattern: <EuiCode>{defaultPattern}</EuiCode>
+              }}
+            />
+          }
+          isInvalid={!!error}
+          error={error}
+          helpText={
+            <span>
+              <EuiLink target="_blank" href="https://momentjs.com/">
+                <FormattedMessage id="common.ui.fieldEditor.date.documentationLabel" defaultMessage="Documentation" />&nbsp;
+                <EuiIcon type="link" />
+              </EuiLink>
+            </span>
+          }
+        >
+          <EuiFieldText
+            data-test-subj="dateEditorPattern"
+            value={formatParams.pattern}
+            placeholder={defaultPattern}
+            onChange={(e) => {
+              this.onChange({ pattern: e.target.value });
+            }}
+            isInvalid={!!error}
+          />
+        </EuiFormRow>
+        <FormatEditorSamples
+          samples={samples}
+        />
+      </Fragment>
+    );
+  }
+}

src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.test.js

@@ -0,0 +1,54 @@
+/*
+ * 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 { shallow } from 'enzyme';
+
+import { DateNanosFormatEditor } from './date_nanos';
+
+const fieldType = 'date_nanos';
+const format = {
+  getConverterFor: jest.fn().mockImplementation(() => (input) => `converted date for ${input}`),
+  getParamDefaults: jest.fn().mockImplementation(() => {
+    return { pattern: 'MMM D, YYYY @ HH:mm:ss.SSSSSSSSS' };
+  }),
+};
+const formatParams = {};
+const onChange = jest.fn();
+const onError = jest.fn();
+
+describe('DateFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(DateNanosFormatEditor.formatId).toEqual('date_nanos');
+  });
+
+  it('should render normally', async () => {
+    const component = shallow(
+      <DateNanosFormatEditor
+        fieldType={fieldType}
+        format={format}
+        formatParams={formatParams}
+        onChange={onChange}
+        onError={onError}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+});

src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/index.js

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export { DateNanosFormatEditor } from './date_nanos';

src/legacy/ui/public/field_editor/components/field_format_editor/register.js

@@ -21,6 +21,7 @@ import { RegistryFieldFormatEditorsProvider } from 'ui/registry/field_format_edi
 import { BytesFormatEditor } from './editors/bytes';
 import { ColorFormatEditor } from './editors/color';
 import { DateFormatEditor } from './editors/date';
+import { DateNanosFormatEditor } from './editors/date_nanos';
 import { DurationFormatEditor } from './editors/duration';
 import { NumberFormatEditor } from './editors/number';
 import { PercentFormatEditor } from './editors/percent';
@@ -32,6 +33,7 @@ import { UrlFormatEditor } from './editors/url/url';
 RegistryFieldFormatEditorsProvider.register(() => BytesFormatEditor);
 RegistryFieldFormatEditorsProvider.register(() => ColorFormatEditor);
 RegistryFieldFormatEditorsProvider.register(() => DateFormatEditor);
+RegistryFieldFormatEditorsProvider.register(() => DateNanosFormatEditor);
 RegistryFieldFormatEditorsProvider.register(() => DurationFormatEditor);
 RegistryFieldFormatEditorsProvider.register(() => NumberFormatEditor);
 RegistryFieldFormatEditorsProvider.register(() => PercentFormatEditor);