diff --git a/frontend/app/components/Session/LivePlayer.js b/frontend/app/components/Session/LivePlayer.js
index 5664a6abd..cbc3410cd 100644
--- a/frontend/app/components/Session/LivePlayer.js
+++ b/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));
\ No newline at end of file
+)(WebPlayer)));
\ No newline at end of file
diff --git a/frontend/app/components/Session/Session.js b/frontend/app/components/Session/Session.js
index f43036f39..6b90ff4c1 100644
--- a/frontend/app/components/Session/Session.js
+++ b/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,
diff --git a/frontend/app/components/hocs/withPermissions.js b/frontend/app/components/hocs/withPermissions.js
index 79fbcfe10..e2f4f0f39 100644
--- a/frontend/app/components/hocs/withPermissions.js
+++ b/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 ? :
+ return (
+ (!this.props.isEnterprise || hasPermission) ?
+ :
+
+ { isReplay ? : }
+
+ )
}
}
\ No newline at end of file
diff --git a/frontend/app/components/ui/NoPermission/NoPermission.tsx b/frontend/app/components/ui/NoPermission/NoPermission.tsx
index f1cb37b86..3ac93f8f0 100644
--- a/frontend/app/components/ui/NoPermission/NoPermission.tsx
+++ b/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 (
Not allowed
You don’t have the necessary permissions to access this feature. Please check with your admin.
- {backLink && (
-
-
GO BACK
-
- )}
);
}
diff --git a/frontend/app/components/ui/NoSessionPermission/NoSessionPermission.css b/frontend/app/components/ui/NoSessionPermission/NoSessionPermission.css
new file mode 100644
index 000000000..f4296757c
--- /dev/null
+++ b/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;
+}
diff --git a/frontend/app/components/ui/NoSessionPermission/NoSessionPermission.tsx b/frontend/app/components/ui/NoSessionPermission/NoSessionPermission.tsx
new file mode 100644
index 000000000..862028ff2
--- /dev/null
+++ b/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 (
+
+
+
Not allowed
+ { session.isLive ?
+
This session is still live, and you don’t have the necessary permissions to access this feature. Please check with your admin. :
+
You don’t have the necessary permissions to access this feature. Please check with your admin.
+ }
+
+
GO BACK
+
+
+ );
+}
+
+export default connect(state => ({
+ session: state.getIn([ 'sessions', 'current' ]),
+}))(NoSessionPermission);
\ No newline at end of file
diff --git a/frontend/app/components/ui/NoSessionPermission/index.ts b/frontend/app/components/ui/NoSessionPermission/index.ts
new file mode 100644
index 000000000..fdba919ce
--- /dev/null
+++ b/frontend/app/components/ui/NoSessionPermission/index.ts
@@ -0,0 +1 @@
+export { default } from './NoSessionPermission';
\ No newline at end of file
diff --git a/frontend/app/components/ui/index.js b/frontend/app/components/ui/index.js
index 669be843a..016a818de 100644
--- a/frontend/app/components/ui/index.js
+++ b/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';