From 3ea8dd8d891386a0bb821acd8c38583253d36879 Mon Sep 17 00:00:00 2001 From: Delirium Date: Mon, 25 Mar 2024 13:30:34 +0100 Subject: [PATCH] fix(ui): small bugs (#1989) --- .../Session_/Player/Controls/Controls.tsx | 205 ++++++++++-------- .../Session_/Player/Controls/Timeline.tsx | 2 + 2 files changed, 114 insertions(+), 93 deletions(-) diff --git a/frontend/app/components/Session_/Player/Controls/Controls.tsx b/frontend/app/components/Session_/Player/Controls/Controls.tsx index a4a0e1efe..d6d1d2c9b 100644 --- a/frontend/app/components/Session_/Player/Controls/Controls.tsx +++ b/frontend/app/components/Session_/Player/Controls/Controls.tsx @@ -1,15 +1,15 @@ -import { STORAGE_TYPES, StorageType, selectStorageType } from "Player"; -import { Switch } from "antd"; -import cn from "classnames"; -import { observer } from "mobx-react-lite"; -import React from "react"; -import { connect } from "react-redux"; +import { STORAGE_TYPES, StorageType, selectStorageType } from 'Player'; +import { Switch } from 'antd'; +import cn from 'classnames'; +import { observer } from 'mobx-react-lite'; +import React from 'react'; +import { connect } from 'react-redux'; -import { PlayerContext } from "App/components/Session/playerContext"; -import { useStore } from "App/mstore"; -import { FullScreenButton, PlayButton, PlayingState } from "App/player-ui"; -import { session as sessionRoute, withSiteId } from "App/routes"; -import useShortcuts from "Components/Session/Player/ReplayPlayer/useShortcuts"; +import { PlayerContext } from 'App/components/Session/playerContext'; +import { useStore } from 'App/mstore'; +import { FullScreenButton, PlayButton, PlayingState } from 'App/player-ui'; +import { session as sessionRoute, withSiteId } from 'App/routes'; +import useShortcuts from 'Components/Session/Player/ReplayPlayer/useShortcuts'; import { LaunchConsoleShortcut, LaunchEventsShortcut, @@ -33,14 +33,13 @@ import { fullscreenOn, toggleBottomBlock, } from 'Duck/components/player'; -import { fetchSessions } from "Duck/liveSearch"; -import { Icon } from "UI"; - -import ControlButton from "./ControlButton"; -import Timeline from "./Timeline"; -import PlayerControls from "./components/PlayerControls"; -import styles from "./controls.module.css"; +import { fetchSessions } from 'Duck/liveSearch'; +import { Icon } from 'UI'; +import ControlButton from './ControlButton'; +import Timeline from './Timeline'; +import PlayerControls from './components/PlayerControls'; +import styles from './controls.module.css'; export const SKIP_INTERVALS = { 2: 2e3, @@ -49,25 +48,25 @@ export const SKIP_INTERVALS = { 15: 15e3, 20: 2e4, 30: 3e4, - 60: 6e4 + 60: 6e4, }; function getStorageName(type: any) { switch (type) { case STORAGE_TYPES.REDUX: - return "Redux"; + return 'Redux'; case STORAGE_TYPES.MOBX: - return "Mobx"; + return 'Mobx'; case STORAGE_TYPES.VUEX: - return "Vuex"; + return 'Vuex'; case STORAGE_TYPES.NGRX: - return "NgRx"; + return 'NgRx'; case STORAGE_TYPES.ZUSTAND: - return "Zustand"; + return 'Zustand'; case STORAGE_TYPES.NONE: - return "State"; + return 'State'; default: - return "State"; + return 'State'; } } @@ -82,7 +81,7 @@ function Controls(props: any) { speed, messagesLoading, markedTargets, - inspectorMode + inspectorMode, } = store.get(); const { @@ -97,10 +96,11 @@ function Controls(props: any) { previousSessionId, nextSessionId, siteId, - setActiveTab + setActiveTab, } = props; - const disabled = disabledRedux || messagesLoading || inspectorMode || markedTargets; + const disabled = + disabledRedux || messagesLoading || inspectorMode || markedTargets; const sessionTz = session?.timezone; const nextHandler = () => { @@ -118,7 +118,7 @@ function Controls(props: any) { toggleBottomBlock, openNextSession: nextHandler, openPrevSession: prevHandler, - setActiveTab + setActiveTab, }); const forthTenSeconds = () => { @@ -137,16 +137,16 @@ function Controls(props: any) { }; const state = completed - ? PlayingState.Completed - : playing - ? PlayingState.Playing - : PlayingState.Paused; + ? PlayingState.Completed + : playing + ? PlayingState.Playing + : PlayingState.Paused; return (
{!fullscreen && ( -
+
player.toggleSpeed(speedIndex)} toggleSkip={() => player.toggleSkip()} - playButton={} + playButton={ + + } skipIntervals={SKIP_INTERVALS} setSkipInterval={changeSkipInterval} currentInterval={skipInterval} startedAt={session.startedAt} /> -
+
@@ -179,7 +185,9 @@ function Controls(props: any) {
@@ -196,7 +204,12 @@ interface IDevtoolsButtons { } const DevtoolsButtons = observer( - ({ showStorageRedux, toggleBottomTools, bottomBlock, disabled }: IDevtoolsButtons) => { + ({ + showStorageRedux, + toggleBottomTools, + bottomBlock, + disabled, + }: IDevtoolsButtons) => { const { aiSummaryStore } = useStore(); const { store, player } = React.useContext(PlayerContext); @@ -216,8 +229,8 @@ const DevtoolsButtons = observer( const exceptionsList = tabStates[currentTab]?.exceptionsList || []; const storageType = store.get().tabStates[currentTab] - ? selectStorageType(store.get().tabStates[currentTab]) - : StorageType.NONE; + ? selectStorageType(store.get().tabStates[currentTab]) + : StorageType.NONE; const profilesCount = profilesList.length; const graphqlCount = graphqlList.length; const showGraphql = graphqlCount > 0; @@ -243,19 +256,19 @@ const DevtoolsButtons = observer( ) : null} +
Get a quick overview on the issues in this session.
} - label={"X-Ray"} + label={'X-Ray'} onClick={() => toggleBottomTools(OVERVIEW)} active={bottomBlock === OVERVIEW && !inspectorMode} /> +
Launch Console
@@ -269,7 +282,7 @@ const DevtoolsButtons = observer( +
Launch Network
@@ -283,7 +296,7 @@ const DevtoolsButtons = observer( +
Launch Performance
@@ -306,7 +319,7 @@ const DevtoolsButtons = observer( {showStorage && ( +
Launch State
@@ -319,7 +332,7 @@ const DevtoolsButtons = observer( )} +
Launch Events
@@ -347,12 +360,12 @@ export function SummaryButton({ onClick, withToggle, onToggle, - toggleValue + toggleValue, }: { - onClick?: () => void, - withToggle?: boolean, - onToggle?: () => void, - toggleValue?: boolean + onClick?: () => void; + withToggle?: boolean; + onToggle?: () => void; + toggleValue?: boolean; }) { const [isHovered, setHovered] = React.useState(false); @@ -364,66 +377,72 @@ export function SummaryButton({ onMouseLeave={() => setHovered(false)} > {withToggle ? ( - + ) : null} - -
Summary AI
+ +
Summary AI
); } const gradientButton = { - border: "double 1px transparent", - borderRadius: "60px", + border: 'double 1px transparent', + borderRadius: '60px', background: - "linear-gradient(#f6f6f6, #f6f6f6), linear-gradient(to right, #394EFF 0%, #3EAAAF 100%)", - backgroundOrigin: "border-box", - backgroundClip: "content-box, border-box", - cursor: "pointer" + 'linear-gradient(#f6f6f6, #f6f6f6), linear-gradient(to right, #394EFF 0%, #3EAAAF 100%)', + backgroundOrigin: 'border-box', + backgroundClip: 'content-box, border-box', + cursor: 'pointer', }; const onHoverFillStyle = { - width: "100%", - height: "100%", - display: "flex", - borderRadius: "60px", + width: '100%', + height: '100%', + display: 'flex', + borderRadius: '60px', gap: 2, - alignItems: "center", - padding: "2px 8px", - background: "linear-gradient(156deg, #E3E6FF 0%, #E4F3F4 69.48%)" + alignItems: 'center', + padding: '2px 8px', + background: 'linear-gradient(156deg, #E3E6FF 0%, #E4F3F4 69.48%)', }; const fillStyle = { - width: "100%", - height: "100%", - display: "flex", - borderRadius: "60px", + width: '100%', + height: '100%', + display: 'flex', + borderRadius: '60px', gap: 2, - alignItems: "center", - padding: "2px 8px" + alignItems: 'center', + padding: '2px 8px', }; const ControlPlayer = observer(Controls); export default connect( (state: any) => { - const permissions = state.getIn(["user", "account", "permissions"]) || []; - const isEnterprise = state.getIn(["user", "account", "edition"]) === "ee"; + const permissions = state.getIn(['user', 'account', 'permissions']) || []; + const isEnterprise = state.getIn(['user', 'account', 'edition']) === 'ee'; return { - disabledRedux: isEnterprise && !permissions.includes("DEV_TOOLS"), - fullscreen: state.getIn(["components", "player", "fullscreen"]), - bottomBlock: state.getIn(["components", "player", "bottomBlock"]), - showStorageRedux: !state.getIn(["components", "player", "hiddenHints", "storage"]), - showStackRedux: !state.getIn(["components", "player", "hiddenHints", "stack"]), - session: state.getIn(["sessions", "current"]), - totalAssistSessions: state.getIn(["liveSearch", "total"]), - skipInterval: state.getIn(["components", "player", "skipInterval"]), - previousSessionId: state.getIn(["sessions", "previousId"]), - nextSessionId: state.getIn(["sessions", "nextId"]), - siteId: state.getIn(["site", "siteId"]) + disabledRedux: isEnterprise && !permissions.includes('DEV_TOOLS'), + fullscreen: state.getIn(['components', 'player', 'fullscreen']), + bottomBlock: state.getIn(['components', 'player', 'bottomBlock']), + showStorageRedux: !state.getIn([ + 'components', + 'player', + 'hiddenHints', + 'storage', + ]), + showStackRedux: !state.getIn([ + 'components', + 'player', + 'hiddenHints', + 'stack', + ]), + session: state.getIn(['sessions', 'current']), + totalAssistSessions: state.getIn(['liveSearch', 'total']), + skipInterval: state.getIn(['components', 'player', 'skipInterval']), + previousSessionId: state.getIn(['sessions', 'previousId']), + nextSessionId: state.getIn(['sessions', 'nextId']), + siteId: state.getIn(['site', 'siteId']), }; }, { @@ -431,7 +450,7 @@ export default connect( fullscreenOff, toggleBottomBlock, fetchSessions, - changeSkipInterval + changeSkipInterval, } )(ControlPlayer); diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.tsx b/frontend/app/components/Session_/Player/Controls/Timeline.tsx index 5992e19f5..e803424bf 100644 --- a/frontend/app/components/Session_/Player/Controls/Timeline.tsx +++ b/frontend/app/components/Session_/Player/Controls/Timeline.tsx @@ -182,6 +182,8 @@ export default connect( timezone: state.getIn(['sessions', 'current']).timezone, tooltipVisible: state.getIn(['sessions', 'timeLineTooltip', 'isVisible']), timelineZoomEnabled: state.getIn(['components', 'player']).timelineZoom.enabled, + timelineZoomStartTs: state.getIn(['components', 'player']).timelineZoom.startTs, + timelineZoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs, }), { setTimelinePointer, setTimelineHoverTime } )(observer(Timeline));