Major WiP

Started working on the drag-and-drop-tree and updated some
typings stuff

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

@@ -0,0 +1,35 @@
+/*
+ * 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 { EuiDragDropContext, EuiDroppable, EuiPanel } from '@elastic/eui';
+
+import { ProcessorInternal } from '../../types';
+import { TreeNode } from './tree_node';
+
+export interface Props {
+  processors: ProcessorInternal;
+}
+
+export interface PrivateProps extends Props {
+  pathSelector: string;
+}
+
+const PrivateDragAndDropTree: FunctionComponent<PrivateProps> = ({
+  processors,
+  pathSelector,
+}) => {
+  return <EuiPanel>
+    <EuiDragDropContext>
+      <EuiDroppable droppableId={pathSelector} spacing="m"></EuiDroppable>
+      {}
+    </EuiDragDropContext>
+  </EuiPanel>
+};
+
+export const DragAndDropTree: FunctionComponent<Props> = ({ processors }) => {
+  return <PrivateDragAndDropTree pathSelector="." processors={processors}
+};

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

@@ -0,0 +1,5 @@
+/*
+ * 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.
+ */

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

@@ -0,0 +1,103 @@
+/*
+ * 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 { ProcessorInternal } from '../../types';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiDragDropContext,
+  EuiDraggable,
+  EuiDroppable,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPanel,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+interface OnDragEndArgs {
+  pathSelector: string;
+  sourceIndex: number;
+  destinationIndex: number;
+}
+
+interface Props {
+  pathSelector: string;
+  processors: ProcessorInternal[];
+  onDragEnd: (args: OnDragEndArgs) => void;
+}
+
+export const TreeNode: FunctionComponent<Props> = ({ processors, onDragEnd, pathSelector }) => {
+  return (
+    <EuiPanel>
+      <EuiDragDropContext
+        onDragEnd={({ source, destination }) => {
+          if (source && destination) {
+            onDragEnd({
+              pathSelector,
+              sourceIndex: source.index,
+              destinationIndex: destination.index,
+            });
+            // dispatch({
+            //   type: 'reorderProcessors',
+            //   payload: { sourceIdx: source.index, destIdx: destination.index },
+            // });
+          }
+        }}
+      >
+        <EuiDroppable droppableId={pathSelector} spacing="m">
+          {processors.map((processor, idx) => {
+            const { type, id } = processor;
+            return (
+              <EuiDraggable
+                spacing="m"
+                key={id}
+                draggableId={id}
+                index={idx}
+                customDragHandle={true}
+              >
+                {provided => (
+                  <EuiPanel paddingSize="m">
+                    <EuiFlexGroup alignItems="center">
+                      <EuiFlexItem grow={false}>
+                        <div {...provided.dragHandleProps}>
+                          <EuiIcon type="grab" />
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem grow={false}>{type}</EuiFlexItem>
+                      <EuiFlexItem grow={false}>
+                        <EuiButtonEmpty size="s" onClick={() => setSelectedProcessor(processor)}>
+                          {i18n.translate(
+                            'xpack.ingestPipelines.pipelineEditor.editProcessorButtonLabel',
+                            { defaultMessage: 'Edit' }
+                          )}
+                        </EuiButtonEmpty>
+                        <EuiButtonEmpty
+                          size="s"
+                          onClick={() =>
+                            dispatch({ type: 'removeProcessor', payload: { processor } })
+                          }
+                        >
+                          {i18n.translate(
+                            'xpack.ingestPipelines.pipelineEditor.deleteProcessorButtonLabel',
+                            { defaultMessage: 'Delete' }
+                          )}
+                        </EuiButtonEmpty>
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  </EuiPanel>
+                )}
+              </EuiDraggable>
+            );
+          })}
+        </EuiDroppable>
+      </EuiDragDropContext>
+      {/* TODO: Translate */}
+      <EuiButton onClick={() => setIsAddingNewProcessor(true)}>Add a processor</EuiButton>
+    </EuiPanel>
+  );
+};

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

@@ -6,6 +6,11 @@
 
 import { ESCommonProcessorOptions } from '../../../../common/types';
 
+export interface DraggableLocation {
+  pathSelector: string;
+  index: number;
+}
+
 export type ProcessorOptions<CustomProcessorOptions = {}> = ESCommonProcessorOptions &
   CustomProcessorOptions;