[Ingest Pipelines] Add generated copy for all processors (elastic#95507…

…) (elastic#96660) * - minor refactor of 'description' -> 'typeDescription' for generic processor descriptions - added initial pass of generated descriptions for all processors * fix i18n * added wrapping div and title to description and changed default description to appear as placeholder * reworked the description width and overflow styling * only show the text title on hover when we are not showing the text input * fixed a number of minor issues with using values as though they are strings and doing better serialization * slight optimisation to scss * - implement copy feedback - clean up a lot of uses of "target_field = field". it is better to not show these - made "replacement" a required field on gsub (which it was not) * revert the previouis validation as empty values are acceptbale for the replacement text * - updated the copy per feedback and fixed a missing i18n.translate - slight update to SCSS classes to not have unused class * Added an empty string field validator that accepts spaces so that the KV processor value and field split fields accept " " * replace use of HTML "title" with EuiToolTip * remove unused variable and import * implemented feedback; removed if from default descriptions and other minor updates * update default description of foreach to always display Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
nreese · Apr 8, 2021 · 0b111dc · 0b111dc
1 parent e5d40af
commit 0b111dc
Show file tree

Hide file tree

Showing 7 changed files with 404 additions and 73 deletions.
diff --git a/...mponents/pipeline_editor/components/pipeline_processors_editor_item/inline_text_input.tsx b/...mponents/pipeline_editor/components/pipeline_processors_editor_item/inline_text_input.tsx
@@ -7,7 +7,7 @@
 
 import classNames from 'classnames';
 import React, { useState, useEffect, useCallback, memo } from 'react';
-import { EuiFieldText, EuiText, keys } from '@elastic/eui';
+import { EuiFieldText, EuiText, keys, EuiToolTip } from '@elastic/eui';
 
 export interface Props {
   placeholder: string;
@@ -90,11 +90,13 @@ function _InlineTextInput({
       tabIndex={disabled ? -1 : 0}
       onFocus={() => setIsShowingTextInput(true)}
     >
-      <EuiText size="s" color="subdued">
-        <div className="pipelineProcessorsEditor__item__description">
-          {text || <em>{placeholder}</em>}
-        </div>
-      </EuiText>
+      <EuiToolTip content={text ?? placeholder}>
+        <EuiText size="s" color="subdued">
+          <div className="pipelineProcessorsEditor__item__description">
+            {text || <em>{placeholder}</em>}
+          </div>
+        </EuiText>
+      </EuiToolTip>
     </div>
   );
 }

diff --git a/...ne_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.scss b/...ne_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.scss
@@ -43,7 +43,6 @@
     overflow-x: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    max-width: 600px;
   }
 
   &__textInput {
@@ -65,4 +64,23 @@
     // Prevent content jump when spinner renders
     min-width: 15px;
   }
+
+  &__controlsContainer {
+    // Make sure this element knows how wide it is
+    width: 100%;
+    // The last element in these controls is an editable text description that can contain an unknown amount (i.e., width) of text.
+    overflow: hidden;
+  }
+
+  // By default, flex sets the element width to "auto", we set this explicitly again to avoid the flex item growing beyond the width given
+  // by flex. This applies to both of the classes below.
+  &__controlsFlexItem {
+    min-width: 0;
+  }
+  &__descriptionContainer {
+    min-width: 0;
+    &--displayNone {
+      display: none;
+    }
+  }
 }
diff --git a/...ine_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx b/...ine_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx
@@ -67,6 +67,8 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
     const isMovingOtherProcessor = editor.mode.id === 'movingProcessor' && !isMovingThisProcessor;
     const isDimmed = isEditingOtherProcessor || isMovingOtherProcessor;
 
+    const processorDescriptor = getProcessorDescriptor(processor.type);
+
     const { testPipelineData } = useTestPipelineContext();
     const {
       config: { selectedDocumentIndex },
@@ -85,10 +87,14 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
       'pipelineProcessorsEditor__item--dimmed': isDimmed,
     });
 
