[SIEM][Case] Merge header components (elastic#57816)

* Create edit node component

* Accept EditNodeComponent

* Switch to old header

* test

* Remove iconType

* Remove isEditTitle

* Move translations

* Delete header_page_new component

* Move editable title component to different folder

* Update jest snapshot

* Rename prop

* Make EditableTitleComponent more generic

* useCallback instead of inline functions in props

* Hardcode titles

* Move UI state inside EditableTitleComponent

* Seperate title's tests

* Create tests for EditableTitleComponent

* useCallbacks on EditableTitle component

* Create translation for aria-label in edit icon

* Check if switched to edit mode after pressing submit

* Test title when canceled

Co-authored-by: patrykkopycinski <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>

x-pack/legacy/plugins/siem/public/components/header_page/editable_title.test.tsx

@@ -0,0 +1,192 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { TestProviders } from '../../mock';
+import { EditableTitle } from './editable_title';
+import { useMountAppended } from '../../utils/use_mount_appended';
+
+describe('EditableTitle', () => {
+  const mount = useMountAppended();
+  const submitTitle = jest.fn();
+
+  test('it renders', () => {
+    const wrapper = shallow(
+      <EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('it shows the edit title input field', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
+      </TestProviders>
+    );
+
+    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('[data-test-subj="editable-title-input-field"]')
+        .first()
+        .exists()
+    ).toBe(true);
+  });
+
+  test('it shows the submit button', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
+      </TestProviders>
+    );
+
+    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('[data-test-subj="editable-title-submit-btn"]')
+        .first()
+        .exists()
+    ).toBe(true);
+  });
+
+  test('it shows the cancel button', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
+      </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);
+  });
+
+  test('it DOES NOT shows the edit icon when in edit mode', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
+      </TestProviders>
+    );
+
+    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('[data-test-subj="editable-title-edit-icon"]')
+        .first()
+        .exists()
+    ).toBe(false);
+  });
+
+  test('it switch to non edit mode when canceled', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
+      </TestProviders>
+    );
+
+    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').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);
+  });
+
+  test('it should change the title', () => {
+    const newTitle = 'new test title';
+
+    const wrapper = mount(
+      <TestProviders>
+        <EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
+      </TestProviders>
+    );
+
+    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
+    wrapper.update();
+
+    wrapper
+      .find('input[data-test-subj="editable-title-input-field"]')
+      .simulate('change', { target: { value: newTitle } });
+
+    wrapper.update();
+
+    expect(
+      wrapper.find('input[data-test-subj="editable-title-input-field"]').prop('value')
+    ).toEqual(newTitle);
+  });
+
+  test('it should NOT change the title when cancel', () => {
+    const title = 'Test title';
+    const newTitle = 'new test title';
+
+    const wrapper = mount(
+      <TestProviders>
+        <EditableTitle title={title} onSubmit={submitTitle} isLoading={false} />
+      </TestProviders>
+    );
+
+    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').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);
+  });
+
+  test('it submits the title', () => {
+    const newTitle = 'new test title';
+
+    const wrapper = mount(
+      <TestProviders>
+        <EditableTitle title="Test title" onSubmit={submitTitle} isLoading={false} />
+      </TestProviders>
+    );
+
+    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
+    wrapper.update();
+
+    wrapper
+      .find('input[data-test-subj="editable-title-input-field"]')
+      .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);
+  });
+});

x-pack/legacy/plugins/siem/public/components/header_page/editable_title.tsx

@@ -0,0 +1,98 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState, useCallback } from 'react';
+import styled, { css } from 'styled-components';
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFieldText,
+  EuiButtonIcon,
+} from '@elastic/eui';
+
+import * as i18n from './translations';
+
+import { Title } from './title';
+
+const StyledEuiButtonIcon = styled(EuiButtonIcon)`
+  ${({ theme }) => css`
+    margin-left: ${theme.eui.euiSize};
+  `}
+`;
+
+StyledEuiButtonIcon.displayName = 'StyledEuiButtonIcon';
+
+interface Props {
+  isLoading: boolean;
+  title: string | React.ReactNode;
+  onSubmit: (title: string) => void;
+}
+
+const EditableTitleComponent: React.FC<Props> = ({ onSubmit, isLoading, title }) => {
+  const [editMode, setEditMode] = useState(false);
+  const [changedTitle, onTitleChange] = useState(title);
+
+  const onCancel = useCallback(() => setEditMode(false), []);
+  const onClickEditIcon = useCallback(() => setEditMode(true), []);
+
+  const onClickSubmit = useCallback(
+    (newTitle: string): void => {
+      onSubmit(newTitle);
+      setEditMode(false);
+    },
+    [changedTitle]
+  );
+
+  return editMode ? (
+    <EuiFlexGroup alignItems="center" gutterSize="m" justifyContent="spaceBetween">
+      <EuiFlexItem grow={false}>
+        <EuiFieldText
+          onChange={e => onTitleChange(e.target.value)}
+          value={`${changedTitle}`}
+          data-test-subj="editable-title-input-field"
+        />
+      </EuiFlexItem>
+      <EuiFlexGroup gutterSize="none" responsive={false} wrap={true}>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            fill
+            isDisabled={isLoading}
+            isLoading={isLoading}
+            onClick={() => onClickSubmit(changedTitle as string)}
+            data-test-subj="editable-title-submit-btn"
+          >
+            {i18n.SUBMIT}
+          </EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty onClick={onCancel} data-test-subj="editable-title-cancel-btn">
+            {i18n.CANCEL}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiFlexItem />
+    </EuiFlexGroup>
+  ) : (
+    <EuiFlexGroup alignItems="center" gutterSize="none">
+      <EuiFlexItem grow={false}>
+        <Title title={title} />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <StyledEuiButtonIcon
+          aria-label={i18n.EDIT_TITLE_ARIA(title as string)}
+          iconType="pencil"
+          onClick={onClickEditIcon}
+          data-test-subj="editable-title-edit-icon"
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+export const EditableTitle = React.memo(EditableTitleComponent);