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 && ( - - - - )}
); } 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. + } + + + +
+ ); +} + +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';