feat(components): migrate LocationIcon to DeckInfoLabel (#15846)

updates and renames the location icon component to reflect helix/ODD styles closes PLAT-370, PLAT-408, RQA-2827
Opentrons · Aug 2, 2024 · 3ef9ad6 · 3ef9ad6
1 parent e60bbcd
commit 3ef9ad6
Show file tree

Hide file tree

Showing 26 changed files with 276 additions and 272 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,12 +9,12 @@ import {
   BORDERS,
   Box,
   COLORS,
+  DeckInfoLabel,
   DIRECTION_COLUMN,
   Flex,
   InfoScreen,
   JUSTIFY_FLEX_START,
   LegacyStyledText,
-  LocationIcon,
   OVERFLOW_HIDDEN,
   SPACING,
   TYPOGRAPHY,
@@ -254,7 +254,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,
@@ -270,7 +270,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}
@@ -280,7 +280,7 @@ export function LabwareListItem(
           </StyledText>
         )}
         {nestedLabwareInfo != null || moduleDisplayName != null ? (
-          <LocationIcon iconName="stacked" />
+          <DeckInfoLabel iconName="stacked" />
         ) : null}
       </Flex>
       <Flex
@@ -340,7 +340,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/ErrorRecoveryFlows/shared/__tests__/LeftColumnLabwareInfo.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/LeftColumnLabwareInfo.test.tsx
@@ -52,7 +52,7 @@ describe('LeftColumnLabwareInfo', () => {
       expect.objectContaining({
         type: 'location',
         labwareName: 'MOCK_LW_NAME',
-        currentLocationProps: { slotName: 'A1' },
+        currentLocationProps: { deckLabel: 'A1' },
       }),
       {}
     )
@@ -82,7 +82,7 @@ describe('LeftColumnLabwareInfo', () => {
 
     expect(vi.mocked(InterventionInfo)).toHaveBeenCalledWith(
       expect.objectContaining({
-        currentLocationProps: { slotName: '' },
+        currentLocationProps: { deckLabel: '' },
       }),
       {}
     )

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,
@@ -148,14 +148,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 &&
@@ -169,7 +171,7 @@ export function ProtocolSetupLabware({
         module.moduleId === selectedLabware.location.moduleId
     )
     if (matchedModule != null) {
-      location = <LocationIcon slotName={matchedModule?.slotName} />
+      location = <DeckInfoLabel deckLabel={matchedModule?.slotName} />
     }
   } else if (
     selectedLabware != null &&
@@ -184,13 +186,13 @@ 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} />
+          location = <DeckInfoLabel deckLabel={moduleUnderAdapter.slotName} />
         }
       }
     }
@@ -492,19 +494,19 @@ function RowLabware({
   let location: JSX.Element | string | null = null
   if (initialLocation === 'offDeck') {
     location = (
-      <LocationIcon slotName={i18n.format(t('off_deck'), 'upperCase')} />
+      <DeckInfoLabel deckLabel={i18n.format(t('off_deck'), 'upperCase')} />
     )
   } 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} />
+        <DeckInfoLabel deckLabel={matchedModule?.slotName} />
       </>
     )
   } else if ('labwareId' in initialLocation) {
@@ -518,14 +520,14 @@ 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
         )
         if (moduleUnderAdapter != null) {
           slotName = moduleUnderAdapter.slotName
-          location = <LocationIcon slotName={moduleUnderAdapter.slotName} />
+          location = <DeckInfoLabel deckLabel={moduleUnderAdapter.slotName} />
         }
       }
     }
@@ -541,7 +543,7 @@ function RowLabware({
       <Flex gridGap={SPACING.spacing4} width="7.6875rem">
         {location}
         {nestedLabwareInfo != null || matchedModule != null ? (
-          <LocationIcon iconName="stacked" />
+          <DeckInfoLabel iconName="stacked" />
         ) : null}
       </Flex>
       <Flex
@@ -596,7 +598,7 @@ function RowLabware({
                 gridGap={SPACING.spacing12}
                 alignItems={ALIGN_CENTER}
               >
-                <LocationIcon
+                <DeckInfoLabel
                   iconName={
                     MODULE_ICON_NAME_BY_TYPE[matchedModule.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"