[Ingest pipelines] Test pipeline enhancements

x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts

@@ -13,8 +13,8 @@ export const getFormActions = (testBed: TestBed) => {
     find('submitButton').simulate('click');
   };
 
-  const clickTestPipelineButton = () => {
-    find('testPipelineButton').simulate('click');
+  const clickAddDocumentsButton = () => {
+    find('addDocumentsButton').simulate('click');
   };
 
   const clickShowRequestLink = () => {
@@ -34,11 +34,12 @@ export const getFormActions = (testBed: TestBed) => {
     clickShowRequestLink,
     toggleVersionSwitch,
     toggleOnFailureSwitch,
-    clickTestPipelineButton,
+    clickAddDocumentsButton,
   };
 };
 
 export type PipelineFormTestSubjects =
+  | 'addDocumentsButton'
   | 'submitButton'
   | 'pageTitle'
   | 'savePipelineError'

x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx

@@ -201,7 +201,7 @@ describe('<PipelinesCreate />', () => {
         const { actions, exists, find, waitFor } = testBed;
 
         await act(async () => {
-          actions.clickTestPipelineButton();
+          actions.clickAddDocumentsButton();
           await waitFor('testPipelineFlyout');
         });
 

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/on_failure_processors_title.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiLink, EuiText, EuiTitle } from '@elastic/eui';
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -12,47 +12,41 @@ import { useKibana } from '../../../shared_imports';
 
 export const OnFailureProcessorsTitle: FunctionComponent = () => {
   const { services } = useKibana();
+
   return (
-    <EuiFlexGroup
-      alignItems="center"
-      gutterSize="none"
-      justifyContent="spaceBetween"
-      responsive={false}
-    >
-      <EuiFlexItem>
-        <EuiTitle size="s">
-          <h3>
-            <FormattedMessage
-              id="xpack.ingestPipelines.pipelineEditor.onFailureTreeTitle"
-              defaultMessage="Failure processors"
-            />
-          </h3>
-        </EuiTitle>
-        <EuiText size="s" color="subdued">
+    <div className="pipelineProcessorsEditor__onFailureTitle">
+      <EuiTitle size="xs">
+        <h4>
           <FormattedMessage
-            id="xpack.ingestPipelines.pipelineEditor.onFailureTreeDescription"
-            defaultMessage="The processors used to handle exceptions in this pipeline. {learnMoreLink}"
-            values={{
-              learnMoreLink: (
-                <EuiLink
-                  href={
-                    services.documentation.getEsDocsBasePath() +
-                    '/handling-failure-in-pipelines.html'
-                  }
-                  target="_blank"
-                >
-                  {i18n.translate(
-                    'xpack.ingestPipelines.pipelineEditor.onFailureProcessorsDocumentationLink',
-                    {
-                      defaultMessage: 'Learn more.',
-                    }
-                  )}
-                </EuiLink>
-              ),
-            }}
+            id="xpack.ingestPipelines.pipelineEditor.onFailureTreeTitle"
+            defaultMessage="Failure processors"
           />
-        </EuiText>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+        </h4>
+      </EuiTitle>
+      <EuiText size="s" color="subdued">
+        <FormattedMessage
+          id="xpack.ingestPipelines.pipelineEditor.onFailureTreeDescription"
+          defaultMessage="The processors used to handle exceptions in this pipeline. {learnMoreLink}"
+          values={{
+            learnMoreLink: (
+              <EuiLink
+                href={
+                  services.documentation.getEsDocsBasePath() + '/handling-failure-in-pipelines.html'
+                }
+                target="_blank"
+                external
+              >
+                {i18n.translate(
+                  'xpack.ingestPipelines.pipelineEditor.onFailureProcessorsDocumentationLink',
+                  {
+                    defaultMessage: 'Learn more.',
+                  }
+                )}
+              </EuiLink>
+            ),
+          }}
+        />
+      </EuiText>
+    </div>
   );
 };

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.scss

@@ -1,3 +1,11 @@
 .pipelineProcessorsEditor {
   margin-bottom: $euiSizeXL;
+
+  &__container {
+    background-color: $euiColorLightestShade;
+  }
+
+  &__onFailureTitle {
+    padding-left: $euiSizeS;
+  }
 }

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx

@@ -129,16 +129,13 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
             <EuiFlexItem grow={false}>
               <ProcessorsHeader onLoadJson={onLoadJson} />
             </EuiFlexItem>
-            <EuiFlexItem grow={false}>
+            <EuiFlexItem grow={false} className="pipelineProcessorsEditor__container">
               <ProcessorsEditor />
-            </EuiFlexItem>
-            <EuiFlexItem>
+
               <EuiSpacer size="s" />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
+
               <OnFailureProcessorsTitle />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
+
               <GlobalOnFailureProcessorsEditor />
             </EuiFlexItem>
           </EuiFlexGroup>

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/processors_header.tsx

@@ -14,7 +14,7 @@ import { useKibana } from '../../../shared_imports';
 import {
   LoadFromJsonButton,
   OnDoneLoadJsonHandler,
-  TestPipelineButton,
+  TestPipelineActions,
 } from '../pipeline_processors_editor';
 
 export interface Props {
@@ -23,21 +23,30 @@ export interface Props {
 
 export const ProcessorsHeader: FunctionComponent<Props> = ({ onLoadJson }) => {
   const { services } = useKibana();
+
   return (
     <EuiFlexGroup
       alignItems="center"
       gutterSize="s"
       justifyContent="spaceBetween"
       responsive={false}
     >
-      <EuiFlexItem>
-        <EuiTitle size="s">
-          <h3>
-            {i18n.translate('xpack.ingestPipelines.pipelineEditor.processorsTreeTitle', {
-              defaultMessage: 'Processors',
-            })}
-          </h3>
-        </EuiTitle>
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup gutterSize="xs">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="s">
+              <h3>
+                {i18n.translate('xpack.ingestPipelines.pipelineEditor.processorsTreeTitle', {
+                  defaultMessage: 'Processors',
+                })}
+              </h3>
+            </EuiTitle>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <LoadFromJsonButton onDone={onLoadJson} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
         <EuiText size="s" color="subdued">
           <FormattedMessage
             id="xpack.ingestPipelines.pipelineEditor.processorsTreeDescription"
@@ -47,6 +56,7 @@ export const ProcessorsHeader: FunctionComponent<Props> = ({ onLoadJson }) => {
                 <EuiLink
                   href={services.documentation.getEsDocsBasePath() + '/ingest-processors.html'}
                   target="_blank"
+                  external
                 >
                   {i18n.translate(
                     'xpack.ingestPipelines.pipelineEditor.processorsDocumentationLink',
@@ -61,10 +71,7 @@ export const ProcessorsHeader: FunctionComponent<Props> = ({ onLoadJson }) => {
         </EuiText>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <LoadFromJsonButton onDone={onLoadJson} />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <TestPipelineButton />
+        <TestPipelineActions />
       </EuiFlexItem>
     </EuiFlexGroup>
   );

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/documents_dropdown/documents_dropdown.scss

@@ -0,0 +1,3 @@
+.documentsDropdown__selectContainer {
+ max-width: 200px;
+}

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

@@ -0,0 +1,69 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+import { EuiSelect, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+
+import { Document } from '../../types';
+
+import './documents_dropdown.scss';
+
+const i18nTexts = {
+  ariaLabel: i18n.translate(
+    'xpack.ingestPipelines.pipelineEditor.testPipeline.documentsDropdownAriaLabel',
+    {
+      defaultMessage: 'Select documents',
+    }
+  ),
+  dropdownLabel: i18n.translate(
+    'xpack.ingestPipelines.pipelineEditor.testPipeline.documentsdropdownLabel',
+    {
+      defaultMessage: 'Documents:',
+    }
+  ),
+  buttonLabel: i18n.translate('xpack.ingestPipelines.pipelineEditor.testPipeline.buttonLabel', {
+    defaultMessage: 'Add documents',
+  }),
+};
+
+const getDocumentOptions = (documents: Document[]) =>
+  documents.map((doc, index) => ({
+    value: index,
+    text: doc._id,
+  }));
+
+interface Props {
+  documents: Document[];
+  selectedDocumentIndex: number;
+  updateSelectedDocument: (index: number) => void;
+}
+
+export const DocumentsDropdown: FunctionComponent<Props> = ({
+  documents,
+  selectedDocumentIndex,
+  updateSelectedDocument,
+}) => {
+  return (
+    <EuiFlexGroup alignItems="baseline" gutterSize="s" className="documentsDropdown">
+      <EuiFlexItem grow={false}>
+        <EuiText>
+          <span>{i18nTexts.dropdownLabel}</span>
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false} className="documentsDropdown__selectContainer">
+        <EuiSelect
+          compressed
+          options={getDocumentOptions(documents)}
+          value={selectedDocumentIndex}
+          onChange={(e) => {
+            updateSelectedDocument(Number(e.target.value));
+          }}
+          aria-label={i18nTexts.ariaLabel}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

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

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { DocumentsDropdown } from './documents_dropdown';

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

@@ -20,6 +20,8 @@ export { ProcessorRemoveModal } from './processor_remove_modal';
 
 export { OnDoneLoadJsonHandler, LoadFromJsonButton } from './load_from_json';
 
-export { TestPipelineButton } from './test_pipeline';
+export { TestPipelineActions } from './test_pipeline';
+
+export { DocumentsDropdown } from './documents_dropdown';
 
 export { PipelineProcessorsItemTooltip, Position } from './pipeline_processors_editor_item_tooltip';

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/button.tsx

@@ -5,7 +5,7 @@
  */
 import { i18n } from '@kbn/i18n';
 import React, { FunctionComponent } from 'react';
-import { EuiButton } from '@elastic/eui';
+import { EuiButtonEmpty } from '@elastic/eui';
 
 import { ModalProvider, OnDoneLoadJsonHandler } from './modal_provider';
 
@@ -15,7 +15,7 @@ interface Props {
 
 const i18nTexts = {
   buttonLabel: i18n.translate('xpack.ingestPipelines.pipelineEditor.loadFromJson.buttonLabel', {
-    defaultMessage: 'Load JSON',
+    defaultMessage: 'Import',
   }),
 };
 
@@ -24,9 +24,9 @@ export const LoadFromJsonButton: FunctionComponent<Props> = ({ onDone }) => {
     <ModalProvider onDone={onDone}>
       {(openModal) => {
         return (
-          <EuiButton size="s" onClick={openModal}>
+          <EuiButtonEmpty size="s" onClick={openModal} iconType="importAction">
             {i18nTexts.buttonLabel}
-          </EuiButton>
+          </EuiButtonEmpty>
         );
       }}
     </ModalProvider>