fix(app): change error text when creation error is run is busy (#11069)

jerader · web-flow · commit b9f2ba4436a2 · 2022-07-11T14:41:04.000-04:00
closes #11060
diff --git a/app/src/assets/localization/en/shared.json b/app/src/assets/localization/en/shared.json
@@ -34,5 +34,6 @@
   "robot_was_seen_but_is_unreachable": "This robot has been seen recently, but is currently not reachable at IP address {{hostname}}",
   "protocol_run_general_error_msg": "Protocol run could not be created on the robot.",
   "proceed_to_setup": "Proceed to setup",
-  "a_software_update_is_available": "A software update is available for this robot. Update to run protocols."
+  "a_software_update_is_available": "A software update is available for this robot. Update to run protocols.",
+  "robot_is_busy_no_protocol_run_allowed": "This robot is busy and can’t run this protocol right now. <robotLink>Go to Robot</robotLink>"
 }
diff --git a/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx b/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx
@@ -109,6 +109,7 @@ describe('ChooseProtocolSlideout', () => {
       createRunFromProtocolSource: mockCreateRunFromProtocol,
       isCreatingRun: false,
       reset: jest.fn(),
+      runCreationErrorCode: 'error code',
     })
     const [{ getByRole, getByText }] = render({
       robot: mockConnectableRobot,
@@ -123,4 +124,29 @@ describe('ChooseProtocolSlideout', () => {
     })
     expect(getByText('run creation error')).toBeInTheDocument()
   })
+
+  it('renders error state when run creation error code is 409', () => {
+    mockUseCreateRunFromProtocol.mockReturnValue({
+      runCreationError: 'Current run is not idle or stopped.',
+      createRunFromProtocolSource: mockCreateRunFromProtocol,
+      isCreatingRun: false,
+      reset: jest.fn(),
+      runCreationErrorCode: '409',
+    })
+    const [{ getByRole, getByText }] = render({
+      robot: mockConnectableRobot,
+      onCloseClick: jest.fn(),
+      showSlideout: true,
+    })
+    const proceedButton = getByRole('button', { name: 'Proceed to setup' })
+    proceedButton.click()
+    expect(mockCreateRunFromProtocol).toHaveBeenCalledWith({
+      files: [expect.any(File)],
+      protocolKey: storedProtocolDataFixture.protocolKey,
+    })
+    getByText('This robot is busy and can’t run this protocol right now.')
+    const link = getByRole('link', { name: 'Go to Robot' })
+    fireEvent.click(link)
+    expect(link.getAttribute('href')).toEqual('/devices/opentrons-robot-name')
+  })
 })
diff --git a/app/src/organisms/ChooseProtocolSlideout/index.tsx b/app/src/organisms/ChooseProtocolSlideout/index.tsx
@@ -2,9 +2,10 @@ import * as React from 'react'
 import path from 'path'
 import first from 'lodash/first'
 import { Trans, useTranslation } from 'react-i18next'
-import { Link, useHistory } from 'react-router-dom'
+import { Link, NavLink, useHistory } from 'react-router-dom'
 import { ApiHostProvider } from '@opentrons/react-api-client'
 import { useSelector } from 'react-redux'
