[Security Solution] Refactor Save Timeline modal to use useForm hook (e…

…lastic#87103)

x-pack/plugins/security_solution/cypress/screens/timeline.ts

@@ -101,7 +101,7 @@ export const TIMELINE_DATA_PROVIDERS_EMPTY =
 
 export const TIMELINE_DESCRIPTION = '[data-test-subj="timeline-description"]';
 
-export const TIMELINE_DESCRIPTION_INPUT = '[data-test-subj="timeline-description-textarea"]';
+export const TIMELINE_DESCRIPTION_INPUT = '[data-test-subj="save-timeline-description"]';
 
 export const TIMELINE_DROPPED_DATA_PROVIDERS = '[data-test-subj="providerContainer"]';
 
@@ -136,7 +136,7 @@ export const TIMELINE_SETTINGS_ICON = '[data-test-subj="settings-plus-in-circle"
 
 export const TIMELINE_TITLE = '[data-test-subj="timeline-title"]';
 
-export const TIMELINE_TITLE_INPUT = '[data-test-subj="timeline-title-input"]';
+export const TIMELINE_TITLE_INPUT = '[data-test-subj="save-timeline-title"]';
 
 export const TIMESTAMP_HEADER_FIELD = '[data-test-subj="header-text-@timestamp"]';
 

x-pack/plugins/security_solution/cypress/tasks/timeline.ts

@@ -58,7 +58,7 @@ export const hostExistsQuery = 'host.name: *';
 
 export const addDescriptionToTimeline = (description: string) => {
   cy.get(TIMELINE_EDIT_MODAL_OPEN_BUTTON).first().click();
-  cy.get(TIMELINE_DESCRIPTION_INPUT).type(`${description}{enter}`);
+  cy.get(TIMELINE_DESCRIPTION_INPUT).type(description);
   cy.get(TIMELINE_DESCRIPTION_INPUT).invoke('val').should('equal', description);
   cy.get(TIMELINE_EDIT_MODAL_SAVE_BUTTON).click();
   cy.get(TIMELINE_TITLE_INPUT).should('not.exist');

x-pack/plugins/security_solution/public/common/lib/telemetry/middleware.ts

@@ -12,7 +12,7 @@ import * as timelineActions from '../../../timelines/store/timeline/actions';
 export const telemetryMiddleware = (api: MiddlewareAPI) => (next: Dispatch) => (action: Action) => {
   if (timelineActions.endTimelineSaving.match(action)) {
     track(METRIC_TYPE.COUNT, TELEMETRY_EVENT.TIMELINE_SAVED);
-  } else if (timelineActions.updateTitle.match(action)) {
+  } else if (timelineActions.updateTitleAndDescription.match(action)) {
     track(METRIC_TYPE.COUNT, TELEMETRY_EVENT.TIMELINE_NAMED);
   } else if (timelineActions.showTimeline.match(action)) {
     if (action.payload.show) {

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

@@ -63,7 +63,6 @@ export const SaveTimelineButton = React.memo<SaveTimelineComponentProps>(
           data-test-subj="save-timeline-modal-comp"
           closeSaveTimeline={closeSaveTimeline}
           initialFocus={initialFocus}
-          openSaveTimeline={openSaveTimeline}
           timelineId={timelineId}
           showWarning={initialFocus === 'title' && show}
         />

x-pack/plugins/security_solution/public/timelines/components/timeline/header/schema.ts

@@ -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 { FIELD_TYPES, FormSchema, fieldValidators } from '../../../../shared_imports';
+
+export const formSchema: FormSchema = {
+  title: {
+    type: FIELD_TYPES.TEXT,
+    validations: [
+      {
+        validator: fieldValidators.emptyField(''),
+      },
+    ],
+  },
+  description: {
+    type: FIELD_TYPES.TEXTAREA,
+    validations: [],
+  },
+};

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

@@ -5,10 +5,12 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
-import { TimelineTitleAndDescription } from './title_and_description';
+import { mount } from 'enzyme';
+
+import { TestProviders } from '../../../../common/mock';
 import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
 import { TimelineStatus, TimelineType } from '../../../../../common/types/timeline';
+import { TimelineTitleAndDescription } from './title_and_description';
 import * as i18n from './translations';
 
 jest.mock('../../../../common/hooks/use_selector', () => ({
@@ -32,7 +34,6 @@ describe('TimelineTitleAndDescription', () => {
     const props = {
       initialFocus: 'title' as const,
       closeSaveTimeline: jest.fn(),
-      openSaveTimeline: jest.fn(),
       timelineId: 'timeline-1',
       onSaveTimeline: jest.fn(),
       updateTitle: jest.fn(),
@@ -57,13 +58,17 @@ describe('TimelineTitleAndDescription', () => {
     });
 
     test('show process bar while saving', () => {
-      const component = shallow(<TimelineTitleAndDescription {...props} />);
+      const component = mount(<TimelineTitleAndDescription {...props} />, {
+        wrappingComponent: TestProviders,
+      });
       expect(component.find('[data-test-subj="progress-bar"]').exists()).toEqual(true);
     });
 
     test('Show correct header for save timeline modal', () => {
-      const component = shallow(<TimelineTitleAndDescription {...props} />);
-      expect(component.find('[data-test-subj="modal-header"]').prop('children')).toEqual(
+      const component = mount(<TimelineTitleAndDescription {...props} />, {
+        wrappingComponent: TestProviders,
+      });
+      expect(component.find('[data-test-subj="modal-header"]').at(1).prop('children')).toEqual(
         i18n.SAVE_TIMELINE
       );
     });
@@ -76,29 +81,39 @@ describe('TimelineTitleAndDescription', () => {
         title: 'my timeline',
         timelineType: TimelineType.template,
       });
-      const component = shallow(<TimelineTitleAndDescription {...props} />);
-      expect(component.find('[data-test-subj="modal-header"]').prop('children')).toEqual(
+      const component = mount(<TimelineTitleAndDescription {...props} />, {
+        wrappingComponent: TestProviders,
+      });
+      expect(component.find('[data-test-subj="modal-header"]').at(1).prop('children')).toEqual(
         i18n.SAVE_TIMELINE_TEMPLATE
       );
     });
 
     test('Show name field', () => {
-      const component = shallow(<TimelineTitleAndDescription {...props} />);
-      expect(component.find('[data-test-subj="save-timeline-name"]').exists()).toEqual(true);
+      const component = mount(<TimelineTitleAndDescription {...props} />, {
+        wrappingComponent: TestProviders,
+      });
+      expect(component.find('[data-test-subj="save-timeline-title"]').exists()).toEqual(true);
     });
 
     test('Show description field', () => {
-      const component = shallow(<TimelineTitleAndDescription {...props} />);
+      const component = mount(<TimelineTitleAndDescription {...props} />, {
+        wrappingComponent: TestProviders,
+      });
       expect(component.find('[data-test-subj="save-timeline-description"]').exists()).toEqual(true);
     });
 
     test('Show close button', () => {
-      const component = shallow(<TimelineTitleAndDescription {...props} />);
+      const component = mount(<TimelineTitleAndDescription {...props} />, {
+        wrappingComponent: TestProviders,
+      });
       expect(component.find('[data-test-subj="close-button"]').exists()).toEqual(true);
     });
 
     test('Show saveButton', () => {
-      const component = shallow(<TimelineTitleAndDescription {...props} />);
+      const component = mount(<TimelineTitleAndDescription {...props} />, {
+        wrappingComponent: TestProviders,
+      });
       expect(component.find('[data-test-subj="save-button"]').exists()).toEqual(true);
     });
   });
@@ -133,13 +148,17 @@ describe('TimelineTitleAndDescription', () => {
     });
 
     test('show process bar while saving', () => {
-      const component = shallow(<TimelineTitleAndDescription {...props} />);
+      const component = mount(<TimelineTitleAndDescription {...props} />, {
+        wrappingComponent: TestProviders,
+      });
       expect(component.find('[data-test-subj="progress-bar"]').exists()).toEqual(true);
     });
 
     test('Show correct header for save timeline modal', () => {
-      const component = shallow(<TimelineTitleAndDescription {...props} />);
-      expect(component.find('[data-test-subj="modal-header"]').prop('children')).toEqual(
+      const component = mount(<TimelineTitleAndDescription {...props} />, {
+        wrappingComponent: TestProviders,
+      });
+      expect(component.find('[data-test-subj="modal-header"]').at(1).prop('children')).toEqual(
         i18n.NAME_TIMELINE
       );
     });
@@ -152,24 +171,32 @@ describe('TimelineTitleAndDescription', () => {
         title: 'my timeline',
         timelineType: TimelineType.template,
       });
-      const component = shallow(<TimelineTitleAndDescription {...props} />);
-      expect(component.find('[data-test-subj="modal-header"]').prop('children')).toEqual(
+      const component = mount(<TimelineTitleAndDescription {...props} />, {
+        wrappingComponent: TestProviders,
+      });
+      expect(component.find('[data-test-subj="modal-header"]').at(1).prop('children')).toEqual(
         i18n.NAME_TIMELINE_TEMPLATE
       );
     });
 
     test('Show name field', () => {
-      const component = shallow(<TimelineTitleAndDescription {...props} />);
-      expect(component.find('[data-test-subj="save-timeline-name"]').exists()).toEqual(true);
+      const component = mount(<TimelineTitleAndDescription {...props} />, {
+        wrappingComponent: TestProviders,
+      });
+      expect(component.find('[data-test-subj="save-timeline-title"]').exists()).toEqual(true);
     });
 
     test('Show description field', () => {
-      const component = shallow(<TimelineTitleAndDescription {...props} />);
+      const component = mount(<TimelineTitleAndDescription {...props} />, {
+        wrappingComponent: TestProviders,
+      });
       expect(component.find('[data-test-subj="save-timeline-description"]').exists()).toEqual(true);
     });
 
     test('Show saveButton', () => {
-      const component = shallow(<TimelineTitleAndDescription {...props} />);
+      const component = mount(<TimelineTitleAndDescription {...props} />, {
+        wrappingComponent: TestProviders,
+      });
       expect(component.find('[data-test-subj="save-button"]').exists()).toEqual(true);
     });
   });
@@ -206,13 +233,17 @@ describe('TimelineTitleAndDescription', () => {
     });
 
     test('Show EuiCallOut', () => {
-      const component = shallow(<TimelineTitleAndDescription {...props} />);
+      const component = mount(<TimelineTitleAndDescription {...props} />, {
+        wrappingComponent: TestProviders,
+      });
       expect(component.find('[data-test-subj="save-timeline-callout"]').exists()).toEqual(true);
     });
 
     test('Show discardTimelineButton', () => {
-      const component = shallow(<TimelineTitleAndDescription {...props} />);
-      expect(component.find('[data-test-subj="close-button"]').dive().text()).toEqual(
+      const component = mount(<TimelineTitleAndDescription {...props} />, {
+        wrappingComponent: TestProviders,
+      });
+      expect(component.find('[data-test-subj="close-button"]').at(2).text()).toEqual(
         'Discard Timeline'
       );
     });
@@ -225,15 +256,17 @@ describe('TimelineTitleAndDescription', () => {
         title: 'my timeline',
         timelineType: TimelineType.template,
       });
-      const component = shallow(<TimelineTitleAndDescription {...props} />);
-      expect(component.find('[data-test-subj="close-button"]').dive().text()).toEqual(
+      const component = mount(<TimelineTitleAndDescription {...props} />, {
+        wrappingComponent: TestProviders,
+      });
+      expect(component.find('[data-test-subj="close-button"]').at(2).text()).toEqual(
         'Discard Timeline Template'
       );
     });
 
     test('Show saveButton', () => {
-      const component = shallow(<TimelineTitleAndDescription {...props} />);
-      expect(component.find('[data-test-subj="save-button"]').exists()).toEqual(true);
+      const component = mount(<TimelineTitleAndDescription {...props} />);
+      expect(component.find('[data-test-subj="save-button"]').at(1).exists()).toEqual(true);
     });
   });
 });