[Cases] Replace `EditableTitle` component with `EuiInlineEdit` component #162095

breehall · 2023-07-17T21:38:18Z

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

Edit Mode

Insufficient Permissions

Error States

Release Phases

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~~
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
~~If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list~~
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

…ases with the EuiInlineEdit component

…e returning

breehall · 2023-07-18T13:40:38Z

x-pack/plugins/cases/public/components/header_page/title.tsx

+export const TitleExperimentalBadge = React.memo(ExperimentalBadge);



I chose to export these as individual components to also be used in EditableTitle (Cases) instead of removing it so I don't disturb other usages.

breehall · 2023-07-18T13:41:15Z

x-pack/plugins/cases/public/components/header_page/index.tsx

@@ -87,7 +87,7 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
  return (
    <Header border={border} data-test-subj={dataTestSubj}>
      <EuiFlexGroup alignItems="center">
-        <FlexItem>
+        <FlexItem css={{ overflow: 'hidden' }}>


Required for the overflow of very long case titles.

breehall · 2023-07-18T13:42:38Z

x-pack/plugins/cases/public/components/header_page/editable_title.tsx

+  return (
+    <>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={true} css={releasePhase && { overflow: 'hidden' }}>


Truncate the case title when a releasePhase is present so both the title and beta badge can be displayed next to each other on the same line.

adcoelho · 2023-07-19T10:25:35Z

I played around a bit with it and it seems to work fine and cover the functionality we need 👍 👍
(Pinging @mdefazio for the design differences to the previous version)

js-jankisalvi

Hi Bree,
Thanks a lot for the new component!! I love it. ❤️

I tested different scenarios and they work as expected. 🎉

Just a minor point:
current case title is 34 px, while new component's title is around 22 px.

mdefazio · 2023-07-20T13:49:47Z

I'm good with the smaller font size. Thanks for updating this--works great!

…_cases Merge the latest from main

…_cases Merge in main

…a-test-subj to resolve cases tests

… assist with testing

breehall · 2023-07-25T18:35:22Z

@elasticmachine merge upstream

elasticmachine · 2023-07-25T20:17:02Z

Pinging @elastic/eui-team (EUI)

elasticmachine · 2023-07-28T06:06:54Z

Pinging @elastic/response-ops-cases (Feature:Cases)

elasticmachine · 2023-07-28T06:06:54Z

Pinging @elastic/response-ops (Team:ResponseOps)

js-jankisalvi

Verified locally, changes look good 👍

Few questions:

In cases page form fields disable the save button when element has errors.
We have an open issue to align all case view page fields with same behaviour: Disable submit if the form has errors
Do you think we can disable save button when title has errors?
CC: @cnasikas @mdefazio
When there is an error in the title and user changes the value, shouldn't the error message be removed?

title.mov

adcoelho · 2023-07-28T13:53:35Z

x-pack/plugins/cases/public/components/header_page/editable_title.tsx

-      return;
-    }
+      if (newTitleValue !== title) {
+        onSubmit(newTitleValue);


How about?

Suggested change

onSubmit(newTitleValue);

onSubmit(newTitleValue.trim());

It looks a bit weird that when editing the spaces are displayed but when showing the title they aren't.

Screen.Recording.2023-07-28.at.15.52.41.mov

What was it we decided on this @js-jankisalvi @cnasikas ?

I think we discussed to handle it separately because current production behaviour is same as here.
However it is a small change so I am okay if Bree wants to make a change in this PR.

adcoelho · 2023-07-28T13:57:54Z

x-pack/plugins/cases/public/components/header_page/editable_title.tsx

-            iconType="save"
-            onClick={onClickSubmit}
+  return (
+    <>


nit: I think this fragment is unnecessary because we are only returning EuiFlexGroup 😅

adcoelho

Tested and looks good 👍

Just wondering about trimming the text.

- Remove fragment surrounding inline edit component - Trim title before saving - Add onChange listener to input to reset errors upon input change

…o InlineEdit/obs_cases Pulling in changes made from Gihub

…_cases Pulling from main

breehall · 2023-07-28T14:51:27Z

@adcoelho @js-jankisalvi

In my latest commit (56dabbd), I added a few tweaks and also updated the error message handling so the message is removed when the user starts typing again. The message will return if the input is invalid at save.

Screen.Recording.2023-07-28.at.10.46.37.AM.mov

… are errors within the edit mode text input

cnasikas · 2023-07-31T07:20:26Z

In cases page form fields disable the save button when element has errors.
We have #161461 to align all case view page fields with same behaviour: Disable submit if the form has errors
Do you think we can disable save button when title has errors?
CC: @cnasikas @mdefazio

I think we can move forward and merge the PR as it is and then fix it ourselves when we start working on the issue.

js-jankisalvi

Awesome work 🎉

cee-chen · 2023-07-31T15:30:20Z

@elasticmachine merge upstream

cee-chen · 2023-07-31T15:30:59Z

@cnasikas, @js-jankisalvi, thank you so much for your time and reviews! Bree is out today/tomorrow so I'll go ahead and merge on her behalf once CI passes. Please feel free to tweak UX & implementation in the way your team prefers, and thanks for being our first adopters of EuiInlineEdit!

cee-chen · 2023-07-31T15:32:16Z

Oh, wait, I just noticed we're still missing one pending approval/review from @elastic/security-solution - any idea who to ping for that? :)

cee-chen · 2023-07-31T16:59:40Z

@elasticmachine merge upstream

…-ref HEAD~1..HEAD --fix'

cee-chen · 2023-07-31T18:46:58Z

@elasticmachine merge upstream

kibana-ci · 2023-07-31T20:13:27Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: de4dffc

Failed CI Steps

Investigations - Security Solution Cypress Tests #1

Test Failures

[job] [logs] Investigations - Security Solution Cypress Tests #1 / Alert details expandable flyout right panel overview tab insights section should display threat intelligence section should display threat intelligence section

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
`cases`	421.7KB	421.1KB	-533.0B

History

💔 Build #146094 failed cec0c75
💔 Build #146034 failed 513e8ab
💚 Build #145695 succeeded 3b905aa
💚 Build #145571 succeeded 4083469
💛 Build #144757 was flaky 2d675fc

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

machadoum

Threat Hunting - Explore changes LGTM!

cee-chen · 2023-08-01T13:20:02Z

Woo hoo, thanks y'all! :)

…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]>

breehall added 2 commits July 17, 2023 16:57

[Obs-Cases] Replace the Editable Title component in Observability - C…

4367c3e

…ases with the EuiInlineEdit component

Return inline edit component instead of assigning to a variable befor…

409a148

…e returning

breehall commented Jul 18, 2023

View reviewed changes

js-jankisalvi reviewed Jul 19, 2023

View reviewed changes

breehall added 6 commits July 20, 2023 15:25

[Cases] Resolve unit tests for editable title component

d843eef

Merge branch 'main' of github.com:breehall/kibana into InlineEdit/obs…

9855ca5

…_cases Merge the latest from main

Merge branch 'main' of github.com:breehall/kibana into InlineEdit/obs…

1bdad3b

…_cases Merge in main

Provide Editable Title's read mode button with a more descriptive dat…

13d0d86

…a-test-subj to resolve cases tests

Provide all inline edit buttons and inputs with data-test-subj IDs to…

088b2e8

… assist with testing

Update data-test-subj targets for inline edit targeting within tests

ab5bec5

Merge branch 'main' into InlineEdit/obs_cases

2d675fc

breehall marked this pull request as ready for review July 25, 2023 20:15

breehall requested review from a team as code owners July 25, 2023 20:15

breehall changed the title ~~[Cases] (WIP) Replace EditableTitle component with EuiInlineEdit component~~ [Cases] Replace EditableTitle component with EuiInlineEdit component Jul 25, 2023

breehall added release_note:skip Skip the PR/issue when compiling release notes EUI labels Jul 25, 2023

breehall requested a review from js-jankisalvi July 27, 2023 13:57

cnasikas added Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) Feature:Cases Cases feature labels Jul 28, 2023

cnasikas added the v8.10.0 label Jul 28, 2023

js-jankisalvi reviewed Jul 28, 2023

View reviewed changes

adcoelho reviewed Jul 28, 2023

View reviewed changes

adcoelho approved these changes Jul 28, 2023

View reviewed changes

breehall added 3 commits July 28, 2023 10:29

[PR Feedback]

56dabbd

- Remove fragment surrounding inline edit component - Trim title before saving - Add onChange listener to input to reset errors upon input change

Merge branch 'InlineEdit/obs_cases' of github.com:breehall/kibana int…

a431441

…o InlineEdit/obs_cases Pulling in changes made from Gihub

Merge branch 'main' of github.com:breehall/kibana into InlineEdit/obs…

4083469

…_cases Pulling from main

[PR Feedback] Updated edit mode save button to be disabled when there…

3b905aa

… are errors within the edit mode text input

js-jankisalvi approved these changes Jul 31, 2023

View reviewed changes

Merge branch 'main' into InlineEdit/obs_cases

513e8ab

cee-chen enabled auto-merge (squash) July 31, 2023 15:31

kibanamachine added 2 commits July 31, 2023 12:59

Merge branch 'main' into InlineEdit/obs_cases

d1debba

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

cec0c75

…-ref HEAD~1..HEAD --fix'

kibanamachine requested a review from a team as a code owner July 31, 2023 17:06

Merge branch 'main' into InlineEdit/obs_cases

de4dffc

machadoum approved these changes Aug 1, 2023

View reviewed changes

cee-chen merged commit 8c7c621 into elastic:main Aug 1, 2023

kibanamachine added the backport:skip This commit does not require backporting label Aug 1, 2023

cee-chen mentioned this pull request Aug 1, 2023

[EuiInlineEdit] Implement EuiInlineEdit in Kibana elastic/eui#6778

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Cases] Replace `EditableTitle` component with `EuiInlineEdit` component #162095

