feat(app): Show connect alert banner on successful connection (#1700)

closes #1314

app/src/components/RobotSettings/ConnectBanner.js

@@ -0,0 +1,33 @@
+// @flow
+import * as React from 'react'
+import {type Robot} from '../../robot'
+import {AlertItem} from '@opentrons/components'
+
+type State = {
+  dismissed: boolean
+}
+
+export default class ConnectBanner extends React.Component <Robot, State> {
+  constructor (props: Robot) {
+    super(props)
+
+    this.state = {
+      dismissed: false
+    }
+  }
+
+  render () {
+    const {isConnected, name} = this.props
+    const isVisible = isConnected && !this.state.dismissed
+    const TITLE = `${name} successfully connected`
+    if (!isVisible) {
+      return null
+    }
+    return (
+      <AlertItem
+        type='success'
+        onCloseClick={() => this.setState({dismissed: true})}
+        title={TITLE} />
+    )
+  }
+}

app/src/pages/Robots.js

@@ -14,6 +14,7 @@ import Page from '../components/Page'
 import RobotSettings, {ConnectAlertModal} from '../components/RobotSettings'
 import ChangePipette from '../components/ChangePipette'
 import CalibrateDeck from '../components/CalibrateDeck'
+import ConnectBanner from '../components/RobotSettings/ConnectBanner'
 
 type StateProps = {
   robot: ?Robot,
@@ -58,6 +59,7 @@ function RobotSettingsPage (props: Props) {
   return (
     <Page>
       <TitleBar title={robot.name} />
+      <ConnectBanner {...robot} key={Number(robot.isConnected)}/>
       <RobotSettings {...robot} />
 
       <Route path={`${path}/pipettes`} render={(props) => (