+
-
+
{ setActiveTab(''); }}
diff --git a/frontend/app/components/Session_/Player/Controls/Time.js b/frontend/app/components/Session_/Player/Controls/Time.js
index 0d93b7986..b0e95c6f0 100644
--- a/frontend/app/components/Session_/Player/Controls/Time.js
+++ b/frontend/app/components/Session_/Player/Controls/Time.js
@@ -4,7 +4,7 @@ import { connectPlayer } from 'Player';
import styles from './time.module.css';
const Time = ({ time, isCustom, format = 'm:ss', }) => (
-
+
{ Duration.fromMillis(time).toFormat(format) }
)
diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js
index 7943290b1..4e805d95b 100644
--- a/frontend/app/components/Session_/Subheader.js
+++ b/frontend/app/components/Session_/Subheader.js
@@ -48,6 +48,7 @@ function SubHeader(props) {
entity="sessions"
id={ props.sessionId }
showCopyLink={true}
+ time={props.time}
trigger={
Share
@@ -75,6 +75,6 @@ function SubHeader(props) {
)
}
-const SubH = connectPlayer(state => ({ currentLocation: state.location }))(SubHeader)
+const SubH = connectPlayer(state => ({ currentLocation: state.location, time: state.time }))(SubHeader)
export default React.memo(SubH)
diff --git a/frontend/app/components/shared/Bookmark/Bookmark.tsx b/frontend/app/components/shared/Bookmark/Bookmark.tsx
index feb0dcac3..a96e7fb5f 100644
--- a/frontend/app/components/shared/Bookmark/Bookmark.tsx
+++ b/frontend/app/components/shared/Bookmark/Bookmark.tsx
@@ -14,7 +14,7 @@ interface Props {
noMargin?: boolean;
}
function Bookmark(props : Props ) {
- const { sessionId, favorite, isEnterprise } = props;
+ const { sessionId, favorite, isEnterprise, noMargin } = props;
const [isFavorite, setIsFavorite] = useState(favorite);
const ADDED_MESSAGE = isEnterprise ? 'Session added to vault' : 'Session added to your bookmarks';
const REMOVED_MESSAGE = isEnterprise ? 'Session removed from vault' : 'Session removed from your bookmarks';
@@ -43,13 +43,20 @@ function Bookmark(props : Props ) {
hideOnClick={true}
distance={20}
>
-
+ {noMargin ? (
+
+
+ {isEnterprise ? 'Vault' : 'Bookmark'}
+
+ ) : (
+
+ )}
)
}
diff --git a/frontend/app/components/shared/SharePopup/SessionCopyLink/SessionCopyLink.tsx b/frontend/app/components/shared/SharePopup/SessionCopyLink/SessionCopyLink.tsx
index 21445a788..bc8c09830 100644
--- a/frontend/app/components/shared/SharePopup/SessionCopyLink/SessionCopyLink.tsx
+++ b/frontend/app/components/shared/SharePopup/SessionCopyLink/SessionCopyLink.tsx
@@ -26,6 +26,4 @@ function SessionCopyLink({ content = '', time }: Props) {
)
}
-export default connectPlayer(state => ({
- time: state.time,
-}))(SessionCopyLink);
+export default SessionCopyLink
diff --git a/frontend/app/components/shared/SharePopup/SharePopup.js b/frontend/app/components/shared/SharePopup/SharePopup.js
index 2e253f1eb..e72a87056 100644
--- a/frontend/app/components/shared/SharePopup/SharePopup.js
+++ b/frontend/app/components/shared/SharePopup/SharePopup.js
@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
import { toast } from 'react-toastify';
import withRequest from 'HOCs/withRequest';
import { Popup, Dropdown, Icon, Button } from 'UI';
-import { pause } from 'Player';
import styles from './sharePopup.module.css';
import IntegrateSlackButton from '../IntegrateSlackButton/IntegrateSlackButton';
import SessionCopyLink from './SessionCopyLink';
@@ -22,7 +21,7 @@ import { Tooltip } from 'react-tippy';
export default class SharePopup extends React.PureComponent {
state = {
comment: '',
- isOpen: true,
+ isOpen: false,
channelId: this.props.channels.getIn([ 0, 'webhookId' ]),
}
@@ -31,36 +30,37 @@ export default class SharePopup extends React.PureComponent {
.then(this.handleSuccess)
handleOpen = () => {
- this.setState({ isOpen: true });
- pause();
setTimeout(function() {
document.getElementById('message').focus();
}, 100)
}
handleClose = () => {
- this.setState({ isOpen: false, comment: '' });
+ this.setState({ comment: '' });
}
handleSuccess = () => {
toast.success('Sent to Slack.');
- this.handleClose();
}
changeChannel = ({ value }) => this.setState({ channelId: value })
render() {
- const { trigger, loading, channels, showCopyLink = false } = this.props;
- const { comment, isOpen, channelId } = this.state;
+ const { trigger, loading, channels, showCopyLink = false, time } = this.props;
+ const { comment, channelId } = this.state;
const options = channels.map(({ webhookId, name }) => ({ value: webhookId, label: name })).toJS();
return (
Share this session link to Slack
@@ -72,7 +72,7 @@ export default class SharePopup extends React.PureComponent {
{ showCopyLink && (
-
+
)}
>
@@ -112,19 +112,16 @@ export default class SharePopup extends React.PureComponent {
-
+
}
}
- // trigger="click"
- // position="top right"
- // className={ styles.popup }
- // hideOnScroll
+
>
- {trigger}
+ {trigger}
);
}
diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx
index 0d4805b78..7fe28c46b 100644
--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
@@ -13,16 +13,16 @@ interface Props {
const SVG = (props: Props) => {
const { name, size = 14, width = size, height = size, fill = '' } = props;
switch (name) {
- case 'alarm-clock': return
;
+ case 'alarm-clock': return
;
case 'alarm-plus': return
;
case 'all-sessions': return
;
case 'analytics': return
;
- case 'anchor': return
;
+ case 'anchor': return
;
case 'arrow-alt-square-right': return
;
- case 'arrow-clockwise': return
;
+ case 'arrow-clockwise': return
;
case 'arrow-down': return
;
- case 'arrow-square-left': return
;
- case 'arrow-square-right': return
;
+ case 'arrow-square-left': return
;
+ case 'arrow-square-right': return
;
case 'arrow-up': return
;
case 'arrows-angle-extend': return
;
case 'avatar/icn_bear': return
;
@@ -62,12 +62,12 @@ const SVG = (props: Props) => {
case 'avatar/icn_wild1': return
;
case 'avatar/icn_wild_bore': return
;
case 'ban': return
;
- case 'bar-chart-line': return
;
+ case 'bar-chart-line': return
;
case 'bell-plus': return
;
- case 'bell': return
;
- case 'binoculars': return
;
- case 'book': return
;
- case 'browser/browser': return
;
+ case 'bell': return
;
+ case 'binoculars': return
;
+ case 'book': return
;
+ case 'browser/browser': return
;
case 'browser/chrome': return
;
case 'browser/edge': return
;
case 'browser/electron': return
;
@@ -76,159 +76,159 @@ const SVG = (props: Props) => {
case 'browser/ie': return
;
case 'browser/opera': return
;
case 'browser/safari': return
;
- case 'bullhorn': return
;
- case 'business-time': return
;
- case 'calendar-alt': return
;
+ case 'bullhorn': return
;
+ case 'business-time': return
;
+ case 'calendar-alt': return
;
case 'calendar-check': return
;
case 'calendar-day': return
;
case 'calendar': return
;
case 'camera-alt': return
;
- case 'camera-video-off': return
;
- case 'camera-video': return
;
+ case 'camera-video-off': return
;
+ case 'camera-video': return
;
case 'camera': return
;
- case 'caret-down-fill': return
;
- case 'caret-left-fill': return
;
- case 'caret-right-fill': return
;
+ case 'caret-down-fill': return
;
+ case 'caret-left-fill': return
;
+ case 'caret-right-fill': return
;
case 'caret-up-fill': return
;
- case 'chat-dots': return
;
- case 'chat-square-quote': return
;
+ case 'chat-dots': return
;
+ case 'chat-square-quote': return
;
case 'check-circle': return
;
- case 'check': return
;
- case 'chevron-double-left': return
;
- case 'chevron-double-right': return
;
- case 'chevron-down': return
;
- case 'chevron-left': return
;
- case 'chevron-right': return
;
- case 'chevron-up': return
;
+ case 'check': return
;
+ case 'chevron-double-left': return
;
+ case 'chevron-double-right': return
;
+ case 'chevron-down': return
;
+ case 'chevron-left': return
;
+ case 'chevron-right': return
;
+ case 'chevron-up': return
;
case 'circle': return
;
- case 'clipboard-list-check': return
;
+ case 'clipboard-list-check': return
;
case 'clock': return
;
- case 'close': return
;
- case 'cloud-fog2-fill': return
;
- case 'code': return
;
- case 'cog': return
;
+ case 'close': return
;
+ case 'cloud-fog2-fill': return
;
+ case 'code': return
;
+ case 'cog': return
;
case 'cogs': return
;
- case 'collection': return
;
- case 'columns-gap': return
;
- case 'console/error': return
;
+ case 'collection': return
;
+ case 'columns-gap': return
;
+ case 'console/error': return
;
case 'console/exception': return
;
- case 'console/info': return
;
+ case 'console/info': return
;
case 'console/warning': return
;
- case 'console': return
;
- case 'controller': return
;
+ case 'console': return
;
+ case 'controller': return
;
case 'cookies': return
;
case 'copy': return
;
- case 'credit-card-front': return
;
- case 'cubes': return
;
+ case 'credit-card-front': return
;
+ case 'cubes': return
;
case 'dashboard-icn': return
;
- case 'desktop': return
;
+ case 'desktop': return
;
case 'device': return
;
- case 'diagram-3': return
;
+ case 'diagram-3': return
;
case 'dizzy': return
;
case 'doublecheck': return
;
- case 'download': return
;
+ case 'download': return
;
case 'drag': return
;
- case 'edit': return
;
- case 'ellipsis-v': return
;
+ case 'edit': return
;
+ case 'ellipsis-v': return
;
case 'enter': return
;
case 'envelope': return
;
- case 'event/click': return
;
- case 'event/clickrage': return
;
+ case 'event/click': return
;
+ case 'event/clickrage': return
;
case 'event/code': return
;
case 'event/i-cursor': return
;
- case 'event/input': return
;
- case 'event/link': return
;
- case 'event/location': return
;
+ case 'event/input': return
;
+ case 'event/link': return
;
+ case 'event/location': return
;
case 'event/resize': return
;
- case 'event/view': return
;
- case 'exclamation-circle': return
;
- case 'expand-wide': return
;
- case 'explosion': return
;
- case 'external-link-alt': return
;
+ case 'event/view': return
;
+ case 'exclamation-circle': return
;
+ case 'expand-wide': return
;
+ case 'explosion': return
;
+ case 'external-link-alt': return
;
case 'eye-slash': return
;
case 'eye': return
;
- case 'fetch': return
;
- case 'file-code': return
;
- case 'file-medical-alt': return
;
+ case 'fetch': return
;
+ case 'file-code': return
;
+ case 'file-medical-alt': return
;
case 'file': return
;
- case 'filter': return
;
- case 'filters/arrow-return-right': return
;
- case 'filters/browser': return
;
- case 'filters/click': return
;
- case 'filters/clickrage': return
;
+ case 'filter': return
;
+ case 'filters/arrow-return-right': return
;
+ case 'filters/browser': return
;
+ case 'filters/click': return
;
+ case 'filters/clickrage': return
;
case 'filters/code': return
;
case 'filters/console': return
;
- case 'filters/country': return
;
+ case 'filters/country': return
;
case 'filters/cpu-load': return
;
case 'filters/custom': return
;
case 'filters/device': return
;
case 'filters/dom-complete': return
;
case 'filters/duration': return
;
- case 'filters/error': return
;
+ case 'filters/error': return
;
case 'filters/fetch-failed': return
;
- case 'filters/fetch': return
;
+ case 'filters/fetch': return
;
case 'filters/file-code': return
;
case 'filters/graphql': return
;
case 'filters/i-cursor': return
;
- case 'filters/input': return
;
+ case 'filters/input': return
;
case 'filters/lcpt': return
;
- case 'filters/link': return
;
- case 'filters/location': return
;
+ case 'filters/link': return
;
+ case 'filters/location': return
;
case 'filters/memory-load': return
;
case 'filters/metadata': return
;
case 'filters/os': return
;
case 'filters/perfromance-network-request': return
;
case 'filters/platform': return
;
- case 'filters/referrer': return
;
+ case 'filters/referrer': return
;
case 'filters/resize': return
;
case 'filters/rev-id': return
;
- case 'filters/state-action': return
;
+ case 'filters/state-action': return
;
case 'filters/ttfb': return
;
- case 'filters/user-alt': return
;
- case 'filters/userid': return
;
- case 'filters/view': return
;
+ case 'filters/user-alt': return
;
+ case 'filters/userid': return
;
+ case 'filters/view': return
;
case 'flag-na': return
;
- case 'fullscreen': return
;
- case 'funnel/cpu-fill': return
;
- case 'funnel/cpu': return
;
+ case 'fullscreen': return
;
+ case 'funnel/cpu-fill': return
;
+ case 'funnel/cpu': return
;
case 'funnel/dizzy': return
;
- case 'funnel/emoji-angry-fill': return
;
- case 'funnel/emoji-angry': return
;
- case 'funnel/emoji-dizzy-fill': return
;
- case 'funnel/exclamation-circle-fill': return
;
- case 'funnel/exclamation-circle': return
;
- case 'funnel/file-earmark-break-fill': return
;
- case 'funnel/file-earmark-break': return
;
- case 'funnel/file-earmark-minus-fill': return
;
- case 'funnel/file-earmark-minus': return
;
- case 'funnel/file-medical-alt': return
;
- case 'funnel/file-x': return
;
- case 'funnel/hdd-fill': return
;
- case 'funnel/hourglass-top': return
;
- case 'funnel/image-fill': return
;
- case 'funnel/image': return
;
- case 'funnel/microchip': return
;
- case 'funnel/mouse': return
;
- case 'funnel/patch-exclamation-fill': return
;
- case 'funnel/sd-card': return
;
- case 'funnel': return
;
+ case 'funnel/emoji-angry-fill': return
;
+ case 'funnel/emoji-angry': return
;
+ case 'funnel/emoji-dizzy-fill': return
;
+ case 'funnel/exclamation-circle-fill': return
;
+ case 'funnel/exclamation-circle': return
;
+ case 'funnel/file-earmark-break-fill': return
;
+ case 'funnel/file-earmark-break': return
;
+ case 'funnel/file-earmark-minus-fill': return
;
+ case 'funnel/file-earmark-minus': return
;
+ case 'funnel/file-medical-alt': return
;
+ case 'funnel/file-x': return
;
+ case 'funnel/hdd-fill': return
;
+ case 'funnel/hourglass-top': return
;
+ case 'funnel/image-fill': return
;
+ case 'funnel/image': return
;
+ case 'funnel/microchip': return
;
+ case 'funnel/mouse': return
;
+ case 'funnel/patch-exclamation-fill': return
;
+ case 'funnel/sd-card': return
;
+ case 'funnel': return
;
case 'geo-alt-fill-custom': return
;
- case 'github': return
;
- case 'graph-up-arrow': return
;
- case 'grid-3x3': return
;
+ case 'github': return
;
+ case 'graph-up-arrow': return
;
+ case 'grid-3x3': return
;
case 'grip-horizontal': return
;
- case 'hash': return
;
- case 'hdd-stack': return
;
- case 'headset': return
;
+ case 'hash': return
;
+ case 'hdd-stack': return
;
+ case 'headset': return
;
case 'heart-rate': return
;
case 'high-engagement': return
;
case 'history': return
;
case 'hourglass-start': return
;
- case 'id-card': return
;
- case 'image': return
;
- case 'info-circle': return
;
- case 'info-square': return
;
- case 'info': return
;
+ case 'id-card': return
;
+ case 'image': return
;
+ case 'info-circle': return
;
+ case 'info-square': return
;
+ case 'info': return
;
case 'inspect': return
;
case 'integrations/assist': return
;
case 'integrations/bugsnag-text': return
;
@@ -254,28 +254,28 @@ const SVG = (props: Props) => {
case 'integrations/segment': return
;
case 'integrations/sentry-text': return
;
case 'integrations/sentry': return
;
- case 'integrations/slack-bw': return
;
+ case 'integrations/slack-bw': return
;
case 'integrations/slack': return
;
case 'integrations/stackdriver': return
;
case 'integrations/sumologic-text': return
;
case 'integrations/sumologic': return
;
case 'integrations/vuejs': return
;
- case 'journal-code': return
;
+ case 'journal-code': return
;
case 'layer-group': return
;
- case 'lightbulb-on': return
;
+ case 'lightbulb-on': return
;
case 'lightbulb': return
;
- case 'link-45deg': return
;
+ case 'link-45deg': return
;
case 'list-alt': return
;
- case 'list-ul': return
;
+ case 'list-ul': return
;
case 'lock-alt': return
;
- case 'map-marker-alt': return
;
+ case 'map-marker-alt': return
;
case 'memory': return
;
- case 'mic-mute': return
;
- case 'mic': return
;
+ case 'mic-mute': return
;
+ case 'mic': return
;
case 'minus': return
;
- case 'mobile': return
;
+ case 'mobile': return
;
case 'mouse-alt': return
;
- case 'next1': return
;
+ case 'next1': return
;
case 'no-metrics-chart': return
;
case 'os/android': return
;
case 'os/chrome_os': return
;
@@ -288,81 +288,81 @@ const SVG = (props: Props) => {
case 'os/windows': return
;
case 'os': return
;
case 'pause-fill': return
;
- case 'pause': return
;
+ case 'pause': return
;
case 'pdf-download': return
;
case 'pencil-stop': return
;
- case 'pencil': return
;
- case 'percent': return
;
- case 'person-fill': return
;
- case 'person': return
;
- case 'pie-chart-fill': return
;
- case 'pin-fill': return
;
+ case 'pencil': return
;
+ case 'percent': return
;
+ case 'person-fill': return
;
+ case 'person': return
;
+ case 'pie-chart-fill': return
;
+ case 'pin-fill': return
;
case 'play-circle-light': return
;
case 'play-circle': return
;
case 'play-fill-new': return
;
case 'play-fill': return
;
case 'play-hover': return
;
- case 'play': return
;
- case 'plus-circle': return
;
+ case 'play': return
;
+ case 'plus-circle': return
;
case 'plus': return
;
- case 'prev1': return
;
- case 'puzzle-piece': return
;
- case 'question-circle': return
;
+ case 'prev1': return
;
+ case 'puzzle-piece': return
;
+ case 'question-circle': return
;
case 'quote-left': return
;
case 'quote-right': return
;
case 'redo-back': return
;
case 'redo': return
;
case 'remote-control': return
;
case 'replay-10': return
;
- case 'safe-fill': return
;
- case 'safe': return
;
+ case 'safe-fill': return
;
+ case 'safe': return
;
case 'sandglass': return
;
- case 'search': return
;
+ case 'search': return
;
case 'search_notification': return
;
case 'server': return
;
- case 'share-alt': return
;
- case 'shield-lock': return
;
+ case 'share-alt': return
;
+ case 'shield-lock': return
;
case 'signup': return
;
- case 'skip-forward-fill': return
;
- case 'skip-forward': return
;
- case 'slash-circle': return
;
- case 'sliders': return
;
+ case 'skip-forward-fill': return
;
+ case 'skip-forward': return
;
+ case 'slash-circle': return
;
+ case 'sliders': return
;
case 'social/slack': return
;
case 'social/trello': return
;
case 'spinner': return
;
case 'star-solid': return
;
- case 'star': return
;
+ case 'star': return
;
case 'step-forward': return
;
- case 'stopwatch': return
;
- case 'store': return
;
- case 'sync-alt': return
;
- case 'table': return
;
- case 'tablet-android': return
;
- case 'tachometer-slow': return
;
- case 'tachometer-slowest': return
;
- case 'tags': return
;
+ case 'stopwatch': return
;
+ case 'store': return
;
+ case 'sync-alt': return
;
+ case 'table': return
;
+ case 'tablet-android': return
;
+ case 'tachometer-slow': return
;
+ case 'tachometer-slowest': return
;
+ case 'tags': return
;
case 'team-funnel': return
;
- case 'telephone-fill': return
;
- case 'telephone': return
;
- case 'text-paragraph': return
;
- case 'tools': return
;
- case 'trash': return
;
- case 'turtle': return
;
+ case 'telephone-fill': return
;
+ case 'telephone': return
;
+ case 'text-paragraph': return
;
+ case 'tools': return
;
+ case 'trash': return
;
+ case 'turtle': return
;
case 'user-alt': return
;
- case 'user-circle': return
;
+ case 'user-circle': return
;
case 'user-friends': return
;
- case 'users': return
;
+ case 'users': return
;
case 'vendors/graphql': return
;
case 'vendors/mobx': return
;
case 'vendors/ngrx': return
;
case 'vendors/redux': return
;
case 'vendors/vuex': return
;
- case 'wifi': return
;
+ case 'wifi': return
;
case 'window-alt': return
;
- case 'window-restore': return
;
- case 'window-x': return
;
+ case 'window-restore': return
;
+ case 'window-x': return
;
case 'window': return
;
- case 'zoom-in': return
;
+ case 'zoom-in': return
;
default:
return
;
// if (window.ENV.PRODUCTION) return null;
diff --git a/frontend/app/init/sentry.js b/frontend/app/init/sentry.js
index 0742e9c84..fe796d4d9 100644
--- a/frontend/app/init/sentry.js
+++ b/frontend/app/init/sentry.js
@@ -1,5 +1,5 @@
import * as Sentry from '@sentry/browser';
-if (window.env.SENTRY_ENABLED === 'true') {
+if (window.env && window.env.SENTRY_ENABLED === 'true') {
Sentry.init({ dsn: window.env.SENTRY_URL });
-}
\ No newline at end of file
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index b79753ca1..c6cb61fa5 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -143,7 +143,6 @@ module.exports = {
}
},
},
- content: [],
variants: {
visibility: ['responsive', 'hover', 'focus', 'group-hover']
},