feat(app): guide the user through leveling gen2 multis

app/src/components/ChangePipette/Instructions.js

@@ -13,6 +13,7 @@ import type {
   PipetteModelSpecs,
   PipetteDisplayCategory,
 } from '@opentrons/shared-data'
+import { shouldLevel } from '@opentrons/shared-data'
 import type { Mount } from '../../pipettes/types'
 import type { Direction } from './types'
 
@@ -113,11 +114,20 @@ function Steps(props: Props) {
       </div>
     )
   } else {
-    stepOne = (
-      <p>
-        Attach pipette to mount, <strong>starting with screw 1</strong>.
-      </p>
-    )
+    if (wantedPipette && shouldLevel(wantedPipette)) {
+      stepOne = (
+        <p>
+          <em>Loosely</em> attach pipette to carriage,{' '}
+          <strong>starting with screw 1</strong>
+        </p>
+      )
+    } else {
+      stepOne = (
+        <p>
+          Attach pipette to mount, <strong>starting with screw 1</strong>.
+        </p>
+      )
+    }
     stepTwo =
       'Connect the pipette to robot by pushing in the white connector tab.'
   }

app/src/components/ChangePipette/LevelPipette.js

@@ -0,0 +1,100 @@
+// @flow
+
+import * as React from 'react'
+import cx from 'classnames'
+
+import { Icon, ModalPage, PrimaryButton } from '@opentrons/components'
+import styles from './styles.css'
+
+import type {
+  PipetteNameSpecs,
+  PipetteModelSpecs,
+  PipetteDisplayCategory,
+} from '@opentrons/shared-data'
+
+import type { Mount } from '../../pipettes/types'
+
+const EXIT_BUTTON_MESSAGE = 'confirm pipette is leveled'
+
+type Props = {|
+  robotName: string,
+  mount: Mount,
+  title: string,
+  subtitle: string,
+  wantedPipette: PipetteNameSpecs | null,
+  actualPipette: PipetteModelSpecs | null,
+  displayName: string,
+  displayCategory: PipetteDisplayCategory | null,
+  pipetteModelName: string,
+  back: () => mixed,
+  exit: () => mixed,
+|}
+
+function Status(props: { pipetteName: string }) {
+  const iconName = 'check-circle'
+  const iconClass = cx(styles.confirm_icon, {
+    [styles.success]: true,
+    [styles.failure]: false,
+  })
+  const message = `${props.pipetteName} connected`
+  return (
+    <div className={styles.leveling_title}>
+      <Icon name={iconName} className={iconClass} />
+      {message}
+    </div>
+  )
+}
+
+function ExitButton(props: { exit: () => mixed }) {
+  return (
+    <PrimaryButton className={styles.confirm_button} onClick={props.exit}>
+      {EXIT_BUTTON_MESSAGE}
+    </PrimaryButton>
+  )
+}
+
+function LevelingInstruction(props: { pipetteName: string }) {
+  return (
+    <div className={styles.leveling_instruction}>
+      Next, level the {props.pipetteName}
+    </div>
+  )
+}
+
+function LevelingVideo(props: { pipetteName: string, mount: Mount }) {
+  const { pipetteName, mount } = props
+  return (
+    <div className={styles.leveling_video_wrapper}>
+      <video width="100%" autoPlay={true} loop={true} controls={true}>
+        <source src={require(`./videos/${pipetteName}-${mount}.webm`)} />
+      </video>
+    </div>
+  )
+}
+
+export function LevelPipette(props: Props) {
+  const {
+    title,
+    subtitle,
+    pipetteModelName,
+    displayName,
+    mount,
+    back,
+    exit,
+  } = props
+  return (
+    <ModalPage
+      titleBar={{
+        title: title,
+        subtitle: subtitle,
+        back: { onClick: back, disabled: false },
+      }}
+      contentsClassName={styles.leveling_modal}
+    >
+      <Status pipetteName={displayName} />
+      <LevelingInstruction pipetteName={displayName} />
+      <LevelingVideo pipetteName={pipetteModelName} mount={mount} />
+      <ExitButton exit={exit} />
+    </ModalPage>
+  )
+}

