[Canvas] Added formatnumber and formatdate UIs to sidebar (#43059)

* Added formatnumber and formatdate transform UIs

* Added rounddate transform

* Changed default custom format

* Changed to UTC date

* Fixed ts error

* Fixed help text

* Added type def for arguments

* Added types for tranforms

* Added snapshots

* Fixed prop

x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/formatdate.ts

@@ -8,7 +8,7 @@ import moment from 'moment';
 import { ExpressionFunction } from 'src/legacy/core_plugins/interpreter/public';
 import { getFunctionHelp } from '../../strings';
 
-interface Arguments {
+export interface Arguments {
   format: string;
 }
 

x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/formatnumber.ts

@@ -8,7 +8,7 @@ import numeral from '@elastic/numeral';
 import { ExpressionFunction } from 'src/legacy/core_plugins/interpreter/public';
 import { getFunctionHelp } from '../../strings';
 
-interface Arguments {
+export interface Arguments {
   format: string;
 }
 

x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/rounddate.ts

@@ -8,7 +8,7 @@ import moment from 'moment';
 import { ExpressionFunction } from 'src/legacy/core_plugins/interpreter/public';
 import { getFunctionHelp } from '../../strings';
 
-interface Arguments {
+export interface Arguments {
   format: string;
 }
 

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/date_format/__examples__/date_format.examples.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { DateFormatArgInput } from '../date_format';
+
+const dateFormats = [
+  { value: 'l', text: 'Shorthand' },
+  { value: 'x', text: 'Unix' },
+  { value: 'LLL', text: 'Longhand' },
+];
+
+storiesOf('arguments/DateFormat', module)
+  .add('with no format', () => (
+    <DateFormatArgInput
+      dateFormats={dateFormats}
+      onValueChange={action('onValueChange')}
+      argValue=""
+      argId="DateFormatExample1"
+      renderError={action('renderError')}
+    />
+  ))
+  .add('with preset format', () => (
+    <DateFormatArgInput
+      dateFormats={dateFormats}
+      onValueChange={action('onValueChange')}
+      argValue="LLL"
+      argId="DateFormatExample2"
+      renderError={action('renderError')}
+    />
+  ))
+  .add('with custom format', () => (
+    <DateFormatArgInput
+      dateFormats={dateFormats}
+      onValueChange={action('onValueChange')}
+      argValue="MM/DD/YYYY"
+      argId="DateFormatExample3"
+      renderError={action('renderError')}
+    />
+  ));

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/date_format/date_format.tsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent } from 'react';
+import PropTypes from 'prop-types';
+import { FormatSelect } from '../../../../public/components/format_select/format_select';
+import { ArgumentProps } from '../../../../types/arguments';
+
+interface DateFormatOption {
+  /** A MomentJS format string */
+  value: string;
+  /** The name to display for the format */
+  text: string;
+}
+
+export interface Props extends ArgumentProps {
+  /** An array of number formats options */
+  dateFormats: DateFormatOption[];
+  /** The handler to invoke when value changes */
+  onValueChange: (value: string) => void;
+  /** The value of the argument */
+  argValue: string;
+  /** The ID for the argument */
+  argId: string;
+}
+
+export const DateFormatArgInput: FunctionComponent<Props> = ({
+  dateFormats,
+  onValueChange,
+  argValue,
+  argId,
+}) => (
+  <FormatSelect
+    argId={argId}
+    argValue={argValue}
+    formatOptions={dateFormats}
+    onValueChange={onValueChange}
+    defaultCustomFormat="M/D/YY h:ma"
+  />
+);
+
+DateFormatArgInput.propTypes = {
+  dateFormats: PropTypes.arrayOf(
+    PropTypes.shape({ value: PropTypes.string, text: PropTypes.string })
+  ).isRequired,
+  onValueChange: PropTypes.func.isRequired,
+  argValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]).isRequired,
+  argId: PropTypes.string.isRequired,
+};

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/date_format/index.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { compose, withProps } from 'recompose';
+import moment from 'moment';
+import { DateFormatArgInput as Component, Props as ComponentProps } from './date_format';
+import { AdvancedSettings } from '../../../../public/lib/kibana_advanced_settings';
+// @ts-ignore untyped local lib
+import { templateFromReactComponent } from '../../../../public/lib/template_from_react_component';
+import { ArgumentFactory } from '../../../../types/arguments';
+
+const formatMap = {
+  DEFAULT: AdvancedSettings.get('dateFormat'),
+  NANOS: AdvancedSettings.get('dateNanosFormat'),
+  ISO8601: '',
+  LOCAL_LONG: 'LLLL',
+  LOCAL_SHORT: 'LLL',
+  LOCAL_DATE: 'l',
+  LOCAL_TIME_WITH_SECONDS: 'LTS',
+};
+
+const now = moment();
+
+const dateFormats = Object.values(formatMap).map(format => ({
+  value: format,
+  text: moment.utc(now).format(format),
+}));
+
+export const DateFormatArgInput = compose<ComponentProps, null>(withProps({ dateFormats }))(
+  Component
+);
+
+export const dateFormat: ArgumentFactory<ComponentProps> = () => ({
+  name: 'dateFormat',
+  displayName: 'Date Format',
+  help: 'Select or enter a MomentJS format',
+  simpleTemplate: templateFromReactComponent(DateFormatArgInput),
+});

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/index.js

@@ -6,6 +6,7 @@
 
 import { axisConfig } from './axis_config';
 import { datacolumn } from './datacolumn';
+import { dateFormat } from './date_format';
 import { filterGroup } from './filter_group';
 import { imageUpload } from './image_upload';
 import { number } from './number';
@@ -22,6 +23,7 @@ import { toggle } from './toggle';
 export const args = [
   axisConfig,
   datacolumn,
+  dateFormat,
   filterGroup,
   imageUpload,
   number,