avoid updating types and just replace label

elastic · May 31, 2021 · 7d6fddd · 7d6fddd
1 parent cb43ec8
commit 7d6fddd
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 23 deletions.
diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/types.ts b/src/plugins/es_ui_shared/static/forms/hook_form_lib/types.ts
@@ -146,7 +146,7 @@ export interface FieldHook<T = unknown, I = T> {
 }
 
 export interface FieldConfig<T = unknown, FormType extends FormData = FormData, I = T> {
-  readonly label?: string | ReactNode;
+  readonly label?: string;
   readonly labelAppend?: string | ReactNode;
   readonly helpText?: string | ReactNode;
   readonly type?: string;

diff --git a/...pplication/components/pipeline_editor/components/processor_form/processors/user_agent.tsx b/...pplication/components/pipeline_editor/components/processor_form/processors/user_agent.tsx
@@ -52,29 +52,13 @@ const fieldsConfig: FieldsConfig = {
     defaultValue: false,
     deserializer: to.booleanOrUndef,
     serializer: from.undefinedIfValue(false),
-    label: (
-      <EuiFlexGroup gutterSize="xs">
-        <EuiFlexItem grow={false}>
-          <FormattedMessage
-            id="xpack.ingestPipelines.pipelineEditor.userAgentForm.extractDeviceNameFieldText"
-            defaultMessage="Extract Device Type"
-          />
-        </EuiFlexItem>
-        <EuiFlexItem style={{ marginBottom: -4 }}>
-          <EuiBetaBadge
-            label="Beta"
-            tooltipContent={i18n.translate(
-              'xpack.ingestPipelines.pipelineEditor.userAgentForm.extractDeviceNameTooltipText',
-              { defaultMessage: 'This functionality is in beta and is subject to change.' }
-            )}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
+    helpText: i18n.translate(
+      'xpack.ingestPipelines.pipelineEditor.userAgentForm.extractDeviceTypeFieldHelpText',
+      {
+        defaultMessage: 'Extracts device type from the user agent string.',
+      }
     ),
-    helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.userAgentForm.extractDeviceTypeFieldHelpText', {
-      defaultMessage: 'Extracts device type from the user agent string.',
-    }),
-  }
+  },
 };
 
 export const UserAgent: FunctionComponent = () => {
@@ -123,6 +107,27 @@ export const UserAgent: FunctionComponent = () => {
         component={ToggleField}
         path="fields.extract_device_type"
         data-test-subj="extractDeviceTypeSwitch"
+        euiFieldProps={{
+          label: (
+            <EuiFlexGroup gutterSize="xs">
+              <EuiFlexItem grow={false}>
+                <FormattedMessage
+                  id="xpack.ingestPipelines.pipelineEditor.userAgentForm.extractDeviceNameFieldText"
+                  defaultMessage="Extract Device Type"
+                />
+              </EuiFlexItem>
+              <EuiFlexItem style={{ marginBottom: -4 }}>
+                <EuiBetaBadge
+                  label="Beta"
+                  tooltipContent={i18n.translate(
+                    'xpack.ingestPipelines.pipelineEditor.userAgentForm.extractDeviceNameTooltipText',
+                    { defaultMessage: 'This functionality is in beta and is subject to change.' }
+                  )}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          ),
+        }}
       />
 
       <IgnoreMissingField />