Skip to content

Commit

Permalink
refactor processors editor item to multiple files
Browse files Browse the repository at this point in the history 
also refactored i18n into it's own file. would be good to come
up with a pttaern for doing this more broadly.
  • Loading branch information
@jloleysens
jloleysens committed Jun 12, 2020
1 parent 1419d3b commit 634f9d0
Show file tree
Hide file tree
Showing 5 changed files with 183 additions and 128 deletions.
84 changes: 84 additions & 0 deletions ...ts/pipeline_processors_editor/components/pipeline_processors_editor_item/context_menu.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
/*
* 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, useState } from 'react';

import { EuiContextMenuItem, EuiContextMenuPanel, EuiPopover, EuiButtonIcon } from '@elastic/eui';

import { editorItemMessages } from './messages';

interface Props {
disabled: boolean;
showAddOnFailure: boolean;
onDuplicate: () => void;
onDelete: () => void;
onAddOnFailure: () => void;
}

export const ContextMenu: FunctionComponent<Props> = ({
showAddOnFailure,
onDuplicate,
onAddOnFailure,
onDelete,
disabled,
}) => {
const [isOpen, setIsOpen] = useState<boolean>(false);

const contextMenuItems = [
<EuiContextMenuItem
key="duplicate"
icon="copy"
onClick={() => {
setIsOpen(false);
onDuplicate();
}}
>
{editorItemMessages.duplicateButtonLabel}
</EuiContextMenuItem>,
showAddOnFailure ? undefined : (
<EuiContextMenuItem
key="addOnFailure"
icon="indexClose"
onClick={() => {
setIsOpen(false);
onAddOnFailure();
}}
>
{editorItemMessages.addOnFailureButtonLabel}
</EuiContextMenuItem>
),
<EuiContextMenuItem
key="delete"
icon="trash"
color="danger"
onClick={() => {
setIsOpen(false);
onDelete();
}}
>
{editorItemMessages.deleteButtonLabel}
</EuiContextMenuItem>,
].filter(Boolean) as JSX.Element[];

return (
<EuiPopover
anchorPosition="leftCenter"
panelPaddingSize="none"
isOpen={isOpen}
closePopover={() => setIsOpen(false)}
button={
<EuiButtonIcon
disabled={disabled}
onClick={() => setIsOpen((v) => !v)}
iconType="boxesHorizontal"
aria-label={editorItemMessages.moreButtonAriaLabel}
/>
}
>
<EuiContextMenuPanel items={contextMenuItems} />;
</EuiPopover>
);
};
58 changes: 58 additions & 0 deletions ...ponents/pipeline_processors_editor/components/pipeline_processors_editor_item/messages.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
/*
* 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 { i18n } from '@kbn/i18n';

export const editorItemMessages = {
moveButtonLabel: i18n.translate('xpack.ingestPipelines.pipelineEditor.item.moveButtonLabel', {
defaultMessage: 'Move this processor',
}),
editorButtonLabel: i18n.translate(
'xpack.ingestPipelines.pipelineEditor.item.editButtonAriaLabel',
{
defaultMessage: 'Edit this processor',
}
),
duplicateButtonLabel: i18n.translate(
'xpack.ingestPipelines.pipelineEditor.item.moreMenu.duplicateButtonLabel',
{
defaultMessage: 'Duplicate this processor',
}
),
addOnFailureButtonLabel: i18n.translate(
'xpack.ingestPipelines.pipelineEditor.item.moreMenu.addOnFailureHandlerButtonLabel',
{
defaultMessage: 'Add on failure handler',
}
),
cancelMoveButtonLabel: i18n.translate(
'xpack.ingestPipelines.pipelineEditor.item.cancelMoveButtonAriaLabel',
{
defaultMessage: 'Cancel moving this processor',
}
),
deleteButtonLabel: i18n.translate(
'xpack.ingestPipelines.pipelineEditor.item.moreMenu.deleteButtonLabel',
{
defaultMessage: 'Delete',
}
),
moreButtonAriaLabel: i18n.translate(
'xpack.ingestPipelines.pipelineEditor.item.moreButtonAriaLabel',
{
defaultMessage: 'Show more actions for this processor',
}
),
processorTypeLabel: ({ type }: { type: string }) =>
i18n.translate('xpack.ingestPipelines.pipelineEditor.item.textInputAriaLabel', {
defaultMessage: 'Provide a description for this {type} processor',
values: { type },
}),
descriptionPlaceholder: i18n.translate(
'xpack.ingestPipelines.pipelineEditor.item.descriptionPlaceholder',
{ defaultMessage: 'No description' }
),
};
154 changes: 31 additions & 123 deletions ...ors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,8 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { i18n } from '@kbn/i18n';
import React, { FunctionComponent, memo, useState } from 'react';
import {
EuiButtonIcon,
EuiContextMenuItem,
EuiContextMenuPanel,
EuiFlexGroup,
EuiFlexItem,
EuiPopover,
EuiText,
EuiToolTip,
} from '@elastic/eui';
import React, { FunctionComponent, memo } from 'react';
import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';

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

Expand All @@ -24,6 +14,8 @@ import { usePipelineProcessorsContext } from '../../context';
import './pipeline_processors_editor_item.scss';

import { InlineTextInput } from './inline_text_input';
import { ContextMenu } from './context_menu';
import { editorItemMessages } from './messages';

export interface Handlers {
onMove: () => void;
Expand All @@ -43,61 +35,11 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
const {
state: { editor, processorsDispatch },
} = usePipelineProcessorsContext();
const [isContextMenuOpen, setIsContextMenuOpen] = useState<boolean>(false);

const disabled = editor.mode.id !== 'idle';
const shouldDarkBold =
editor.mode.id === 'editingProcessor' ? processor.id === editor.mode.arg.processor.id : true;
const isDarkBold =
editor.mode.id !== 'editingProcessor' || processor.id === editor.mode.arg.processor.id;

const contextMenuItems = [
<EuiContextMenuItem
key="duplicate"
icon="copy"
onClick={() => {
setIsContextMenuOpen(false);
processorsDispatch({
type: 'duplicateProcessor',
payload: {
source: selector,
},
});
}}
>
{i18n.translate('xpack.ingestPipelines.pipelineEditor.item.moreMenu.duplicateButtonLabel', {
defaultMessage: 'Duplicate this processor',
})}
</EuiContextMenuItem>,
processor.onFailure?.length ? undefined : (
<EuiContextMenuItem
key="addOnFailure"
icon="indexClose"
onClick={() => {
setIsContextMenuOpen(false);
editor.setMode({ id: 'creatingProcessor', arg: { selector } });
}}
>
{i18n.translate(
'xpack.ingestPipelines.pipelineEditor.item.moreMenu.addOnFailureHandlerButtonLabel',
{
defaultMessage: 'Add on failure handler',
}
)}
</EuiContextMenuItem>
),
<EuiContextMenuItem
key="delete"
icon="trash"
color="danger"
onClick={() => {
setIsContextMenuOpen(false);
editor.setMode({ id: 'removingProcessor', arg: { selector } });
}}
>
{i18n.translate('xpack.ingestPipelines.pipelineEditor.item.moreMenu.deleteButtonLabel', {
defaultMessage: 'Delete',
})}
</EuiContextMenuItem>,
].filter(Boolean) as JSX.Element[];
return (
<EuiFlexGroup
gutterSize="none"
Expand All @@ -108,7 +50,7 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
<EuiFlexItem>
<EuiFlexGroup gutterSize="m" alignItems="center" responsive={false}>
<EuiFlexItem grow={false}>
<EuiText color={shouldDarkBold ? undefined : 'subdued'}>
<EuiText color={isDarkBold ? undefined : 'subdued'}>
<b>{processor.type}</b>
</EuiText>
</EuiFlexItem>
Expand Down Expand Up @@ -136,29 +78,15 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
},
});
}}
ariaLabel={i18n.translate(
'xpack.ingestPipelines.pipelineEditor.item.textInputAriaLabel',
{
defaultMessage: 'Provide a description for this {type} processor',
values: { type: processor.type },
}
)}
ariaLabel={editorItemMessages.processorTypeLabel({ type: processor.type })}
text={description}
placeholder={i18n.translate(
'xpack.ingestPipelines.pipelineEditor.item.descriptionPlaceholder',
{ defaultMessage: 'No description' }
)}
placeholder={editorItemMessages.descriptionPlaceholder}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
disabled={disabled}
aria-label={i18n.translate(
'xpack.ingestPipelines.pipelineEditor.item.editButtonAriaLabel',
{
defaultMessage: 'Edit this processor',
}
)}
aria-label={editorItemMessages.editorButtonLabel}
iconType="pencil"
size="s"
onClick={() => {
Expand All @@ -172,33 +100,16 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
<EuiFlexItem grow={false}>
{selected ? (
<EuiButtonIcon
aria-label={i18n.translate(
'xpack.ingestPipelines.pipelineEditor.item.cancelMoveButtonAriaLabel',
{
defaultMessage: 'Cancel moving this processor',
}
)}
aria-label={editorItemMessages.cancelMoveButtonLabel}
size="s"
onClick={onCancelMove}
iconType="crossInACircleFilled"
/>
) : (
<EuiToolTip
content={i18n.translate(
'xpack.ingestPipelines.pipelineEditor.item.moveButtonLabel',
{
defaultMessage: 'Move this processor',
}
)}
>
<EuiToolTip content={editorItemMessages.moveButtonLabel}>
<EuiButtonIcon
disabled={disabled}
aria-label={i18n.translate(
'xpack.ingestPipelines.pipelineEditor.item.moveButtonAriaLabel',
{
defaultMessage: 'Move this processor',
}
)}
aria-label={editorItemMessages.moveButtonLabel}
size="s"
onClick={onMove}
iconType="sortable"
Expand All @@ -209,27 +120,24 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiPopover
anchorPosition="leftCenter"
panelPaddingSize="none"
isOpen={isContextMenuOpen}
closePopover={() => setIsContextMenuOpen(false)}
button={
<EuiButtonIcon
disabled={disabled}
onClick={() => setIsContextMenuOpen((v) => !v)}
iconType="boxesHorizontal"
aria-label={i18n.translate(
'xpack.ingestPipelines.pipelineEditor.item.moreButtonAriaLabel',
{
defaultMessage: 'Show more actions for this processor',
}
)}
/>
}
>
<EuiContextMenuPanel items={contextMenuItems} />
</EuiPopover>
<ContextMenu
disabled={disabled}
showAddOnFailure={!processor.onFailure?.length}
onAddOnFailure={() => {
editor.setMode({ id: 'creatingProcessor', arg: { selector } });
}}
onDelete={() => {
editor.setMode({ id: 'removingProcessor', arg: { selector } });
}}
onDuplicate={() => {
processorsDispatch({
type: 'duplicateProcessor',
payload: {
source: selector,
},
});
}}
/>
</EuiFlexItem>
</EuiFlexGroup>
);
Expand Down
13 changes: 9 additions & 4 deletions ...components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ export interface Props {
movingProcessor?: ProcessorInfo;
}

const INDENTATION_PX = 34;

export const TreeNode: FunctionComponent<Props> = ({
processor,
processorInfo,
Expand Down Expand Up @@ -55,15 +57,18 @@ export const TreeNode: FunctionComponent<Props> = ({
if (!processor.onFailure?.length) {
return;
}

const onFailureHandlerLabelClasses = classNames({
'pipelineProcessorsEditor__tree__onFailureHandlerLabel--withDropZone': movingProcessor
? movingProcessor.id !== processor.onFailure[0].id && movingProcessor.id !== processor.id
: false,
'pipelineProcessorsEditor__tree__onFailureHandlerLabel--withDropZone':
movingProcessor != null &&
movingProcessor.id !== processor.onFailure[0].id &&
movingProcessor.id !== processor.id,
});

return (
<div
className="pipelineProcessorsEditor__tree__onFailureHandlerContainer"
style={{ marginLeft: `${level * 34}px` }}
style={{ marginLeft: `${level * INDENTATION_PX}px` }}
>
<div className="pipelineProcessorsEditor__tree__onFailureHandlerLabelContainer">
<EuiText
Expand Down
Loading

0 comments on commit 634f9d0

Please sign in to comment.