Skip to content

Commit d367217

Browse files
b-cooperb-cooper
authored
fix(app): address Design QA comments for modules in deck config (#15150)
Fix Deck hardware table padding in desktop protocol setup. Fix padding in no modules detected modal. standardize copy for title and description fo protocol setup steps. standardize copy for header and description in ODD location conflict modal Closes [RQA-2687](https://opentrons.atlassian.net/browse/RQA-2687), Closes [RQA-2686](https://opentrons.atlassian.net/browse/RQA-2686), Closes [RQA-2684](https://opentrons.atlassian.net/browse/RQA-2684), Closes [RQA-2685](https://opentrons.atlassian.net/browse/RQA-2685), Closes [RQA-2692](https://opentrons.atlassian.net/browse/RQA-2692)
1 parent 146cf1f commit d367217

File tree

12 files changed

+87
-112
lines changed

12 files changed

+87
-112
lines changed

‎app/src/assets/localization/en/device_details.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33
"about_module": "About {{name}}",
44
"about_pipette_name": "About {{name}} Pipette",
55
"about_pipette": "About pipette",
6-
"add_fixture_description": "Add this item to your deck configuration. It will be referenced during protocol analysis.",
7-
"add_to_slot_description": "Choose an item below to add to your deck configuration. It will be referenced during protocol analysis.",
6+
"add_fixture_description": "Add this hardware to your deck configuration. It will be referenced during protocol analysis.",
87
"add_to_slot": "Add to slot {{slotName}}",
98
"add": "Add",
109
"an_error_occurred_while_updating_module": "An error occurred while updating your {{moduleName}}. Please try again.",

‎app/src/assets/localization/en/protocol_setup.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
"action_needed": "Action needed",
44
"adapter_slot_location_module": "Slot {{slotName}}, {{adapterName}} on {{moduleName}}",
55
"adapter_slot_location": "Slot {{slotName}}, {{adapterName}}",
6-
"add_fixture": "Add {{fixtureName}} to deck configuration",
6+
"add_fixture": "Add {{fixtureName}} to {{locationName}}",
77
"additional_labware": "{{count}} additional labware",
88
"additional_off_deck_labware": "Additional Off-Deck Labware",
9-
"add_this_deck_hardware": "Add this deck hardware to your deck configuration. It will be referenced during protocol analysis.",
9+
"add_this_deck_hardware": "Add this hardware to your deck configuration. It will be referenced during protocol analysis.",
1010
"add_to_slot": "Add to slot {{slotName}}",
1111
"attach_gripper_failure_reason": "Attach the required gripper to continue",
1212
"attach_gripper": "attach gripper",
@@ -83,7 +83,9 @@
8383
"initial_liquids_num_plural": "{{count}} initial liquids",
8484
"initial_liquids_num": "{{count}} initial liquid",
8585
"initial_location": "Initial Location",
86-
"install_modules_and_fixtures": "Install the required modules and power them on. Install the required fixtures and review the deck configuration.",
86+
"install_modules": "Install the required module.",
87+
"install_modules_plural": "Install the required modules.",
88+
"install_modules_and_fixtures": "Install and calibrate the required modules. Install the required fixtures.",
8789
"instrument_calibrations_missing_plural": "Missing {{count}} calibrations",
8890
"instrument_calibrations_missing": "Missing {{count}} calibration",
8991
"instruments_connected_plural": "{{count}} instruments attached",
@@ -132,16 +134,13 @@
132134
"missing_pipettes": "Missing {{count}} pipette",
133135
"missing": "Missing",
134136
"modal_instructions_title": "{{moduleName}} Setup Instructions",
135-
"module_and_deck_setup": "Modules & deck",
136137
"module_connected": "Connected",
137138
"module_disconnected": "Disconnected",
138139
"module_instructions_link": "{{moduleName}} setup instructions",
139140
"module_mismatch_body": "Check that the modules connected to this robot are of the right type and generation",
140141
"module_name": "Module",
141142
"module_not_connected": "Not connected",
142-
"module_setup_step_description_plural": "Install the required modules and power them on.",
143-
"module_setup_step_description": "Install the required modules and power them on.",
144-
"module_setup_step_title": "Modules",
143+
"module_setup_step_title": "Deck hardware",
145144
"module_slot_location": "Slot {{slotName}}, {{moduleName}}",
146145
"module": "Module",
147146
"modules_connected_plural": "{{count}} modules attached",
@@ -164,6 +163,7 @@
164163
"name": "Name",
165164
"no_custom_values": "No custom values specified",
166165
"no_data": "no data",
166+
"no_deck_hardware_specified": "No deck hardware are specified for this protocol.",
167167
"no_labware_offset_data": "no labware offset data yet",
168168
"no_modules_or_fixtures": "No modules or fixtures are specified for this protocol.",
169169
"no_modules_specified": "no modules are specified for this protocol.",
@@ -251,7 +251,7 @@
251251
"slot_number": "Slot Number",
252252
"status": "Status",
253253
"step": "STEP {{index}}",
254-
"there_are_no_unconfigured_modules": "No {{module}} is connected. Attach one and place it in {{slot}}",
254+
"there_are_no_unconfigured_modules": "No {{module}} is connected. Attach one and place it in {{slot}}.",
255255
"there_are_other_configured_modules": "A {{module}} is already configured in a different slot. Exit run setup and update your deck configuration to move to an already connected module. Or attach another {{module}} to continue setup.",
256256
"tip_length_cal_description_bullet": "Perform Tip Length Calibration for each new tip type used on a pipette.",
257257
"tip_length_cal_description": "This measures the Z distance between the bottom of the tip and the pipette’s nozzle. If you redo the tip length calibration for the tip you used to calibrate a pipette, you will also have to redo that Pipette Offset Calibration.",

‎app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -347,7 +347,7 @@ export function AddFixtureModal({
347347
}
348348
>
349349
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
350-
<StyledText as="p">{t('add_to_slot_description')}</StyledText>
350+
<StyledText as="p">{t('add_fixture_description')}</StyledText>
351351
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
352352
{fixtureOptions}
353353
{nextStageOptions}

‎app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/AddFixtureModal.test.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ describe('Touchscreen AddFixtureModal', () => {
5858
render(props)
5959
screen.getByText('Add to slot D3')
6060
screen.getByText(
61-
'Choose an item below to add to your deck configuration. It will be referenced during protocol analysis.'
61+
'Add this hardware to your deck configuration. It will be referenced during protocol analysis.'
6262
)
6363
screen.getByText('Fixtures')
6464
screen.getByText('Modules')
@@ -80,7 +80,7 @@ describe('Touchscreen AddFixtureModal', () => {
8080
render(props)
8181
screen.getByText('Add to slot D3')
8282
screen.getByText(
83-
'Choose an item below to add to your deck configuration. It will be referenced during protocol analysis.'
83+
'Add this hardware to your deck configuration. It will be referenced during protocol analysis.'
8484
)
8585
expect(screen.queryByText('Staging area slot')).toBeNull()
8686
screen.getByText('Trash bin')
@@ -111,7 +111,7 @@ describe('Desktop AddFixtureModal', () => {
111111
render(props)
112112
screen.getByText('Add to slot D3')
113113
screen.getByText(
114-
'Add this item to your deck configuration. It will be referenced during protocol analysis.'
114+
'Add this hardware to your deck configuration. It will be referenced during protocol analysis.'
115115
)
116116

117117
screen.getByText('Fixtures')
@@ -131,7 +131,7 @@ describe('Desktop AddFixtureModal', () => {
131131
render(props)
132132
screen.getByText('Add to slot A1')
133133
screen.getByText(
134-
'Add this item to your deck configuration. It will be referenced during protocol analysis.'
134+
'Add this hardware to your deck configuration. It will be referenced during protocol analysis.'
135135
)
136136
screen.getByText('Fixtures')
137137
screen.getByText('Modules')
@@ -145,7 +145,7 @@ describe('Desktop AddFixtureModal', () => {
145145
render(props)
146146
screen.getByText('Add to slot B3')
147147
screen.getByText(
148-
'Add this item to your deck configuration. It will be referenced during protocol analysis.'
148+
'Add this hardware to your deck configuration. It will be referenced during protocol analysis.'
149149
)
150150
screen.getByText('Fixtures')
151151
screen.getByText('Modules')
@@ -160,7 +160,7 @@ describe('Desktop AddFixtureModal', () => {
160160
render(props)
161161
screen.getByText('Add to slot B2')
162162
screen.getByText(
163-
'Add this item to your deck configuration. It will be referenced during protocol analysis.'
163+
'Add this hardware to your deck configuration. It will be referenced during protocol analysis.'
164164
)
165165
screen.getByText('Magnetic Block GEN1')
166166
expect(screen.getByRole('button', { name: 'Add' })).toBeInTheDocument()

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

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -150,33 +150,24 @@ export function ProtocolRunSetup({
150150
if (robot == null) return null
151151

152152
const liquids = protocolAnalysis?.liquids ?? []
153-
154153
const liquidsInLoadOrder =
155154
protocolAnalysis != null
156155
? parseLiquidsInLoadOrder(liquids, protocolAnalysis.commands)
157156
: []
158-
159157
const hasLiquids = liquidsInLoadOrder.length > 0
160-
161158
const hasModules = protocolAnalysis != null && modules.length > 0
162-
163159
// need config compatibility (including check for single slot conflicts)
164160
const requiredDeckConfigCompatibility = getRequiredDeckConfig(
165161
deckConfigCompatibility
166162
)
167-
168163
const hasFixtures = requiredDeckConfigCompatibility.length > 0
169-
170-
let moduleDescription: string = t(`${MODULE_SETUP_KEY}_description`, {
171-
count: modules.length,
172-
})
173-
if (!hasModules && !isFlex) {
174-
moduleDescription = i18n.format(t('no_modules_specified'), 'capitalize')
175-
} else if (isFlex && (hasModules || hasFixtures)) {
176-
moduleDescription = t('install_modules_and_fixtures')
177-
} else if (isFlex && !hasModules && !hasFixtures) {
178-
moduleDescription = t('no_modules_or_fixtures')
179-
}
164+
const flexDeckHardwareDescription =
165+
hasModules || hasFixtures
166+
? t('install_modules_and_fixtures')
167+
: t('no_deck_hardware_specified')
168+
const ot2DeckHardwareDescription = hasModules
169+
? t('install_modules', { count: modules.length })
170+
: t('no_deck_hardware_specified')
180171

181172
const StepDetailMap: Record<
182173
StepKey,
@@ -213,7 +204,9 @@ export function ProtocolRunSetup({
213204
protocolAnalysis={protocolAnalysis}
214205
/>
215206
),
216-
description: moduleDescription,
207+
description: isFlex
208+
? flexDeckHardwareDescription
209+
: ot2DeckHardwareDescription,
217210
},
218211
[LPC_KEY]: {
219212
stepInternals: (
@@ -273,11 +266,7 @@ export function ProtocolRunSetup({
273266
</StyledText>
274267
) : (
275268
stepsKeysInOrder.map((stepKey, index) => {
276-
const setupStepTitle = t(
277-
isFlex && stepKey === MODULE_SETUP_KEY
278-
? `module_and_deck_setup`
279-
: `${stepKey}_title`
280-
)
269+
const setupStepTitle = t(`${stepKey}_title`)
281270
const showEmptySetupStep =
282271
(stepKey === 'liquid_setup_step' && !hasLiquids) ||
283272
(stepKey === 'module_setup_step' &&

‎app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/ChooseModuleToConfigureModal.tsx

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export const ChooseModuleToConfigureModal = (
6262
robotName,
6363
displaySlotName,
6464
} = props
65-
const { t } = useTranslation(['protocol_setup', 'shared'])
65+
const { t, i18n } = useTranslation(['protocol_setup', 'shared'])
6666
const attachedModules =
6767
useModulesQuery({ refetchInterval: EQUIPMENT_POLL_MS })?.data?.data ?? []
6868
const deckConfig = useNotifyDeckConfigurationQuery()?.data ?? []
@@ -106,7 +106,7 @@ export const ChooseModuleToConfigureModal = (
106106
handleConfigureModule(serialNumber)
107107
}}
108108
optionName={getFixtureDisplayName(moduleFixtures[0].id, usbPort)}
109-
buttonText={t('shared:add')}
109+
buttonText={i18n.format(t('shared:add'), 'capitalize')}
110110
isOnDevice={isOnDevice}
111111
/>
112112
)
@@ -117,7 +117,7 @@ export const ChooseModuleToConfigureModal = (
117117

118118
const contents =
119119
fixtureOptions.length > 0 ? (
120-
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
120+
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
121121
<StyledText as="p">{t('add_this_deck_hardware')}</StyledText>
122122
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
123123
{fixtureOptions}
@@ -145,13 +145,7 @@ export const ChooseModuleToConfigureModal = (
145145
onClick: onCloseClick,
146146
}}
147147
>
148-
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
149-
<Flex flexDirection={DIRECTION_COLUMN}>
150-
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
151-
{contents}
152-
</Flex>
153-
</Flex>
154-
</Flex>
148+
{contents}
155149
</Modal>
156150
) : (
157151
<LegacyModal
@@ -169,16 +163,8 @@ export const ChooseModuleToConfigureModal = (
169163
onClose={onCloseClick}
170164
width="27.75rem"
171165
>
172-
<Flex flexDirection={DIRECTION_COLUMN}>
173-
<Flex paddingY={SPACING.spacing16} flexDirection={DIRECTION_COLUMN}>
174-
<Flex
175-
flexDirection={DIRECTION_COLUMN}
176-
paddingTop={SPACING.spacing8}
177-
gridGap={SPACING.spacing8}
178-
>
179-
{contents}
180-
</Flex>
181-
</Flex>
166+
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
167+
{contents}
182168
</Flex>
183169
</LegacyModal>
184170
),
@@ -226,15 +212,16 @@ function NoUnconfiguredModules(props: NoUnconfiguredModulesProps): JSX.Element {
226212
<Flex
227213
paddingX={SPACING.spacing80}
228214
paddingY={SPACING.spacing40}
229-
gridGap={isOnDevice ? SPACING.spacing40 : SPACING.spacing10}
215+
gridGap={isOnDevice ? SPACING.spacing32 : SPACING.spacing10}
230216
borderRadius={isOnDevice ? BORDERS.borderRadius12 : BORDERS.borderRadius8}
231-
backgroundColor={COLORS.grey35}
217+
backgroundColor={isOnDevice ? COLORS.grey35 : COLORS.grey30}
232218
flexDirection={DIRECTION_COLUMN}
233219
alignItems={ALIGN_CENTER}
234220
>
235221
<Icon
236222
size={isOnDevice ? '2rem' : '1.25rem'}
237223
marginLeft={SPACING.spacing8}
224+
color={COLORS.grey60}
238225
name="ot-spinner"
239226
spin
240227
/>
@@ -248,7 +235,10 @@ function NoUnconfiguredModules(props: NoUnconfiguredModulesProps): JSX.Element {
248235
</Flex>
249236
)
250237
return (
251-
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
238+
<Flex
239+
flexDirection={DIRECTION_COLUMN}
240+
gridGap={isOnDevice ? SPACING.spacing32 : SPACING.spacing24}
241+
>
252242
{configuredModuleMatches.length > 0 ? (
253243
<>
254244
<StyledText as="p">

‎app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/NotConfiguredModal.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@ import {
1313
StyledText,
1414
TYPOGRAPHY,
1515
} from '@opentrons/components'
16-
import { getFixtureDisplayName } from '@opentrons/shared-data'
16+
import {
17+
getCutoutDisplayName,
18+
getFixtureDisplayName,
19+
} from '@opentrons/shared-data'
1720
import { TertiaryButton } from '../../../../atoms/buttons/TertiaryButton'
1821
import { getTopPortalEl } from '../../../../App/portal'
1922
import { LegacyModal } from '../../../../molecules/LegacyModal'
@@ -45,11 +48,12 @@ export const NotConfiguredModal = (
4548
updateDeckConfiguration(newDeckConfig)
4649
onCloseClick()
4750
}
48-
51+
const cutoutDisplayName = getCutoutDisplayName(cutoutId)
4952
return createPortal(
5053
<LegacyModal
5154
title={t('add_fixture', {
5255
fixtureName: getFixtureDisplayName(requiredFixtureId),
56+
locationName: cutoutDisplayName,
5357
})}
5458
onClose={onCloseClick}
5559
width="27.75rem"

‎app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/UnMatchedModuleWarning.tsx

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react'
22
import { useTranslation } from 'react-i18next'
33
import {
4-
Box,
54
DIRECTION_COLUMN,
65
Flex,
76
SPACING,
@@ -16,28 +15,26 @@ export const UnMatchedModuleWarning = (): JSX.Element | null => {
1615
if (!showBanner) return null
1716

1817
return (
19-
<Box marginTop={SPACING.spacing8}>
20-
<Banner
21-
iconMarginRight={SPACING.spacing16}
22-
iconMarginLeft={SPACING.spacing8}
23-
type="warning"
24-
size={SPACING.spacing20}
25-
onCloseClick={() => setShowBanner(false)}
26-
>
27-
<Flex flexDirection={DIRECTION_COLUMN}>
28-
<StyledText
29-
as="p"
30-
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
31-
data-testid="UnMatchedModuleWarning_title"
32-
>
33-
{t('extra_module_attached')}
34-
</StyledText>
18+
<Banner
19+
iconMarginRight={SPACING.spacing16}
20+
iconMarginLeft={SPACING.spacing8}
21+
type="warning"
22+
size={SPACING.spacing20}
23+
onCloseClick={() => setShowBanner(false)}
24+
>
25+
<Flex flexDirection={DIRECTION_COLUMN}>
26+
<StyledText
27+
as="p"
28+
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
29+
data-testid="UnMatchedModuleWarning_title"
30+
>
31+
{t('extra_module_attached')}
32+
</StyledText>
3533

36-
<StyledText as="p" data-testid="UnMatchedModuleWarning_body">
37-
{`${t('module_mismatch_body')}.`}
38-
</StyledText>
39-
</Flex>
40-
</Banner>
41-
</Box>
34+
<StyledText as="p" data-testid="UnMatchedModuleWarning_body">
35+
{`${t('module_mismatch_body')}.`}
36+
</StyledText>
37+
</Flex>
38+
</Banner>
4239
)
4340
}

‎app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/LocationConflictModal.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ describe('LocationConflictModal', () => {
100100
expect(props.onCloseClick).toHaveBeenCalled()
101101
fireEvent.click(screen.getByRole('button', { name: 'Update deck' }))
102102
screen.getByText('Heater-Shaker Module GEN1 in USB-1')
103-
fireEvent.click(screen.getByRole('button', { name: 'add' }))
103+
fireEvent.click(screen.getByRole('button', { name: 'Add' }))
104104
expect(mockUpdate).toHaveBeenCalled()
105105
})
106106
it('should render the modal information for a single slot fixture conflict', () => {

‎app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ describe('NotConfiguredModal', () => {
3939
})
4040
it('renders the correct text and button works as expected', () => {
4141
const { getByText, getByRole } = render(props)
42-
getByText('Add Trash bin to deck configuration')
42+
getByText('Add Trash bin to B3')
4343
getByText(
44-
'Add this deck hardware to your deck configuration. It will be referenced during protocol analysis.'
44+
'Add this hardware to your deck configuration. It will be referenced during protocol analysis.'
4545
)
4646
getByText('Trash bin')
4747
fireEvent.click(getByRole('button', { name: 'Add' }))

0 commit comments

Comments
 (0)