From 57e617b877911132a982b8a8207850dfd49dea7f Mon Sep 17 00:00:00 2001 From: Jethary Date: Mon, 19 Aug 2024 13:26:35 -0400 Subject: [PATCH] edit a few things to match lateset designs --- .../localization/en/create_new_protocol.json | 13 ++- .../CreateNewProtocolWizard/AddMetadata.tsx | 8 +- .../PipetteInfoItem.tsx | 7 +- .../SelectFixtures.tsx | 1 + .../CreateNewProtocolWizard/SelectGripper.tsx | 12 +- .../SelectPipettes.tsx | 103 ++++++++++-------- .../CreateNewProtocolWizard/SelectRobot.tsx | 12 +- .../CreateNewProtocolWizard/WizardBody.tsx | 1 - .../__tests__/SelectGripper.test.tsx | 4 +- .../__tests__/SelectRobot.test.tsx | 5 +- 10 files changed, 96 insertions(+), 70 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 321491f49c0..0f3a91c0672 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_pip": "Add a pipette", + "add_pip": "Add a pipette and tips", "author_org": "Author/Organization", "basics": "Let’s start with the basics", "description": "Description", @@ -11,7 +11,8 @@ "fixtures_added": "Fixtures added", "modules_added": "Modules added", "name": "Name", - "need_gripper": "Does your protocol need a Flex Gripper?", + "need_gripper": "Do you want to move labware automatically with the gripper?", + "fixtures_replace": "Fixtures replace standard deck slots and let you add functionality to your Flex.", "pip_gen": "Pipette generation", "pip_tips": "Pipette tips", "pip_type": "Pipette type", @@ -21,20 +22,20 @@ "questions": "We’re going to ask a few questions to help you get started building your protocol.", "remove": "Remove", "robot_pips": "Robot pipettes", - "robot_type": "Which robot would you like to use?", + "robot_type": "What kind of robot do you have?", "show_all_tips": "Show all tips", "show_default_tips": "Show default tips", "stagingArea_cutoutA3": "Staging area A3", "stagingArea_cutoutB3": "Staging area B3", "stagingArea_cutoutC3": "Staging area C3", "stagingArea_cutoutD3": "Staging area D3", - "swap": "Swap", + "swap": "Swap pipettes", "tell_us": "Tell us about your protocol", "trashBin": "Trash bin", "vol_label": "{{volume}} uL", "wasteChute": "Waste chute", "which_fixtures": "Which fixtures will you be using?", - "which_mods": "Which modules will you be using?", - "which_pip": "Tell us what pipette and tips you want to use.", + "which_mods": "Select modules to use in your protocol.", + "which_pip": "Pick your first pipette. If you need a second pipette, you can add it next.", "your_pips": "Your pipettes" } diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/AddMetadata.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/AddMetadata.tsx index d78b02586ee..08013bade99 100644 --- a/protocol-designer/src/pages/CreateNewProtocolWizard/AddMetadata.tsx +++ b/protocol-designer/src/pages/CreateNewProtocolWizard/AddMetadata.tsx @@ -33,7 +33,11 @@ export function AddMetadata(props: WizardTileProps): JSX.Element | null { proceed(1) }} > - <> + {t('name')} {/* TODO(ja, 8/9/24): add new input field */} @@ -55,7 +59,7 @@ export function AddMetadata(props: WizardTileProps): JSX.Element | null { register={register} /> - + ) } diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/PipetteInfoItem.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/PipetteInfoItem.tsx index f69abca3908..b4c10ba201f 100644 --- a/protocol-designer/src/pages/CreateNewProtocolWizard/PipetteInfoItem.tsx +++ b/protocol-designer/src/pages/CreateNewProtocolWizard/PipetteInfoItem.tsx @@ -42,7 +42,7 @@ export const PipetteInfoItem = (props: PipetteInfoItemProps): JSX.Element => { const { t, i18n } = useTranslation('create_new_protocol') const otherMount = mount === 'left' ? 'right' : 'left' const allLabware = useSelector(getLabwareDefsByURI) - + const is96Channel = pipetteName === 'p1000_96' return ( { > - {i18n.format(t('pip', { mount }), 'capitalize')} + {i18n.format( + t('pip', { mount: is96Channel ? 'Left+Right' : mount }), + 'capitalize' + )} {getPipetteSpecsV2(pipetteName)?.displayName} diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx index 91ba89f9e73..eed37aeb3ba 100644 --- a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx +++ b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx @@ -39,6 +39,7 @@ export function SelectFixtures(props: WizardTileProps): JSX.Element | null { { goBack(1) diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectGripper.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectGripper.tsx index e83ed74e5b6..6185ae24cf4 100644 --- a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectGripper.tsx +++ b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectGripper.tsx @@ -1,7 +1,13 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' import without from 'lodash/without' -import { Flex, SPACING, StyledText, RadioButton } from '@opentrons/components' +import { + Flex, + SPACING, + StyledText, + RadioButton, + DIRECTION_COLUMN, +} from '@opentrons/components' import { WizardBody } from './WizardBody' import type { WizardTileProps } from './types' @@ -37,7 +43,7 @@ export function SelectGripper(props: WizardTileProps): JSX.Element | null { proceed(1) }} > - <> + - + ) } diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx index b8087f7f4e6..470cdacf956 100644 --- a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx +++ b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx @@ -58,6 +58,7 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null { const allPipetteOptions = getAllPipetteNames('maxVolume', 'channels') const robotType = fields.robotType ?? OT2_ROBOT_TYPE const defaultMount = mount ?? 'left' + const has96Channel = pipettesByMount.left.pipetteName === 'p1000_96' const selectedPip = pipetteType === '96' || pipetteGen === 'GEN1' ? `${pipetteVolume}_${pipetteType}` @@ -69,8 +70,6 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null { setPipetteType(null) setPipetteGen('flex') setPipetteVolume(null) - setValue(`pipettesByMount.${defaultMount}.pipetteName`, undefined) - setValue(`pipettesByMount.${defaultMount}.tiprackDefURI`, undefined) } // initialize pipette name once all fields are filled out @@ -95,6 +94,8 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null { goBack={() => { if (page === 'add') { resetFields() + setValue(`pipettesByMount.${defaultMount}.pipetteName`, undefined) + setValue(`pipettesByMount.${defaultMount}.tiprackDefURI`, undefined) goBack(1) } else { setPage('add') @@ -109,7 +110,7 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null { flexDirection="column" height="48vh" overflowY="scroll" - marginBottom={SPACING.spacing40} + marginTop={SPACING.spacing60} > <> - {PIPETTE_TYPES[robotType].map(type => ( - { - setPipetteType(type.value) - setPipetteGen('flex') - setPipetteVolume(null) - setValue( - `pipettesByMount.${defaultMount}.pipetteName`, - undefined - ) - setValue( - `pipettesByMount.${defaultMount}.tiprackDefURI`, - undefined - ) - }} - buttonLabel={t(`shared:${type.label}`)} - buttonValue="single" - isSelected={pipetteType === type.value} - /> - ))} + {PIPETTE_TYPES[robotType].map(type => { + return type.value === '96' && + (pipettesByMount.left.pipetteName != null || + pipettesByMount.right.pipetteName != null) ? null : ( + { + setPipetteType(type.value) + setPipetteGen('flex') + setPipetteVolume(null) + setValue( + `pipettesByMount.${defaultMount}.pipetteName`, + undefined + ) + setValue( + `pipettesByMount.${defaultMount}.tiprackDefURI`, + undefined + ) + }} + buttonLabel={t(`shared:${type.label}`)} + buttonValue="single" + isSelected={pipetteType === type.value} + /> + ) + })} {pipetteType != null && robotType === OT2_ROBOT_TYPE ? ( @@ -314,35 +319,37 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null { {t('your_pips')} - { - const leftPipetteName = pipettesByMount.left.pipetteName - const rightPipetteName = pipettesByMount.right.pipetteName - const leftTiprackDefURI = pipettesByMount.left.tiprackDefURI - const rightTiprackDefURI = pipettesByMount.right.tiprackDefURI + {has96Channel ? null : ( + { + const leftPipetteName = pipettesByMount.left.pipetteName + const rightPipetteName = pipettesByMount.right.pipetteName + const leftTiprackDefURI = pipettesByMount.left.tiprackDefURI + const rightTiprackDefURI = pipettesByMount.right.tiprackDefURI - setValue('pipettesByMount.left.pipetteName', rightPipetteName) - setValue('pipettesByMount.right.pipetteName', leftPipetteName) - setValue( - 'pipettesByMount.left.tiprackDefURI', - rightTiprackDefURI - ) - setValue( - 'pipettesByMount.right.tiprackDefURI', - leftTiprackDefURI - ) - }} - > - - {t('swap')} - - + setValue('pipettesByMount.left.pipetteName', rightPipetteName) + setValue('pipettesByMount.right.pipetteName', leftPipetteName) + setValue( + 'pipettesByMount.left.tiprackDefURI', + rightTiprackDefURI + ) + setValue( + 'pipettesByMount.right.tiprackDefURI', + leftTiprackDefURI + ) + }} + > + + {t('swap')} + + + )} {pipettesByMount.left.pipetteName != null && pipettesByMount.left.tiprackDefURI != null ? ( { @@ -380,7 +387,7 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null { setValue={setValue} cleanForm={resetFields} /> - ) : ( + ) : has96Channel ? null : ( { setPage('add') diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectRobot.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectRobot.tsx index 26fc49b4184..db08af44d53 100644 --- a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectRobot.tsx +++ b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectRobot.tsx @@ -1,6 +1,12 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' -import { Flex, RadioButton, SPACING, StyledText } from '@opentrons/components' +import { + DIRECTION_COLUMN, + Flex, + RadioButton, + SPACING, + StyledText, +} from '@opentrons/components' import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data' import { WizardBody } from './WizardBody' import type { WizardTileProps } from './types' @@ -21,7 +27,7 @@ export function SelectRobot(props: WizardTileProps): JSX.Element { proceed(1) }} > - <> + - + ) } diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx index 7f45bd331bf..4fbbf047220 100644 --- a/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx +++ b/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx @@ -67,7 +67,6 @@ export function WizardBody(props: WizardBodyProps): JSX.Element { {subHeader != null ? ( {subHeader} diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectGripper.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectGripper.test.tsx index b2c10bde6ce..9ee7303a360 100644 --- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectGripper.test.tsx +++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectGripper.test.tsx @@ -47,7 +47,9 @@ describe('SelectGripper', () => { render(props) screen.getByText('Step 3') screen.getByText('Add a gripper') - screen.getByText('Does your protocol need a Flex Gripper?') + screen.getByText( + 'Do you want to move labware automatically with the gripper?' + ) fireEvent.click(screen.getByRole('label', { name: 'Yes' })) expect(props.setValue).toHaveBeenCalled() fireEvent.click(screen.getByRole('label', { name: 'No' })) diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectRobot.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectRobot.test.tsx index c49665d7927..02a07e1ffe6 100644 --- a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectRobot.test.tsx +++ b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectRobot.test.tsx @@ -45,10 +45,7 @@ describe('SelectRobot', () => { render(props) screen.getByText('Step 1') screen.getByText('Let’s start with the basics') - screen.getByText( - 'We’re going to ask a few questions to help you get started building your protocol.' - ) - screen.getByText('Which robot would you like to use?') + screen.getByText('What kind of robot do you have?') fireEvent.click(screen.getByRole('label', { name: 'Opentrons Flex' })) expect(props.setValue).toHaveBeenCalled() fireEvent.click(screen.getByRole('label', { name: 'Opentrons OT-2' }))