fix(ui): remove useless requests before jwt
This commit is contained in:
nick-delirium
parent
c0dbd4a53f
commit
db4495c3d8
7 changed files with 17 additions and 405 deletions
|
|
@ -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 (
|
||||
<OutsideClickDetectingDiv className={ stl.wrapper } onClickOutside={this.onClickOutside}>
|
||||
<button className={ stl.button } onClick={ toggleModal }>
|
||||
<div className={ stl.progressWrapper }>
|
||||
<CircularProgressbar value={ boardingCompletion } styles={ _styles } strokeWidth={ 12 }/>
|
||||
</div>
|
||||
</button>
|
||||
{ display &&
|
||||
<div className={ stl.modal } >
|
||||
<div className={ stl.tooltipArrow } />
|
||||
<div className={ stl.header }>
|
||||
<div style={ { width: '50px', marginRight: '10px' }}>
|
||||
<CircularProgressbar
|
||||
strokeWidth={ 14 }
|
||||
value={ boardingCompletion }
|
||||
styles={ _styles }
|
||||
/>
|
||||
</div>
|
||||
<div className={ stl.info }>
|
||||
<div>{ this.getHeaderText(boardingCompletion) }</div>
|
||||
<div>
|
||||
{
|
||||
boardingCompletion > 0 ?
|
||||
`You have discovered ${ boardingCompletion }% of OpenReplay features!` :
|
||||
'Let us help you configure OpenReplay.'
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={ stl.content }>
|
||||
<h4>{ 'Discover more of OpenReplay' }</h4>
|
||||
<div className={ stl.list }>
|
||||
{ boarding.map(task => (
|
||||
<FeatureItem
|
||||
key={ task.task }
|
||||
label={ task.task }
|
||||
completed={ task.done }
|
||||
onClick={task.URL && (() => this.onClick(task)) }
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</OutsideClickDetectingDiv>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Discover;
|
||||
|
|
@ -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 (
|
||||
<div
|
||||
className={cn('w-full flex justify-between')}
|
||||
>
|
||||
{!isPreferences && <DefaultMenuView siteId={siteId} />}
|
||||
{isPreferences && <PreferencesView />}
|
||||
<div className={styles.right}>
|
||||
<GettingStartedProgress />
|
||||
|
||||
<Notifications />
|
||||
<div className={cn(styles.userDetails, 'group cursor-pointer')}>
|
||||
<Tooltip title={`Preferences`} disabled>
|
||||
<div className="flex items-center">
|
||||
<NavLink to={CLIENT_PATH}>
|
||||
<Icon name="gear" size="20" color="gray-dark" />
|
||||
</NavLink>
|
||||
|
||||
<SettingsMenu className="invisible group-hover:visible" account={account} />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<HealthStatus />
|
||||
|
||||
<div className={cn(styles.userDetails, 'group cursor-pointer')}>
|
||||
<div className="flex items-center">
|
||||
<div className="w-10 h-10 bg-tealx rounded-full flex items-center justify-center color-white">
|
||||
{getInitials(name)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UserMenu className="invisible group-hover:visible" />
|
||||
</div>
|
||||
|
||||
{<ErrorGenPanel />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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)
|
||||
);
|
||||
|
|
@ -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 (
|
||||
<OutsideClickDetectingDiv className={ stl.wrapper } onClickOutside={this.onClickOutside}>
|
||||
<button className={ stl.button } onClick={ toggleModal }>
|
||||
<div className={ stl.progressWrapper }>
|
||||
<CircularProgressbar value={ boardingCompletion } styles={ _styles } strokeWidth={ 12 }/>
|
||||
</div>
|
||||
</button>
|
||||
{ display &&
|
||||
<div className={ stl.modal } >
|
||||
<div className={ stl.tooltipArrow } />
|
||||
<div className={ stl.header }>
|
||||
Make the best out of OpenReplay by completing your project setup:
|
||||
</div>
|
||||
|
||||
<div className={ stl.content }>
|
||||
<div className={ stl.list }>
|
||||
{ boarding.map(task => (
|
||||
<FeatureItem
|
||||
key={ task.task }
|
||||
label={ task.task }
|
||||
completed={ task.done }
|
||||
onClick={() => this.onClick(task) }
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</OutsideClickDetectingDiv>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default OnboardingExplore;
|
||||
|
|
@ -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<null> = () => {
|
||||
const GettingStartedProgress = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
|
||||
const { showModal } = useModal();
|
||||
|
||||
const {
|
||||
|
|
@ -13,8 +14,10 @@ const GettingStartedProgress: React.FC<null> = () => {
|
|||
} = useStore();
|
||||
|
||||
useEffect(() => {
|
||||
gettingStarted.fetchData();
|
||||
}, []);
|
||||
if (isLoggedIn) {
|
||||
gettingStarted.fetchData();
|
||||
}
|
||||
}, [isLoggedIn]);
|
||||
|
||||
const clickHandler = () => {
|
||||
showModal(<GettingStartedModal list={gettingStarted.steps} />, { right: true, width: 450 });
|
||||
|
|
@ -37,4 +40,5 @@ const GettingStartedProgress: React.FC<null> = () => {
|
|||
);
|
||||
};
|
||||
|
||||
export default observer(GettingStartedProgress);
|
||||
export default connect((state: any) => ({ isLoggedIn: Boolean(state.getIn(['user', 'jwt'])), }))(observer(GettingStartedProgress));
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -39,10 +39,3 @@ export function setShowAlerts(state) {
|
|||
state,
|
||||
}
|
||||
}
|
||||
|
||||
export function getOnboard() {
|
||||
return {
|
||||
types: ON_BOARD.toArray(),
|
||||
call: client => client.get('/boarding'),
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,17 +20,17 @@ function TopRight(props: Props) {
|
|||
const { account } = props;
|
||||
// @ts-ignore
|
||||
return (
|
||||
<Space className='flex items-center'>
|
||||
<Space className="flex items-center">
|
||||
<ProjectDropdown />
|
||||
<GettingStartedProgress />
|
||||
|
||||
<Notifications />
|
||||
|
||||
<HealthStatus />
|
||||
{account.name ? <HealthStatus /> : null}
|
||||
|
||||
<Popover content={<UserMenu />} placement={'topRight'}>
|
||||
<div className='flex items-center cursor-pointer'>
|
||||
<div className='w-10 h-10 bg-tealx rounded-full flex items-center justify-center color-white'>
|
||||
<div className="flex items-center cursor-pointer">
|
||||
<div className="w-10 h-10 bg-tealx rounded-full flex items-center justify-center color-white">
|
||||
{getInitials(account.name)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue