change(ui) - tracker msg

frontend/app/components/BugFinder/BugFinder.js

@@ -25,6 +25,7 @@ import { LAST_7_DAYS } from 'Types/app/period';
 import { resetFunnel } from 'Duck/funnels';
 import { resetFunnelFilters } from 'Duck/funnelFilters'
 import NoSessionsMessage from '../shared/NoSessionsMessage';
+import TrackerUpdateMessage from '../shared/TrackerUpdateMessage';
 import LiveSessionList from './LiveSessionList'
 
 const AUTOREFRESH_INTERVAL = 10 * 60 * 1000;
@@ -151,6 +152,7 @@ export default class BugFinder extends React.PureComponent {
             />
           </div>
           <div className={cn("side-menu-margined", stl.searchWrapper) }>
+            <TrackerUpdateMessage />
             <NoSessionsMessage />
             <div 
               data-hidden={ activeTab === 'live' || activeTab === 'favorite' }

frontend/app/components/Client/Sites/NewSiteForm.js

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { Input, Button, Label } from 'UI';
 import { save, edit, update , fetchList } from 'Duck/site';
 import { pushNewSite, setSiteId } from 'Duck/user';
+import { withRouter } from 'react-router-dom';
 import styles from './siteForm.css';
 
 @connect(state => ({
@@ -17,6 +18,7 @@ import styles from './siteForm.css';
 	fetchList,
   setSiteId
 })
+@withRouter
 export default class NewSiteForm extends React.PureComponent {
 	state = {
 		existsError: false,
@@ -24,7 +26,7 @@ export default class NewSiteForm extends React.PureComponent {
 
 	onSubmit = e => {
 		e.preventDefault();
-		const { site, siteList } = this.props;
+		const { site, siteList, location: { pathname } } = this.props;
 		if (!site.exists() && siteList.some(({ name }) => name === site.name)) {
 			return this.setState({ existsError: true });
 		}
@@ -39,7 +41,9 @@ export default class NewSiteForm extends React.PureComponent {
         const site = sites.last();
 
         this.props.pushNewSite(site)
-        this.props.setSiteId(site.id)
+        if (!pathname.includes('/client')) {
+          this.props.setSiteId(site.id)
+        }
 				this.props.onClose(null, site)
 			});
 		}
@@ -52,7 +56,7 @@ export default class NewSiteForm extends React.PureComponent {
  	}
 
 	render() {
-		const { site, loading, onClose } = this.props;
+		const { site, loading } = this.props;
 		return (
 			<form className={ styles.formWrapper } onSubmit={ this.onSubmit }>
         <div className={ styles.content }>

frontend/app/components/Session_/EventsBlock/EventsBlock.js

@@ -176,6 +176,7 @@ export default class EventsBlock extends React.PureComponent {
         userNumericHash,
         userDisplayName,        
         userId,
+        revId,
         userAnonymousId
       },
       filteredEvents
@@ -191,6 +192,7 @@ export default class EventsBlock extends React.PureComponent {
             userNumericHash={userNumericHash}
             userDisplayName={userDisplayName}
             userId={userId}
+            revId={revId}
             userAnonymousId={userAnonymousId}
           />
 

frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js

@@ -6,7 +6,7 @@ import Metadata from '../Metadata'
 import { withRequest } from 'HOCs'
 import SessionList from '../Metadata/SessionList'
 
-function UserCard({ className, userNumericHash, userDisplayName, similarSessions, userId, userAnonymousId, request, loading }) {
+function UserCard({ className, userNumericHash, userDisplayName, similarSessions, userId, userAnonymousId, request, loading, revId }) {
   const [showUserSessions, setShowUserSessions] = useState(false)
   const hasUserDetails = !!userId || !!userAnonymousId;
 
@@ -29,6 +29,11 @@ function UserCard({ className, userNumericHash, userDisplayName, similarSessions
           </TextEllipsis>
         </div>
       </div>
+      {revId && (
+        <div className="border-t py-2 px-3">
+          RevId: {revId}
+        </div>
+      )}
       <div className="border-t">
         <Metadata />
       </div>

frontend/app/components/shared/TrackerUpdateMessage/TrackerUpdateMessage.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Icon } from 'UI'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom';
+import { onboarding as onboardingRoute } from 'App/routes'
+import { withSiteId } from 'App/routes';
+
+const TrackerUpdateMessage= (props) => {
+  // const { site } = props;
+  const { site, sites, match: { params: { siteId } } } = props;
+  const activeSite = sites.find(s => s.id == siteId);
+  const hasSessions = !!activeSite && !activeSite.recorded;
+  const needUpdate = !hasSessions && site.trackerVersion !== window.ENV.TRACKER_VERSION;
+  return needUpdate ? (
+    <>
+      {(
+        <div>
+          <div
+            className="rounded text-sm flex items-center p-2 justify-between mb-4"
+            style={{ backgroundColor: 'rgba(255, 239, 239, 1)', border: 'solid thin rgba(221, 181, 181, 1)'}}
+          >
+            <div className="flex items-center w-full">
+              <div className="flex-shrink-0 w-8 flex justify-center">
+                <Icon name="info-circle" size="14" color="gray-darkest" />
+              </div>
+              <div className="ml-2color-gray-darkest mr-auto">
+                Please <a href="#" className="link" onClick={() => props.history.push(withSiteId(onboardingRoute('installing'), siteId))}>update</a> your tracker (Asayer) to the latest OpenReplay version  ({window.ENV.TRACKER_VERSION}) to benefit from all new features we recently shipped.
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  ) : ''
+}
+
+export default connect(state => ({
+  site: state.getIn([ 'site', 'instance' ]),
+  sites: state.getIn([ 'site', 'list' ])
+}))(withRouter(TrackerUpdateMessage))

frontend/app/components/shared/TrackerUpdateMessage/index.js

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

frontend/app/types/session/session.js

@@ -75,6 +75,7 @@ export default Record({
   crashes: [],
   socket: null,
   isIOS: false,
+  revId: ''
 }, {
   fromJS:({ 
     startTs=0,