Preserve timeline data when navigating between tabs (#106716)

x-pack/plugins/security_solution/public/timelines/store/timeline/helpers.ts

@@ -157,6 +157,7 @@ export const addTimelineToStore = ({
     [id]: {
       ...timeline,
       isLoading: timelineById[id].isLoading,
+      initialized: timelineById[id].initialized,
       dateRange:
         timeline.status === TimelineStatus.immutable &&
         timeline.timelineType === TimelineType.template

x-pack/plugins/security_solution/public/timelines/store/timeline/model.ts

@@ -72,6 +72,7 @@ export type TimelineModel = TGridModelForTimeline & {
   /** timeline is saving */
   isSaving: boolean;
   version: string | null;
+  initialized?: boolean;
 };
 
 export type SubsetTimelineModel = Readonly<

x-pack/plugins/timelines/public/store/t_grid/helpers.test.tsx

@@ -13,7 +13,7 @@ import { mockGlobalState } from '../../mock/global_state';
 import { TGridModelSettings } from '.';
 
 const id = 'foo';
-const timelineById = {
+const defaultTimelineById = {
   ...mockGlobalState.timelineById,
 };
 
@@ -28,16 +28,32 @@ describe('setInitializeTgridSettings', () => {
       sort, // <-- override
     };
 
-    expect(setInitializeTgridSettings({ id, timelineById, tGridSettingsProps })[id].sort).toEqual(
-      sort
-    );
+    expect(
+      setInitializeTgridSettings({ id, timelineById: defaultTimelineById, tGridSettingsProps })[id]
+        .sort
+    ).toEqual(sort);
   });
 
   test('it returns the default sort when tGridSettingsProps does NOT contain an override', () => {
     const tGridSettingsProps = { footerText: 'test' }; // <-- no `sort` override
 
-    expect(setInitializeTgridSettings({ id, timelineById, tGridSettingsProps })[id].sort).toEqual(
-      tGridDefaults.sort
-    );
+    expect(
+      setInitializeTgridSettings({ id, timelineById: defaultTimelineById, tGridSettingsProps })[id]
+        .sort
+    ).toEqual(tGridDefaults.sort);
+  });
+
+  test('it doesn`t overwrite the timeline if it is initialized', () => {
+    const tGridSettingsProps = { title: 'testTitle' };
+
+    const timelineById = {
+      [id]: {
+        ...defaultTimelineById.test,
+        initialized: true,
+      },
+    };
+
+    const result = setInitializeTgridSettings({ id, timelineById, tGridSettingsProps });
+    expect(result).toBe(timelineById);
   });
 });

x-pack/plugins/timelines/public/store/t_grid/helpers.ts

@@ -160,20 +160,24 @@ export const setInitializeTgridSettings = ({
 }: InitializeTgridParams): TimelineById => {
   const timeline = timelineById[id];
 
-  return {
-    ...timelineById,
-    [id]: {
-      ...tGridDefaults,
-      ...timeline,
-      ...getTGridManageDefaults(id),
-      ...tGridSettingsProps,
-      ...(!timeline || (isEmpty(timeline.columns) && !isEmpty(tGridSettingsProps.defaultColumns))
-        ? { columns: tGridSettingsProps.defaultColumns }
-        : {}),
-      sort: tGridSettingsProps.sort ?? tGridDefaults.sort,
-      loadingEventIds: tGridDefaults.loadingEventIds,
-    },
-  };
+  return !timeline?.initialized
+    ? {
+        ...timelineById,
+        [id]: {
+          ...tGridDefaults,
+          ...getTGridManageDefaults(id),
+          ...timeline,
+          ...tGridSettingsProps,
+          ...(!timeline ||
+          (isEmpty(timeline.columns) && !isEmpty(tGridSettingsProps.defaultColumns))
+            ? { columns: tGridSettingsProps.defaultColumns }
+            : {}),
+          sort: tGridSettingsProps.sort ?? tGridDefaults.sort,
+          loadingEventIds: tGridDefaults.loadingEventIds,
+          initialized: true,
+        },
+      }
+    : timelineById;
 };
 
 interface ApplyDeltaToTimelineColumnWidth {

x-pack/plugins/timelines/public/store/t_grid/model.ts

@@ -82,6 +82,7 @@ export interface TGridModel extends TGridModelSettings {
   selectedEventIds: Record<string, TimelineNonEcsData[]>;
   savedObjectId: string | null;
   version: string | null;
+  initialized?: boolean;
 }
 
 export type TGridModelForTimeline = Pick<