Check js error resolved

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

@@ -31,6 +31,7 @@
 import styles from '../FlexFileDetails/FlexFileDetails.css'
 import { InstrumentGroup } from '../FlexInstrument/InstrumentGroup'
 import { FlexProtocolEditorComponent } from '../FlexProtocolEditor'
+import { actions as navActions } from '../../../navigation'
 import { UpdateConfirmation } from '../FlexUpdateConfirmation'
 export interface Props {
  formValues: FileMetadataFields
@@ -48,15 +49,15 @@
 }
 
 // TODO(mc, 2020-02-28): explore l10n for these dates
 const DATE_ONLY_FORMAT = 'MMM dd, yyyy'
 const DATETIME_FORMAT = 'MMM dd, yyyy | h:mm a'
 
 export function FlexFileDetailsComponent(props: any): JSX.Element {
  const [isEdit, setEdit] = useState(false)
  const [selectedTabId, setTabId] = useState<number>(0)
 
  if (isEdit) {
  return (
  <FlexProtocolEditorComponent
  FlexFileDetails={{
  isEditValue: isEdit,
@@ -66,7 +67,7 @@
  />
  )
  } else {
  return (
  <div>
  {!Boolean(props.formValues) ? (
  <NoFileSelection />
@@ -82,7 +83,7 @@
  handleSubmit,
  values,
  }: FormikProps<FileMetadataFields>) => (
  <form onSubmit={handleSubmit}>
  <div className={styles.container}>
  <FileProtocolInformation />
  <div className={styles.line_separator} />
@@ -112,8 +113,8 @@
  {Object.keys(props.instruments).length !== 1 && (
  <SecondaryButton
  onClick={e => {
  e.preventDefault()
  props.swapPipettes()
  }}
  >
  {i18n.t('flex.file_tab.swap_pipette')}
@@ -164,24 +165,24 @@
  }
 }
 
 const FileProtocolInformation = (): JSX.Element => {
  const dispatch = useDispatch()
  const [showConfirmation, setShowConfirmation] = useState(false)
 
  const handleCancelClick = (): any => {
  setShowConfirmation(false)
  }
  const handleConfirmClick = (): any => {
  // handle the update action here
  dispatch(navActions.navigateToPage('landing-page'))
  setShowConfirmation(false)
  }
 
- function protocolCancelClick(e): any {
+ function protocolCancelClick(e: { preventDefault: () => void }): any {
  e.preventDefault()
  setShowConfirmation(true)
  }
  return (
  <>
  {Boolean(showConfirmation) && (
  <>
@@ -212,16 +213,16 @@
  )
 }
 
 export const FlexHeadingButtonGroup = (props: {
  protocolCancelClickProps: any
 }) => {
  const { protocolCancelClickProps } = props
  return (
  <div className={styles.right_buttons}>
  <SecondaryButton>{i18n.t('flex.file_tab.export')}</SecondaryButton>
  <SecondaryButton
  className={styles.close_protocol_button}
  onClick={e => protocolCancelClickProps(e)}
  >
  {i18n.t('flex.file_tab.close_export')}
  </SecondaryButton>
@@ -229,8 +230,8 @@
  )
 }
 
 const NoFileSelection = (): JSX.Element => {
  return (
  <div className={flexStyles.wrapper}>
  <div className={styles.container}>
  <StyledText as="h2">{i18n.t('flex.file_tab.heading')}</StyledText>
@@ -249,11 +250,11 @@
 }
 
 // File related information name and description etc.
 const FileProtocolNameAndDescription = (props: {
  nameDescriptionData: any
 }): JSX.Element => {
  const { nameDescriptionData } = props
  return (
  <div>
  <Flex className={cx(styles.heading_container, styles.margin_bottom)}>
  <StyledText as="h3" className={styles.margin_bottom}>
@@ -306,19 +307,19 @@
  )
 }
 
 const EditButton = ({
  editProps,
  setTab,
  setTabId,
  addItems,
 }: any): JSX.Element => {
  return (
  <SecondaryButton
  style={{ height: 'max-content' }}
  onClick={e => {
  e.preventDefault()
  editProps(true)
  setTabId(setTab)
  }}
  >
  {addItems
@@ -328,14 +329,14 @@
  )
 }
 
 const SelectedModules = (props: { propsData: any }): JSX.Element => {
  const { propsData } = props
  const existingModules = getModuleData(propsData.modules)
  return (
  <>
  {existingModules?.length > 0 ? (
  existingModules.map((moduleType: any, i: number) => (
  <div
  className={` ${styles.card_width} ${styles.margin_bottom}`}
  key={i}
  >
@@ -374,15 +375,15 @@
 }
 
 export function getModuleData(modules: any): any {
  const moduleData = []
  for (const obj in modules) {
  if (modules[obj] != null) moduleData.push(modules[obj])
  }
  return moduleData
 }
 
 const mapStateToProps = (state: BaseState): SP => {
  return {
  formValues: fileSelectors.getFileMetadata(state),
  instruments: stepFormSelectors.getPipettesForInstrumentGroup(state),
  modules: stepFormSelectors.getModulesForEditModulesCard(state),
@@ -396,16 +397,16 @@
  dispatch: ThunkDispatch<any>
  }
 ): Props {
  const { _initialDeckSetup, ...passThruProps } = stateProps
  const { dispatch } = dispatchProps
  const swapPipetteUpdate = mapValues(_initialDeckSetup.pipettes, pipette => {
  if (!pipette.mount) return pipette.mount
  return pipette.mount === 'left' ? 'right' : 'left'
  })
  return {
  ...passThruProps,
  swapPipettes: () =>
  dispatch(
  steplistActions.changeSavedStepForm({
  stepId: INITIAL_DECK_SETUP_STEP_ID,
  update: {
@@ -416,7 +417,7 @@
  }
 }
 
 export const FlexFileDetails = connect(
  mapStateToProps,
  // @ts-expect-error(sa, 2021-6-21): TODO: refactor to use hooks api
  null,

protocol-designer/src/components/FlexProtocolEditor/FlexModules/FlexModuleData.ts

@@ -7,7 +7,7 @@
 } from '@opentrons/shared-data'
 import { DropdownOption } from '@opentrons/components'
 import { SPAN7_8_10_11_SLOT } from '../../../constants'
 export const SUPPORTED_MODULE_TYPES: ModuleType[] = [
  HEATERSHAKER_MODULE_TYPE,
  MAGNETIC_MODULE_TYPE,
  TEMPERATURE_MODULE_TYPE,
@@ -16,7 +16,7 @@
 
 type SupportedSlotMap = Record<ModuleType, DropdownOption[]>
 
 export const SUPPORTED_MODULE_SLOTS: SupportedSlotMap = {
  [MAGNETIC_MODULE_TYPE]: [
  {
  name: 'Slot C1 (default)',
@@ -41,9 +41,10 @@
  value: '1',
  },
  ],
+ magneticBlockType: [],
 }
 
 const ALL_MODULE_SLOTS: DropdownOption[] = [
  {
  name: 'Slot A1',
  value: '10',
@@ -90,7 +91,7 @@
  },
 ]
 
 const HEATER_SHAKER_SLOTS: DropdownOption[] = [
  {
  name: 'Slot A1',
  value: '10',
@@ -117,7 +118,7 @@
  },
 ]
 
 const TEMPERATURE_MODULE_SLOTS: DropdownOption[] = [
  {
  name: 'Slot A1',
  value: '10',
@@ -151,28 +152,28 @@
 export function getAllFlexModuleSlotsByType(
  moduleType: ModuleType
 ): DropdownOption[] {
  const supportedSlotOption = SUPPORTED_MODULE_SLOTS[moduleType]
 
  if (moduleType === THERMOCYCLER_MODULE_TYPE) {
  return supportedSlotOption
  }
 
  if (moduleType === HEATERSHAKER_MODULE_TYPE) {
  return supportedSlotOption.concat(
  HEATER_SHAKER_SLOTS.filter(s => s.value !== supportedSlotOption[0].value)
  )
  }
 
  if (moduleType === TEMPERATURE_MODULE_TYPE) {
  return supportedSlotOption.concat(
  TEMPERATURE_MODULE_SLOTS.filter(
  s => s.value !== supportedSlotOption[0].value
  )
  )
  }
 
  const allOtherSlots = ALL_MODULE_SLOTS.filter(
  s => s.value !== supportedSlotOption[0].value
  )
  return supportedSlotOption.concat(allOtherSlots)
 }

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

@@ -37,9 +37,12 @@
 import { connect, useDispatch } from 'react-redux'
 import { actions as navActions } from '../../navigation'
 import { reduce } from 'lodash'
 import { PipetteOnDeck } from '../../step-forms'
 import assert from 'assert'
-import { ModuleCreationArgs } from '../modals/FilePipettesModal'
+import {
+ ModuleCreationArgs,
+ PipetteFieldsData,
+} from '../modals/FilePipettesModal'
 import { LabwareDefByDefURI } from '../../labware-defs'
 import { NewProtocolFields } from '../../load-file'
 import {
@@ -88,7 +91,7 @@
  }) => void
 }
 
 const validationSchema = Yup.object().shape({
  mountSide: Yup.string().required('Mount side is required'),
  pipettesByMount: Yup.object().shape({
  left: Yup.object().shape({
@@ -108,7 +111,7 @@
  }),
 })
 
 const initialFormValues: InitialValues = {
  fields: {
  name: '',
  author: '',
@@ -158,53 +161,53 @@
  },
 }
 
 const getInitialValues = (formProps: any): InitialValues => {
  if (formProps) {
  if (formProps.formValues) {
  const { protocolName, author, description } = formProps.formValues
  initialFormValues.fields.name = protocolName || ''
  initialFormValues.fields.author = author || ''
  initialFormValues.fields.description = description || ''
  }
 
  if (Boolean(formProps.instruments)) {
  const { left, right } = formProps.instruments
  if (Boolean(left)) {
  initialFormValues.pipettesByMount.left.pipetteName =
  left.pipetteSpecs?.name || ''
  initialFormValues.pipettesByMount.left.tiprackDefURI =
  left?.tiprackModel || []
  }
  if (Boolean(right)) {
  initialFormValues.pipettesByMount.right.pipetteName =
  right.pipetteSpecs?.name || ''
  initialFormValues.pipettesByMount.right.tiprackDefURI =
  right?.tiprackModel || []
  }
  }
 
  if (Boolean(formProps.modules)) {
  if (formProps.modules.magneticModuleType !== null) {
  initialFormValues.modulesByType[MAGNETIC_MODULE_TYPE] =
  formProps.modules.magneticModuleType
  }
  if (formProps.modules.temperatureModuleType !== null) {
  initialFormValues.modulesByType[TEMPERATURE_MODULE_TYPE] =
  formProps.modules.temperatureModuleType
  }
  if (formProps.modules.thermocyclerModuleType !== null) {
  initialFormValues.modulesByType[THERMOCYCLER_MODULE_TYPE] =
  formProps.modules.thermocyclerModuleType
  }
  if (formProps.modules.heaterShakerModuleType !== null) {
  initialFormValues.modulesByType[HEATERSHAKER_MODULE_TYPE] =
  formProps.modules.heaterShakerModuleType
  }
  }
 
  return initialFormValues
  } else {
  return initialFormValues
  }
 }
 
@@ -212,14 +215,14 @@
  selectedTab: number
 }
 
 const SelectComponent = (selectedTab: number): JSX.Element | null => {
  const [is96ChannelSelected, setIs96ChangeSelected] = useState(false)
  const { left, right } = pipetteSlot
  switch (selectedTab) {
  case 0:
  return <FlexProtocolName />
  case 1:
  return (
  <Flex
  flexDirection={DIRECTION_ROW}
  justifyContent={JUSTIFY_SPACE_BETWEEN}
@@ -237,16 +240,16 @@
  </Flex>
  )
  case 2:
  return <FlexModules />
  default:
  return null
  }
 }
 
-type PipetteFieldsData = Omit<
- PipetteOnDeck,
- 'id' | 'spec' | 'tiprackLabwareDef'
->
+// type PipetteFieldsData = Omit<
+//  PipetteOnDeck,
+//  'id' | 'spec' | 'tiprackLabwareDef'
+// >
 
 function FlexProtocolEditor({
  isEditValue,
@@ -254,40 +257,40 @@
  formProps,
  onSave,
 }: FlexProtocolEditorComponentProps): JSX.Element {
  const [selectedTab, setTab] = useState<number>(0)
  const [redirectToDetails, setRedirectToDetails] = useState(false)
  const dispatch = useDispatch()
  const [isEdit, setEdit] = useState(false)
  //On Redirction if page tab edit set to true
  useEffect(() => {
  if (isEditValue) {
  setEdit(isEditValue)
  setTab(tabIdValue)
  }
  }, [isEditValue, tabIdValue])
 
  // Next button click
  const handleNext = ({ selectedTab }: selectedTabProps): any => {
  if (isEdit) {
  //Redirect back to file details page
  setRedirectToDetails(true)
  return <FlexFileDetails />
  } else {
  const setTabNumber =
  selectedTab >= 0 && selectedTab <= navPillTabListLength
  ? selectedTab + 1
  : selectedTab
  setTab(setTabNumber)
  }
  }
 
  // Previous button click
  const handlePrevious = ({ selectedTab }: selectedTabProps): void => {
  const setTabNumber =
  selectedTab > 0 && selectedTab <= navPillTabListLength
  ? selectedTab - 1
  : selectedTab
  setTab(setTabNumber)
  }
 
  const nextButton =
@@ -304,27 +307,27 @@
  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.tiprackDefURI.length) {
  errors.tiprack = `${i18n.t('flex.errors.tiprack_not_selected')}`
  }
 
  return errors
  }
 
  const handleSubmit = ({ values }: any): void => {
  console.log('***Final OT3 JSON Data ***', values)
  const newProtocolFields = values.fields
 
  const pipettes = reduce<FormPipettesByMount, PipetteFieldsData[]>(
  values.pipettesByMount,
- (acc, formPipette: FormPipette, mount): PipetteFieldsData[] => {
+ (acc, formPipette: FormPipette, mount: string): PipetteFieldsData[] => {
  assert(mount === 'left' || mount === 'right', `invalid mount: ${mount}`) // this is mostly for flow
  // @ts-expect-error(sa, 2021-6-21): TODO validate that pipette names coming from the modal are actually valid pipette names on PipetteName type
  return formPipette &&
@@ -347,11 +350,11 @@
  // NOTE: this is extra-explicit for flow. Reduce fns won't cooperate
  // with enum-typed key like `{[ModuleType]: ___}`
  // @ts-expect-error(sa, 2021-6-21): TS not smart enough to take real type from Object.keys
  const moduleTypes: ModuleType[] = Object.keys(values.modulesByType)
  const modules: ModuleCreationArgs[] = moduleTypes.reduce<
  ModuleCreationArgs[]
  >((acc, moduleType) => {
  const formModule = values.modulesByType[moduleType]
  return formModule?.onDeck
  ? [
  ...acc,
@@ -364,8 +367,8 @@
  : acc
  }, [])
 
  onSave({ modules, newProtocolFields, pipettes })
  dispatch(navActions.navigateToPage('liquids'))
  }
 
  return redirectToDetails ? (
@@ -402,7 +405,7 @@
  isValid: any
  handleSubmit: () => void
  }) => (
  <form onSubmit={props.handleSubmit}>
  <section className={styles.editor_form}>
  {SelectComponent(selectedTab)}
  </section>
@@ -410,7 +413,7 @@
  {selectedTab !== 0 && !isEdit && (
  <NewPrimaryBtn
  tabIndex={5}
  onClick={() => handlePrevious({ selectedTab })}
  className={styles.flex_round_tabs_button_50p}
  >
  <StyledText as="h3">
@@ -421,7 +424,7 @@
  <NewPrimaryBtn
  tabIndex={4}
  type="submit"
  onClick={() => handleNext({ selectedTab })}
  className={
  selectedTab !== 0
  ? styles.flex_round_tabs_button_50p
@@ -446,13 +449,18 @@
  pipettes: PipetteFieldsData[]
  modules: ModuleCreationArgs[]
 }
+
+interface SP {
+ _customLabware: LabwareDefByDefURI
+ _hasUnsavedChanges?: boolean | null
+}
 interface DP {
  onCancel: () => unknown
  _createNewProtocol: (arg0: CreateNewProtocolArgs) => void
 }
 function mergeProps(stateProps: SP, dispatchProps: DP, ownProps: any): Props {
  const { isEditValue, tabIdValue, formProps } = ownProps.FlexFileDetails
  return {
  isEditValue,
  tabIdValue,
  formProps,
@@ -461,7 +469,7 @@
  !stateProps._hasUnsavedChanges ||
  window.confirm(i18n.t('alert.window.confirm_create_new'))
  ) {
  dispatchProps._createNewProtocol({
  ...fields,
  customLabware: stateProps._customLabware,
  })
@@ -470,7 +478,7 @@
  }
 }
 
 export const FlexProtocolEditorComponent = connect(
  newModalFileMapStateToProps,
  mapDispatchToProps,
  mergeProps

protocol-designer/src/components/LandingPage.tsx

@@ -4,7 +4,7 @@
 import styles from './FlexProtocolEditor/FlexComponents.css'
 import { StyledText } from './FlexProtocolEditor/StyledText'
 import { actions as loadFileActions } from '../load-file'
-import { connect, useDispatch } from 'react-redux'
+import { MapDispatchToPropsParam, connect, useDispatch } from 'react-redux'
 import { ThunkDispatch } from '../types'
 import { actions as navActions } from '../navigation'
 import { setRobotName } from '../load-file/actions'
@@ -24,10 +24,10 @@
  goToOT3FilePage: () => void
  goToOT2FilePage: () => void
 }): JSX.Element {
  const { goToOT3FilePage, goToOT2FilePage } = props
  const dispatch = useDispatch()
 
  return (
  <div className={styles.pd_landing_page}>
  <StyledText as="h1">{i18n.t('flex.landing_page.welcome')}</StyledText>
  <img
@@ -37,7 +37,7 @@
  <div className={styles.flex_landing_buttons_wrapper}>
  <OutlineButton
  className={styles.flex_landing_button}
  onClick={() => goToOT3FilePage()}
  >
  <StyledText as="h4">
  {i18n.t('flex.landing_page.create_flex_protocol')}
@@ -45,7 +45,7 @@
  </OutlineButton>
  <OutlineButton
  className={styles.flex_landing_button}
  onClick={() => goToOT2FilePage()}
  >
  <StyledText as="h4">
  {i18n.t('flex.landing_page.create_ot2_protocol')}
@@ -58,7 +58,7 @@
  <input
  type="file"
  onChange={fileChangeEvent => {
  dispatch(loadFileActions.loadProtocolFile(fileChangeEvent))
  }}
  />
  </OutlineButton>
@@ -67,29 +67,40 @@
  )
 }
 
+const mapDispatchToProps: MapDispatchToPropsParam<
+ { dispatch: ThunkDispatch<any> },
+ {}
+> = dispatch => ({
+ dispatch,
+})
+
 function mergeProps(
  stateProps: any,
  dispatchProps: {
  dispatch: ThunkDispatch<any>
  }
 ): Props {
  const { _initialDeckSetup, ...passThruProps } = stateProps
  const { dispatch } = dispatchProps
  return {
  ...passThruProps,
  goToOT3FilePage: () => {
  dispatch(
  setRobotName({ model: OT3_STANDARD_MODEL, deckId: OT3_STANDARD_DECKID })
  )
  dispatch(navActions.navigateToPage('new-flex-file-form'))
  },
  goToOT2FilePage: () => {
  dispatch(
  setRobotName({ model: OT2_STANDARD_MODEL, deckId: OT2_STANDARD_DECKID })
  )
  dispatch(navActions.navigateToPage('file-splash'))
  },
  }
 }
 
-export const LandingPageComponent = connect(null, null, mergeProps)(LandingPage)
+export const LandingPageComponent = connect(
+ null,
+ mapDispatchToProps,
+ mergeProps
+)(LandingPage)

protocol-designer/src/constants.ts

@@ -171,6 +171,12 @@ export const MODELS_FOR_FLEX_MODULE_TYPE: Record<
  value: HEATERSHAKER_MODULE_V1,
  },
  ],
+ [MAGNETIC_BLOCK_TYPE]: [
+ {
+ name: i18n.t(`modules.model_display_name.${MAGNETIC_BLOCK_V1}`),
+ value: MAGNETIC_BLOCK_V1,
+ },
+ ],
 }
 
 export const DEFAULT_MODEL_FOR_MODULE_TYPE: Record<ModuleType, ModuleModel> = {