Protocol designer OT-3 development

protocol-designer/src/components/FlexProtocolEditor/FlexComponents.css

@@ -30,7 +30,6 @@
 
 .flex_header {
  position: relative;
- width: 919px;
  margin: 1.5rem auto auto;
 }
 
@@ -179,3 +178,15 @@
  margin: 32px 0 45px;
  width: 100%;
 }
+
+.error_text {
+ color: var(--c-red);
+}
+
+.ptb_10 {
+ padding: 5px 0;
+}
+
+.pb_10 {
+ padding-bottom: 10px;
+}

protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/FlexProtocolName.tsx

@@ -6,7 +6,11 @@ import styles from '../FlexComponents.css'
 import { useFormikContext } from 'formik'
 
 interface flexProtocolName {
- fields: any
+ fields: {
+ name: string
+ author: string
+ description: string
+ }
  handleChange: () => void
  handleBlur: () => void
 }
@@ -16,6 +20,8 @@ function FlexProtocolNameComponent(): JSX.Element {
  values,
  handleChange,
  handleBlur,
+ errors,
+ touched,
  } = useFormikContext<flexProtocolName>()
 
  return (
@@ -42,8 +48,10 @@ function FlexProtocolNameComponent(): JSX.Element {
  value={values.fields.name}
  name="fields.name"
  />
- <StyledText as="label">
- {i18n.t('flex.name_and_description.supporting_error_text')}
+ <StyledText as="label" className={styles.error_text}>
+ {errors?.fields?.name && touched?.fields?.name
+ ? errors.fields.name
+ : null}
  </StyledText>
  </FormGroup>
 
@@ -65,9 +73,6 @@ function FlexProtocolNameComponent(): JSX.Element {
  value={values.fields.author}
  name="fields.author"
  />
- <StyledText as="label">
- {i18n.t('flex.name_and_description.supporting_error_text')}
- </StyledText>
  </FormGroup>
 
  <FormGroup className={styles.form_group}>
@@ -83,9 +88,6 @@ function FlexProtocolNameComponent(): JSX.Element {
  value={values.fields.description}
  name="fields.description"
  />
- <StyledText as="label">
- {i18n.t('flex.name_and_description.supporting_error_text')}
- </StyledText>
  </FormGroup>
  </>
  )

protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/RadioSelect.tsx

@@ -8,7 +8,7 @@ import {
 } from '@opentrons/shared-data'
 import type { PipetteNameSpecs } from '@opentrons/shared-data'
 import { RadioGroup } from '@opentrons/components'
-import { pipetteNameBlocklist } from '../constant'
+import { pipetteNameBlocklist, pipetteSlot } from '../constant'
 import { useFormikContext } from 'formik'
 import type { ActionMeta } from 'react-select'
 
@@ -57,7 +57,7 @@ export interface SelectOption {
 }
 
 export const RadioSelect = ({ pipetteName, pipetteType }: any): JSX.Element => {
- const { handleChange } = useFormikContext<any>()
+ const { handleChange, handleBlur } = useFormikContext<any>()
  const allowlist = ({ value }: SelectOption): boolean => {
  return !pipetteNameBlocklist.some(n => n === value)
  }
@@ -68,12 +68,22 @@ export const RadioSelect = ({ pipetteName, pipetteType }: any): JSX.Element => {
  ...(gen1Options.length > 0 ? gen1Options : []),
  ]
 
+ const emptyMount = [
+ { value: 'LEAVE_SECOND_EMPTY', name: 'Leave Second Empty' },
+ ]
+
+ const newGroupedOptions =
+ pipetteName.split('.')[1] === pipetteSlot.right
+ ? [...groupedOptions, ...emptyMount]
+ : groupedOptions
+
  return (
  <RadioGroup
  name={pipetteName}
  value={pipetteType}
- options={groupedOptions}
+ options={newGroupedOptions}
  onChange={handleChange}
+ onBlur={handleBlur}
  />
  )
 }

protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/SelectPipette.tsx

@@ -13,15 +13,18 @@ interface SelectPipetteOptionProps {
  pipetteName: string
 }
 
+interface formikContextProps {
+ pipettesByMount: any
+ pipette: any
+}
+
 export const SelectPipetteOption: React.FC<SelectPipetteOptionProps> = ({
  pipetteName,
 }) => {
- const {
- values: { pipettesByMount },
- } = useFormikContext<any>()
+ const { values, errors } = useFormikContext<formikContextProps>()
 
  const is96ChannelSelected = checkSelectedPipette(
- pipettesByMount[pipetteName].pipetteName
+ values.pipettesByMount[pipetteName].pipetteName
  )
  const className = cx({ disable_mount_option: is96ChannelSelected })
 
@@ -31,25 +34,37 @@ export const SelectPipetteOption: React.FC<SelectPipetteOptionProps> = ({
  : i18n.t('flex.pipette_selection.choose_second_pipette')
  return (
  <>
- <StyledText as={'h1'}>{pipetteHeaderText}</StyledText>
+ <Flex className={styles.pb_10}>
+ <StyledText as={'h1'}>{pipetteHeaderText}</StyledText>
+ </Flex>
  {
  <>
- <StyledText as={'p'}>
+ <StyledText as={'p'} className={styles.pb_10}>
  {i18n.t('flex.pipette_selection.pipette_96_selection_note')}
  </StyledText>
  {/* Pipette Selection here */}
- <RadioSelect
- pipetteName={`pipettesByMount.${pipetteName}.pipetteName`}
- pipetteType={pipettesByMount[pipetteName].pipetteName}
- />
- <hr />
+ <Flex className={styles.pb_10}>
+ <RadioSelect
+ pipetteName={`pipettesByMount.${pipetteName}.pipetteName`}
+ pipetteType={values.pipettesByMount[pipetteName].pipetteName}
+ />
+ </Flex>
+ {pipetteName === pipetteSlot.left && (
+ <StyledText as="label" className={styles.error_text}>
+ {errors.pipette && errors.pipette}
+ </StyledText>
+ )}
+
  {/* Pipette Mount Selection here */}
- <Flex className={styles[className]}>
+ <hr />
+ <Flex className={cx(styles[className], styles.ptb_10)}>
  <SelectPipetteMount pipetteName={pipetteName} />
  </Flex>
- {channel96SelectionNote(is96ChannelSelected)}
  <hr />
- <TipRackOptions pipetteName={pipetteName} />
+ {channel96SelectionNote(is96ChannelSelected)}
+ <Flex className={styles.pb_10}>
+ <TipRackOptions pipetteName={pipetteName} />
+ </Flex>
  </>
  }
  </>
@@ -65,7 +80,7 @@ const channel96SelectionNote = (
 ): JSX.Element | boolean => {
  return (
  is96ChannelSelected && (
- <StyledText as={'p'}>
+ <StyledText as={'p'} className={styles.ptb_10}>
  {i18n.t('flex.pipette_selection.pippette_ocuupies_both_mount')}
  </StyledText>
  )
@@ -76,6 +91,7 @@ const SelectPipetteMount = (props: { pipetteName: string }): JSX.Element => {
  const {
  values: { pipettesByMount, mountSide },
  handleChange,
+ handleBlur,
  } = useFormikContext<any>()
 
  return (
@@ -87,6 +103,7 @@ const SelectPipetteMount = (props: { pipetteName: string }): JSX.Element => {
  value={pipettesByMount[props.pipetteName].mount}
  options={mountSide}
  onChange={handleChange}
+ onBlur={handleBlur}
  />
  }
  </>

protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/TipRackList.tsx

@@ -6,6 +6,7 @@ import {
  blockedTipRackListForFlex,
  customTiprackOption,
  fontSize14,
+ pipetteSlot,
 } from '../constant'
 import {
  CheckboxField,
@@ -22,16 +23,22 @@ import styles from '../FlexComponents.css'
 import { reduce } from 'lodash'
 import { getLabwareDefURI, getLabwareDisplayName } from '@opentrons/shared-data'
 
+interface formikContextProps {
+ pipettesByMount: any
+ tiprack: any
+}
+
 export const TipRackOptions = ({ pipetteName }: any): JSX.Element => {
  const dispatch = useDispatch()
  const allLabware = useSelector(getLabwareDefsByURI)
  const tiprackOptions = getFlexTiprackOptions(allLabware)
  const [selected, setSelected] = useState<string[]>([])
  const [customTipRack, setCustomTipRack] = useState(false)
  const {
- values: { pipettesByMount },
+ values,
+ errors,
  setFieldValue,
- } = useFormikContext<any>()
+ } = useFormikContext<formikContextProps>()
 
  const customTiprackFilteredData = [...tiprackOptions].filter(
  (i: any) =>
@@ -45,7 +52,7 @@ export const TipRackOptions = ({ pipetteName }: any): JSX.Element => {
  const handleNameChange = (selected: string[]): any => {
  setFieldValue(`pipettesByMount.${pipetteName}.tipRackList`, selected)
  }
- const latestTipRackList = pipettesByMount[pipetteName].tipRackList
+ const latestTipRackList = values.pipettesByMount[pipetteName].tipRackList
  useEffect(() => {
  setSelected(latestTipRackList)
  }, [latestTipRackList])
@@ -85,8 +92,15 @@ export const TipRackOptions = ({ pipetteName }: any): JSX.Element => {
  {customTiprackFilteredData.length > 0 && (
  <ShowCustomTiprackList customTipRackProps={customTiprackFilteredData} />
  )}
- {customTipRack &&
- customFileUpload(customTipRack, customTiprackFilteredData, dispatch)}
+ <Flex>
+ {customTipRack &&
+ customFileUpload(customTipRack, customTiprackFilteredData, dispatch)}
+ </Flex>
+ {pipetteName === pipetteSlot.left && (
+ <StyledText as="label" className={styles.error_text}>
+ {errors.tiprack ? errors.tiprack : ''}
+ </StyledText>
+ )}
  </>
  )
 }

protocol-designer/src/components/FlexProtocolEditor/FlexProtocolEditor.tsx

@@ -21,6 +21,7 @@ import {
  TEMPERATURE_MODULE_V2,
 } from '@opentrons/shared-data'
 import { Formik } from 'formik'
+import * as Yup from 'yup'
 import { i18n } from '../../localization'
 import { StyledText } from './StyledText'
 import styles from './FlexComponents.css'
@@ -155,6 +156,32 @@ function FlexProtocolEditor(): JSX.Element {
  ? i18n.t('flex.round_tabs.go_to_liquids_page')
  : i18n.t('flex.round_tabs.next')
 
+ const InitialFormSchema = Yup.object().shape({
+ fields: Yup.object().shape({
+ name: Yup.string().matches(/^[a-zA-Z0-9]*$/),
+ }),
+ })
+
+ interface FormikErrors {
+ pipette?: string
+ tiprack?: string
+ }
+
+ const validateFields = (values: InitialValues): FormikErrors => {
+ const { pipettesByMount } = values
+ const errors: FormikErrors = {}
+
+ if (!pipettesByMount.left.pipetteName) {
+ errors.pipette = `${i18n.t('flex.errors.first_pipette_not_selected')}`
+ }
+
+ if (!pipettesByMount.left.tipRackList.length) {
+ errors.tiprack = `${i18n.t('flex.errors.tiprack_not_selected')}`
+ }
+
+ return errors
+ }
+
  return (
  <Flex flexDirection={DIRECTION_COLUMN}>
  <Flex>
@@ -171,12 +198,14 @@ function FlexProtocolEditor(): JSX.Element {
  <Formik
  enableReinitialize
  initialValues={getInitialValues}
- validateOnChange={false}
+ validateOnChange={true}
+ validate={validateFields}
+ validationSchema={InitialFormSchema}
  onSubmit={(values, actions) => {
  console.log({ values })
  }}
  >
- {(props: { handleSubmit: () => void }) => (
+ {(props: { errors: any; handleSubmit: () => void }) => (
  <form onSubmit={props.handleSubmit}>
  <section className={styles.editor_form}>
  {selectComponent(selectedTab)}

protocol-designer/src/components/LandingPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon, OutlineButton } from '@opentrons/components'
+import { OutlineButton } from '@opentrons/components'
 import { i18n } from '../localization'
 import { CreateFlexFileForm } from './FlexProtocolEditor'
 import styles from './FlexProtocolEditor/FlexComponents.css'
@@ -18,7 +18,10 @@ function LandingPageComponent(props: PageProps): JSX.Element {
  return (
  <div className={styles.pd_landing_page}>
  <StyledText as="h1">{i18n.t('flex.landing_page.welcome')}</StyledText>
- <Icon name={'ot-logo'} className={styles.ot_flex_logo} />
+ <img
+ className={styles.ot_flex_logo}
+ src={require('../images/ot_logo.png')}
+ />
  <div className={styles.flex_landing_buttons_wrapper}>
  <OutlineButton
  className={styles.flex_landing_button}
@@ -59,7 +62,11 @@ export const selectRobotPage = (
 ): JSX.Element | null => {
  switch (page) {
  case selectPageForms.newFlexFileForm:
- return <CreateFlexFileForm setPageProps={setPage} />
+ return (
+ <ProtocolEditor>
+ <CreateFlexFileForm setPageProps={setPage} />
+ </ProtocolEditor>
+ )
  case selectPageForms.protocolEditor:
  return <ProtocolEditor />
  case selectPageForms.defaultLandingPage: