[Ingest pipelines] Implement empty prompt for processors editor (#77655…

…) (#78284)
elastic · Sep 23, 2020 · fb80e69 · fb80e69
1 parent db591a8
commit fb80e69
Show file tree

Hide file tree

Showing 17 changed files with 232 additions and 93 deletions.
diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx
@@ -185,30 +185,5 @@ describe('<PipelinesCreate />', () => {
         expect(find('savePipelineError').find('li').length).toBe(8);
       });
     });
-
-    describe('test pipeline', () => {
-      beforeEach(async () => {
-        await act(async () => {
-          testBed = await setup();
-
-          const { waitFor } = testBed;
-
-          await waitFor('pipelineForm');
-        });
-      });
-
-      test('should open the test pipeline flyout', async () => {
-        const { actions, exists, find, waitFor } = testBed;
-
-        await act(async () => {
-          actions.clickAddDocumentsButton();
-          await waitFor('testPipelineFlyout');
-        });
-
-        // Verify test pipeline flyout opens
-        expect(exists('testPipelineFlyout')).toBe(true);
-        expect(find('testPipelineFlyout.title').text()).toBe('Test pipeline');
-      });
-    });
   });
 });
diff --git a/...ck/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx b/...ck/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx
@@ -11,8 +11,6 @@ import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer } from
 import { useForm, Form, FormConfig } from '../../../shared_imports';
 import { Pipeline, Processor } from '../../../../common/types';
 
-import './pipeline_form.scss';
-
 import { OnUpdateHandlerArg, OnUpdateHandler } from '../pipeline_processors_editor';
 
 import { PipelineRequestFlyout } from './pipeline_request_flyout';

diff --git a/...ins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx b/...ins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx
@@ -6,23 +6,19 @@
 
 import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiSpacer, EuiSwitch, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiSpacer, EuiSwitch } from '@elastic/eui';
 
 import { Processor } from '../../../../common/types';
 
 import { getUseField, getFormRow, Field } from '../../../shared_imports';
 
 import {
   ProcessorsEditorContextProvider,
-  GlobalOnFailureProcessorsEditor,
-  ProcessorsEditor,
   OnUpdateHandler,
   OnDoneLoadJsonHandler,
+  PipelineProcessorsEditor,
 } from '../pipeline_processors_editor';
 
-import { ProcessorsHeader } from './processors_header';
-import { OnFailureProcessorsTitle } from './on_failure_processors_title';
-
 interface Props {
   processors: Processor[];
   onFailure?: Processor[];
@@ -118,28 +114,12 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
       </FormRow>
 
       {/* Pipeline Processors Editor */}
-
       <ProcessorsEditorContextProvider
         onFlyoutOpen={onEditorFlyoutOpen}
         onUpdate={onProcessorsUpdate}
         value={{ processors, onFailure }}
       >
-        <div className="pipelineProcessorsEditor">
-          <EuiFlexGroup gutterSize="m" responsive={false} direction="column">
-            <EuiFlexItem grow={false}>
-              <ProcessorsHeader onLoadJson={onLoadJson} />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false} className="pipelineProcessorsEditor__container">
-              <ProcessorsEditor />
-
-              <EuiSpacer size="s" />
-
-              <OnFailureProcessorsTitle />
-
-              <GlobalOnFailureProcessorsEditor />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </div>
+        <PipelineProcessorsEditor onLoadJson={onLoadJson} />
       </ProcessorsEditorContextProvider>
     </>
   );

diff --git a/...ion/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx b/...ion/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx
@@ -11,12 +11,7 @@ import { notificationServiceMock, scopedHistoryMock } from 'src/core/public/mock
 import { LocationDescriptorObject } from 'history';
 import { KibanaContextProvider } from 'src/plugins/kibana_react/public';
 import { registerTestBed, TestBed } from '../../../../../../../test_utils';
