github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

Clean up error state of Ingest Pipelines drag and drop list items. (#137244) (#137613)

Browse source 
(cherry picked from commit 405c9041e7)

Co-authored-by: CJ Cenizal <cj.cenizal@elastic.co>
This commit is contained in:
Kibana Machine 2022-07-29 14:18:57 -04:00 • committed by GitHub
parent 0164329875
commit 82ddf1eb99
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

8
x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/grok.test.ts
View file

@ -62,16 +62,16 @@ describe('Processor: Grok', () => {
const {
actions: { saveNewProcessor },
form,
exists,
} = testBed;
// Click submit button with only the type defined
await saveNewProcessor();
// Expect form error as "field" is a required parameter
expect(form.getErrorsMessages()).toEqual(['A field value is required.']);
// Patterns field is also required; it uses EuiDraggable and only shows an error icon when invalid
expect(exists('droppableList.errorIcon')).toBe(true);
expect(form.getErrorsMessages()).toEqual([
'A field value is required.', // "Field" input
'A value is required.', // First input in "Patterns" list
]);
});
test('saves with default parameter values', async () => {

1
x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx
View file

@ -182,7 +182,6 @@ type TestSubject =
| 'copyFromInput'
| 'trimSwitch.input'
| 'droppableList.addButton'
| 'droppableList.errorIcon'
| 'droppableList.input-0'
| 'droppableList.input-1'
| 'droppableList.input-2';

16
x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/drag_and_drop_text_list.scss
View file

@ -4,18 +4,10 @@
padding: $euiSizeM;
}
&__grabIcon {
margin-right: $euiSizeS;
}
&__removeButton {
margin-left: $euiSizeS;
}
&__errorIcon {
margin-left: -$euiSizeXL;
}
&__item {
background-color: $euiColorLightestShade;
padding-top: $euiSizeS;
@ -26,3 +18,11 @@
margin-bottom: $euiSizeXS;
}
}
.pipelineProcessorsEditor__form__dragAndDropList__grabIcon {
height: $euiSizeXL;
width: $euiSizeXL;
display: flex;
align-items: center;
justify-content: center;
}

52
x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/drag_and_drop_text_list.tsx
View file

@ -18,7 +18,6 @@ import {
EuiFlexItem,
EuiIcon,
EuiFieldText,
EuiIconTip,
EuiFormRow,
EuiText,
} from '@elastic/eui';
@ -133,15 +132,14 @@ function DragAndDropTextListComponent({
<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
{...provided.dragHandleProps}
className="pipelineProcessorsEditor__form__dragAndDropList__grabIcon"
>
<EuiIcon type="grab" />
</div>
</EuiFlexItem>
<EuiFlexItem>
@ -160,34 +158,17 @@ function DragAndDropTextListComponent({
const { isInvalid, errorMessage } =
getFieldValidityAndErrorMessage(field);
return (
<EuiFlexGroup gutterSize="none" alignItems="center">
<EuiFlexItem>
<EuiFieldText
data-test-subj={`input-${idx}`}
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"
data-test-subj="errorIcon"
>
<EuiIconTip
aria-label={errorMessage}
content={errorMessage}
type="alert"
color="danger"
/>
</div>
</EuiFlexItem>
)}
</EuiFlexGroup>
<EuiFormRow isInvalid={isInvalid} error={errorMessage} fullWidth>
<EuiFieldText
data-test-subj={`input-${idx}`}
id={idx === 0 ? firstItemId : undefined}
isInvalid={isInvalid}
value={field.value}
onChange={field.onChange}
compressed
fullWidth
/>
</EuiFormRow>
);
}}
</UseField>
@ -200,6 +181,7 @@ function DragAndDropTextListComponent({
iconType="minusInCircle"
color="danger"
onClick={() => onRemove(item.id)}
size="s"
/>
) : (
// Render a no-op placeholder button