refactor(app): Add thermocycler to attached modules card behind flag (#…

…3220)

closes #3061

app/src/components/InstrumentSettings/AttachedModulesCard.js

@@ -6,6 +6,7 @@ import {connect} from 'react-redux'
 import {RefreshCard} from '@opentrons/components'
 import {fetchModules, makeGetRobotModules} from '../../http-api-client'
 import ModulesCardContents from './ModulesCardContents'
+import {getConfig} from '../../config'
 
 import type {State, Dispatch} from '../../types'
 import type {Module} from '../../http-api-client'
@@ -16,6 +17,7 @@ type OP = Robot
 type SP = {|
   modules: ?Array<Module>,
   refreshing: boolean,
+  __featureEnabled: boolean,
 |}
 
 type DP = {|refresh: () => mixed|}
@@ -38,7 +40,10 @@ function AttachedModulesCard (props: Props) {
       refresh={props.refresh}
       column
     >
-      <ModulesCardContents modules={props.modules} />
+      <ModulesCardContents
+        modules={props.modules}
+        showThermo={props.__featureEnabled}
+      />
     </RefreshCard>
   )
 }
@@ -50,10 +55,10 @@ function makeSTP (): (state: State, ownProps: OP) => SP {
     const modulesCall = getRobotModules(state, ownProps)
     const modulesResponse = modulesCall.response
     const modules = modulesResponse && modulesResponse.modules
-
     return {
       modules: modules,
       refreshing: modulesCall.inProgress,
+      __featureEnabled: !!getConfig(state).devInternal?.enableThermocycler,
     }
   }
 }

app/src/components/InstrumentSettings/ModulesCardContents.js

@@ -5,15 +5,17 @@ import ModuleItem, {NoModulesMessage} from '../ModuleItem'
 
 type Props = {
   modules: ?Array<Module>,
+  showThermo: boolean,
 }
 
 export default function ModulesCardContents (props: Props) {
-  if (!props.modules || !props.modules[0]) return (<NoModulesMessage />)
+  const {modules, showThermo} = props
+  if (!modules || !modules[0] || !showThermo) return <NoModulesMessage />
 
   return (
     <React.Fragment>
-      {props.modules.map((mod, index) => (
-        <ModuleItem module={mod} key={index}/>
+      {modules.map((mod, index) => (
+        <ModuleItem module={mod} key={index} />
       ))}
     </React.Fragment>
   )

app/src/components/ModuleItem/ModuleImage.js

@@ -11,7 +11,7 @@ export default function ModuleImage (props: Props) {
   const imgSrc = getModuleImg(props.name)
   return (
     <div className={styles.module_image_wrapper}>
-      <img src={imgSrc} className={styles.module_image}/>
+      <img src={imgSrc} className={styles.module_image} />
     </div>
   )
 }
@@ -23,4 +23,5 @@ function getModuleImg (name: string) {
 const MODULE_IMGS = {
   tempdeck: require('./images/[email protected]'),
   magdeck: require('./images/[email protected]'),
+  thermocycler: require('./images/[email protected]'),
 }

app/src/config/index.js

@@ -66,6 +66,7 @@ export type Config = {
   devInternal?: {
     allPipetteConfig?: boolean,
     manualIp?: boolean,
+    enableThermocycler?: boolean,
   },
 }