[Ingest Node Pipelines] Implement EuiInlineEdit into Inline Text Input Component#162398
Merged
breehall merged 9 commits intoelastic:mainfrom Jul 25, 2023
Merged
Conversation
…est_node_pipelines Merge code from main
Contributor
Author
|
@elasticmachine merge upstream |
EuiInlineEditEuiInlineEdit into Inline Text Input Component
Contributor
|
Pinging @elastic/eui-team (EUI) |
yuliacech
approved these changes
Jul 25, 2023
Contributor
yuliacech
left a comment
There was a problem hiding this comment.
Thanks a lot for working on this, @breehall!
Tested locally and everything works as expected. I think the design changes are okay with me, because now the field is aligned with the default EUI design.
Regarding your question about input fields being aligned to the left: I'm not aware of a specific reason for that. Looking at a long text, it might be better to allow the field to expand to full width. I think it would be okay to do in a follow up PR if you'd like to.
Only a minor comment regarding code changes: I don't think that we need the wrapping InlineTextInput component anymore and could directly use EuiInlineEdit in the PipelineProcessorsEditorItem component.
…l/kibana into InlineEdit/ingest_node_pipelines Merge in changes from GH UI
Contributor
Author
|
@elasticmachine merge upstream |
💚 Build Succeeded
Metrics [docs]Module Count
Async chunks
History
To update your PR or re-run it, just comment with: |
2 tasks
ThomThomson
pushed a commit
to ThomThomson/kibana
that referenced
this pull request
Aug 1, 2023
…put Component (elastic#162398) Included in elastic/eui#6778 ## Summary Hi team! EUI recently released the `EuiInlineEdit` component and the Ingest Node Pipelines page was identified as a good candidate for the new component. This PR is replaces the inner workings of the `InlineTextInput` component and replaces it with the new `EuiInlineEdit` component. I've included screens below of this change, but would love to hear your feedback and ensure this component installation meets all of the Ingest Node Pipeline needs. **Ingest Node Pipelines (Read Mode)**  **Ingest Node Pipelines (Edit Mode)**  --- Changes I'd like to call out: - There's no tooltip surrounding inline edit that displays the placeholder or text value. `EuiInlineEdit` includes a `title` for the read mode button, so the value can be seen on hover. (This feature will make it into the next Kibana upgrade and will not require any additional changes). - The `placeholder` styling is slightly different than the previous version Design Question: Should the inline edit to be constrained to the left side of the pipeline? I didn't want to change this aspect without prior input. ### Checklist Delete any items that are not applicable to this PR. - ~[ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)~ - ~[ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials~ - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - ~[ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~ - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Included in elastic/eui#6778
Summary
Hi team! EUI recently released the
EuiInlineEditcomponent and the Ingest Node Pipelines page was identified as a good candidate for the new component. This PR is replaces the inner workings of theInlineTextInputcomponent and replaces it with the newEuiInlineEditcomponent.I've included screens below of this change, but would love to hear your feedback and ensure this component installation meets all of the Ingest Node Pipeline needs.
Ingest Node Pipelines (Read Mode)
Ingest Node Pipelines (Edit Mode)
Changes I'd like to call out:
EuiInlineEditincludes atitlefor the read mode button, so the value can be seen on hover. (This feature will make it into the next Kibana upgrade and will not require any additional changes).placeholderstyling is slightly different than the previous versionDesign Question:
Should the inline edit to be constrained to the left side of the pipeline? I didn't want to change this aspect without prior input.
Checklist
Delete any items that are not applicable to this PR.
[ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support[ ] Documentation was added for features that require explanation or tutorials[ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list