fix(app): Fix white screen on RobotDashboard when clicking protocol (#…

…13367) * fix(app): fix white screen issue on RobotDashboard Adds loading state when pressing a recently ran protocol. Fixes routing error.
Opentrons · Aug 23, 2023 · 7699771 · 7699771
1 parent a12208e
commit 7699771
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx
@@ -6,11 +6,13 @@ import { formatDistance } from 'date-fns'
 
 import {
   Flex,
+  Icon,
   COLORS,
   SPACING,
   TYPOGRAPHY,
   DIRECTION_COLUMN,
   BORDERS,
+  JUSTIFY_SPACE_BETWEEN,
 } from '@opentrons/components'
 import { useProtocolQuery } from '@opentrons/react-api-client'
 
@@ -74,8 +76,9 @@ export function ProtocolWithLastRun({
   const trackEvent = useTrackEvent()
   const { trackProtocolRunEvent } = useTrackProtocolRunEvent(runData.id)
   const onResetSuccess = (createRunResponse: Run): void =>
-    history.push(`protocols/${createRunResponse.data.id}/setup`)
+    history.push(`runs/${createRunResponse.data.id}/setup`)
   const { cloneRun } = useCloneRun(runData.id, onResetSuccess)
+  const [showSpinner, setShowSpinner] = React.useState<boolean>(false)
 
   const protocolName =
     protocolData.metadata.protocolName ?? protocolData.files[0].name
@@ -92,6 +95,16 @@ export function ProtocolWithLastRun({
     }
   `
 
+  const PROTOCOL_CARD_CLICKED_STYLE = css`
+    flex: 1 0 0;
+    background-color: ${isReadyToBeReRun
+      ? COLORS.green3Pressed
+      : COLORS.yellow3Pressed};
+    &:focus-visible {
+      box-shadow: ${ODD_FOCUS_VISIBLE};
+    }
+  `
+
   const PROTOCOL_TEXT_STYLE = css`
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -102,6 +115,7 @@ export function ProtocolWithLastRun({
   `
 
   const handleCardClick = (): void => {
+    setShowSpinner(true)
     cloneRun()
     trackEvent({
       name: 'proceedToRun',
@@ -134,7 +148,7 @@ export function ProtocolWithLastRun({
   ) : (
     <Flex
       aria-label="RecentRunProtocolCard"
-      css={PROTOCOL_CARD_STYLE}
+      css={!showSpinner ? PROTOCOL_CARD_STYLE : PROTOCOL_CARD_CLICKED_STYLE}
       flexDirection={DIRECTION_COLUMN}
       padding={SPACING.spacing24}
       gridGap={SPACING.spacing24}
@@ -144,13 +158,22 @@ export function ProtocolWithLastRun({
       borderRadius={BORDERS.borderRadiusSize4}
       onClick={handleCardClick}
     >
-      <Flex>
+      <Flex justifyContent={JUSTIFY_SPACE_BETWEEN}>
         <Chip
           paddingLeft="0"
           type={isReadyToBeReRun ? 'success' : 'warning'}
           background={false}
           text={i18n.format(chipText, 'capitalize')}
         />
+        {showSpinner && (
+          <Icon
+            name="ot-spinner"
+            aria-label="icon_ot-spinner"
+            spin={true}
+            size="2.5rem"
+            color={COLORS.darkBlack100}
+          />
+        )}
       </Flex>
       <Flex width="100%" height="14rem">
         <StyledText

diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx
@@ -4,9 +4,9 @@ import { formatDistance } from 'date-fns'
 import { when, resetAllWhenMocks } from 'jest-when'
 import { MemoryRouter } from 'react-router-dom'
 
-import { RUN_STATUS_FAILED } from '@opentrons/api-client'
-import { renderWithProviders } from '@opentrons/components'
 import { useAllRunsQuery, useProtocolQuery } from '@opentrons/react-api-client'
+import { RUN_STATUS_FAILED } from '@opentrons/api-client'
+import { COLORS, renderWithProviders } from '@opentrons/components'
 
 import { i18n } from '../../../../i18n'
 import { Skeleton } from '../../../../atoms/Skeleton'
@@ -191,15 +191,18 @@ describe('RecentRunProtocolCard', () => {
     getByText('Missing hardware')
   })
 
-  it('when tapping a card, mock functions is called', () => {
+  it('when tapping a card, mock functions is called and loading state is activated', () => {
     const [{ getByLabelText }] = render(props)
     const button = getByLabelText('RecentRunProtocolCard')
+    expect(button).toHaveStyle(`background-color: ${COLORS.green3}`)
     fireEvent.click(button)
     expect(mockTrackEvent).toHaveBeenCalledWith({
       name: 'proceedToRun',
       properties: { sourceLocation: 'RecentRunProtocolCard' },
     })
     expect(mockTrackProtocolRunEvent).toBeCalledWith({ name: 'runAgain' })
+    getByLabelText('icon_ot-spinner')
+    expect(button).toHaveStyle(`background-color: ${COLORS.green3Pressed}`)
   })
 
   it('should render the skeleton when react query is loading', () => {