-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Ingest Node Pipelines] New patterns component for Grok processor (#7…
…6533) (#78434) * wip, issues with use fields getting cleared somehow * New drag and drop text list component - updated use array to add its own field so that we hook into form - added new drag and drop list component - wip on validation (empty lists validate immediately, which it should not) * remove box shadow from editor fields * Style grok patterns based on drag and drop in component templates - still have the issue with validation - need to get some design review at this point * fix i18n * update use_array - maintain the same API though * Grok processor should use the new use array interface - also fix the documentation using links in the processor type description. react was unhappy about hook order changing * fix patterns field validation to check validity of pattern entires * fix drag item styling * fix use of form in use effect and update behaviour of submit button * added smoke test for grok component * fix i18n * Implement PR feedback * Implemented design feedback - decreased spacing between list items and button - fixed a11y issue between label and first text field - moved help text to under label - refactored all of the field layout logic into drag and drop text list component. Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
- Loading branch information
1 parent
fd3ea82
commit 0d01637
Showing
13 changed files
with
370 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
...processors_editor/components/processor_form/field_components/drag_and_drop_text_list.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| .pipelineProcessorsEditor__form__dragAndDropList { | ||
| &__panel { | ||
| background-color: $euiColorLightestShade; | ||
| padding: $euiSizeM; | ||
| } | ||
|
|
||
| &__grabIcon { | ||
| margin-right: $euiSizeS; | ||
| } | ||
|
|
||
| &__removeButton { | ||
| margin-left: $euiSizeS; | ||
| } | ||
|
|
||
| &__errorIcon { | ||
| margin-left: -$euiSizeXL; | ||
| } | ||
|
|
||
| &__item { | ||
| background-color: $euiColorLightestShade; | ||
| padding-top: $euiSizeS; | ||
| padding-bottom: $euiSizeS; | ||
| } | ||
|
|
||
| &__labelContainer { | ||
| margin-bottom: $euiSizeXS; | ||
| } | ||
| } |
210 changes: 210 additions & 0 deletions
210
..._processors_editor/components/processor_form/field_components/drag_and_drop_text_list.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,210 @@ | ||
| /* | ||
| * 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'; | ||
| import React, { useState, useCallback, memo } from 'react'; | ||
| import uuid from 'uuid'; | ||
| import { | ||
| EuiButtonEmpty, | ||
| EuiButtonIcon, | ||
| EuiDragDropContext, | ||
| EuiDraggable, | ||
| EuiDroppable, | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiIcon, | ||
| EuiFieldText, | ||
| EuiIconTip, | ||
| EuiFormRow, | ||
| EuiText, | ||
| } from '@elastic/eui'; | ||
|
|
||
| import { | ||
| UseField, | ||
| ArrayItem, | ||
| ValidationFunc, | ||
| getFieldValidityAndErrorMessage, | ||
| } from '../../../../../../shared_imports'; | ||
|
|
||
| import './drag_and_drop_text_list.scss'; | ||
|
|
||
| interface Props { | ||
| label: string; | ||
| helpText: React.ReactNode; | ||
| error: string | null; | ||
| value: ArrayItem[]; | ||
| onMove: (sourceIdx: number, destinationIdx: number) => void; | ||
| onAdd: () => void; | ||
| onRemove: (id: number) => void; | ||
| addLabel: string; | ||
| /** | ||
| * Validation to be applied to every text item | ||
| */ | ||
| textValidation?: ValidationFunc<any, string, string>; | ||
| } | ||
|
|
||
| const i18nTexts = { | ||
| removeItemButtonAriaLabel: i18n.translate( | ||
| 'xpack.ingestPipelines.pipelineEditor.dragAndDropList.removeItemLabel', | ||
| { defaultMessage: 'Remove item' } | ||
| ), | ||
| }; | ||
|
|
||
| function DragAndDropTextListComponent({ | ||
| label, | ||
| helpText, | ||
| error, | ||
| value, | ||
| onMove, | ||
| onAdd, | ||
| onRemove, | ||
| addLabel, | ||
| textValidation, | ||
| }: Props): JSX.Element { | ||
| const [droppableId] = useState(() => uuid.v4()); | ||
| const [firstItemId] = useState(() => uuid.v4()); | ||
|
|
||
| const onDragEnd = useCallback( | ||
| ({ source, destination }) => { | ||
| if (source && destination) { | ||
| onMove(source.index, destination.index); | ||
| } | ||
| }, | ||
| [onMove] | ||
| ); | ||
| return ( | ||
| <EuiFormRow isInvalid={typeof error === 'string'} error={error} fullWidth> | ||
| <> | ||
| {/* Label and help text. Also wire up the htmlFor so the label points to the first text field. */} | ||
| <EuiFlexGroup | ||
| className="pipelineProcessorsEditor__form__dragAndDropList__labelContainer" | ||
| justifyContent="flexStart" | ||
| direction="column" | ||
| gutterSize="none" | ||
| > | ||
| <EuiFlexItem grow={false}> | ||
| <EuiText size="xs"> | ||
| <label htmlFor={firstItemId}> | ||
| <strong>{label}</strong> | ||
| </label> | ||
| </EuiText> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiText size="xs" color="subdued"> | ||
| <p>{helpText}</p> | ||
| </EuiText> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
|
|
||
| {/* The processor panel */} | ||
| <div className="pipelineProcessorsEditor__form__dragAndDropList__panel"> | ||
| <EuiDragDropContext onDragEnd={onDragEnd}> | ||
| <EuiDroppable droppableId={droppableId}> | ||
| {value.map((item, idx) => { | ||
| return ( | ||
| <EuiDraggable | ||
| customDragHandle | ||
| spacing="none" | ||
| draggableId={String(item.id)} | ||
| index={idx} | ||
| key={item.id} | ||
| > | ||
| {(provided) => { | ||
| return ( | ||
| <EuiFlexGroup | ||
| className="pipelineProcessorsEditor__form__dragAndDropList__item" | ||
| justifyContent="center" | ||
| alignItems="center" | ||
| gutterSize="none" | ||
| > | ||
| <EuiFlexItem grow={false}> | ||
| <div {...provided.dragHandleProps}> | ||
| <EuiIcon | ||
| className="pipelineProcessorsEditor__form__dragAndDropList__grabIcon" | ||
| type="grab" | ||
| /> | ||
| </div> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem> | ||
| <UseField<string> | ||
| path={item.path} | ||
| config={{ | ||
| validations: textValidation | ||
| ? [{ validator: textValidation }] | ||
| : undefined, | ||
| }} | ||
| readDefaultValueOnForm={!item.isNew} | ||
| > | ||
| {(field) => { | ||
| const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage( | ||
| field | ||
| ); | ||
| return ( | ||
| <EuiFlexGroup gutterSize="none" alignItems="center"> | ||
| <EuiFlexItem> | ||
| <EuiFieldText | ||
| id={idx === 0 ? firstItemId : undefined} | ||
| isInvalid={isInvalid} | ||
| value={field.value} | ||
| onChange={field.onChange} | ||
| compressed | ||
| fullWidth | ||
| /> | ||
| </EuiFlexItem> | ||
| {typeof errorMessage === 'string' && ( | ||
| <EuiFlexItem grow={false}> | ||
| <div className="pipelineProcessorsEditor__form__dragAndDropList__errorIcon"> | ||
| <EuiIconTip | ||
| aria-label={errorMessage} | ||
| content={errorMessage} | ||
| type="alert" | ||
| color="danger" | ||
| /> | ||
| </div> | ||
| </EuiFlexItem> | ||
| )} | ||
| </EuiFlexGroup> | ||
| ); | ||
| }} | ||
| </UseField> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| {value.length > 1 ? ( | ||
| <EuiButtonIcon | ||
| aria-label={i18nTexts.removeItemButtonAriaLabel} | ||
| className="pipelineProcessorsEditor__form__dragAndDropList__removeButton" | ||
| iconType="minusInCircle" | ||
| color="danger" | ||
| onClick={() => onRemove(item.id)} | ||
| /> | ||
| ) : ( | ||
| // Render a no-op placeholder button | ||
| <EuiIcon | ||
| className="pipelineProcessorsEditor__form__dragAndDropList__removeButton" | ||
| type="empty" | ||
| /> | ||
| )} | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| ); | ||
| }} | ||
| </EuiDraggable> | ||
| ); | ||
| })} | ||
| </EuiDroppable> | ||
| </EuiDragDropContext> | ||
| <EuiButtonEmpty iconType="plusInCircle" onClick={onAdd}> | ||
| {addLabel} | ||
| </EuiButtonEmpty> | ||
| </div> | ||
| </> | ||
| </EuiFormRow> | ||
| ); | ||
| } | ||
|
|
||
| export const DragAndDropTextList = memo( | ||
| DragAndDropTextListComponent | ||
| ) as typeof DragAndDropTextListComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 5 additions & 0 deletions
5
...ts/pipeline_processors_editor/components/processor_form/field_components/text_editor.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| .pipelineProcessorsEditor__form__textEditor { | ||
| &__panel { | ||
| box-shadow: none; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.