Skip to content

Commit

Permalink
First iteration of drag and drop tree on feature parity
Browse files Browse the repository at this point in the history
  • Loading branch information
@jloleysens
jloleysens committed Apr 23, 2020
1 parent 736c98e commit 74b69c7
Show file tree
Hide file tree
Showing 10 changed files with 233 additions and 172 deletions.
3 changes: 2 additions & 1 deletion ...ck/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
if (processorsEditorState.isValid === undefined) {
(async () => {
const valid = await processorsEditorState.validate();
const { processors } = processorsEditorState.getData();
if (valid) {
onSave({ ...formData, processors } as Pipeline);
}
Expand All @@ -100,7 +101,7 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
return;
}

const { processors } = processorsEditorState!.getData();
const { processors } = processorsEditorState.getData();
onSave({ ...formData, processors } as Pipeline);
} else {
onSave(formData as Pipeline);
Expand Down
66 changes: 51 additions & 15 deletions ...omponents/pipeline_processors_editor/components/drag_and_drop_tree/drag_and_drop_tree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,65 @@
import React, { FunctionComponent } from 'react';
import { EuiDragDropContext, EuiDroppable, EuiPanel } from '@elastic/eui';

import { ProcessorInternal } from '../../types';
import { ProcessorInternal, DraggableLocation } from '../../types';

import { TreeNode } from './tree_node';

interface OnDragEndArgs {
source: DraggableLocation;
destination: DraggableLocation;
}

export interface Props {
processors: ProcessorInternal;
processors: ProcessorInternal[];
onDragEnd: (args: OnDragEndArgs) => void;
}

export interface PrivateProps extends Props {
export interface PrivateProps extends Omit<Props, 'onDragEnd'> {
pathSelector: string;
}

const PrivateDragAndDropTree: FunctionComponent<PrivateProps> = ({
processors,
pathSelector,
}) => {
return <EuiPanel>
<EuiDragDropContext>
<EuiDroppable droppableId={pathSelector} spacing="m"></EuiDroppable>
{}
</EuiDragDropContext>
</EuiPanel>
const ROOT_PATH_ID = 'ROOT_PATH_ID';

const PrivateDragAndDropTree: FunctionComponent<PrivateProps> = ({ processors, pathSelector }) => {
return (
<EuiPanel>
<EuiDroppable droppableId={pathSelector || ROOT_PATH_ID} spacing="m">
{processors.map((processor, idx) => {
return (
<TreeNode
key={idx}
processor={processor}
pathSelector={pathSelector + `${idx}`}
index={idx}
/>
);
})}
</EuiDroppable>
</EuiPanel>
);
};

export const DragAndDropTree: FunctionComponent<Props> = ({ processors }) => {
return <PrivateDragAndDropTree pathSelector="." processors={processors}
export const DragAndDropTree: FunctionComponent<Props> = ({ processors, onDragEnd }) => {
return (
<EuiDragDropContext
onDragEnd={({ source, destination }) => {
if (source && destination) {
onDragEnd({
source: {
index: source.index,
pathSelector: source.droppableId === ROOT_PATH_ID ? undefined : source.droppableId,
},
destination: {
index: destination.index,
pathSelector:
destination.droppableId === ROOT_PATH_ID ? undefined : destination.droppableId,
},
});
}
}}
>
<PrivateDragAndDropTree pathSelector="" processors={processors} />
</EuiDragDropContext>
);
};
2 changes: 2 additions & 0 deletions .../application/components/pipeline_processors_editor/components/drag_and_drop_tree/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,5 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

export { DragAndDropTree } from './drag_and_drop_tree';
118 changes: 41 additions & 77 deletions ...ication/components/pipeline_processors_editor/components/drag_and_drop_tree/tree_node.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,99 +5,63 @@
*/

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;
}
import { ProcessorInternal } from '../../types';

interface Props {
pathSelector: string;
processors: ProcessorInternal[];
onDragEnd: (args: OnDragEndArgs) => void;
processor: ProcessorInternal;
index: number;
}

export const TreeNode: FunctionComponent<Props> = ({ processors, onDragEnd, pathSelector }) => {
export const TreeNode: FunctionComponent<Props> = ({ processor, pathSelector, index }) => {
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}
<EuiDraggable
spacing="m"
draggableId={pathSelector}
key={pathSelector}
index={index}
customDragHandle={true}
>
{provided => (
<EuiPanel paddingSize="m">
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={false}>
<div {...provided.dragHandleProps}>
<EuiIcon type="grab" />
</div>
</EuiFlexItem>
<EuiFlexItem grow={false}>{processor.type}</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty size="s" onClick={() => {}}>
{i18n.translate('xpack.ingestPipelines.pipelineEditor.editProcessorButtonLabel', {
defaultMessage: 'Edit',
})}
</EuiButtonEmpty>
<EuiButtonEmpty
size="s"
onClick={
() => {}
// dispatch({ type: 'removeProcessor', payload: { processor } })
}
>
{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>
{i18n.translate('xpack.ingestPipelines.pipelineEditor.deleteProcessorButtonLabel', {
defaultMessage: 'Delete',
})}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
)}
</EuiDraggable>
);
};
3 changes: 3 additions & 0 deletions ...st_pipelines/public/application/components/pipeline_processors_editor/components/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,7 @@
*/

export { SettingsFormFlyout } from './settings_form_flyout';

export { ProcessorSettingsForm, ProcessorSettingsFromOnSubmitArg } from './processor_settings_form';

export { DragAndDropTree } from './drag_and_drop_tree';
80 changes: 10 additions & 70 deletions ...s/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,12 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { i18n } from '@kbn/i18n';
import React, { FunctionComponent, useState, useMemo, useEffect, useCallback } from 'react';
import {
EuiPanel,
EuiFlexGroup,
EuiFlexItem,
EuiDragDropContext,
EuiDroppable,
EuiDraggable,
EuiIcon,
EuiButton,
EuiButtonEmpty,
} from '@elastic/eui';
import { EuiPanel, EuiButton } from '@elastic/eui';

import { Processor } from '../../../../common/types';

import { SettingsFormFlyout } from './components';
import { SettingsFormFlyout, DragAndDropTree } from './components';
import { deserialize } from './data_in';
import { serialize, SerializeResult } from './data_out';
import { useEditorState } from './reducer';
Expand Down Expand Up @@ -79,64 +68,15 @@ export const PipelineProcessorsEditor: FunctionComponent<Props> = ({
return (
<>
<EuiPanel>
<EuiDragDropContext
onDragEnd={({ source, destination }) => {
if (source && destination) {
dispatch({
type: 'reorderProcessors',
payload: { sourceIdx: source.index, destIdx: destination.index },
});
}
<DragAndDropTree
onDragEnd={args => {
dispatch({
type: 'moveProcessor',
payload: args,
});
}}
>
<EuiDroppable droppableId="PipelineEditorDroppableArea" 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 */}
processors={processors}
/>
<EuiButton onClick={() => setIsAddingNewProcessor(true)}>Add a processor</EuiButton>
</EuiPanel>
{selectedProcessor || isAddingNewProcessor ? (
Expand Down
Loading

0 comments on commit 74b69c7

Please sign in to comment.