[Security Solution] Manage timeline templates user flow (#67837)

Author: patrykkopycinski

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

@@ -165,13 +165,6 @@ export const showAllOthersBucket: string[] = [
   'user.name',
 ];
 
-/**
- * CreateTemplateTimelineBtn
- * https://github.com/elastic/kibana/pull/66613
- * Remove the comment here to enable template timeline
- */
-export const disableTemplate = false;
-
 /*
  * This should be set to true after https://github.com/elastic/kibana/pull/67496 is merged
  */

x-pack/plugins/security_solution/common/types/timeline/index.ts

@@ -50,6 +50,16 @@ const SavedDataProviderQueryMatchRuntimeType = runtimeTypes.partial({
   queryMatch: unionWithNullType(SavedDataProviderQueryMatchBasicRuntimeType),
 });
 
+export enum DataProviderType {
+  default = 'default',
+  template = 'template',
+}
+
+export const DataProviderTypeLiteralRt = runtimeTypes.union([
+  runtimeTypes.literal(DataProviderType.default),
+  runtimeTypes.literal(DataProviderType.template),
+]);
+
 const SavedDataProviderRuntimeType = runtimeTypes.partial({
   id: unionWithNullType(runtimeTypes.string),
   name: unionWithNullType(runtimeTypes.string),
@@ -58,6 +68,7 @@ const SavedDataProviderRuntimeType = runtimeTypes.partial({
   kqlQuery: unionWithNullType(runtimeTypes.string),
   queryMatch: unionWithNullType(SavedDataProviderQueryMatchBasicRuntimeType),
   and: unionWithNullType(runtimeTypes.array(SavedDataProviderQueryMatchRuntimeType)),
+  type: unionWithNullType(DataProviderTypeLiteralRt),
 });
 
 /*
@@ -154,7 +165,7 @@ export type TimelineStatusLiteralWithNull = runtimeTypes.TypeOf<
 >;
 
 /**
- * Template timeline type
+ * Timeline template type
  */
 
 export enum TemplateTimelineType {

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

@@ -9,7 +9,7 @@ export const CLOSE_TIMELINE_BTN = '[data-test-subj="close-timeline"]';
 export const CREATE_NEW_TIMELINE = '[data-test-subj="timeline-new"]';
 
 export const DRAGGABLE_HEADER =
-  '[data-test-subj="headers-group"] [data-test-subj="draggable-header"]';
+  '[data-test-subj="events-viewer-panel"] [data-test-subj="headers-group"] [data-test-subj="draggable-header"]';
 
 export const HEADERS_GROUP = '[data-test-subj="headers-group"]';
 
@@ -21,7 +21,8 @@ export const ID_TOGGLE_FIELD = '[data-test-subj="toggle-field-_id"]';
 
 export const PROVIDER_BADGE = '[data-test-subj="providerBadge"]';
 
-export const REMOVE_COLUMN = '[data-test-subj="remove-column"]';
+export const REMOVE_COLUMN =
+  '[data-test-subj="events-viewer-panel"] [data-test-subj="remove-column"]';
 
 export const RESET_FIELDS =
   '[data-test-subj="events-viewer-panel"] [data-test-subj="reset-fields"]';

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

@@ -27,8 +27,6 @@ import {
 
 import { drag, drop } from '../tasks/common';
 
-export const hostExistsQuery = 'host.name: *';
-
 export const addDescriptionToTimeline = (description: string) => {
   cy.get(TIMELINE_DESCRIPTION).type(`${description}{enter}`);
   cy.get(DATE_PICKER_APPLY_BUTTON_TIMELINE).click().invoke('text').should('not.equal', 'Updating');
@@ -79,7 +77,6 @@ export const openTimelineSettings = () => {
 };
 
 export const populateTimeline = () => {
-  executeTimelineKQL(hostExistsQuery);
   cy.get(SERVER_SIDE_EVENT_COUNT)
     .invoke('text')
     .then((strCount) => {

x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx

@@ -215,8 +215,8 @@ describe('alert actions', () => {
               columnId: '@timestamp',
               sortDirection: 'desc',
             },
-            status: TimelineStatus.active,
-            title: 'Test rule - Duplicate',
+            status: TimelineStatus.draft,
+            title: '',
             timelineType: TimelineType.default,
             templateTimelineId: null,
             templateTimelineVersion: null,

x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.tsx

@@ -10,7 +10,14 @@ import moment from 'moment';
 
 import { updateAlertStatus } from '../../containers/detection_engine/alerts/api';
 import { SendAlertToTimelineActionProps, UpdateAlertStatusActionProps } from './types';
-import { TimelineNonEcsData, GetOneTimeline, TimelineResult, Ecs } from '../../../graphql/types';
+import {
+  TimelineNonEcsData,
+  GetOneTimeline,
+  TimelineResult,
+  Ecs,
+  TimelineStatus,
+  TimelineType,
+} from '../../../graphql/types';
 import { oneTimelineQuery } from '../../../timelines/containers/one/index.gql_query';
 import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
 import {
@@ -122,20 +129,31 @@ export const sendAlertToTimelineAction = async ({
       if (!isEmpty(resultingTimeline)) {
         const timelineTemplate: TimelineResult = omitTypenameInTimeline(resultingTimeline);
         openAlertInBasicTimeline = false;
-        const { timeline } = formatTimelineResultToModel(timelineTemplate, true);
+        const { timeline } = formatTimelineResultToModel(
+          timelineTemplate,
+          true,
+          timelineTemplate.timelineType ?? TimelineType.default
+        );
         const query = replaceTemplateFieldFromQuery(
           timeline.kqlQuery?.filterQuery?.kuery?.expression ?? '',
-          ecsData
+          ecsData,
+          timeline.timelineType
         );
         const filters = replaceTemplateFieldFromMatchFilters(timeline.filters ?? [], ecsData);
         const dataProviders = replaceTemplateFieldFromDataProviders(
           timeline.dataProviders ?? [],
-          ecsData
+          ecsData,
+          timeline.timelineType
         );
+
         createTimeline({
           from,
           timeline: {
             ...timeline,
+            title: '',
+            timelineType: TimelineType.default,
+            templateTimelineId: null,
+            status: TimelineStatus.draft,
             dataProviders,
             eventType: 'all',
             filters,