Skip to content

Commit

Permalink
refactor(app): update CommandText (#15453)
Browse files Browse the repository at this point in the history 
CommandText now takes an optional "as" prop for typography overrides.
  • Loading branch information
@mjhuff
mjhuff authored Jun 18, 2024
1 parent adc2c1d commit e60953f
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 24 deletions.
50 changes: 26 additions & 24 deletions app/src/molecules/Command/CommandText.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ interface Props extends StyleProps {
command: RunTimeCommand
commandTextData: CommandTextData
robotType: RobotType
as?: React.ComponentProps<typeof StyledText>['as']
isOnDevice?: boolean
propagateCenter?: boolean
propagateTextLimit?: boolean
Expand All @@ -63,6 +64,7 @@ export function CommandText(props: Props): JSX.Element | null {
robotType,
propagateCenter = false,
propagateTextLimit = false,
as = 'p',
...styleProps
} = props
const { t } = useTranslation('protocol_command_text')
Expand All @@ -81,7 +83,7 @@ export function CommandText(props: Props): JSX.Element | null {
case 'dropTipInPlace':
case 'pickUpTip': {
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
<PipettingCommandText {...{ command, commandTextData, robotType }} />
</StyledText>
)
Expand All @@ -91,7 +93,7 @@ export function CommandText(props: Props): JSX.Element | null {
case 'loadModule':
case 'loadLiquid': {
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
<LoadCommandText {...{ command, commandTextData, robotType }} />
</StyledText>
)
Expand All @@ -102,7 +104,7 @@ export function CommandText(props: Props): JSX.Element | null {
case 'thermocycler/setTargetLidTemperature':
case 'heaterShaker/setTargetTemperature': {
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
<TemperatureCommandText command={command} />
</StyledText>
)
Expand Down Expand Up @@ -135,12 +137,12 @@ export function CommandText(props: Props): JSX.Element | null {
} ;
`}
>
<StyledText as="p" marginBottom={SPACING.spacing4} {...styleProps}>
<StyledText as={as} marginBottom={SPACING.spacing4} {...styleProps}>
{t('tc_starting_profile', {
repetitions: Object.keys(steps).length,
})}
</StyledText>
<StyledText as="p" marginLeft={SPACING.spacing16}>
<StyledText as={as} marginLeft={SPACING.spacing16}>
<ul>
{shouldPropagateTextLimit ? (
<li
Expand Down Expand Up @@ -171,31 +173,31 @@ export function CommandText(props: Props): JSX.Element | null {
case 'heaterShaker/setAndWaitForShakeSpeed': {
const { rpm } = command.params
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{t('set_and_await_hs_shake', { rpm })}
</StyledText>
)
}
case 'moveToSlot': {
const { slotName } = command.params
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{t('move_to_slot', { slot_name: slotName })}
</StyledText>
)
}
case 'moveRelative': {
const { axis, distance } = command.params
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{t('move_relative', { axis, distance })}
</StyledText>
)
}
case 'moveToCoordinates': {
const { coordinates } = command.params
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{t('move_to_coordinates', coordinates)}
</StyledText>
)
Expand All @@ -220,7 +222,7 @@ export function CommandText(props: Props): JSX.Element | null {
)
: ''
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{t('move_to_well', {
well_name: wellName,
labware: getLabwareName(commandTextData, labwareId),
Expand All @@ -231,7 +233,7 @@ export function CommandText(props: Props): JSX.Element | null {
}
case 'moveLabware': {
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
<MoveLabwareCommandText
{...{ command, commandTextData, robotType }}
/>
Expand All @@ -245,7 +247,7 @@ export function CommandText(props: Props): JSX.Element | null {
)?.pipetteName

return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{t('configure_for_volume', {
volume,
pipette:
Expand All @@ -264,7 +266,7 @@ export function CommandText(props: Props): JSX.Element | null {

// TODO (sb, 11/9/23): Add support for other configurations when needed
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{t('configure_nozzle_layout', {
amount: configurationParams.style === 'COLUMN' ? '8' : 'all',
pipette:
Expand All @@ -282,7 +284,7 @@ export function CommandText(props: Props): JSX.Element | null {
)?.pipetteName

return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{t('prepare_to_aspirate', {
pipette:
pipetteName != null
Expand All @@ -300,7 +302,7 @@ export function CommandText(props: Props): JSX.Element | null {
)

return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{t('move_to_addressable_area', {
addressable_area: addressableAreaDisplayName,
})}
Expand All @@ -314,7 +316,7 @@ export function CommandText(props: Props): JSX.Element | null {
t
)
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{t('move_to_addressable_area_drop_tip', {
addressable_area: addressableAreaDisplayName,
})}
Expand Down Expand Up @@ -342,23 +344,23 @@ export function CommandText(props: Props): JSX.Element | null {
const simpleTKey =
SIMPLE_TRANSLATION_KEY_BY_COMMAND_TYPE[command.commandType]
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{simpleTKey != null ? t(simpleTKey) : null}
</StyledText>
)
}
case 'waitForDuration': {
const { seconds, message } = command.params
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{t('wait_for_duration', { seconds, message })}
</StyledText>
)
}
case 'pause': // legacy pause command
case 'waitForResume': {
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{command.params?.message && command.params.message !== ''
? command.params.message
: t('wait_for_resume')}
Expand All @@ -370,15 +372,15 @@ export function CommandText(props: Props): JSX.Element | null {
const { message = '' } = command.params
if ('waitForResume' in command.params) {
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{command.params?.message && command.params.message !== ''
? command.params.message
: t('wait_for_resume')}
</StyledText>
)
} else {
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{t('wait_for_duration', {
seconds: command.params.seconds,
message,
Expand All @@ -390,7 +392,7 @@ export function CommandText(props: Props): JSX.Element | null {
case 'comment': {
const { message } = command.params
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{message}
</StyledText>
)
Expand All @@ -402,7 +404,7 @@ export function CommandText(props: Props): JSX.Element | null {
? JSON.stringify(legacyCommandText)
: String(legacyCommandText)
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{legacyCommandText != null
? sanitizedCommandText
: `${command.commandType}: ${JSON.stringify(command.params)}`}
Expand All @@ -415,7 +417,7 @@ export function CommandText(props: Props): JSX.Element | null {
command
)
return (
<StyledText as="p" {...styleProps}>
<StyledText as={as} {...styleProps}>
{JSON.stringify(command)}
</StyledText>
)
Expand Down
1 change: 1 addition & 0 deletions app/src/organisms/ErrorRecoveryFlows/shared/StepInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export function StepInfo({
commandTextData={protocolAnalysis}
robotType={robotType}
display={DISPLAY_INLINE}
as={as}
/>
) : null}
</Flex>
Expand Down

0 comments on commit e60953f

Please sign in to comment.