Skip to content

Commit 12d5d9d

Browse files
TamarZanzouriTamarZanzouri
authored
fix(app): translate and capitalize fixtures, order by slotlike name (#19122)
1 parent c8d6d3b commit 12d5d9d

File tree

25 files changed

+419
-186
lines changed

25 files changed

+419
-186
lines changed

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

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,25 @@
1010
"trash_bin": "Trash bin",
1111
"waste": "Waste",
1212
"magnetic_block": "Magnetic block",
13-
"waste_chute": "Waste chute",
13+
"waste_chute": "Waste Chute",
14+
"waste_chute_with_cover": "Waste Chute with Cover",
15+
"waste_chute_with_staging_area_slot": "Waste Chute with Staging Area Slot",
16+
"waste_chute_with_staging_area_slot_and_cover": "Waste Chute with Staging Area Slot and Cover",
17+
"magnetic_block_with_staging_area_slot": "Magnetic Block with Staging Area Slot",
18+
"magnetic_block_with_waste_chute_right_adapter_no_cover": "Magnetic Block with Waste Chute Right Adapter No Cover",
19+
"magnetic_block_with_waste_chute_right_adapter_covered": "Magnetic Block with Waste Chute Right Adapter Covered",
1420
"staging_area_slot": "Staging area slot",
15-
"module_in_port": "{{moduleName}} in {{usbPortNumber}}"
21+
"staging_area_slot_title": "Staging Area Slot",
22+
"module_in_port": "{{moduleName}} in {{usbPortNumber}}",
23+
"module_with_waste_chute": "{{moduleName}} and Waste Chute",
24+
"module_with_waste_chute_and_cover": "{{moduleName}} and Waste Chute with Cover",
25+
"module_with_mag_block": "{{moduleName}} and Magnetic Block",
26+
"module_in_port_and_waste_chute": "{{moduleName}} in {{usbPortNumber}} and Waste Chute",
27+
"module_in_port_and_waste_chute_with_cover": "{{moduleName}} in {{usbPortNumber}} and Waste Chute with Cover",
28+
"module_in_port_and_magnetic_block": "{{moduleName}} in {{usbPortNumber}} and Magnetic Block",
29+
"module_with_staging_area": "{{moduleName}} with Staging Area Slot",
30+
"center_slot": "Center slot",
31+
"right_slot": "Right slot",
32+
"left_slot": "Left slot",
33+
"slot": "Slot"
1634
}

‎app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/SetupFixtureList.tsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import { NotConfiguredModal } from '/app/organisms/LocationConflictModal/NotConf
3838

3939
import { getFixtureImage } from './utils'
4040

41+
import type { TFunction } from 'i18next'
4142
import type { CutoutFixtureId, DeckDefinition } from '@opentrons/shared-data'
4243
import type { CutoutConfigAndCompatibility } from '/app/resources/deck_configuration/hooks'
4344

