fix(ui) - assist offline and refresh button

frontend/app/components/Session/LivePlayer.js

@@ -60,14 +60,14 @@ export default withRequest({
   loadingName: 'loadingCredentials',
 })(withPermissions(['ASSIST_LIVE'], '', true)(connect(
   state => {
-    const isAssist = state.getIn(['sessions', 'activeTab']).type === 'live';
-    const hasSessioPath = state.getIn([ 'sessions', 'sessionPath' ]).includes('/sessions');
+    // const isAssist = state.getIn(['sessions', 'activeTab']).type === 'live';
+    // const hasSessioPath = state.getIn([ 'sessions', 'sessionPath' ]).includes('/sessions');
     return {
       session: state.getIn([ 'sessions', 'current' ]),
       showAssist: state.getIn([ 'sessions', 'showChatWindow' ]),
       jwt: state.get('jwt'),
       fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
-      hasSessionsPath: hasSessioPath && !isAssist,
+      // hasSessionsPath: hasSessioPath && !isAssist,
       isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
       hasErrors: !!state.getIn([ 'sessions', 'errors' ]),
     }

frontend/app/components/Session_/Player/Controls/Controls.js

@@ -106,7 +106,7 @@ function getStorageName(type) {
     bottomBlock: state.getIn([ 'components', 'player', 'bottomBlock' ]),
     showStorage: props.showStorage || !state.getIn(['components', 'player', 'hiddenHints', 'storage']),
     showStack: props.showStack || !state.getIn(['components', 'player', 'hiddenHints', 'stack']),
-    closedLive: !!state.getIn([ 'sessions', 'errors' ]),
+    closedLive: !!state.getIn([ 'sessions', 'errors' ]) || !state.getIn([ 'sessions', 'current', 'live' ]),
   }
 }, {
   fullscreenOn,

frontend/app/components/Session_/Player/Player.js

@@ -16,7 +16,7 @@ import EventsToggleButton from '../../Session/EventsToggleButton';
 @connect(state => ({
   fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
   nextId: state.getIn([ 'sessions', 'nextId' ]),
-  closedLive: !!state.getIn([ 'sessions', 'errors' ]),
+  closedLive: !!state.getIn([ 'sessions', 'errors' ]) || !state.getIn([ 'sessions', 'current', 'live' ]),
 }), {
   hideTargetDefiner,
   fullscreenOff,

frontend/app/components/Session_/PlayerBlock.js

@@ -33,7 +33,7 @@ import styles from './playerBlock.css';
 @connect(state => ({
   fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
   bottomBlock: state.getIn([ 'components', 'player', 'bottomBlock' ]),
-  closedLive: !!state.getIn([ 'sessions', 'errors' ]),
+  closedLive: !!state.getIn([ 'sessions', 'errors' ]) || !state.getIn([ 'sessions', 'current', 'live' ]),
 }))
 export default class PlayerBlock extends React.PureComponent {
   componentDidUpdate(prevProps) {

frontend/app/components/Session_/PlayerBlockHeader.js

@@ -29,10 +29,11 @@ const ASSIST_ROUTE = assistRoute();
   loading: state.cssLoading || state.messagesLoading,
 }))
 @connect((state, props) => {
-  const isAssist = state.getIn(['sessions', 'activeTab']).type === 'live';
+  const isAssist = window.location.pathname.includes('/assist/');
   const hasSessioPath = state.getIn([ 'sessions', 'sessionPath' ]).includes('/sessions');
+  const session = state.getIn([ 'sessions', 'current' ]);
   return {
-    session: state.getIn([ 'sessions', 'current' ]),
+    session,
     sessionPath: state.getIn([ 'sessions', 'sessionPath' ]),
     loading: state.getIn([ 'sessions', 'toggleFavoriteRequest', 'loading' ]),
     disabled: state.getIn([ 'components', 'targetDefiner', 'inspectorMode' ]) || props.loading,
@@ -43,7 +44,7 @@ const ASSIST_ROUTE = assistRoute();
     siteId: state.getIn([ 'user', 'siteId' ]),
     hasSessionsPath: hasSessioPath && !isAssist,
     metaList: state.getIn(['customFields', 'list']).map(i => i.key),
-    closedLive: !!state.getIn([ 'sessions', 'errors' ]),
+    closedLive: !!state.getIn([ 'sessions', 'errors' ]) || !session.live,
   }
 }, {
   toggleFavorite, fetchListIntegration, setSessionPath

frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx

@@ -13,6 +13,7 @@ import DropdownPlain from 'Shared/DropdownPlain';
 import SortOrderButton from 'Shared/SortOrderButton';
 import { TimezoneDropdown } from 'UI';
 import { capitalize } from 'App/utils';
+import LiveSessionReloadButton from 'Shared/LiveSessionReloadButton';
 
 const AUTOREFRESH_INTERVAL = .5 * 60 * 1000
 const PER_PAGE = 20;
@@ -107,8 +108,6 @@ function LiveSessionList(props: Props) {
     }, AUTOREFRESH_INTERVAL);
   }
 
-  console.log('srt', sort)
-
   return (
     <div>
       <div className="flex mb-6 justify-between items-end">
@@ -117,6 +116,8 @@ function LiveSessionList(props: Props) {
             <span>Live Sessions</span>
             <span className="ml-2 font-normal color-gray-medium">{sessions.size}</span>
           </h3>
+
+          <LiveSessionReloadButton />
         </div>
         <div className="flex items-center">
           <div className="flex items-center">

frontend/app/components/shared/LiveSessionReloadButton/LiveSessionReloadButton.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import ReloadButton from '../ReloadButton'
+import { connect } from 'react-redux'
+import { fetchLiveList } from 'Duck/sessions'
+
+interface Props {
+    loading: boolean
+    fetchLiveList: typeof fetchLiveList
+}
+function LiveSessionReloadButton(props: Props) {
+    const { loading } = props
+  return (
+    <ReloadButton loading={loading} onClick={props.fetchLiveList}/>
+  )
+}
+
+export default connect(state => ({
+    loading: state.getIn([ 'sessions', 'fetchLiveListRequest', 'loading' ]),
+}), { fetchLiveList })(LiveSessionReloadButton)

frontend/app/components/shared/LiveSessionReloadButton/index.ts

@@ -0,0 +1 @@
+export { default } from './LiveSessionReloadButton';

frontend/app/components/shared/ReloadButton/ReloadButton.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { CircularLoader, Icon } from 'UI'
+import cn from 'classnames'
+
+interface Props {
+    loading?: boolean
+    onClick: () => void
+    iconSize?: number
+    iconName?: string
+    className?: string
+}
+export default function ReloadButton(props: Props) {
+    const { loading, onClick, iconSize = "14", iconName = "sync-alt", className = '' } = props
+    return (
+        <div
+            className={cn("ml-4 h-5 w-6 flex items-center justify-center", className)}
+            onClick={onClick}
+        >
+            { loading ? <CircularLoader className="ml-1" /> : <Icon name={iconName} size={iconSize} />}
+        </div>
+    )
+}

frontend/app/components/shared/ReloadButton/index.ts

@@ -0,0 +1 @@
+export { default } from './ReloadButton';