[Cases] Replace `EditableTitle` component with `EuiInlineEdit` component #162095

breehall commented Jul 17, 2023 •

edited by cee-chen

Loading

breehall Jul 18, 2023

breehall Jul 18, 2023

breehall Jul 18, 2023

adcoelho commented Jul 19, 2023

js-jankisalvi left a comment

mdefazio commented Jul 20, 2023

breehall commented Jul 25, 2023

elasticmachine commented Jul 25, 2023

elasticmachine commented Jul 28, 2023

elasticmachine commented Jul 28, 2023

js-jankisalvi left a comment •

edited

Loading

adcoelho Jul 28, 2023

js-jankisalvi Jul 28, 2023

adcoelho Jul 28, 2023

adcoelho left a comment

breehall commented Jul 28, 2023

cnasikas commented Jul 31, 2023

js-jankisalvi left a comment

cee-chen commented Jul 31, 2023

cee-chen commented Jul 31, 2023

cee-chen commented Jul 31, 2023

cee-chen commented Jul 31, 2023

cee-chen commented Jul 31, 2023

kibana-ci commented Jul 31, 2023

machadoum left a comment

cee-chen commented Aug 1, 2023

		export const TitleExperimentalBadge = React.memo(ExperimentalBadge);

[Cases] Replace EditableTitle component with EuiInlineEdit component #162095

