[Ingest Node Pipelines] New patterns component for Grok processor

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/add_processor_form.tsx

@@ -118,6 +118,7 @@ export const AddProcessorForm: FunctionComponent<Props> = ({
             <EuiFlexItem grow={false}>
               <EuiButton
                 fill
+                disabled={(!form.isValid && form.isSubmitted) || form.isSubmitting}
                 data-test-subj="submitButton"
                 onClick={async () => {
                   await handleSubmit();

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/edit_processor_form.tsx

@@ -234,6 +234,7 @@ export const EditProcessorForm: FunctionComponent<Props> = ({
             <EuiFlexItem grow={false}>
               <EuiButton
                 fill
+                disabled={(!form.isValid && form.isSubmitted) || form.isSubmitting}
                 data-test-subj="submitButton"
                 onClick={async () => {
                   if (activeTab === 'output') {

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/field_components/drag_and_drop_text_list.scss

@@ -0,0 +1,28 @@
+.pipelineProcessorsEditor__form__dragAndDropList {
+  &__panel {
+    background-color: $euiColorLightestShade;
+    padding: $euiSizeM;
+  }
+
+  &__grabIcon {
+    margin-right: $euiSizeS;
+  }
+
+  &__removeButton {
+    margin-left: $euiSizeS;
+  }
+
+  &__errorIcon {
+    margin-left: -$euiSizeXL;
+  }
+
+  &__item {
+    background-color: $euiColorLightestShade;
+    padding-top: $euiSizeS;
+    padding-bottom: $euiSizeS;
+  }
+
+  &__labelContainer {
+    margin-bottom: $euiSizeXS;
+  }
+}

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/field_components/drag_and_drop_text_list.tsx

@@ -0,0 +1,210 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import React, { useState, useCallback, memo } from 'react';
+import uuid from 'uuid';
+import {
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiDragDropContext,
+  EuiDraggable,
+  EuiDroppable,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiFieldText,
+  EuiIconTip,
+  EuiFormRow,
+  EuiText,
+} from '@elastic/eui';
+
+import {
+  UseField,
+  ArrayItem,
+  ValidationFunc,
+  getFieldValidityAndErrorMessage,
+} from '../../../../../../shared_imports';
+
+import './drag_and_drop_text_list.scss';
+
+interface Props {
+  label: string;
+  helpText: React.ReactNode;
+  error: string | null;
+  value: ArrayItem[];
+  onMove: (sourceIdx: number, destinationIdx: number) => void;
+  onAdd: () => void;
+  onRemove: (id: number) => void;
+  addLabel: string;
+  /**
+   * Validation to be applied to every text item
+   */
+  textValidation?: ValidationFunc<any, string, string>;
+}
+
+const i18nTexts = {
+  removeItemButtonAriaLabel: i18n.translate(
+    'xpack.ingestPipelines.pipelineEditor.dragAndDropList.removeItemLabel',
+    { defaultMessage: 'Remove item' }
+  ),
+};
+
+function DragAndDropTextListComponent({
+  label,
+  helpText,
+  error,
+  value,
+  onMove,
+  onAdd,
+  onRemove,
+  addLabel,
+  textValidation,
+}: Props): JSX.Element {
+  const [droppableId] = useState(() => uuid.v4());
+  const [firstItemId] = useState(() => uuid.v4());
+
+  const onDragEnd = useCallback(
+    ({ source, destination }) => {
+      if (source && destination) {
+        onMove(source.index, destination.index);
+      }
+    },
+    [onMove]
+  );
+  return (
+    <EuiFormRow isInvalid={typeof error === 'string'} error={error} fullWidth>
+      <>
+        {/* Label and help text. Also wire up the htmlFor so the label points to the first text field. */}
+        <EuiFlexGroup
+          className="pipelineProcessorsEditor__form__dragAndDropList__labelContainer"
+          justifyContent="flexStart"
+          direction="column"
+          gutterSize="none"
+        >
+          <EuiFlexItem grow={false}>
+            <EuiText size="xs">
+              <label htmlFor={firstItemId}>
+                <strong>{label}</strong>
+              </label>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiText size="xs" color="subdued">
+              <p>{helpText}</p>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        {/* The processor panel */}
+        <div className="pipelineProcessorsEditor__form__dragAndDropList__panel">
+          <EuiDragDropContext onDragEnd={onDragEnd}>
+            <EuiDroppable droppableId={droppableId}>
+              {value.map((item, idx) => {
+                return (
+                  <EuiDraggable
+                    customDragHandle
+                    spacing="none"
+                    draggableId={String(item.id)}
+                    index={idx}
+                    key={item.id}
+                  >
+                    {(provided) => {
+                      return (
+                        <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>
+                          </EuiFlexItem>
+                          <EuiFlexItem>
+                            <UseField<string>
+                              path={item.path}
+                              config={{
+                                validations: textValidation
+                                  ? [{ validator: textValidation }]
+                                  : undefined,
+                              }}
+                              readDefaultValueOnForm={!item.isNew}
+                            >
+                              {(field) => {
+                                const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(
+                                  field
+                                );
+                                return (
+                                  <EuiFlexGroup gutterSize="none" alignItems="center">
+                                    <EuiFlexItem>
+                                      <EuiFieldText
+                                        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">
+                                          <EuiIconTip
+                                            aria-label={errorMessage}
+                                            content={errorMessage}
+                                            type="alert"
+                                            color="danger"
+                                          />
+                                        </div>
+                                      </EuiFlexItem>
+                                    )}
+                                  </EuiFlexGroup>
+                                );
+                              }}
+                            </UseField>
+                          </EuiFlexItem>
+                          <EuiFlexItem grow={false}>
+                            {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>
+                      );
+                    }}
+                  </EuiDraggable>
+                );
+              })}
+            </EuiDroppable>
+          </EuiDragDropContext>
+          <EuiButtonEmpty iconType="plusInCircle" onClick={onAdd}>
+            {addLabel}
+          </EuiButtonEmpty>
+        </div>
+      </>
+    </EuiFormRow>
+  );
+}
+
+export const DragAndDropTextList = memo(
+  DragAndDropTextListComponent
+) as typeof DragAndDropTextListComponent;

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/field_components/index.ts

@@ -4,5 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export { DragAndDropTextList } from './drag_and_drop_text_list';
 export { XJsonEditor } from './xjson_editor';
 export { TextEditor } from './text_editor';

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/field_components/text_editor.scss

@@ -0,0 +1,5 @@
+.pipelineProcessorsEditor__form__textEditor {
+  &__panel {
+    box-shadow: none;
+  }
+}

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/field_components/text_editor.tsx

@@ -13,6 +13,8 @@ import {
   getFieldValidityAndErrorMessage,
 } from '../../../../../../shared_imports';
 
+import './text_editor.scss';
+
 interface Props {
   field: FieldHook<string>;
   editorProps: { [key: string]: any };
@@ -30,7 +32,11 @@ export const TextEditor: FunctionComponent<Props> = ({ field, editorProps }) =>
       error={errorMessage}
       fullWidth
     >
-      <EuiPanel paddingSize="s" hasShadow={false}>
+      <EuiPanel
+        className="pipelineProcessorsEditor__form__textEditor__panel"
+        paddingSize="s"
+        hasShadow={false}
+      >
         <CodeEditor value={value} onChange={setValue} {...(editorProps as any)} />
       </EuiPanel>
     </EuiFormRow>

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processor_form.container.tsx

@@ -60,6 +60,7 @@ export const ProcessorFormContainer: FunctionComponent<Props> = ({
   const { form } = useForm({
     defaultValue: { fields: getProcessor().options },
   });
+  const { subscribe } = form;
 
   const handleSubmit = useCallback(
     async (shouldCloseFlyout: boolean = true) => {
@@ -92,14 +93,9 @@ export const ProcessorFormContainer: FunctionComponent<Props> = ({
   }, [onSubmit, processor]);
 
   useEffect(() => {
-    const subscription = form.subscribe(onFormUpdate);
+    const subscription = subscribe(onFormUpdate);
     return subscription.unsubscribe;
-
-    // TODO: Address this issue
-    // For some reason adding `form` object to the dependencies array here is causing an
-    // infinite update loop.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [onFormUpdate]);
+  }, [onFormUpdate, subscribe]);
 
   if (processor) {
     return (

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processors/common_fields/processor_type_field.tsx

@@ -14,6 +14,7 @@ import {
   FieldConfig,
   UseField,
   fieldValidators,
+  useKibana,
 } from '../../../../../../../shared_imports';
 
 import { getProcessorDescriptor, mapProcessorTypeToDescriptor } from '../../../shared';
@@ -64,6 +65,10 @@ const typeConfig: FieldConfig<any, string> = {
 };
 
 export const ProcessorTypeField: FunctionComponent<Props> = ({ initialType }) => {
+  const {
+    services: { documentation },
+  } = useKibana();
+  const esDocUrl = documentation.getEsDocsBasePath();
   return (
     <UseField<string> config={typeConfig} defaultValue={initialType} path="type">
       {(typeField) => {
@@ -107,7 +112,7 @@ export const ProcessorTypeField: FunctionComponent<Props> = ({ initialType }) =>
           <EuiFormRow
             label={typeField.label}
             labelAppend={typeField.labelAppend}
-            helpText={typeof description === 'function' ? description() : description}
+            helpText={typeof description === 'function' ? description(esDocUrl) : description}
             error={error}
             isInvalid={isInvalid}
             fullWidth