Merge pull request #246 from openreplay/dev

change(ui) - live session check

frontend/app/components/Session/LivePlayer.js

@@ -9,7 +9,7 @@ import {
   init as initPlayer,
   clean as cleanPlayer,
 } from 'Player';
-import { Controls as PlayerControls } from 'Player';
+import withPermissions from 'HOCs/withPermissions'
 import Assist from 'Components/Assist'
 
 
@@ -68,7 +68,7 @@ export default withRequest({
 	dataWrapper: data => data,
 	dataName: 'assistCredendials',
   loadingName: 'loadingCredentials',
-})(connect(
+})(withPermissions(['SESSION_REPLAY', 'ASSIST_LIVE'], '', true)(connect(
   state => ({
     session: state.getIn([ 'sessions', 'current' ]),
     showAssist: state.getIn([ 'sessions', 'showChatWindow' ]),
@@ -76,4 +76,4 @@ export default withRequest({
     fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
   }),
   { toggleFullscreen, closeBottomBlock },
-)(WebPlayer));
+)(WebPlayer)));

frontend/app/components/Session/Session.js

@@ -57,7 +57,7 @@ function Session({
 	);
 }
 
-export default withPermissions(['SESSION_REPLAY'], '', '/')(connect((state, props) => {
+export default withPermissions(['SESSION_REPLAY'], '', true)(connect((state, props) => {
 	const { match: { params: { sessionId } } } = props;
   return {
     sessionId,

frontend/app/components/hocs/withPermissions.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
-import { NoPermission } from 'UI';
+import { NoPermission, NoSessionPermission } from 'UI';
 
-export default (requiredPermissions, className, backLink = '') => BaseComponent => 
+export default (requiredPermissions, className, isReplay = false) => BaseComponent => 
 @connect((state, props) => ({
   permissions: state.getIn([ 'user', 'account', 'permissions' ]) || [],
   isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
@@ -10,6 +10,12 @@ class extends React.PureComponent {
   render() {
     const hasPermission = requiredPermissions.every(permission => this.props.permissions.includes(permission));
 
-    return !this.props.isEnterprise || hasPermission ? <BaseComponent {...this.props} /> : <div className={className}><NoPermission backLink={backLink} /></div>
+    return (
+      (!this.props.isEnterprise || hasPermission) ?
+      <BaseComponent {...this.props} /> :
+      <div className={className}>
+        { isReplay ? <NoSessionPermission /> : <NoPermission /> }
+      </div>
+    )
   }
 }

frontend/app/components/ui/NoPermission/NoPermission.tsx

@@ -1,21 +1,15 @@
 import React from 'react';
 import stl from './noPermission.css'
-import { Icon, Button, Link } from 'UI';
+import { Icon } from 'UI';
 
 interface Props {
-  backLink: string
 }
-function NoPermission({ backLink }: Props) {
+function NoPermission(props: Props) {
   return (
     <div className={stl.wrapper}>
       <Icon name="shield-lock" size="50" className="py-16"/>
       <div className={ stl.title }>Not allowed</div>
       You don’t have the necessary permissions to access this feature. Please check with your admin.
-      {backLink && (
-        <Link to={backLink}>
-          <Button primary className="mt-6">GO BACK</Button>
-        </Link>
-      )}
     </div>
   );
 }

frontend/app/components/ui/NoSessionPermission/NoSessionPermission.css

@@ -0,0 +1,59 @@
+.wrapper {
+  margin: auto;
+  width: 100%;
+  text-align: center;
+  min-height: 100px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  color: $gray-medium;
+  font-weight: 300;
+  transition: all 0.2s;
+  padding-top: 40px;
+
+  &.small {
+    & .title {
+      font-size: 20px !important;
+    }
+
+    & .subtext {
+      font-size: 16px;
+    }
+  }
+}
+
+.title {
+  font-size: 32px;
+  margin-bottom: 15px;
+}
+
+.subtext {
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+
+
+.icon {
+  display: block;
+  margin: auto;
+  background-image: svg-load(no-results.svg, fill=#CCC);
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center center;
+  width: 166px;
+  height: 166px;
+  margin-bottom: 20px;
+}
+
+.emptyIcon {
+  display: block;
+  margin: auto;
+  background-image: svg-load(empty-state.svg, fill=#CCC);
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center center;
+  width: 166px;
+  height: 166px;
+  margin-bottom: 20px;
+}

frontend/app/components/ui/NoSessionPermission/NoSessionPermission.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import stl from './NoSessionPermission.css'
+import { Icon, Button, Link } from 'UI';
+import { connect } from 'react-redux';
+
+interface Props {
+  session: any
+}
+function NoSessionPermission({ session }: Props) {
+  return (
+    <div className={stl.wrapper}>
+      <Icon name="shield-lock" size="50" className="py-16"/>
+      <div className={ stl.title }>Not allowed</div>
+      { session.isLive ? 
+        <span>This session is still live, and you don’t have the necessary permissions to access this feature. Please check with your admin.</span> :
+        <span>You don’t have the necessary permissions to access this feature. Please check with your admin.</span>
+      }
+      <Link to="/">
+        <Button primary className="mt-6">GO BACK</Button>
+      </Link>
+    </div>
+  );
+}
+
+export default connect(state => ({
+  session: state.getIn([ 'sessions', 'current' ]),
+}))(NoSessionPermission);

frontend/app/components/ui/NoSessionPermission/index.ts

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

frontend/app/components/ui/index.js

@@ -53,5 +53,6 @@ export { default as TimelinePointer } from './TimelinePointer';
 export { default as CopyButton } from './CopyButton';
 export { default as HighlightCode } from './HighlightCode';
 export { default as NoPermission } from './NoPermission';
+export { default as NoSessionPermission } from './NoSessionPermission';
 
 export { Input, Modal, Form, Message, Card } from 'semantic-ui-react';