From 519482dc34bfcf60015c558546553494b7f47125 Mon Sep 17 00:00:00 2001 From: koji Date: Tue, 8 Oct 2024 09:23:14 -0400 Subject: [PATCH] fix(protocol-designer): fix EditInstrumentsModal issue (#16421) * fix(protocol-designer): fix EditInstrumentsModal issue --- .../localization/en/create_new_protocol.json | 2 +- .../src/assets/localization/en/shared.json | 3 +- .../organisms/EditInstrumentsModal/index.tsx | 147 +++++++++--------- .../SelectPipettes.tsx | 78 +++++----- .../__tests__/SelectPipettes.test.tsx | 4 +- 5 files changed, 120 insertions(+), 114 deletions(-) diff --git a/protocol-designer/src/assets/localization/en/create_new_protocol.json b/protocol-designer/src/assets/localization/en/create_new_protocol.json index 52c03ca7b50..b75005152d7 100644 --- a/protocol-designer/src/assets/localization/en/create_new_protocol.json +++ b/protocol-designer/src/assets/localization/en/create_new_protocol.json @@ -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", diff --git a/protocol-designer/src/assets/localization/en/shared.json b/protocol-designer/src/assets/localization/en/shared.json index 4da0ce66196..fcf63f043da 100644 --- a/protocol-designer/src/assets/localization/en/shared.json +++ b/protocol-designer/src/assets/localization/en/shared.json @@ -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", diff --git a/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx b/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx index c11a62a678c..6f1729a2110 100644 --- a/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx +++ b/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx @@ -6,6 +6,7 @@ import styled, { css } from 'styled-components' import mapValues from 'lodash/mapValues' import { ALIGN_CENTER, + ALIGN_STRETCH, Box, Btn, Checkbox, @@ -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, @@ -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( { resetFields() onClose() @@ -154,7 +170,7 @@ export function EditInstrumentsModal( {page === 'overview' ? null : ( {page === 'overview' ? ( - <> - + + @@ -307,13 +322,9 @@ export function EditInstrumentsModal( {robotType === FLEX_ROBOT_TYPE ? ( - + @@ -368,18 +379,15 @@ export function EditInstrumentsModal( ) : null} - + ) : ( - <> - + + {t('pipette_type')} @@ -400,16 +408,10 @@ export function EditInstrumentsModal( ) })} - + {pipetteType != null && robotType === OT2_ROBOT_TYPE ? ( - - + + {t('pipette_gen')} @@ -435,12 +437,10 @@ export function EditInstrumentsModal( robotType === OT2_ROBOT_TYPE) ? ( - + {t('pipette_vol')} @@ -488,19 +488,16 @@ export function EditInstrumentsModal( {allPipetteOptions.includes(selectedPip as PipetteName) ? (() => { const tiprackOptions = getTiprackOptions({ - allLabware: allLabware, - allowAllTipracks: allowAllTipracks, + allLabware, + allowAllTipracks, selectedPipetteName: selectedPip, }) return ( - + {t('pipette_tips')} {tiprackOptions.map(option => ( @@ -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 @@ -529,41 +529,42 @@ export function EditInstrumentsModal( }} /> ))} - - - - - {t('add_custom_tips')} - - dispatch(createCustomTiprackDef(e))} - /> - - {pipetteVolume === 'p1000' && - robotType === FLEX_ROBOT_TYPE ? null : ( - { - dispatch( - setFeatureFlags({ - OT_PD_ALLOW_ALL_TIPRACKS: !allowAllTipracks, - }) - ) - }} - textDecoration={TYPOGRAPHY.textDecorationUnderline} - > + + - {allowAllTipracks - ? t('show_default_tips') - : t('show_all_tips')} + {t('add_custom_tips')} - - )} - + dispatch(createCustomTiprackDef(e))} + /> + + {pipetteVolume === 'p1000' && + robotType === FLEX_ROBOT_TYPE ? null : ( + { + dispatch( + setFeatureFlags({ + OT_PD_ALLOW_ALL_TIPRACKS: !allowAllTipracks, + }) + ) + }} + textDecoration={TYPOGRAPHY.textDecorationUnderline} + > + + {allowAllTipracks + ? t('show_default_tips') + : t('show_all_tips')} + + + )} + + ) })() diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx index b9f16f5e23c..f63d8532e60 100644 --- a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx +++ b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx @@ -10,6 +10,7 @@ import { } from '@opentrons/shared-data' import { ALIGN_CENTER, + ALIGN_STRETCH, Box, Btn, Checkbox, @@ -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( @@ -354,45 +358,45 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null { ) )} - - - - - {t('add_custom_tips')} - - - dispatch(createCustomTiprackDef(e)) - } - /> - - {pipetteVolume === 'p1000' && - robotType === FLEX_ROBOT_TYPE ? null : ( - { - if (allowAllTipracks) { - dispatch( - setFeatureFlags({ - OT_PD_ALLOW_ALL_TIPRACKS: !allowAllTipracks, - }) - ) - } else { - setIncompatibleTip(true) - } - }} - textDecoration={ - TYPOGRAPHY.textDecorationUnderline - } - > + + - {allowAllTipracks - ? t('show_default_tips') - : t('show_all_tips')} + {t('add_custom_tips')} - - )} + + dispatch(createCustomTiprackDef(e)) + } + /> + + {pipetteVolume === 'p1000' && + robotType === FLEX_ROBOT_TYPE ? null : ( + { + if (allowAllTipracks) { + dispatch( + setFeatureFlags({ + OT_PD_ALLOW_ALL_TIPRACKS: !allowAllTipracks, + }) + ) + } else { + setIncompatibleTip(true) + } + }} + textDecoration={ + TYPOGRAPHY.textDecorationUnderline + } + > + + {allowAllTipracks + ? t('show_default_tips') + : t('show_all_tips')} + + + )} + ) diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectPipettes.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectPipettes.test.tsx index 922c48a0959..3efc8ec11b4 100644 --- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectPipettes.test.tsx +++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectPipettes.test.tsx @@ -77,7 +77,7 @@ describe('SelectPipettes', () => { it('renders the first page of select pipettes for a Flex', () => { render(props) screen.getByText('Step 2') - screen.getByText('Add a pipette and tips') + screen.getByText('Add a pipette') screen.getByText( 'Pick your first pipette. If you need a second pipette, you can add it next.' ) @@ -125,7 +125,7 @@ describe('SelectPipettes', () => { } render(props) screen.getByText('Step 2') - screen.getByText('Add a pipette and tips') + screen.getByText('Add a pipette') screen.getByText( 'Pick your first pipette. If you need a second pipette, you can add it next.' )