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

Add Run Completion and Run Summary screen
This PR has some comment-out lines because I took over this branch from @b-cooper so I just avoid breaking anything that is not directly related to RunCompletion and RunSummary screen

info icon for View error details doesn't fit the design because I have a PR that is including the new info icon.
this part will be updated once the PR is merged into edge

The test will be added later. (I will work on that.)

close RCORE-744 RCORE-745

[design]
https://www.figma.com/file/AoTLAYuWawlaWItB1umOjr/Release%3A-Opentrons-Flex-Touchscreen-Designs?node-id=5201-95033&t=vNmTK9KKiPQI627z-0

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,