change(ui) - redirect to the landing url on SSO login
This commit is contained in:
Shekar Siri
parent
f3052d1ad0
commit
e9482d1629
2 changed files with 169 additions and 171 deletions
|
|
@ -6,6 +6,23 @@ import { Notification } from 'UI';
|
|||
import { Loader } from 'UI';
|
||||
import { fetchUserInfo } from 'Duck/user';
|
||||
import withSiteIdUpdater from 'HOCs/withSiteIdUpdater';
|
||||
import WidgetViewPure from 'Components/Dashboard/components/WidgetView';
|
||||
import Header from 'Components/Header/Header';
|
||||
import { fetchList as fetchMetadata } from 'Duck/customField';
|
||||
import { fetchList as fetchSiteList } from 'Duck/site';
|
||||
import { fetchList as fetchAnnouncements } from 'Duck/announcements';
|
||||
import { fetchList as fetchAlerts } from 'Duck/alerts';
|
||||
import { withStore } from 'App/mstore';
|
||||
|
||||
import APIClient from './api_client';
|
||||
import * as routes from './routes';
|
||||
import { OB_DEFAULT_TAB } from 'App/routes';
|
||||
import Signup from './components/Signup/Signup';
|
||||
import { fetchTenants } from 'Duck/user';
|
||||
import { setSessionPath } from 'Duck/sessions';
|
||||
import { ModalProvider } from './components/Modal';
|
||||
import { GLOBAL_DESTINATION_PATH } from 'App/constants/storageKeys';
|
||||
|
||||
const Login = lazy(() => import('Components/Login/Login'));
|
||||
const ForgotPassword = lazy(() => import('Components/ForgotPassword/ForgotPassword'));
|
||||
const UpdatePassword = lazy(() => import('Components/UpdatePassword/UpdatePassword'));
|
||||
|
|
@ -20,21 +37,6 @@ const ErrorsPure = lazy(() => import('Components/Errors/Errors'));
|
|||
const FunnelDetailsPure = lazy(() => import('Components/Funnels/FunnelDetails'));
|
||||
const FunnelIssueDetails = lazy(() => import('Components/Funnels/FunnelIssueDetails'));
|
||||
const FunnelPagePure = lazy(() => import('Components/Funnels/FunnelPage'));
|
||||
import WidgetViewPure from 'Components/Dashboard/components/WidgetView';
|
||||
import Header from 'Components/Header/Header';
|
||||
import { fetchList as fetchMetadata } from 'Duck/customField';
|
||||
import { fetchList as fetchSiteList } from 'Duck/site';
|
||||
import { fetchList as fetchAnnouncements } from 'Duck/announcements';
|
||||
import { fetchList as fetchAlerts } from 'Duck/alerts';
|
||||
import { withStore } from 'App/mstore'
|
||||
|
||||
import APIClient from './api_client';
|
||||
import * as routes from './routes';
|
||||
import { OB_DEFAULT_TAB } from 'App/routes';
|
||||
import Signup from './components/Signup/Signup';
|
||||
import { fetchTenants } from 'Duck/user';
|
||||
import { setSessionPath } from 'Duck/sessions';
|
||||
import { ModalProvider } from './components/Modal';
|
||||
|
||||
const BugFinder = withSiteIdUpdater(BugFinderPure);
|
||||
const Dashboard = withSiteIdUpdater(DashboardPure);
|
||||
|
|
@ -48,7 +50,6 @@ const FunnelPage = withSiteIdUpdater(FunnelPagePure);
|
|||
const FunnelsDetails = withSiteIdUpdater(FunnelDetailsPure);
|
||||
const FunnelIssue = withSiteIdUpdater(FunnelIssueDetails);
|
||||
const withSiteId = routes.withSiteId;
|
||||
// const withObTab = routes.withObTab;
|
||||
|
||||
const METRICS_PATH = routes.metrics();
|
||||
const METRICS_DETAILS = routes.metricDetails();
|
||||
|
|
@ -78,170 +79,166 @@ const ONBOARDING_REDIRECT_PATH = routes.onboarding(OB_DEFAULT_TAB);
|
|||
|
||||
@withStore
|
||||
@withRouter
|
||||
@connect((state) => {
|
||||
const siteId = state.getIn([ 'site', 'siteId' ]);
|
||||
const jwt = state.get('jwt');
|
||||
const changePassword = state.getIn([ 'user', 'account', 'changePassword' ]);
|
||||
const userInfoLoading = state.getIn([ 'user', 'fetchUserInfoRequest', 'loading' ]);
|
||||
return {
|
||||
jwt,
|
||||
siteId,
|
||||
changePassword,
|
||||
sites: state.getIn([ 'site', 'list' ]),
|
||||
isLoggedIn: jwt !== null && !changePassword,
|
||||
loading: siteId === null || userInfoLoading,
|
||||
email: state.getIn([ 'user', 'account', 'email' ]),
|
||||
account: state.getIn([ 'user', 'account' ]),
|
||||
organisation: state.getIn([ 'user', 'account', 'name' ]),
|
||||
tenantId: state.getIn([ 'user', 'account', 'tenantId' ]),
|
||||
tenants: state.getIn(['user', 'tenants']),
|
||||
existingTenant: state.getIn(['user', 'authDetails', 'tenants']),
|
||||
onboarding: state.getIn([ 'user', 'onboarding' ])
|
||||
};
|
||||
}, {
|
||||
fetchUserInfo,
|
||||
fetchTenants,
|
||||
setSessionPath,
|
||||
fetchMetadata,
|
||||
fetchSiteList,
|
||||
fetchAnnouncements,
|
||||
fetchAlerts,
|
||||
})
|
||||
@connect(
|
||||
(state) => {
|
||||
const siteId = state.getIn(['site', 'siteId']);
|
||||
const jwt = state.get('jwt');
|
||||
const changePassword = state.getIn(['user', 'account', 'changePassword']);
|
||||
const userInfoLoading = state.getIn(['user', 'fetchUserInfoRequest', 'loading']);
|
||||
return {
|
||||
jwt,
|
||||
siteId,
|
||||
changePassword,
|
||||
sites: state.getIn(['site', 'list']),
|
||||
isLoggedIn: jwt !== null && !changePassword,
|
||||
loading: siteId === null || userInfoLoading,
|
||||
email: state.getIn(['user', 'account', 'email']),
|
||||
account: state.getIn(['user', 'account']),
|
||||
organisation: state.getIn(['user', 'account', 'name']),
|
||||
tenantId: state.getIn(['user', 'account', 'tenantId']),
|
||||
tenants: state.getIn(['user', 'tenants']),
|
||||
existingTenant: state.getIn(['user', 'authDetails', 'tenants']),
|
||||
onboarding: state.getIn(['user', 'onboarding']),
|
||||
};
|
||||
},
|
||||
{
|
||||
fetchUserInfo,
|
||||
fetchTenants,
|
||||
setSessionPath,
|
||||
fetchMetadata,
|
||||
fetchSiteList,
|
||||
fetchAnnouncements,
|
||||
fetchAlerts,
|
||||
}
|
||||
)
|
||||
class Router extends React.Component {
|
||||
state = {
|
||||
destinationPath: null
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
if (props.isLoggedIn) {
|
||||
this.fetchInitialData();
|
||||
} else {
|
||||
props.fetchTenants();
|
||||
}
|
||||
}
|
||||
|
||||
fetchInitialData = () => {
|
||||
Promise.all([
|
||||
this.props.fetchUserInfo().then(() => {
|
||||
this.props.fetchSiteList().then(() => {
|
||||
const { mstore } = this.props
|
||||
mstore.initClient();
|
||||
|
||||
// setTimeout(() => {
|
||||
// this.props.fetchMetadata()
|
||||
// this.props.fetchAnnouncements();
|
||||
// this.props.fetchAlerts();
|
||||
// }, 100);
|
||||
})
|
||||
})
|
||||
])
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { isLoggedIn, location } = this.props;
|
||||
if (!isLoggedIn) {
|
||||
this.setState({ destinationPath: location.pathname });
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
this.props.setSessionPath(prevProps.location)
|
||||
if (prevProps.email !== this.props.email && !this.props.email) {
|
||||
this.props.fetchTenants();
|
||||
constructor(props) {
|
||||
super(props);
|
||||
if (props.isLoggedIn) {
|
||||
this.fetchInitialData();
|
||||
} else {
|
||||
props.fetchTenants();
|
||||
}
|
||||
}
|
||||
|
||||
if (this.state.destinationPath && !prevProps.isLoggedIn && this.props.isLoggedIn && this.state.destinationPath !== routes.login() && this.state.destinationPath !== '/') {
|
||||
this.props.history.push(this.state.destinationPath);
|
||||
this.setState({ destinationPath: null });
|
||||
fetchInitialData = () => {
|
||||
Promise.all([
|
||||
this.props.fetchUserInfo().then(() => {
|
||||
this.props.fetchSiteList().then(() => {
|
||||
const { mstore } = this.props;
|
||||
mstore.initClient();
|
||||
});
|
||||
}),
|
||||
]);
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const { isLoggedIn, location } = this.props;
|
||||
const destinationPath = localStorage.getItem(GLOBAL_DESTINATION_PATH);
|
||||
if (!isLoggedIn && !location.pathname.includes('login')) {
|
||||
localStorage.setItem(GLOBAL_DESTINATION_PATH, location.pathname);
|
||||
} else if (isLoggedIn && !location.pathname.includes(destinationPath)) {
|
||||
this.props.history.push(destinationPath || '/');
|
||||
localStorage.removeItem(GLOBAL_DESTINATION_PATH);
|
||||
}
|
||||
}
|
||||
|
||||
if (!prevProps.isLoggedIn && this.props.isLoggedIn) {
|
||||
this.fetchInitialData();
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
this.props.setSessionPath(prevProps.location);
|
||||
const destinationPath = localStorage.getItem(GLOBAL_DESTINATION_PATH);
|
||||
|
||||
if (prevProps.email !== this.props.email && !this.props.email) {
|
||||
this.props.fetchTenants();
|
||||
}
|
||||
|
||||
if (
|
||||
destinationPath &&
|
||||
!prevProps.isLoggedIn &&
|
||||
this.props.isLoggedIn &&
|
||||
destinationPath !== routes.login() &&
|
||||
destinationPath !== '/'
|
||||
) {
|
||||
this.props.history.push(destinationPath);
|
||||
}
|
||||
|
||||
if (!prevProps.isLoggedIn && this.props.isLoggedIn) {
|
||||
this.fetchInitialData();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isLoggedIn, jwt, siteId, sites, loading, changePassword, location, existingTenant, onboarding } = this.props;
|
||||
const siteIdList = sites.map(({ id }) => id).toJS();
|
||||
const hideHeader = location.pathname && location.pathname.includes('/session/') || location.pathname.includes('/assist/');
|
||||
render() {
|
||||
const { isLoggedIn, jwt, siteId, sites, loading, changePassword, location, existingTenant, onboarding } = this.props;
|
||||
const siteIdList = sites.map(({ id }) => id).toJS();
|
||||
const hideHeader = (location.pathname && location.pathname.includes('/session/')) || location.pathname.includes('/assist/');
|
||||
|
||||
return isLoggedIn ?
|
||||
<ModalProvider>
|
||||
<Loader loading={ loading } className="flex-1" >
|
||||
<Notification />
|
||||
{!hideHeader && <Header key="header"/>}
|
||||
<Suspense fallback={<Loader loading={true} className="flex-1" />}>
|
||||
|
||||
<Switch key="content" >
|
||||
<Route path={ CLIENT_PATH } component={ Client } />
|
||||
<Route path={ withSiteId(ONBOARDING_PATH, siteIdList)} component={ Onboarding } />
|
||||
<Route
|
||||
path="/integrations/"
|
||||
render={
|
||||
({ location }) => {
|
||||
const client = new APIClient(jwt);
|
||||
switch (location.pathname) {
|
||||
case '/integrations/slack':
|
||||
client.post('integrations/slack/add', {
|
||||
code: location.search.split('=')[ 1 ],
|
||||
state: tenantId,
|
||||
});
|
||||
break;
|
||||
}
|
||||
return <Redirect to={ CLIENT_PATH } />;
|
||||
}
|
||||
}
|
||||
/>
|
||||
{ onboarding &&
|
||||
<Redirect to={ withSiteId(ONBOARDING_REDIRECT_PATH, siteId)} />
|
||||
}
|
||||
{/* { siteIdList.length === 0 &&
|
||||
<Redirect to={ routes.client(routes.CLIENT_TABS.SITES) } />
|
||||
} */}
|
||||
|
||||
{/* DASHBOARD and Metrics */}
|
||||
<Route exact strict path={ withSiteId(METRICS_PATH, siteIdList) } component={ Dashboard } />
|
||||
<Route exact strict path={ withSiteId(METRICS_DETAILS, siteIdList) } component={ Dashboard } />
|
||||
<Route exact strict path={ withSiteId(METRICS_DETAILS_SUB, siteIdList) } component={ Dashboard } />
|
||||
<Route exact strict path={ withSiteId(DASHBOARD_PATH, siteIdList) } component={ Dashboard } />
|
||||
<Route exact strict path={ withSiteId(DASHBOARD_SELECT_PATH, siteIdList) } component={ Dashboard } />
|
||||
<Route exact strict path={ withSiteId(DASHBOARD_METRIC_CREATE_PATH, siteIdList) } component={ Dashboard } />
|
||||
<Route exact strict path={ withSiteId(DASHBOARD_METRIC_DETAILS_PATH, siteIdList) } component={ Dashboard } />
|
||||
return isLoggedIn ? (
|
||||
<ModalProvider>
|
||||
<Loader loading={loading} className="flex-1">
|
||||
<Notification />
|
||||
{!hideHeader && <Header key="header" />}
|
||||
<Suspense fallback={<Loader loading={true} className="flex-1" />}>
|
||||
<Switch key="content">
|
||||
<Route path={CLIENT_PATH} component={Client} />
|
||||
<Route path={withSiteId(ONBOARDING_PATH, siteIdList)} component={Onboarding} />
|
||||
<Route
|
||||
path="/integrations/"
|
||||
render={({ location }) => {
|
||||
const client = new APIClient(jwt);
|
||||
switch (location.pathname) {
|
||||
case '/integrations/slack':
|
||||
client.post('integrations/slack/add', {
|
||||
code: location.search.split('=')[1],
|
||||
state: tenantId,
|
||||
});
|
||||
break;
|
||||
}
|
||||
return <Redirect to={CLIENT_PATH} />;
|
||||
}}
|
||||
/>
|
||||
{onboarding && <Redirect to={withSiteId(ONBOARDING_REDIRECT_PATH, siteId)} />}
|
||||
|
||||
<Route exact strict path={ withSiteId(ASSIST_PATH, siteIdList) } component={ Assist } />
|
||||
<Route exact strict path={ withSiteId(ERRORS_PATH, siteIdList) } component={ Errors } />
|
||||
<Route exact strict path={ withSiteId(ERROR_PATH, siteIdList) } component={ Errors } />
|
||||
<Route exact strict path={ withSiteId(FUNNEL_PATH, siteIdList) } component={ FunnelPage } />
|
||||
<Route exact strict path={ withSiteId(FUNNEL_CREATE_PATH, siteIdList) } component={ FunnelsDetails } />
|
||||
{/* <Route exact strict path={ withSiteId(FUNNEL_PATH, siteIdList) } component={ Funnels } /> */}
|
||||
<Route exact strict path={ withSiteId(FUNNEL_ISSUE_PATH, siteIdList) } component={ FunnelIssue } />
|
||||
<Route exact strict path={ withSiteId(SESSIONS_PATH, siteIdList) } component={ BugFinder } />
|
||||
<Route exact strict path={ withSiteId(SESSION_PATH, siteIdList) } component={ Session } />
|
||||
<Route exact strict path={ withSiteId(LIVE_SESSION_PATH, siteIdList) } component={ LiveSession } />
|
||||
<Route exact strict path={ withSiteId(LIVE_SESSION_PATH, siteIdList) } render={ (props) => <Session { ...props } live /> } />
|
||||
{ routes.redirects.map(([ fr, to ]) => (
|
||||
<Redirect key={ fr } exact strict from={ fr } to={ to } />
|
||||
)) }
|
||||
<Redirect to={ withSiteId(SESSIONS_PATH, siteId) } />
|
||||
</Switch>
|
||||
</Suspense>
|
||||
</Loader>
|
||||
</ModalProvider>
|
||||
:
|
||||
<Suspense fallback={<Loader loading={true} className="flex-1" />}>
|
||||
<Switch>
|
||||
<Route exact strict path={ FORGOT_PASSWORD } component={ ForgotPassword } />
|
||||
<Route exact strict path={ LOGIN_PATH } component={ changePassword ? UpdatePassword : Login } />
|
||||
{ !existingTenant && <Route exact strict path={ SIGNUP_PATH } component={ Signup } /> }
|
||||
<Redirect to={ LOGIN_PATH } />
|
||||
</Switch>
|
||||
</Suspense>
|
||||
;
|
||||
}
|
||||
{/* DASHBOARD and Metrics */}
|
||||
<Route exact strict path={withSiteId(METRICS_PATH, siteIdList)} component={Dashboard} />
|
||||
<Route exact strict path={withSiteId(METRICS_DETAILS, siteIdList)} component={Dashboard} />
|
||||
<Route exact strict path={withSiteId(METRICS_DETAILS_SUB, siteIdList)} component={Dashboard} />
|
||||
<Route exact strict path={withSiteId(DASHBOARD_PATH, siteIdList)} component={Dashboard} />
|
||||
<Route exact strict path={withSiteId(DASHBOARD_SELECT_PATH, siteIdList)} component={Dashboard} />
|
||||
<Route exact strict path={withSiteId(DASHBOARD_METRIC_CREATE_PATH, siteIdList)} component={Dashboard} />
|
||||
<Route exact strict path={withSiteId(DASHBOARD_METRIC_DETAILS_PATH, siteIdList)} component={Dashboard} />
|
||||
|
||||
<Route exact strict path={withSiteId(ASSIST_PATH, siteIdList)} component={Assist} />
|
||||
<Route exact strict path={withSiteId(ERRORS_PATH, siteIdList)} component={Errors} />
|
||||
<Route exact strict path={withSiteId(ERROR_PATH, siteIdList)} component={Errors} />
|
||||
<Route exact strict path={withSiteId(FUNNEL_PATH, siteIdList)} component={FunnelPage} />
|
||||
<Route exact strict path={withSiteId(FUNNEL_CREATE_PATH, siteIdList)} component={FunnelsDetails} />
|
||||
<Route exact strict path={withSiteId(FUNNEL_ISSUE_PATH, siteIdList)} component={FunnelIssue} />
|
||||
<Route exact strict path={withSiteId(SESSIONS_PATH, siteIdList)} component={BugFinder} />
|
||||
<Route exact strict path={withSiteId(SESSION_PATH, siteIdList)} component={Session} />
|
||||
<Route exact strict path={withSiteId(LIVE_SESSION_PATH, siteIdList)} component={LiveSession} />
|
||||
<Route exact strict path={withSiteId(LIVE_SESSION_PATH, siteIdList)} render={(props) => <Session {...props} live />} />
|
||||
{routes.redirects.map(([fr, to]) => (
|
||||
<Redirect key={fr} exact strict from={fr} to={to} />
|
||||
))}
|
||||
<Redirect to={withSiteId(SESSIONS_PATH, siteId)} />
|
||||
</Switch>
|
||||
</Suspense>
|
||||
</Loader>
|
||||
</ModalProvider>
|
||||
) : (
|
||||
<Suspense fallback={<Loader loading={true} className="flex-1" />}>
|
||||
<Switch>
|
||||
<Route exact strict path={FORGOT_PASSWORD} component={ForgotPassword} />
|
||||
<Route exact strict path={LOGIN_PATH} component={changePassword ? UpdatePassword : Login} />
|
||||
{!existingTenant && <Route exact strict path={SIGNUP_PATH} component={Signup} />}
|
||||
<Redirect to={LOGIN_PATH} />
|
||||
</Switch>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default () => (
|
||||
<BrowserRouter>
|
||||
<Router />
|
||||
</BrowserRouter>
|
||||
<BrowserRouter>
|
||||
<Router />
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
export const SKIP_TO_ISSUE = "__$session-skipToIssue$__"
|
||||
export const TIMEZONE = "__$session-timezone$__"
|
||||
export const DURATION_FILTER = "__$session-durationFilter$__"
|
||||
export const SESSION_FILTER = "__$session-filter$__"
|
||||
export const SESSION_FILTER = "__$session-filter$__"
|
||||
export const GLOBAL_DESTINATION_PATH = "__$global-destinationPath$__"
|
||||
Loading…
Add table
Reference in a new issue