i18n remove extra span tags (elastic#23529) (elastic#23864)

remove extra span tags generated by FormattedMessage component translate missed labels
chrisronline · Oct 5, 2018 · 3c7646e · 3c7646e
1 parent 6a8a653
commit 3c7646e
Show file tree

Hide file tree

Showing 36 changed files with 464 additions and 281 deletions.
diff --git a/packages/kbn-i18n/src/react/__snapshots__/inject_i18n_provider.test.tsx.snap b/packages/kbn-i18n/src/react/__snapshots__/inject_i18n_provider.test.tsx.snap
@@ -133,7 +133,7 @@ Object {
   "messages": Object {},
   "now": [Function],
   "onError": [Function],
-  "textComponent": "span",
+  "textComponent": Symbol(react.fragment),
   "timeZone": null,
 }
 `;

diff --git a/packages/kbn-i18n/src/react/__snapshots__/provider.test.tsx.snap b/packages/kbn-i18n/src/react/__snapshots__/provider.test.tsx.snap
@@ -133,7 +133,7 @@ Object {
   "messages": Object {},
   "now": [Function],
   "onError": [Function],
-  "textComponent": "span",
+  "textComponent": Symbol(react.fragment),
   "timeZone": null,
 }
 `;

diff --git a/packages/kbn-i18n/src/react/provider.tsx b/packages/kbn-i18n/src/react/provider.tsx
@@ -43,6 +43,7 @@ export class I18nProvider extends React.PureComponent {
         defaultLocale={i18n.getDefaultLocale()}
         formats={i18n.getFormats()}
         defaultFormats={i18n.getFormats()}
+        textComponent={React.Fragment}
       >
         {children}
       </IntlProvider>

diff --git a/...input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap b/...input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap
@@ -19,41 +19,77 @@ exports[`renders dynamic options should display disabled dynamic options with to
     describedByIds={Array []}
     fullWidth={false}
     hasEmptyLabelSpace={false}
-    helpText="Allow multiple selection"
+    helpText={
+      <FormattedMessage
+        defaultMessage="Allow multiple selection"
+        id="inputControl.editor.listControl.multiselectDescription"
+        values={Object {}}
+      />
+    }
     id="multiselect-0"
     key="multiselect"
   >
     <EuiSwitch
       checked={true}
       data-test-subj="listControlMultiselectInput"
-      label="Multiselect"
+      label={
+        <FormattedMessage
+          defaultMessage="Multiselect"
+          id="inputControl.editor.listControl.multiselectLabel"
+          values={Object {}}
+        />
+      }
       onChange={[Function]}
     />
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
     fullWidth={false}
     hasEmptyLabelSpace={false}
-    helpText="Only available for \\"string\\" fields"
+    helpText={
+      <FormattedMessage
+        defaultMessage="Only available for \\"string\\" fields"
+        id="inputControl.editor.listControl.dynamicOptions.stringFieldDescription"
+        values={Object {}}
+      />
+    }
     id="dynamicOptions-0"
     key="dynamicOptions"
   >
     <EuiSwitch
       checked={true}
       data-test-subj="listControlDynamicOptionsSwitch"
       disabled={true}
-      label="Dynamic Options"
+      label={
+        <FormattedMessage
+          defaultMessage="Dynamic Options"
+          id="inputControl.editor.listControl.dynamicOptionsLabel"
+          values={Object {}}
+        />
+      }
       onChange={[Function]}
     />
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
     fullWidth={false}
     hasEmptyLabelSpace={false}
-    helpText="Number of options"
+    helpText={
+      <FormattedMessage
+        defaultMessage="Number of options"
+        id="inputControl.editor.listControl.sizeDescription"
+        values={Object {}}
+      />
+    }
     id="size-0"
     key="size"
-    label="Size"
+    label={
+      <FormattedMessage
+        defaultMessage="Size"
+        id="inputControl.editor.listControl.sizeLabel"
+        values={Object {}}
+      />
+    }
   >
     <EuiFieldNumber
       compressed={false}
@@ -87,30 +123,54 @@ exports[`renders dynamic options should display dynamic options for string field
     describedByIds={Array []}
     fullWidth={false}
     hasEmptyLabelSpace={false}
-    helpText="Allow multiple selection"
+    helpText={
+      <FormattedMessage
+        defaultMessage="Allow multiple selection"
+        id="inputControl.editor.listControl.multiselectDescription"
+        values={Object {}}
+      />
+    }
     id="multiselect-0"
     key="multiselect"
   >
     <EuiSwitch
       checked={true}
       data-test-subj="listControlMultiselectInput"
-      label="Multiselect"
+      label={
+        <FormattedMessage
+          defaultMessage="Multiselect"
+          id="inputControl.editor.listControl.multiselectLabel"
+          values={Object {}}
+        />
+      }
       onChange={[Function]}
     />
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
     fullWidth={false}
     hasEmptyLabelSpace={false}
-    helpText="Update options in response to user input"
+    helpText={
+      <FormattedMessage
+        defaultMessage="Update options in response to user input"
+        id="inputControl.editor.listControl.dynamicOptions.updateDescription"
+        values={Object {}}
+      />
+    }
     id="dynamicOptions-0"
     key="dynamicOptions"
   >
     <EuiSwitch
       checked={true}
       data-test-subj="listControlDynamicOptionsSwitch"
       disabled={false}
-      label="Dynamic Options"
+      label={
+        <FormattedMessage
+          defaultMessage="Dynamic Options"
+          id="inputControl.editor.listControl.dynamicOptionsLabel"
+          values={Object {}}
+        />
+      }
       onChange={[Function]}
     />
   </EuiFormRow>
@@ -136,41 +196,77 @@ exports[`renders dynamic options should display size field when dynamic options
     describedByIds={Array []}
     fullWidth={false}
     hasEmptyLabelSpace={false}
-    helpText="Allow multiple selection"
+    helpText={
+      <FormattedMessage
+        defaultMessage="Allow multiple selection"
+        id="inputControl.editor.listControl.multiselectDescription"
+        values={Object {}}
+      />
+    }
     id="multiselect-0"
     key="multiselect"
   >
     <EuiSwitch
       checked={true}
       data-test-subj="listControlMultiselectInput"
-      label="Multiselect"
+      label={
+        <FormattedMessage
+          defaultMessage="Multiselect"
+          id="inputControl.editor.listControl.multiselectLabel"
+          values={Object {}}
+        />
+      }
       onChange={[Function]}
     />
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
     fullWidth={false}
     hasEmptyLabelSpace={false}
-    helpText="Update options in response to user input"
+    helpText={
+      <FormattedMessage
+        defaultMessage="Update options in response to user input"
+        id="inputControl.editor.listControl.dynamicOptions.updateDescription"
+        values={Object {}}
+      />
+    }
     id="dynamicOptions-0"
     key="dynamicOptions"
   >
     <EuiSwitch
       checked={false}
       data-test-subj="listControlDynamicOptionsSwitch"
       disabled={false}
-      label="Dynamic Options"
+      label={
+        <FormattedMessage
+          defaultMessage="Dynamic Options"
+          id="inputControl.editor.listControl.dynamicOptionsLabel"
+          values={Object {}}
+        />
+      }
       onChange={[Function]}
     />
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
     fullWidth={false}
     hasEmptyLabelSpace={false}
-    helpText="Number of options"
+    helpText={
+      <FormattedMessage
+        defaultMessage="Number of options"
+        id="inputControl.editor.listControl.sizeDescription"
+        values={Object {}}
+      />
+    }
     id="size-0"
     key="size"
-    label="Size"
+    label={
+      <FormattedMessage
+        defaultMessage="Size"
+        id="inputControl.editor.listControl.sizeLabel"
+        values={Object {}}
+      />
+    }
   >
     <EuiFieldNumber
       compressed={false}
@@ -204,10 +300,22 @@ exports[`renders should display chaining input when parents are provided 1`] = `
     describedByIds={Array []}
     fullWidth={false}
     hasEmptyLabelSpace={false}
-    helpText="Options are based on the value of parent control. Disabled if parent is not set."
+    helpText={
+      <FormattedMessage
+        defaultMessage="Options are based on the value of parent control. Disabled if parent is not set."
+        id="inputControl.editor.listControl.parentDescription"
+        values={Object {}}
+      />
+    }
     id="parentSelect-0"
     key="parentSelect"
-    label="Parent control"
+    label={
+      <FormattedMessage
+        defaultMessage="Parent control"
+        id="inputControl.editor.listControl.parentLabel"
+        values={Object {}}
+      />
+    }
   >
     <EuiSelect
       compressed={false}
@@ -237,41 +345,77 @@ exports[`renders should display chaining input when parents are provided 1`] = `
     describedByIds={Array []}
     fullWidth={false}
     hasEmptyLabelSpace={false}
-    helpText="Allow multiple selection"
+    helpText={
+      <FormattedMessage
+        defaultMessage="Allow multiple selection"
+        id="inputControl.editor.listControl.multiselectDescription"
+        values={Object {}}
+      />
+    }
     id="multiselect-0"
     key="multiselect"
   >
     <EuiSwitch
       checked={true}
       data-test-subj="listControlMultiselectInput"
-      label="Multiselect"
+      label={
+        <FormattedMessage
+          defaultMessage="Multiselect"
+          id="inputControl.editor.listControl.multiselectLabel"
+          values={Object {}}
+        />
+      }
       onChange={[Function]}
     />
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
     fullWidth={false}
     hasEmptyLabelSpace={false}
-    helpText="Update options in response to user input"
+    helpText={
+      <FormattedMessage
+        defaultMessage="Update options in response to user input"
+        id="inputControl.editor.listControl.dynamicOptions.updateDescription"
+        values={Object {}}
+      />
+    }
     id="dynamicOptions-0"
     key="dynamicOptions"
   >
     <EuiSwitch
       checked={false}
       data-test-subj="listControlDynamicOptionsSwitch"
       disabled={false}
-      label="Dynamic Options"
+      label={
+        <FormattedMessage
+          defaultMessage="Dynamic Options"
+          id="inputControl.editor.listControl.dynamicOptionsLabel"
+          values={Object {}}
+        />
+      }
       onChange={[Function]}
     />
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
     fullWidth={false}
     hasEmptyLabelSpace={false}
-    helpText="Number of options"
+    helpText={
+      <FormattedMessage
+        defaultMessage="Number of options"
+        id="inputControl.editor.listControl.sizeDescription"
+        values={Object {}}
+      />
+    }
     id="size-0"
     key="size"
-    label="Size"
+    label={
+      <FormattedMessage
+        defaultMessage="Size"
+        id="inputControl.editor.listControl.sizeLabel"
+        values={Object {}}
+      />
+    }
   >
     <EuiFieldNumber
       compressed={false}

diff --git a/src/core_plugins/input_control_vis/public/components/editor/field_select.js b/src/core_plugins/input_control_vis/public/components/editor/field_select.js
@@ -20,7 +20,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { injectI18n } from '@kbn/i18n/react';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiFormRow,
@@ -141,10 +141,7 @@ class FieldSelectUi extends Component {
     return (
       <EuiFormRow
         id={selectId}
-        label={intl.formatMessage({
-          id: 'inputControl.editor.fieldSelect.fieldLabel',
-          defaultMessage: 'Field'
-        })}
+        label={<FormattedMessage id="inputControl.editor.fieldSelect.fieldLabel" defaultMessage="Field" />}
       >
         <EuiComboBox
           placeholder={intl.formatMessage({