+import { css } from 'styled-components'
 
 import {
   SPACING,
@@ -69,6 +70,7 @@ export function ChooseProtocolSlideout(
     runCreationError,
     isCreatingRun,
     reset: resetCreateRun,
+    runCreationErrorCode,
   } = useCreateRunFromProtocol({
     onSuccess: ({ data: runData }) => {
       history.push(`/devices/${name}/protocol-runs/${runData.id}`)
@@ -172,7 +174,25 @@ export function ChooseProtocolSlideout(
                   marginTop={`-${SPACING.spacing2}`}
                   marginBottom={SPACING.spacing3}
                 >
-                  {runCreationError}
+                  {runCreationErrorCode === '409' ? (
+                    <Trans
+                      t={t}
+                      i18nKey="shared:robot_is_busy_no_protocol_run_allowed"
+                      components={{
+                        robotLink: (
+                          <NavLink
+                            css={css`
+                              color: ${COLORS.errorText};
+                              text-decoration: ${TYPOGRAPHY.textDecorationUnderline};
+                            `}
+                            to={`/devices/${robot.name}`}
+                          />
+                        ),
+                      }}
+                    />
+                  ) : (
+                    runCreationError
+                  )}
                 </StyledText>
               ) : null}
             </Flex>
diff --git a/app/src/organisms/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx b/app/src/organisms/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx
@@ -227,6 +227,7 @@ describe('ChooseRobotSlideout', () => {
       createRunFromProtocolSource: mockCreateRunFromProtocolSource,
       isCreatingRun: false,
       reset: jest.fn(),
+      runCreationErrorCode: 'error code',
     })
     const [{ getByRole, getByText }] = render({
       storedProtocolData: storedProtocolDataFixture,
@@ -241,4 +242,29 @@ describe('ChooseRobotSlideout', () => {
     })
     expect(getByText('run creation error')).toBeInTheDocument()
   })
+
+  it('renders error state when run creation error code is 409', () => {
+    mockUseCreateRunFromProtocol.mockReturnValue({
+      runCreationError: 'Current run is not idle or stopped.',
+      createRunFromProtocolSource: mockCreateRunFromProtocolSource,
+      isCreatingRun: false,
+      reset: jest.fn(),
+      runCreationErrorCode: '409',
+    })
+    const [{ getByRole, getByText }] = render({
+      storedProtocolData: storedProtocolDataFixture,
+      onCloseClick: jest.fn(),
+      showSlideout: true,
+    })
+    const proceedButton = getByRole('button', { name: 'Proceed to setup' })
+    proceedButton.click()
+    expect(mockCreateRunFromProtocolSource).toHaveBeenCalledWith({
+      files: [expect.any(File)],
+      protocolKey: storedProtocolDataFixture.protocolKey,
+    })
+    getByText('This robot is busy and can’t run this protocol right now.')
+    const link = getByRole('link', { name: 'Go to Robot' })
+    fireEvent.click(link)
+    expect(link.getAttribute('href')).toEqual('/devices/opentrons-robot-name')
+  })
 })
diff --git a/app/src/organisms/ChooseRobotSlideout/index.tsx b/app/src/organisms/ChooseRobotSlideout/index.tsx
@@ -4,6 +4,7 @@ import first from 'lodash/first'
 import { useTranslation, Trans } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import { NavLink, useHistory } from 'react-router-dom'
+import { css } from 'styled-components'
 
 import {
   SPACING,
@@ -75,6 +76,7 @@ export function ChooseRobotSlideout(
     runCreationError,
     reset: resetCreateRun,
     isCreatingRun,
+    runCreationErrorCode,
   } = useCreateRunFromProtocol(
     {
       onSuccess: ({ data: runData }) => {
@@ -221,7 +223,25 @@ export function ChooseRobotSlideout(
                     marginTop={`-${SPACING.spacing2}`}
                     marginBottom={SPACING.spacing3}
                   >
-                    {runCreationError}
+                    {runCreationErrorCode === '409' ? (
+                      <Trans
+                        t={t}
+                        i18nKey="shared:robot_is_busy_no_protocol_run_allowed"
+                        components={{
+                          robotLink: (
+                            <NavLink
+                              css={css`
+                                color: ${COLORS.errorText};
+                                text-decoration: ${TYPOGRAPHY.textDecorationUnderline};
+                              `}
+                              to={`/devices/${robot.name}`}
+                            />
+                          ),
+                        }}
+                      />
+                    ) : (
+                      runCreationError
+                    )}
                   </StyledText>
                 )}
               </Flex>
diff --git a/app/src/organisms/ChooseRobotSlideout/useCreateRunFromProtocol.ts b/app/src/organisms/ChooseRobotSlideout/useCreateRunFromProtocol.ts
@@ -24,6 +24,7 @@ export interface UseCreateRun {
   >
   isCreatingRun: boolean
   runCreationError: string | null
+  runCreationErrorCode: string | null
   reset: () => void
 }
 
@@ -84,6 +85,8 @@ export function useCreateRunFromProtocol(
   error != null && console.error(error)
   error = error?.length > 255 ? t('protocol_run_general_error_msg') : error
 
+  const errorCode = protocolError?.code ?? runError?.code ?? null
+
   return {
     createRunFromProtocolSource: (
       { files: srcFiles, protocolKey },
@@ -97,6 +100,7 @@ export function useCreateRunFromProtocol(
     },
     isCreatingRun: isCreatingProtocol || isCreatingRun,
     runCreationError: error,
+    runCreationErrorCode: errorCode,
     reset: () => {
       resetProtocolMutation()
       resetRunMutation()

Original file line number	Diff line number	Diff line change
`@@ -34,5 +34,6 @@`
`34`	`34`	`"robot_was_seen_but_is_unreachable": "This robot has been seen recently, but is currently not reachable at IP address {{hostname}}",`
`35`	`35`	`"protocol_run_general_error_msg": "Protocol run could not be created on the robot.",`
`36`	`36`	`"proceed_to_setup": "Proceed to setup",`
`37`		`- "a_software_update_is_available": "A software update is available for this robot. Update to run protocols."`
	`37`	`+ "a_software_update_is_available": "A software update is available for this robot. Update to run protocols.",`
	`38`	`+ "robot_is_busy_no_protocol_run_allowed": "This robot is busy and can’t run this protocol right now. <robotLink>Go to Robot</robotLink>"`
`38`	`39`	`}`