feat(app): add module icon tooltips to robot card

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

@@ -36,5 +36,6 @@
  "update_robot_software": "Update robot software",
  "disconnect_from_network": "Disconnect from network",
  "connect_to_network": "Connect to network",
- "home_gantry": "Home gantry"
+ "home_gantry": "Home gantry",
+ "this_robot_has_connected_and_power_on_module": "This robot has a connected and powered on {{moduleName}}"
 }

app/src/atoms/Tooltip/index.tsx

@@ -2,9 +2,9 @@ import * as React from 'react'
 import {
  COLORS,
  TYPOGRAPHY,
- UseTooltipResultTooltipProps,
+ Tooltip as SharedTooltip,
 } from '@opentrons/components'
-import { Tooltip as SharedTooltip } from '@opentrons/components/src/tooltips/Tooltip'
+import type { UseTooltipResultTooltipProps } from '@opentrons/components'
 
 export interface TooltipProps {
  key: string

app/src/molecules/ModuleIcon/index.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import {
+ Flex,
+ ModuleIcon as SharedModuleIcon,
+ POSITION_RELATIVE,
+ SPACING,
+ useHoverTooltip,
+} from '@opentrons/components'
+import { Tooltip } from '../../atoms/Tooltip'
+
+import type { AttachedModule } from '../../redux/modules/types'
+
+interface ModuleIconProps {
+ module: AttachedModule
+ index: number
+ tooltipText: string
+}
+
+export function ModuleIcon(props: ModuleIconProps): JSX.Element {
+ const { module, index, tooltipText } = props
+ const [targetProps, tooltipProps] = useHoverTooltip()
+
+ return (
+ <>
+ <Flex {...targetProps}>
+ <SharedModuleIcon
+ moduleType={module.moduleType}
+ size={SPACING.spacing4}
+ />
+ </Flex>
+
+ <Flex position={POSITION_RELATIVE} marginTop={SPACING.spacingM}>
+ <Tooltip
+ tooltipProps={tooltipProps}
+ key={`ModuleIcon_tooltip_${index}`}
+ >
+ {tooltipText}
+ </Tooltip>
+ </Flex>
+ </>
+ )
+}

app/src/organisms/Devices/RobotCard.tsx

@@ -13,17 +13,19 @@ import {
  DIRECTION_ROW,
  SPACING,
  TEXT_TRANSFORM_UPPERCASE,
- ModuleIcon,
+ BORDERS,
 } from '@opentrons/components'
+import { getModuleDisplayName } from '@opentrons/shared-data'
 
 import OT2_PNG from '../../assets/images/OT2-R_HERO.png'
 import { StyledText } from '../../atoms/text'
+import { UNREACHABLE } from '../../redux/discovery'
+import { ModuleIcon } from '../../molecules/ModuleIcon'
 import { useAttachedModules, useAttachedPipettes } from './hooks'
 import { RobotStatusBanner } from './RobotStatusBanner'
 import { RobotOverflowMenu } from './RobotOverflowMenu'
 
 import type { DiscoveredRobot } from '../../redux/discovery/types'
-import { UNREACHABLE } from '../../redux/discovery'
 // import { UpdateRobotBanner } from '../UpdateRobotBanner'
 
 interface RobotCardProps {
@@ -34,7 +36,6 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null {
  const { robot } = props
  const { name = null, local } = robot
  const { t } = useTranslation('devices_landing')
-
  const attachedModules = useAttachedModules(name)
  const attachedPipettes = useAttachedPipettes(name)
 
@@ -44,7 +45,7 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null {
  alignItems={ALIGN_CENTER}
  backgroundColor={C_WHITE}
  border={`1px solid ${C_MED_LIGHT_GRAY}`}
- borderRadius="4px"
+ borderRadius={BORDERS.radiusSoftCorners}
  flexDirection={DIRECTION_ROW}
  marginBottom={SPACING.spacing3}
  padding={SPACING.spacing3}
@@ -93,9 +94,15 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null {
  <Flex>
  {attachedModules.map((module, i) => (
  <ModuleIcon
- key={`${name}_${module.moduleModel}_${i}`}
- moduleType={module.moduleType}
- size={SPACING.spacing4}
+ key={`${module.moduleModel}_${i}_${name}`}
+ tooltipText={t(
+ 'this_robot_has_connected_and_power_on_module',
+ {
+ moduleName: getModuleDisplayName(module.moduleModel),
+ }
+ )}
+ index={i}
+ module={module}
  />
  ))}
  </Flex>