feat(app): Show labware versions in LPC (#18870)

Closes EXEC-1592

Author: mjhuff

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

@@ -187,6 +187,7 @@
   "total_offsets": "Total Offsets",
   "try_again": "Try again",
   "unsaved_changes_will_be_lost": "Unsaved changes will be lost",
+  "version_number": "v{{version}}",
   "view_current_offsets": "view current offsets",
   "view_data": "View data",
   "view_labware_list": "View labware list",

app/src/organisms/LabwareOffsetsTable/AccordionHeader.tsx

@@ -10,8 +10,10 @@ import {
   RESPONSIVENESS,
   SPACING,
   StyledText,
+  truncateString,
 } from '@opentrons/components'
 
+import { getIsOnDevice } from '/app/redux/config'
 import { selectTotalOrMissingOffsetRequiredCountForLwCopy } from '/app/redux/protocol-runs'
 
 import type { TFunction } from 'i18next'
@@ -20,26 +22,40 @@ export interface AccordionHeaderProps {
   runId: string
   uri: string
   lwDisplayName: string
+  lwVersion: number
 }
 
 export function AccordionHeader({
   lwDisplayName,
   runId,
   uri,
+  lwVersion,
 }: AccordionHeaderProps): JSX.Element {
   const { t } = useTranslation('labware_position_check')
   const offsetCopy = useSelector(
     selectTotalOrMissingOffsetRequiredCountForLwCopy(runId, uri, t as TFunction)
   )
+  const isOnDevice = useSelector(getIsOnDevice)
+  const nameString = isOnDevice
+    ? truncateString(lwDisplayName, 43)
+    : lwDisplayName
 
   return (
     <Flex css={ACCORDION_HEADER_CONTAINER_STYLE}>
-      <StyledText
-        oddStyle="bodyTextSemiBold"
-        desktopStyle="bodyDefaultSemiBold"
-      >
-        {lwDisplayName}
-      </StyledText>
+      <Flex css={LABWARE_COPY_CONTAINER_STYLE}>
+        <StyledText
+          oddStyle="bodyTextSemiBold"
+          desktopStyle="bodyDefaultSemiBold"
+        >
+          {nameString}
+        </StyledText>
+        <StyledText
+          oddStyle="bodyTextRegular"
+          desktopStyle="bodyDefaultRegular"
+        >
+          {t('version_number', { version: lwVersion })}
+        </StyledText>
+      </Flex>
       <StyledText
         css={OFFSET_COPY_STYLE}
         oddStyle="bodyTextRegular"
@@ -57,6 +73,10 @@ const ACCORDION_HEADER_CONTAINER_STYLE = css`
   justify-content: ${JUSTIFY_SPACE_BETWEEN};
 `
 
+const LABWARE_COPY_CONTAINER_STYLE = css`
+  gap: ${SPACING.spacing8};
+`
+
 const OFFSET_COPY_STYLE = css`
   width: 6.85rem;
   text-wrap: ${NO_WRAP};

app/src/organisms/LabwareOffsetsTable/index.tsx

@@ -61,6 +61,7 @@ export function LabwareOffsetsTable(
                 {...props}
                 uri={aLwInfo.uri}
                 lwDisplayName={aLwInfo.info.displayName}
+                lwVersion={aLwInfo.info.version}
               />
             }
           >

app/src/organisms/LabwarePositionCheck/LPCFlows/hooks/useLPCLabwareInfo/getLPCLabwareInfoFrom/index.ts

@@ -1,4 +1,8 @@
-import { getLabwareDefURI, getLabwareDisplayName } from '@opentrons/shared-data'
+import {
+  getLabwareDefURI,
+  getLabwareDisplayName,
+  splitLabwareDefURI,
+} from '@opentrons/shared-data'
 
 import {
   getTotalCountNonHardCodedLocationSpecificOffsets,
@@ -64,6 +68,7 @@ function getLabwareInfoRecords(
       labwareDetails[uri] = {
         id: getALabwareIdFromUri({ ...params, uri }),
         displayName: getDisplayNameFromUri({ ...params, uri }),
+        version: splitLabwareDefURI(uri).version,
         defaultOffsetDetails: getDefaultOffsetDetailsForLabware({
           ...params,
           uri,

app/src/organisms/LabwarePositionCheck/__fixtures__/mockLabwareInfo.ts

@@ -3,6 +3,7 @@ import type { LwGeometryDetails } from '/app/redux/protocol-runs'
 export const mockLabwareInfo: Record<string, LwGeometryDetails> = {
   'labware-uri-1': {
     id: 'labware-1',
+    version: 1,
     displayName: 'Labware 1',
     defaultOffsetDetails: {
       existingOffset: null,
@@ -22,6 +23,7 @@ export const mockLabwareInfo: Record<string, LwGeometryDetails> = {
   },
   'labware-uri-2': {
     id: 'labware-2',
+    version: 2,
     displayName: 'Labware 2',
     defaultOffsetDetails: {
       existingOffset: {

app/src/organisms/LabwarePositionCheck/steps/HandleLabware/LPCLabwareList.tsx

@@ -20,6 +20,7 @@ import {
   SPACING,
   StyledText,
   TextListTableContent,
+  truncateString,
 } from '@opentrons/components'
 
 import { LPCContentContainer } from '/app/organisms/LabwarePositionCheck/LPCContentContainer'
@@ -199,9 +200,10 @@ function LabwareItem({
     >
       <Flex css={CONTENT_CONTAINER_STYLE}>
         <Flex css={TEXT_CONTAINER_STYLE}>
-          <StyledText oddStyle="level4HeaderSemiBold">
-            {info.displayName}
-          </StyledText>
+          <LabwareInfoCopy
+            displayName={info.displayName}
+            version={info.version}
+          />
           <StyledText oddStyle="bodyTextRegular" css={SUBTEXT_STYLE}>
             {offsetCopy}
           </StyledText>
@@ -211,7 +213,12 @@ function LabwareItem({
     </ListButton>
   ) : (
     <RadioButton
-      buttonLabel={info.displayName}
+      buttonLabel={
+        <LabwareInfoCopy
+          displayName={info.displayName}
+          version={info.version}
+        />
+      }
       buttonValue={info.displayName}
       largeDesktopBorderRadius={true}
       buttonSubLabel={{ label: offsetCopy }}
@@ -223,13 +230,44 @@ function LabwareItem({
   )
 }
 
+function LabwareInfoCopy({
+  displayName,
+  version,
+}: {
+  displayName: LwGeometryDetails['displayName']
+  version: LwGeometryDetails['version']
+}): JSX.Element {
+  const { t } = useTranslation('labware_position_check')
+  const isOnDevice = useSelector(getIsOnDevice)
+  const nameString = isOnDevice ? truncateString(displayName, 40) : displayName
+
+  return (
+    <Flex css={LABWARE_COPY_CONTAINER_STYLE}>
+      <StyledText
+        desktopStyle="bodyDefaultSemiBold"
+        oddStyle="level4HeaderSemiBold"
+      >
+        {nameString}
+      </StyledText>
+      <StyledText desktopStyle="bodyDefaultRegular" oddStyle="bodyTextRegular">
+        {t('version_number', { version })}
+      </StyledText>
+    </Flex>
+  )
+}
+
 const CONTENT_CONTAINER_STYLE = css`
   width: 100%;
   grid-gap: ${SPACING.spacing24};
   justify-content: ${JUSTIFY_SPACE_BETWEEN};
   align-items: ${ALIGN_CENTER};
 `
 
+const LABWARE_COPY_CONTAINER_STYLE = css`
+  gap: ${SPACING.spacing8};
+  align-items: ${ALIGN_CENTER};
+`
+
 const TEXT_CONTAINER_STYLE = css`
   width: 100%;
   flex-grow: 1;

app/src/redux/protocol-runs/types/lpc/labware.ts

@@ -49,6 +49,7 @@ export interface ConflictTimestampInfo {
 export interface LwGeometryDetails {
   id: string
   displayName: string
+  version: number
   defaultOffsetDetails: DefaultOffsetDetails
   locationSpecificOffsetDetails: LocationSpecificOffsetDetails[]
 }