From 111bfb9e31518bb5a93c30ae8012d25203f1574a Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Mon, 14 Sep 2020 12:46:12 +0200
Subject: [PATCH] [Ingest Pipelines] Drop into an empty tree (#76885)

* add ability to drop processor into empty tree

* added a test

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../pipeline_processors_editor.test.tsx       |  9 +++++++
 .../components/add_processor_button.tsx       |  1 +
 .../processors_tree/processors_tree.scss      |  4 +++
 .../processors_tree/processors_tree.tsx       | 27 ++++++++++++++++---
 4 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx
index b12f324528167..38c652f41e5e1 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx
@@ -184,5 +184,14 @@ describe('Pipeline Editor', () => {
       expect(find('processors>0.moveItemButton').props().disabled).toBe(true);
       expect(find('processors>1.moveItemButton').props().disabled).toBe(true);
     });
+
+    it('can move a processor into an empty tree', () => {
+      const { actions } = testBed;
+      actions.moveProcessor('processors>0', 'onFailure.dropButtonEmptyTree');
+      const [onUpdateResult2] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1];
+      const data = onUpdateResult2.getData();
+      expect(data.processors).toEqual([testProcessors.processors[1]]);
+      expect(data.on_failure).toEqual([testProcessors.processors[0]]);
+    });
   });
 });
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/add_processor_button.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/add_processor_button.tsx
index 276d684e3dca1..4aabcc1d59d73 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/add_processor_button.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/add_processor_button.tsx
@@ -21,6 +21,7 @@ export const AddProcessorButton: FunctionComponent<Props> = (props) => {
   return (
     <EuiButtonEmpty
       data-test-subj="addProcessorButton"
+      className="pipelineProcessorsEditor__tree__addProcessorButton"
       disabled={editor.mode.id !== 'idle'}
       iconSide="left"
       iconType="plusInCircle"
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss
index a54cc994ab730..25e4eb7320bf4 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss
@@ -51,6 +51,10 @@
     }
   }
 
+  &__addProcessorButton {
+    width: fit-content;
+  }
+
   &__onFailureHandlerContainer {
     margin-top: $euiSizeS;
     margin-bottom: $euiSizeS;
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx
index 4458bd66c88de..8b344a137f3a8 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx
@@ -7,12 +7,14 @@ import React, { FunctionComponent, memo, useRef, useEffect } from 'react';
 import { EuiFlexGroup, EuiFlexItem, keys } from '@elastic/eui';
 import { List, WindowScroller } from 'react-virtualized';
 
+import { DropSpecialLocations } from '../../constants';
 import { ProcessorInternal, ProcessorSelector } from '../../types';
 import { selectorToDataTestSubject } from '../../utils';
+import { AddProcessorButton } from '../add_processor_button';
+
+import { PrivateTree, DropZoneButton } from './components';
 
 import './processors_tree.scss';
-import { AddProcessorButton } from '../add_processor_button';
-import { PrivateTree } from './components';
 
 export interface ProcessorInfo {
   id: string;
@@ -96,8 +98,25 @@ export const ProcessorsTree: FunctionComponent<Props> = memo((props) => {
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiFlexGroup responsive={false} justifyContent="flexStart" gutterSize="none">
-          <EuiFlexItem data-test-subj={selectorToDataTestSubject(baseSelector)} grow={false}>
+        <EuiFlexGroup responsive={false} alignItems="flexStart" gutterSize="none">
+          <EuiFlexItem data-test-subj={selectorToDataTestSubject(baseSelector)}>
+            {!processors.length && (
+              <DropZoneButton
+                data-test-subj="dropButtonEmptyTree"
+                isVisible={Boolean(movingProcessor)}
+                isDisabled={false}
+                onClick={(event) => {
+                  event.preventDefault();
+                  onAction({
+                    type: 'move',
+                    payload: {
+                      destination: baseSelector.concat(DropSpecialLocations.top),
+                      source: movingProcessor!.selector,
+                    },
+                  });
+                }}
+              />
+            )}
             <AddProcessorButton
               onClick={() => {
                 onAction({ type: 'addProcessor', payload: { target: baseSelector } });