[7.x] [Canvas][i18n] Function Form component (#48073) (#48212)

* Extracted i18n strings from FunctionForm component

* Fixed duplicate i18n ids

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

@@ -465,6 +465,24 @@ export const ComponentStrings = {
         },
       }),
   },
+  FunctionFormContextError: {
+    getContextErrorMessage: (errorMessage: string) =>
+      i18n.translate('xpack.canvas.functionForm.contextError', {
+        defaultMessage: 'ERROR: {errorMessage}',
+        values: {
+          errorMessage,
+        },
+      }),
+  },
+  FunctionFormFunctionUnknown: {
+    getUnknownArgumentTypeErrorMessage: (expressionType: string) =>
+      i18n.translate('xpack.canvas.functionForm.functionUnknown.unknownArgumentTypeError', {
+        defaultMessage: 'Unknown expression type "{expressionType}"',
+        values: {
+          expressionType,
+        },
+      }),
+  },
   GroupSettings: {
     getSaveGroupDescription: () =>
       i18n.translate('xpack.canvas.groupSettings.saveGroupDescription', {

x-pack/legacy/plugins/canvas/public/components/function_form/function_form_context_error.js

@@ -1,16 +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.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export const FunctionFormContextError = ({ context }) => (
-  <div className="canvasFunctionForm canvasFunctionForm--error">ERROR: {context.error}</div>
-);
-
-FunctionFormContextError.propTypes = {
-  context: PropTypes.object,
-};

x-pack/legacy/plugins/canvas/public/components/function_form/function_form_context_error.tsx

@@ -0,0 +1,27 @@
+/*
+ * 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 { ComponentStrings } from '../../../i18n/components';
+
+interface Props {
+  context: {
+    error: string;
+  };
+}
+
+const { FunctionFormContextError: strings } = ComponentStrings;
+
+export const FunctionFormContextError: FunctionComponent<Props> = ({ context }) => (
+  <div className="canvasFunctionForm canvasFunctionForm--error">
+    {strings.getContextErrorMessage(context.error)}
+  </div>
+);
+
+FunctionFormContextError.propTypes = {
+  context: PropTypes.shape({ error: PropTypes.string }).isRequired,
+};

x-pack/legacy/plugins/canvas/public/components/function_form/function_unknown.tsx

@@ -4,12 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
+import { ComponentStrings } from '../../../i18n';
 
-export const FunctionUnknown = ({ argType }) => (
+interface Props {
+  /** the type of the argument */
+  argType: string;
+}
+const { FunctionFormFunctionUnknown: strings } = ComponentStrings;
+
+export const FunctionUnknown: FunctionComponent<Props> = ({ argType }) => (
   <div className="canvasFunctionForm canvasFunctionForm--unknown-expression">
-    Unknown expression type "{argType}"
+    {strings.getUnknownArgumentTypeErrorMessage(argType)}
   </div>
 );