From ff2879bc71599b9988f50bccbf2b5793b94ba07f Mon Sep 17 00:00:00 2001 From: Jethary Date: Tue, 15 Oct 2024 16:44:24 -0400 Subject: [PATCH] feat(protocol-designer): page one of mix tools closes AUTH-807 --- components/src/atoms/InputField/index.tsx | 1 + .../src/assets/localization/en/form.json | 2 +- .../localization/en/protocol_steps.json | 3 +- .../src/assets/localization/en/tooltip.json | 19 +-- .../molecules/InputStepFormField/index.tsx | 34 +----- .../src/organisms/SelectWellsModal/index.tsx | 1 + .../PipetteFields/WellSelectionField.tsx | 3 +- .../StepForm/StepTools/MixTools/index.tsx | 109 +++++++++++++++++- 8 files changed, 130 insertions(+), 42 deletions(-) diff --git a/components/src/atoms/InputField/index.tsx b/components/src/atoms/InputField/index.tsx index 8a9eb76c2d8e..8933ca5345c1 100644 --- a/components/src/atoms/InputField/index.tsx +++ b/components/src/atoms/InputField/index.tsx @@ -234,6 +234,7 @@ export const InputField = React.forwardRef( return ( - - {showTooltip ? ( - <> - - - - - {t(`${tooltipContent}`)} - - - ) : null} - + { dispatch(stepsActions.setWellSelectionLabwareKey(key)) } + const handleOpen = (): void => { if (onFieldFocus) { onFieldFocus() @@ -109,7 +110,7 @@ export const WellSelectionField = ( {t(`tooltip:${tooltipContent}`)} TODO: wire this up +import { useSelector } from 'react-redux' +import { useTranslation } from 'react-i18next' +import { DIRECTION_COLUMN, Divider, Flex } from '@opentrons/components' +import { InputStepFormField } from '../../../../../../molecules' +import { + getLabwareEntities, + getPipetteEntities, +} from '../../../../../../step-forms/selectors' +import { getEnableReturnTip } from '../../../../../../feature-flags/selectors' +import { + ChangeTipField, + DropTipField, + LabwareField, + PartialTipField, + PickUpTipField, + PipetteField, + TipWellSelectionField, + TiprackField, + VolumeField, + WellSelectionField, +} from '../../PipetteFields' +import type { StepFormProps } from '../../types' + +export function MixTools(props: StepFormProps): JSX.Element { + const pipettes = useSelector(getPipetteEntities) + const enableReturnTip = useSelector(getEnableReturnTip) + const labwares = useSelector(getLabwareEntities) + const { t } = useTranslation(['application', 'form']) + + const { propsForFields, formData, toolboxStep } = props + const is96Channel = + propsForFields.pipette.value != null && + pipettes[String(propsForFields.pipette.value)].name === 'p1000_96' + const userSelectedPickUpTipLocation = + labwares[String(propsForFields.pickUpTip_location.value)] != null + const userSelectedDropTipLocation = + labwares[String(propsForFields.dropTip_location.value)] != null + + return toolboxStep === 0 ? ( + + + {is96Channel ? : null} + + + + + + + + + + + + + + + {enableReturnTip ? ( + <> + + {userSelectedPickUpTipLocation ? ( + <> + + + + ) : null} + + ) : null} + + + {userSelectedDropTipLocation && enableReturnTip ? ( + <> + + + + ) : null} + + ) : ( +
wire this up
+ ) }