[Security Solution] Modal for saving timeline

x-pack/plugins/security_solution/common/constants.ts

@@ -179,3 +179,5 @@ export const showAllOthersBucket: string[] = [
   'destination.ip',
   'user.name',
 ];
+
+export const ENABLE_NEW_TIMELINE = false;

x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx

@@ -125,13 +125,27 @@ const makeMapStateToProps = () => {
 
 const mapDispatchToProps = (dispatch: Dispatch, { timelineId }: OwnProps) => ({
   associateNote: (noteId: string) => dispatch(timelineActions.addNote({ id: timelineId, noteId })),
-  updateDescription: ({ id, description }: { id: string; description: string }) =>
-    dispatch(timelineActions.updateDescription({ id, description })),
+  updateDescription: ({
+    id,
+    description,
+    disableAutoSave,
+  }: {
+    id: string;
+    description: string;
+    disableAutoSave?: boolean;
+  }) => dispatch(timelineActions.updateDescription({ id, description, disableAutoSave })),
   updateIsFavorite: ({ id, isFavorite }: { id: string; isFavorite: boolean }) =>
     dispatch(timelineActions.updateIsFavorite({ id, isFavorite })),
   updateNote: (note: Note) => dispatch(appActions.updateNote({ note })),
-  updateTitle: ({ id, title }: { id: string; title: string }) =>
-    dispatch(timelineActions.updateTitle({ id, title })),
+  updateTitle: ({
+    id,
+    title,
+    disableAutoSave,
+  }: {
+    id: string;
+    title: string;
+    disableAutoSave?: boolean;
+  }) => dispatch(timelineActions.updateTitle({ id, title, disableAutoSave })),
   toggleLock: ({ linkToId }: { linkToId: InputsModelId }) =>
     dispatch(inputsActions.toggleTimelineLinkTo({ linkToId })),
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/header/save_timeline.test.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 from 'react';
+import { shallow } from 'enzyme';
+import { SaveTimelineComponent } from './save_timeline';
+
+describe('SaveTimelineComponent', () => {
+  const props = {
+    timelineId: 'timeline-1',
+    showOverlay: false,
+    toggleSaveTimeline: jest.fn(),
+    onSaveTimeline: jest.fn(),
+    updateTitle: jest.fn(),
+    updateDescription: jest.fn(),
+  };
+  test('should show a button with pencil icon', () => {
+    const component = shallow(<SaveTimelineComponent {...props} />);
+    expect(component.find('[data-test-subj="save-timeline-button-icon"]').prop('iconType')).toEqual(
+      'pencil'
+    );
+  });
+
+  test('should show a modal when showOverlay equals true', () => {
+    const testProps = {
+      ...props,
+      showOverlay: true,
+    };
+    const component = shallow(<SaveTimelineComponent {...testProps} />);
+    expect(component.find('[data-test-subj="save-timeline-modal"]').exists()).toEqual(true);
+  });
+
+  test('should not show a modal when showOverlay equals false', () => {
+    const component = shallow(<SaveTimelineComponent {...props} />);
+    expect(component.find('[data-test-subj="save-timeline-modal"]').exists()).toEqual(false);
+  });
+});

x-pack/plugins/security_solution/public/timelines/components/timeline/header/save_timeline.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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 { EuiButtonIcon, EuiModal, EuiOverlayMask } from '@elastic/eui';
+import React from 'react';
+import { UpdateTitle, UpdateDescription } from '../properties/helpers';
+import { NOTES_PANEL_WIDTH } from '../properties/notes_size';
+
+import { TimelineTitleAndDescription } from './title_and_description';
+
+export interface SaveTimelineComponentProps {
+  timelineId: string;
+  showOverlay: boolean;
+  toolTip?: string;
+  toggleSaveTimeline: () => void;
+  updateTitle: UpdateTitle;
+  updateDescription: UpdateDescription;
+}
+
+export const SaveTimelineComponent = React.memo<SaveTimelineComponentProps>(
+  ({ timelineId, showOverlay, toggleSaveTimeline, updateTitle, updateDescription }) => (
+    <>
+      <EuiButtonIcon
+        onClick={toggleSaveTimeline}
+        iconType="pencil"
+        data-test-subj="save-timeline-button-icon"
+      />
+
+      {showOverlay ? (
+        <EuiOverlayMask>
+          <EuiModal
+            data-test-subj="save-timeline-modal"
+            maxWidth={NOTES_PANEL_WIDTH}
+            onClose={toggleSaveTimeline}
+          >
+            <TimelineTitleAndDescription
+              timelineId={timelineId}
+              toggleSaveTimeline={toggleSaveTimeline}
+              updateTitle={updateTitle}
+              updateDescription={updateDescription}
+            />
+          </EuiModal>
+        </EuiOverlayMask>
+      ) : null}
+    </>
+  )
+);
+SaveTimelineComponent.displayName = 'SaveTimelineComponent';

x-pack/plugins/security_solution/public/timelines/components/timeline/header/save_timeline_button.test.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 from 'react';
+import { shallow } from 'enzyme';
+
+import { SaveTimelineButton } from './save_timeline_button';
+
+describe('SaveTimelineButton', () => {
+  const props = {
+    timelineId: 'timeline-1',
+    showOverlay: false,
+    toolTip: 'tooltip message',
+    toggleSaveTimeline: jest.fn(),
+    onSaveTimeline: jest.fn(),
+    updateTitle: jest.fn(),
+    updateDescription: jest.fn(),
+  };
+  test('Show tooltip', () => {
+    const component = shallow(<SaveTimelineButton {...props} />);
+    expect(component.find('[data-test-subj="save-timeline-btn-tooltip"]').exists()).toEqual(true);
+  });
+
+  test('Hide tooltip', () => {
+    const testProps = {
+      ...props,
+      showOverlay: true,
+    };
+    const component = shallow(<SaveTimelineButton {...testProps} />);
+    expect(component.find('[data-test-subj="save-timeline-btn-tooltip"]').exists()).toEqual(false);
+  });
+});

x-pack/plugins/security_solution/public/timelines/components/timeline/header/save_timeline_button.tsx

@@ -0,0 +1,22 @@
+/*
+ * 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 { EuiToolTip } from '@elastic/eui';
+import React from 'react';
+
+import { SaveTimelineComponent, SaveTimelineComponentProps } from './save_timeline';
+
+export const SaveTimelineButton = React.memo<SaveTimelineComponentProps>(
+  ({ toolTip, ...saveTimelineButtonProps }) =>
+    saveTimelineButtonProps.showOverlay ? (
+      <SaveTimelineComponent {...saveTimelineButtonProps} />
+    ) : (
+      <EuiToolTip content={toolTip || ''} data-test-subj="save-timeline-btn-tooltip">
+        <SaveTimelineComponent {...saveTimelineButtonProps} />
+      </EuiToolTip>
+    )
+);
+SaveTimelineButton.displayName = 'SaveTimelineButton';