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

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

CONTRIBUTING.md

@@ -337,7 +337,6 @@ Not every JavaScript package has an available flow-typed definition. In this cas
 
 #### Python
 
-
 ### Opentrons API
 
 Be sure to check out the [API `README`][api-readme] for additional instructions. To run the Opentrons API in development mode:
@@ -378,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
@@ -400,17 +399,17 @@ If you create the key as `~/.ssh/robot_key` and `~/.ssh/robot_key.pub` then `mak
 Our release process is still a work-in-progress. The app and API projects are currently versioned together to ensure interoperability.
 
 1. Ensure you have a buildroot release created in github with all the changes you want in this release
-2.  `git checkout -b release_${version}` (The branch name _must_ match `release_*` to trigger signed builds that can be used as RCs). `git push --set-upstream origin release_${version}` to push the branch (without any changes).
-3.  Open a PR into `master` for your branch.
-4.  `make bump` to create an alpha version (see below)
-5.  Inspect version bumps and changelogs
-6.  Edit the user-facing changelog at `app-shell/build/release-notes.md` to add the new notes for the app
-7.  Edit the user-facing changelog at `api/release-notes.md` to add the new notes for the robot software
-8.  `git add --all`
-9.  `git cz`
-    - Type: `chore`
-    - Scope: `release`
-    - Message: `${version}`
+2. `git checkout -b release_${version}` (The branch name _must_ match `release_*` to trigger signed builds that can be used as RCs). `git push --set-upstream origin release_${version}` to push the branch (without any changes).
+3. Open a PR into `master` for your branch.
+4. `make bump` to create an alpha version (see below)
+5. Inspect version bumps and changelogs
+6. Edit the user-facing changelog at `app-shell/build/release-notes.md` to add the new notes for the app
+7. Edit the user-facing changelog at `api/release-notes.md` to add the new notes for the robot software
+8. `git add --all`
+9. `git cz`
+   - Type: `chore`
+   - Scope: `release`
+   - Message: `${version}`
 10. Gather reviews on changelogs and release notes until everybody is satisfied
 11. Tag the release branch as an alpha version; this is a release candidate that will undergo qa: `git tag -a v${version} -m 'chore(release): ${version}''` and `git push origin v${version}`
 12. Run QA on this release. If issues are found, create prs targeted on the release branch. To create new alpha releases, repeat steps 4-11.
@@ -422,12 +421,12 @@ Our release process is still a work-in-progress. The app and API projects are cu
 ### Releasing Robot Software Stack Hotfixes
 
 1. Ensure you have a buildroot release created in github with all the changes you want to see
-2. Create and push a branch called `release_${version}`. 
+2. Create and push a branch called `release_${version}`.
 3. Target the hotfix PRs on this branch.
 4. On the release branch, once the fixes have been merged, `make bump` to create an appropriate alpha version (see below)
 5. Inspect version bumps and changelogs
-6.  Edit the user-facing changelog at `app-shell/build/release-notes.md` to add the new notes for the app
-7.  Edit the user-facing changelog at `api/release-notes.md` to add the new notes for the robot software
+6. Edit the user-facing changelog at `app-shell/build/release-notes.md` to add the new notes for the app
+7. Edit the user-facing changelog at `api/release-notes.md` to add the new notes for the robot software
 8. `git add --all`
 9. `git cz`
    - Type: `chore`
@@ -441,7 +440,6 @@ Our release process is still a work-in-progress. The app and API projects are cu
 15. Do a NORMAL MERGE into `master`. Do NOT squash or rebase. This should be done from your local command line: `git checkout master`, `git merge release_${version}`, `git push origin master`. This will succeed as long as the release PR is reviewed and status checks have passed.
 16. Open a pr of `master` into `edge`. Give the PR a name like `chore(release): Merge changes from ${version} into edge`. Once it passes, on the command line merge it into `edge`: `git checkout edge`, `git pull`, `git merge master`. Use the pr title for the merge commit title. You can then `git push origin edge`, which will succeed as long as the pr is approved and status checks pass.
 
-
 #### `make bump` usage
 
 `make bump` runs `lerna version` (with git tag and push disabled) to bump all required files. You can pass options to lerna with the `version` environment variable. See the [lerna version docs][lerna-version] for available options. The most important options are:
@@ -498,7 +496,6 @@ The following web projects are versioned and released independently from the app
 
 See [scripts/deploy/README.md](./scripts/deploy/README.md) for the release process of these projects.
 
-
 ## Robot Environment
 
 When you have sshd in to a robot using `make term`, its behavior depends on whether it is on balena or on buildroot. You can tell by doing `ps | head -n 2`; if pid 1 is `systemd`, you're on buildroot and if it is `tini` you're on balena.
@@ -571,4 +568,3 @@ This Contributing Guide was influenced by a lot of work done on existing Contrib
 [systemd-journald]: https://www.freedesktop.org/software/systemd/man/systemd-journald.service.html
 [journalctl]: https://www.freedesktop.org/software/systemd/man/journalctl.html
 [systemctl]: https://www.google.com/search?client=firefox-b-1-d&q=systemctl
-

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