fix(app): rm analyzing state in run header for historical runs (#11122)

Author: vabruzzo

app/src/atoms/Banner/index.tsx

@@ -11,6 +11,7 @@ import {
   TYPOGRAPHY,
   BORDERS,
   Btn,
+  SIZE_1,
 } from '@opentrons/components'
 
 import type { StyleProps } from '@opentrons/components'
@@ -31,6 +32,8 @@ export interface BannerProps extends StyleProps {
   onCloseClick?: (() => unknown) | React.MouseEventHandler<HTMLButtonElement>
   /** Override the default Alert Icon */
   icon?: IconProps
+  /** some banner onCloseClicks fire events, this allows a spinner after click but before event finishes */
+  isCloseActionLoading?: boolean
 }
 
 const BANNER_PROPS_BY_TYPE: Record<
@@ -65,7 +68,14 @@ const BANNER_PROPS_BY_TYPE: Record<
 }
 
 export function Banner(props: BannerProps): JSX.Element {
-  const { type, onCloseClick, icon, children, ...styleProps } = props
+  const {
+    type,
+    onCloseClick,
+    icon,
+    children,
+    isCloseActionLoading,
+    ...styleProps
+  } = props
   const bannerProps = BANNER_PROPS_BY_TYPE[type]
 
   const iconProps = {
@@ -98,7 +108,7 @@ export function Banner(props: BannerProps): JSX.Element {
       <Flex flex="1" alignItems={ALIGN_CENTER}>
         {props.children}
       </Flex>
-      {props.onCloseClick && (
+      {onCloseClick && !isCloseActionLoading && (
         <Btn
           data-testid="Banner_close-button"
           onClick={props.onCloseClick}
@@ -108,6 +118,9 @@ export function Banner(props: BannerProps): JSX.Element {
           <Icon name="close" aria-label="close_icon" />
         </Btn>
       )}
+      {isCloseActionLoading && (
+        <Icon name="ot-spinner" size={SIZE_1} aria-label={`ot-spinner`} spin />
+      )}
     </Flex>
   )
 }

app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx

@@ -127,13 +127,15 @@ export function ProtocolRunHeader({
   const isHeaterShakerInProtocol = useIsHeaterShakerInProtocol()
   const configHasHeaterShakerAttached = useSelector(getIsHeaterShakerAttached)
   const createdAtTimestamp = useRunCreatedAtTimestamp(runId)
-  const { protocolData, displayName, protocolKey } = useProtocolDetailsForRun(
-    runId
-  )
+  const {
+    protocolData,
+    displayName,
+    protocolKey,
+    isProtocolAnalyzing,
+  } = useProtocolDetailsForRun(runId)
   const { trackProtocolRunEvent } = useTrackProtocolRunEvent(runId)
   const robotAnalyticsData = useRobotAnalyticsData(robotName)
   const isRobotViewable = useIsRobotViewable(robotName)
-  const isProtocolAnalyzing = protocolData == null && isRobotViewable
   const runStatus = useRunStatus(runId)
   const { analysisErrors } = useProtocolAnalysisErrors(runId)
   const isRunCurrent = Boolean(useRunQuery(runId)?.data?.data?.current)
@@ -280,6 +282,7 @@ export function ProtocolRunHeader({
     isMutationLoading ||
     isRobotBusy ||
     isProtocolAnalyzing ||
+    protocolData == null ||
     runStatus === RUN_STATUS_FINISHING ||
     runStatus === RUN_STATUS_PAUSE_REQUESTED ||
     runStatus === RUN_STATUS_STOP_REQUESTED ||
@@ -376,7 +379,11 @@ export function ProtocolRunHeader({
   switch (runStatus) {
     case RUN_STATUS_FAILED: {
       clearProtocolBanner = (
-        <Banner type="error" onCloseClick={handleClearClick}>
+        <Banner
+          type="error"
+          onCloseClick={handleClearClick}
+          isCloseActionLoading={isClosingCurrentRun}
+        >
           <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} width="100%">
             {`${t('run_failed')}.`}
           </Flex>
@@ -386,7 +393,11 @@ export function ProtocolRunHeader({
     }
     case RUN_STATUS_SUCCEEDED: {
       clearProtocolBanner = (
-        <Banner type="success" onCloseClick={handleClearClick}>
+        <Banner
+          type="success"
+          onCloseClick={handleClearClick}
+          isCloseActionLoading={isClosingCurrentRun}
+        >
           <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} width="100%">
             {`${t('run_completed')}.`}
           </Flex>

app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunHeader.test.tsx

@@ -177,6 +177,7 @@ const PROTOCOL_DETAILS = {
   displayName: PROTOCOL_NAME,
   protocolData: simpleV6Protocol,
   protocolKey: 'fakeProtocolKey',
+  isProtocolAnalyzing: false,
 }
 
 const mockMovingHeaterShaker = {
@@ -344,6 +345,7 @@ describe('ProtocolRunHeader', () => {
       displayName: null,
       protocolData: null,
       protocolKey: null,
+      isProtocolAnalyzing: true,
     })
 
     const [{ getByRole }] = render()
@@ -735,4 +737,16 @@ describe('ProtocolRunHeader', () => {
       expect(mockPush).toHaveBeenCalledWith('/devices')
     })
   })
+  it('renders banner with spinner if currently closing current run', async () => {
+    when(mockUseRunStatus)
+      .calledWith(RUN_ID)
+      .mockReturnValue(RUN_STATUS_SUCCEEDED)
+    when(mockUseCloseCurrentRun).calledWith().mockReturnValue({
+      isClosingCurrentRun: true,
+      closeCurrentRun: mockCloseCurrentRun,
+    })
+    const [{ getByText, getByLabelText }] = render()
+    getByText('Run completed.')
+    getByLabelText('ot-spinner')
+  })
 })

app/src/organisms/Devices/hooks/__tests__/useProtocolDetailsForRun.test.tsx

@@ -79,6 +79,7 @@ describe('useProtocolDetailsForRun hook', () => {
       displayName: null,
       protocolData: null,
       protocolKey: null,
+      isProtocolAnalyzing: false,
     })
   })
 
@@ -111,6 +112,7 @@ describe('useProtocolDetailsForRun hook', () => {
       displayName: 'fake protocol',
       protocolData: simpleV6Protocol,
       protocolKey: 'fakeProtocolKey',
+      isProtocolAnalyzing: false,
     })
   })
 })

app/src/organisms/Devices/hooks/useProtocolDetailsForRun.ts

@@ -13,6 +13,7 @@ export interface ProtocolDetails {
   displayName: string | null
   protocolData: ProtocolAnalysisFile<{}> | null
   protocolKey: string | null
+  isProtocolAnalyzing?: boolean
 }
 
 export function useProtocolDetailsForRun(
@@ -56,5 +57,7 @@ export function useProtocolDetailsForRun(
     protocolData:
       mostRecentAnalysis != null ? schemaV6Adapter(mostRecentAnalysis) : null,
     protocolKey: protocolRecord?.data.key ?? null,
+    isProtocolAnalyzing:
+      mostRecentAnalysis != null && mostRecentAnalysis?.status === 'pending',
   }
 }