Skip to content

Commit

Permalink
fix(protocol-designer): fix EditInstrumentsModal issue (#16421)
Browse files Browse the repository at this point in the history 
* fix(protocol-designer): fix EditInstrumentsModal issue
  • Loading branch information
@koji
koji authored Oct 8, 2024
1 parent a9b219e commit 519482d
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 114 deletions.
2 changes: 1 addition & 1 deletion protocol-designer/src/assets/localization/en/create_new_protocol.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"add_fixtures": "Add your fixtures",
"add_gripper": "Add a gripper",
"add_modules": "Add your modules",
"add_pipette": "Add a pipette and tips",
"add_pipette": "Add a pipette",
"author_org": "Author/Organization",
"basics": "Let’s start with the basics",
"description": "Description",
Expand Down
3 changes: 2 additions & 1 deletion protocol-designer/src/assets/localization/en/shared.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
"developer_ff": "Developer feature flags",
"done": "Done",
"edit_existing": "Edit existing protocol",
"edit_instruments": "Edit instruments",
"edit_instruments": "Edit Instruments",
"edit_pipette": "Edit Pipette",
"edit_protocol_metadata": "Edit protocol metadata",
"edit": "edit",
"eight_channel": "8-Channel",
Expand Down
147 changes: 74 additions & 73 deletions protocol-designer/src/organisms/EditInstrumentsModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import styled, { css } from 'styled-components'
import mapValues from 'lodash/mapValues'
import {
ALIGN_CENTER,
ALIGN_STRETCH,
Box,
Btn,
Checkbox,
Expand All @@ -17,11 +18,13 @@ import {
DISPLAY_INLINE_BLOCK,
EmptySelectorButton,
Flex,
FLEX_MAX_CONTENT,
Icon,
JUSTIFY_END,
JUSTIFY_SPACE_BETWEEN,
ListItem,
Modal,
OVERFLOW_AUTO,
PrimaryButton,
PRODUCT,
RadioButton,
Expand Down Expand Up @@ -141,11 +144,24 @@ export function EditInstrumentsModal(
? getSectionsFromPipetteName(leftPip.name, leftPip.spec)
: null

const removeOpentronsPhrases = (input: string): string => {
const phrasesToRemove = ['Opentrons Flex 96', 'Opentrons OT-2 96']

return phrasesToRemove
.reduce((text, phrase) => {
return text.replace(new RegExp(phrase, 'gi'), '')
}, input)
.trim()
}

return createPortal(
<Modal
title={t('shared:edit_instruments')}
title={
page === 'add' ? t('shared:edit_pipette') : t('shared:edit_instruments')
}
type="info"
closeOnOutsideClick
width="37.125rem"
onClose={() => {
resetFields()
onClose()
Expand All @@ -154,7 +170,7 @@ export function EditInstrumentsModal(
<Flex
justifyContent={JUSTIFY_END}
gridGap={SPACING.spacing8}
padding={SPACING.spacing24}
padding={`0 ${SPACING.spacing24} ${SPACING.spacing24}`}
>
{page === 'overview' ? null : (
<SecondaryButton
Expand Down Expand Up @@ -199,11 +215,10 @@ export function EditInstrumentsModal(
}
>
{page === 'overview' ? (
<>
<Flex marginTop={SPACING.spacing24} flexDirection={DIRECTION_COLUMN}>
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing24}>
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
<Flex
justifyContent={JUSTIFY_SPACE_BETWEEN}
marginBottom={SPACING.spacing12}
alignItems={ALIGN_CENTER}
>
<StyledText desktopStyle="bodyLargeSemiBold">
Expand Down Expand Up @@ -307,13 +322,9 @@ export function EditInstrumentsModal(
</Flex>
</Flex>
{robotType === FLEX_ROBOT_TYPE ? (
<Flex
marginTop={SPACING.spacing60}
flexDirection={DIRECTION_COLUMN}
>
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
<Flex
justifyContent={JUSTIFY_SPACE_BETWEEN}
marginBottom={SPACING.spacing12}
alignItems={ALIGN_CENTER}
>
<StyledText desktopStyle="bodyLargeSemiBold">
Expand Down Expand Up @@ -368,18 +379,15 @@ export function EditInstrumentsModal(
</Flex>
</Flex>
) : null}
</>
</Flex>
) : (
<Flex
flexDirection="column"
overflowY="scroll"
marginTop={SPACING.spacing24}
overflowY={OVERFLOW_AUTO}
gridGap={SPACING.spacing24}
>
<>
<StyledText
desktopStyle="bodyLargeSemiBold"
marginBottom={SPACING.spacing16}
>
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
<StyledText desktopStyle="bodyLargeSemiBold">
{t('pipette_type')}
</StyledText>
<Flex gridGap={SPACING.spacing4}>
Expand All @@ -400,16 +408,10 @@ export function EditInstrumentsModal(
)
})}
</Flex>
</>
</Flex>
{pipetteType != null && robotType === OT2_ROBOT_TYPE ? (
<Flex
flexDirection={DIRECTION_COLUMN}
marginBottom={SPACING.spacing16}
>
<StyledText
desktopStyle="bodyLargeSemiBold"
marginBottom={SPACING.spacing16}
>
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
<StyledText desktopStyle="bodyLargeSemiBold">
{t('pipette_gen')}
</StyledText>
<Flex gridGap={SPACING.spacing4}>
Expand All @@ -435,12 +437,10 @@ export function EditInstrumentsModal(
robotType === OT2_ROBOT_TYPE) ? (
<Flex
flexDirection={DIRECTION_COLUMN}
marginTop={SPACING.spacing16}
gridGap={SPACING.spacing8}
id="volume"
>
<StyledText
desktopStyle="bodyLargeSemiBold"
marginBottom={SPACING.spacing16}
>
<StyledText desktopStyle="bodyLargeSemiBold">
{t('pipette_vol')}
</StyledText>
<Flex gridGap={SPACING.spacing4}>
Expand Down Expand Up @@ -488,26 +488,26 @@ export function EditInstrumentsModal(
{allPipetteOptions.includes(selectedPip as PipetteName)
? (() => {
const tiprackOptions = getTiprackOptions({
allLabware: allLabware,
allowAllTipracks: allowAllTipracks,
allLabware,
allowAllTipracks,
selectedPipetteName: selectedPip,
})
return (
<Flex
flexDirection={DIRECTION_COLUMN}
marginTop={SPACING.spacing16}
gridGap={SPACING.spacing8}
>
<StyledText
desktopStyle="bodyLargeSemiBold"
marginBottom={SPACING.spacing16}
>
<StyledText desktopStyle="bodyLargeSemiBold">
{t('pipette_tips')}
</StyledText>
<Box
css={css`
gap: ${SPACING.spacing4};
display: ${DISPLAY_FLEX};
flex-wrap: ${WRAP};
align-items: ${ALIGN_CENTER};
align-content: ${ALIGN_CENTER};
align-self: ${ALIGN_STRETCH};
`}
>
{tiprackOptions.map(option => (
Expand All @@ -518,7 +518,7 @@ export function EditInstrumentsModal(
!selectedTips.includes(option.value)
}
isChecked={selectedTips.includes(option.value)}
labelText={option.name}
labelText={removeOpentronsPhrases(option.name)}
onClick={() => {
const updatedTips = selectedTips.includes(
option.value
Expand All @@ -529,41 +529,42 @@ export function EditInstrumentsModal(
}}
/>
))}
</Box>
<Flex
gridGap={SPACING.spacing8}
marginTop={SPACING.spacing4}
>
<StyledLabel>
<StyledText desktopStyle="bodyDefaultRegular">
{t('add_custom_tips')}
</StyledText>
<input
data-testid="SelectPipettes_customTipInput"
type="file"
onChange={e => dispatch(createCustomTiprackDef(e))}
/>
</StyledLabel>
{pipetteVolume === 'p1000' &&
robotType === FLEX_ROBOT_TYPE ? null : (
<Btn
onClick={() => {
dispatch(
setFeatureFlags({
OT_PD_ALLOW_ALL_TIPRACKS: !allowAllTipracks,
})
)
}}
textDecoration={TYPOGRAPHY.textDecorationUnderline}
>
<Flex
gridGap={SPACING.spacing8}
padding={SPACING.spacing4}
width={FLEX_MAX_CONTENT}
>
<StyledLabel>
<StyledText desktopStyle="bodyDefaultRegular">
{allowAllTipracks
? t('show_default_tips')
: t('show_all_tips')}
{t('add_custom_tips')}
</StyledText>
</Btn>
)}
</Flex>
<input
data-testid="SelectPipettes_customTipInput"
type="file"
onChange={e => dispatch(createCustomTiprackDef(e))}
/>
</StyledLabel>
{pipetteVolume === 'p1000' &&
robotType === FLEX_ROBOT_TYPE ? null : (
<Btn
onClick={() => {
dispatch(
setFeatureFlags({
OT_PD_ALLOW_ALL_TIPRACKS: !allowAllTipracks,
})
)
}}
textDecoration={TYPOGRAPHY.textDecorationUnderline}
>
<StyledText desktopStyle="bodyDefaultRegular">
{allowAllTipracks
? t('show_default_tips')
: t('show_all_tips')}
</StyledText>
</Btn>
)}
</Flex>
</Box>
</Flex>
)
})()
Expand Down
78 changes: 41 additions & 37 deletions protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
} from '@opentrons/shared-data'
import {
ALIGN_CENTER,
ALIGN_STRETCH,
Box,
Btn,
Checkbox,
Expand Down Expand Up @@ -323,6 +324,9 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
gap: ${SPACING.spacing4};
display: ${DISPLAY_FLEX};
flex-wrap: ${WRAP};
align-items: ${ALIGN_CENTER};
align-content: ${ALIGN_CENTER};
align-self: ${ALIGN_STRETCH};
`}
>
{Object.entries(tiprackOptions).map(
Expand Down Expand Up @@ -354,45 +358,45 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
)
)}
</Box>
</Flex>
<Flex gridGap={SPACING.spacing8}>
<StyledLabel>
<StyledText desktopStyle="bodyDefaultRegular">
{t('add_custom_tips')}
</StyledText>
<input
data-testid="SelectPipettes_customTipInput"
type="file"
onChange={e =>
dispatch(createCustomTiprackDef(e))
}
/>
</StyledLabel>
{pipetteVolume === 'p1000' &&
robotType === FLEX_ROBOT_TYPE ? null : (
<Btn
onClick={() => {
if (allowAllTipracks) {
dispatch(
setFeatureFlags({
OT_PD_ALLOW_ALL_TIPRACKS: !allowAllTipracks,
})
)
} else {
setIncompatibleTip(true)
}
}}
textDecoration={
TYPOGRAPHY.textDecorationUnderline
}
>
<Flex gridGap={SPACING.spacing4}>
<StyledLabel>
<StyledText desktopStyle="bodyDefaultRegular">
{allowAllTipracks
? t('show_default_tips')
: t('show_all_tips')}
{t('add_custom_tips')}
</StyledText>
</Btn>
)}
<input
data-testid="SelectPipettes_customTipInput"
type="file"
onChange={e =>
dispatch(createCustomTiprackDef(e))
}
/>
</StyledLabel>
{pipetteVolume === 'p1000' &&
robotType === FLEX_ROBOT_TYPE ? null : (
<Btn
onClick={() => {
if (allowAllTipracks) {
dispatch(
setFeatureFlags({
OT_PD_ALLOW_ALL_TIPRACKS: !allowAllTipracks,
})
)
} else {
setIncompatibleTip(true)
}
}}
textDecoration={
TYPOGRAPHY.textDecorationUnderline
}
>
<StyledText desktopStyle="bodyDefaultRegular">
{allowAllTipracks
? t('show_default_tips')
: t('show_all_tips')}
</StyledText>
</Btn>
)}
</Flex>
</Flex>
</Flex>
)
Expand Down
Loading

0 comments on commit 519482d

Please sign in to comment.