refactor(app): standardize module USB port display info (#19029)

This PR introduces a new hook, `getModuleUSBPort`, to
standardize the formatting of USB port information for modules, ensuring
consistency in module USB port display across the codebase.

Author: ahiuchingau

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

@@ -12,5 +12,5 @@
   "magnetic_block": "Magnetic block",
   "waste_chute": "Waste chute",
   "staging_area_slot": "Staging area slot",
-  "module_in_port": "{{moduleName}} in  USB-{{usbPortNumber}}"
+  "module_in_port": "{{moduleName}} in {{usbPortNumber}}"
 }

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

@@ -194,9 +194,11 @@
   "tip_pickup_drop": "Tip Pickup / Drop",
   "to_run_protocol_go_to_protocols_page": "To run a protocol on this robot, import a protocol on the <navlink>Protocols page</navlink>",
   "trash": "Trash",
+  "unknown": "Unknown",
   "update_now": "Update now",
   "updating_firmware": "Updating firmware...",
-  "usb_port": "usb-{{port}}{{hubPort}}",
+  "usb_port": "USB-{{port}}",
+  "usb_port_stacker": "S-{{port}}",
   "usb_port_not_connected": "usb not connected",
   "version": "Version {{version}}",
   "view": "View",

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

@@ -38,9 +38,9 @@
   "install_update": "Install update",
   "location_occupied": "A {{fixture}} is currently specified here on the deck configuration",
   "module_added": "New module detected. Setup the module for use.",
-  "module_attached_to_port": "New {{module}} attached to USB-{{port}}!",
+  "module_attached_to_port": "New {{module}} attached to {{port}}!",
   "module_attached_multiple": "Multiple new modules detected. Which module do you want to setup?",
-  "module_attached_select": "{{module}} in USB-{{port}}",
+  "module_attached_select": "{{module}} in {{port}}",
   "module_start_setup": "Start setup",
   "module_added_link": "Launch Setup",
   "module_calibrating": "Stand back, {{moduleName}} is calibrating",

app/src/local-resources/modules/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useModuleUSBPort'

app/src/local-resources/modules/hooks/useModuleUSBPort.ts

@@ -0,0 +1,35 @@
+import { useTranslation } from 'react-i18next'
+
+import { FLEX_STACKER_MODULE_TYPE } from '@opentrons/shared-data'
+
+import type { AttachedModule } from '/app/redux/modules/types'
+
+export interface UseModuleUSBPortResult {
+  parseModuleUSBPort: (module: AttachedModule | null) => string
+}
+
+export function useModuleUSBPort(): UseModuleUSBPortResult {
+  const { t } = useTranslation('device_details')
+
+  const parseModuleUSBPort = (module: AttachedModule | null): string => {
+    if (module?.usbPort == null) {
+      return t('usb_port_not_connected')
+    }
+
+    const { port, hubPort } = module.usbPort
+    if (module.moduleType === FLEX_STACKER_MODULE_TYPE) {
+      if (hubPort != null) {
+        return t('usb_port_stacker', { port: hubPort })
+      } else {
+        console.error(`Flex Stacker ${module.serialNumber} has no USB hubPort`)
+        return t('usb_port_stacker', { port: t('unknown') })
+      }
+    }
+
+    return t('usb_port', {
+      port: port + (hubPort != null ? '.' + hubPort : ''),
+    })
+  }
+
+  return { parseModuleUSBPort }
+}

app/src/local-resources/modules/index.ts

@@ -1 +1,2 @@
 export * from './utils'
+export * from './hooks'

app/src/molecules/ModuleInfo/ModuleInfo.tsx

@@ -24,12 +24,11 @@ import {
 import { useRunHasStarted } from '/app/resources/runs'
 
 import type { ModuleModel } from '@opentrons/shared-data'
-import type { PhysicalPort } from '/app/redux/modules/api-types'
 
 export interface ModuleInfoProps {
   moduleModel: ModuleModel
   isAttached: boolean
-  physicalPort: PhysicalPort | null
+  physicalPort?: string | null
   runId?: string
 }
 
@@ -49,14 +48,8 @@ export const ModuleInfo = (props: ModuleInfoProps): JSX.Element => {
   if (moduleModel === MAGNETIC_BLOCK_V1) {
     connectionStatus = t('no_usb_required')
   }
-  if (physicalPort === null && isAttached) {
-    connectionStatus = t('usb_connected_no_port_info')
-  } else if (physicalPort != null && isAttached) {
-    const portDisplay =
-      physicalPort?.hubPort != null
-        ? `${physicalPort.port}.${physicalPort.hubPort}`
-        : physicalPort?.port
-    connectionStatus = t('usb_port_connected', { port: portDisplay })
+  if (isAttached) {
+    connectionStatus = physicalPort ?? t('usb_connected_no_port_info')
   }
 
   return (

app/src/molecules/ModuleInfo/__tests__/ModuleInfo.test.tsx

@@ -56,18 +56,18 @@ describe('ModuleInfo', () => {
   it('should show module connected and USB number', () => {
     props = {
       ...props,
-      physicalPort: { port: 1, hub: false, portGroup: 'unknown', path: '' },
+      physicalPort: 'USB-1',
       isAttached: true,
     }
     render(props)
     screen.getByText('Connected')
-    screen.getByText('USB Port 1')
+    screen.getByText('USB-1')
   })
 
   it('should not show module connected when run has started', () => {
     props = {
       ...props,
-      physicalPort: { port: 1, hub: false, portGroup: 'unknown', path: '' },
+      physicalPort: 'USB-1',
       isAttached: true,
       runId: MOCK_RUN_ID,
     }

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/HeaterShakerModuleCard.tsx

@@ -1,5 +1,3 @@
-import { useTranslation } from 'react-i18next'
-
 import {
   ALIGN_FLEX_START,
   COLORS,
@@ -15,6 +13,7 @@ import {
 import { getModuleDisplayName } from '@opentrons/shared-data'
 
 import heaterShakerModule from '/app/assets/images/heater_shaker_module_transparent.png'
+import { useModuleUSBPort } from '/app/local-resources/modules'
 import { HeaterShakerModuleData } from '/app/organisms/ModuleCard/HeaterShakerModuleData'
 
 import type { HeaterShakerModule } from '/app/redux/modules/types'
@@ -27,7 +26,7 @@ export const HeaterShakerModuleCard = (
   props: HeaterShakerModuleCardProps
 ): JSX.Element | null => {
   const { module } = props
-  const { t } = useTranslation('device_details')
+  const { parseModuleUSBPort } = useModuleUSBPort()
 
   return (
     <Flex
@@ -51,11 +50,7 @@ export const HeaterShakerModuleCard = (
             fontSize={TYPOGRAPHY.fontSizeCaption}
             paddingBottom={SPACING.spacing4}
           >
-            {module?.usbPort !== null
-              ? t('usb_port', {
-                  port: module?.usbPort?.port,
-                })
-              : t('usb_port_not_connected')}
+            {parseModuleUSBPort(module)}
           </LegacyStyledText>
           <Flex paddingBottom={SPACING.spacing4}>
             <Icon

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/HeaterShakerIsRunningModal/__tests__/HeaterShakerModuleCard.test.tsx

@@ -31,7 +31,7 @@ describe('HeaterShakerModuleCard', () => {
 
   it('renders the correct info', () => {
     render(props)
-    screen.getByText('usb-1')
+    screen.getByText('USB-1')
     screen.getByText('Heater-Shaker Module GEN1')
     screen.getByText('mock heater shaker module data')
     screen.getByAltText('Heater-Shaker')