[Canvas] i18n work for arg form and converting tooltip icon to typescript (#46863) (#47249)

* i18n work for arg form and converting tooltip icon to typescript (which in turn makes it i18n ready)

* Addressing feedback

x-pack/legacy/plugins/canvas/i18n/components.ts

@@ -41,6 +41,43 @@ export const ComponentStrings = {
         defaultMessage: 'Add argument',
       }),
   },
+  ArgFormAdvancedFailure: {
+    getApplyButtonLabel: () =>
+      i18n.translate('xpack.canvas.argFormAdvancedFailure.applyButtonLabel', {
+        defaultMessage: 'Apply',
+      }),
+    getRowErrorMessage: () =>
+      i18n.translate('xpack.canvas.argFormAdvancedFailure.rowErrorMessage', {
+        defaultMessage: 'Invalid Expression',
+      }),
+    getResetButtonLabel: () =>
+      i18n.translate('xpack.canvas.argFormAdvancedFailure.resetButtonLabel', {
+        defaultMessage: 'Reset',
+      }),
+  },
+  ArgFormArgSimpleForm: {
+    getRemoveAriaLabel: () =>
+      i18n.translate('xpack.canvas.argFormArgSimpleForm.removeAriaLabel', {
+        defaultMessage: 'Remove',
+      }),
+    getRequiredTooltip: () =>
+      i18n.translate('xpack.canvas.argFormArgSimpleForm.requiredTooltip', {
+        defaultMessage: 'This argument is required, you should specify a value.',
+      }),
+  },
+  ArgFormPendingArgValue: {
+    getLoadingMessage: () =>
+      i18n.translate('xpack.canvas.argFormPendingArgValue.loadingMessage', {
+        defaultMessage: 'Loading',
+      }),
+  },
+  ArgFormSimpleFailure: {
+    getFailureTooltip: () =>
+      i18n.translate('xpack.canvas.argFormSimpleFailure.failureTooltip', {
+        defaultMessage:
+          'The interface for this argument could not parse the value, so a fallback input is being used',
+      }),
+  },
   Asset: {
     getCopyAssetTooltip: () =>
       i18n.translate('xpack.canvas.asset.copyAssetTooltip', {

x-pack/legacy/plugins/canvas/public/components/arg_form/advanced_failure.js

@@ -11,6 +11,10 @@ import { EuiTextArea, EuiButton, EuiButtonEmpty, EuiFormRow, EuiSpacer } from '@
 import { fromExpression, toExpression } from '@kbn/interpreter/common';
 import { createStatefulPropHoc } from '../../components/enhance/stateful_prop';
 
+import { ComponentStrings } from '../../../i18n';
+
+const { ArgFormAdvancedFailure: strings } = ComponentStrings;
+
 export const AdvancedFailureComponent = props => {
   const {
     onValueChange,
@@ -40,7 +44,12 @@ export const AdvancedFailureComponent = props => {
 
   return (
     <div>
-      <EuiFormRow display="rowCompressed" id={argId} isInvalid={!valid} error="Invalid Expression">
+      <EuiFormRow
+        display="rowCompressed"
+        id={argId}
+        isInvalid={!valid}
+        error={strings.getRowErrorMessage()}
+      >
         <EuiTextArea
           id={argId}
           isInvalid={!valid}
@@ -53,11 +62,11 @@ export const AdvancedFailureComponent = props => {
       <EuiSpacer size="s" />
       <div>
         <EuiButton disabled={!valid} onClick={e => valueChange(e)} size="s" type="submit">
-          Apply
+          {strings.getApplyButtonLabel()}
         </EuiButton>
         {defaultValue && defaultValue.length && (
           <EuiButtonEmpty size="s" color="danger" onClick={confirmReset}>
-            Reset
+            {strings.getResetButtonLabel()}
           </EuiButtonEmpty>
         )}
       </div>

x-pack/legacy/plugins/canvas/public/components/arg_form/arg_simple_form.tsx

@@ -4,13 +4,29 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { ReactNode, MouseEventHandler } from 'react';
 import PropTypes from 'prop-types';
 import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { TooltipIcon } from '../tooltip_icon';
+import { TooltipIcon, IconType } from '../tooltip_icon';
+
+import { ComponentStrings } from '../../../i18n';
+
+const { ArgFormArgSimpleForm: strings } = ComponentStrings;
+
+interface Props {
+  children?: ReactNode;
+  required?: boolean;
+  valueMissing?: boolean;
+  onRemove: MouseEventHandler<HTMLAnchorElement>;
+}
 
 // This is what is being generated by render() from the Arg class. It is called in FunctionForm
-export const ArgSimpleForm = ({ children, required, valueMissing, onRemove }) => {
+export const ArgSimpleForm: React.FunctionComponent<Props> = ({
+  children,
+  required,
+  valueMissing,
+  onRemove,
+}) => {
   return (
     <EuiFlexGroup alignItems="center" gutterSize="s" className="canvasArg__form">
       <EuiFlexItem>{children}</EuiFlexItem>
@@ -18,8 +34,8 @@ export const ArgSimpleForm = ({ children, required, valueMissing, onRemove }) =>
         <EuiFlexItem grow={false}>
           <TooltipIcon
             position="left"
-            icon="error"
-            content="This argument is required, you should specify a value."
+            icon={IconType.error}
+            content={strings.getRequiredTooltip()}
           />
         </EuiFlexItem>
       )}
@@ -29,7 +45,7 @@ export const ArgSimpleForm = ({ children, required, valueMissing, onRemove }) =>
           color="danger"
           onClick={onRemove}
           iconType="trash"
-          aria-label="Remove"
+          aria-label={strings.getRemoveAriaLabel()}
           className="canvasArg__remove"
         />
       )}

x-pack/legacy/plugins/canvas/public/components/arg_form/pending_arg_value.js

@@ -6,9 +6,12 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { ComponentStrings } from '../../../i18n';
 import { Loading } from '../loading';
 import { ArgLabel } from './arg_label';
 
+const { ArgFormPendingArgValue: strings } = ComponentStrings;
+
 export class PendingArgValue extends React.PureComponent {
   static propTypes = {
     label: PropTypes.string,
@@ -47,7 +50,7 @@ export class PendingArgValue extends React.PureComponent {
           expandable={false}
         >
           <div className="canvasArg--pending">
-            <Loading animated text="Loading" />
+            <Loading animated text={strings.getLoadingMessage()} />
           </div>
         </ArgLabel>
       </div>

x-pack/legacy/plugins/canvas/public/components/arg_form/simple_failure.tsx

@@ -5,15 +5,15 @@
  */
 
 import React from 'react';
-import { TooltipIcon } from '../tooltip_icon';
+import { TooltipIcon, IconType } from '../tooltip_icon';
+
+import { ComponentStrings } from '../../../i18n';
+
+const { ArgFormSimpleFailure: strings } = ComponentStrings;
 
 // This is what is being generated by render() from the Arg class. It is called in FunctionForm
 export const SimpleFailure = () => (
   <div className="canvasArg--error canvasArg--error-simple">
-    <TooltipIcon
-      position="left"
-      icon="warning"
-      content="The interface for this argument could not parse the value, so a fallback input is being used"
-    />
+    <TooltipIcon position="left" icon={IconType.warning} content={strings.getFailureTooltip()} />
   </div>
 );

x-pack/legacy/plugins/canvas/public/components/tooltip_icon/index.ts

@@ -6,5 +6,6 @@
 
 import { pure } from 'recompose';
 import { TooltipIcon as Component } from './tooltip_icon';
+export { IconType } from './tooltip_icon';
 
 export const TooltipIcon = pure(Component);

x-pack/legacy/plugins/canvas/public/components/tooltip_icon/tooltip_icon.js

@@ -1,28 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint react/forbid-elements: 0 */
-import React from 'react';
-import { PropTypes } from 'prop-types';
-import { EuiIconTip } from '@elastic/eui';
-
-export const TooltipIcon = ({ icon = 'info', ...rest }) => {
-  const icons = {
-    error: { type: 'alert', color: 'danger' },
-    warning: { type: 'alert', color: 'warning' },
-    info: { type: 'iInCircle', color: 'default' },
-  };
-
-  if (!Object.keys(icons).includes(icon)) {
-    throw new Error(`Unsupported icon type: ${icon}`);
-  }
-
-  return <EuiIconTip {...rest} type={icons[icon].type} color={icons[icon].color} />;
-};
-
-TooltipIcon.propTypes = {
-  icon: PropTypes.string,
-};

x-pack/legacy/plugins/canvas/public/components/tooltip_icon/tooltip_icon.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+
+/* eslint react/forbid-elements: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { EuiIconTip, PropsOf } from '@elastic/eui';
+
+export enum IconType {
+  error = 'error',
+  warning = 'warning',
+  info = 'info',
+}
+
+type EuiIconTipProps = PropsOf<typeof EuiIconTip>;
+
+interface Props extends Omit<EuiIconTipProps, 'type' | 'color'> {
+  icon: IconType;
+}
+
+export const TooltipIcon = ({ icon = IconType.info, ...rest }: Props) => {
+  const icons = {
+    [IconType.error]: { type: 'alert', color: 'danger' },
+    [IconType.warning]: { type: 'alert', color: 'warning' },
+    [IconType.info]: { type: 'iInCircle', color: 'default' },
+  };
+
+  return <EuiIconTip {...rest} type={icons[icon].type} color={icons[icon].color} />;
+};
+
+TooltipIcon.propTypes = {
+  icon: PropTypes.string,
+};

x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.tsx

@@ -10,8 +10,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiButtonIcon, EuiText } f
 import immutable from 'object-path-immutable';
 import { get } from 'lodash';
 import { ColorPickerPopover } from '../../../components/color_picker_popover';
-// @ts-ignore Untyped local
-import { TooltipIcon } from '../../../components/tooltip_icon';
+import { TooltipIcon, IconType } from '../../../components/tooltip_icon';
 import { ExpressionAST, CanvasWorkpad } from '../../../../types';
 
 const { set, del } = immutable;
@@ -88,7 +87,7 @@ export const SimpleTemplate: FunctionComponent<Props> = props => {
         <EuiFlexItem grow={false}>
           <TooltipIcon
             position="left"
-            icon="warning"
+            icon={IconType.warning}
             content="Data has no series to style, add a color dimension"
           />
         </EuiFlexItem>