feat(app): Show connect modules modal when session modules detected (#…

…1897)

closes #1738

app/src/components/CalibrateLabware/ConfirmModal.js

@@ -12,7 +12,7 @@ import styles from './styles.css'
 type Props = {
   labware: Labware,
   calibrateToBottom: boolean,
-  onBackClick: () => void,
+  onBackClick: () => mixed,
 }
 
 export default function ConfirmModal (props: Props) {

app/src/components/ConnectModulesModal/Prompt.js

@@ -0,0 +1,48 @@
+// @flow
+// prompt for ReviewModulesModal of labware calibration page
+import * as React from 'react'
+
+import {OutlineButton, AlertItem} from '@opentrons/components'
+
+import styles from './styles.css'
+
+type Props = {
+  modulesMissing: boolean,
+  onClick: () => mixed,
+}
+
+const missingAlertProps = {
+  type: 'warning',
+  title: 'Module Missing',
+  className: styles.alert
+}
+
+const connectedAlertProps = {
+  type: 'success',
+  title: 'Module succesfully detected.',
+  className: styles.alert
+}
+
+export default function Prompt (props: Props) {
+  const {modulesMissing, onClick} = props
+  const alert = modulesMissing
+    ? <AlertItem {...missingAlertProps}/>
+    : <AlertItem {...connectedAlertProps}/>
+  const message = modulesMissing
+    ? 'Plug in and power up the required module via USB to your robot.'
+    : 'Module succesfully detected.'
+  const buttonText = modulesMissing
+    ? 'try searching for missing module'
+    : 'continue to labware setup'
+  return (
+    <div className={styles.prompt}>
+      {alert}
+      <p className={styles.prompt_text}>
+        {message}
+      </p>
+      <OutlineButton className={styles.prompt_button} onClick={onClick} inverted>
+        {buttonText}
+      </OutlineButton>
+    </div>
+  )
+}

app/src/components/ConnectModulesModal/index.js

@@ -0,0 +1,17 @@
+// @flow
+import * as React from 'react'
+import {Modal} from '../modals'
+import Prompt from './Prompt'
+
+type Props = {
+  modulesMissing: boolean,
+  onClick: () => mixed,
+}
+
+export default function ConnectModulesModal (props: Props) {
+  return (
+    <Modal>
+      <Prompt {...props}/>
+    </Modal>
+  )
+}

app/src/components/ConnectModulesModal/styles.css

@@ -0,0 +1,28 @@
+@import '@opentrons/components';
+
+.alert {
+  position: absolute;
+  top: 3rem;
+  left: 0;
+  right: 0;
+}
+
+.prompt {
+  padding-top: 2rem;
+}
+
+.prompt_text {
+  @apply --font-header-light;
+
+  font-weight: normal;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.prompt_button {
+  display: block;
+  width: auto;
+  margin: 1rem auto;
+  padding-left: 3rem;
+  padding-right: 3rem;
+}

app/src/components/InstrumentSettings/AttachedModulesCard.js

@@ -16,7 +16,7 @@ type OP = Robot
 
 type SP = {
   modulesFlag: ?boolean,
-  modules: Array<Module>,
+  modules: ?Array<Module>,
   refreshing: boolean
 }
 
@@ -26,24 +26,26 @@ type Props = OP & SP & DP
 
 const TITLE = 'Modules'
 
-const STUBBED_MODULE_DATA = [
-  {
-    name: 'temp_deck',
-    model: 'temp_deck',
-    serial: '123123124',
-    fwVersion: '1.2.13',
-    status: '86',
-    displayName: 'Temperature Module'
-  },
-  {
-    name: 'mag_deck',
-    model: 'mag_deck',
-    serial: '123123124',
-    fwVersion: '1.2.13',
-    status: 'disengaged',
-    displayName: 'Magnetic Bead Module'
-  }
-]
+// TODO(mc, 2018-07-19): remove this testing code when API returns modules
+// const STUBBED_MODULE_DATA = [
+//   {
+//     name: 'tempdeck',
+//     model: 'temp_deck',
+//     serial: '123123124',
+//     fwVersion: '1.2.13',
+//     status: '86',
+//     displayName: 'Temperature Module'
+//   },
+//   {
+//     name: 'magdeck',
+//     model: 'mag_deck',
+//     serial: '123123124',
+//     fwVersion: '1.2.13',
+//     status: 'disengaged',
+//     displayName: 'Magnetic Bead Module'
+//   }
+// ]
+
 export default connect(makeSTP, DTP)(AttachedModulesCard)
 
 // TODO (ka 2018-6-29): change this to a refresh card once we have endpoints
@@ -74,7 +76,7 @@ function makeSTP (): (state: State, ownProps: OP) => SP {
 
     return {
       modulesFlag: getModulesOn(state),
-      modules: modules || STUBBED_MODULE_DATA,
+      modules: modules /* || STUBBED_MODULE_DATA */,
       refreshing: modulesCall.inProgress
     }
   }

app/src/components/InstrumentSettings/ModulesCardContents.js

@@ -4,13 +4,11 @@ import type {Module} from '../../http-api-client'
 import ModuleItem, {NoModulesMessage} from '../ModuleItem'
 
 type Props = {
-  modules: Array<Module>,
+  modules: ?Array<Module>,
 }
 
 export default function ModulesCardContents (props: Props) {
-  const modulesFound = props.modules[0]
-
-  if (!modulesFound) return (<NoModulesMessage />)
+  if (!props.modules || !props.modules[0]) return (<NoModulesMessage />)
 
   return (
     <React.Fragment>

app/src/components/ReviewDeckModal/index.js

@@ -11,7 +11,7 @@ import {
   type Labware
 } from '../../robot'
 
-import Modal from './Modal'
+import {Modal} from '../modals'
 import Prompt from './Prompt'
 import Deck from './Deck'
 

app/src/components/ReviewDeckModal/styles.css

@@ -1,16 +1,5 @@
 @import '@opentrons/components';
 
-.modal {
-  @apply --modal;
-
-  flex-direction: column;
-  padding: 2rem;
-}
-
-.modal * {
-  z-index: 1;
-}
-
 .prompt {
   max-width: 32rem;
   margin: 0 0 0.5rem;

app/src/components/ReviewDeckModal/Modal.js → app/src/components/modals/Modal.js

@@ -2,18 +2,25 @@
 // modal component for ReviewDeckModal of labware calibration page
 import * as React from 'react'
 
-import {Overlay} from '@opentrons/components'
+import {Overlay, TitleBar} from '@opentrons/components'
+import SessionHeader from '../SessionHeader'
 
 import styles from './styles.css'
 
 type Props = {
   children: React.Node
 }
 
+const titleBarProps = {
+  title: (<SessionHeader />),
+  className: styles.title_bar
+}
+
 export default function Modal (props: Props) {
   return (
     <div className={styles.modal}>
       <Overlay />
+      <TitleBar {...titleBarProps}/>
       {props.children}
     </div>
   )

app/src/components/modals/index.js

@@ -1,6 +1,6 @@
 // @flow
 // app specific modals
-
+import Modal from './Modal'
 import ErrorModal from './ErrorModal'
 
-export {ErrorModal}
+export {Modal, ErrorModal}

app/src/components/modals/styles.css

@@ -1,3 +1,24 @@
+@import '@opentrons/components';
+
+.modal {
+  @apply --modal;
+
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: 4rem 2rem 2rem;
+}
+
+.modal * {
+  z-index: 1;
+}
+
 .error_modal_message {
   font-style: italic;
 }
+
+.title_bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}

app/src/http-api-client/modules.js

@@ -12,7 +12,7 @@ import {getRobotApiState} from './reducer'
 import client from './client'
 
 export type Module = {
-  name: string,
+  name: 'magdeck' | 'tempdeck',
   model: string,
   serial: string,
   fwVersion: string,