From 57ea563cb59029e258a8dad203669fb46396c2ef Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Thu, 1 Sep 2022 13:04:22 +0200
Subject: [PATCH] fix(ui): fix jump button in fetch tab

---
 .../app/components/Session/Layout/Layout.js   |  3 -
 .../app/components/Session_/Fetch/Fetch.js    |  2 +-
 .../components/Session_/Network/Network.js    | 10 ---
 .../Session_/Network/NetworkContent.js        |  2 -
 .../components/Session_/Storage/Storage.js    | 63 ++++++++-----------
 5 files changed, 28 insertions(+), 52 deletions(-)

diff --git a/frontend/app/components/Session/Layout/Layout.js b/frontend/app/components/Session/Layout/Layout.js
index ba47d7173..93b75c826 100644
--- a/frontend/app/components/Session/Layout/Layout.js
+++ b/frontend/app/components/Session/Layout/Layout.js
@@ -14,14 +14,11 @@ function Layout({ children, player, toolbar }) {
       <div className="flex-1 flex">
         <div
           className="flex flex-col"
-        //   style={{ width: player.fullscreen.enabled ? '100vw' : 'calc(100vw - 270px)' }}
         >
           <div className="flex-1 flex flex-col relative bg-white border-gray-light">
             {player.fullscreen.enabled && <EscapeButton onClose={player.toggleFullscreen} />}
             <div className="flex-1 relative overflow-hidden">
-              {/* <Loader loading={ player.loading }> */}
               {children}
-              {/* </Loader>  */}
               <PlayOverlay player={player} />
             </div>
             <Controls player={player} toolbar={toolbar} />
diff --git a/frontend/app/components/Session_/Fetch/Fetch.js b/frontend/app/components/Session_/Fetch/Fetch.js
index d8078e89a..df0c44864 100644
--- a/frontend/app/components/Session_/Fetch/Fetch.js
+++ b/frontend/app/components/Session_/Fetch/Fetch.js
@@ -157,7 +157,7 @@ export default class Fetch extends React.PureComponent {
                 {[
                   {
                     label: 'Start',
-                    width: 90,
+                    width: 120,
                     render: renderStart,
                   },
                   {
diff --git a/frontend/app/components/Session_/Network/Network.js b/frontend/app/components/Session_/Network/Network.js
index 88e136bf8..08779abd6 100644
--- a/frontend/app/components/Session_/Network/Network.js
+++ b/frontend/app/components/Session_/Network/Network.js
@@ -35,16 +35,6 @@ export function renderName(r) {
       >
         <TextEllipsis>{r.name}</TextEllipsis>
       </Popup>
-      <Button
-        variant="text"
-        className="right-0 text-xs uppercase p-2 color-gray-500 hover:color-teal"
-        onClick={(e) => {
-          e.stopPropagation();
-          jump(r.time);
-        }}
-      >
-        Jump
-      </Button>
     </div>
   );
 }
diff --git a/frontend/app/components/Session_/Network/NetworkContent.js b/frontend/app/components/Session_/Network/NetworkContent.js
index 46992422a..082c87aa0 100644
--- a/frontend/app/components/Session_/Network/NetworkContent.js
+++ b/frontend/app/components/Session_/Network/NetworkContent.js
@@ -48,14 +48,12 @@ export function renderType(r) {
 
 export function renderName(r) {
   return (
-
       <Popup
         style={{ width: '100%' }}
         content={<div className={stl.popupNameContent}>{r.url}</div>}
       >
         <div className={stl.popupNameTrigger}>{r.name}</div>
       </Popup>
-
   );
 }
 
diff --git a/frontend/app/components/Session_/Storage/Storage.js b/frontend/app/components/Session_/Storage/Storage.js
index df9c4c2b3..b1cf53dfc 100644
--- a/frontend/app/components/Session_/Storage/Storage.js
+++ b/frontend/app/components/Session_/Storage/Storage.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { hideHint } from 'Duck/components/player';
-import { 
+import {
 	connectPlayer,
 	selectStorageType,
 	STORAGE_TYPES,
@@ -21,14 +21,13 @@ import stl from './storage.module.css';
 // const DIFF = 'DIFF';
 // const TABS = [ DIFF, STATE ].map(tab => ({ text: tab, key: tab }));
 
-
 function getActionsName(type) {
 	switch(type) {
 		case STORAGE_TYPES.MOBX:
 			return "MUTATIONS";
 		case STORAGE_TYPES.VUEX:
 			return "MUTATIONS";
-		default: 
+		default:
 			return "ACTIONS";
 	}
 }
@@ -50,7 +49,7 @@ export default class Storage extends React.PureComponent {
 	focusNextButton() {
 		if (this.lastBtnRef.current) {
 			this.lastBtnRef.current.focus();
-		}	
+		}
 	}
 
 	componentDidMount() {
@@ -75,7 +74,7 @@ export default class Storage extends React.PureComponent {
 		// const yellowPaths = [];
 		// const greenPaths = [];
 		// lastRAction.diff.forEach(d => {
-		// 	try { 
+		// 	try {
 	 //  		let { path, kind, rhs: value } = d;
 		// 		if (kind === 'A') {
 		// 			path.slice().push(d.index);
@@ -86,11 +85,11 @@ export default class Storage extends React.PureComponent {
 		// 		if (kind === 'N') greenPaths.push(d.path.slice().reverse());
 		// 		if (kind === 'D') redPaths.push(d.path.slice().reverse());
 		// 		if (kind === 'E') yellowPaths.push(d.path.slice().reverse());
-	 //  	} catch (e) { 
+	 //  	} catch (e) {
 	 //  	}
 	 //  });
 		// return (
-		// 	<DiffTree 
+		// 	<DiffTree
 		// 		data={ df }
 		// 		redPaths={ redPaths }
 		// 		yellowPaths={ yellowPaths }
@@ -101,7 +100,7 @@ export default class Storage extends React.PureComponent {
 
 	ensureString(actionType) {
 		if (typeof actionType === 'string') return actionType;
-		return "UNKNOWN"; 
+		return "UNKNOWN";
 	}
 
 	goNext = () => {
@@ -111,17 +110,11 @@ export default class Storage extends React.PureComponent {
 
 
 	renderTab () {
-		// switch(this.props.activeTab) {
-		// 	case DIFF:
-		// 		return this.renderDiff();
-		// 	case STATE:
-				const { listNow } = this.props;
-				if (listNow.length === 0) {
-					return "Not initialized"; //?
-				}
-				return  <JSONTree src={ listNow[ listNow.length - 1 ].state  } />;
-		// }
-		// return null;
+		const { listNow } = this.props;
+		if (listNow.length === 0) {
+			return "Not initialized"; //?
+		}
+		return  <JSONTree src={ listNow[ listNow.length - 1 ].state  } />;
 	}
 
 	renderItem(item, i) {
@@ -146,7 +139,7 @@ export default class Storage extends React.PureComponent {
 
 		return (
 			<div className="flex justify-between items-start" key={ `store-${i}` }>
-				<JSONTree 
+				<JSONTree
 					name={ this.ensureString(name) }
 					src={ src }
 					collapsed
@@ -154,22 +147,22 @@ export default class Storage extends React.PureComponent {
 				/>
 				<div className="flex items-center">
 					{ i + 1 < listNow.length &&
-						<button 
+						<button
 							className={ stl.button }
-							onClick={ () => jump(item.time, item._index) } 
+							onClick={ () => jump(item.time, item._index) }
 						>
-							{"JUMP"} 
+							{"JUMP"}
 						</button>
 					}
 					{ i + 1 === listNow.length && i + 1 < list.length  &&
 						<button
 							className={ stl.button }
 							ref={ this.lastBtnRef }
-							onClick={ this.goNext } 
+							onClick={ this.goNext }
 						>
-							{"NEXT"} 
+							{"NEXT"}
 						</button>
-					} 
+					}
 					{ typeof item.duration === 'number' &&
 						<div className="font-size-12 color-gray-medium">
 							{ formatMs(item.duration) }
@@ -177,15 +170,13 @@ export default class Storage extends React.PureComponent {
 					}
 				</div>
 			</div>
-		);					
+		);
 	}
 
 	render() {
 		const {
-			type, 
+			type,
 			listNow,
-			activeTab,
-			setActiveTab,
 			list,
 			hintIsHidden,
 		} = this.props;
@@ -212,12 +203,12 @@ export default class Storage extends React.PureComponent {
 					<NoContent
             title="Nothing to display yet."
             subtext={ !hintIsHidden
-              ? 
+              ?
                 <>
                 	{'Inspect your application state while you’re replaying your users sessions. OpenReplay supports '}
-                	<a className="underline color-teal" href="https://docs.openreplay.com/plugins/redux" target="_blank">Redux</a>{', '} 
-                	<a className="underline color-teal" href="https://docs.openreplay.com/plugins/vuex" target="_blank">VueX</a>{', '} 
-                	<a className="underline color-teal" href="https://docs.openreplay.com/plugins/mobx" target="_blank">MobX</a>{' and '} 
+                	<a className="underline color-teal" href="https://docs.openreplay.com/plugins/redux" target="_blank">Redux</a>{', '}
+                	<a className="underline color-teal" href="https://docs.openreplay.com/plugins/vuex" target="_blank">VueX</a>{', '}
+                	<a className="underline color-teal" href="https://docs.openreplay.com/plugins/mobx" target="_blank">MobX</a>{' and '}
                 	<a className="underline color-teal" href="https://docs.openreplay.com/plugins/ngrx" target="_blank">NgRx</a>.
                 	<br/><br/>
                   <button className="color-teal" onClick={() => this.props.hideHint("storage")}>Got It!</button>
@@ -229,8 +220,8 @@ export default class Storage extends React.PureComponent {
           >
 						{ showStore &&
 						  <div className="ph-10 scroll-y" style={{ width: "40%" }} >
-								{ listNow.length === 0  
-									? <div className="color-gray-light font-size-16 mt-20 text-center" >{ "Empty state." }</div> 
+								{ listNow.length === 0
+									? <div className="color-gray-light font-size-16 mt-20 text-center" >{ "Empty state." }</div>
 									: this.renderTab()
 								}
 							</div>