import * as React from 'react' ; import { useSelector } from 'react-redux' ; import last from 'lodash/last' ; import { SUCCESS , FAILURE , PENDING , useDispatchApiRequest , getRequestById , } from '../../redux/robot-api' ; import { getAttachedPipettes , getAttachedPipetteSettings , updatePipetteSettings , } from '../../redux/pipettes' ; import { useFeatureFlag } from '../../redux/config' ; import { ScrollableAlertModal } from '../../molecules/modals' ; import { ConfigMessage } from './ConfigMessage' ; import { ConfigForm } from './ConfigForm' ; import { ConfigErrorBanner } from './ConfigErrorBanner' ; import type { State } from '../../redux/types' ; import type { Mount , PipetteSettingsFieldsUpdate , } from '../../redux/pipettes/types' ; const PIPETTE_SETTINGS = 'Pipette Settings' ; const AN_ERROR_OCCURRED_WHILE_UPDATING = "An error occurred while updating your pipette's settings. Please try again." ; interface Props { robotName : string ; mount : Mount ; closeModal : ( ) => unknown ; } export function ConfigurePipette ( props ) { const { robotName , mount , closeModal } = props ; const [ dispatchRequest , requestIds ] = useDispatchApiRequest ( ) ; const pipette = useSelector ( ( state ) => getAttachedPipettes ( state , robotName ) [ mount ] ) ; const settings = useSelector ( ( state ) => getAttachedPipetteSettings ( state , robotName ) [ mount ] ) ; const updateSettings = ( fields ) : void => { if ( pipette ) { dispatchRequest ( updatePipetteSettings ( robotName , pipette . id , fields ) ) ; } } ; const updateRequest = useSelector ( ( state ) => getRequestById ( state , last ( requestIds ) ) ) ; const updateError = updateRequest && updateRequest . status === FAILURE ? updateRequest . error . message || AN_ERROR_OCCURRED_WHILE_UPDATING : null ; const __showHiddenFields = useFeatureFlag ( 'allPipetteConfig' ) ; React . useEffect ( ( ) => { if ( updateRequest ?. status === SUCCESS ) { closeModal ( ) ; } } , [ updateRequest , closeModal ] ) ; return ( < ScrollableAlertModal heading = { `${ PIPETTE_SETTINGS }: ${ pipette ?. modelSpecs . displayName || '' }` } alertOverlay > { updateError && < ConfigErrorBanner message = { updateError } />} < ConfigMessage / > { settings && ( < ConfigForm settings = { settings } updateInProgress = { updateRequest ?. status === PENDING } updateSettings = { updateSettings } closeModal = { closeModal } __showHiddenFields = { __showHiddenFields } / > ) } < /ScrollableAlertModal>); }