fix(ui) - session auto play navigation, back nav

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 })
   }

frontend/app/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.js

@@ -28,7 +28,7 @@ function FunnelIssueDetails(props) {
       <Loader loading={loading}>
         <IssueItem issue={issue} inDetails onBack={onBack} />
         <div className="my-6" />
-        <FunnelSessionList issuId={issueId} inDetails />
+        <FunnelSessionList funnelId={funnelId} issueId={issueId} inDetails />
       </Loader>
     </div>
   )

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 (
     <div>
       <FunnelSessionsHeader sessionsCount={inDetails ? sessionsTotal : list.size} inDetails={inDetails} />
@@ -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 => (
           <SessionItem
             key={ session.sessionId }
@@ -37,7 +45,7 @@ function FunnelSessionList(props) {
           displayedCount={displayedCount}
           totalCount={list.size}
           onClick={addPage}
-        />        
+        />
       </NoContent>
     </div>
   )
@@ -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)

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 (
     <div className="flex items-center">
       <div className="flex items-center mr-auto text-xl">

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 (
       <div className={ cn(cls.header, "flex justify-between", { "hidden" : fullscreen}) }>
@@ -111,7 +116,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
             { live && <AssistActions isLive userId={userId} /> }
             { !live && (
               <>
-                <Autoplay />            
+                <Autoplay />
                 <div className={ cls.divider } />
                 <IconButton
                   className="mr-2"

frontend/app/duck/sessions.js

@@ -24,6 +24,7 @@ const SET_TIMEZONE = 'sessions/SET_TIMEZONE';
 const SET_EVENT_QUERY = 'sessions/SET_EVENT_QUERY';
 const SET_AUTOPLAY_VALUES = 'sessions/SET_AUTOPLAY_VALUES';
 const TOGGLE_CHAT_WINDOW = 'sessions/TOGGLE_CHAT_WINDOW';
+const SET_FUNNEL_PAGE_FLAG = 'sessions/SET_FUNNEL_PAGE_FLAG';
 
 const SET_ACTIVE_TAB = 'sessions/SET_ACTIVE_TAB';
 
@@ -54,7 +55,8 @@ const initialState = Map({
   visitedEvents: List(),
   insights: List(),
   insightFilters: defaultDateFilters,
-  host: ''
+  host: '',
+  funnelPage: Map(),
 });
 
 const reducer = (state = initialState, action = {}) => {
@@ -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
+  }
+}
+