refactor(app): clear all sessions for robot when disconnected, disable cal buttons

app/src/components/CalibrationPanels/SaveZPoint.js

@@ -207,6 +207,7 @@ export function SaveZPoint(props: CalibrationPanelProps): React.Node {
             : [VERTICAL_PLANE]
         }
         auxiliaryControl={allowHorizontal ? null : <AllowHorizontalPrompt />}
+        width="100%"
       />
       <Flex
         width="100%"

app/src/components/InstrumentSettings/PipetteInfo.js

@@ -1,20 +1,20 @@
 // @flow
 import * as React from 'react'
 import { useSelector } from 'react-redux'
-import { css } from 'styled-components'
 import { Link } from 'react-router-dom'
 
 import { getLabwareDisplayName } from '@opentrons/shared-data'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
 import {
   LabeledValue,
-  OutlineButton,
   InstrumentDiagram,
   Box,
   Flex,
   Text,
   SecondaryBtn,
+  useHoverTooltip,
+  Tooltip,
   DIRECTION_COLUMN,
   FONT_WEIGHT_SEMIBOLD,
   SPACING_1,
@@ -41,19 +41,23 @@ import {
   INTENT_PIPETTE_OFFSET,
   INTENT_TIP_LENGTH_OUTSIDE_PROTOCOL,
 } from '../CalibrationPanels'
-import type { State } from '../../types'
-
 import {
   getCalibrationForPipette,
   getTipLengthForPipetteAndTiprack,
 } from '../../calibration'
-
-import { InlineCalibrationWarning } from '../InlineCalibrationWarning'
-
-import type { Mount, AttachedPipette } from '../../pipettes/types'
+import { getRobotByName } from '../../discovery'
+import { getIsRunning } from '../../robot/selectors'
 import { findLabwareDefWithCustom } from '../../findLabware'
 import * as CustomLabware from '../../custom-labware'
 import { Portal } from '../portal'
+import { InlineCalibrationWarning } from '../InlineCalibrationWarning'
+import {
+  DISABLED_CONNECT_TO_ROBOT,
+  DISABLED_PROTOCOL_IS_RUNNING,
+} from '../RobotSettings/constants'
+
+import type { State } from '../../types'
+import type { Mount, AttachedPipette } from '../../pipettes/types'
 
 export type PipetteInfoProps = {|
   robotName: string,
@@ -135,6 +139,23 @@ export function PipetteInfo(props: PipetteInfoProps): React.Node {
       : null
   )
 
+  const isRunning = useSelector(getIsRunning)
+  const isConnected = useSelector(
+    (state: State) => getRobotByName(state, robotName)?.connected
+  )
+
+  const [tlcTargetProps, tlcTooltipProps] = useHoverTooltip()
+  const [pocTargetProps, pocTooltipProps] = useHoverTooltip()
+  const [settingsTargetProps, settingsTooltipProps] = useHoverTooltip()
+  const [changePipTargetProps, changePipTooltipProps] = useHoverTooltip()
+
+  let buttonDisabledReason = null
+  if (!isConnected) {
+    buttonDisabledReason = DISABLED_CONNECT_TO_ROBOT
+  } else if (isRunning) {
+    buttonDisabledReason = DISABLED_PROTOCOL_IS_RUNNING
+  }
+
   const [
     startPipetteOffsetCalibration,
     PipetteOffsetCalibrationWizard,
@@ -206,9 +227,7 @@ export function PipetteInfo(props: PipetteInfoProps): React.Node {
       <Flex
         alignItems={ALIGN_FLEX_START}
         justifyContent={JUSTIFY_SPACE_BETWEEN}
-        css={css`
-          max-width: 14rem;
-        `}
+        maxWidth="14rem"
       >
         <Flex
           flexDirection={DIRECTION_COLUMN}
@@ -222,25 +241,38 @@ export function PipetteInfo(props: PipetteInfoProps): React.Node {
           <LabeledValue label={SERIAL_NUMBER} value={serialNumber || 'None'} />
         </Flex>
 
-        <OutlineButton Component={Link} to={changeUrl}>
+        <SecondaryBtn
+          {...changePipTargetProps}
+          as={buttonDisabledReason ? 'button' : Link}
+          to={changeUrl}
+          disabled={buttonDisabledReason}
+        >
           {direction}
-        </OutlineButton>
+        </SecondaryBtn>
       </Flex>
       {settingsUrl !== null && (
-        <SecondaryBtn {...PER_PIPETTE_BTN_STYLE} as={Link} to={settingsUrl}>
+        <SecondaryBtn
+          {...settingsTargetProps}
+          {...PER_PIPETTE_BTN_STYLE}
+          as={buttonDisabledReason ? 'button' : Link}
+          to={settingsUrl}
+          disabled={buttonDisabledReason}
+        >
           settings
         </SecondaryBtn>
       )}
       {serialNumber && (
         <>
           <SecondaryBtn
+            {...pocTargetProps}
             {...PER_PIPETTE_BTN_STYLE}
             title="pipetteOffsetCalButton"
             onClick={
               pipetteOffsetCalibration
                 ? startPipetteOffsetCalibrationDirectly
                 : () => startPipetteOffsetWizard({ keepTipLength: true })
             }
+            disabled={buttonDisabledReason}
           >
             {CALIBRATE_OFFSET}
           </SecondaryBtn>
@@ -302,11 +334,13 @@ export function PipetteInfo(props: PipetteInfoProps): React.Node {
                   )}
                 </Text>
                 <SecondaryBtn
+                  {...tlcTargetProps}
                   {...PER_PIPETTE_BTN_STYLE}
                   title="recalibrateTipButton"
                   onClick={() =>
                     startPipetteOffsetWizard({ keepTipLength: false })
                   }
+                  disabled={buttonDisabledReason}
                 >
                   {RECALIBRATE_TIP}
                 </SecondaryBtn>
@@ -326,6 +360,14 @@ export function PipetteInfo(props: PipetteInfoProps): React.Node {
           </Box>
         </>
       )}
+      {buttonDisabledReason !== null && (
+        <>
+          <Tooltip {...settingsTooltipProps}>{buttonDisabledReason}</Tooltip>
+          <Tooltip {...pocTooltipProps}>{buttonDisabledReason}</Tooltip>
+          <Tooltip {...tlcTooltipProps}>{buttonDisabledReason}</Tooltip>
+          <Tooltip {...changePipTooltipProps}>{buttonDisabledReason}</Tooltip>
+        </>
+      )}
     </Flex>
   )
 

app/src/components/JogControls/index.js

@@ -18,13 +18,15 @@ import {
 } from './constants'
 
 import type { Jog, Plane, StepSize } from './types'
+import type { StyleProps } from '@opentrons/components'
 
 export type { Jog }
 export type JogControlsProps = {|
   jog: Jog,
   planes?: Array<Plane>,
   stepSizes?: Array<StepSize>,
   auxiliaryControl?: React.Node | null,
+  ...StyleProps,
 |}
 
 export { HORIZONTAL_PLANE, VERTICAL_PLANE }
@@ -35,6 +37,7 @@ export function JogControls(props: JogControlsProps): React.Node {
     planes = [HORIZONTAL_PLANE, VERTICAL_PLANE],
     jog,
     auxiliaryControl = null,
+    ...styleProps
   } = props
   const [currentStepSize, setCurrentStepSize] = React.useState<number>(
     stepSizes[0]
@@ -46,6 +49,7 @@ export function JogControls(props: JogControlsProps): React.Node {
       paddingTop={SPACING_4}
       paddingBottom="2.5rem"
       alignSelf={ALIGN_STRETCH}
+      {...styleProps}
     >
       <StepSizeControl
         {...{ currentStepSize, setCurrentStepSize, stepSizes }}

app/src/sessions/__tests__/actions.test.js

@@ -188,6 +188,17 @@ describe('robot session check actions', () => {
         meta: {},
       },
     },
+    {
+      name: 'sessions:CLEAR_ALL_SESSIONS',
+      creator: Actions.clearAllSessions,
+      args: ['robot-name'],
+      expected: {
+        type: 'sessions:CLEAR_ALL_SESSIONS',
+        payload: {
+          robotName: 'robot-name',
+        },
+      },
+    },
   ]
 
   SPECS.forEach(spec => {

app/src/sessions/__tests__/reducer.test.js

@@ -343,6 +343,34 @@ const SPECS: Array<ReducerSpec> = [
       },
     },
   },
+  {
+    name: 'handles sessions:CLEAR_ALL_SESSIONS',
+    action: {
+      type: 'sessions:CLEAR_ALL_SESSIONS',
+      payload: {
+        robotName: 'blithering-idiot',
+      },
+    },
+    state: {
+      'blithering-idiot': {
+        robotSessions: {
+          existing_fake_session_id: {
+            ...Fixtures.mockTipLengthCalibrationSessionAttributes,
+            id: 'existing_fake_session_id',
+          },
+          [Fixtures.mockSessionId]: {
+            ...Fixtures.mockTipLengthCalibrationSessionAttributes,
+            id: Fixtures.mockSessionId,
+          },
+        },
+      },
+    },
+    expected: {
+      'blithering-idiot': {
+        robotSessions: null,
+      },
+    },
+  },
 ]
 
 describe('robotSessionReducer', () => {

app/src/sessions/actions.js

@@ -166,3 +166,10 @@ export const ensureSession = (
   payload: { robotName, sessionType, params },
   meta: {},
 })
+
+export const clearAllSessions = (
+  robotName: string
+): Types.ClearAllSessionsAction => ({
+  type: Constants.CLEAR_ALL_SESSIONS,
+  payload: { robotName },
+})

app/src/sessions/constants.js

@@ -68,3 +68,6 @@ export const SESSION_TYPE_DECK_CALIBRATION: 'deckCalibration' =
   'deckCalibration'
 export const SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION: 'pipetteOffsetCalibration' =
   'pipetteOffsetCalibration'
+
+export const CLEAR_ALL_SESSIONS: 'sessions:CLEAR_ALL_SESSIONS' =
+  'sessions:CLEAR_ALL_SESSIONS'

app/src/sessions/epic/__tests__/clearAllSessionsOnDisconnectEpic.js

@@ -0,0 +1,71 @@
+// @flow
+import { TestScheduler } from 'rxjs/testing'
+
+import * as DiscoverySelectors from '../../../discovery/selectors'
+import * as RobotSelectors from '../../../robot/selectors'
+import { mockRobot } from '../../../robot-api/__fixtures__'
+
+import * as Actions from '../../actions'
+import { sessionsEpic } from '../../epic'
+
+jest.mock('../../../discovery/selectors')
+jest.mock('../../../robot/selectors')
+
+const mockState = { state: true }
+
+const mockGetRobotByName: JestMockFn<[any, string], mixed> =
+  DiscoverySelectors.getRobotByName
+
+const mockGetConnectedRobotName: JestMockFn<[any], ?string> =
+  RobotSelectors.getConnectedRobotName
+
+describe('clearAllSessionsOnDisconnectEpic', () => {
+  let testScheduler
+
+  beforeEach(() => {
+    mockGetRobotByName.mockReturnValue(mockRobot)
+    mockGetConnectedRobotName.mockReturnValue(mockRobot.name)
+
+    testScheduler = new TestScheduler((actual, expected) => {
+      expect(actual).toEqual(expected)
+    })
+  })
+
+  afterEach(() => {
+    jest.resetAllMocks()
+  })
+
+  it('dispatches CLEAR_ALL_SESSIONS on robot:DISCONNECT_RESPONSE', () => {
+    const action = {
+      type: 'robot:DISCONNECT_RESPONSE',
+      payload: {},
+    }
+
+    testScheduler.run(({ hot, cold, expectObservable, flush }) => {
+      const action$ = hot('--a', { a: action })
+      const state$ = hot('a--', { a: mockState })
+      const output$ = sessionsEpic(action$, state$)
+
+      expectObservable(output$).toBe('--a', {
+        a: Actions.clearAllSessions(mockRobot.name),
+      })
+    })
+  })
+
+  it('dispatches CLEAR_ALL_SESSIONS on robot:UNEXPECTED_DISCONNECT', () => {
+    const action = {
+      type: 'robot:UNEXPECTED_DISCONNECT',
+      payload: {},
+    }
+
+    testScheduler.run(({ hot, cold, expectObservable, flush }) => {
+      const action$ = hot('--a', { a: action })
+      const state$ = hot('a--', { a: mockState })
+      const output$ = sessionsEpic(action$, state$)
+
+      expectObservable(output$).toBe('--a', {
+        a: Actions.clearAllSessions(mockRobot.name),
+      })
+    })
+  })
+})

app/src/sessions/epic/clearAllSessionsOnDisconnectEpic.js

@@ -0,0 +1,28 @@
+// @flow
+import { of } from 'rxjs'
+import { filter, switchMap, withLatestFrom } from 'rxjs/operators'
+import { ofType } from 'redux-observable'
+
+import { getConnectedRobotName } from '../../robot/selectors'
+import * as Actions from '../actions'
+
+import type { Epic } from '../../types'
+
+// NOTE: this epic is responsible for clearing out the (only) redux state of the sessions
+// that belong to the connected robot as soon as it is disconnected. This is doing the
+// job of what a reducer would more traditionally do, though sessions and "connected"
+// state live in different branches of the redux store. This provides a bridge between
+// the two branches, that should be removed in favor of reducer logic when the concept of
+// "connecting" to a robot is rethought and collocated with session logic.
+
+export const clearAllSessionsOnDisconnectEpic: Epic = (action$, state$) => {
+  return action$.pipe(
+    ofType('robot:DISCONNECT_RESPONSE', 'robot:UNEXPECTED_DISCONNECT'),
+    withLatestFrom(state$, (_a, s) => getConnectedRobotName(s)),
+    filter(robotName => {
+      console.log(robotName)
+      return robotName != null
+    }),
+    switchMap(robotName => of(Actions.clearAllSessions(robotName)))
+  )
+}

app/src/sessions/epic/index.js

@@ -7,6 +7,7 @@ import { fetchAllSessionsEpic } from './fetchAllSessionsEpic'
 import { fetchAllSessionsOnConnectEpic } from './fetchAllSessionsOnConnectEpic'
 import { createSessionCommandEpic } from './createSessionCommandEpic'
 import { deleteSessionEpic } from './deleteSessionEpic'
+import { clearAllSessionsOnDisconnectEpic } from './clearAllSessionsOnDisconnectEpic'
 
 import type { Epic } from '../../types'
 
@@ -17,5 +18,6 @@ export const sessionsEpic: Epic = combineEpics(
   fetchAllSessionsEpic,
   fetchAllSessionsOnConnectEpic,
   createSessionCommandEpic,
-  deleteSessionEpic
+  deleteSessionEpic,
+  clearAllSessionsOnDisconnectEpic
 )