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

cjcenizal · 2022-07-26T23:11:30Z

While investigating #124027, I noticed that the error state for the Grok processor patterns list looked wonky:

There's a second error icon that's being manually rendered on top of the error icon built into EUI. That second error icon displays the error message in a tooltip when you hover over it.

I fixed this by removing the manual error icon and using the EuiFormRow component to render the message. I think this is both an aesthetic and a usability improvement because you know longer need to "look with your mouse" to find the error message, you can just look with your eyes.

I'm backporting this as far back as is allowed because it's relatively non-invasive and it's a bugfix.

elasticmachine · 2022-07-26T23:11:33Z

Pinging @elastic/platform-deployment-management (Team:Deployment Management)

cchaos

🙌 Inline messages are way more helpful!

Is there any way to keep the drag and remove icon buttons inline with the input when an invalid message is showing instead of keeping them centered?

cchaos · 2022-07-27T17:00:11Z

...nents/pipeline_editor/components/processor_form/field_components/drag_and_drop_text_list.tsx

                                  <EuiFlexGroup gutterSize="none" alignItems="center">
                                    <EuiFlexItem>


Since there's only one flex item now, you can probably remove this flex group/item wrapper too.

cjcenizal · 2022-07-27T20:02:31Z

@cchaos I'd love to align those items the way you suggested, but I can't see a way to do it given the structure of the components and the use of flexbox to maintain alignment on the x axis. I was planning on just accepting the misalignment in the error state. What are your thoughts?

cchaos · 2022-07-27T20:15:06Z

You should be able to just bump up the button icon size to s to match the height of the compressed input. https://codesandbox.io/s/modest-dust-4m0div?file=/demo.js

Beneficially, this gives a better (larger) hit target for those buttons.

cjcenizal · 2022-07-27T21:01:09Z

Thanks @cchaos! I couldn't use EuiButtonIcon because it messed up the drag-and-drop behavior. So I added some custom styles to achieve the same affect. Can you take another look?

cchaos · 2022-07-27T21:23:11Z

...ents/pipeline_editor/components/processor_form/field_components/drag_and_drop_text_list.scss

+.pipelineProcessorsEditor__form__dragAndDropList__grabIcon {
+  height: $euiSizeXL;
+  width: $euiSizeXL;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }


Or you can just add padding since you already know it's always going to be a compressed input with a small icon.

Suggested change

.pipelineProcessorsEditor__form__dragAndDropList__grabIcon {

height: $euiSizeXL;

width: $euiSizeXL;

display: flex;

align-items: center;

justify-content: center;

}

.pipelineProcessorsEditor__form__dragAndDropList__grabIcon {

padding-top: $euiSizeS;

}

Here's how it looks with just the padding:

It gets a little cramped on either side. I think I'd prefer to leave it as-is for symmetry with the EuiIButtonIcon on the other side.

Ah yeah, my example assumed you were using gutterSize.

kibana-ci · 2022-07-28T00:15:05Z

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`ingestPipelines`	453.3KB	453.0KB	-341.0B

History

💔 Build #61291 failed 5b255d1
💔 Build #61198 failed dedac7c
💔 Build #61012 failed 5efe3d5f5777c24d0053c406f9c688a0db38f3a0

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cchaos

Sass and screenshots LGTM

yuliacech

Changes LGTM, @cjcenizal! Thanks a lot for fixing this, also verified the fix locally.

…lastic#137244) (cherry picked from commit 405c904)

kibanamachine · 2022-07-29T17:05:01Z

💔 Some backports could not be created

Status	Branch	Result
❌	7.17	Backport failed because of merge conflicts
✅	8.3
✅	8.4

Note: Successful backport PRs will be merged automatically after passing CI.

Manual backport

To create the backport manually run:

node scripts/backport --pr 137244

Questions ?

Please refer to the Backport tool documentation

