From 70cd8b2468677c0a8afaa6276db828f4eba5e126 Mon Sep 17 00:00:00 2001
From: Katie Adee <kaa328@nyu.edu>
Date: Fri, 15 Jun 2018 11:18:26 -0400
Subject: [PATCH] feat(app): Show connect alert banner on successful connection
 (#1700)

closes #1314
---
 .../components/RobotSettings/ConnectBanner.js | 33 +++++++++++++++++++
 app/src/pages/Robots.js                       |  2 ++
 2 files changed, 35 insertions(+)
 create mode 100644 app/src/components/RobotSettings/ConnectBanner.js

diff --git a/app/src/components/RobotSettings/ConnectBanner.js b/app/src/components/RobotSettings/ConnectBanner.js
new file mode 100644
index 00000000000..499fecbb0e1
--- /dev/null
+++ b/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} />
+    )
+  }
+}
diff --git a/app/src/pages/Robots.js b/app/src/pages/Robots.js
index a0c9d2475c8..c58dbb8fdfc 100644
--- a/app/src/pages/Robots.js
+++ b/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) => (