Merge branch 'edge' of https://github.com/Opentrons/opentrons into pd…

…-flex-pipette-selection

app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx

@@ -22,11 +22,13 @@ import type { ModalHeaderBaseProps } from '../../../molecules/Modal/OnDeviceDisp
 interface ConfirmCancelRunModalProps {
  runId: string
  setShowConfirmCancelRunModal: (showConfirmCancelRunModal: boolean) => void
+ isActiveRun: boolean
 }
 
 export function ConfirmCancelRunModal({
  runId,
  setShowConfirmCancelRunModal,
+ isActiveRun,
 }: ConfirmCancelRunModalProps): JSX.Element {
  const { t } = useTranslation(['run_details', 'shared'])
  const { stopRun } = useStopRunMutation()
@@ -57,10 +59,15 @@ export function ConfirmCancelRunModal({
  <Modal
  modalSize="medium"
  header={modalHeader}
+ isError={isActiveRun}
  onOutsideClick={() => setShowConfirmCancelRunModal(false)}
  >
  <Flex flexDirection={DIRECTION_COLUMN}>
- <Flex flexDirection={DIRECTION_COLUMN}>
+ <Flex
+ flexDirection={DIRECTION_COLUMN}
+ padding={SPACING.spacing6}
+ gridGap="0.75rem"
+ >
  <StyledText
  fontSize={TYPOGRAPHY.fontSize22}
  lineHeight={TYPOGRAPHY.lineHeight28}
@@ -77,17 +84,18 @@ export function ConfirmCancelRunModal({
  </StyledText>
  </Flex>
  <Flex
- marginTop={SPACING.spacing6}
  flexDirection={DIRECTION_ROW}
  gridGap={SPACING.spacing3}
  width="100%"
  >
  <SmallButton
+ flex="1"
  buttonType="default"
  buttonText={t('shared:go_back')}
  onClick={() => setShowConfirmCancelRunModal(false)}
  />
  <SmallButton
+ flex="1"
  buttonType="alert"
  buttonText={t('cancel_run')}
  onClick={handleCancelRun}

app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx

@@ -78,7 +78,7 @@ export function RunFailedModal({
  <Modal
  header={modalHeader}
  modalSize="large"
- isError={true}
+ isError
  onOutsideClick={() => setShowRunFailedModal(false)}
  >
  <Flex
@@ -140,6 +140,7 @@ export function RunFailedModal({
  </StyledText>
  <Flex marginTop="1.75rem">
  <SmallButton
+ width="100%"
  buttonType="alert"
  buttonText={i18n.format(t('shared:close'), 'titleCase')}
  onClick={handleClose}

app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/ConfirmCancelRunModal.test.tsx

@@ -3,7 +3,7 @@ import { when, resetAllWhenMocks } from 'jest-when'
 import { MemoryRouter } from 'react-router-dom'
 import { fireEvent } from '@testing-library/react'
 
-import { renderWithProviders } from '@opentrons/components'
+import { renderWithProviders, COLORS } from '@opentrons/components'
 import { useStopRunMutation } from '@opentrons/react-api-client'
 
 import { i18n } from '../../../../i18n'
@@ -58,6 +58,7 @@ describe('ConfirmCancelRunModal', () => {
 
  beforeEach(() => {
  props = {
+ isActiveRun: false,
  runId: RUN_ID,
  setShowConfirmCancelRunModal: mockFn,
  }
@@ -92,6 +93,14 @@ describe('ConfirmCancelRunModal', () => {
  getByText('Cancel run')
  })
 
+ it('should render the modal with red frame', () => {
+ props.isActiveRun = true
+ const [{ getByLabelText }] = render(props)
+ expect(getByLabelText('modal_medium')).toHaveStyle(
+ `backgroundColor: ${COLORS.red_two}`
+ )
+ })
+
  it('when tapping go back, the mock function is called', () => {
  const [{ getByText }] = render(props)
  const button = getByText('Go back')

app/src/pages/OnDeviceDisplay/ProtocolSetup.tsx

@@ -44,7 +44,7 @@ import { ProtocolSetupLiquids } from '../../organisms/ProtocolSetupLiquids'
 import { ProtocolSetupInstruments } from '../../organisms/ProtocolSetupInstruments'
 import { ProtocolSetupLabwarePositionCheck } from '../../organisms/ProtocolSetupLabwarePositionCheck'
 import { getUnmatchedModulesForProtocol } from '../../organisms/ProtocolSetupModules/utils'
-import { ConfirmCancelModal } from '../../organisms/RunDetails/ConfirmCancelModal'
+import { ConfirmCancelRunModal } from '../../organisms/OnDeviceDisplay/RunningProtocol'
 import {
  getAreInstrumentsReady,
  getProtocolUsesGripper,
@@ -376,7 +376,11 @@ function PrepareToRun({
  />
  </Flex>
  {showConfirmCancelModal ? (
- <ConfirmCancelModal onClose={onConfirmCancelClose} runId={runId} />
+ <ConfirmCancelRunModal
+ runId={runId}
+ setShowConfirmCancelRunModal={setShowConfirmCancelModal}
+ isActiveRun={false}
+ />
  ) : null}
  </>
  )

app/src/pages/OnDeviceDisplay/RunningProtocol.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 import { useParams, Link } from 'react-router-dom'
 import styled from 'styled-components'
 
-import { RUN_STATUS_FAILED } from '@opentrons/api-client'
 import {
  Flex,
  DIRECTION_COLUMN,
@@ -21,7 +20,6 @@ import {
  useRunQuery,
  useRunActionMutations,
 } from '@opentrons/react-api-client'
-import { RunTimeCommand } from '@opentrons/shared-data'
 
 import { TertiaryButton } from '../../atoms/buttons'
 import { StepMeter } from '../../atoms/StepMeter'
@@ -35,7 +33,6 @@ import {
  CurrentRunningProtocolCommand,
  RunningProtocolCommandList,
  RunningProtocolSkeleton,
- RunFailedModal,
 } from '../../organisms/OnDeviceDisplay/RunningProtocol'
 import { useTrackProtocolRunEvent } from '../../organisms/Devices/hooks'
 import { ConfirmCancelRunModal } from '../../organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal'
@@ -65,9 +62,6 @@ export function RunningProtocol(): JSX.Element {
  const [currentOption, setCurrentOption] = React.useState<ScreenOption>(
  'CurrentRunningProtocolCommand'
  )
- const [showRunFailedModal, setShowRunFailedModal] = React.useState<boolean>(
- false
- )
  const [
  showConfirmCancelRunModal,
  setShowConfirmCancelRunModal,
@@ -92,11 +86,6 @@ export function RunningProtocol(): JSX.Element {
  const { playRun, pauseRun } = useRunActionMutations(runId)
  const { trackProtocolRunEvent } = useTrackProtocolRunEvent(runId)
 
- const errors = runRecord?.data.errors
- const failedCommand = robotSideAnalysis?.commands.find(
- (c: RunTimeCommand, index: number) => index === currentRunCommandIndex
- )
-
  React.useEffect(() => {
  if (
  currentOption === 'CurrentRunningProtocolCommand' &&
@@ -115,23 +104,8 @@ export function RunningProtocol(): JSX.Element {
  }
  }, [currentOption, swipe, swipe.setSwipeType])
 
- React.useEffect(() => {
- if (runStatus === RUN_STATUS_FAILED) {
- setShowRunFailedModal(true)
- }
- }, [runStatus])
-
  return (
  <>
- {showRunFailedModal ? (
- <RunFailedModal
- runId={runId}
- setShowRunFailedModal={setShowRunFailedModal}
- failedStep={currentRunCommandIndex}
- failedCommand={failedCommand}
- errors={errors}
- />
- ) : null}
  <Flex
  flexDirection={DIRECTION_COLUMN}
  position={POSITION_RELATIVE}
@@ -152,6 +126,7 @@ export function RunningProtocol(): JSX.Element {
  <ConfirmCancelRunModal
  runId={runId}
  setShowConfirmCancelRunModal={setShowConfirmCancelRunModal}
+ isActiveRun={true}
  />
  ) : null}
  <Flex

app/src/pages/OnDeviceDisplay/__tests__/ProtocolSetup.test.tsx

@@ -25,7 +25,7 @@ import { ProtocolSetupLiquids } from '../../../organisms/ProtocolSetupLiquids'
 import { getProtocolModulesInfo } from '../../../organisms/Devices/ProtocolRun/utils/getProtocolModulesInfo'
 import { ProtocolSetupModules } from '../../../organisms/ProtocolSetupModules'
 import { getUnmatchedModulesForProtocol } from '../../../organisms/ProtocolSetupModules/utils'
-import { ConfirmCancelModal } from '../../../organisms/RunDetails/ConfirmCancelModal'
+import { ConfirmCancelRunModal } from '../../../organisms/OnDeviceDisplay/RunningProtocol'
 import {
  useRunControls,
  useRunStatus,
@@ -41,7 +41,7 @@ jest.mock(
 jest.mock('../../../organisms/Devices/ProtocolRun/utils/getProtocolModulesInfo')
 jest.mock('../../../organisms/ProtocolSetupModules')
 jest.mock('../../../organisms/ProtocolSetupModules/utils')
-jest.mock('../../../organisms/RunDetails/ConfirmCancelModal')
+jest.mock('../../../organisms/OnDeviceDisplay/RunningProtocol')
 jest.mock('../../../organisms/RunTimeControl/hooks')
 jest.mock('../../../organisms/ProtocolSetupLiquids')
 jest.mock('@opentrons/react-api-client')
@@ -64,8 +64,8 @@ const mockProtocolSetupModules = ProtocolSetupModules as jest.MockedFunction<
 const mockGetUnmatchedModulesForProtocol = getUnmatchedModulesForProtocol as jest.MockedFunction<
  typeof getUnmatchedModulesForProtocol
 >
-const mockConfirmCancelModal = ConfirmCancelModal as jest.MockedFunction<
- typeof ConfirmCancelModal
+const mockConfirmCancelRunModal = ConfirmCancelRunModal as jest.MockedFunction<
+ typeof ConfirmCancelRunModal
 >
 const mockUseRunControls = useRunControls as jest.MockedFunction<
  typeof useRunControls
@@ -142,7 +142,9 @@ describe('ProtocolSetup', () => {
  mockProtocolSetupLiquids.mockReturnValue(
  <div>Mock ProtocolSetupLiquids</div>
  )
- mockConfirmCancelModal.mockReturnValue(<div>Mock ConfirmCancelModal</div>)
+ mockConfirmCancelRunModal.mockReturnValue(
+ <div>Mock ConfirmCancelRunModal</div>
+ )
  when(mockUseRunControls)
  .calledWith(RUN_ID)
  .mockReturnValue({
@@ -219,9 +221,9 @@ describe('ProtocolSetup', () => {
  const [{ getByRole, getByText, queryByText }] = render(
  `/protocols/${RUN_ID}/setup/`
  )
- expect(queryByText('Mock ConfirmCancelModal')).toBeNull()
+ expect(queryByText('Mock ConfirmCancelRunModal')).toBeNull()
  getByRole('button', { name: 'close' }).click()
- getByText('Mock ConfirmCancelModal')
+ getByText('Mock ConfirmCancelRunModal')
  })
 
  it('should launch protocol setup modules screen when click modules', () => {