feat(odd): Add Run Completion and Run Summary screen

app/src/App/OnDeviceDisplayApp.tsx

@@ -26,6 +26,7 @@ import { RobotSettingsDashboard } from '../pages/OnDeviceDisplay/RobotSettingsDa
 import { ProtocolDashboard } from '../pages/OnDeviceDisplay/ProtocolDashboard'
 import { ProtocolDetails } from '../pages/OnDeviceDisplay/ProtocolDetails'
 import { RunningProtocol } from '../pages/OnDeviceDisplay/RunningProtocol'
+import { RunSummary } from '../pages/OnDeviceDisplay/RunSummary'
 import { UpdateRobot } from '../pages/OnDeviceDisplay/UpdateRobot'
 import { InstrumentsDashboard } from '../pages/OnDeviceDisplay/InstrumentsDashboard'
 import { InstrumentDetail } from '../pages/OnDeviceDisplay/InstrumentDetail'
@@ -107,6 +108,12 @@ export const onDeviceDisplayRoutes: RouteProps[] = [
     name: 'Protocol Run',
     path: '/protocols/:runId/run',
   },
+  {
+    Component: RunSummary,
+    exact: true,
+    name: 'Protocol Run Summary',
+    path: '/protocols/:runId/summary',
+  },
   {
     Component: InstrumentsDashboard,
     exact: true,

app/src/App/__tests__/OnDeviceDisplayApp.test.tsx

@@ -16,6 +16,7 @@ import { ProtocolDashboard } from '../../pages/OnDeviceDisplay/ProtocolDashboard
 import { ProtocolSetup } from '../../pages/OnDeviceDisplay/ProtocolSetup'
 import { OnDeviceDisplayApp } from '../OnDeviceDisplayApp'
 import { RunningProtocol } from '../../pages/OnDeviceDisplay/RunningProtocol'
+import { RunSummary } from '../../pages/OnDeviceDisplay/RunSummary'
 import { Welcome } from '../../pages/OnDeviceDisplay/Welcome'
 
 jest.mock('../../pages/OnDeviceDisplay/Welcome')
@@ -29,6 +30,7 @@ jest.mock('../../pages/OnDeviceDisplay/ProtocolDashboard')
 jest.mock('../../pages/OnDeviceDisplay/ProtocolSetup')
 jest.mock('../../pages/OnDeviceDisplay/InstrumentsDashboard')
 jest.mock('../../pages/OnDeviceDisplay/RunningProtocol')
+jest.mock('../../pages/OnDeviceDisplay/RunSummary')
 
 const mockWelcome = Welcome as jest.MockedFunction<typeof Welcome>
 const mockNetworkSetupMenu = NetworkSetupMenu as jest.MockedFunction<
@@ -61,6 +63,7 @@ const mockInstrumentsDashboard = InstrumentsDashboard as jest.MockedFunction<
 const mockRunningProtocol = RunningProtocol as jest.MockedFunction<
   typeof RunningProtocol
 >
+const mockRunSummary = RunSummary as jest.MockedFunction<typeof RunSummary>
 
 const render = (path = '/') => {
   return renderWithProviders(
@@ -88,6 +91,7 @@ describe('OnDeviceDisplayApp', () => {
       <div>Mock RobotSettingsDashboard</div>
     )
     mockRunningProtocol.mockReturnValue(<div>Mock RunningProtocol</div>)
+    mockRunSummary.mockReturnValue(<div>Mock RunSummary</div>)
   })
   afterEach(() => {
     jest.resetAllMocks()
@@ -142,4 +146,8 @@ describe('OnDeviceDisplayApp', () => {
     const [{ getByText }] = render('/protocols/my-run-id/run')
     getByText('Mock RunningProtocol')
   })
+  it('renders a RunSummary component from /protocols/:runId/summary', () => {
+    const [{ getByText }] = render('/protocols/my-run-id/summary')
+    getByText('Mock RunSummary')
+  })
 })

app/src/assets/localization/en/run_details.json

@@ -118,6 +118,12 @@
   "steps_total": "{{count}} steps total",
   "protocol_completed": "Protocol completed",
   "complete_protocol_to_download": "Complete the protocol to download the run log",
+  "run_complete": "Run completed",
+  "return_to_dashboard": "Return to dashboard",
+  "view_error_details": "View error details",
+  "duration": "Duration",
+  "start": "Start",
+  "end": "End",
   "run_failed_modal_title": "Run failed",
   "run_failed_modal_header": "{{errorName}}: {{errorCode}} at protocol step {{count}}",
   "run_failed_modal_body": "Error occurred when protocol was {{command}}",

app/src/atoms/buttons/OnDeviceDisplay/LargeButton.tsx

@@ -6,8 +6,10 @@ import {
   SPACING,
   BORDERS,
   Btn,
-  DIRECTION_ROW,
   Icon,
+  DIRECTION_COLUMN,
+  JUSTIFY_SPACE_BETWEEN,
+  DISPLAY_FLEX,
 } from '@opentrons/components'
 import { StyledText } from '../../text'
 import { ODD_FOCUS_VISIBLE } from './constants'
@@ -70,7 +72,6 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
     box-shadow: none;
     padding: ${SPACING.spacing5};
     line-height: ${TYPOGRAPHY.lineHeight20};
-    max-height: 14.375rem;
     ${TYPOGRAPHY.pSemiBold}
 
     &:focus {
@@ -102,16 +103,17 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
   `
   return (
     <Btn
+      display={DISPLAY_FLEX}
       css={LARGE_BUTTON_STYLE}
       aria-label={`LargeButton_${buttonType}`}
-      flexDirection={DIRECTION_ROW}
+      flexDirection={DIRECTION_COLUMN}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
       disabled={disabled}
       {...buttonProps}
     >
       <StyledText
         fontSize="2rem"
         fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-        paddingBottom="3.75rem"
         lineHeight="2.625rem"
       >
         {buttonText}

app/src/organisms/Devices/utils.ts

@@ -18,6 +18,13 @@ export function formatTimestamp(timestamp: string): string {
     : timestamp
 }
 
+export function onDeviceDisplayFormatTimestamp(timestamp: string): string {
+  // eslint-disable-next-line eqeqeq
+  return (parseISO(timestamp) as Date | string) != 'Invalid Date'
+    ? format(parseISO(timestamp), 'HH:mm:ss')
+    : timestamp
+}
+
 export function downloadFile(data: object, fileName: string): void {
   // Create a blob with the data we want to download as a file
   const blob = new Blob([JSON.stringify(data)], { type: 'text/json' })

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

@@ -49,13 +49,13 @@ const TITLE_TEXT_STYLE = css`
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  height: max-content;
 `
 
 const RUN_TIMER_STYLE = css`
   font-size: 2rem;
-  font-weight: 700;
+  font-weight: ${TYPOGRAPHY.fontWeightLevel2_bold};
   line-height: 2.625rem;
   color: ${COLORS.darkBlackEnabled};
 `

app/src/organisms/ProtocolSetupInstruments/index.tsx

@@ -48,6 +48,7 @@ export function ProtocolSetupInstruments({
         (i): i is GripperData => i.instrumentType === 'gripper'
       ) ?? null
     : null
+
   return (
     <Flex
       flexDirection={DIRECTION_COLUMN}

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

@@ -212,7 +212,7 @@ export function ProtocolDashboard(): JSX.Element {
 
               return (
                 <ProtocolCard
-                  key={protocol.key}
+                  key={protocol.id}
                   lastRun={lastRun}
                   protocol={protocol}
                 />

app/src/pages/OnDeviceDisplay/ProtocolSetup.tsx

@@ -176,6 +176,7 @@ function PrepareToRun({
   const { data: protocolRecord } = useProtocolQuery(protocolId, {
     staleTime: Infinity,
   })
+
   const { data: attachedInstruments } = useInstrumentsQuery()
   const {
     data: allPipettesCalibrationData,