feat(app): add GEN2 images to change pipette

.flowconfig

@@ -23,5 +23,6 @@
 
 [options]
 module.name_mapper.extension='css' -> '@opentrons/components/interfaces/CSSModule.js'
+module.ignore_non_literal_requires=true
 merge_timeout=300
 esproposal.optional_chaining=enable

app/src/components/ChangePipette/ConfirmPipette.js

@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom'
 import { Icon, PrimaryButton, ModalPage } from '@opentrons/components'
 
 import type { ChangePipetteProps } from './types'
-import { getDiagramSrc } from './InstructionStep'
+import { getDiagramsSrc } from './InstructionStep'
 import styles from './styles.css'
 
 const EXIT_BUTTON_MESSAGE = 'exit pipette setup'
@@ -83,7 +83,7 @@ function StatusDetails(props: ChangePipetteProps) {
         <div>
           <img
             className={styles.confirm_diagram}
-            src={getDiagramSrc({
+            src={getDiagramsSrc({
               ...props,
               channels: wantedPipette.channels,
               diagram: 'tab',

app/src/components/ChangePipette/InstructionStep.js

@@ -1,7 +1,10 @@
 // @flow
 import * as React from 'react'
 
-import type { PipetteChannels } from '@opentrons/shared-data'
+import type {
+  PipetteChannels,
+  PipetteDisplayCategory,
+} from '@opentrons/shared-data'
 import type { Mount } from '../../robot'
 import type { Direction } from './types'
 
@@ -15,85 +18,36 @@ type DiagramProps = {
   mount: Mount,
   channels: PipetteChannels,
   diagram: Diagram,
+  displayCategory: PipetteDisplayCategory,
 }
 
 type Props = DiagramProps & {
   step: 'one' | 'two',
   children: React.Node,
 }
 
-type Channels = 'single' | 'multi'
+export function getDiagramsSrc(props: DiagramProps) {
+  const { channels, displayCategory, direction, mount, diagram } = props
+  const channelsKey = channels === 8 ? 'multi' : 'single'
 
-// TODO(mc, 2018-04-06): there must be a better way...
-//   this object is way nicer than a giant if/else ladder though
-const DIAGRAMS: {
-  [Direction]: { [Mount]: { [Channels]: { [Diagram]: string } } },
-} = {
-  attach: {
-    left: {
-      single: {
-        screws: require('./images/[email protected]'),
-        tab: require('./images/[email protected]'),
-      },
-      multi: {
-        screws: require('./images/[email protected]'),
-        tab: require('./images/[email protected]'),
-      },
-    },
-    right: {
-      single: {
-        screws: require('./images/[email protected]'),
-        tab: require('./images/[email protected]'),
-      },
-      multi: {
-        screws: require('./images/[email protected]'),
-        tab: require('./images/[email protected]'),
-      },
-    },
-  },
-  detach: {
-    left: {
-      single: {
-        screws: require('./images/[email protected]'),
-        tab: require('./images/[email protected]'),
-      },
-      multi: {
-        screws: require('./images/[email protected]'),
-        tab: require('./images/[email protected]'),
-      },
-    },
-    right: {
-      single: {
-        screws: require('./images/[email protected]'),
-        tab: require('./images/[email protected]'),
-      },
-      multi: {
-        screws: require('./images/[email protected]'),
-        tab: require('./images/[email protected]'),
-      },
-    },
-  },
+  switch (displayCategory) {
+    case 'GEN2':
+      return require(`./images/${direction}-${mount}-${channelsKey}-GEN2-${diagram}@3x.png`)
+    case 'OG':
+    default:
+      return require(`./images/${direction}-${mount}-${channelsKey}-${diagram}@3x.png`)
+  }
 }
 
 export default function InstructionStep(props: Props) {
-  const { diagram } = props
-  const diagramSrc = getDiagramSrc(props)
-
   return (
     <fieldset className={styles.step}>
       <legend className={styles.step_legend}>Step {props.step}</legend>
       <div>{props.children}</div>
-      {diagram === 'screws' && (
+      {props.diagram === 'screws' && (
         <img src={screwdriverSrc} className={styles.screwdriver} />
       )}
-      <img src={diagramSrc} className={styles.diagram} />
+      <img src={getDiagramsSrc(props)} className={styles.diagram} />
     </fieldset>
   )
 }
-
-export function getDiagramSrc(props: DiagramProps): string {
-  const { direction, mount, channels, diagram } = props
-  const channelsKey = channels === 8 ? 'multi' : 'single'
-
-  return DIAGRAMS[direction][mount][channelsKey][diagram]
-}

app/src/components/ChangePipette/Instructions.js

@@ -74,7 +74,8 @@ export default function Instructions(props: ChangePipetteProps) {
 }
 
 function Steps(props: ChangePipetteProps) {
-  const { direction } = props
+  const { direction, displayCategory } = props
+
   const channels = props.actualPipette
     ? props.actualPipette.channels
     : props.wantedPipette?.channels || 1
@@ -110,11 +111,18 @@ function Steps(props: ChangePipetteProps) {
         step="one"
         diagram="screws"
         channels={channels}
+        displayCategory={displayCategory}
         {...props}
       >
         {stepOne}
       </InstructionStep>
-      <InstructionStep step="two" diagram="tab" channels={channels} {...props}>
+      <InstructionStep
+        step="two"
+        diagram="tab"
+        channels={channels}
+        displayCategory={displayCategory}
+        {...props}
+      >
         {stepTwo}
       </InstructionStep>
     </div>

app/src/components/ChangePipette/index.js

@@ -6,6 +6,7 @@ import { Switch, Route, withRouter, type Match } from 'react-router'
 import {
   getPipetteNameSpecs,
   getPipetteModelSpecs,
+  type PipetteDisplayCategory,
 } from '@opentrons/shared-data'
 import { getConfig } from '../../config'
 
@@ -63,6 +64,7 @@ type SP = {|
   homeRequest: RobotHome,
   actualPipette: ?PipetteModelSpecs,
   displayName: string,
+  displayCategory: ?PipetteDisplayCategory,
   direction: Direction,
   success: boolean,
   attachedWrong: boolean,
@@ -137,12 +139,16 @@ function makeMapStateToProps(): (State, OP) => SP {
     const displayName =
       actualPipette?.displayName || wantedPipette?.displayName || ''
 
+    const displayCategory =
+      actualPipette?.displayCategory || wantedPipette?.displayCategory
+
     return {
       actualPipette,
       direction,
       success,
       attachedWrong,
       displayName,
+      displayCategory,
       moveRequest: getRobotMove(state, robot),
       homeRequest: getRobotHome(state, robot),
       __pipettePlusEnabled: Boolean(

app/src/components/ChangePipette/styles.css

@@ -1,12 +1,11 @@
 @import '@opentrons/components';
 
 :root {
-
   --bg-modal-transparent: {
     max-width: 30rem;
     padding-top: 3rem;
     background-color: transparent;
-  };
+  }
 }
 
 .modal {
@@ -143,3 +142,8 @@
   padding-left: 2.5rem;
   padding-right: 2.5rem;
 }
+
+.flipped_image {
+  transform: scaleX(-1);
+  filter: FlipH;
+}

app/src/components/ChangePipette/types.js

@@ -2,6 +2,7 @@
 import type {
   PipetteNameSpecs,
   PipetteModelSpecs,
+  PipetteDisplayCategory,
 } from '@opentrons/shared-data'
 
 import type { Mount } from '../../robot'
@@ -18,6 +19,7 @@ export type ChangePipetteProps = {
   wantedPipette: ?PipetteNameSpecs,
   actualPipette: ?PipetteModelSpecs,
   displayName: string,
+  displayCategory: PipetteDisplayCategory,
   direction: Direction,
   success: boolean,
   attachedWrong: boolean,

app/src/components/InstrumentSettings/InstrumentInfo.js

@@ -29,7 +29,7 @@ const LABEL_BY_MOUNT = {
 export default function PipetteInfo(props: Props) {
   const { mount, model, robotName, onChangeClick, showSettings } = props
   const label = LABEL_BY_MOUNT[mount]
-  const pipette = model && getPipetteModelSpecs(model)
+  const pipette = model ? getPipetteModelSpecs(model) : null
 
   const { displayName, channels } = pipette || {}
 
@@ -63,7 +63,8 @@ export default function PipetteInfo(props: Props) {
       <div className={styles.image}>
         {channels && (
           <InstrumentDiagram
-            channels={channels}
+            pipetteSpecs={pipette}
+            mount={mount}
             className={styles.pipette_diagram}
           />
         )}

app/src/components/calibrate-pipettes/Pipettes.js

@@ -50,7 +50,7 @@ export default function Pipettes(props: Props) {
           description: pipetteConfig.displayName,
           tiprackModel:
             tiprack?.definition?.metadata.displayName || tiprack?.name || 'N/A',
-          channels: pipetteConfig.channels,
+          pipetteSpecs: pipetteConfig,
         }
 
     let showAlert = false

components/src/__tests__/__snapshots__/instrument-diagram.test.js.snap

@@ -1,8 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`InstrumentDiagram Multi-channel GEN2 renders correctly 1`] = `
+<div>
+  <img
+    className=""
+    src="pipetteMulti.png"
+  />
+</div>
+`;
+
 exports[`InstrumentDiagram Multi-channel renders correctly 1`] = `
 <div>
   <img
+    className=""
+    src="pipetteMulti.png"
+  />
+</div>
+`;
+
+exports[`InstrumentDiagram Single-channel GEN2 renders correctly 1`] = `
+<div>
+  <img
+    className=""
     src="pipetteMulti.png"
   />
 </div>
@@ -11,7 +30,8 @@ exports[`InstrumentDiagram Multi-channel renders correctly 1`] = `
 exports[`InstrumentDiagram Single-channel renders correctly 1`] = `
 <div>
   <img
-    src="pipetteSingle.png"
+    className=""
+    src="pipetteMulti.png"
   />
 </div>
 `;
@@ -43,6 +63,7 @@ exports[`InstrumentGroup Renders correctly 1`] = `
       className="pipette_icon"
     >
       <img
+        className=""
         src="pipetteMulti.png"
       />
     </div>
@@ -70,6 +91,7 @@ exports[`InstrumentGroup Renders correctly 1`] = `
       className="pipette_icon"
     >
       <img
+        className="flipped_image"
         src="pipetteSingle.png"
       />
     </div>

components/src/__tests__/instrument-diagram.test.js

@@ -5,13 +5,33 @@ import { InstrumentDiagram, InstrumentGroup } from '..'
 
 describe('InstrumentDiagram', () => {
   test('Single-channel renders correctly', () => {
-    const tree = Renderer.create(<InstrumentDiagram channels={1} />).toJSON()
+    const tree = Renderer.create(
+      <InstrumentDiagram channels={1} displayCategory="OG" />
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
   test('Multi-channel renders correctly', () => {
-    const tree = Renderer.create(<InstrumentDiagram channels={8} />).toJSON()
+    const tree = Renderer.create(
+      <InstrumentDiagram channels={8} displayCategory="OG" />
+    ).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('Single-channel GEN2 renders correctly', () => {
+    const tree = Renderer.create(
+      <InstrumentDiagram channels={1} displayCategory="GEN2" />
+    ).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('Multi-channel GEN2 renders correctly', () => {
+    const tree = Renderer.create(
+      <InstrumentDiagram channels={8} displayCategory="GEN2" />
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
@@ -25,14 +45,14 @@ describe('InstrumentGroup', () => {
           mount: 'left',
           description: 'p300 8-Channel',
           tipType: '150',
-          channels: 8,
+          pipetteSpecs: { channels: 8, displayCategory: 'OG' },
           className: 'foo',
         }}
         right={{
           mount: 'right',
           description: 'p10 Single',
           tipType: '10',
-          channels: 1,
+          pipetteSpecs: { channels: 1, displayCategory: 'OG' },
           isDisabled: true,
           className: 'blah',
         }}