fix(app): make cal commands chain instead of race

app/src/components/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.js

@@ -6,7 +6,6 @@ import { act } from 'react-dom/test-utils'
 
 import { getDeckDefinitions } from '@opentrons/components/src/deck/getDeckDefinitions'
 
-import { getRequestById } from '../../../robot-api'
 import * as Sessions from '../../../sessions'
 import { mockPipetteOffsetCalibrationSessionAttributes } from '../../../sessions/__fixtures__'
 
@@ -21,7 +20,6 @@ import {
   CompleteConfirmation,
 } from '../../CalibrationPanels'
 
-import type { State } from '../../../types'
 import type { PipetteOffsetCalibrationStep } from '../../../sessions/types'
 
 jest.mock('@opentrons/components/src/deck/getDeckDefinitions')
@@ -40,11 +38,6 @@ const mockGetDeckDefinitions: JestMockFn<
   $Call<typeof getDeckDefinitions, any>
 > = getDeckDefinitions
 
-const mockGetRequestById: JestMockFn<
-  [State, string],
-  $Call<typeof getRequestById, State, string>
-> = getRequestById
-
 describe('CalibratePipetteOffset', () => {
   let mockStore
   let render
@@ -93,12 +86,15 @@ describe('CalibratePipetteOffset', () => {
       ...mockPipetteOffsetCalibrationSessionAttributes,
     }
 
-    render = () => {
+    render = (props = {}) => {
+      const { showSpinner = false } = props
       return mount(
         <CalibratePipetteOffset
           robotName="robot-name"
           session={mockPipOffsetCalSession}
-          closeWizard={() => {}}
+          closeWizard={jest.fn()}
+          dispatchRequests={jest.fn()}
+          showSpinner={showSpinner}
         />,
         {
           wrappingComponent: Provider,
@@ -142,12 +138,13 @@ describe('CalibratePipetteOffset', () => {
     expect(wrapper.find('ConfirmExitModal').exists()).toBe(true)
   })
 
-  it('renders spinner when last tracked request is pending, and not present otherwise', () => {
-    const wrapper = render()
+  it('does not render spinner when showSpinner is false', () => {
+    const wrapper = render({ showSpinner: false })
     expect(wrapper.find('SpinnerModalPage').exists()).toBe(false)
+  })
 
-    mockGetRequestById.mockReturnValue({ status: 'pending' })
-    wrapper.setProps({})
+  it('renders spinner when showSpinner is true', () => {
+    const wrapper = render({ showSpinner: true })
     expect(wrapper.find('SpinnerModalPage').exists()).toBe(true)
   })
 })

app/src/components/CalibratePipetteOffset/index.js

@@ -1,8 +1,6 @@
 // @flow
 // Pipette Offset Calibration Orchestration Component
 import * as React from 'react'
-import { useSelector, useDispatch } from 'react-redux'
-import last from 'lodash/last'
 
 import { getPipetteModelSpecs } from '@opentrons/shared-data'
 import {
@@ -11,15 +9,11 @@ import {
   useConditionalConfirm,
 } from '@opentrons/components'
 
-import type { State } from '../../types'
 import type {
-  SessionCommandString,
-  SessionCommandData,
   DeckCalibrationLabware,
+  SessionCommandParams,
 } from '../../sessions/types'
 import * as Sessions from '../../sessions'
-import { useDispatchApiRequest, getRequestById, PENDING } from '../../robot-api'
-import type { RequestState } from '../../robot-api/types'
 import {
   Introduction,
   DeckSetup,
@@ -64,53 +58,53 @@ const PANEL_STYLE_BY_STEP: {
 export function CalibratePipetteOffset(
   props: CalibratePipetteOffsetParentProps
 ): React.Node {
-  const { session, robotName, closeWizard } = props
+  const {
+    session,
+    robotName,
+    closeWizard,
+    dispatchRequests,
+    showSpinner,
+  } = props
   const { currentStep, instrument, labware } = session?.details || {}
-  const [dispatchRequest, requestIds] = useDispatchApiRequest()
-  const dispatch = useDispatch()
-
-  const requestStatus = useSelector<State, RequestState | null>(state =>
-    getRequestById(state, last(requestIds))
-  )?.status
-
-  function sendCommand(
-    command: SessionCommandString,
-    data: SessionCommandData = {},
-    loadingSpinner: boolean = true
-  ) {
-    if (session === null) return
-    const sessionCommand = Sessions.createSessionCommand(
-      robotName,
-      session.id,
-      { command, data }
-    )
-    if (loadingSpinner) {
-      dispatchRequest(sessionCommand)
-    } else {
-      dispatch(sessionCommand)
-    }
-  }
-
-  function deleteSession() {
-    session?.id &&
-      dispatchRequest(Sessions.deleteSession(robotName, session.id))
-    closeWizard()
-  }
 
   const {
     showConfirmation: showConfirmExit,
     confirm: confirmExit,
     cancel: cancelExit,
   } = useConditionalConfirm(() => {
-    sendCommand(Sessions.deckCalCommands.EXIT)
-    deleteSession()
+    cleanUpAndExit()
   }, true)
 
   const isMulti = React.useMemo(() => {
     const spec = instrument && getPipetteModelSpecs(instrument.model)
     return spec ? spec.channels > 1 : false
   }, [instrument])
 
+  function sendCommands(...commands: Array<SessionCommandParams>) {
+    if (session?.id) {
+      const sessionCommandActions = commands.map(c =>
+        Sessions.createSessionCommand(robotName, session.id, {
+          command: c.command,
+          data: c.data || {},
+        })
+      )
+      dispatchRequests(...sessionCommandActions)
+    }
+  }
+
+  function cleanUpAndExit() {
+    if (session?.id) {
+      dispatchRequests(
+        Sessions.createSessionCommand(robotName, session.id, {
+          command: Sessions.sharedCalCommands.EXIT,
+          data: {},
+        }),
+        Sessions.deleteSession(robotName, session.id)
+      )
+    }
+    closeWizard()
+  }
+
   const tipRack: DeckCalibrationLabware | null =
     (labware && labware.find(l => l.isTiprack)) ?? null
 
@@ -123,7 +117,7 @@ export function CalibratePipetteOffset(
     back: { onClick: confirmExit, title: EXIT, children: EXIT },
   }
 
-  if (requestStatus === PENDING) {
+  if (showSpinner) {
     return <SpinnerModalPage titleBar={titleBarProps} />
   }
 
@@ -135,8 +129,8 @@ export function CalibratePipetteOffset(
         contentsClassName={PANEL_STYLE_BY_STEP[currentStep]}
       >
         <Panel
-          sendSessionCommand={sendCommand}
-          deleteSession={deleteSession}
+          sendCommands={sendCommands}
+          cleanUpAndExit={cleanUpAndExit}
           tipRack={tipRack}
           isMulti={isMulti}
           mount={instrument?.mount.toLowerCase()}

app/src/components/CalibratePipetteOffset/types.js

@@ -1,7 +1,7 @@
 // @flow
+import type { Action } from '../../types'
 import type {
-  SessionCommandString,
-  SessionCommandData,
+  SessionCommandParams,
   PipetteOffsetCalibrationSession,
 } from '../../sessions/types'
 
@@ -14,14 +14,14 @@ export type CalibratePipetteOffsetParentProps = {|
   robotName: string,
   session: PipetteOffsetCalibrationSession | null,
   closeWizard: () => void,
+  dispatchRequests: (
+    ...Array<{ ...Action, meta: { requestId: string } }>
+  ) => void,
+  showSpinner: boolean,
 |}
 
 export type CalibratePipetteOffsetChildProps = {|
-  sendSessionCommand: (
-    command: SessionCommandString,
-    data?: SessionCommandData,
-    loadingSpinner?: boolean
-  ) => void,
+  sendSessionCommands: (...Array<SessionCommandParams>) => void,
   deleteSession: () => void,
   tipRack: PipetteOffsetCalibrationLabware,
   isMulti: boolean,

app/src/components/CalibrationPanels/CompleteConfirmation.js

@@ -31,14 +31,8 @@ export function CompleteConfirmation(props: CalibrationPanelProps): React.Node {
   const { sessionType } = props
   const { headerText } = contentsBySessionType[sessionType]
 
-  // TODO: BC 2020-09-04 avoid potential race condition by having an epic send the delete
-  // session command upon a successful exit response
   const exitSession = () => {
-    props.sendSessionCommand(Sessions.sharedCalCommands.EXIT)
-    // TODO: IMMEDIATELY use actualy epic for managing chained dependent commands
-    setTimeout(() => {
-      props.deleteSession()
-    }, 300)
+    props.cleanUpAndExit()
   }
   return (
     <Flex

app/src/components/CalibrationPanels/DeckSetup.js

@@ -31,10 +31,10 @@ const DECK_SETUP_BUTTON_TEXT = 'Confirm placement and continue'
 export function DeckSetup(props: CalibrationPanelProps): React.Node {
   const deckDef = React.useMemo(() => getDeckDefinitions()['ot2_standard'], [])
 
-  const { tipRack, sendSessionCommand } = props
+  const { tipRack, sendCommands } = props
 
   const proceed = () => {
-    sendSessionCommand(Sessions.sharedCalCommands.MOVE_TO_TIP_RACK)
+    sendCommands({ command: Sessions.sharedCalCommands.MOVE_TO_TIP_RACK })
   }
 
   return (

app/src/components/CalibrationPanels/Introduction.js

@@ -78,11 +78,11 @@ const contentsBySessionType: {
 }
 
 export function Introduction(props: CalibrationPanelProps): React.Node {
-  const { tipRack, sendSessionCommand, sessionType } = props
+  const { tipRack, sendCommands, sessionType } = props
 
   const { showConfirmation, confirm: proceed, cancel } = useConditionalConfirm(
     () => {
-      sendSessionCommand(Sessions.sharedCalCommands.LOAD_LABWARE)
+      sendCommands({ command: Sessions.sharedCalCommands.LOAD_LABWARE })
     },
     true
   )

app/src/components/CalibrationPanels/SaveXYPoint.js

@@ -121,7 +121,7 @@ const contentsBySessionTypeByCurrentStep: {
 }
 
 export function SaveXYPoint(props: CalibrationPanelProps): React.Node {
-  const { isMulti, mount, sendSessionCommand, currentStep, sessionType } = props
+  const { isMulti, mount, sendCommands, currentStep, sessionType } = props
 
   const {
     slotNumber,
@@ -136,21 +136,21 @@ export function SaveXYPoint(props: CalibrationPanelProps): React.Node {
   )
 
   const jog = (axis: JogAxis, dir: JogDirection, step: JogStep) => {
-    sendSessionCommand(
-      Sessions.deckCalCommands.JOG,
-      {
+    sendCommands({
+      command: Sessions.sharedCalCommands.JOG,
+      data: {
         vector: formatJogVector(axis, dir, step),
       },
-      false
-    )
+    })
   }
 
   const savePoint = () => {
-    sendSessionCommand(Sessions.sharedCalCommands.SAVE_OFFSET)
-    // TODO: IMMEDIATELY use actualy epic for managing chained dependent commands
-    setTimeout(() => {
-      moveCommandString && sendSessionCommand(moveCommandString)
-    }, 300)
+    let commands = [{ command: Sessions.sharedCalCommands.SAVE_OFFSET }]
+
+    if (moveCommandString) {
+      commands = [...commands, { command: moveCommandString }]
+    }
+    sendCommands(...commands)
   }
 
   return (

app/src/components/CalibrationPanels/SaveZPoint.js

@@ -69,7 +69,7 @@ const contentsBySessionType: {
 }
 
 export function SaveZPoint(props: CalibrationPanelProps): React.Node {
-  const { isMulti, mount, sendSessionCommand, sessionType } = props
+  const { isMulti, mount, sendCommands, sessionType } = props
 
   const { headerText, buttonText } = contentsBySessionType[sessionType]
 
@@ -79,21 +79,19 @@ export function SaveZPoint(props: CalibrationPanelProps): React.Node {
   )
 
   const jog = (axis: JogAxis, dir: JogDirection, step: JogStep) => {
-    sendSessionCommand(
-      Sessions.deckCalCommands.JOG,
-      {
+    sendCommands({
+      command: Sessions.sharedCalCommands.JOG,
+      data: {
         vector: formatJogVector(axis, dir, step),
       },
-      false
-    )
+    })
   }
 
   const savePoint = () => {
-    sendSessionCommand(Sessions.sharedCalCommands.SAVE_OFFSET)
-    // TODO: IMMEDIATELY use actualy epic for managing chained dependent commands
-    setTimeout(() => {
-      sendSessionCommand(Sessions.sharedCalCommands.MOVE_TO_POINT_ONE)
-    }, 300)
+    sendCommands(
+      { command: Sessions.sharedCalCommands.SAVE_OFFSET },
+      { command: Sessions.sharedCalCommands.MOVE_TO_POINT_ONE }
+    )
   }
 
   return (

app/src/components/CalibrationPanels/TipConfirmation.js

@@ -18,13 +18,13 @@ const CONFIRM_TIP_YES_BUTTON_TEXT = 'Yes, move to slot 5'
 const CONFIRM_TIP_NO_BUTTON_TEXT = 'No, try again'
 
 export function TipConfirmation(props: CalibrationPanelProps): React.Node {
-  const { sendSessionCommand } = props
+  const { sendCommands } = props
 
   const invalidateTip = () => {
-    sendSessionCommand(Sessions.sharedCalCommands.INVALIDATE_TIP)
+    sendCommands({ command: Sessions.sharedCalCommands.INVALIDATE_TIP })
   }
   const confirmTip = () => {
-    sendSessionCommand(Sessions.sharedCalCommands.MOVE_TO_DECK)
+    sendCommands({ command: Sessions.sharedCalCommands.MOVE_TO_DECK })
   }
 
   return (

app/src/components/CalibrationPanels/TipPickUp.js

@@ -50,7 +50,7 @@ const ASSET_MAP = {
   single: singleDemoAsset,
 }
 export function TipPickUp(props: CalibrationPanelProps): React.Node {
-  const { sendSessionCommand, tipRack, isMulti } = props
+  const { sendCommands, tipRack, isMulti } = props
 
   const tipRackDef = React.useMemo(
     () => getLatestLabwareDef(tipRack?.loadName),
@@ -70,17 +70,16 @@ export function TipPickUp(props: CalibrationPanelProps): React.Node {
   )
 
   const pickUpTip = () => {
-    sendSessionCommand(Sessions.sharedCalCommands.PICK_UP_TIP)
+    sendCommands({ command: Sessions.sharedCalCommands.PICK_UP_TIP })
   }
 
   const jog = (axis: JogAxis, dir: JogDirection, step: JogStep) => {
-    sendSessionCommand(
-      Sessions.sharedCalCommands.JOG,
-      {
+    sendCommands({
+      command: Sessions.sharedCalCommands.JOG,
+      data: {
         vector: formatJogVector(axis, dir, step),
       },
-      false
-    )
+    })
   }
 
   return (