fix(app): Improve tip probe wizard state and error handling (#3959)

Closes #3948, closes #3944, closes #3943, closes #2008

CONTRIBUTING.md

@@ -377,7 +377,7 @@ make term
 make term host=${some_other_ip_address}
 ```
 
-If  `make term` complains about not having a key, you may need to install a public key on the robot. To do this, create an ssh key and install it:
+If `make term` complains about not having a key, you may need to install a public key on the robot. To do this, create an ssh key and install it:
 
 ```shell
 ssh-keygen # note the path you save the key to

app/src/components/ClearDeckAlertModal/index.js

@@ -4,17 +4,20 @@ import { Link } from 'react-router-dom'
 
 import { AlertModal } from '@opentrons/components'
 import { Portal } from '../portal'
+import removeTrashSrc from './img/[email protected]'
 import styles from './styles.css'
 
-type Props = {
+type Props = {|
   onContinueClick?: () => mixed,
   onCancelClick?: () => mixed,
-  parentUrl: string,
+  parentUrl?: string,
   cancelText: string,
   continueText: string,
+  removeTrash?: boolean,
   children?: React.Node,
-}
-const HEADING = 'Before continuing, remove from deck:'
+|}
+
+const HEADING = 'Before continuing, please remove:'
 
 export default function ClearDeckAlertModal(props: Props) {
   const {
@@ -23,6 +26,7 @@ export default function ClearDeckAlertModal(props: Props) {
     parentUrl,
     cancelText,
     continueText,
+    removeTrash = false,
   } = props
 
   return (
@@ -32,9 +36,8 @@ export default function ClearDeckAlertModal(props: Props) {
         buttons={[
           {
             children: `${cancelText}`,
-            Component: Link,
-            to: parentUrl,
             onClick: onCancelClick,
+            ...(parentUrl != null ? { Component: Link, to: parentUrl } : {}),
           },
           {
             children: `${continueText}`,
@@ -44,11 +47,17 @@ export default function ClearDeckAlertModal(props: Props) {
         ]}
         alertOverlay
       >
-        <ul className={styles.alert_list}>
-          <li>All tipracks</li>
-          <li>All labware</li>
-        </ul>
-        {props.children && (
+        <div className={styles.alert_instructions}>
+          <ul className={styles.alert_list}>
+            <li>All labware from the deck</li>
+            <li>All tips from pipettes</li>
+            {removeTrash && <li>The removable trash bin</li>}
+          </ul>
+          {removeTrash && (
+            <img className={styles.alert_diagram} src={removeTrashSrc} />
+          )}
+        </div>
+        {props.children != null && (
           <div>
             <p className={styles.alert_note_heading}>Note:</p>
             {props.children}

app/src/components/ClearDeckAlertModal/styles.css

@@ -1,8 +1,15 @@
 @import '@opentrons/components';
 
+.alert_instructions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
 .alert_list {
+  padding-left: 1rem;
+  padding-right: 4rem;
   list-style-type: none;
-  padding-left: 3rem;
 
   & > li {
     line-height: 2;
@@ -15,6 +22,10 @@
   }
 }
 
+.alert_diagram {
+  max-height: 10rem;
+}
+
 .alert_note_heading {
   @apply --font-body-2-dark;
 

app/src/components/TipProbe/AttachTipPanel.js

@@ -1,6 +1,8 @@
 // @flow
 import * as React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import cx from 'classnames'
+
 import CalibrationInfoContent from '../CalibrationInfoContent'
 import { PrimaryButton } from '@opentrons/components'
 
@@ -10,6 +12,7 @@ import {
 } from '../../robot'
 import attachSingle from '../../img/attach_tip_single.png'
 import attachMulti from '../../img/attach_tip_multi.png'
+import styles from './tip-probe.css'
 
 import type { Dispatch } from '../../types'
 import type { TipProbeProps } from './types'
@@ -26,6 +29,7 @@ export default function AttachTipPanel(props: Props) {
 
   // $FlowFixMe: robotActions.probeTip is not typed
   const handleTipProbe = () => dispatch(robotActions.probeTip(mount))
+  const isMulti = channels > 1
 
   const leftChildren = (
     <div>
@@ -39,17 +43,24 @@ export default function AttachTipPanel(props: Props) {
             <br />{' '}
           </>
         )}
-        on pipette before continuing
+        on {isMulti ? 'the back-most channel of' : ''} the pipette before
+        continuing
       </p>
       <PrimaryButton onClick={handleTipProbe}>
         Confirm Tip Attached
       </PrimaryButton>
     </div>
   )
 
-  const imgSrc = channels === 1 ? attachSingle : attachMulti
+  const imgSrc = isMulti ? attachMulti : attachSingle
 
-  const rightChildren = <img src={imgSrc} alt="attach tip" />
+  const rightChildren = (
+    <img
+      src={imgSrc}
+      alt="attach tip"
+      className={cx(styles.pipette_diagram, styles[mount])}
+    />
+  )
 
   return (
     <CalibrationInfoContent

app/src/components/TipProbe/UnprobedPanel.js

@@ -1,35 +1,37 @@
 // @flow
 import * as React from 'react'
-import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
+import { useDispatch, useSelector } from 'react-redux'
 
-import CalibrationInfoContent from '../CalibrationInfoContent'
 import { PrimaryButton } from '@opentrons/components'
+import ClearDeckAlertModal from '../ClearDeckAlertModal'
+import CalibrationInfoContent from '../CalibrationInfoContent'
 
-import {
-  actions as robotActions,
-  selectors as robotSelectors,
-} from '../../robot'
-
-import type { State, Dispatch } from '../../types'
-import type { TipProbeProps } from './types'
-
-type OP = TipProbeProps
+import { actions as robotActions } from '../../robot'
 
-type SP = {| _showContinueModal: boolean |}
+import { getDeckPopulated } from '../../robot/selectors'
 
-type DP = {| dispatch: Dispatch |}
+import type { Dispatch } from '../../types'
+import type { TipProbeProps } from './types'
 
-type Props = {| ...OP, onPrepareClick: () => void |}
+export default function UnprobedPanel(props: TipProbeProps) {
+  const { mount, probed } = props
+  const [showClearDeck, setShowClearDeck] = React.useState(false)
+  const dispatch = useDispatch<Dispatch>()
+  const deckPopulated = useSelector(getDeckPopulated)
 
-export default connect<Props, OP, SP, {||}, State, Dispatch>(
-  mapStateToProps,
-  null,
-  mergeProps
-)(UnprobedPanel)
+  const moveToFront = () => {
+    // $FlowFixMe: robotActions.moveToFront is not typed
+    dispatch(robotActions.moveToFront(mount))
+    setShowClearDeck(false)
+  }
 
-function UnprobedPanel(props: Props) {
-  const { probed, onPrepareClick } = props
+  const handleStart = () => {
+    if (deckPopulated === true || deckPopulated === null) {
+      setShowClearDeck(true)
+    } else {
+      moveToFront()
+    }
+  }
 
   const message = !probed
     ? 'Pipette tip is not calibrated'
@@ -40,37 +42,22 @@ function UnprobedPanel(props: Props) {
   const leftChildren = (
     <div>
       <p>{message}</p>
-      <PrimaryButton onClick={onPrepareClick}>{buttonText}</PrimaryButton>
+      <PrimaryButton onClick={handleStart}>{buttonText}</PrimaryButton>
     </div>
   )
 
-  return <CalibrationInfoContent leftChildren={leftChildren} />
-}
-
-function mapStateToProps(state, ownProps: OP): SP {
-  const deckPopulated = robotSelectors.getDeckPopulated(state)
-
-  return {
-    _showContinueModal: deckPopulated === true || deckPopulated === null,
-  }
-}
-
-function mergeProps(stateProps: SP, dispatchProps: DP, ownProps: OP): Props {
-  const { _showContinueModal } = stateProps
-  const { dispatch } = dispatchProps
-  const { mount, confirmTipProbeUrl } = ownProps
-
-  const onPrepareClick = _showContinueModal
-    ? () => {
-        dispatch(push(confirmTipProbeUrl))
-      }
-    : () => {
-        // $FlowFixMe: robotActions.moveToFront is not typed
-        dispatch(robotActions.moveToFront(mount))
-      }
-
-  return {
-    ...ownProps,
-    onPrepareClick,
-  }
+  return (
+    <>
+      <CalibrationInfoContent leftChildren={leftChildren} />
+      {showClearDeck && (
+        <ClearDeckAlertModal
+          continueText={'Move pipette to front'}
+          cancelText={'Cancel'}
+          onContinueClick={moveToFront}
+          onCancelClick={() => setShowClearDeck(false)}
+          removeTrash
+        />
+      )}
+    </>
+  )
 }