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)}