-    const inlineTextInputContainerClasses = classNames({
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      'pipelineProcessorsEditor__item--displayNone': isInMoveMode && !processor.options.description,
-    });
+    const inlineTextInputContainerClasses = classNames(
+      'pipelineProcessorsEditor__item__descriptionContainer',
+      {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'pipelineProcessorsEditor__item__descriptionContainer--displayNone':
+          isInMoveMode && !processor.options.description,
+      }
+    );
 
     const onDescriptionChange = useCallback(
       (nextDescription) => {
@@ -167,8 +173,13 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
           data-test-subj={selectorToDataTestSubject(selector)}
           data-processor-id={processor.id}
         >
-          <EuiFlexItem>
-            <EuiFlexGroup gutterSize="m" alignItems="center" responsive={false}>
+          <EuiFlexItem className="pipelineProcessorsEditor__item__controlsFlexItem">
+            <EuiFlexGroup
+              className="pipelineProcessorsEditor__item__controlsContainer"
+              gutterSize="m"
+              alignItems="center"
+              responsive={false}
+            >
               <EuiFlexItem grow={false}>{renderMoveButton()}</EuiFlexItem>
               <EuiFlexItem grow={false} className="pipelineProcessorsEditor__item__statusContainer">
                 {isExecutingPipeline ? (
@@ -193,7 +204,7 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
                     }}
                     data-test-subj="manageItemButton"
                   >
-                    <b>{getProcessorDescriptor(processor.type)?.label ?? processor.type}</b>
+                    <b>{processorDescriptor?.label ?? processor.type}</b>
                   </EuiLink>
                 </EuiText>
               </EuiFlexItem>
@@ -203,7 +214,10 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
                   onChange={onDescriptionChange}
                   ariaLabel={i18nTexts.processorTypeLabel({ type: processor.type })}
                   text={description}
-                  placeholder={i18nTexts.descriptionPlaceholder}
+                  placeholder={
+                    processorDescriptor?.getDefaultDescription(processor.options) ??
+                    i18nTexts.descriptionPlaceholder
+                  }
                 />
               </EuiFlexItem>
             </EuiFlexGroup>

diff --git a/...peline_editor/components/processor_form/processors/common_fields/processor_type_field.tsx b/...peline_editor/components/processor_form/processors/common_fields/processor_type_field.tsx
@@ -81,7 +81,7 @@ export const ProcessorTypeField: FunctionComponent<Props> = ({ initialType }) =>
           const type = typeField.value;
           const processorDescriptor = getProcessorDescriptor(type);
           if (processorDescriptor) {
-            description = processorDescriptor.description || '';
+            description = processorDescriptor.typeDescription || '';
             selectedOptions = [{ label: processorDescriptor.label, value: type }];
           } else {
             // If there is no label for this processor type, just use the type as the label

diff --git a/...public/application/components/pipeline_editor/components/processor_form/processors/kv.tsx b/...public/application/components/pipeline_editor/components/processor_form/processors/kv.tsx
@@ -12,20 +12,17 @@ import { EuiCode } from '@elastic/eui';
 
 import {
   FIELD_TYPES,
-  fieldValidators,
   UseField,
   Field,
   ComboBoxField,
   ToggleField,
 } from '../../../../../../shared_imports';
 
-import { FieldsConfig, from, to } from './shared';
+import { FieldsConfig, from, to, isEmptyString } from './shared';
 import { FieldNameField } from './common_fields/field_name_field';
 import { TargetField } from './common_fields/target_field';
 import { IgnoreMissingField } from './common_fields/ignore_missing_field';
 
-const { emptyField } = fieldValidators;
-
 const fieldsConfig: FieldsConfig = {
   /* Required fields config */
   field_split: {
@@ -45,7 +42,7 @@ const fieldsConfig: FieldsConfig = {
     ),
     validations: [
       {
-        validator: emptyField(
+        validator: isEmptyString(
           i18n.translate('xpack.ingestPipelines.pipelineEditor.kvForm.fieldSplitRequiredError', {
             defaultMessage: 'A value is required.',
           })
@@ -70,7 +67,7 @@ const fieldsConfig: FieldsConfig = {
     ),
     validations: [
       {
-        validator: emptyField(
+        validator: isEmptyString(
           i18n.translate('xpack.ingestPipelines.pipelineEditor.kvForm.valueSplitRequiredError', {
             defaultMessage: 'A value is required.',
           })

diff --git a/...lic/application/components/pipeline_editor/components/processor_form/processors/shared.ts b/...lic/application/components/pipeline_editor/components/processor_form/processors/shared.ts
@@ -10,7 +10,9 @@ import * as rt from 'io-ts';
 import { i18n } from '@kbn/i18n';
 import { isRight } from 'fp-ts/lib/Either';
 
-import { FieldConfig, ValidationFunc } from '../../../../../../shared_imports';
+import { FieldConfig, ValidationFunc, fieldValidators } from '../../../../../../shared_imports';
+
+const { emptyField } = fieldValidators;
 
 export const arrayOfStrings = rt.array(rt.string);
 
@@ -118,6 +120,20 @@ export const isJSONStringValidator: ValidationFunc = ({ value }) => {
   }
 };
 
+/**
+ * Similar to the emptyField validator but we accept whitespace characters.
+ */
+export const isEmptyString = (message: string): ValidationFunc => (field) => {
+  const { value } = field;
+  if (typeof value === 'string') {
+    const hasLength = Boolean(value.length);
+    const hasNonWhiteSpaceChars = hasLength && Boolean(value.trim().length);
+    if (hasNonWhiteSpaceChars) {
+      return emptyField(message)(field);
+    }
+  }
+};
+
 export const EDITOR_PX_HEIGHT = {
   extraSmall: 75,
   small: 100,