fix(app): show tiprack nickname in spotlight window in PV (#20796)

closes RQA-5155

Author: jerader

…dow/TipPickupSlot/TipPickupSlot.test.tsx …kupSlot/__tests__/TipPickupSlot.test.tsxapp/src/organisms/Desktop/ProtocolVisualization/SecondWindow/TipPickupSlot/TipPickupSlot.test.tsx renamed to app/src/organisms/Desktop/ProtocolVisualization/SecondWindow/TipPickupSlot/__tests__/TipPickupSlot.test.tsx app/src/organisms/Desktop/ProtocolVisualization/SecondWindow/TipPickupSlot/TipPickupSlot.test.tsx renamed to app/src/organisms/Desktop/ProtocolVisualization/SecondWindow/TipPickupSlot/__tests__/TipPickupSlot.test.tsx

@@ -7,12 +7,13 @@ import { CLEAN, DIRTY, EMPTY } from '@opentrons/step-generation'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 
-import { TipPickupSlot } from './'
+import { TipPickupSlot } from '..'
 
 import type { ComponentProps } from 'react'
 import type * as OpentronsComponents from '@opentrons/components'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
-import type { LabwareEntity, RobotState } from '@opentrons/step-generation'
+import type { RobotState } from '@opentrons/step-generation'
+import type { LabwareEntityExtended } from '../../../DeckView'
 
 vi.mock('@opentrons/components', async importOriginal => {
   const actual = await importOriginal<typeof OpentronsComponents>()
@@ -38,12 +39,13 @@ const createMockLabwareDef = (): LabwareDefinition2 => {
   } as LabwareDefinition2
 }
 
-const createMockTiprackEntity = (): LabwareEntity => {
+const createMockTiprackEntity = (): LabwareEntityExtended => {
   return {
     id: MOCK_TIPRACK_ID,
     labwareDefURI: 'opentrons/fixture_tiprack_300_ul/1',
     def: createMockLabwareDef(),
     pythonName: 'mock_tiprack',
+    nickName: 'mockNickname',
   }
 }
 
@@ -95,7 +97,7 @@ describe('TipPickupSlot', () => {
   it('should render TipPickupSlot', () => {
     render(props)
     screen.getByText(MOCK_SLOT)
-    screen.getByText('Mock 300µL Tiprack')
+    screen.getByText('mockNickname')
     screen.getByText('mock LabwareRender')
     screen.getByTestId('robot-workspace')
   })

app/src/organisms/Desktop/ProtocolVisualization/SecondWindow/TipPickupSlot/index.tsx

@@ -16,17 +16,18 @@ import { getMissingTips } from '../../utils/getMissingTips'
 import styles from './tippickupslot.module.css'
 
 import type { TipType } from '@opentrons/components'
-import type { LabwareEntity, RobotState } from '@opentrons/step-generation'
+import type { RobotState } from '@opentrons/step-generation'
+import type { LabwareEntityExtended } from '../../DeckView'
 
 interface TipPickupSlotProps {
-  tiprackEntity: LabwareEntity
+  tiprackEntity: LabwareEntityExtended
   robotState: RobotState
 }
 
 export function TipPickupSlot(props: TipPickupSlotProps): JSX.Element {
   const { tiprackEntity, robotState } = props
   const { t } = useTranslation('protocol_visualization')
-  const { id, def } = tiprackEntity
+  const { id, def, nickName } = tiprackEntity
   const { tipState, labware } = robotState
   const tipStateInfo = tipState.tipracks[id]
   const tipStatusByWellName =
@@ -50,6 +51,9 @@ export function TipPickupSlot(props: TipPickupSlotProps): JSX.Element {
     <div className={styles.container}>
       <div className={styles.header}>
         <RobotInfoLabel deckLabel={slot} />
+        {nickName != null ? (
+          <StyledText desktopStyle="bodyDefaultSemiBold">{nickName}</StyledText>
+        ) : null}
         <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
           {def.metadata.displayName}
         </StyledText>

app/src/organisms/Desktop/ProtocolVisualization/SlotDetails/index.tsx

@@ -13,12 +13,17 @@ import { TipDisposalSlot } from '../SecondWindow/TipDisposalSlot'
 import { TipPickupSlot } from '../SecondWindow/TipPickupSlot'
 import styles from './slotdetails.module.css'
 
-import type { Liquid, ProtocolAnalysisOutput } from '@opentrons/shared-data'
+import type {
+  Liquid,
+  LoadLabwareRunTimeCommand,
+  ProtocolAnalysisOutput,
+} from '@opentrons/shared-data'
 import type {
   HopperLocationMapKey,
   InvariantContext,
   RobotState,
 } from '@opentrons/step-generation'
+import type { LabwareEntityExtended } from '../DeckView'
 
 interface SlotDetailsProps {
   slotId: string
@@ -37,6 +42,9 @@ export function SlotDetails(props: SlotDetailsProps): JSX.Element {
     moduleEntities,
   } = invariantContext
   const { commands } = analysis
+  const loadLabwareCommands = commands.filter(
+    command => command.commandType === 'loadLabware'
+  )
   const stackOfLabwareOnSlot = getFullStackFromLabwares(labware, slotId)
   const isHopperSlot = HOPPER_FAKE_LOCATIONS.includes(slotId)
   const mappedSlot = isHopperSlot
@@ -45,6 +53,22 @@ export function SlotDetails(props: SlotDetailsProps): JSX.Element {
   const moduleOnSlot = Object.entries(modules).find(
     ([id, module]) => module.slot === mappedSlot
   )
+  const labwareEntitiesExtended = Object.entries(labwareEntities).reduce(
+    (acc: Record<string, LabwareEntityExtended>, [key, entity]) => {
+      const matchingCommand =
+        loadLabwareCommands.find(
+          (command): command is LoadLabwareRunTimeCommand =>
+            command.result?.labwareId === entity.id
+        ) ?? null
+      acc[key] = {
+        ...entity,
+        nickName: matchingCommand?.params?.displayName ?? null,
+      }
+      return acc
+    },
+    {}
+  )
+
   const topMostLabwareOnSlot =
     stackOfLabwareOnSlot?.length > 1 ? stackOfLabwareOnSlot[0] : null
   const isTopmostLabwareATiprack =
@@ -81,7 +105,7 @@ export function SlotDetails(props: SlotDetailsProps): JSX.Element {
       case 'tiprack':
         return (
           <TipPickupSlot
-            tiprackEntity={labwareEntities[topMostLabwareOnSlot]}
+            tiprackEntity={labwareEntitiesExtended[topMostLabwareOnSlot]}
             robotState={robotState}
           />
         )