-
Notifications
You must be signed in to change notification settings - Fork 178
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(protocol-designer, components): wire up pause form in PD redesign (
#16328) This PR adds form functionality and UI for pause step in PD redesign. I consolidate pause hours, minutes, and seconds into a single colon-delimited time field, add errors and masking, and parse the time string when creating command arguments. I also touch several components that require styling refactors, including `Toolbox`, `DropdownMenu`, and `RadioButton`. Note that migrating separate pause time fields to a single field will be addressed in a future PR. Closes AUTH-809
- Loading branch information
Showing
17 changed files
with
349 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
251 changes: 249 additions & 2 deletions
251
protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/PauseTools/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,252 @@ | ||
| import * as React from 'react' | ||
| import styled from 'styled-components' | ||
| import { useTranslation } from 'react-i18next' | ||
| import { useSelector } from 'react-redux' | ||
|
|
||
| export function PauseTools(): JSX.Element { | ||
| return <div>TODO: wire this up</div> | ||
| import { | ||
| BORDERS, | ||
| COLORS, | ||
| DIRECTION_COLUMN, | ||
| Divider, | ||
| DropdownMenu, | ||
| Flex, | ||
| RadioButton, | ||
| SPACING, | ||
| StyledText, | ||
| TYPOGRAPHY, | ||
| } from '@opentrons/components' | ||
| import { | ||
| HEATERSHAKER_MODULE_TYPE, | ||
| TEMPERATURE_MODULE_TYPE, | ||
| getModuleDisplayName, | ||
| } from '@opentrons/shared-data' | ||
|
|
||
| import { | ||
| PAUSE_UNTIL_RESUME, | ||
| PAUSE_UNTIL_TEMP, | ||
| PAUSE_UNTIL_TIME, | ||
| } from '../../../../../../constants' | ||
| import { selectors as uiModuleSelectors } from '../../../../../../ui/modules' | ||
| import { getInitialDeckSetup } from '../../../../../../step-forms/selectors' | ||
|
|
||
| import type { StepFormProps } from '../../types' | ||
|
|
||
| export function PauseTools(props: StepFormProps): JSX.Element { | ||
| const { propsForFields } = props | ||
|
|
||
| const tempModuleLabwareOptions = useSelector( | ||
| uiModuleSelectors.getTemperatureLabwareOptions | ||
| ) | ||
| const { i18n, t } = useTranslation(['tooltip', 'application', 'form']) | ||
|
|
||
| const heaterShakerModuleLabwareOptions = useSelector( | ||
| uiModuleSelectors.getHeaterShakerLabwareOptions | ||
| ) | ||
|
|
||
| const { modules } = useSelector(getInitialDeckSetup) | ||
| interface ModuleOption { | ||
| name: string | ||
| value: string | ||
| } | ||
| const modulesOnDeck = Object.values(modules) | ||
| const moduleOptions = modulesOnDeck.reduce<ModuleOption[]>((acc, module) => { | ||
| if ( | ||
| [ | ||
| TEMPERATURE_MODULE_TYPE as string, | ||
| HEATERSHAKER_MODULE_TYPE as string, | ||
| ].includes(module.type) | ||
| ) { | ||
| const moduleName = getModuleDisplayName(module.model) | ||
| return [ | ||
| ...acc, | ||
| { value: module.id, name: `${moduleName} in ${module.slot}` }, | ||
| ] | ||
| } | ||
| return acc | ||
| }, []) | ||
|
|
||
| const moduleLabwareOptions = [ | ||
| ...tempModuleLabwareOptions, | ||
| ...heaterShakerModuleLabwareOptions, | ||
| ] | ||
|
|
||
| const pauseUntilModuleEnabled = moduleLabwareOptions.length > 0 | ||
|
|
||
| const { pauseAction } = props.formData | ||
|
|
||
| return ( | ||
| <> | ||
| <Flex flexDirection={DIRECTION_COLUMN}> | ||
| <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing12}> | ||
| <Flex | ||
| flexDirection={DIRECTION_COLUMN} | ||
| gridGap={SPACING.spacing4} | ||
| width="100%" | ||
| padding={`${SPACING.spacing16} ${SPACING.spacing16} 0 ${SPACING.spacing16}`} | ||
| > | ||
| <RadioButton | ||
| onChange={(e: React.ChangeEvent<any>) => { | ||
| propsForFields.pauseAction.updateValue(e.currentTarget.value) | ||
| }} | ||
| buttonLabel={t( | ||
| 'form:step_edit_form.field.pauseAction.options.untilResume' | ||
| )} | ||
| buttonValue={PAUSE_UNTIL_RESUME} | ||
| isSelected={ | ||
| propsForFields.pauseAction.value === PAUSE_UNTIL_RESUME | ||
| } | ||
| largeDesktopBorderRadius | ||
| /> | ||
| <RadioButton | ||
| onChange={(e: React.ChangeEvent<any>) => { | ||
| propsForFields.pauseAction.updateValue(e.currentTarget.value) | ||
| }} | ||
| buttonLabel={t( | ||
| 'form:step_edit_form.field.pauseAction.options.untilTime' | ||
| )} | ||
| buttonValue={PAUSE_UNTIL_TIME} | ||
| isSelected={propsForFields.pauseAction.value === PAUSE_UNTIL_TIME} | ||
| largeDesktopBorderRadius | ||
| /> | ||
| <RadioButton | ||
| onChange={(e: React.ChangeEvent<any>) => { | ||
| propsForFields.pauseAction.updateValue(e.currentTarget.value) | ||
| }} | ||
| buttonLabel={t( | ||
| 'form:step_edit_form.field.pauseAction.options.untilTemperature' | ||
| )} | ||
| buttonValue={PAUSE_UNTIL_TEMP} | ||
| isSelected={propsForFields.pauseAction.value === PAUSE_UNTIL_TEMP} | ||
| largeDesktopBorderRadius | ||
| disabled={!pauseUntilModuleEnabled} | ||
| /> | ||
| </Flex> | ||
| <Divider marginY="0" /> | ||
| <Flex | ||
| flexDirection={DIRECTION_COLUMN} | ||
| gridGap={SPACING.spacing12} | ||
| paddingX={SPACING.spacing16} | ||
| > | ||
| {pauseAction === PAUSE_UNTIL_TIME ? ( | ||
| <Flex | ||
| flexDirection={DIRECTION_COLUMN} | ||
| gridGap={SPACING.spacing12} | ||
| > | ||
| <Flex | ||
| flexDirection={DIRECTION_COLUMN} | ||
| gridGap={SPACING.spacing4} | ||
| > | ||
| <StyledText desktopStyle="captionRegular"> | ||
| {t('application:time')} | ||
| </StyledText> | ||
| <StyledTextArea | ||
| value={propsForFields.pauseTime.value as string} | ||
| onChange={(e: React.ChangeEvent<any>) => { | ||
| propsForFields.pauseTime.updateValue( | ||
| e.currentTarget.value | ||
| ) | ||
| }} | ||
| error={propsForFields.pauseTime.errorToShow != null} | ||
| /> | ||
| {propsForFields.pauseTime.errorToShow != null ? ( | ||
| <StyledText | ||
| desktopStyle="captionRegular" | ||
| color={COLORS.red50} | ||
| > | ||
| {propsForFields.pauseTime.errorToShow} | ||
| </StyledText> | ||
| ) : null} | ||
| </Flex> | ||
| </Flex> | ||
| ) : null} | ||
| {pauseAction === PAUSE_UNTIL_TEMP ? ( | ||
| <> | ||
| <Flex flexDirection={DIRECTION_COLUMN}> | ||
| <StyledText desktopStyle="captionRegular"> | ||
| {i18n.format( | ||
| t('form:step_edit_form.field.moduleActionLabware.label'), | ||
| 'capitalize' | ||
| )} | ||
| </StyledText> | ||
| <DropdownMenu | ||
| filterOptions={moduleOptions} | ||
| onClick={value => { | ||
| propsForFields.moduleId.updateValue(value) | ||
| }} | ||
| currentOption={ | ||
| moduleOptions.find( | ||
| option => option.value === propsForFields.moduleId.value | ||
| ) ?? { name: '', value: '' } | ||
| } | ||
| dropdownType="neutral" | ||
| width="100%" | ||
| /> | ||
| </Flex> | ||
| <Flex | ||
| flexDirection={DIRECTION_COLUMN} | ||
| gridGap={SPACING.spacing4} | ||
| > | ||
| <StyledText desktopStyle="captionRegular"> | ||
| {t('application:temperature')} | ||
| </StyledText> | ||
| <StyledTextArea | ||
| value={propsForFields.pauseTemperature.value as string} | ||
| onChange={(e: React.ChangeEvent<any>) => { | ||
| propsForFields.pauseTemperature.updateValue( | ||
| e.currentTarget.value | ||
| ) | ||
| }} | ||
| error={propsForFields.pauseTemperature.errorToShow != null} | ||
| /> | ||
| {propsForFields.pauseTemperature.value !== '' && | ||
| propsForFields.pauseTemperature.errorToShow != null ? ( | ||
| <StyledText | ||
| desktopStyle="captionRegular" | ||
| color={COLORS.red50} | ||
| > | ||
| {propsForFields.pauseTemperature.errorToShow} | ||
| </StyledText> | ||
| ) : null} | ||
| </Flex> | ||
| </> | ||
| ) : null} | ||
| </Flex> | ||
| <Flex | ||
| flexDirection={DIRECTION_COLUMN} | ||
| gridGap={SPACING.spacing4} | ||
| paddingX={SPACING.spacing16} | ||
| > | ||
| <StyledText desktopStyle="captionRegular"> | ||
| {i18n.format( | ||
| t('form:step_edit_form.field.pauseMessage.label'), | ||
| 'capitalize' | ||
| )} | ||
| </StyledText> | ||
| <StyledTextArea | ||
| value={propsForFields.pauseMessage.value as string} | ||
| onChange={(e: React.ChangeEvent<any>) => { | ||
| propsForFields.pauseMessage.updateValue(e.currentTarget.value) | ||
| }} | ||
| height="7rem" | ||
| /> | ||
| </Flex> | ||
| </Flex> | ||
| </Flex> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| const StyledTextArea = styled.textarea<{ height?: string; error?: boolean }>` | ||
| width: 100%; | ||
| height: ${props => (props.height != null ? props.height : '2rem')}; | ||
| box-sizing: border-box; | ||
| border: 1px solid | ||
| ${props => | ||
| props.error != null && props.error ? COLORS.red50 : COLORS.grey50}; | ||
| border-radius: ${BORDERS.borderRadius4}; | ||
| padding: ${SPACING.spacing8}; | ||
| font-size: ${TYPOGRAPHY.fontSizeH4}; | ||
| line-height: ${TYPOGRAPHY.lineHeight16}; | ||
| font-weight: ${TYPOGRAPHY.fontWeightRegular}; | ||
| resize: none; | ||
| ` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.