diff --git a/frontend/app/components/Header/Discover/Discover.js b/frontend/app/components/Header/Discover/Discover.js
deleted file mode 100644
index 37e00d05b..000000000
--- a/frontend/app/components/Header/Discover/Discover.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import withToggle from 'Components/hocs/withToggle';
-import stl from './discover.module.css';
-import FeatureItem from './FeatureItem';
-import { getOnboard } from 'Duck/dashboard';
-import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
-
-import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
-import { withRouter } from 'react-router';
-
-const styles = {
- // Rotation of path and trail, in number of turns (0-1)
- rotation: 0,
- // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
- strokeLinecap: 'butt',
-
- // Text size
- textSize: '16px',
-
- // How long animation takes to go from one percentage to another, in seconds
- pathTransitionDuration: 1,
-
- // Can specify path transition in more detail, or remove it entirely
- // pathTransition: 'none',
-
- // Colors
- pathColor: `#394EFF`,
- // textColor: '#f88',
- // trailColor: '#d6d6d6',
- // backgroundColor: '#3e98c7',
-};
-
-@connect(state => ({
- boarding: state.getIn([ 'dashboard', 'boarding' ]),
- boardingCompletion: state.getIn([ 'dashboard', 'boardingCompletion' ]),
-}), {
- getOnboard,
-})
-@withToggle('display', 'toggleModal')
-@withRouter
-class Discover extends React.PureComponent {
- componentWillMount() {
- this.props.getOnboard();
- }
-
- componentDidMount() {
- setTimeout(function() {
- const { onComplete, boardingCompletion } = this.props;
- if (typeof onComplete === 'function' && boardingCompletion >= 50) {
- onComplete()
- }
- }.bind(this), 1000 * 60 * 2);
- }
-
- onClickOutside = () => {
- if (this.props.display)
- this.props.toggleModal();
- }
-
- getHeaderText = (percentage) => {
- if (percentage === 0 ) {
- return 'Welcome!';
- } else if (percentage < 100) {
- return 'Few more steps and you’re done!';
- }
- return 'Good Job!';
- }
-
- onClick = task => {
- if (task.URL) {
- if (task.URL.includes(window.env.ORIGIN || window.location.origin)) {
- const { history } = this.props;
- var path = new URL(task.URL).pathname
- history.push(path)
- } else {
- window.open(task.URL, "_blank")
- }
- this.props.toggleModal();
- }
- }
-
- render() {
- const { display, toggleModal, boarding, boardingCompletion } = this.props;
-
- styles.pathColor = '#394EFF';
- if (boardingCompletion < 50)
- styles.pathColor = '#FF0000';
- else if (boardingCompletion < 75)
- styles.pathColor = '#FFA500';
- const _styles = buildStyles(styles);
-
- return (
-
-
- { display &&
-
-
-
-
-
-
-
-
{ this.getHeaderText(boardingCompletion) }
-
- {
- boardingCompletion > 0 ?
- `You have discovered ${ boardingCompletion }% of OpenReplay features!` :
- 'Let us help you configure OpenReplay.'
- }
-
-
-
-
-
-
{ 'Discover more of OpenReplay' }
-
- { boarding.map(task => (
- this.onClick(task)) }
- />
- ))}
-
-
-
- }
-
- );
- }
-}
-
-export default Discover;
diff --git a/frontend/app/components/Header/Header.js b/frontend/app/components/Header/Header.js
deleted file mode 100644
index 55e2b8ac3..000000000
--- a/frontend/app/components/Header/Header.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
-import { NavLink, withRouter } from 'react-router-dom';
-import cn from 'classnames';
-import { client, CLIENT_DEFAULT_TAB } from 'App/routes';
-import { logout } from 'Duck/user';
-import { Icon, Tooltip } from 'UI';
-import styles from './header.module.css';
-import OnboardingExplore from './OnboardingExplore/OnboardingExplore';
-import Notifications from '../Alerts/Notifications';
-import { init as initSite } from 'Duck/site';
-import { getInitials } from 'App/utils';
-
-import ErrorGenPanel from 'App/dev/components/ErrorGenPanel';
-import { fetchListActive as fetchMetadata } from 'Duck/customField';
-import { useStore } from 'App/mstore';
-import { useObserver } from 'mobx-react-lite';
-import UserMenu from './UserMenu';
-import SettingsMenu from './SettingsMenu';
-import DefaultMenuView from './DefaultMenuView';
-import PreferencesView from './PreferencesView';
-import HealthStatus from './HealthStatus'
-import GettingStartedProgress from 'Shared/GettingStarted/GettingStartedProgress';
-import { Button } from 'antd';
-
-const CLIENT_PATH = client(CLIENT_DEFAULT_TAB);
-
-const Header = (props) => {
- const { sites, account, siteId, boardingCompletion = 100, showAlerts = false } = props;
-
- const name = account.get('name');
- const [hideDiscover, setHideDiscover] = useState(false);
- const { userStore, notificationStore } = useStore();
- const initialDataFetched = useObserver(() => userStore.initialDataFetched);
- let activeSite = null;
- const isPreferences = window.location.pathname.includes('/client/');
-
- useEffect(() => {
- if (!account.id || initialDataFetched) return;
-
- setTimeout(() => {
- Promise.all([
- userStore.fetchLimits(),
- notificationStore.fetchNotificationsCount(),
- props.fetchMetadata(),
- ]).then(() => {
- userStore.updateKey('initialDataFetched', true);
- });
- }, 0);
- }, [account]);
-
- useEffect(() => {
- activeSite = sites.find((s) => s.id == siteId);
- props.initSite(activeSite);
- }, [siteId]);
-
- return (
-
- {!isPreferences &&
}
- {isPreferences &&
}
-
-
-
-
-
-
-
-
-
-
-
- {getInitials(name)}
-
-
-
-
-
-
- {
}
-
-
- );
-};
-
-export default withRouter(
- connect(
- (state) => ({
- account: state.getIn(['user', 'account']),
- siteId: state.getIn(['site', 'siteId']),
- sites: state.getIn(['site', 'list']),
- boardingCompletion: state.getIn(['dashboard', 'boardingCompletion']),
- }),
- { onLogoutClick: logout, initSite, fetchMetadata }
- )(Header)
-);
diff --git a/frontend/app/components/Header/OnboardingExplore/OnboardingExplore.js b/frontend/app/components/Header/OnboardingExplore/OnboardingExplore.js
deleted file mode 100644
index 927178c58..000000000
--- a/frontend/app/components/Header/OnboardingExplore/OnboardingExplore.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import withToggle from 'Components/hocs/withToggle';
-import stl from './onboardingExplore.module.css';
-import FeatureItem from './FeatureItem';
-import { getOnboard } from 'Duck/dashboard';
-import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
-
-import { OB_TABS, onboarding as onboardingRoute } from 'App/routes'
-import * as routes from '../../../routes'
-
-const withSiteId = routes.withSiteId;
-
-import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
-import { withRouter } from 'react-router';
-
-const styles = {
- // Rotation of path and trail, in number of turns (0-1)
- rotation: 0,
- // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
- strokeLinecap: 'butt',
-
- // Text size
- textSize: '16px',
-
- // How long animation takes to go from one percentage to another, in seconds
- pathTransitionDuration: 1,
-
- // Can specify path transition in more detail, or remove it entirely
- // pathTransition: 'none',
-
- // Colors
- pathColor: `#394EFF`,
- // textColor: '#f88',
- trailColor: '#d6d6d6',
- // backgroundColor: '#3e98c7',
-};
-
-@connect(state => ({
- siteId: state.getIn([ 'site', 'siteId' ]),
- boarding: state.getIn([ 'dashboard', 'boarding' ]),
- boardingCompletion: state.getIn([ 'dashboard', 'boardingCompletion' ]),
-}), {
- getOnboard,
-})
-@withToggle('display', 'toggleModal')
-@withRouter
-class OnboardingExplore extends React.PureComponent {
- UNSAFE_componentWillMount() {
- if (this.props.boarding.size === 0) {
- this.props.getOnboard();
- }
- }
-
- componentDidMount() {
- setTimeout(function() {
- const { onComplete, boardingCompletion } = this.props;
- if (typeof onComplete === 'function' && boardingCompletion >= 50) {
- onComplete()
- }
- }.bind(this), 1000 * 60 * 2);
- }
-
- onClickOutside = () => {
- if (this.props.display)
- this.props.toggleModal();
- }
-
- getHeaderText = (percentage) => {
- if (percentage === 0 ) {
- return 'Welcome!';
- } else if (percentage < 100) {
- return 'Few more steps and you’re done!';
- }
- return 'Good Job!';
- }
-
- getOnboardingTab = (task) => {
- if (task === 'Install OpenReplay')
- return OB_TABS.INSTALLING;
- if (task === 'Identify Users')
- return OB_TABS.IDENTIFY_USERS;
- if (task === 'Invite Team Members')
- return OB_TABS.MANAGE_USERS;
- if (task === 'Integrations')
- return OB_TABS.INTEGRATIONS;
- }
- onClick = task => {
- const { siteId, history } = this.props;
- const tab = this.getOnboardingTab(task.task)
- history.push(withSiteId(onboardingRoute(tab), siteId));
- }
-
- render() {
- const { display, toggleModal, boarding, boardingCompletion } = this.props;
-
- styles.pathColor = '#394EFF';
- if (boardingCompletion < 50)
- styles.pathColor = '#FF0000';
- else if (boardingCompletion < 75)
- styles.pathColor = '#FFA500';
- const _styles = buildStyles(styles);
-
- return (
-
-
- { display &&
-
-
-
- Make the best out of OpenReplay by completing your project setup:
-
-
-
-
- { boarding.map(task => (
- this.onClick(task) }
- />
- ))}
-
-
-
- }
-
- );
- }
-}
-
-export default OnboardingExplore;
diff --git a/frontend/app/components/shared/GettingStarted/GettingStartedProgress.tsx b/frontend/app/components/shared/GettingStarted/GettingStartedProgress.tsx
index 951a39e8d..a1ea9f6c3 100644
--- a/frontend/app/components/shared/GettingStarted/GettingStartedProgress.tsx
+++ b/frontend/app/components/shared/GettingStarted/GettingStartedProgress.tsx
@@ -4,8 +4,9 @@ import { useModal } from 'App/components/Modal';
import GettingStartedModal from './GettingStartedModal';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
+import { connect } from "react-redux";
-const GettingStartedProgress: React.FC = () => {
+const GettingStartedProgress = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
const { showModal } = useModal();
const {
@@ -13,8 +14,10 @@ const GettingStartedProgress: React.FC = () => {
} = useStore();
useEffect(() => {
- gettingStarted.fetchData();
- }, []);
+ if (isLoggedIn) {
+ gettingStarted.fetchData();
+ }
+ }, [isLoggedIn]);
const clickHandler = () => {
showModal(, { right: true, width: 450 });
@@ -37,4 +40,5 @@ const GettingStartedProgress: React.FC = () => {
);
};
-export default observer(GettingStartedProgress);
+export default connect((state: any) => ({ isLoggedIn: Boolean(state.getIn(['user', 'jwt'])), }))(observer(GettingStartedProgress));
+
diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx
index 2faf6da8d..eb3db6b13 100644
--- a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx
@@ -75,6 +75,7 @@ function SessionList(props: Props) {
activeTab,
isEnterprise = false,
sites,
+ isLoggedIn,
siteId
} = props;
const _filterKeys = filters.map((i: any) => i.key);
@@ -118,7 +119,7 @@ function SessionList(props: Props) {
useEffect(() => {
- if (!hasNoRecordings || !activeSite) {
+ if (!hasNoRecordings || !activeSite || !isLoggedIn) {
return;
}
@@ -129,7 +130,7 @@ function SessionList(props: Props) {
}, STATUS_FREQUENCY);
return () => clearInterval(sessionStatusTimeOut);
- }, [hasNoRecordings, activeSite]);
+ }, [hasNoRecordings, activeSite, isLoggedIn]);
useEffect(() => {
@@ -292,7 +293,8 @@ export default connect(
pageSize: state.getIn(['search', 'pageSize']),
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
siteId: state.getIn(['site', 'siteId']),
- sites: state.getIn(['site', 'list'])
+ sites: state.getIn(['site', 'list']),
+ isLoggedIn: Boolean(state.getIn(['user', 'jwt'])),
}),
{
updateCurrentPage,
diff --git a/frontend/app/duck/dashboard.js b/frontend/app/duck/dashboard.js
index 9e40505c6..740766309 100644
--- a/frontend/app/duck/dashboard.js
+++ b/frontend/app/duck/dashboard.js
@@ -39,10 +39,3 @@ export function setShowAlerts(state) {
state,
}
}
-
-export function getOnboard() {
- return {
- types: ON_BOARD.toArray(),
- call: client => client.get('/boarding'),
- }
-}
diff --git a/frontend/app/layout/TopRight.tsx b/frontend/app/layout/TopRight.tsx
index 1e40fdb2d..2623b564f 100644
--- a/frontend/app/layout/TopRight.tsx
+++ b/frontend/app/layout/TopRight.tsx
@@ -20,17 +20,17 @@ function TopRight(props: Props) {
const { account } = props;
// @ts-ignore
return (
-
+
-
+ {account.name ? : null}
} placement={'topRight'}>
-
-
+
+
{getInitials(account.name)}