-import {
-  ProcessorsEditorContextProvider,
-  Props,
-  ProcessorsEditor,
-  GlobalOnFailureProcessorsEditor,
-} from '../';
+import { ProcessorsEditorContextProvider, Props, PipelineProcessorsEditor } from '../';
 
 import {
   breadcrumbService,
@@ -90,7 +85,7 @@ const testBedSetup = registerTestBed<TestSubject>(
   (props: Props) => (
     <KibanaContextProvider services={appServices}>
       <ProcessorsEditorContextProvider {...props}>
-        <ProcessorsEditor /> <GlobalOnFailureProcessorsEditor />
+        <PipelineProcessorsEditor onLoadJson={jest.fn()} />
       </ProcessorsEditorContextProvider>
     </KibanaContextProvider>
   ),
@@ -210,4 +205,5 @@ type TestSubject =
   | 'processorSettingsFormFlyout'
   | 'processorTypeSelector'
   | 'pipelineEditorOnFailureTree'
+  | 'processorsEmptyPrompt'
   | string;
diff --git a/...cation/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx b/...cation/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx
@@ -55,6 +55,23 @@ describe('Pipeline Editor', () => {
     expect(arg.getData()).toEqual(testProcessors);
   });
 
+  describe('no processors', () => {
+    beforeEach(async () => {
+      testBed = await setup({
+        value: {
+          processors: [],
+        },
+        onFlyoutOpen: jest.fn(),
+        onUpdate,
+      });
+    });
+
+    it('displays an empty prompt if no processors are defined', () => {
+      const { exists } = testBed;
+      expect(exists('processorsEmptyPrompt')).toBe(true);
+    });
+  });
+
   describe('processors', () => {
     it('adds a new processor', async () => {
       const { actions } = testBed;

diff --git a/...lic/application/components/pipeline_processors_editor/components/add_processor_button.tsx b/...lic/application/components/pipeline_processors_editor/components/add_processor_button.tsx
@@ -6,30 +6,49 @@
 
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiButtonEmpty } from '@elastic/eui';
+import { EuiButtonEmpty, EuiButton } from '@elastic/eui';
 import { usePipelineProcessorsContext } from '../context';
 
 export interface Props {
   onClick: () => void;
+  renderButtonAsLink?: boolean;
 }
 
+const addProcessorButtonLabel = i18n.translate(
+  'xpack.ingestPipelines.pipelineEditor.addProcessorButtonLabel',
+  {
+    defaultMessage: 'Add a processor',
+  }
+);
+
 export const AddProcessorButton: FunctionComponent<Props> = (props) => {
-  const { onClick } = props;
+  const { onClick, renderButtonAsLink } = props;
   const {
     state: { editor },
   } = usePipelineProcessorsContext();
+
+  if (renderButtonAsLink) {
+    return (
+      <EuiButtonEmpty
+        data-test-subj="addProcessorButton"
+        disabled={editor.mode.id !== 'idle'}
+        iconSide="left"
+        iconType="plusInCircle"
+        onClick={onClick}
+      >
+        {addProcessorButtonLabel}
+      </EuiButtonEmpty>
+    );
+  }
+
   return (
-    <EuiButtonEmpty
+    <EuiButton
       data-test-subj="addProcessorButton"
       className="pipelineProcessorsEditor__tree__addProcessorButton"
       disabled={editor.mode.id !== 'idle'}
-      iconSide="left"
-      iconType="plusInCircle"
       onClick={onClick}
     >
-      {i18n.translate('xpack.ingestPipelines.pipelineEditor.addProcessorButtonLabel', {
-        defaultMessage: 'Add a processor',
-      })}
-    </EuiButtonEmpty>
+      {addProcessorButtonLabel}
+    </EuiButton>
   );
 };
diff --git a/...st_pipelines/public/application/components/pipeline_processors_editor/components/index.ts b/...st_pipelines/public/application/components/pipeline_processors_editor/components/index.ts
@@ -19,3 +19,9 @@ export { OnDoneLoadJsonHandler, LoadFromJsonButton } from './load_from_json';
 export { TestPipelineActions } from './test_pipeline';
 
 export { PipelineProcessorsItemTooltip, Position } from './pipeline_processors_editor_item_tooltip';
+
+export { ProcessorsEmptyPrompt } from './processors_empty_prompt';
+
+export { ProcessorsHeader } from './processors_header';
+
+export { OnFailureProcessorsTitle } from './on_failure_processors_title';
diff --git a/...ic/application/components/pipeline_processors_editor/components/load_from_json/button.tsx b/...ic/application/components/pipeline_processors_editor/components/load_from_json/button.tsx
@@ -15,7 +15,7 @@ interface Props {
 
 const i18nTexts = {
   buttonLabel: i18n.translate('xpack.ingestPipelines.pipelineEditor.loadFromJson.buttonLabel', {
-    defaultMessage: 'Import',
+    defaultMessage: 'Import processors',
   }),
 };
 

diff --git a/...line_form/on_failure_processors_title.tsx → ...omponents/on_failure_processors_title.tsx b/...line_form/on_failure_processors_title.tsx → ...omponents/on_failure_processors_title.tsx
@@ -8,7 +8,7 @@ import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { useKibana } from '../../../shared_imports';
+import { useKibana } from '../../../../shared_imports';
 
 export const OnFailureProcessorsTitle: FunctionComponent = () => {
   const { services } = useKibana();

diff --git a/...ponents/pipeline_processors_editor/components/processor_form/processor_form.container.tsx b/...ponents/pipeline_processors_editor/components/processor_form/processor_form.container.tsx
@@ -113,15 +113,15 @@ export const ProcessorFormContainer: FunctionComponent<Props> = ({
         handleSubmit={handleSubmit}
       />
     );
-  } else {
-    return (
-      <AddProcessorForm
-        {...rest}
-        form={form}
-        esDocsBasePath={services.documentation.getEsDocsBasePath()}
-        closeFlyout={onClose}
-        handleSubmit={handleSubmit}
-      />
-    );
   }
+
+  return (
+    <AddProcessorForm
+      {...rest}
+      form={form}
+      esDocsBasePath={services.documentation.getEsDocsBasePath()}
+      closeFlyout={onClose}
+      handleSubmit={handleSubmit}
+    />
+  );
 };
diff --git a/.../application/components/pipeline_processors_editor/components/processors_empty_prompt.tsx b/.../application/components/pipeline_processors_editor/components/processors_empty_prompt.tsx
@@ -0,0 +1,73 @@
+/*
+ * 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 React, { FunctionComponent } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiEmptyPrompt, EuiSpacer, EuiLink } from '@elastic/eui';
+import { useKibana } from '../../../../shared_imports';
+import { usePipelineProcessorsContext } from '../context';
+import { AddProcessorButton } from './add_processor_button';
+import { OnDoneLoadJsonHandler, LoadFromJsonButton } from './load_from_json';
+
+const i18nTexts = {
+  emptyPromptTitle: i18n.translate('xpack.ingestPipelines.pipelineEditor.emptyPrompt.title', {
+    defaultMessage: 'Add your first processor',
+  }),
+};
+
+export interface Props {
+  onLoadJson: OnDoneLoadJsonHandler;
+}
+
+export const ProcessorsEmptyPrompt: FunctionComponent<Props> = ({ onLoadJson }) => {
+  const { onTreeAction } = usePipelineProcessorsContext();
+  const { services } = useKibana();
+
+  return (
+    <EuiEmptyPrompt
+      title={<h2>{i18nTexts.emptyPromptTitle}</h2>}
+      data-test-subj="processorsEmptyPrompt"
+      body={
+        <p>
+          <FormattedMessage
+            id="xpack.ingestPipelines.pipelineEditor.emptyPrompt.description"
+            defaultMessage="Processors are used to pre-process documents before indexing. {learnMoreLink}"
+            values={{
+              learnMoreLink: (
+                <EuiLink
+                  href={services.documentation.getEsDocsBasePath() + '/ingest-processors.html'}
+                  target="_blank"
+                  external
+                >
+                  {i18n.translate(
+                    'xpack.ingestPipelines.pipelineEditor.processorsDocumentationLink',
+                    {
+                      defaultMessage: 'Learn more.',
+                    }
+                  )}
+                </EuiLink>
+              ),
+            }}
+          />
+        </p>
+      }
+      actions={
+        <>
+          <AddProcessorButton
+            onClick={() => {
+              onTreeAction({ type: 'addProcessor', payload: { target: ['processors'] } });
+            }}
+          />
+
+          <EuiSpacer size="m" />
+
+          <LoadFromJsonButton onDone={onLoadJson} />
+        </>
+      }
+    />
+  );
+};
diff --git a/...nents/pipeline_form/processors_header.tsx → ...s_editor/components/processors_header.tsx b/...nents/pipeline_form/processors_header.tsx → ...s_editor/components/processors_header.tsx
@@ -9,21 +9,32 @@ import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiTitle } from '@elastic/
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { useKibana } from '../../../shared_imports';
+import { useKibana } from '../../../../shared_imports';
 
-import {
-  LoadFromJsonButton,
-  OnDoneLoadJsonHandler,
-  TestPipelineActions,
-} from '../pipeline_processors_editor';
+import { LoadFromJsonButton, OnDoneLoadJsonHandler, TestPipelineActions } from './';
 
 export interface Props {
   onLoadJson: OnDoneLoadJsonHandler;
+  hasProcessors: boolean;
 }
 
-export const ProcessorsHeader: FunctionComponent<Props> = ({ onLoadJson }) => {
+export const ProcessorsHeader: FunctionComponent<Props> = ({ onLoadJson, hasProcessors }) => {
   const { services } = useKibana();
 
+  const ProcessorTitle: FunctionComponent = () => (
+    <EuiTitle size="s">
+      <h3>
+        {i18n.translate('xpack.ingestPipelines.pipelineEditor.processorsTreeTitle', {
+          defaultMessage: 'Processors',
+        })}
+      </h3>
+    </EuiTitle>
+  );
+
+  if (!hasProcessors) {
+    return <ProcessorTitle />;
+  }
+
   return (
     <EuiFlexGroup
       alignItems="center"
@@ -34,13 +45,7 @@ export const ProcessorsHeader: FunctionComponent<Props> = ({ onLoadJson }) => {
       <EuiFlexItem grow={false}>
         <EuiFlexGroup gutterSize="xs">
           <EuiFlexItem grow={false}>
-            <EuiTitle size="s">
-              <h3>
-                {i18n.translate('xpack.ingestPipelines.pipelineEditor.processorsTreeTitle', {
-                  defaultMessage: 'Processors',
-                })}
-              </h3>
-            </EuiTitle>
+            <ProcessorTitle />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <LoadFromJsonButton onDone={onLoadJson} />

diff --git a/...components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx b/...components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx
@@ -70,6 +70,7 @@ export const TreeNode: FunctionComponent<Props> = ({
         />
         <AddProcessorButton
           data-test-subj={stringSelector}
+          renderButtonAsLink
           onClick={() =>
             onAction({
               type: 'addProcessor',