fix(app): fix timestamp used for protocol completion (#16855)

Closes RQA-3596

app/src/organisms/ODD/RobotDashboard/RecentRunProtocolCard.tsx

@@ -160,7 +160,8 @@ export function ProtocolWithLastRun({
   }
   // TODO(BC, 2023-06-05): see if addSuffix false allow can remove usage of .replace here
   const formattedLastRunTime = formatDistance(
-    new Date(runData.createdAt),
+    // Fallback to current date if completedAt is null, though this should never happen since runs must be completed to appear in dashboard
+    new Date(runData.completedAt ?? new Date()),
     new Date(),
     {
       addSuffix: true,

app/src/organisms/ODD/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx

@@ -87,7 +87,7 @@ const missingBoth = [
 const mockRunData = {
   id: RUN_ID,
   createdAt: '2022-05-03T21:36:12.494778+00:00',
-  completedAt: 'thistime',
+  completedAt: '2023-05-03T21:36:12.494778+00:00',
   startedAt: 'thistime',
   protocolId: 'mockProtocolId',
   status: RUN_STATUS_FAILED,
@@ -169,7 +169,7 @@ describe('RecentRunProtocolCard', () => {
   it('should render text', () => {
     render(props)
     const lastRunTime = formatDistance(
-      new Date(mockRunData.createdAt),
+      new Date(mockRunData.completedAt),
       new Date(),
       {
         addSuffix: true,

app/src/pages/ODD/ProtocolDashboard/ProtocolCard.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react'
+import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Trans, useTranslation } from 'react-i18next'
 import { useQueryClient } from 'react-query'
-import { formatDistance } from 'date-fns'
 import last from 'lodash/last'
 import { css } from 'styled-components'
 
@@ -34,6 +33,7 @@ import { SmallButton } from '/app/atoms/buttons'
 import { OddModal } from '/app/molecules/OddModal'
 import { LongPressModal } from './LongPressModal'
 import { formatTimeWithUtcLabel } from '/app/resources/runs'
+import { useUpdatedLastRunTime } from '/app/pages/ODD/ProtocolDashboard/hooks'
 
 import type { UseLongPressResult } from '@opentrons/components'
 import type { ProtocolResource } from '@opentrons/shared-data'
@@ -60,16 +60,17 @@ export function ProtocolCard(props: ProtocolCardProps): JSX.Element {
     setIsRequiredCSV,
   } = props
   const navigate = useNavigate()
-  const [showIcon, setShowIcon] = React.useState<boolean>(false)
+  const [showIcon, setShowIcon] = useState<boolean>(false)
   const [
     showFailedAnalysisModal,
     setShowFailedAnalysisModal,
-  ] = React.useState<boolean>(false)
+  ] = useState<boolean>(false)
   const { t, i18n } = useTranslation(['protocol_info', 'branded'])
   const protocolName = protocol.metadata.protocolName ?? protocol.files[0].name
   const longpress = useLongPress()
   const queryClient = useQueryClient()
   const host = useHost()
+  const updatedLastRun = useUpdatedLastRunTime(lastRun)
 
   const { id: protocolId, analysisSummaries } = protocol
   const {
@@ -121,7 +122,7 @@ export function ProtocolCard(props: ProtocolCardProps): JSX.Element {
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (longpress.isLongPressed) {
       longPress(true)
       setTargetProtocolId(protocol.id)
@@ -195,13 +196,8 @@ export function ProtocolCard(props: ProtocolCardProps): JSX.Element {
   if (isFailedAnalysis) protocolCardBackgroundColor = COLORS.red35
   if (isRequiredCSV) protocolCardBackgroundColor = COLORS.yellow35
 
-  const textWrap = (lastRun?: string): string => {
-    if (lastRun != null) {
-      lastRun = formatDistance(new Date(lastRun), new Date(), {
-        addSuffix: true,
-      }).replace('about ', '')
-    }
-    return lastRun === 'less than a minute ago' ? 'normal' : 'nowrap'
+  const textWrap = (updatedLastRun: string): string => {
+    return updatedLastRun === 'less than a minute ago' ? 'normal' : 'nowrap'
   }
 
   return (
@@ -257,13 +253,9 @@ export function ProtocolCard(props: ProtocolCardProps): JSX.Element {
         <LegacyStyledText
           as="p"
           color={COLORS.grey60}
-          whiteSpace={textWrap(lastRun)}
+          whiteSpace={textWrap(updatedLastRun)}
         >
-          {lastRun != null
-            ? formatDistance(new Date(lastRun), new Date(), {
-                addSuffix: true,
-              }).replace('about ', '')
-            : t('no_history')}
+          {updatedLastRun}
         </LegacyStyledText>
       </Flex>
       <Flex width="12.5rem" whiteSpace={NO_WRAP}>

app/src/pages/ODD/ProtocolDashboard/hooks.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react'
+import { formatDistance } from 'date-fns'
+import { useTranslation } from 'react-i18next'
+
+import type { TFunction } from 'i18next'
+
+const UPDATE_TIME_INTERVAL_MS = 60000
+
+// Given the last run timestamp, update the time since the last run on an interval.
+export function useUpdatedLastRunTime(lastRun: string | undefined): string {
+  const { t } = useTranslation(['protocol_info'])
+
+  const [updatedLastRun, setUpdatedLastRun] = useState(() =>
+    computeLastRunFromNow(lastRun, t as TFunction)
+  )
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setUpdatedLastRun(computeLastRunFromNow(lastRun, t as TFunction))
+    }, UPDATE_TIME_INTERVAL_MS)
+
+    return () => {
+      clearInterval(timer)
+    }
+  }, [lastRun, t])
+
+  return updatedLastRun
+}
+
+function computeLastRunFromNow(
+  lastRun: string | undefined,
+  t: TFunction
+): string {
+  return lastRun != null
+    ? formatDistance(new Date(lastRun), new Date(), {
+        addSuffix: true,
+      }).replace('about ', '')
+    : t('no_history')
+}

app/src/pages/ODD/ProtocolDashboard/index.tsx

@@ -252,9 +252,10 @@ export function ProtocolDashboard(): JSX.Element {
               </Flex>
               <Flex flexDirection={DIRECTION_COLUMN}>
                 {sortedProtocols.map(protocol => {
-                  const lastRun = runs.data?.data.find(
+                  // Run data is ordered based on timestamp. We want the last time a matching run was ran.
+                  const lastRun = runs.data?.data.findLast(
                     run => run.protocolId === protocol.id
-                  )?.createdAt
+                  )?.completedAt
 
                   return (
                     <ProtocolCard