From 90f01ca84c73916b61d4a6962f5e67cd2d667ea8 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj.cenizal@elastic.co>
Date: Fri, 29 Jul 2022 10:00:32 -0700
Subject: [PATCH] Clean up error state of Ingest Pipelines drag and drop list
 items. (#137244)

(cherry picked from commit 405c9041e7bf8f26ad4f776517fe1b3415056235)
---
 .../__jest__/processors/grok.test.ts          |  8 +--
 .../__jest__/processors/processor.helpers.tsx |  1 -
 .../drag_and_drop_text_list.scss              | 16 +++---
 .../drag_and_drop_text_list.tsx               | 52 ++++++-------------
 4 files changed, 29 insertions(+), 48 deletions(-)

diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/grok.test.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/grok.test.ts
index b488e69ed84da..01b4cedf82536 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/grok.test.ts
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/grok.test.ts
@@ -62,16 +62,16 @@ describe('Processor: Grok', () => {
     const {
       actions: { saveNewProcessor },
       form,
-      exists,
     } = testBed;
 
     // Click submit button with only the type defined
     await saveNewProcessor();
 
     // Expect form error as "field" is a required parameter
-    expect(form.getErrorsMessages()).toEqual(['A field value is required.']);
-    // Patterns field is also required; it uses EuiDraggable and only shows an error icon when invalid
-    expect(exists('droppableList.errorIcon')).toBe(true);
+    expect(form.getErrorsMessages()).toEqual([
+      'A field value is required.', // "Field" input
+      'A value is required.', // First input in "Patterns" list
+    ]);
   });
 
   test('saves with default parameter values', async () => {
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx
index ade7077e3fd10..c5996073fd3ec 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx
@@ -182,7 +182,6 @@ type TestSubject =
   | 'copyFromInput'
   | 'trimSwitch.input'
   | 'droppableList.addButton'
-  | 'droppableList.errorIcon'
   | 'droppableList.input-0'
   | 'droppableList.input-1'
   | 'droppableList.input-2';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/drag_and_drop_text_list.scss b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/drag_and_drop_text_list.scss
index 2f563d86a6d4a..bee4f053b4af5 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/drag_and_drop_text_list.scss
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/drag_and_drop_text_list.scss
@@ -4,18 +4,10 @@
     padding: $euiSizeM;
   }
 
-  &__grabIcon {
-    margin-right: $euiSizeS;
-  }
-
   &__removeButton {
     margin-left: $euiSizeS;
   }
 
-  &__errorIcon {
-    margin-left: -$euiSizeXL;
-  }
-
   &__item {
     background-color: $euiColorLightestShade;
     padding-top: $euiSizeS;
@@ -26,3 +18,11 @@
     margin-bottom: $euiSizeXS;
   }
 }
+
+.pipelineProcessorsEditor__form__dragAndDropList__grabIcon {
+  height: $euiSizeXL;
+  width: $euiSizeXL;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/drag_and_drop_text_list.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/drag_and_drop_text_list.tsx
index d574479b03e7b..a27251978ab6f 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/drag_and_drop_text_list.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/drag_and_drop_text_list.tsx
@@ -18,7 +18,6 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiFieldText,
-  EuiIconTip,
   EuiFormRow,
   EuiText,
 } from '@elastic/eui';
@@ -133,15 +132,14 @@ function DragAndDropTextListComponent({
                         <EuiFlexGroup
                           className="pipelineProcessorsEditor__form__dragAndDropList__item"
                           justifyContent="center"
-                          alignItems="center"
                           gutterSize="none"
                         >
                           <EuiFlexItem grow={false}>
-                            <div {...provided.dragHandleProps}>
-                              <EuiIcon
-                                className="pipelineProcessorsEditor__form__dragAndDropList__grabIcon"
-                                type="grab"
-                              />
+                            <div
+                              {...provided.dragHandleProps}
+                              className="pipelineProcessorsEditor__form__dragAndDropList__grabIcon"
+                            >
+                              <EuiIcon type="grab" />
                             </div>
                           </EuiFlexItem>
                           <EuiFlexItem>
@@ -160,34 +158,17 @@ function DragAndDropTextListComponent({
                                 const { isInvalid, errorMessage } =
                                   getFieldValidityAndErrorMessage(field);
                                 return (
-                                  <EuiFlexGroup gutterSize="none" alignItems="center">
-                                    <EuiFlexItem>
-                                      <EuiFieldText
-                                        data-test-subj={`input-${idx}`}
-                                        id={idx === 0 ? firstItemId : undefined}
-                                        isInvalid={isInvalid}
-                                        value={field.value}
-                                        onChange={field.onChange}
-                                        compressed
-                                        fullWidth
-                                      />
-                                    </EuiFlexItem>
-                                    {typeof errorMessage === 'string' && (
-                                      <EuiFlexItem grow={false}>
-                                        <div
-                                          className="pipelineProcessorsEditor__form__dragAndDropList__errorIcon"
-                                          data-test-subj="errorIcon"
-                                        >
-                                          <EuiIconTip
-                                            aria-label={errorMessage}
-                                            content={errorMessage}
-                                            type="alert"
-                                            color="danger"
-                                          />
-                                        </div>
-                                      </EuiFlexItem>
-                                    )}
-                                  </EuiFlexGroup>
+                                  <EuiFormRow isInvalid={isInvalid} error={errorMessage} fullWidth>
+                                    <EuiFieldText
+                                      data-test-subj={`input-${idx}`}
+                                      id={idx === 0 ? firstItemId : undefined}
+                                      isInvalid={isInvalid}
+                                      value={field.value}
+                                      onChange={field.onChange}
+                                      compressed
+                                      fullWidth
+                                    />
+                                  </EuiFormRow>
                                 );
                               }}
                             </UseField>
@@ -200,6 +181,7 @@ function DragAndDropTextListComponent({
                                 iconType="minusInCircle"
                                 color="danger"
                                 onClick={() => onRemove(item.id)}
+                                size="s"
                               />
                             ) : (
                               // Render a no-op placeholder button