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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,256 @@ | ||
| import * as React from 'react' | ||
| import styled from 'styled-components' | ||
| import { | ||
| COLORS, | ||
| DIRECTION_COLUMN, | ||
| Divider, | ||
| DropdownMenu, | ||
| Flex, | ||
| RadioButton, | ||
| SPACING, | ||
| StyledText, | ||
| TYPOGRAPHY, | ||
| } from '@opentrons/components' | ||
| import { useTranslation } from 'react-i18next' | ||
| import { useSelector } from 'react-redux' | ||
|
|
||
| import { selectors as uiModuleSelectors } from '../../../../../../ui/modules' | ||
| import { | ||
| PAUSE_UNTIL_RESUME, | ||
| PAUSE_UNTIL_TEMP, | ||
| PAUSE_UNTIL_TIME, | ||
| } from '../../../../../../constants' | ||
|
|
||
| import type { StepFormProps } from '../../types' | ||
| import { getInitialDeckSetup } from '../../../../../../step-forms/selectors' | ||
| import { | ||
| HEATERSHAKER_MODULE_TYPE, | ||
| TEMPERATURE_MODULE_TYPE, | ||
| getModuleDisplayName, | ||
| } from '@opentrons/shared-data' | ||
|
|
||
| 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.value != null && | ||
| propsForFields.pauseTime.value !== '' | ||
| } | ||
| /> | ||
| {propsForFields.pauseTime.value !== '' && | ||
| propsForFields.pauseTime.value != 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: 4px; | ||
| padding: 8px; | ||
| font-size: ${TYPOGRAPHY.fontSizeH4}; | ||
| line-height: ${TYPOGRAPHY.lineHeight16}; | ||
| font-weight: ${TYPOGRAPHY.fontWeightRegular}; | ||
| resize: none; | ||
| ` |
Oops, something went wrong.