…137244) (#137612) (cherry picked from commit 405c904) Co-authored-by: CJ Cenizal <[email protected]>

…137244) (#137613) (cherry picked from commit 405c904) Co-authored-by: CJ Cenizal <[email protected]>

cjcenizal requested review from a team as code owners July 26, 2022 23:11

CJ Cenizal added 2 commits July 27, 2022 09:08

Clean up error state of Ingest Pipelines drag and drop list items.

a8f8755

Update tests.

dedac7c

cjcenizal force-pushed the ingest-pipelines/drag-and-drop-list-error-state branch from 13668c3 to dedac7c Compare July 27, 2022 16:08

cchaos reviewed Jul 27, 2022

View reviewed changes

Remove unnecessary flex wrapper.

93fade0

Fix alignment of buttons in error state.

5b255d1

cchaos reviewed Jul 27, 2022

View reviewed changes

Merge branch 'main' into ingest-pipelines/drag-and-drop-list-error-state

061c788

cchaos approved these changes Jul 28, 2022

View reviewed changes

yuliacech approved these changes Jul 29, 2022

View reviewed changes

cjcenizal added backport:all-open Backport to all branches that could still receive a release and removed backport:all-open Backport to all branches that could still receive a release labels Jul 29, 2022

cjcenizal merged commit 405c904 into elastic:main Jul 29, 2022

cjcenizal deleted the ingest-pipelines/drag-and-drop-list-error-state branch July 29, 2022 17:00

kibanamachine added the v8.5.0 label Jul 29, 2022

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Jul 29, 2022

Clean up error state of Ingest Pipelines drag and drop list items. (e…

90f01ca

…lastic#137244) (cherry picked from commit 405c904)

kibanamachine mentioned this pull request Jul 29, 2022

[8.3] Clean up error state of Ingest Pipelines drag and drop list items. (#137244) #137612

Merged

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Jul 29, 2022

Clean up error state of Ingest Pipelines drag and drop list items. (e…

7929982

…lastic#137244) (cherry picked from commit 405c904)

kibanamachine mentioned this pull request Jul 29, 2022

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

Merged

kibanamachine added a commit that referenced this pull request Jul 29, 2022

Clean up error state of Ingest Pipelines drag and drop list items. (#…

1eecaff

…137244) (#137612) (cherry picked from commit 405c904) Co-authored-by: CJ Cenizal <[email protected]>

kibanamachine added the v8.3.4 label Jul 29, 2022

kibanamachine added a commit that referenced this pull request Jul 29, 2022

Clean up error state of Ingest Pipelines drag and drop list items. (#…

82ddf1e

…137244) (#137613) (cherry picked from commit 405c904) Co-authored-by: CJ Cenizal <[email protected]>

kibanamachine added the v8.4.0 label Jul 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

cjcenizal commented Jul 26, 2022 •

edited by kibanamachine

Loading

elasticmachine commented Jul 26, 2022

cchaos left a comment

cchaos Jul 27, 2022

cjcenizal Jul 27, 2022

cjcenizal commented Jul 27, 2022

cchaos commented Jul 27, 2022 •

edited

Loading

cjcenizal commented Jul 27, 2022

cchaos Jul 27, 2022

cjcenizal Jul 28, 2022

cchaos Jul 28, 2022

kibana-ci commented Jul 28, 2022

cchaos left a comment

yuliacech left a comment

kibanamachine commented Jul 29, 2022

		<EuiFlexGroup gutterSize="none" alignItems="center">
		<EuiFlexItem>

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

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

Conversation

cjcenizal commented Jul 26, 2022 • edited by kibanamachine Loading

elasticmachine commented Jul 26, 2022

cchaos left a comment

Choose a reason for hiding this comment

cchaos Jul 27, 2022

Choose a reason for hiding this comment

cjcenizal Jul 27, 2022

Choose a reason for hiding this comment

cjcenizal commented Jul 27, 2022

cchaos commented Jul 27, 2022 • edited Loading

cjcenizal commented Jul 27, 2022

cchaos Jul 27, 2022

Choose a reason for hiding this comment

cjcenizal Jul 28, 2022

Choose a reason for hiding this comment

cchaos Jul 28, 2022

Choose a reason for hiding this comment

kibana-ci commented Jul 28, 2022

💚 Build Succeeded

Metrics [docs]

Async chunks

History

cchaos left a comment

Choose a reason for hiding this comment

yuliacech left a comment

Choose a reason for hiding this comment

kibanamachine commented Jul 29, 2022

💔 Some backports could not be created

Manual backport

Questions ?

cjcenizal commented Jul 26, 2022 •

edited by kibanamachine

Loading

cchaos commented Jul 27, 2022 •

edited

Loading