From 5877f10f66b845976e7662203c37f7441438518b Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Thu, 14 Sep 2023 10:27:37 +0200
Subject: [PATCH] fix(ui): another fix for controls

---
 .../Session_/Player/Controls/Controls.tsx     | 28 ++++++++-----------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/frontend/app/components/Session_/Player/Controls/Controls.tsx b/frontend/app/components/Session_/Player/Controls/Controls.tsx
index cc361fce8..3db05c917 100644
--- a/frontend/app/components/Session_/Player/Controls/Controls.tsx
+++ b/frontend/app/components/Session_/Player/Controls/Controls.tsx
@@ -172,12 +172,9 @@ function Controls(props: any) {
           <div className="flex items-center h-full">
             <DevtoolsButtons
               showStorageRedux={showStorageRedux}
-              disabledRedux={disabledRedux}
               toggleBottomTools={toggleBottomTools}
               bottomBlock={bottomBlock}
-              markedTargets={markedTargets}
-              messagesLoading={messagesLoading}
-
+              disabled={disabled}
             />
             <Tooltip title="Fullscreen" delay={0} placement="top-start" className="mx-4">
               <FullScreenButton
@@ -195,14 +192,12 @@ function Controls(props: any) {
 
 interface IDevtoolsButtons {
   showStorageRedux: boolean;
-  disabledRedux: boolean;
   toggleBottomTools: (blockName: number) => void;
   bottomBlock: number;
-  markedTargets: MarkedTarget[] | null;
-  messagesLoading: boolean;
+  disabled: boolean;
 }
 
-const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomBlock, disabledRedux, messagesLoading, markedTargets }: IDevtoolsButtons) => {
+const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomBlock, disabled }: IDevtoolsButtons) => {
   const { store } = React.useContext(PlayerContext);
 
   const {
@@ -211,8 +206,7 @@ const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomB
     tabStates
   } = store.get();
 
-  const cssLoading = tabStates[currentTab]?.cssLoading ?? false;
-  const disabled = disabledRedux || cssLoading || messagesLoading || inspectorMode || markedTargets;
+  const disableButtons = disabled;
 
   const profilesList = tabStates[currentTab]?.profilesList || [];
   const graphqlList = tabStates[currentTab]?.graphqlList || [];
@@ -231,7 +225,7 @@ const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomB
   return (
     <>
       <ControlButton
-        disabled={disabled && !inspectorMode}
+        disabled={disableButtons}
         onClick={() => toggleBottomTools(CONSOLE)}
         active={bottomBlock === CONSOLE && !inspectorMode}
         label="CONSOLE"
@@ -242,7 +236,7 @@ const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomB
       />
 
     <ControlButton
-      disabled={disabled && !inspectorMode}
+      disabled={disableButtons}
       onClick={() => toggleBottomTools(NETWORK)}
       active={bottomBlock === NETWORK && !inspectorMode}
       label="NETWORK"
@@ -253,7 +247,7 @@ const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomB
     />
 
     <ControlButton
-      disabled={disabled && !inspectorMode}
+      disabled={disableButtons}
       onClick={() => toggleBottomTools(PERFORMANCE)}
       active={bottomBlock === PERFORMANCE && !inspectorMode}
       label="PERFORMANCE"
@@ -264,7 +258,7 @@ const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomB
 
     {showGraphql && (
       <ControlButton
-        disabled={disabled && !inspectorMode}
+        disabled={disableButtons}
         onClick={() => toggleBottomTools(GRAPHQL)}
         active={bottomBlock === GRAPHQL && !inspectorMode}
         label="GRAPHQL"
@@ -276,7 +270,7 @@ const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomB
 
     {showStorage && (
       <ControlButton
-        disabled={disabled && !inspectorMode}
+        disabled={disableButtons}
         onClick={() => toggleBottomTools(STORAGE)}
         active={bottomBlock === STORAGE && !inspectorMode}
         label={getStorageName(storageType)}
@@ -286,7 +280,7 @@ const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomB
       />
     )}
     <ControlButton
-      disabled={disabled && !inspectorMode}
+      disabled={disableButtons}
       onClick={() => toggleBottomTools(STACKEVENTS)}
       active={bottomBlock === STACKEVENTS && !inspectorMode}
       label="EVENTS"
@@ -297,7 +291,7 @@ const DevtoolsButtons = observer(({ showStorageRedux, toggleBottomTools, bottomB
     />
     {showProfiler && (
       <ControlButton
-        disabled={disabled && !inspectorMode}
+        disabled={disableButtons}
         onClick={() => toggleBottomTools(PROFILER)}
         active={bottomBlock === PROFILER && !inspectorMode}
         label="PROFILER"