Skip to content

Commit 66274fc

Browse files
mjhuffmjhuff
authored
refactor(app): Update "peripherals" (#19933)
Closes EXEC-1950
1 parent 17da2a7 commit 66274fc

File tree

6 files changed

+88
-44
lines changed

6 files changed

+88
-44
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
"if_connecting_via_usb": "If connecting via USB",
1717
"if_connecting_wirelessly": "If connecting wirelessly",
1818
"if_still_having_issues": "If you’re still having issues",
19-
"input_devices": "Input Devices",
2019
"learn_more_about_new_robot_setup": "Learn more about setting up a new robot",
2120
"learn_more_about_troubleshooting_connection": "Learn more about troubleshooting connection problems",
2221
"left_mount": "Left Mount",
@@ -30,6 +29,7 @@
3029
"no_robots_found": "No robots found",
3130
"not_available": "Not available ({{count}})",
3231
"ot2_quickstart_guide": "OT-2 Quickstart Guide",
32+
"peripherals": "Peripherals",
3333
"refresh": "Refresh",
3434
"restart_the_app": "Restart the app",
3535
"restart_the_robot": "Restart the robot",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"loading_data": "Loading data...",
1010
"modules": "modules",
1111
"no_data": "No data",
12+
"peripherals": "Peripherals",
1213
"protocol_analysis_failure": "Protocol analysis failure.",
1314
"protocol_analysis_outdated": "Protocol analysis is out of date.",
1415
"protocol_deleted": "Protocol deleted",

‎app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,9 @@ describe('ModuleIcon', () => {
6262
it('renders SharedIcon with correct style', () => {
6363
render(props)
6464
const module = screen.getByTestId('ModuleIcon_ot-temperature-v2')
65-
expect(module).toHaveStyle(`color: ${COLORS.grey60}`)
65+
expect(module).toHaveStyle(`color: ${COLORS.grey50}`)
6666
expect(module).toHaveStyle(`height: ${SPACING.spacing16}`)
6767
expect(module).toHaveStyle(`width: ${SPACING.spacing16}`)
68-
expect(module).toHaveStyle(`margin-left: ${SPACING.spacing4}`)
6968
expect(module).toHaveStyle(`margin-right: ${SPACING.spacing4}`)
7069
})
7170

‎app/src/molecules/ModuleIcon/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ export function ModuleIcon(props: ModuleIconProps): JSX.Element {
3232
<SharedModuleIcon
3333
moduleType={module.moduleType}
3434
size={SPACING.spacing16}
35-
marginX={SPACING.spacing4}
36-
color={COLORS.grey60}
35+
marginRight={SPACING.spacing4}
36+
color={COLORS.grey50}
3737
css={MODULE_ICON_STYLE}
3838
/>
3939
</Flex>

‎app/src/organisms/Desktop/Devices/RobotCard.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
Icon,
1414
JUSTIFY_FLEX_START,
1515
JUSTIFY_SPACE_BETWEEN,
16-
LegacyStyledText,
1716
POSITION_ABSOLUTE,
1817
POSITION_RELATIVE,
1918
SPACING,
@@ -119,7 +118,6 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null {
119118
>
120119
<AttachedInstruments robotName={robotName} />
121120
<Flex
122-
flexDirection={DIRECTION_COLUMN}
123121
gridGap={SPACING.spacing4}
124122
flexWrap={WRAP}
125123
justifyContent={JUSTIFY_SPACE_BETWEEN}
@@ -150,11 +148,15 @@ function AttachedModules(props: { robotName: string }): JSX.Element | null {
150148
const attachedModules = modulesData?.data ?? []
151149

152150
return !isModulesQueryLoading && attachedModules.length > 0 ? (
153-
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
151+
<Flex
152+
flexDirection={DIRECTION_COLUMN}
153+
gridGap={SPACING.spacing4}
154+
width="85px"
155+
>
154156
<StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
155157
{t('modules')}
156158
</StyledText>
157-
<Flex>
159+
<Flex flexWrap={WRAP}>
158160
{attachedModules.map((module, i) => (
159161
<ModuleIcon
160162
key={`${String(module.moduleModel)}_${i}_${robotName}`}
@@ -174,9 +176,13 @@ function AttachedDevices(props: { robotName: string }): JSX.Element | null {
174176
const { t } = useTranslation('devices_landing')
175177
const { data } = useCamera()
176178
return data?.cameraEnabled ? (
177-
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
179+
<Flex
180+
flexDirection={DIRECTION_COLUMN}
181+
gridGap={SPACING.spacing4}
182+
width="85px"
183+
>
178184
<StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
179-
{t('input_devices')}
185+
{t('peripherals')}
180186
</StyledText>
181187
<Icon
182188
key={`${String('camera')}_${robotName}`}
@@ -189,7 +195,7 @@ function AttachedDevices(props: { robotName: string }): JSX.Element | null {
189195
}
190196

191197
function AttachedInstruments(props: { robotName: string }): JSX.Element {
192-
const { t } = useTranslation('devices_landing')
198+
const { t, i18n } = useTranslation('devices_landing')
193199
const isFlex = useIsFlex(props.robotName)
194200
const { data: pipettesData, isLoading: isPipetteQueryLoading } =
195201
usePipettesQuery()
@@ -218,9 +224,9 @@ function AttachedInstruments(props: { robotName: string }): JSX.Element {
218224
gridGap={SPACING.spacing4}
219225
minWidth="24rem"
220226
>
221-
<LegacyStyledText as="h6" color={COLORS.grey60}>
222-
{t('shared:instruments')}
223-
</LegacyStyledText>
227+
<StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
228+
{i18n.format(t('shared:instruments'), 'capitalize')}
229+
</StyledText>
224230

225231
{isPipetteQueryLoading || isInstrumentsQueryLoading ? null : (
226232
<Flex flexWrap={WRAP} gridGap={SPACING.spacing4}>

‎app/src/organisms/Desktop/ProtocolsLanding/ProtocolCard.tsx‎

Lines changed: 67 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
SIZE_2,
2222
SIZE_3,
2323
SPACING,
24+
StyledText,
2425
TYPOGRAPHY,
2526
WRAP,
2627
} from '@opentrons/components'
@@ -131,7 +132,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
131132
mostRecentAnalysis,
132133
modified,
133134
} = props
134-
const { t } = useTranslation(['protocol_list', 'shared'])
135+
const { t, i18n } = useTranslation(['protocol_list', 'shared'])
135136
const analysisStatus = getAnalysisStatus(isAnalyzing, mostRecentAnalysis)
136137

137138
const { left: leftMountPipetteName, right: rightMountPipetteName } =
@@ -145,6 +146,8 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
145146
const requiredModuleTypes = requiredModuleModels.map(getModuleType)
146147

147148
const robotType = mostRecentAnalysis?.robotType ?? null
149+
const hasPeripherals =
150+
mostRecentAnalysis?.commandPreconditions?.isCameraUsed ?? false
148151

149152
return (
150153
<Flex
@@ -248,9 +251,12 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
248251
flexDirection={DIRECTION_COLUMN}
249252
gridGap={SPACING.spacing4}
250253
>
251-
<LegacyStyledText as="h6" color={COLORS.grey60}>
252-
{t('robot')}
253-
</LegacyStyledText>
254+
<StyledText
255+
color={COLORS.grey60}
256+
desktopStyle="bodyDefaultRegular"
257+
>
258+
{i18n.format('robot', 'capitalize')}
259+
</StyledText>
254260
<LegacyStyledText as="p">
255261
{getRobotTypeDisplayName(robotType)}
256262
</LegacyStyledText>
@@ -260,11 +266,13 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
260266
flexDirection={DIRECTION_COLUMN}
261267
gridGap={SPACING.spacing4}
262268
data-testid={`ProtocolCard_instruments_${protocolDisplayName}`}
263-
minWidth="10.625rem"
264269
>
265-
<LegacyStyledText as="h6" color={COLORS.grey60}>
266-
{t('shared:instruments')}
267-
</LegacyStyledText>
270+
<StyledText
271+
desktopStyle="bodyDefaultRegular"
272+
color={COLORS.grey60}
273+
>
274+
{i18n.format(t('shared:instruments'), 'capitalize')}
275+
</StyledText>
268276
{
269277
{
270278
missing: (
@@ -312,29 +320,59 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
312320
}[analysisStatus]
313321
}
314322
</Flex>
315-
<Flex
316-
flex="0 0 6rem"
317-
flexDirection={DIRECTION_COLUMN}
318-
gridGap={SPACING.spacing4}
319-
>
320-
{requiredModuleTypes.length > 0 ? (
321-
<>
322-
<LegacyStyledText as="h6" color={COLORS.grey60}>
323-
{t('modules')}
324-
</LegacyStyledText>
325-
<Flex>
326-
{requiredModuleTypes.map((moduleType, index) => (
327-
<ModuleIcon
328-
key={index}
329-
color={COLORS.grey60}
330-
moduleType={moduleType}
323+
<Flex gridGap={SPACING.spacing4}>
324+
<Flex
325+
flex="0 0 6rem"
326+
flexDirection={DIRECTION_COLUMN}
327+
gridGap={SPACING.spacing4}
328+
width="85px"
329+
>
330+
{requiredModuleTypes.length > 0 ? (
331+
<>
332+
<StyledText
333+
desktopStyle="bodyDefaultRegular"
334+
color={COLORS.grey60}
335+
>
336+
{i18n.format('modules', 'capitalize')}
337+
</StyledText>
338+
<Flex flexWrap={WRAP}>
339+
{requiredModuleTypes.map((moduleType, index) => (
340+
<ModuleIcon
341+
key={index}
342+
color={COLORS.grey50}
343+
moduleType={moduleType}
344+
height="1rem"
345+
marginRight={SPACING.spacing8}
346+
/>
347+
))}
348+
</Flex>
349+
</>
350+
) : null}
351+
</Flex>
352+
{hasPeripherals && (
353+
<Flex
354+
flex="0 0 6rem"
355+
flexDirection={DIRECTION_COLUMN}
356+
gridGap={SPACING.spacing4}
357+
width="85px"
358+
>
359+
<>
360+
<StyledText
361+
desktopStyle="bodyDefaultRegular"
362+
color={COLORS.grey60}
363+
>
364+
{t('peripherals')}
365+
</StyledText>
366+
<Flex flexWrap={WRAP}>
367+
<Icon
368+
color={COLORS.grey50}
369+
name="photo-camera"
331370
height="1rem"
332-
marginRight={SPACING.spacing8}
333371
/>
334-
))}
335-
</Flex>
336-
</>
337-
) : null}
372+
</Flex>
373+
</>
374+
</Flex>
375+
)}
338376
</Flex>
339377
</Flex>
340378
<Flex

0 commit comments

Comments
 (0)