[Cases] Replace EditableTitle component with EuiInlineEdit compon…

…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 <42973632+kibanamachine@users.noreply.github.com>
elastic · Aug 1, 2023 · 8c7c621 · 8c7c621
1 parent 8683621
commit 8c7c621
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 155 deletions.
diff --git a/x-pack/plugins/cases/public/components/header_page/editable_title.test.tsx b/x-pack/plugins/cases/public/components/header_page/editable_title.test.tsx
@@ -35,14 +35,16 @@ describe('EditableTitle', () => {
     expect(renderResult.getByText('Test title')).toBeInTheDocument();
   });
 
-  it('does not show the edit icon when the user does not have edit permissions', () => {
+  it('inline edit defaults to readOnly when the user does not have the edit permissions', () => {
     const wrapper = mount(
       <TestProviders permissions={readCasesPermissions()}>
         <EditableTitle {...defaultProps} />
       </TestProviders>
     );
 
-    expect(wrapper.find('[data-test-subj="editable-title-edit-icon"]').exists()).toBeFalsy();
+    expect(
+      wrapper.find('button[data-test-subj="editable-title-header-value"]').prop('disabled')
+    ).toBe(true);
   });
 
   it('shows the edit title input field', () => {
@@ -52,7 +54,7 @@ describe('EditableTitle', () => {
       </TestProviders>
     );
 
-    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
+    wrapper.find('button[data-test-subj="editable-title-header-value"]').simulate('click');
     wrapper.update();
 
     expect(wrapper.find('[data-test-subj="editable-title-input-field"]').first().exists()).toBe(
@@ -67,12 +69,12 @@ describe('EditableTitle', () => {
       </TestProviders>
     );
 
-    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
+    wrapper.find('button[data-test-subj="editable-title-header-value"]').simulate('click');
     wrapper.update();
 
-    expect(wrapper.find('[data-test-subj="editable-title-submit-btn"]').first().exists()).toBe(
-      true
-    );
+    expect(
+      wrapper.find('button[data-test-subj="editable-title-submit-btn"]').first().exists()
+    ).toBe(true);
   });
 
   it('shows the cancel button', () => {
@@ -82,27 +84,12 @@ describe('EditableTitle', () => {
       </TestProviders>
     );
 
-    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
-    wrapper.update();
-
-    expect(wrapper.find('[data-test-subj="editable-title-cancel-btn"]').first().exists()).toBe(
-      true
-    );
-  });
-
-  it('DOES NOT shows the edit icon when in edit mode', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <EditableTitle {...defaultProps} />
-      </TestProviders>
-    );
-
-    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
+    wrapper.find('button[data-test-subj="editable-title-header-value"]').simulate('click');
     wrapper.update();
 
-    expect(wrapper.find('[data-test-subj="editable-title-edit-icon"]').first().exists()).toBe(
-      false
-    );
+    expect(
+      wrapper.find('button[data-test-subj="editable-title-cancel-btn"]').first().exists()
+    ).toBe(true);
   });
 
   it('switch to non edit mode when canceled', () => {
@@ -112,11 +99,13 @@ describe('EditableTitle', () => {
       </TestProviders>
     );
 
-    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
+    wrapper.find('button[data-test-subj="editable-title-header-value"]').simulate('click');
     wrapper.update();
     wrapper.find('button[data-test-subj="editable-title-cancel-btn"]').simulate('click');
 
-    expect(wrapper.find('[data-test-subj="editable-title-edit-icon"]').first().exists()).toBe(true);
+    expect(
+      wrapper.find('button[data-test-subj="editable-title-header-value"]').first().exists()
+    ).toBe(true);
   });
 
   it('should change the title', () => {
@@ -128,7 +117,7 @@ describe('EditableTitle', () => {
       </TestProviders>
     );
 
-    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
+    wrapper.find('button[data-test-subj="editable-title-header-value"]').simulate('click');
     wrapper.update();
 
     wrapper
@@ -152,18 +141,21 @@ describe('EditableTitle', () => {
       </TestProviders>
     );
 
-    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
+    wrapper.find('button[data-test-subj="editable-title-header-value"]').simulate('click');
     wrapper.update();
 
     wrapper
       .find('input[data-test-subj="editable-title-input-field"]')
+
       .simulate('change', { target: { value: newTitle } });
     wrapper.update();
 
     wrapper.find('button[data-test-subj="editable-title-cancel-btn"]').simulate('click');
     wrapper.update();
 
-    expect(wrapper.find('h1[data-test-subj="header-page-title"]').text()).toEqual(title);
+    expect(wrapper.find('button[data-test-subj="editable-title-header-value"]').text()).toEqual(
+      title
+    );
   });
 
   it('submits the title', () => {
@@ -175,19 +167,22 @@ describe('EditableTitle', () => {
       </TestProviders>
     );
 
-    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
+    wrapper.find('button[data-test-subj="editable-title-header-value"]').simulate('click');
     wrapper.update();
 
     wrapper
       .find('input[data-test-subj="editable-title-input-field"]')
+      .last()
       .simulate('change', { target: { value: newTitle } });
 
     wrapper.find('button[data-test-subj="editable-title-submit-btn"]').simulate('click');
     wrapper.update();
 
     expect(submitTitle).toHaveBeenCalled();
     expect(submitTitle.mock.calls[0][0]).toEqual(newTitle);
-    expect(wrapper.find('[data-test-subj="editable-title-edit-icon"]').first().exists()).toBe(true);
+    expect(
+      wrapper.find('button[data-test-subj="editable-title-header-value"]').first().exists()
+    ).toBe(true);
   });
 
   it('does not submit the title when the length is longer than 160 characters', () => {
@@ -199,7 +194,7 @@ describe('EditableTitle', () => {
       </TestProviders>
     );
 
-    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
+    wrapper.find('button[data-test-subj="editable-title-header-value"]').simulate('click');
     wrapper.update();
 
     wrapper
@@ -213,9 +208,9 @@ describe('EditableTitle', () => {
     );
 
     expect(submitTitle).not.toHaveBeenCalled();
-    expect(wrapper.find('[data-test-subj="editable-title-edit-icon"]').first().exists()).toBe(
-      false
-    );
+    expect(
+      wrapper.find('button[data-test-subj="editable-title-header-value"]').first().exists()
+    ).toBe(false);
   });
 
   it('does not submit the title is empty', () => {
@@ -225,21 +220,22 @@ describe('EditableTitle', () => {
       </TestProviders>
     );
 
-    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
+    wrapper.find('button[data-test-subj="editable-title-header-value"]').simulate('click');
     wrapper.update();
 
     wrapper
       .find('input[data-test-subj="editable-title-input-field"]')
+
       .simulate('change', { target: { value: '' } });
 
     wrapper.find('button[data-test-subj="editable-title-submit-btn"]').simulate('click');
     wrapper.update();
     expect(wrapper.find('.euiFormErrorText').text()).toBe('A name is required.');
 
     expect(submitTitle).not.toHaveBeenCalled();
-    expect(wrapper.find('[data-test-subj="editable-title-edit-icon"]').first().exists()).toBe(
-      false
-    );
+    expect(
+      wrapper.find('button[data-test-subj="editable-title-header-value"]').first().exists()
+    ).toBe(false);
   });
 
   it('does not show an error after a previous edit error was displayed', () => {
@@ -252,7 +248,7 @@ describe('EditableTitle', () => {
       </TestProviders>
     );
 
-    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
+    wrapper.find('button[data-test-subj="editable-title-header-value"]').simulate('click');
     wrapper.update();
 
     // simualte a long title
@@ -269,6 +265,7 @@ describe('EditableTitle', () => {
     // write a shorter one
     wrapper
       .find('input[data-test-subj="editable-title-input-field"]')
+
       .simulate('change', { target: { value: shortTitle } });
     wrapper.update();
 
@@ -277,7 +274,7 @@ describe('EditableTitle', () => {
     wrapper.update();
 
     // edit again
-    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
+    wrapper.find('button[data-test-subj="editable-title-header-value"]').simulate('click');
     wrapper.update();
 
     // no error should appear