feat(components): migrate LocationIcon to DeckInfoLabel

updates and renames the location icon component to reflect helix/ODD styles closes PLAT-370, PLAT-408, RQA-2827
Opentrons · Jul 30, 2024 · 1aa2025 · 1aa2025
1 parent ac8ec1a
commit 1aa2025
Show file tree

Hide file tree

Showing 25 changed files with 269 additions and 266 deletions.
diff --git a/app/src/molecules/InterventionModal/InterventionContent/InterventionInfo.tsx b/app/src/molecules/InterventionModal/InterventionContent/InterventionInfo.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { css } from 'styled-components'
 
 import {
-  LocationIcon,
+  DeckInfoLabel,
   Flex,
   Icon,
   COLORS,
@@ -15,14 +15,14 @@ import {
 } from '@opentrons/components'
 import { Divider } from '../../../atoms/structure/Divider'
 
-import type { LocationIconProps } from '@opentrons/components'
+import type { DeckInfoLabelProps } from '@opentrons/components'
 
 export interface InterventionInfoProps {
   type: 'location-arrow-location' | 'location-colon-location' | 'location'
   labwareName: string
   labwareNickname?: string
-  currentLocationProps: LocationIconProps
-  newLocationProps?: LocationIconProps
+  currentLocationProps: DeckInfoLabelProps
+  newLocationProps?: DeckInfoLabelProps
 }
 
 export function InterventionInfo(props: InterventionInfoProps): JSX.Element {
@@ -96,9 +96,9 @@ const buildLocArrowLoc = (props: InterventionInfoProps): JSX.Element => {
           }
         `}
       >
-        <LocationIcon {...currentLocationProps} />
+        <DeckInfoLabel {...currentLocationProps} />
         <Icon name="arrow-right" css={ICON_STYLE} />
-        <LocationIcon {...newLocationProps} />
+        <DeckInfoLabel {...newLocationProps} />
       </Flex>
     )
   } else {
@@ -111,7 +111,7 @@ const buildLoc = ({
 }: InterventionInfoProps): JSX.Element => {
   return (
     <Flex gridGap={SPACING.spacing8}>
-      <LocationIcon {...currentLocationProps} />
+      <DeckInfoLabel {...currentLocationProps} />
     </Flex>
   )
 }
@@ -130,9 +130,9 @@ const buildLocColonLoc = (props: InterventionInfoProps): JSX.Element => {
           }
         `}
       >
-        <LocationIcon {...currentLocationProps} />
+        <DeckInfoLabel {...currentLocationProps} />
         <Icon name="colon" css={ICON_STYLE} />
-        <LocationIcon {...newLocationProps} />
+        <DeckInfoLabel {...newLocationProps} />
       </Flex>
     )
   } else {

diff --git a/app/src/organisms/Devices/HistoricalProtocolRunDrawer.tsx b/app/src/organisms/Devices/HistoricalProtocolRunDrawer.tsx
@@ -9,14 +9,14 @@ import {
   BORDERS,
   Box,
   COLORS,
+  DeckInfoLabel,
   DIRECTION_COLUMN,
   Flex,
   Icon,
   InfoScreen,
   JUSTIFY_FLEX_START,
   LegacyStyledText,
   Link,
-  LocationIcon,
   OVERFLOW_HIDDEN,
   SPACING,
   TYPOGRAPHY,
@@ -272,7 +272,7 @@ export function HistoricalProtocolRunDrawer(
                   gridGap={SPACING.spacing4}
                   alignItems={ALIGN_CENTER}
                 >
-                  <LocationIcon slotName={offset.location.slotName} />
+                  <DeckInfoLabel deckLabel={offset.location.slotName} />
                   <LegacyStyledText as="p">
                     {offset.location.moduleModel != null
                       ? getModuleDisplayName(offset.location.moduleModel)

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx
@@ -6,8 +6,8 @@ import {
   ALIGN_CENTER,
   BORDERS,
   Btn,
-  LocationIcon,
   COLORS,
+  DeckInfoLabel,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   DISPLAY_FLEX,
@@ -272,7 +272,7 @@ export function LabwareListItem(
     <LabwareRow>
       <Flex alignItems={ALIGN_CENTER} width="80px" gridGap={SPACING.spacing2}>
         {slotInfo != null && isFlex ? (
-          <LocationIcon slotName={slotInfo} />
+          <DeckInfoLabel deckLabel={slotInfo} />
         ) : (
           <StyledText
             css={TYPOGRAPHY.pSemiBold}
@@ -282,7 +282,7 @@ export function LabwareListItem(
           </StyledText>
         )}
         {nestedLabwareInfo != null || moduleDisplayName != null ? (
-          <LocationIcon iconName="stacked" />
+          <DeckInfoLabel iconName="stacked" />
         ) : null}
       </Flex>
       <Flex
@@ -342,7 +342,7 @@ export function LabwareListItem(
             >
               <Flex gridGap={SPACING.spacing12} alignItems={ALIGN_CENTER}>
                 {moduleType != null ? (
-                  <LocationIcon
+                  <DeckInfoLabel
                     iconName={MODULE_ICON_NAME_BY_TYPE[moduleType]}
                   />
                 ) : null}

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/__tests__/LabwareListItem.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/__tests__/LabwareListItem.test.tsx
@@ -172,7 +172,7 @@ describe('LabwareListItem', () => {
     })
     screen.getByText('Mock Labware Definition')
     screen.getByTestId('slot_info_7')
-    screen.getByTestId('LocationIcon_stacked')
+    screen.getByTestId('DeckInfoLabel_stacked')
     screen.getByText('Magnetic Module GEN1')
     const button = screen.getByText('Secure labware instructions')
     fireEvent.click(button)
@@ -207,7 +207,7 @@ describe('LabwareListItem', () => {
     })
     screen.getByText('Mock Labware Definition')
     screen.getByTestId('slot_info_7')
-    screen.getByTestId('LocationIcon_stacked')
+    screen.getByTestId('DeckInfoLabel_stacked')
     screen.getByText('Temperature Module GEN1')
     screen.getByText('nickName')
   })

diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/LeftColumnLabwareInfo.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/LeftColumnLabwareInfo.tsx
@@ -44,7 +44,7 @@ export function LeftColumnLabwareInfo({
         type,
         labwareName: failedLabwareName ?? '',
         labwareNickname: failedLabwareNickname ?? '',
-        currentLocationProps: { slotName: buildLabwareLocationSlotName() },
+        currentLocationProps: { deckLabel: buildLabwareLocationSlotName() },
       }}
       notificationProps={
         bannerText ? { type: 'alert', heading: bannerText } : undefined

diff --git a/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx b/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx
@@ -7,12 +7,12 @@ import {
   BORDERS,
   Box,
   COLORS,
+  DeckInfoLabel,
   DIRECTION_COLUMN,
   DISPLAY_NONE,
   Flex,
   Icon,
   LabwareRender,
-  LocationIcon,
   Module,
   MoveLabwareOnDeck,
   RESPONSIVENESS,
@@ -256,11 +256,11 @@ function LabwareDisplayLocation(
   let displayLocation: React.ReactNode = ''
   if (location === 'offDeck') {
     // TODO(BC, 08/28/23): remove this string cast after update i18next to >23 (see https://www.i18next.com/overview/typescript#argument-of-type-defaulttfuncreturn-is-not-assignable-to-parameter-of-type-xyz)
-    displayLocation = <LocationIcon slotName={String(t('offdeck'))} />
+    displayLocation = <DeckInfoLabel deckLabel={String(t('offdeck'))} />
   } else if ('slotName' in location) {
-    displayLocation = <LocationIcon slotName={location.slotName} />
+    displayLocation = <DeckInfoLabel deckLabel={location.slotName} />
   } else if ('addressableAreaName' in location) {
-    displayLocation = <LocationIcon slotName={location.addressableAreaName} />
+    displayLocation = <DeckInfoLabel deckLabel={location.addressableAreaName} />
   } else if ('moduleId' in location) {
     const moduleModel = getModuleModelFromRunData(
       protocolData,

diff --git a/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx b/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx
@@ -17,11 +17,11 @@ import {
   ALIGN_FLEX_END,
   BORDERS,
   COLORS,
+  DeckInfoLabel,
   DIRECTION_COLUMN,
   Flex,
   Icon,
   JUSTIFY_SPACE_BETWEEN,
-  LocationIcon,
   MODULE_ICON_NAME_BY_TYPE,
   OVERFLOW_AUTO,
   PrimaryButton,
@@ -373,9 +373,9 @@ export const TerseOffsetTable = (props: OffsetTableProps): JSX.Element => {
           return (
             <TerseTableRow key={index}>
               <TerseTableDatum>
-                <LocationIcon slotName={location.slotName} />
+                <DeckInfoLabel deckLabel={location.slotName} />
                 {location.moduleModel != null ? (
-                  <LocationIcon
+                  <DeckInfoLabel
                     iconName={
                       MODULE_ICON_NAME_BY_TYPE[
                         getModuleType(location.moduleModel)

diff --git a/app/src/organisms/ProtocolSetupLabware/index.tsx b/app/src/organisms/ProtocolSetupLabware/index.tsx
@@ -9,14 +9,14 @@ import {
   BORDERS,
   Box,
   COLORS,
+  DeckInfoLabel,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   Flex,
   Icon,
   JUSTIFY_SPACE_BETWEEN,
   JUSTIFY_SPACE_EVENLY,
   LabwareRender,
-  LocationIcon,
   MODULE_ICON_NAME_BY_TYPE,
   SPACING,
   LegacyStyledText,
@@ -147,14 +147,16 @@ export function ProtocolSetupLabware({
     typeof selectedLabware.location === 'object' &&
     'slotName' in selectedLabware?.location
   ) {
-    location = <LocationIcon slotName={selectedLabware?.location.slotName} />
+    location = <DeckInfoLabel deckLabel={selectedLabware?.location.slotName} />
   } else if (
     selectedLabware != null &&
     typeof selectedLabware.location === 'object' &&
     'addressableAreaName' in selectedLabware?.location
   ) {
     location = (
-      <LocationIcon slotName={selectedLabware?.location.addressableAreaName} />
+      <DeckInfoLabel
+        deckLabel={selectedLabware?.location.addressableAreaName}
+      />
     )
   } else if (
     selectedLabware != null &&
@@ -170,8 +172,8 @@ export function ProtocolSetupLabware({
     if (matchedModule != null) {
       location = (
         <>
-          <LocationIcon slotName={matchedModule?.slotName} />
-          <LocationIcon
+          <DeckInfoLabel deckLabel={matchedModule?.slotName} />
+          <DeckInfoLabel
             iconName={
               MODULE_ICON_NAME_BY_TYPE[matchedModule?.moduleDef.moduleType]
             }
@@ -192,16 +194,16 @@ export function ProtocolSetupLabware({
     )?.params.location
     if (adapterLocation != null && adapterLocation !== 'offDeck') {
       if ('slotName' in adapterLocation) {
-        location = <LocationIcon slotName={adapterLocation.slotName} />
+        location = <DeckInfoLabel deckLabel={adapterLocation.slotName} />
       } else if ('moduleId' in adapterLocation) {
         const moduleUnderAdapter = attachedProtocolModuleMatches.find(
           module => module.moduleId === adapterLocation.moduleId
         )
         if (moduleUnderAdapter != null) {
           location = (
             <>
-              <LocationIcon slotName={moduleUnderAdapter.slotName} />
-              <LocationIcon
+              <DeckInfoLabel deckLabel={moduleUnderAdapter.slotName} />
+              <DeckInfoLabel
                 iconName={
                   MODULE_ICON_NAME_BY_TYPE[
                     moduleUnderAdapter.moduleDef.moduleType
@@ -510,16 +512,16 @@ function RowLabware({
     location = t('off_deck')
   } else if ('slotName' in initialLocation) {
     slotName = initialLocation.slotName
-    location = <LocationIcon slotName={initialLocation.slotName} />
+    location = <DeckInfoLabel deckLabel={initialLocation.slotName} />
   } else if ('addressableAreaName' in initialLocation) {
     slotName = initialLocation.addressableAreaName
-    location = <LocationIcon slotName={initialLocation.addressableAreaName} />
+    location = <DeckInfoLabel deckLabel={initialLocation.addressableAreaName} />
   } else if (matchedModuleType != null && matchedModule?.slotName != null) {
     slotName = matchedModule.slotName
     location = (
       <>
-        <LocationIcon slotName={matchedModule?.slotName} />
-        <LocationIcon iconName={MODULE_ICON_NAME_BY_TYPE[matchedModuleType]} />
+        <DeckInfoLabel deckLabel={matchedModule?.slotName} />
+        <DeckInfoLabel iconName={MODULE_ICON_NAME_BY_TYPE[matchedModuleType]} />
       </>
     )
   } else if ('labwareId' in initialLocation) {
@@ -533,7 +535,7 @@ function RowLabware({
     if (adapterLocation != null && adapterLocation !== 'offDeck') {
       if ('slotName' in adapterLocation) {
         slotName = adapterLocation.slotName
-        location = <LocationIcon slotName={adapterLocation.slotName} />
+        location = <DeckInfoLabel deckLabel={adapterLocation.slotName} />
       } else if ('moduleId' in adapterLocation) {
         const moduleUnderAdapter = attachedProtocolModules.find(
           module => module.moduleId === adapterLocation.moduleId
@@ -542,8 +544,8 @@ function RowLabware({
           slotName = moduleUnderAdapter.slotName
           location = (
             <>
-              <LocationIcon slotName={moduleUnderAdapter.slotName} />
-              <LocationIcon
+              <DeckInfoLabel deckLabel={moduleUnderAdapter.slotName} />
+              <DeckInfoLabel
                 iconName={
                   MODULE_ICON_NAME_BY_TYPE[
                     moduleUnderAdapter.moduleDef.moduleType

diff --git a/app/src/organisms/ProtocolSetupLiquids/LiquidDetails.tsx b/app/src/organisms/ProtocolSetupLiquids/LiquidDetails.tsx
@@ -4,10 +4,10 @@ import { useTranslation } from 'react-i18next'
 import {
   BORDERS,
   COLORS,
+  DeckInfoLabel,
   DIRECTION_ROW,
   Flex,
   Icon,
-  LocationIcon,
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
@@ -105,7 +105,7 @@ export function LiquidDetails(props: LiquidDetailsProps): JSX.Element {
               >
                 <TableDatum>
                   <Flex>
-                    <LocationIcon slotName={slotName} />
+                    <DeckInfoLabel deckLabel={slotName} />
                   </Flex>
                 </TableDatum>
                 <TableDatum>

diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx
@@ -5,10 +5,10 @@ import {
   BORDERS,
   COLORS,
   Chip,
+  DeckInfoLabel,
   DIRECTION_ROW,
   Flex,
   JUSTIFY_SPACE_BETWEEN,
-  LocationIcon,
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
@@ -219,7 +219,7 @@ function FixtureTableItem({
           </LegacyStyledText>
         </Flex>
         <Flex flex="2 0 0" alignItems={ALIGN_CENTER}>
-          <LocationIcon slotName={getCutoutDisplayName(cutoutId)} />
+          <DeckInfoLabel deckLabel={getCutoutDisplayName(cutoutId)} />
         </Flex>
         <Flex
           flex="4 0 0"

diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx
@@ -7,9 +7,9 @@ import {
   BORDERS,
   COLORS,
   Chip,
+  DeckInfoLabel,
   Flex,
   JUSTIFY_SPACE_BETWEEN,
-  LocationIcon,
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
@@ -281,8 +281,8 @@ function ModuleTableItem({
           </LegacyStyledText>
         </Flex>
         <Flex alignItems={ALIGN_CENTER} flex="2 0 0">
-          <LocationIcon
-            slotName={
+          <DeckInfoLabel
+            deckLabel={
               getModuleType(module.moduleDef.model) === THERMOCYCLER_MODULE_TYPE
                 ? TC_MODULE_LOCATION_OT3
                 : module.slotName

diff --git a/app/src/pages/ProtocolDetails/Hardware.tsx b/app/src/pages/ProtocolDetails/Hardware.tsx
@@ -5,8 +5,8 @@ import {
   ALIGN_CENTER,
   BORDERS,
   COLORS,
+  DeckInfoLabel,
   Flex,
-  LocationIcon,
   ModuleIcon,
   SPACING,
   LegacyStyledText,
@@ -113,10 +113,12 @@ function HardwareItem({
     </LegacyStyledText>
   )
   if (hardware.hardwareType === 'module') {
-    location = <LocationIcon slotName={hardware.slot} />
+    location = <DeckInfoLabel deckLabel={hardware.slot} />
   } else if (hardware.hardwareType === 'fixture') {
     location = (
-      <LocationIcon slotName={getCutoutDisplayName(hardware.location.cutout)} />
+      <DeckInfoLabel
+        deckLabel={getCutoutDisplayName(hardware.location.cutout)}
+      />
     )
   }
   const isMagneticBlockFixture =