feat(odd): robot dashboard recently run protocols (#12490)

closes RCORE-559 RCORE-586

Co-authored-by: koji <[email protected]>

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

@@ -123,6 +123,15 @@
   "both_mounts": "Both Mounts",
   "ready": "Ready",
   "run_again": "Run again",
+  "no_recent_runs": "No recent runs",
+  "no_recent_runs_description": "After you run some protocols, they will appear here.",
+  "last_run_time": "last run {{number}}",
+  "ready_to_run": "ready to run",
+  "missing_module": "missing {{num}} module",
+  "missing_module_plural": "missing {{count}} modules",
+  "missing_pipette": "missing {{num}} pipette",
+  "missing_pipettes_plural": "missing {{count}} pipettes",
+  "missing_both": "missing hardware",
   "have_not_run": "No recent runs",
   "have_not_run_description": "After you run some protocols, they will appear here."
 }

app/src/atoms/Chip/index.tsx

@@ -13,11 +13,11 @@ import {
 
 import { StyledText } from '../text'
 
-import type { IconName } from '@opentrons/components'
+import type { IconName, StyleProps } from '@opentrons/components'
 
 export type ChipType = 'basic' | 'success' | 'warning' | 'neutral'
 
-interface ChipProps {
+interface ChipProps extends StyleProps {
   /** Display background color? */
   background?: boolean
   /** Chip icon */
@@ -70,6 +70,7 @@ export function Chip({
   iconName,
   type,
   text,
+  ...styleProps
 }: ChipProps): JSX.Element {
   const backgroundColor =
     background === false && type !== 'basic'
@@ -85,6 +86,7 @@ export function Chip({
       padding={`${SPACING.spacing3} ${SPACING.spacing4}`}
       gridGap={SPACING.spacing3}
       data-testid={`Chip_${type}`}
+      {...styleProps}
     >
       {type !== 'basic' && (
         <Icon

app/src/organisms/NameRobot/ConfirmRobotName.tsx

@@ -15,7 +15,7 @@ import {
 
 import { StyledText } from '../../atoms/text'
 import { StepMeter } from '../../atoms/StepMeter'
-import screenImage from '../../assets/images/odd/[email protected]'
+import screenImage from '../../assets/images/on-device-display/[email protected]'
 
 const IMAGE_ALT = 'finish setting up a robot'
 

app/src/organisms/OnDeviceDisplay/RobotDashboard/EmptyRecentRun.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import {
+  Flex,
+  DIRECTION_COLUMN,
+  ALIGN_CENTER,
+  COLORS,
+  SPACING,
+  TYPOGRAPHY,
+} from '@opentrons/components'
+
+import { StyledText } from '../../../atoms/text'
+
+import abstractImage from '../../../assets/images/on-device-display/empty_recent_protocol_run.png'
+
+export function EmptyRecentRun(): JSX.Element {
+  const { t } = useTranslation('device_details')
+  return (
+    <Flex
+      width="100%"
+      height="27.25rem"
+      backgroundColor={`${COLORS.darkBlackEnabled}${COLORS.opacity15HexCode}`}
+      flexDirection={DIRECTION_COLUMN}
+      alignItems={ALIGN_CENTER}
+      padding="5.25rem 3.75rem"
+    >
+      <Flex marginBottom={SPACING.spacing4}>
+        <img
+          src={abstractImage}
+          alt="There is no recent run protocol"
+          width="284px"
+          height="166px"
+        />
+      </Flex>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        gridGap={SPACING.spacing3}
+        alignItems={ALIGN_CENTER}
+      >
+        <StyledText
+          fontSize={TYPOGRAPHY.fontSize32}
+          lineHeight={TYPOGRAPHY.lineHeight42}
+          fontWeight={TYPOGRAPHY.fontWeightLevel2_bold}
+        >
+          {t('no_recent_runs')}
+        </StyledText>
+        <StyledText
+          fontSize={TYPOGRAPHY.fontSize28}
+          lineHeight={TYPOGRAPHY.lineHeight36}
+          fontWeight={TYPOGRAPHY.fontWeightRegular}
+          color={COLORS.darkBlack_seventy}
+        >
+          {t('no_recent_runs_description')}
+        </StyledText>
+      </Flex>
+    </Flex>
+  )
+}