[Maps] replace FormattedText with FormattedMessage (#38016)

* [Maps] replace FormattedText with FormattedMessage

* fix Capitalization

x-pack/plugins/maps/public/shared/components/__snapshots__/validated_range.test.js.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should display error message when value is outside of range 1`] = `
+<div>
+  <EuiRange
+    compressed={false}
+    fullWidth={false}
+    levels={Array []}
+    max={10}
+    min={0}
+    onChange={[Function]}
+    showInput={false}
+    showLabels={false}
+    showRange={false}
+    showTicks={false}
+    showValue={false}
+    step={1}
+    value="11"
+  />
+  <EuiFormErrorText>
+    <FormattedMessage
+      defaultMessage="Must be between {min} and {max}"
+      id="xpack.maps.validatedRange.rangeErrorMessage"
+      values={
+        Object {
+          "max": 10,
+          "min": 0,
+        }
+      }
+    />
+  </EuiFormErrorText>
+</div>
+`;
+
+exports[`Should pass slider props to slider 1`] = `
+<EuiRange
+  compressed={false}
+  fullWidth={false}
+  levels={Array []}
+  max={10}
+  min={0}
+  onChange={[Function]}
+  showInput={true}
+  showLabels={true}
+  showRange={true}
+  showTicks={false}
+  showValue={false}
+  step={1}
+  value="3"
+/>
+`;
+
+exports[`Should render slider 1`] = `
+<EuiRange
+  compressed={false}
+  fullWidth={false}
+  levels={Array []}
+  max={10}
+  min={0}
+  onChange={[Function]}
+  showInput={false}
+  showLabels={false}
+  showRange={false}
+  showTicks={false}
+  showValue={false}
+  step={1}
+  value="3"
+/>
+`;

x-pack/plugins/maps/public/shared/components/validated_range.js

@@ -4,10 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import { EuiRange, EuiFormErrorText } from '@elastic/eui';
-import { FormattedText } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 function isWithinRange(min, max, value) {
   if (value >= min && value <= max) {
@@ -65,30 +65,33 @@ export class ValidatedRange extends React.Component {
       ...rest
     } = this.props;
 
-    let errorMessage;
+    const rangeInput = (
+      <EuiRange
+        min={min}
+        max={max}
+        value={this.state.value.toString()}
+        onChange={this._onRangeChange}
+        {...rest}
+      />
+    );
+
     if (!this.state.isValid) {
-      errorMessage = (
-        <EuiFormErrorText>
-          <FormattedText
-            id="xpack.maps.validatedRange.rangeErrorMessage"
-            defaultMessage="Must be between {min} and {max}"
-            values={{ min, max }}
-          />
-        </EuiFormErrorText>
+      // Wrap in div so single child is returned.
+      // common pattern is to put ValidateRange as a child to EuiFormRow and EuiFormRow expects a single child
+      return (
+        <div>
+          {rangeInput}
+          <EuiFormErrorText>
+            <FormattedMessage
+              id="xpack.maps.validatedRange.rangeErrorMessage"
+              defaultMessage="Must be between {min} and {max}"
+              values={{ min, max }}
+            />
+          </EuiFormErrorText>
+        </div>
       );
     }
 
-    return (
-      <Fragment>
-        <EuiRange
-          min={min}
-          max={max}
-          value={this.state.value.toString()}
-          onChange={this._onRangeChange}
-          {...rest}
-        />
-        {errorMessage}
-      </Fragment>
-    );
+    return rangeInput;
   }
 }

x-pack/plugins/maps/public/shared/components/validated_range.test.js

@@ -0,0 +1,55 @@
+/*
+ * 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 { shallow } from 'enzyme';
+
+import { ValidatedRange } from './validated_range';
+
+const MAX = 10;
+const defaultProps = {
+  max: MAX,
+  min: 0,
+  value: 3,
+  onChange: () => {}
+};
+
+test('Should render slider', () => {
+  const component = shallow(
+    <ValidatedRange
+      {...defaultProps}
+    />
+  );
+
+  expect(component)
+    .toMatchSnapshot();
+});
+
+test('Should pass slider props to slider', () => {
+  const component = shallow(
+    <ValidatedRange
+      {...defaultProps}
+      showLabels
+      showInput
+      showRange
+    />
+  );
+
+  expect(component)
+    .toMatchSnapshot();
+});
+
+test('Should display error message when value is outside of range', () => {
+  const component = shallow(
+    <ValidatedRange
+      {...defaultProps}
+      value={MAX + 1}
+    />
+  );
+
+  expect(component)
+    .toMatchSnapshot();
+});