Skip to content

Commit ed5f0ed

Browse files
smb2268smb2268
authored
feat(components, app): Desktop protocol setup labware list view updates (#15726)
Fix PLAT-385, PLAT-365, PLAT-367, PLAT-368, PLAT-369 ,PLAT-387, PLAT-388
1 parent 8f2583f commit ed5f0ed

File tree

13 files changed

+162
-314
lines changed

13 files changed

+162
-314
lines changed

‎app/src/organisms/Devices/ProtocolRun/EmptySetupStep.tsx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,12 @@ import {
1111
interface EmptySetupStepProps {
1212
title: React.ReactNode
1313
description: string
14-
label: string
1514
}
1615

1716
export function EmptySetupStep(props: EmptySetupStepProps): JSX.Element {
18-
const { title, description, label } = props
17+
const { title, description } = props
1918
return (
2019
<Flex flexDirection={DIRECTION_COLUMN} color={COLORS.grey40}>
21-
<LegacyStyledText
22-
css={TYPOGRAPHY.h6SemiBold}
23-
marginBottom={SPACING.spacing2}
24-
>
25-
{label}
26-
</LegacyStyledText>
2720
<LegacyStyledText
2821
css={TYPOGRAPHY.h3SemiBold}
2922
marginBottom={SPACING.spacing4}

‎app/src/organisms/Devices/ProtocolRun/ProtocolRunSetup.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -282,12 +282,10 @@ export function ProtocolRunSetup({
282282
<EmptySetupStep
283283
title={t(`${stepKey}_title`)}
284284
description={StepDetailMap[stepKey].description}
285-
label={t('step', { index: index + 1 })}
286285
/>
287286
) : (
288287
<SetupStep
289288
expanded={stepKey === expandedStepKey}
290-
label={t('step', { index: index + 1 })}
291289
title={setupStepTitle}
292290
description={StepDetailMap[stepKey].description}
293291
toggleExpanded={() => {

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

Lines changed: 127 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
ALIGN_CENTER,
77
BORDERS,
88
Btn,
9+
LocationIcon,
910
COLORS,
1011
DIRECTION_COLUMN,
1112
DIRECTION_ROW,
@@ -14,10 +15,11 @@ import {
1415
Icon,
1516
JUSTIFY_CENTER,
1617
JUSTIFY_SPACE_BETWEEN,
18+
MODULE_ICON_NAME_BY_TYPE,
1719
LabwareRender,
1820
SIZE_AUTO,
1921
SPACING,
20-
LegacyStyledText,
22+
StyledText,
2123
TYPOGRAPHY,
2224
WELL_LABEL_OPTIONS,
2325
} from '@opentrons/components'
@@ -35,6 +37,7 @@ import {
3537
} from '@opentrons/shared-data'
3638

3739
import { ToggleButton } from '../../../../atoms/buttons'
40+
import { Divider } from '../../../../atoms/structure'
3841
import { SecureLabwareModal } from './SecureLabwareModal'
3942

4043
import type {
@@ -58,7 +61,10 @@ const LabwareRow = styled.div`
5861
border-width: 1px;
5962
border-color: ${COLORS.grey30};
6063
border-radius: ${BORDERS.borderRadius4};
61-
padding: ${SPACING.spacing16};
64+
padding: ${(SPACING.spacing12,
65+
SPACING.spacing16,
66+
SPACING.spacing12,
67+
SPACING.spacing24)};
6268
`
6369

6470
interface LabwareListItemProps extends LabwareSetupItem {
@@ -67,6 +73,7 @@ interface LabwareListItemProps extends LabwareSetupItem {
6773
isFlex: boolean
6874
commands: RunTimeCommand[]
6975
nestedLabwareInfo: NestedLabwareInfo | null
76+
showLabwareSVG?: boolean
7077
}
7178

7279
export function LabwareListItem(
@@ -83,8 +90,9 @@ export function LabwareListItem(
8390
isFlex,
8491
commands,
8592
nestedLabwareInfo,
93+
showLabwareSVG,
8694
} = props
87-
const { t } = useTranslation('protocol_setup')
95+
const { i18n, t } = useTranslation('protocol_setup')
8896
const [
8997
secureLabwareModalType,
9098
setSecureLabwareModalType,
@@ -103,10 +111,14 @@ export function LabwareListItem(
103111
'addressableAreaName' in initialLocation
104112
) {
105113
slotInfo = initialLocation.addressableAreaName
114+
} else if (initialLocation === 'offDeck') {
115+
slotInfo = i18n.format(t('off_deck'), 'upperCase')
106116
}
107117

108118
let moduleDisplayName: string | null = null
119+
let moduleType: ModuleType | null = null
109120
let extraAttentionText: JSX.Element | null = null
121+
let secureLabwareInstructions: JSX.Element | null = null
110122
let isCorrectHeaterShakerAttached: boolean = false
111123
let isHeaterShakerInProtocol: boolean = false
112124
let latchCommand:
@@ -144,7 +156,7 @@ export function LabwareListItem(
144156
moduleModel != null
145157
) {
146158
const moduleName = getModuleDisplayName(moduleModel)
147-
const moduleType = getModuleType(moduleModel)
159+
moduleType = getModuleType(moduleModel)
148160
const moduleTypeNeedsAttention = extraAttentionModules.find(
149161
extraAttentionModType => extraAttentionModType === moduleType
150162
)
@@ -158,7 +170,7 @@ export function LabwareListItem(
158170
case MAGNETIC_MODULE_TYPE:
159171
case THERMOCYCLER_MODULE_TYPE:
160172
if (moduleModel !== THERMOCYCLER_MODULE_V2) {
161-
extraAttentionText = (
173+
secureLabwareInstructions = (
162174
<Btn
163175
css={css`
164176
color: ${COLORS.grey50};
@@ -171,19 +183,21 @@ export function LabwareListItem(
171183
setSecureLabwareModalType(moduleType)
172184
}}
173185
>
174-
<Flex flexDirection={DIRECTION_ROW}>
186+
<Flex flexDirection={DIRECTION_ROW} width="15rem">
175187
<Icon
176188
name="information"
177189
size="0.75rem"
178190
marginTop={SPACING.spacing4}
191+
color={COLORS.grey60}
179192
/>
180-
<LegacyStyledText
193+
<StyledText
181194
marginLeft={SPACING.spacing4}
182-
as="p"
195+
desktopStyle="bodyDefaultRegular"
183196
textDecoration={TYPOGRAPHY.textDecorationUnderline}
197+
color={COLORS.grey60}
184198
>
185199
{t('secure_labware_instructions')}
186-
</LegacyStyledText>
200+
</StyledText>
187201
</Flex>
188202
</Btn>
189203
)
@@ -192,9 +206,9 @@ export function LabwareListItem(
192206
case HEATERSHAKER_MODULE_TYPE:
193207
isHeaterShakerInProtocol = true
194208
extraAttentionText = (
195-
<LegacyStyledText as="p" color={COLORS.grey50} maxWidth="15.25rem">
209+
<StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
196210
{t('heater_shaker_labware_list_view')}
197-
</LegacyStyledText>
211+
</StyledText>
198212
)
199213
const matchingHeaterShaker =
200214
attachedModuleInfo != null &&
@@ -256,96 +270,128 @@ export function LabwareListItem(
256270

257271
return (
258272
<LabwareRow>
259-
<Flex alignItems={ALIGN_CENTER}>
260-
<LegacyStyledText as="p" data-testid={`slot_info_${slotInfo}`}>
261-
{slotInfo}
262-
</LegacyStyledText>
273+
<Flex alignItems={ALIGN_CENTER} width="80px" gridGap={SPACING.spacing2}>
274+
{slotInfo != null && isFlex ? (
275+
<LocationIcon slotName={slotInfo} />
276+
) : (
277+
<StyledText
278+
css={TYPOGRAPHY.pSemiBold}
279+
data-testid={`slot_info_${slotInfo}`}
280+
>
281+
{slotInfo}
282+
</StyledText>
283+
)}
284+
{nestedLabwareInfo != null || moduleDisplayName != null ? (
285+
<LocationIcon iconName="stacked" />
286+
) : null}
263287
</Flex>
264-
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
288+
<Flex
289+
flexDirection={DIRECTION_COLUMN}
290+
gridGap={SPACING.spacing16}
291+
width="45.875rem"
292+
>
265293
<Flex>
266-
<StandaloneLabware definition={definition} />
294+
{showLabwareSVG && <StandaloneLabware definition={definition} />}
267295
<Flex
268296
flexDirection={DIRECTION_COLUMN}
269297
justifyContent={JUSTIFY_CENTER}
270-
marginLeft={SPACING.spacing16}
298+
marginLeft={SPACING.spacing8}
271299
marginRight={SPACING.spacing24}
272300
>
273-
<LegacyStyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
301+
<StyledText desktopStyle="bodyDefaultSemiBold">
274302
{labwareDisplayName}
275-
</LegacyStyledText>
276-
<LegacyStyledText as="p" color={COLORS.grey50}>
303+
</StyledText>
304+
<StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
277305
{nickName}
278-
</LegacyStyledText>
306+
</StyledText>
279307
</Flex>
280308
</Flex>
281309
{nestedLabwareInfo != null &&
282310
nestedLabwareInfo?.sharedSlotId === slotInfo ? (
283-
<Flex>
284-
{nestedLabwareInfo.nestedLabwareDefinition != null ? (
285-
<StandaloneLabware
286-
definition={nestedLabwareInfo.nestedLabwareDefinition}
287-
/>
288-
) : null}
289-
<Flex
290-
flexDirection={DIRECTION_COLUMN}
291-
justifyContent={JUSTIFY_CENTER}
292-
marginLeft={SPACING.spacing16}
293-
marginRight={SPACING.spacing24}
294-
>
295-
<LegacyStyledText
296-
as="p"
297-
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
311+
<>
312+
<Divider />
313+
<Flex>
314+
<Flex
315+
flexDirection={DIRECTION_COLUMN}
316+
justifyContent={JUSTIFY_CENTER}
317+
marginLeft={SPACING.spacing8}
318+
marginRight={SPACING.spacing24}
298319
>
299-
{nestedLabwareInfo.nestedLabwareDisplayName}
300-
</LegacyStyledText>
301-
<LegacyStyledText as="p" color={COLORS.grey50}>
302-
{nestedLabwareInfo.nestedLabwareNickName}
303-
</LegacyStyledText>
320+
<StyledText desktopStyle="bodyDefaultSemiBold">
321+
{nestedLabwareInfo.nestedLabwareDisplayName}
322+
</StyledText>
323+
<StyledText
324+
desktopStyle="bodyDefaultRegular"
325+
color={COLORS.grey60}
326+
>
327+
{nestedLabwareInfo.nestedLabwareNickName}
328+
</StyledText>
329+
</Flex>
304330
</Flex>
305-
</Flex>
331+
</>
306332
) : null}
307-
</Flex>
308-
<Flex
309-
justifyContent={JUSTIFY_SPACE_BETWEEN}
310-
alignItems={ALIGN_CENTER}
311-
gridGap={SPACING.spacing8}
312-
>
313-
<Flex flexDirection={DIRECTION_COLUMN} justifyContent={JUSTIFY_CENTER}>
314-
<LegacyStyledText as="p">
315-
{moduleDisplayName != null
316-
? moduleDisplayName
317-
: t(initialLocation === 'offDeck' ? 'off_deck' : 'on_deck')}
318-
</LegacyStyledText>
319-
{extraAttentionText != null ? extraAttentionText : null}
320-
</Flex>
321-
322-
{isHeaterShakerInProtocol ? (
323-
<Flex flexDirection={DIRECTION_COLUMN}>
324-
<LegacyStyledText as="h6" minWidth="6.2rem">
325-
{t('labware_latch')}
326-
</LegacyStyledText>
333+
{moduleDisplayName != null ? (
334+
<>
335+
<Divider />
327336
<Flex
328-
flexDirection={DIRECTION_ROW}
329-
alignItems={ALIGN_CENTER}
330337
justifyContent={JUSTIFY_SPACE_BETWEEN}
331-
marginTop="3px"
338+
flexDirection={DIRECTION_ROW}
339+
marginLeft={SPACING.spacing8}
340+
paddingRight={SPACING.spacing24}
341+
gridGap={SPACING.spacing8}
332342
>
333-
<ToggleButton
334-
label={`heater_shaker_${
335-
moduleLocation?.slotName ?? ''
336-
}_latch_toggle`}
337-
size={SIZE_AUTO}
338-
disabled={!isCorrectHeaterShakerAttached || isLatchLoading}
339-
toggledOn={isLatchClosed}
340-
onClick={toggleLatch}
341-
display={DISPLAY_FLEX}
342-
alignItems={ALIGN_CENTER}
343-
/>
344-
<LegacyStyledText as="p" width="4rem">
345-
{hsLatchText}
346-
</LegacyStyledText>
343+
<Flex gridGap={SPACING.spacing12} alignItems={ALIGN_CENTER}>
344+
{moduleType != null ? (
345+
<LocationIcon
346+
iconName={MODULE_ICON_NAME_BY_TYPE[moduleType]}
347+
/>
348+
) : null}
349+
<Flex
350+
flexDirection={DIRECTION_COLUMN}
351+
justifyContent={JUSTIFY_CENTER}
352+
>
353+
<StyledText desktopStyle="bodyDefaultSemiBold">
354+
{moduleDisplayName}
355+
</StyledText>
356+
{extraAttentionText}
357+
</Flex>
358+
</Flex>
359+
{secureLabwareInstructions}
360+
{isHeaterShakerInProtocol ? (
361+
<Flex flexDirection={DIRECTION_COLUMN} width="15rem">
362+
<StyledText
363+
desktopStyle="bodyDefaultRegular"
364+
color={COLORS.grey60}
365+
minWidth="6.2rem"
366+
>
367+
{t('labware_latch')}
368+
</StyledText>
369+
<Flex
370+
flexDirection={DIRECTION_ROW}
371+
gridGap={SPACING.spacing4}
372+
marginTop="3px"
373+
>
374+
<ToggleButton
375+
label={`heater_shaker_${
376+
moduleLocation?.slotName ?? ''
377+
}_latch_toggle`}
378+
size={SIZE_AUTO}
379+
disabled={
380+
!isCorrectHeaterShakerAttached || isLatchLoading
381+
}
382+
toggledOn={isLatchClosed}
383+
onClick={toggleLatch}
384+
display={DISPLAY_FLEX}
385+
alignItems={ALIGN_CENTER}
386+
/>
387+
<StyledText desktopStyle="bodyDefaultRegular" width="4rem">
388+
{hsLatchText}
389+
</StyledText>
390+
</Flex>
391+
</Flex>
392+
) : null}
347393
</Flex>
348-
</Flex>
394+
</>
349395
) : null}
350396
</Flex>
351397
{secureLabwareModalType != null && (

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export function OffDeckLabwareList(
3535
isFlex={isFlex}
3636
commands={commands}
3737
nestedLabwareInfo={null}
38+
showLabwareSVG
3839
/>
3940
))}
4041
</>

0 commit comments

Comments
 (0)