From 81e8302a9efd82edd80274e326300767220ac637 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 19 Jun 2023 12:02:13 +0200
Subject: [PATCH] fix(ui): fixes for tab typings, use State instead of array to
 keep tabs

---
 frontend/app/player/web/MessageManager.ts | 28 +++++++++++++++++------
 frontend/app/player/web/TabManager.ts     |  4 ++++
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts
index 3522148c2..dc1441e69 100644
--- a/frontend/app/player/web/MessageManager.ts
+++ b/frontend/app/player/web/MessageManager.ts
@@ -29,6 +29,17 @@ interface RawList {
   exceptions: ILog[];
 }
 
+type TabChangeEvent = {
+  tabId: string;
+  timestamp: number;
+  tabName: string;
+  time: number;
+  toTab: string;
+  fromTab: string;
+  type: string;
+  activeUrl: '';
+};
+
 export interface State extends ScreenState {
   skipIntervals: SkipInterval[];
   connType?: string;
@@ -51,7 +62,7 @@ export interface State extends ScreenState {
   messagesProcessed: boolean;
   currentTab: string;
   tabs: Set<string>;
-  tabChangeEvents: { tabId: string; timestamp: number; tabName: string }[];
+  tabChangeEvents: TabChangeEvent[];
 }
 
 export const visualChanges = [
@@ -93,7 +104,7 @@ export default class MessageManager {
   private lastMessageTime: number = 0;
   private firstVisualEventSet = false;
   public readonly tabs: Record<string, TabSessionManager> = {};
-  private tabChangeEvents: Record<string, number>[] = [];
+  private tabChangeEvents: TabChangeEvent[] = [];
   private activeTab = '';
 
   constructor(
@@ -132,7 +143,7 @@ export default class MessageManager {
       // if (Object.values(list).some((l) => l.length > 0)) {
       //   this.tabs[tab]!.updateLists(list);
       // }
-    })
+    });
   }
 
   public _sortMessagesHack = (msgs: Message[]) => {
@@ -197,7 +208,7 @@ export default class MessageManager {
           this.tabs[this.activeTab].clean();
         }
         const activeTabs = this.state.get().tabs;
-        if (activeTabs.length !== this.activeTabManager.tabInstances.size) {
+        if (activeTabs.size !== this.activeTabManager.tabInstances.size) {
           this.state.update({ tabs: this.activeTabManager.tabInstances });
         }
       }
@@ -262,10 +273,12 @@ export default class MessageManager {
           this.tabChangeEvents.push({
             tabId: msg.tabId,
             time: msg.time,
+            tabName: prevChange?.tabId ? mapTabs(this.tabs)[prevChange.tabId] : '',
             timestamp: this.sessionStart + msg.time,
             toTab: mapTabs(this.tabs)[msg.tabId],
             fromTab: prevChange?.tabId ? mapTabs(this.tabs)[prevChange.tabId] : '',
             type: 'TABCHANGE',
+            activeUrl: '',
           });
           this.activeTabManager.append(msg);
         }
@@ -302,6 +315,7 @@ export default class MessageManager {
       this.updateChangeEvents();
     }
     this.screen.display(!messagesLoading);
+    // @ts-ignore idk
     this.state.update({ messagesLoading, ready: !messagesLoading && !this.state.get().cssLoading });
   };
 
@@ -320,11 +334,11 @@ export default class MessageManager {
   }
 }
 
-function mapTabs(tabs: Record<string, TabState>) {
+function mapTabs(tabs: Record<string, TabSessionManager>) {
   const tabIds = Object.keys(tabs);
-  const tabMap = {};
+  const tabMap: Record<string, string> = {};
   tabIds.forEach((tabId) => {
-    tabMap[tabId] = `Tab ${tabIds.indexOf(tabId)+1}`;
+    tabMap[tabId] = `Tab ${tabIds.indexOf(tabId) + 1}`;
   });
 
   return tabMap;
diff --git a/frontend/app/player/web/TabManager.ts b/frontend/app/player/web/TabManager.ts
index fb4f374f9..e96a87100 100644
--- a/frontend/app/player/web/TabManager.ts
+++ b/frontend/app/player/web/TabManager.ts
@@ -25,6 +25,7 @@ export interface TabState extends ListsState {
   performanceChartTime: PerformanceChartPoint[]
   cssLoading: boolean
   location: string
+  urlsList: SetPageLocation[]
 }
 
 /**
@@ -39,6 +40,7 @@ export default class TabSessionManager {
     performanceChartTime: [],
     cssLoading: false,
     location: '',
+    urlsList: [],
   }
 
   public locationManager: ListWalker<SetPageLocation> = new ListWalker();
@@ -88,6 +90,7 @@ export default class TabSessionManager {
 
     const currentState = this.state.get()
     this.state.update({
+      // @ts-ignore comes from parent state
       eventCount: currentState.eventCount + eventCount,
       tabStates: {
         ...currentState.tabStates,
@@ -258,6 +261,7 @@ export default class TabSessionManager {
     /* === */
     const lastLocationMsg = this.locationManager.moveGetLast(t, index);
     if (!!lastLocationMsg) {
+      // @ts-ignore comes from parent state
       this.state.update({ location: lastLocationMsg.url })
     }
     const lastConnectionInfoMsg = this.connectionInfoManger.moveGetLast(t, index);