fix(ui/signin): clear notifications on redirect (#12518)

Co-authored-by: Brandon Farmer <bthesorceror@gmail.com>

ui/src/App.tsx

@@ -2,23 +2,22 @@ import React, {SFC, ReactChildren} from 'react'
 
 import RightClickLayer from 'src/clockface/components/right_click_menu/RightClickLayer'
 import Nav from 'src/pageLayout'
-import Notifications from 'src/shared/components/notifications/Notifications'
 import LegendPortal from 'src/shared/components/LegendPortal'
 import TooltipPortal from 'src/shared/components/TooltipPortal'
+import Notifications from 'src/shared/containers/Notifications'
 
 interface Props {
   children: ReactChildren
 }
 
 const App: SFC<Props> = ({children}) => (
-  <div className="chronograf-root">
-    <Notifications />
+  <Notifications>
     <RightClickLayer />
     <Nav />
     <LegendPortal />
     <TooltipPortal />
     {children}
-  </div>
+  </Notifications>
 )
 
 export default App

ui/src/index.tsx

@@ -35,6 +35,7 @@ import {MePage, Account} from 'src/me'
 import NotFound from 'src/shared/components/NotFound'
 import GetLinks from 'src/shared/containers/GetLinks'
 import GetMe from 'src/shared/containers/GetMe'
+import Notifications from 'src/shared/containers/Notifications'
 import ConfigurationPage from 'src/configuration/components/ConfigurationPage'
 import OrgDashboardsIndex from 'src/organizations/containers/OrgDashboardsIndex'
 import OrgMembersIndex from 'src/organizations/containers/OrgMembersIndex'
@@ -98,9 +99,11 @@ class Root extends PureComponent {
                   path=":stepID/:substepID"
                   component={OnboardingWizardPage}
                 />
-              </Route>
+                <Route component={Notifications}>
                   <Route path="/signin" component={SigninPage} />
                   <Route path="/logout" component={Logout} />
+                </Route>
+              </Route>
               <Route path="/">
                 <Route component={Signin}>
                   <Route component={GetMe}>

ui/src/me/components/GettingStarted.tsx

@@ -64,7 +64,6 @@ class GettingStarted extends PureComponent<StateProps> {
 
   private get firstOrgCollectorLink(): string {
     const {orgs} = this.props
-
     const firstOrgID = orgs[0].id
 
     return `/organizations/${firstOrgID}/telegrafs`

ui/src/onboarding/containers/SigninPage.tsx

@@ -1,18 +1,21 @@
 // Libraries
 import React, {PureComponent} from 'react'
 import {withRouter, WithRouterProps} from 'react-router'
+import {connect} from 'react-redux'
 import _ from 'lodash'
 
-// apis
+// APIs
 import {client} from 'src/utils/api'
 
+// Actions
+import {dismissAllNotifications} from 'src/shared/actions/notifications'
+
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import SplashPage from 'src/shared/components/splash_page/SplashPage'
 import SigninForm from 'src/onboarding/components/SigninForm'
 import {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface'
 import {RemoteDataState} from 'src/types'
-import Notifications from 'src/shared/components/notifications/Notifications'
 import VersionInfo from 'src/shared/components/VersionInfo'
 
 // Constants
@@ -22,8 +25,13 @@ interface State {
   status: RemoteDataState
 }
 
+interface DispatchProps {
+  dismissAllNotifications: typeof dismissAllNotifications
+}
+
+type Props = WithRouterProps & DispatchProps
 @ErrorHandling
-class SigninPage extends PureComponent<WithRouterProps, State> {
+class SigninPage extends PureComponent<Props, State> {
   constructor(props) {
     super(props)
 
@@ -44,13 +52,16 @@ class SigninPage extends PureComponent<WithRouterProps, State> {
     this.setState({status: RemoteDataState.Done})
   }
 
+  componentWillUnmount() {
+    this.props.dismissAllNotifications()
+  }
+
   public render() {
     return (
       <SpinnerContainer
         loading={this.state.status}
         spinnerComponent={<TechnoSpinner />}
       >
-        <Notifications inPresentationMode={true} />
         <SplashPage panelWidthPixels={300}>
           <SplashPage.Panel>
             <SplashPage.Logo />
@@ -64,4 +75,10 @@ class SigninPage extends PureComponent<WithRouterProps, State> {
   }
 }
 
-export default withRouter(SigninPage)
+const mdtp: DispatchProps = {
+  dismissAllNotifications,
+}
+export default connect(
+  null,
+  mdtp
+)(withRouter(SigninPage))

ui/src/shared/actions/notifications.ts

@@ -14,3 +14,7 @@ export const dismissNotification = (
   type: 'DISMISS_NOTIFICATION',
   payload: {id},
 })
+
+export const dismissAllNotifications = (): NotificationsActions.DismissAllNotificationsAction => ({
+  type: 'DISMISS_ALL_NOTIFICATIONS',
+})

ui/src/shared/containers/Notifications.tsx

@@ -0,0 +1,12 @@
+import React, {SFC} from 'react'
+
+import Notifications from 'src/shared/components/notifications/Notifications'
+
+const App: SFC<{}> = ({children}) => (
+  <div className="chronograf-root">
+    <Notifications />
+    {children}
+  </div>
+)
+
+export default App

ui/src/shared/reducers/notifications.ts

@@ -20,6 +20,9 @@ export const notifications = (state = initialState, action: Action) => {
       const {id} = action.payload
       return state.filter(n => n.id !== id)
     }
+    case 'DISMISS_ALL_NOTIFICATIONS': {
+      return []
+    }
   }
 
   return state

ui/src/types/actions/notifications.ts

@@ -1,6 +1,9 @@
 import {Notification} from 'src/types'
 
-export type Action = PublishNotificationAction | DismissNotificationAction
+export type Action =
+  | PublishNotificationAction
+  | DismissNotificationAction
+  | DismissAllNotificationsAction
 
 export type PublishNotificationActionCreator = (
   n: Notification
@@ -21,3 +24,7 @@ export interface DismissNotificationAction {
     id: string
   }
 }
+
+export interface DismissAllNotificationsAction {
+  type: 'DISMISS_ALL_NOTIFICATIONS'
+}