[Ingest Pipelines] Drop into an empty tree (#76885) (#77312)

* add ability to drop processor into empty tree * added a test Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
elastic · Sep 14, 2020 · f68c597 · f68c597
1 parent 3286c83
commit f68c597
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 4 deletions.
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
@@ -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/...lic/application/components/pipeline_processors_editor/components/add_processor_button.tsx b/...lic/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/...ion/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss b/...ion/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/...tion/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx b/...tion/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 } });