Skip to content

Commit 1aa2025

Browse files
brenthagenbrenthagen
committed
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
1 parent ac8ec1a commit 1aa2025

File tree

25 files changed

+269
-266
lines changed

25 files changed

+269
-266
lines changed

‎app/src/molecules/InterventionModal/InterventionContent/InterventionInfo.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react'
22
import { css } from 'styled-components'
33

44
import {
5-
LocationIcon,
5+
DeckInfoLabel,
66
Flex,
77
Icon,
88
COLORS,
@@ -15,14 +15,14 @@ import {
1515
} from '@opentrons/components'
1616
import { Divider } from '../../../atoms/structure/Divider'
1717

18-
import type { LocationIconProps } from '@opentrons/components'
18+
import type { DeckInfoLabelProps } from '@opentrons/components'
1919

2020
export interface InterventionInfoProps {
2121
type: 'location-arrow-location' | 'location-colon-location' | 'location'
2222
labwareName: string
2323
labwareNickname?: string
24-
currentLocationProps: LocationIconProps
25-
newLocationProps?: LocationIconProps
24+
currentLocationProps: DeckInfoLabelProps
25+
newLocationProps?: DeckInfoLabelProps
2626
}
2727

2828
export function InterventionInfo(props: InterventionInfoProps): JSX.Element {
@@ -96,9 +96,9 @@ const buildLocArrowLoc = (props: InterventionInfoProps): JSX.Element => {
9696
}
9797
`}
9898
>
99-
<LocationIcon {...currentLocationProps} />
99+
<DeckInfoLabel {...currentLocationProps} />
100100
<Icon name="arrow-right" css={ICON_STYLE} />
101-
<LocationIcon {...newLocationProps} />
101+
<DeckInfoLabel {...newLocationProps} />
102102
</Flex>
103103
)
104104
} else {
@@ -111,7 +111,7 @@ const buildLoc = ({
111111
}: InterventionInfoProps): JSX.Element => {
112112
return (
113113
<Flex gridGap={SPACING.spacing8}>
114-
<LocationIcon {...currentLocationProps} />
114+
<DeckInfoLabel {...currentLocationProps} />
115115
</Flex>
116116
)
117117
}
@@ -130,9 +130,9 @@ const buildLocColonLoc = (props: InterventionInfoProps): JSX.Element => {
130130
}
131131
`}
132132
>
133-
<LocationIcon {...currentLocationProps} />
133+
<DeckInfoLabel {...currentLocationProps} />
134134
<Icon name="colon" css={ICON_STYLE} />
135-
<LocationIcon {...newLocationProps} />
135+
<DeckInfoLabel {...newLocationProps} />
136136
</Flex>
137137
)
138138
} else {

‎app/src/organisms/Devices/HistoricalProtocolRunDrawer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ import {
99
BORDERS,
1010
Box,
1111
COLORS,
12+
DeckInfoLabel,
1213
DIRECTION_COLUMN,
1314
Flex,
1415
Icon,
1516
InfoScreen,
1617
JUSTIFY_FLEX_START,
1718
LegacyStyledText,
1819
Link,
19-
LocationIcon,
2020
OVERFLOW_HIDDEN,
2121
SPACING,
2222
TYPOGRAPHY,
@@ -272,7 +272,7 @@ export function HistoricalProtocolRunDrawer(
272272
gridGap={SPACING.spacing4}
273273
alignItems={ALIGN_CENTER}
274274
>
275-
<LocationIcon slotName={offset.location.slotName} />
275+
<DeckInfoLabel deckLabel={offset.location.slotName} />
276276
<LegacyStyledText as="p">
277277
{offset.location.moduleModel != null
278278
? getModuleDisplayName(offset.location.moduleModel)

‎app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import {
66
ALIGN_CENTER,
77
BORDERS,
88
Btn,
9-
LocationIcon,
109
COLORS,
10+
DeckInfoLabel,
1111
DIRECTION_COLUMN,
1212
DIRECTION_ROW,
1313
DISPLAY_FLEX,
@@ -272,7 +272,7 @@ export function LabwareListItem(
272272
<LabwareRow>
273273
<Flex alignItems={ALIGN_CENTER} width="80px" gridGap={SPACING.spacing2}>
274274
{slotInfo != null && isFlex ? (
275-
<LocationIcon slotName={slotInfo} />
275+
<DeckInfoLabel deckLabel={slotInfo} />
276276
) : (
277277
<StyledText
278278
css={TYPOGRAPHY.pSemiBold}
@@ -282,7 +282,7 @@ export function LabwareListItem(
282282
</StyledText>
283283
)}
284284
{nestedLabwareInfo != null || moduleDisplayName != null ? (
285-
<LocationIcon iconName="stacked" />
285+
<DeckInfoLabel iconName="stacked" />
286286
) : null}
287287
</Flex>
288288
<Flex
@@ -342,7 +342,7 @@ export function LabwareListItem(
342342
>
343343
<Flex gridGap={SPACING.spacing12} alignItems={ALIGN_CENTER}>
344344
{moduleType != null ? (
345-
<LocationIcon
345+
<DeckInfoLabel
346346
iconName={MODULE_ICON_NAME_BY_TYPE[moduleType]}
347347
/>
348348
) : null}

‎app/src/organisms/Devices/ProtocolRun/SetupLabware/__tests__/LabwareListItem.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ describe('LabwareListItem', () => {
172172
})
173173
screen.getByText('Mock Labware Definition')
174174
screen.getByTestId('slot_info_7')
175-
screen.getByTestId('LocationIcon_stacked')
175+
screen.getByTestId('DeckInfoLabel_stacked')
176176
screen.getByText('Magnetic Module GEN1')
177177
const button = screen.getByText('Secure labware instructions')
178178
fireEvent.click(button)
@@ -207,7 +207,7 @@ describe('LabwareListItem', () => {
207207
})
208208
screen.getByText('Mock Labware Definition')
209209
screen.getByTestId('slot_info_7')
210-
screen.getByTestId('LocationIcon_stacked')
210+
screen.getByTestId('DeckInfoLabel_stacked')
211211
screen.getByText('Temperature Module GEN1')
212212
screen.getByText('nickName')
213213
})

‎app/src/organisms/ErrorRecoveryFlows/shared/LeftColumnLabwareInfo.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export function LeftColumnLabwareInfo({
4444
type,
4545
labwareName: failedLabwareName ?? '',
4646
labwareNickname: failedLabwareNickname ?? '',
47-
currentLocationProps: { slotName: buildLabwareLocationSlotName() },
47+
currentLocationProps: { deckLabel: buildLabwareLocationSlotName() },
4848
}}
4949
notificationProps={
5050
bannerText ? { type: 'alert', heading: bannerText } : undefined

‎app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ import {
77
BORDERS,
88
Box,
99
COLORS,
10+
DeckInfoLabel,
1011
DIRECTION_COLUMN,
1112
DISPLAY_NONE,
1213
Flex,
1314
Icon,
1415
LabwareRender,
15-
LocationIcon,
1616
Module,
1717
MoveLabwareOnDeck,
1818
RESPONSIVENESS,
@@ -256,11 +256,11 @@ function LabwareDisplayLocation(
256256
let displayLocation: React.ReactNode = ''
257257
if (location === 'offDeck') {
258258
// 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)
259-
displayLocation = <LocationIcon slotName={String(t('offdeck'))} />
259+
displayLocation = <DeckInfoLabel deckLabel={String(t('offdeck'))} />
260260
} else if ('slotName' in location) {
261-
displayLocation = <LocationIcon slotName={location.slotName} />
261+
displayLocation = <DeckInfoLabel deckLabel={location.slotName} />
262262
} else if ('addressableAreaName' in location) {
263-
displayLocation = <LocationIcon slotName={location.addressableAreaName} />
263+
displayLocation = <DeckInfoLabel deckLabel={location.addressableAreaName} />
264264
} else if ('moduleId' in location) {
265265
const moduleModel = getModuleModelFromRunData(
266266
protocolData,

‎app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ import {
1717
ALIGN_FLEX_END,
1818
BORDERS,
1919
COLORS,
20+
DeckInfoLabel,
2021
DIRECTION_COLUMN,
2122
Flex,
2223
Icon,
2324
JUSTIFY_SPACE_BETWEEN,
24-
LocationIcon,
2525
MODULE_ICON_NAME_BY_TYPE,
2626
OVERFLOW_AUTO,
2727
PrimaryButton,
@@ -373,9 +373,9 @@ export const TerseOffsetTable = (props: OffsetTableProps): JSX.Element => {
373373
return (
374374
<TerseTableRow key={index}>
375375
<TerseTableDatum>
376-
<LocationIcon slotName={location.slotName} />
376+
<DeckInfoLabel deckLabel={location.slotName} />
377377
{location.moduleModel != null ? (
378-
<LocationIcon
378+
<DeckInfoLabel
379379
iconName={
380380
MODULE_ICON_NAME_BY_TYPE[
381381
getModuleType(location.moduleModel)

‎app/src/organisms/ProtocolSetupLabware/index.tsx

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ import {
99
BORDERS,
1010
Box,
1111
COLORS,
12+
DeckInfoLabel,
1213
DIRECTION_COLUMN,
1314
DIRECTION_ROW,
1415
Flex,
1516
Icon,
1617
JUSTIFY_SPACE_BETWEEN,
1718
JUSTIFY_SPACE_EVENLY,
1819
LabwareRender,
19-
LocationIcon,
2020
MODULE_ICON_NAME_BY_TYPE,
2121
SPACING,
2222
LegacyStyledText,
@@ -147,14 +147,16 @@ export function ProtocolSetupLabware({
147147
typeof selectedLabware.location === 'object' &&
148148
'slotName' in selectedLabware?.location
149149
) {
150-
location = <LocationIcon slotName={selectedLabware?.location.slotName} />
150+
location = <DeckInfoLabel deckLabel={selectedLabware?.location.slotName} />
151151
} else if (
152152
selectedLabware != null &&
153153
typeof selectedLabware.location === 'object' &&
154154
'addressableAreaName' in selectedLabware?.location
155155
) {
156156
location = (
157-
<LocationIcon slotName={selectedLabware?.location.addressableAreaName} />
157+
<DeckInfoLabel
158+
deckLabel={selectedLabware?.location.addressableAreaName}
159+
/>
158160
)
159161
} else if (
160162
selectedLabware != null &&
@@ -170,8 +172,8 @@ export function ProtocolSetupLabware({
170172
if (matchedModule != null) {
171173
location = (
172174
<>
173-
<LocationIcon slotName={matchedModule?.slotName} />
174-
<LocationIcon
175+
<DeckInfoLabel deckLabel={matchedModule?.slotName} />
176+
<DeckInfoLabel
175177
iconName={
176178
MODULE_ICON_NAME_BY_TYPE[matchedModule?.moduleDef.moduleType]
177179
}
@@ -192,16 +194,16 @@ export function ProtocolSetupLabware({
192194
)?.params.location
193195
if (adapterLocation != null && adapterLocation !== 'offDeck') {
194196
if ('slotName' in adapterLocation) {
195-
location = <LocationIcon slotName={adapterLocation.slotName} />
197+
location = <DeckInfoLabel deckLabel={adapterLocation.slotName} />
196198
} else if ('moduleId' in adapterLocation) {
197199
const moduleUnderAdapter = attachedProtocolModuleMatches.find(
198200
module => module.moduleId === adapterLocation.moduleId
199201
)
200202
if (moduleUnderAdapter != null) {
201203
location = (
202204
<>
203-
<LocationIcon slotName={moduleUnderAdapter.slotName} />
204-
<LocationIcon
205+
<DeckInfoLabel deckLabel={moduleUnderAdapter.slotName} />
206+
<DeckInfoLabel
205207
iconName={
206208
MODULE_ICON_NAME_BY_TYPE[
207209
moduleUnderAdapter.moduleDef.moduleType
@@ -510,16 +512,16 @@ function RowLabware({
510512
location = t('off_deck')
511513
} else if ('slotName' in initialLocation) {
512514
slotName = initialLocation.slotName
513-
location = <LocationIcon slotName={initialLocation.slotName} />
515+
location = <DeckInfoLabel deckLabel={initialLocation.slotName} />
514516
} else if ('addressableAreaName' in initialLocation) {
515517
slotName = initialLocation.addressableAreaName
516-
location = <LocationIcon slotName={initialLocation.addressableAreaName} />
518+
location = <DeckInfoLabel deckLabel={initialLocation.addressableAreaName} />
517519
} else if (matchedModuleType != null && matchedModule?.slotName != null) {
518520
slotName = matchedModule.slotName
519521
location = (
520522
<>
521-
<LocationIcon slotName={matchedModule?.slotName} />
522-
<LocationIcon iconName={MODULE_ICON_NAME_BY_TYPE[matchedModuleType]} />
523+
<DeckInfoLabel deckLabel={matchedModule?.slotName} />
524+
<DeckInfoLabel iconName={MODULE_ICON_NAME_BY_TYPE[matchedModuleType]} />
523525
</>
524526
)
525527
} else if ('labwareId' in initialLocation) {
@@ -533,7 +535,7 @@ function RowLabware({
533535
if (adapterLocation != null && adapterLocation !== 'offDeck') {
534536
if ('slotName' in adapterLocation) {
535537
slotName = adapterLocation.slotName
536-
location = <LocationIcon slotName={adapterLocation.slotName} />
538+
location = <DeckInfoLabel deckLabel={adapterLocation.slotName} />
537539
} else if ('moduleId' in adapterLocation) {
538540
const moduleUnderAdapter = attachedProtocolModules.find(
539541
module => module.moduleId === adapterLocation.moduleId
@@ -542,8 +544,8 @@ function RowLabware({
542544
slotName = moduleUnderAdapter.slotName
543545
location = (
544546
<>
545-
<LocationIcon slotName={moduleUnderAdapter.slotName} />
546-
<LocationIcon
547+
<DeckInfoLabel deckLabel={moduleUnderAdapter.slotName} />
548+
<DeckInfoLabel
547549
iconName={
548550
MODULE_ICON_NAME_BY_TYPE[
549551
moduleUnderAdapter.moduleDef.moduleType

‎app/src/organisms/ProtocolSetupLiquids/LiquidDetails.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import { useTranslation } from 'react-i18next'
44
import {
55
BORDERS,
66
COLORS,
7+
DeckInfoLabel,
78
DIRECTION_ROW,
89
Flex,
910
Icon,
10-
LocationIcon,
1111
SPACING,
1212
LegacyStyledText,
1313
TYPOGRAPHY,
@@ -105,7 +105,7 @@ export function LiquidDetails(props: LiquidDetailsProps): JSX.Element {
105105
>
106106
<TableDatum>
107107
<Flex>
108-
<LocationIcon slotName={slotName} />
108+
<DeckInfoLabel deckLabel={slotName} />
109109
</Flex>
110110
</TableDatum>
111111
<TableDatum>

‎app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import {
55
BORDERS,
66
COLORS,
77
Chip,
8+
DeckInfoLabel,
89
DIRECTION_ROW,
910
Flex,
1011
JUSTIFY_SPACE_BETWEEN,
11-
LocationIcon,
1212
SPACING,
1313
LegacyStyledText,
1414
TYPOGRAPHY,
@@ -219,7 +219,7 @@ function FixtureTableItem({
219219
</LegacyStyledText>
220220
</Flex>
221221
<Flex flex="2 0 0" alignItems={ALIGN_CENTER}>
222-
<LocationIcon slotName={getCutoutDisplayName(cutoutId)} />
222+
<DeckInfoLabel deckLabel={getCutoutDisplayName(cutoutId)} />
223223
</Flex>
224224
<Flex
225225
flex="4 0 0"

‎app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import {
77
BORDERS,
88
COLORS,
99
Chip,
10+
DeckInfoLabel,
1011
Flex,
1112
JUSTIFY_SPACE_BETWEEN,
12-
LocationIcon,
1313
SPACING,
1414
LegacyStyledText,
1515
TYPOGRAPHY,
@@ -281,8 +281,8 @@ function ModuleTableItem({
281281
</LegacyStyledText>
282282
</Flex>
283283
<Flex alignItems={ALIGN_CENTER} flex="2 0 0">
284-
<LocationIcon
285-
slotName={
284+
<DeckInfoLabel
285+
deckLabel={
286286
getModuleType(module.moduleDef.model) === THERMOCYCLER_MODULE_TYPE
287287
? TC_MODULE_LOCATION_OT3
288288
: module.slotName

‎app/src/pages/ProtocolDetails/Hardware.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import {
55
ALIGN_CENTER,
66
BORDERS,
77
COLORS,
8+
DeckInfoLabel,
89
Flex,
9-
LocationIcon,
1010
ModuleIcon,
1111
SPACING,
1212
LegacyStyledText,
@@ -113,10 +113,12 @@ function HardwareItem({
113113
</LegacyStyledText>
114114
)
115115
if (hardware.hardwareType === 'module') {
116-
location = <LocationIcon slotName={hardware.slot} />
116+
location = <DeckInfoLabel deckLabel={hardware.slot} />
117117
} else if (hardware.hardwareType === 'fixture') {
118118
location = (
119-
<LocationIcon slotName={getCutoutDisplayName(hardware.location.cutout)} />
119+
<DeckInfoLabel
120+
deckLabel={getCutoutDisplayName(hardware.location.cutout)}
121+
/>
120122
)
121123
}
122124
const isMagneticBlockFixture =

0 commit comments

Comments
 (0)