[Cases] Replace EditableTitle component with EuiInlineEdit component #162095

Conversation

breehall commented Jul 17, 2023 • edited by cee-chen Loading

Summary

Checklist

For maintainers

breehall Jul 18, 2023

Choose a reason for hiding this comment

breehall Jul 18, 2023

Choose a reason for hiding this comment

breehall Jul 18, 2023

Choose a reason for hiding this comment

adcoelho commented Jul 19, 2023

js-jankisalvi left a comment

Choose a reason for hiding this comment

mdefazio commented Jul 20, 2023

breehall commented Jul 25, 2023

elasticmachine commented Jul 25, 2023

elasticmachine commented Jul 28, 2023

elasticmachine commented Jul 28, 2023

js-jankisalvi left a comment • edited Loading

Choose a reason for hiding this comment

adcoelho Jul 28, 2023

Choose a reason for hiding this comment

js-jankisalvi Jul 28, 2023

Choose a reason for hiding this comment

adcoelho Jul 28, 2023

Choose a reason for hiding this comment

adcoelho left a comment

Choose a reason for hiding this comment

breehall commented Jul 28, 2023

cnasikas commented Jul 31, 2023

js-jankisalvi left a comment

Choose a reason for hiding this comment

cee-chen commented Jul 31, 2023

cee-chen commented Jul 31, 2023

cee-chen commented Jul 31, 2023

cee-chen commented Jul 31, 2023

cee-chen commented Jul 31, 2023

kibana-ci commented Jul 31, 2023

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Async chunks

History

machadoum left a comment

Choose a reason for hiding this comment

cee-chen commented Aug 1, 2023

[Cases] Replace `EditableTitle` component with `EuiInlineEdit` component #162095

[Cases] Replace `EditableTitle` component with `EuiInlineEdit` component #162095

breehall commented Jul 17, 2023 •

edited by cee-chen

Loading

js-jankisalvi left a comment •

edited

Loading