From 6852cb86744aefed48375b0c20a883ac50651738 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Mon, 14 Sep 2020 18:15:08 +0200
Subject: [PATCH] Implement PR feedback

---
 .../drag_and_drop_text_list.scss              |  4 ++
 .../drag_and_drop_text_list.tsx               | 65 ++++++++++++++-----
 .../manage_processor_form.container.tsx       |  6 +-
 .../processors/grok.test.tsx                  | 13 +++-
 4 files changed, 67 insertions(+), 21 deletions(-)

diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/field_components/drag_and_drop_text_list.scss b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/field_components/drag_and_drop_text_list.scss
index f91755fcd477a..a30c50df2cc9a 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/field_components/drag_and_drop_text_list.scss
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/field_components/drag_and_drop_text_list.scss
@@ -11,6 +11,10 @@
     margin-left: $euiSizeS;
   }
 
+  &__errorIcon {
+    margin-left: -$euiSizeXL;
+  }
+
   &__item {
     background-color: $euiColorEmptyShade;
     padding-top: $euiSizeM;
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/field_components/drag_and_drop_text_list.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/field_components/drag_and_drop_text_list.tsx
index 6dfdbe16883d7..f029eea1db4fb 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/field_components/drag_and_drop_text_list.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/field_components/drag_and_drop_text_list.tsx
@@ -19,6 +19,7 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiFieldText,
+  EuiIconTip,
 } from '@elastic/eui';
 
 import {
@@ -77,7 +78,13 @@ function DragAndDropTextListComponent({
         <EuiDroppable droppableId={droppableId}>
           {value.map((item, idx) => {
             return (
-              <EuiDraggable spacing="none" draggableId={String(item.id)} index={idx} key={item.id}>
+              <EuiDraggable
+                customDragHandle
+                spacing="none"
+                draggableId={String(item.id)}
+                index={idx}
+                key={item.id}
+              >
                 {(provided) => {
                   return (
                     <EuiFlexGroup
@@ -105,27 +112,53 @@ function DragAndDropTextListComponent({
                           readDefaultValueOnForm={!item.isNew}
                         >
                           {(field) => {
-                            const { isInvalid } = getFieldValidityAndErrorMessage(field);
+                            const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(
+                              field
+                            );
                             return (
-                              <EuiFieldText
-                                isInvalid={isInvalid}
-                                value={field.value}
-                                onChange={field.onChange}
-                                compressed
-                                fullWidth
-                              />
+                              <EuiFlexGroup gutterSize="none" alignItems="center">
+                                <EuiFlexItem>
+                                  <EuiFieldText
+                                    isInvalid={isInvalid}
+                                    value={field.value}
+                                    onChange={field.onChange}
+                                    compressed
+                                    fullWidth
+                                  />
+                                </EuiFlexItem>
+                                {typeof errorMessage === 'string' && (
+                                  <EuiFlexItem grow={false}>
+                                    <div className="pipelineProcessorsEditor__form__dragAndDropList__errorIcon">
+                                      <EuiIconTip
+                                        aria-label={errorMessage}
+                                        content={errorMessage}
+                                        type="alert"
+                                        color="danger"
+                                      />
+                                    </div>
+                                  </EuiFlexItem>
+                                )}
+                              </EuiFlexGroup>
                             );
                           }}
                         </UseField>
                       </EuiFlexItem>
                       <EuiFlexItem grow={false}>
-                        <EuiButtonIcon
-                          aria-label={i18nTexts.removeItemButtonAriaLabel}
-                          className="pipelineProcessorsEditor__form__dragAndDropList__removeButton"
-                          iconType="minusInCircle"
-                          color="danger"
-                          onClick={() => onRemove(item.id)}
-                        />
+                        {value.length > 1 ? (
+                          <EuiButtonIcon
+                            aria-label={i18nTexts.removeItemButtonAriaLabel}
+                            className="pipelineProcessorsEditor__form__dragAndDropList__removeButton"
+                            iconType="minusInCircle"
+                            color="danger"
+                            onClick={() => onRemove(item.id)}
+                          />
+                        ) : (
+                          // Render a no-op placeholder button
+                          <EuiIcon
+                            className="pipelineProcessorsEditor__form__dragAndDropList__removeButton"
+                            type="empty"
+                          />
+                        )}
                       </EuiFlexItem>
                     </EuiFlexGroup>
                   );
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/manage_processor_form.container.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/manage_processor_form.container.tsx
index e67b58e46f2bc..af902d9d84b9e 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/manage_processor_form.container.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/manage_processor_form.container.tsx
@@ -53,10 +53,12 @@ export const ManageProcessorForm: FunctionComponent<Props> = ({
     onSubmit: handleSubmit,
   });
 
+  const { subscribe } = form;
+
   useEffect(() => {
-    const subscription = form.subscribe(onFormUpdate);
+    const subscription = subscribe(onFormUpdate);
     return subscription.unsubscribe;
-  }, [onFormUpdate, form]);
+  }, [onFormUpdate, subscribe]);
 
   return (
     <ViewComponent
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/grok.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/grok.test.tsx
index 5815633fb217c..1640165a3c0b3 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/grok.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/grok.test.tsx
@@ -21,9 +21,6 @@ window.Worker = function () {
   (this as any).terminate = () => {};
 };
 
-// disable all react-beautiful-dnd development warnings
-(window as any)['__react-beautiful-dnd-disable-dev-warnings'] = true;
-
 describe('<Grok/>', () => {
   const setup = (props?: { defaultValue: Record<string, any> }) => {
     function MyComponent() {
@@ -43,6 +40,16 @@ describe('<Grok/>', () => {
     }
     return mount(<MyComponent />);
   };
+
+  beforeAll(() => {
+    // disable all react-beautiful-dnd development warnings
+    (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = true;
+  });
+
+  afterAll(() => {
+    // enable all react-beautiful-dnd development warnings
+    (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = false;
+  });
   test('smoke', () => {
     setup({ defaultValue: { type: 'grok', fields: { patterns: ['test'] } } });
   });