From 93c605a28e1948484f56d49a12fff9429be490ac Mon Sep 17 00:00:00 2001
From: Delirium <nikita@openreplay.com>
Date: Wed, 25 Sep 2024 16:11:03 +0200
Subject: [PATCH] UI path evs cons (#2608)

* ui: support payload for events search

* ui: assist console size and init fixes
---
 .../Player/LivePlayer/LivePlayerInst.tsx      |  3 +--
 .../DevTools/ConsolePanel/ConsolePanel.tsx    |  2 +-
 .../StackEventPanel/StackEventPanel.tsx       | 20 ++++++++++++-------
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx b/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx
index d9b23242a..94b20cdf1 100644
--- a/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx
+++ b/frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx
@@ -83,9 +83,8 @@ function Player(props: IProps) {
           <div
             onMouseDown={handleResize}
             className={'w-full h-2 cursor-ns-resize absolute top-0 left-0 z-20'}
-          >
+          />
             <ConsolePanel isLive />
-          </div>
         </div>
       ) : null}
       {!fullView && !isMultiview ? <LiveControls jump={playerContext.player.jump} /> : null}
diff --git a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
index da43101a0..50a2216eb 100644
--- a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
+++ b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
@@ -117,7 +117,7 @@ function ConsolePanel({
     exceptionsList = [],
     logListNow = [],
     exceptionsListNow = [],
-  } = tabStates[currentTab];
+  } = tabStates[currentTab] ?? {};
 
   const list = isLive
     ? (useMemo(
diff --git a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
index 068a1498f..60b79bcc1 100644
--- a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
+++ b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
@@ -25,7 +25,7 @@ const ALL = 'ALL';
 const TAB_KEYS = [ALL, ...typeList] as const;
 const TABS = TAB_KEYS.map((tab) => ({ text: tab, key: tab }));
 
-type EventsList = Array<Timed & { name: string; source: string; key: string }>;
+type EventsList = Array<Timed & { name: string; source: string; key: string; payload?: string[] }>;
 
 const WebStackEventPanelComp = observer(
   ({
@@ -95,7 +95,7 @@ export const MobileStackEventPanel = connect((state: Record<string, any>) => ({
   zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
 }))(MobileStackEventPanelComp);
 
-function EventsPanel({
+const EventsPanel = observer(({
   list,
   listNow,
   jump,
@@ -109,7 +109,7 @@ function EventsPanel({
   zoomEnabled: boolean;
   zoomStartTs: number;
   zoomEndTs: number;
-}) {
+}) => {
   const {
     sessionStore: { devTools },
   } = useStore();
@@ -126,13 +126,19 @@ function EventsPanel({
     zoomEnabled ? zoomStartTs <= time && time <= zoomEndTs : true
   );
 
-  let filteredList = useRegExListFilterMemo(inZoomRangeList, (it) => it.name, filter);
+  let filteredList = useRegExListFilterMemo(inZoomRangeList, (it) => {
+    const searchBy = [it.name]
+    if (it.payload) {
+    const payload = Array.isArray(it.payload) ? it.payload.join(',') : JSON.stringify(it.payload);
+      searchBy.push(payload);
+    }
+    return searchBy
+  }, filter);
   filteredList = useTabListFilterMemo(filteredList, (it) => it.source, ALL, activeTab);
 
   const onTabClick = (activeTab: (typeof TAB_KEYS)[number]) =>
     devTools.update(INDEX_KEY, { activeTab });
-  const onFilterChange = ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) =>
-    devTools.update(INDEX_KEY, { filter: value });
+  const onFilterChange = ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => devTools.update(INDEX_KEY, { filter: value });
   const tabs = useMemo(
     () => TABS.filter(({ key }) => key === ALL || inZoomRangeList.some(({ source }) => key === source)),
     [inZoomRangeList.length]
@@ -229,4 +235,4 @@ function EventsPanel({
       </BottomBlock.Content>
     </BottomBlock>
   );
-}
+});