From 0cd89e63ea6f8bcf5043297ca44293a17c6c3e47 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 28 Nov 2022 16:23:07 +0100
Subject: [PATCH] fix(ui) - dev tools sync check

---
 .../Session_/Player/Overlay/AutoplayTimer.tsx       |  3 +--
 .../shared/DevTools/ConsolePanel/ConsolePanel.tsx   |  8 +++-----
 .../shared/DevTools/NetworkPanel/NetworkPanel.tsx   | 13 ++++++-------
 .../DevTools/StackEventPanel/StackEventPanel.tsx    | 10 ++++------
 4 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx b/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx
index 045b7492b..fc292e737 100644
--- a/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx
+++ b/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx
@@ -52,8 +52,7 @@ function AutoplayTimer({ nextId, siteId, history }: IProps) {
           </Link>
         </div>
         <div className="mt-2 flex items-center">
-          <Icon name="ellipsis-v" className="mr-2" />
-          <span className="color-gray-medium">Turn on/off auto-replay in: More options</span>
+          <span className="color-gray-medium">Turn on/off auto-replay in <Icon name="ellipsis-v" className="mx-2" /> More options</span>
         </div>
       </div>
     </div>
diff --git a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
index 38714b92d..c9f040c50 100644
--- a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
+++ b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
@@ -72,14 +72,13 @@ function ConsolePanel(props: Props) {
   const {
     sessionStore: { devTools },
   } = useStore();
-  const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
   const [filteredList, setFilteredList] = useState([]);
   const filter = useObserver(() => devTools[INDEX_KEY].filter);
   const activeTab = useObserver(() => devTools[INDEX_KEY].activeTab);
   const activeIndex = useObserver(() => devTools[INDEX_KEY].index);
   const [pauseSync, setPauseSync] = useState(activeIndex > 0);
   const synRef: any = useRef({});
-  const { showModal } = useModal();
+  const { showModal, component: modalActive } = useModal();
 
   const onTabClick = (activeTab: any) => devTools.update(INDEX_KEY, { activeTab });
   const onFilterChange = ({ target: { value } }: any) => {
@@ -92,7 +91,7 @@ function ConsolePanel(props: Props) {
   };
 
   const removePause = () => {
-    setIsDetailsModalActive(false);
+    if (!!modalActive) return;
     clearTimeout(timeOut);
     timeOut = setTimeout(() => {
       devTools.update(INDEX_KEY, { index: getCurrentIndex() });
@@ -101,7 +100,6 @@ function ConsolePanel(props: Props) {
   };
 
   const onMouseLeave = () => {
-    if (isDetailsModalActive) return;
     removePause();
   };
 
@@ -136,7 +134,7 @@ function ConsolePanel(props: Props) {
   const _list = React.useRef();
 
   const showDetails = (log: any) => {
-    setIsDetailsModalActive(true);
+    clearTimeout(timeOut);
     showModal(<ErrorDetailsModal errorId={log.errorId} />, { right: true, onClose: removePause });
     devTools.update(INDEX_KEY, { index: filteredList.indexOf(log) });
     setPauseSync(true);
diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
index 634aa9bae..416dd24eb 100644
--- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
+++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
@@ -140,11 +140,9 @@ interface Props {
 }
 function NetworkPanel(props: Props) {
   const { resources, time, domContentLoadedTime, loadTime, domBuildingTime, fetchList } = props;
-  const { showModal } = useModal();
-
+  const { showModal, component: modalActive } = useModal();
   const [filteredList, setFilteredList] = useState([]);
   const [showOnlyErrors, setShowOnlyErrors] = useState(false);
-  const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
   const additionalHeight = 0;
   const fetchPresented = fetchList.length > 0;
   const {
@@ -169,7 +167,7 @@ function NetworkPanel(props: Props) {
   };
 
   const removePause = () => {
-    setIsDetailsModalActive(false);
+    if (!!modalActive) return;
     clearTimeout(timeOut);
     timeOut = setTimeout(() => {
       devTools.update(INDEX_KEY, { index: getCurrentIndex() });
@@ -178,7 +176,7 @@ function NetworkPanel(props: Props) {
   };
 
   const onMouseLeave = () => {
-    if (isDetailsModalActive) return;
+    if (!!modalActive) return;
     removePause();
   };
 
@@ -261,7 +259,8 @@ function NetworkPanel(props: Props) {
   }, []);
 
   const showDetailsModal = (row: any) => {
-    setIsDetailsModalActive(true);
+    clearTimeout(timeOut);
+    setPauseSync(true);
     showModal(
       <FetchDetailsModal resource={row} rows={filteredList} fetchPresented={fetchPresented} />,
       {
@@ -270,7 +269,6 @@ function NetworkPanel(props: Props) {
       }
     );
     devTools.update(INDEX_KEY, { index: filteredList.indexOf(row) });
-    setPauseSync(true);
   };
 
   useEffect(() => {
@@ -296,6 +294,7 @@ function NetworkPanel(props: Props) {
               border={false}
             />
           </div>
+          {pauseSync && <div>pause</div>}
           <Input
             className="input-small"
             placeholder="Filter by name, type or value"
diff --git a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
index 557c72172..d16122fb3 100644
--- a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
+++ b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { hideHint } from 'Duck/components/player';
-import { Tooltip, Tabs, Input, NoContent, Icon, Toggler } from 'UI';
+import { Tabs, Input, NoContent, Icon } from 'UI';
 import { getRE } from 'App/utils';
 import { List, CellMeasurer, CellMeasurerCache, AutoSizer } from 'react-virtualized';
 
@@ -31,8 +31,7 @@ function StackEventPanel(props: Props) {
   const {
     sessionStore: { devTools },
   } = useStore();
-  const { showModal } = useModal();
-  const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
+  const { showModal, component: modalActive } = useModal();
   const [filteredList, setFilteredList] = useState([]);
   const filter = useObserver(() => devTools[INDEX_KEY].filter);
   const activeTab = useObserver(() => devTools[INDEX_KEY].activeTab);
@@ -55,8 +54,8 @@ function StackEventPanel(props: Props) {
   };
 
   const removePause = () => {
+    if (!!modalActive) return;
     clearTimeout(timeOut);
-    setIsDetailsModalActive(false);
     timeOut = setTimeout(() => {
       devTools.update(INDEX_KEY, { index: getCurrentIndex() });
       setPauseSync(false);
@@ -71,7 +70,6 @@ function StackEventPanel(props: Props) {
   }, [time]);
 
   const onMouseLeave = () => {
-    if (isDetailsModalActive) return;
     removePause();
   };
 
@@ -97,7 +95,7 @@ function StackEventPanel(props: Props) {
   });
 
   const showDetails = (item: any) => {
-    setIsDetailsModalActive(true);
+    clearTimeout(timeOut);
     showModal(<StackEventModal event={item} />, { right: true, onClose: removePause });
     devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
     setPauseSync(true);