@@ -86,7 +87,7 @@ export function FixtureListItem({
8687
robotName,
8788
partialRequiredCutoutFixtureId,
8889
}: FixtureListItemProps): JSX.Element {
89-
const { t } = useTranslation('protocol_setup')
90+
const { t } = useTranslation(['protocol_setup', 'deck_configuration'])
9091

9192
const isCurrentFixtureCompatible = isFixtureCompatible(
9293
cutoutFixtureId,
@@ -103,7 +104,11 @@ export function FixtureListItem({
103104
if (!isCurrentFixtureCompatible) {
104105
statusLabel = (
105106
<StatusLabel
106-
status={hasConflict ? t('location_conflict') : t('not_configured')}
107+
status={
108+
hasConflict
109+
? t('protocol_setup:location_conflict')
110+
: t('protocol_setup:not_configured')
111+
}
107112
backgroundColor={COLORS.yellow30}
108113
iconColor={COLORS.yellow60}
109114
textColor={COLORS.yellow60}
@@ -112,7 +117,7 @@ export function FixtureListItem({
112117
} else {
113118
statusLabel = (
114119
<StatusLabel
115-
status={t('configured')}
120+
status={t('protocol_setup:configured')}
116121
backgroundColor={COLORS.green30}
117122
iconColor={COLORS.green60}
118123
textColor={COLORS.green60}
@@ -213,9 +218,11 @@ export function FixtureListItem({
213218
>
214219
{isCurrentFixtureCompatible
215220
? getFixtureDisplayName(
221+
t as TFunction,
216222
partialRequiredCutoutFixtureId ?? cutoutFixtureId
217223
)
218224
: getFixtureDisplayName(
225+
t as TFunction,
219226
partialRequiredCutoutFixtureId ??
220227
compatibleCutoutFixtureIds?.[0]
221228
)}
@@ -235,7 +242,7 @@ export function FixtureListItem({
235242
}}
236243
>
237244
<LegacyStyledText marginLeft={SPACING.spacing4} as="p">
238-
{t('view_setup_instructions')}
245+
{t('protocol_setup:view_setup_instructions')}
239246
</LegacyStyledText>
240247
</Btn>
241248
</Flex>
@@ -259,7 +266,7 @@ export function FixtureListItem({
259266
}}
260267
>
261268
<LegacyStyledText as="label" cursor="pointer">
262-
{t('resolve')}
269+
{t('protocol_setup:resolve')}
263270
</LegacyStyledText>
264271
</TertiaryButton>
265272
) : null}

‎app/src/organisms/Desktop/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ import { OT2MultipleModulesHelp } from './OT2MultipleModulesHelp'
6262
import { UnMatchedModuleWarning } from './UnMatchedModuleWarning'
6363
import { getFixtureImage } from './utils'
6464

65+
import type { TFunction } from 'i18next'
6566
import type { CommandData } from '@opentrons/api-client'
6667
import type {
6768
CutoutFixtureId,
@@ -228,7 +229,11 @@ export function ModulesListItem({
228229
robotName,
229230
comboFixtureId,
230231
}: ModulesListItemProps): JSX.Element {
231-
const { t } = useTranslation(['protocol_setup', 'module_wizard_flows'])
232+
const { t } = useTranslation([
233+
'protocol_setup',
234+
'module_wizard_flows',
235+
'deck_configuration',
236+
])
232237
const moduleConnectionStatus =
233238
attachedModuleMatch != null
234239
? t('module_connected')
@@ -453,7 +458,7 @@ export function ModulesListItem({
453458
marginLeft={SPACING.spacing20}
454459
>
455460
{comboFixtureId != null
456-
? getFixtureDisplayName(comboFixtureId)
461+
? getFixtureDisplayName(t as TFunction, comboFixtureId)
457462
: displayName}
458463
</LegacyStyledText>
459464
{subText}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ describe('SetupFixtureList', () => {
8787

8888
it('should a fixture with configured status', () => {
8989
render(props)
90-
screen.getByText('Waste chute with staging area slot')
90+
screen.getByText('Waste Chute with Staging Area Slot')
9191
screen.getByRole('button', { name: 'View setup instructions' })
9292
screen.getByText('D3')
9393
screen.getByText('Configured')
@@ -139,7 +139,7 @@ describe('SetupFixtureList', () => {
139139
render(props)
140140
screen.getByText('Magnetic Block GEN1')
141141
screen.getByText('Configured')
142-
screen.getByText('Staging area slot')
142+
screen.getByText('Staging Area Slot')
143143
screen.getByText('Not configured')
144144
fireEvent.click(screen.getByRole('button', { name: 'Resolve' }))
145145
screen.getByText('mock not configured modal')

‎app/src/organisms/Desktop/ProtocolDetails/RobotConfigurationDetails.tsx

Lines changed: 45 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { Divider } from '/app/atoms/structure'
3232
import { getRobotTypeDisplayName } from '../ProtocolsLanding/utils'
3333
import { getSlotsForThermocycler } from './utils'
3434

35+
import type { TFunction } from 'i18next'
3536
import type { ReactNode } from 'react'
3637
import type {
3738
CutoutConfigProtocolSpec,
@@ -63,7 +64,11 @@ export const RobotConfigurationDetails = (
6364
isLoading,
6465
robotType,
6566
} = props
66-
const { t } = useTranslation(['protocol_details', 'shared'])
67+
const { t } = useTranslation([
68+
'protocol_details',
69+
'shared',
70+
'deck_configuration',
71+
])
6772

6873
const loadingText = (
6974
<StyledText desktopStyle="bodyDefaultRegular">
@@ -153,37 +158,42 @@ export const RobotConfigurationDetails = (
153158
/>
154159
</>
155160
) : null}
156-
{requiredModuleDetails.map((module, index) => {
157-
return (
158-
<Fragment key={`module_${index}`}>
159-
<Divider marginY={SPACING.spacing12} width="100%" />
160-
<RobotConfigurationDetailsItem
161-
label={`${t('slot')} ${
162-
getModuleType(module.params.model) === THERMOCYCLER_MODULE_TYPE
163-
? getSlotsForThermocycler(robotType)
164-
: module.params.location.slotName
165-
}`}
166-
item={
167-
<>
168-
<ModuleIcon
169-
key={index}
170-
moduleType={getModuleType(module.params.model)}
171-
marginRight={SPACING.spacing4}
172-
alignSelf={ALIGN_CENTER}
173-
color={COLORS.grey50}
174-
height={SIZE_1}
175-
minWidth={SIZE_1}
176-
minHeight={SIZE_1}
177-
/>
178-
<StyledText desktopStyle="bodyDefaultRegular">
179-
{getModuleDisplayName(module.params.model)}
180-
</StyledText>
181-
</>
182-
}
183-
/>
184-
</Fragment>
161+
{requiredModuleDetails
162+
.sort((a, b) =>
163+
a.params.location.slotName.localeCompare(b.params.location.slotName)
185164
)
186-
})}
165+
.map((module, index) => {
166+
return (
167+
<Fragment key={`module_${index}`}>
168+
<Divider marginY={SPACING.spacing12} width="100%" />
169+
<RobotConfigurationDetailsItem
170+
label={`${t('slot')} ${
171+
getModuleType(module.params.model) ===
172+
THERMOCYCLER_MODULE_TYPE
173+
? getSlotsForThermocycler(robotType)
174+
: module.params.location.slotName
175+
}`}
176+
item={
177+
<>
178+
<ModuleIcon
179+
key={index}
180+
moduleType={getModuleType(module.params.model)}
181+
marginRight={SPACING.spacing4}
182+
alignSelf={ALIGN_CENTER}
183+
color={COLORS.grey50}
184+
height={SIZE_1}
185+
minWidth={SIZE_1}
186+
minHeight={SIZE_1}
187+
/>
188+
<StyledText desktopStyle="bodyDefaultRegular">
189+
{getModuleDisplayName(module.params.model)}
190+
</StyledText>
191+
</>
192+
}
193+
/>
194+
</Fragment>
195+
)
196+
})}
187197
{nonStandardRequiredFixtureDetails.map((fixture, index) => {
188198
return (
189199
<Fragment key={`fixture_${index}`}>
@@ -205,7 +215,10 @@ export const RobotConfigurationDetails = (
205215
/>
206216
) : null}
207217
<StyledText desktopStyle="bodyDefaultRegular">
208-
{getFixtureDisplayName(fixture.cutoutFixtureId)}
218+
{getFixtureDisplayName(
219+
t as TFunction,
220+
fixture.cutoutFixtureId
221+
)}
209222
</StyledText>
210223
</>
211224
}

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
} from '../DeviceDetailsDeckConfiguration/utils'
3636
import { useSendIdentifyStacker } from '../ModuleWizardFlows/hooks'
3737

38+
import type { TFunction } from 'i18next'
3839
import type { AttachedModule } from '@opentrons/api-client'
3940
import type { ModalProps } from '@opentrons/components'
4041
import type {
@@ -73,7 +74,11 @@ export function AddFixtureModal({
7374
deckDef,
7475
existingCutoutFixtureId,
7576
}: AddFixtureModalProps): JSX.Element {
76-
const { t } = useTranslation(['device_details', 'shared'])
77+
const { t } = useTranslation([
78+
'device_details',
79+
'shared',
80+
'deck_configuration',
81+
])
7782
const { updateDeckConfiguration } = useUpdateDeckConfigurationMutation()
7883
const { data: modulesData } = useModulesQuery()
7984
const deckConfig = useNotifyDeckConfigurationQuery()?.data ?? []
@@ -289,6 +294,7 @@ export function AddFixtureModal({
289294
<ODDFixtureOption
290295
key={cutoutConfigs[0].cutoutFixtureId}
291296
optionName={getFixtureDisplayName(
297+
t as TFunction,
292298
cutoutConfigs[0].cutoutFixtureId,
293299
portDisplay
294300
)}
@@ -305,6 +311,7 @@ export function AddFixtureModal({
305311
<FixtureOption
306312
key={cutoutConfigs[0].cutoutFixtureId}
307313
optionName={getFixtureDisplayName(
314+
t as TFunction,
308315
cutoutConfigs[0].cutoutFixtureId,
309316
portDisplay
310317
)}
@@ -323,6 +330,7 @@ export function AddFixtureModal({
323330
<ODDFixtureOption
324331
key={cutoutConfigs[0].cutoutFixtureId}
325332
optionName={getFixtureDisplayName(
333+
t as TFunction,
326334
cutoutConfigs[0].cutoutFixtureId,
327335
portDisplay
328336
)}
@@ -335,6 +343,7 @@ export function AddFixtureModal({
335343
<FixtureOption
336344
key={cutoutConfigs[0].cutoutFixtureId}
337345
optionName={getFixtureDisplayName(
346+
t as TFunction,
338347
cutoutConfigs[0].cutoutFixtureId,
339348
portDisplay
340349
)}

0 commit comments

Comments
 (0)