From 58c9f45673572797cb85704c8ec887ac1a77a452 Mon Sep 17 00:00:00 2001
From: Sarah Breen <sarah.breen@opentrons.com>
Date: Fri, 31 Jan 2025 11:50:53 -0500
Subject: [PATCH] feat(app): Add missing usp hub port to a few module display
 locations (#17396)

---
 app/src/molecules/ModuleInfo/ModuleInfo.tsx    |  6 +++++-
 .../SetupModuleAndDeck/SetupModulesList.tsx    |  9 +++++++--
 .../DeviceDetailsDeckConfiguration/index.tsx   | 14 ++++++++------
 .../ChooseModuleToConfigureModal.tsx           | 18 ++++++++++++------
 4 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/app/src/molecules/ModuleInfo/ModuleInfo.tsx b/app/src/molecules/ModuleInfo/ModuleInfo.tsx
index 3e68079bd5f..cbde3fad02c 100644
--- a/app/src/molecules/ModuleInfo/ModuleInfo.tsx
+++ b/app/src/molecules/ModuleInfo/ModuleInfo.tsx
@@ -48,7 +48,11 @@ export const ModuleInfo = (props: ModuleInfoProps): JSX.Element => {
   if (physicalPort === null && isAttached) {
     connectionStatus = t('usb_connected_no_port_info')
   } else if (physicalPort != null && isAttached) {
-    connectionStatus = t('usb_port_connected', { port: physicalPort.port })
+    const portDisplay =
+      physicalPort?.hubPort != null
+        ? `${physicalPort.port}.${physicalPort.hubPort}`
+        : physicalPort?.port
+    connectionStatus = t('usb_port_connected', { port: portDisplay })
   }
 
   return (
diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx
index e172b6ffb11..81299ca291b 100644
--- a/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx
+++ b/app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx
@@ -298,6 +298,11 @@ export function ModulesListItem({
   // convert slot name to cutout id
   const cutoutIdForSlotName = getCutoutIdForSlotName(slotName, deckDef)
 
+  const portDisplay =
+    attachedModuleMatch?.usbPort?.hubPort != null
+      ? `${attachedModuleMatch.usbPort.port}.${attachedModuleMatch.usbPort.hubPort}`
+      : attachedModuleMatch?.usbPort?.port
+
   return (
     <>
       {showLocationConflictModal && cutoutIdForSlotName != null ? (
@@ -369,10 +374,10 @@ export function ModulesListItem({
                   : TC_MODULE_LOCATION_OT2
                 : slotName}
             </LegacyStyledText>
-            {attachedModuleMatch?.usbPort.port != null ? (
+            {portDisplay != null ? (
               <LegacyStyledText as="p">
                 {t('usb_port_number', {
-                  port: attachedModuleMatch.usbPort.port,
+                  port: portDisplay,
                 })}
               </LegacyStyledText>
             ) : null}
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx
index 1e3ef81960a..617018f23a5 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx
@@ -93,12 +93,14 @@ export function DeviceDetailsDeckConfiguration({
       ) {
         return acc
       }
-      const displayName = getFixtureDisplayName(
-        cutoutFixtureId,
-        modulesData?.data.find(
-          m => m.serialNumber === opentronsModuleSerialNumber
-        )?.usbPort.port
-      )
+      const usbPort = modulesData?.data.find(
+        m => m.serialNumber === opentronsModuleSerialNumber
+      )?.usbPort
+      const portDisplay =
+        usbPort?.hubPort != null
+          ? `${usbPort.port}.${usbPort.hubPort}`
+          : usbPort?.port
+      const displayName = getFixtureDisplayName(cutoutFixtureId, portDisplay)
       const fixtureGroup =
         deckDef.cutoutFixtures.find(cf => cf.id === cutoutFixtureId)
           ?.fixtureGroup ?? {}
diff --git a/app/src/organisms/LocationConflictModal/ChooseModuleToConfigureModal.tsx b/app/src/organisms/LocationConflictModal/ChooseModuleToConfigureModal.tsx
index b91a63c7610..06c14cb32dd 100644
--- a/app/src/organisms/LocationConflictModal/ChooseModuleToConfigureModal.tsx
+++ b/app/src/organisms/LocationConflictModal/ChooseModuleToConfigureModal.tsx
@@ -36,7 +36,7 @@ import type { AttachedModule } from '@opentrons/api-client'
 const EQUIPMENT_POLL_MS = 5000
 interface ModuleFixtureOption {
   moduleModel: ModuleModel
-  usbPort?: number
+  usbPort?: number | string
   serialNumber?: string
 }
 interface ChooseModuleToConfigureModalProps {
@@ -82,11 +82,17 @@ export const ChooseModuleToConfigureModal = (
     ) ?? []
 
   const connectedOptions: ModuleFixtureOption[] = unconfiguredModuleMatches.map(
-    attachedMod => ({
-      moduleModel: attachedMod.moduleModel,
-      usbPort: attachedMod.usbPort.port,
-      serialNumber: attachedMod.serialNumber,
-    })
+    attachedMod => {
+      const portDisplay =
+        attachedMod.usbPort.hubPort != null
+          ? `${attachedMod.usbPort.port}.${attachedMod.usbPort.hubPort}`
+          : attachedMod.usbPort.port
+      return {
+        moduleModel: attachedMod.moduleModel,
+        usbPort: portDisplay,
+        serialNumber: attachedMod.serialNumber,
+      }
+    }
   )
   const passiveOptions: ModuleFixtureOption[] =
     requiredModuleModel === MAGNETIC_BLOCK_V1