feat(app): Add modules and pipettes settings page (#1785)

Opentrons · Jun 30, 2018 · 7ce12b3 · 7ce12b3
1 parent 11f582b
commit 7ce12b3
Show file tree

Hide file tree

Showing 23 changed files with 524 additions and 263 deletions.
diff --git a/app-shell/lib/config.js b/app-shell/lib/config.js
@@ -22,6 +22,7 @@ const PARSE_ARGS_OPTS = {
 // TODO(mc, 2018-05-25): future config changes will require migration strategy
 const DEFAULTS = {
   devtools: false,
+  modules: false,
 
   // logging config
   log: {
@@ -50,6 +51,7 @@ const DEFAULTS = {
     optedIn: false,
     seenOptIn: false
   }
+
 }
 
 // lazy load store, overrides, and log because of config/log interdependency

diff --git a/app/src/components/AppSettings/index.js b/app/src/components/AppSettings/index.js
@@ -7,7 +7,7 @@ import AdvancedSettingsCard from './AdvancedSettingsCard'
 import AppInfoCard from './AppInfoCard'
 import AppUpdateModal from './AppUpdateModal'
 
-import styles from './styles.css'
+import {CardContainer, CardRow} from '../layout'
 
 type Props = {
   update: ShellUpdate,
@@ -16,17 +16,17 @@ type Props = {
 
 export default function AppSettings (props: Props) {
   return (
-    <div className={styles.app_settings}>
-      <div className={styles.row}>
+    <CardContainer>
+      <CardRow>
         <AppInfoCard {...props}/>
-      </div>
-      <div className={styles.row}>
+      </CardRow>
+      <CardRow>
         <AnalyticsSettingsCard {...props} />
-      </div>
-      <div className={styles.row}>
+      </CardRow>
+      <CardRow>
         <AdvancedSettingsCard />
-      </div>
-    </div>
+      </CardRow>
+    </CardContainer>
   )
 }
 

diff --git a/app/src/components/AppSettings/styles.css b/app/src/components/AppSettings/styles.css
diff --git a/app/src/components/ConnectPanel/RobotList.js b/app/src/components/ConnectPanel/RobotList.js
@@ -4,7 +4,8 @@ import * as React from 'react'
 
 import {
   ListItem,
-  NotificationIcon
+  NotificationIcon,
+  Icon
 } from '@opentrons/components'
 
 import type {Robot} from '../../robot'
@@ -36,10 +37,12 @@ export function RobotListItem (props: ItemProps) {
     : connect
 
   return (
+    <ol className={styles.robot_group}>
     <ListItem
       url={`/robots/${name}`}
       className={styles.robot_item}
       activeClassName={styles.active}
+      exact
     >
       <NotificationIcon
         name={wired ? 'usb' : 'wifi'}
@@ -58,5 +61,19 @@ export function RobotListItem (props: ItemProps) {
         className={styles.robot_item_icon}
       />
     </ListItem>
+    <ListItem
+      url={`/robots/${name}/instruments`}
+      className={styles.instrument_item}
+      activeClassName={styles.active}
+    >
+      <p className={styles.robot_name}>
+        Pipettes & Modules
+      </p>
+      <Icon
+        name='chevron-right'
+        className={styles.robot_item_icon}
+      />
+    </ListItem>
+    </ol>
   )
 }
diff --git a/app/src/components/ConnectPanel/connect-panel.css b/app/src/components/ConnectPanel/connect-panel.css
@@ -5,10 +5,25 @@
   margin-left: 0;
 }
 
-.robot_item {
-  text-transform: uppercase;
+.robot_group {
   margin-bottom: 0.25rem;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+
+  & > li {
+    max-height: 3rem;
+  }
+}
+
+.robot_item {
+  max-height: 3rem;
+  text-transform: uppercase;
+  border-bottom: 1px solid var(--c-light-gray);
+}
+
+.instrument_item {
+  max-height: 2.5rem;
+  text-transform: uppercase;
+  border-bottom: 1px solid var(--c-light-gray);
 }
 
 .robot_item_icon {

diff --git a/app/src/components/InstrumentSettings/AttachedModulesCard.js b/app/src/components/InstrumentSettings/AttachedModulesCard.js
@@ -0,0 +1,52 @@
+// @flow
+// attached modules container card
+import * as React from 'react'
+import {connect} from 'react-redux'
+
+import type {State} from '../../types'
+
+import {Card} from '@opentrons/components'
+import {getModulesOn} from '../../config'
+import ModulesCardContents from './ModulesCardContents'
+
+type Module = {
+  slot: number,
+  name: string,
+  status: string,
+  serial: number,
+  fw_version: string
+}
+
+type SP = {
+  modulesFlag: ?boolean,
+  inProgress?: ?boolean,
+  modules?: Array<Module>, // modulesBySlot?
+  fetchModules?: () => mixed
+}
+
+type Props = SP
+
+const TITLE = 'Modules'
+
+export default connect(mapStateToProps, null)(AttachedModulesCard)
+
+// TODO (ka 2018-6-29): change this to a refresh card once we have endpoints
+function AttachedModulesCard (props: Props) {
+  if (props.modulesFlag) {
+    return (
+      <Card
+        title={TITLE}
+        column
+      >
+        <ModulesCardContents />
+      </Card>
+    )
+  }
+  return null
+}
+
+function mapStateToProps (state: State): SP {
+  return {
+    modulesFlag: getModulesOn(state)
+  }
+}
diff --git a/.../RobotSettings/AttachedInstrumentsCard.js → ...nstrumentSettings/AttachedPipettesCard.js b/.../RobotSettings/AttachedInstrumentsCard.js → ...nstrumentSettings/AttachedPipettesCard.js
@@ -31,9 +31,9 @@ const TITLE = 'Pipettes'
 export default connect(
   makeMapStateToProps,
   mapDispatchToProps
-)(AttachedInstrumentsCard)
+)(AttachedPipettesCard)
 
-function AttachedInstrumentsCard (props: Props) {
+function AttachedPipettesCard (props: Props) {
   return (
     <RefreshCard
       title={TITLE}

diff --git a/...omponents/RobotSettings/InstrumentInfo.js → ...ents/InstrumentSettings/InstrumentInfo.js b/...omponents/RobotSettings/InstrumentInfo.js → ...ents/InstrumentSettings/InstrumentInfo.js
@@ -27,7 +27,7 @@ const LABEL_BY_MOUNT = {
   right: 'Right pipette'
 }
 
-export default function InstrumentInfo (props: Props) {
+export default function PipetteInfo (props: Props) {
   const {mount, model, name, onClick} = props
   const label = LABEL_BY_MOUNT[mount]
   const channelsMatch = model && model.match(RE_CHANNELS)
@@ -36,9 +36,9 @@ export default function InstrumentInfo (props: Props) {
     ? 'change'
     : 'attach'
 
-  const url = `/robots/${name}/pipettes/${mount}`
+  const url = `/robots/${name}/instruments/pipettes/${mount}`
 
-  const className = cx(styles.instrument_card, {
+  const className = cx(styles.pipette_card, {
     [styles.right]: props.mount === 'right'
   })
 
@@ -55,7 +55,7 @@ export default function InstrumentInfo (props: Props) {
         {channels && (
           <InstrumentDiagram
             channels={channels === 'multi' ? 8 : 1}
-            className={styles.instrument_diagram}
+            className={styles.pipette_diagram}
           />
         )}
       </div>

diff --git a/app/src/components/InstrumentSettings/ModulesCardContents.js b/app/src/components/InstrumentSettings/ModulesCardContents.js
@@ -0,0 +1,18 @@
+// @flow
+import * as React from 'react'
+import styles from './styles.css'
+
+type Props = {
+  modules?: any
+}
+
+export default function ModulesCardContents (props: Props) {
+  return (
+    <React.Fragment>
+    <p className={styles.modules_description}>No modules detected.</p>
+
+    <p className={styles.modules_description}>Connect a module to your robot via USB, then power it on.
+    Press the refresh icon to the top to detect your module.</p>
+    </React.Fragment>
+  )
+}
diff --git a/app/src/components/InstrumentSettings/index.js b/app/src/components/InstrumentSettings/index.js
@@ -0,0 +1,23 @@
+// @flow
+// robot status panel with connect button
+import * as React from 'react'
+import type {Robot} from '../../robot'
+
+import AttachedPipettesCard from './AttachedPipettesCard'
+import AttachedModulesCard from './AttachedModulesCard'
+import {CardContainer, CardRow} from '../layout'
+
+type Props = Robot
+
+export default function InstrumentSettings (props: Props) {
+  return (
+    <CardContainer>
+      <CardRow>
+        <AttachedPipettesCard {...props} />
+      </CardRow>
+      <CardRow>
+        <AttachedModulesCard {...props} />
+      </CardRow>
+    </CardContainer>
+  )
+}
diff --git a/app/src/components/InstrumentSettings/styles.css b/app/src/components/InstrumentSettings/styles.css
@@ -0,0 +1,55 @@
+/* stylesheet for InstrumentSettings components */
+@import '@opentrons/components';
+
+.pipette_card {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 4rem;
+  padding-top: 1rem;
+  width: 49.5%;
+
+  & > a {
+    width: 8rem;
+  }
+}
+
+.pipette_diagram {
+  height: 100%;
+  padding: 0 0 0.5rem;
+  text-align: center;
+
+  & * {
+    height: 100%;
+    width: auto;
+  }
+}
+
+.image {
+  height: 8rem;
+  width: 2.25rem;
+  margin-top: -3rem;
+  border: 1px solid var(--c-light-gray);
+}
+
+.right {
+  & > div {
+    order: 2;
+  }
+
+  & > .image {
+    order: 1;
+  }
+
+  & > a {
+    order: 3;
+  }
+}
+
+.modules_description {
+  @apply --font-body-2-dark;
+
+  margin: 0.5rem 0;
+}
diff --git a/app/src/components/RobotSettings/index.js b/app/src/components/RobotSettings/index.js
@@ -4,47 +4,43 @@ import * as React from 'react'
 import type {Robot} from '../../robot'
 
 import StatusCard from './StatusCard'
-import AttachedInstrumentsCard from './AttachedInstrumentsCard'
 import InformationCard from './InformationCard'
 import ControlsCard from './ControlsCard'
 import ConnectivityCard from './ConnectivityCard'
 import CalibrationCard from './CalibrationCard'
 import AdvancedSettingsCard from './AdvancedSettingsCard'
 import ConnectAlertModal from './ConnectAlertModal'
 import UpdateModal from './UpdateModal'
-import styles from './styles.css'
+import {CardContainer, CardRow, CardColumn} from '../layout'
 
 type Props = Robot
 
 export default function RobotSettings (props: Props) {
   const updateUrl = `/robots/${props.name}/update`
 
   return (
-    <div className={styles.robot_settings}>
-      <div className={styles.row}>
+    <CardContainer>
+      <CardRow>
         <StatusCard {...props} />
-      </div>
-      <div className={styles.row}>
-        <AttachedInstrumentsCard {...props} />
-      </div>
-      <div className={styles.row}>
+      </CardRow>
+      <CardRow>
         <InformationCard {...props} updateUrl={updateUrl} />
-      </div>
-      <div className={styles.row}>
+      </CardRow>
+      <CardRow>
         <ControlsCard {...props} />
-      </div>
-      <div className={styles.row}>
-        <div className={styles.column_50}>
+      </CardRow>
+      <CardRow>
+        <CardColumn>
           <ConnectivityCard {...props} />
-        </div>
-        <div className={styles.column_50}>
+        </CardColumn>
+        <CardColumn>
           <CalibrationCard {...props} />
-        </div>
-      </div>
-      <div className={styles.row}>
+        </CardColumn>
+      </CardRow>
+      <CardRow>
         <AdvancedSettingsCard {...props} />
-      </div>
-    </div>
+      </CardRow>
+    </CardContainer>
   )
 }