app/src/components/ChangePipette/index.js

@@ -2,7 +2,7 @@
 import * as React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import last from 'lodash/last'
-import { getPipetteNameSpecs } from '@opentrons/shared-data'
+import { getPipetteNameSpecs, shouldLevel } from '@opentrons/shared-data'
 
 import { useDispatchApiRequest, getRequestById, PENDING } from '../../robot-api'
 import { getAttachedPipettes } from '../../pipettes'
@@ -21,6 +21,7 @@ import { ExitAlertModal } from './ExitAlertModal'
 import { Instructions } from './Instructions'
 import { ConfirmPipette } from './ConfirmPipette'
 import { RequestInProgressModal } from './RequestInProgressModal'
+import { LevelPipette } from './LevelPipette'
 
 import { ATTACH, DETACH, CLEAR_DECK, INSTRUCTIONS, CONFIRM } from './constants'
 
@@ -143,21 +144,34 @@ export function ChangePipette(props: Props) {
 
     const attachedWrong = Boolean(!success && wantedPipette && actualPipette)
 
-    return (
-      <ConfirmPipette
-        {...{
-          ...basePropsWithPipettes,
-          success,
-          attachedWrong,
-          tryAgain: () => {
-            setWantedName(null)
-            setWizardStep(INSTRUCTIONS)
-          },
-          back: () => setWizardStep(INSTRUCTIONS),
-          exit: homeAndExit,
-        }}
-      />
-    )
+    if (success && wantedPipette && shouldLevel(wantedPipette)) {
+      return (
+        <LevelPipette
+          {...{
+            pipetteModelName: actualPipette ? actualPipette.name : '',
+            ...basePropsWithPipettes,
+            back: () => setWizardStep(INSTRUCTIONS),
+            exit: homeAndExit,
+          }}
+        />
+      )
+    } else {
+      return (
+        <ConfirmPipette
+          {...{
+            ...basePropsWithPipettes,
+            success,
+            attachedWrong,
+            tryAgain: () => {
+              setWantedName(null)
+              setWizardStep(INSTRUCTIONS)
+            },
+            back: () => setWizardStep(INSTRUCTIONS),
+            exit: homeAndExit,
+          }}
+        />
+      )
+    }
   }
 
   // this will never be reached

app/src/components/ChangePipette/styles.css

@@ -27,6 +27,31 @@
   padding: 2rem 1.25rem;
 }
 
+.leveling_title {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 50px;
+  font-weight: var(--fw-semibold);
+}
+
+.leveling_instruction {
+  width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+.leveling_video_wrapper {
+  max-height: 480px;
+  margin-bottom: 50px;
+}
+
+.leveling_modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .confirm_status {
   display: flex;
   align-items: center;

shared-data/js/pipettes.js

@@ -53,3 +53,7 @@ function comparePipettes(sortBy: Array<SortableProps>) {
     return 0
   }
 }
+
+export function shouldLevel(specs: PipetteNameSpecs) {
+  return specs.displayCategory === 'GEN2' && specs.channels === 8
+}

webpack-config/lib/base-config.js

@@ -31,6 +31,7 @@ module.exports = {
       rules.handlebars,
       rules.fonts,
       rules.images,
+      rules.videos,
     ],
   },
 

webpack-config/lib/rules.js

@@ -116,4 +116,17 @@ module.exports = {
       },
     },
   },
+
+  // videos
+  videos: {
+    test: /\.(?:mp4|webm)$/,
+    use: {
+      loader: 'file-loader',
+      options: {
+        name: '[name].[hash].[ext]',
+        outputPath: 'videos',
+        esModule: false,
+      },
+    },
+  },
 }