From cda6f197f2fdd90e4b791bd640e4a2c7ddf4917a Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Wed, 1 Dec 2021 20:22:14 +0530 Subject: [PATCH] fix(ui) - session auto play navigation, back nav --- .../app/components/BugFinder/BugFinder.js | 9 +++++++-- .../FunnelIssueDetails/FunnelIssueDetails.js | 2 +- .../FunnelSessionList/FunnelSessionList.js | 16 ++++++++++++---- .../FunnelSessionsHeader.js | 1 - .../components/Session_/PlayerBlockHeader.js | 19 ++++++++++++------- frontend/app/duck/sessions.js | 18 +++++++++++++++--- 6 files changed, 47 insertions(+), 18 deletions(-) diff --git a/frontend/app/components/BugFinder/BugFinder.js b/frontend/app/components/BugFinder/BugFinder.js index bac9ea8e6..4f7a8b1c3 100644 --- a/frontend/app/components/BugFinder/BugFinder.js +++ b/frontend/app/components/BugFinder/BugFinder.js @@ -18,7 +18,7 @@ import withLocationHandlers from "HOCs/withLocationHandlers"; import { fetch as fetchFilterVariables } from 'Duck/sources'; import { fetchList as fetchIntegrationVariables, fetchSources } from 'Duck/customField'; import { RehydrateSlidePanel } from './WatchDogs/components'; -import { setActiveTab } from 'Duck/sessions'; +import { setActiveTab, setFunnelPage } from 'Duck/sessions'; import SessionsMenu from './SessionsMenu/SessionsMenu'; import SessionFlowList from './SessionFlowList/SessionFlowList'; import { LAST_7_DAYS } from 'Types/app/period'; @@ -58,7 +58,8 @@ const weakEqual = (val1, val2) => { fetchSiteList, fetchFunnelsList, resetFunnel, - resetFunnelFilters + resetFunnelFilters, + setFunnelPage }) @withPageTitle("Sessions - OpenReplay") export default class BugFinder extends React.PureComponent { @@ -94,6 +95,10 @@ export default class BugFinder extends React.PureComponent { props.fetchFunnelsList(LAST_7_DAYS) } + componentDidMount() { + this.props.setFunnelPage(false); + } + toggleRehydratePanel = () => { this.setState({ showRehydratePanel: !this.state.showRehydratePanel }) } diff --git a/frontend/app/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.js b/frontend/app/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.js index 0bb049d24..6672bc580 100644 --- a/frontend/app/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.js +++ b/frontend/app/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.js @@ -28,7 +28,7 @@ function FunnelIssueDetails(props) {
- +
) diff --git a/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js b/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js index 3aef18003..707049faa 100644 --- a/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js +++ b/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js @@ -2,19 +2,27 @@ import React, { useState, useEffect } from 'react' import { connect } from 'react-redux' import SessionItem from 'Shared/SessionItem' import { fetchSessions, fetchSessionsFiltered } from 'Duck/funnels' +import { setFunnelPage } from 'Duck/sessions' import { LoadMoreButton, NoContent, Loader } from 'UI' import FunnelSessionsHeader from '../FunnelSessionsHeader' const PER_PAGE = 10; function FunnelSessionList(props) { - const { list, sessionsTotal, sessionsSort, inDetails = false } = props; + const { funnelId, issueId, list, sessionsTotal, sessionsSort, inDetails = false } = props; const [showPages, setShowPages] = useState(1) const displayedCount = Math.min(showPages * PER_PAGE, list.size); const addPage = () => setShowPages(showPages + 1); + useEffect(() => { + props.setFunnelPage({ + funnelId, + issueId + }) + }, []) + return (
@@ -24,7 +32,7 @@ function FunnelSessionList(props) { subtext="Please try changing your search parameters." icon="exclamation-circle" show={ list.size === 0} - > + > { list.take(displayedCount).map(session => ( + />
) @@ -51,4 +59,4 @@ export default connect(state => ({ liveFilters: state.getIn(['funnelFilters', 'appliedFilter']), funnelFilters: state.getIn(['funnels', 'funnelFilters']), sessionsSort: state.getIn(['funnels', 'sessionsSort']), -}), { fetchSessions, fetchSessionsFiltered })(FunnelSessionList) +}), { fetchSessions, fetchSessionsFiltered, setFunnelPage })(FunnelSessionList) diff --git a/frontend/app/components/Funnels/FunnelSessionsHeader/FunnelSessionsHeader.js b/frontend/app/components/Funnels/FunnelSessionsHeader/FunnelSessionsHeader.js index c598b1543..3a58ccca0 100644 --- a/frontend/app/components/Funnels/FunnelSessionsHeader/FunnelSessionsHeader.js +++ b/frontend/app/components/Funnels/FunnelSessionsHeader/FunnelSessionsHeader.js @@ -11,7 +11,6 @@ const sortOptions = Object.entries(sortOptionsMap) .map(([ value, text ]) => ({ value, text })); function FunnelSessionsHeader({ sessionsCount, inDetails = false }) { - const onSort = () => {} return (
diff --git a/frontend/app/components/Session_/PlayerBlockHeader.js b/frontend/app/components/Session_/PlayerBlockHeader.js index dee980e00..9a14541b2 100644 --- a/frontend/app/components/Session_/PlayerBlockHeader.js +++ b/frontend/app/components/Session_/PlayerBlockHeader.js @@ -2,7 +2,7 @@ import { connect } from 'react-redux'; import { withRouter } from 'react-router-dom'; import { browserIcon, osIcon, deviceTypeIcon } from 'App/iconNames'; import { formatTimeOrDate } from 'App/date'; -import { sessions as sessionsRoute, funnelIssue as funnelIssueRoute, withSiteId } from 'App/routes'; +import { sessions as sessionsRoute, funnel as funnelRoute, funnelIssue as funnelIssueRoute, withSiteId } from 'App/routes'; import { Icon, CountryFlag, IconButton, BackLink } from 'UI'; import { toggleFavorite } from 'Duck/sessions'; import cn from 'classnames'; @@ -36,12 +36,13 @@ function capitalise(str) { local: state.getIn(['sessions', 'timezone']), funnelRef: state.getIn(['funnels', 'navRef']), siteId: state.getIn([ 'user', 'siteId' ]), + funnelPage: state.getIn(['sessions', 'funnelPage']), }), { toggleFavorite, fetchListIntegration }) @withRouter export default class PlayerBlockHeader extends React.PureComponent { - componentDidMount() { + componentDidMount() { if (!this.props.issuesFetched) this.props.fetchListIntegration('issues') } @@ -53,10 +54,13 @@ export default class PlayerBlockHeader extends React.PureComponent { ); backHandler = () => { - const { history, siteId } = this.props; - if (history.action !== 'POP') - history.goBack(); - else + const { history, siteId, funnelPage } = this.props; + if (funnelPage) { + if (funnelPage.get('issueId')) { + history.push(withSiteId(funnelIssueRoute(funnelPage.get('funnelId'), funnelPage.get('issueId')), siteId)) + } else + history.push(withSiteId(funnelRoute(funnelPage.get('funnelId')), siteId)); + } else history.push(withSiteId(SESSIONS_ROUTE), siteId); } @@ -87,6 +91,7 @@ export default class PlayerBlockHeader extends React.PureComponent { jiraConfig, fullscreen, } = this.props; + const { history, siteId } = this.props; return (
@@ -111,7 +116,7 @@ export default class PlayerBlockHeader extends React.PureComponent { { live && } { !live && ( <> - +
{ @@ -117,9 +119,11 @@ const reducer = (state = initialState, action = {}) => { } + const sessionIds = list.map(({ sessionId }) => sessionId ).toJS(); + return state .set('list', list) - .set('sessionIds', list.map(({ sessionId }) => sessionId ).toJS()) + .set('sessionIds', sessionIds) .set('favoriteList', list.filter(({ favorite }) => favorite)) .set('total', total) .set('keyMap', keyMap) @@ -236,7 +240,8 @@ const reducer = (state = initialState, action = {}) => { return state.set('showChatWindow', action.state) case FETCH_INSIGHTS.SUCCESS:  return state.set('insights', List(action.data).sort((a, b) => b.count - a.count)); - + case SET_FUNNEL_PAGE_FLAG: + return state.set('funnelPage', action.funnelPage ? Map(action.funnelPage) : false); default: return state; } @@ -364,3 +369,10 @@ export function setEventFilter(filter) { } } +export function setFunnelPage(funnelPage) { + return { + type: SET_FUNNEL_PAGE_FLAG, + funnelPage + } +} +