feat(protocol-designer): implement "clear wells" button

protocol-designer/src/components/LiquidPlacementForm/LiquidPlacementForm.js

@@ -29,7 +29,7 @@ type Props = {
   showForm: boolean,
 
   cancelForm: () => mixed,
-  clearWells: () => mixed,
+  clearWells: ?() => mixed,
   saveForm: (ValidFormValues) => mixed,
 }
 
@@ -66,7 +66,7 @@ export default class LiquidPlacementForm extends React.Component <Props> {
   }
 
   handleClearWells = () => {
-    this.props.clearWells()
+    this.props.clearWells && this.props.clearWells()
   }
 
   handleChangeVolume = (setFieldValue: *) => (e: SyntheticInputEvent<*>) => {
@@ -123,7 +123,9 @@ export default class LiquidPlacementForm extends React.Component <Props> {
             </div>
 
             <div className={styles.button_row}>
-              <OutlineButton onClick={this.handleClearWells}>
+              <OutlineButton
+                disabled={!this.props.clearWells}
+                onClick={this.handleClearWells}>
                 {i18n.t('button.clear_wells')}
               </OutlineButton>
               <OutlineButton onClick={this.handleCancelForm}>

protocol-designer/src/components/LiquidPlacementForm/index.js

@@ -3,6 +3,7 @@ import * as React from 'react'
 import {connect} from 'react-redux'
 import assert from 'assert'
 import {
+  removeWellsContents,
   setWellContents,
 } from '../../labware-ingred/actions'
 import {selectors as labwareIngredSelectors} from '../../labware-ingred/reducers'
@@ -25,30 +26,53 @@ type DP = {
 type SP = $Diff<Props, DP> & {
   _labwareId: ?string,
   _selectedWells: ?Array<string>,
+  _selectionHasLiquids: boolean,
 }
 
 function mapStateToProps (state: BaseState): SP {
   const selectedWells = Object.keys(wellSelectionSelectors.getSelectedWells(state))
 
+  const _labwareId = labwareIngredSelectors.getSelectedContainerId(state)
+  const liquidLocations = labwareIngredSelectors.getIngredientLocations(state)
+  const _selectionHasLiquids = Boolean(
+    _labwareId &&
+    liquidLocations[_labwareId] &&
+    selectedWells.some(well => liquidLocations[_labwareId][well])
+  )
+
   return {
     commonSelectedLiquidId: wellContentsSelectors.getSelectedWellsCommonIngredId(state),
     commonSelectedVolume: wellContentsSelectors.getSelectedWellsCommonVolume(state),
     liquidSelectionOptions: labwareIngredSelectors.getLiquidSelectionOptions(state),
     showForm: selectedWells.length > 0,
     selectedWellsMaxVolume: wellContentsSelectors.selectedWellsMaxVolume(state),
 
-    _labwareId: labwareIngredSelectors.getSelectedContainerId(state),
+    _labwareId,
     _selectedWells: selectedWells,
+    _selectionHasLiquids,
   }
 }
 
 function mergeProps (stateProps: SP, dispatchProps: {dispatch: Dispatch<*>}): Props {
-  const {_labwareId, _selectedWells, ...passThruProps} = stateProps
+  const {_labwareId, _selectedWells, _selectionHasLiquids, ...passThruProps} = stateProps
   const {dispatch} = dispatchProps
+
+  const clearWells = (_labwareId && _selectedWells && _selectionHasLiquids)
+    ? () => {
+      // TODO: Ian 2018-10-22 replace with modal later on if we like this UX
+      if (global.confirm('Are you sure you want to remove liquids from all selected wells?')) {
+        dispatch(removeWellsContents({
+          labwareId: _labwareId,
+          wells: _selectedWells,
+        }))
+      }
+    }
+    : null
+
   return {
     ...passThruProps,
     cancelForm: () => dispatch(deselectAllWells()),
-    clearWells: () => global.alert('"Clear Wells" is not yet implemented'), // TODO: Ian 2018-10-19
+    clearWells,
     saveForm: (values: ValidFormValues) => {
       const volume = Number(values.volume)
 

protocol-designer/src/labware-ingred/actions.js

@@ -115,7 +115,6 @@ export const moveLabware = (toSlot: DeckSlot) => (dispatch: Dispatch<MoveLabware
 export type RemoveWellsContents = {
   type: 'REMOVE_WELLS_CONTENTS',
   payload: {
-    liquidGroupId: string,
     labwareId: string,
     wells: Array<string>,
   },