[EuiInlineEdit] Implement EuiInlineEdit in Kibana
#6778
Assignees
Labels
task
A task associated with a larger Meta issue
Comments
This was referenced Jun 21, 2023
This was referenced Jul 17, 2023
breehall
added a commit
to elastic/kibana
that referenced
this issue
Jul 25, 2023
…put Component (#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 <[email protected]>
cee-chen
pushed a commit
to elastic/kibana
that referenced
this issue
Aug 1, 2023
…ent (#162095) Included in elastic/eui#6778 Hi team! EUI recently released the EuiInlineEdit component and the Cases page title was identified as a good candidate for the new component. This PR is replaces the inner workings of the EditableTitle component and replaces it with the new EuiInlineEdit component. ## Summary Replace inner component within `EditableTitle` to use to the new `EuiInlineEdit` component. **Read Mode** <img width="1116" alt="image" src="https://github.com/elastic/kibana/assets/40739624/c3aef300-7d7f-44cd-b0a2-da72ef8bedf9"> --- **Edit Mode** <img width="1093" alt="image" src="https://github.com/elastic/kibana/assets/40739624/0567ea9b-29e4-4443-bcbe-7a45f09738ff"> --- **Insufficient Permissions** <img width="1090" alt="image" src="https://github.com/elastic/kibana/assets/40739624/7a83ebc6-7319-415d-a4a8-015fd6f6893b"> --- **Error States** <img width="1093" alt="image" src="https://github.com/elastic/kibana/assets/40739624/1e5360b0-4fe8-4a25-a5e2-d3b235fc6242"> <img width="1108" alt="image" src="https://github.com/elastic/kibana/assets/40739624/ecfdcdc5-9360-4d25-8a4b-7132ec2caa67"> --- **Release Phases** <img width="1096" alt="image" src="https://github.com/elastic/kibana/assets/40739624/cb0ac70b-1ba2-4f3a-8966-25b38043c4a1"> <img width="1096" alt="image" src="https://github.com/elastic/kibana/assets/40739624/23597578-0a36-4190-8e84-804cecbbdf78"> --- ### 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) ### For maintainers - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: Kibana Machine <[email protected]>
|
@breehall is the Cloud UI (serverless) checkbox separate from the ingest node pipelines work? Or are all steps of this issue complete at this point? |
ThomThomson
pushed a commit
to ThomThomson/kibana
that referenced
this issue
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 <[email protected]>
ThomThomson
pushed a commit
to ThomThomson/kibana
that referenced
this issue
Aug 1, 2023
…ent (elastic#162095) Included in elastic/eui#6778 Hi team! EUI recently released the EuiInlineEdit component and the Cases page title was identified as a good candidate for the new component. This PR is replaces the inner workings of the EditableTitle component and replaces it with the new EuiInlineEdit component. ## Summary Replace inner component within `EditableTitle` to use to the new `EuiInlineEdit` component. **Read Mode** <img width="1116" alt="image" src="https://github.com/elastic/kibana/assets/40739624/c3aef300-7d7f-44cd-b0a2-da72ef8bedf9"> --- **Edit Mode** <img width="1093" alt="image" src="https://github.com/elastic/kibana/assets/40739624/0567ea9b-29e4-4443-bcbe-7a45f09738ff"> --- **Insufficient Permissions** <img width="1090" alt="image" src="https://github.com/elastic/kibana/assets/40739624/7a83ebc6-7319-415d-a4a8-015fd6f6893b"> --- **Error States** <img width="1093" alt="image" src="https://github.com/elastic/kibana/assets/40739624/1e5360b0-4fe8-4a25-a5e2-d3b235fc6242"> <img width="1108" alt="image" src="https://github.com/elastic/kibana/assets/40739624/ecfdcdc5-9360-4d25-8a4b-7132ec2caa67"> --- **Release Phases** <img width="1096" alt="image" src="https://github.com/elastic/kibana/assets/40739624/cb0ac70b-1ba2-4f3a-8966-25b38043c4a1"> <img width="1096" alt="image" src="https://github.com/elastic/kibana/assets/40739624/23597578-0a36-4190-8e84-804cecbbdf78"> --- ### 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) ### For maintainers - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: Kibana Machine <[email protected]>
|
@cee-chen All of the steps are complete in terms of implementation for inline edit at this point! Since the two we were mainly targeting are complete, I'm going to close this issue as complete. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Placeholder
The goal of this issue is to track and document the areas of Kibana where
EuiInlineEditcan be adopted.EditableTitlecomponent withEuiInlineEditcomponent kibana#162095)Observability Details
Target component:
EditableTitlehttps://github.com/elastic/kibana/blob/main/x-pack/plugins/cases/public/components/header_page/editable_title.tsx
EuiInlineEditinto Inline Text Input Component kibana#162398)Stack Management Details
Target Component:
InlineTextInputPath: x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/pipeline_processors_editor_item/inline_text_input.tsx
The text was updated successfully, but these errors were encountered: