diff --git a/protocol-designer/src/components/IngredientSelectionModal.js b/protocol-designer/src/components/IngredientSelectionModal.js index 7caeac4bfb9..1a8076a3694 100644 --- a/protocol-designer/src/components/IngredientSelectionModal.js +++ b/protocol-designer/src/components/IngredientSelectionModal.js @@ -5,7 +5,6 @@ import styles from './IngredientSelectionModal.css' import SelectablePlate from '../containers/SelectablePlate' import IngredientPropertiesForm from '../containers/IngredientPropertiesForm' -import LabwareNameEditForm from '../containers/LabwareNameEditForm' import WellSelectionInstructions from './WellSelectionInstructions' type Props = {} @@ -13,12 +12,8 @@ type Props = {} export default function IngredientSelectionModal (props: Props) { return (
- - - -
) diff --git a/protocol-designer/src/components/IngredientsList.css b/protocol-designer/src/components/IngredientsList/IngredientsList.css similarity index 100% rename from protocol-designer/src/components/IngredientsList.css rename to protocol-designer/src/components/IngredientsList/IngredientsList.css diff --git a/protocol-designer/src/components/IngredientsList/LabwareDetailsCard/LabwareDetailsCard.js b/protocol-designer/src/components/IngredientsList/LabwareDetailsCard/LabwareDetailsCard.js index 044b46607c8..45145408598 100644 --- a/protocol-designer/src/components/IngredientsList/LabwareDetailsCard/LabwareDetailsCard.js +++ b/protocol-designer/src/components/IngredientsList/LabwareDetailsCard/LabwareDetailsCard.js @@ -19,7 +19,7 @@ export default function LabwareDetailsCard (props: Props) {
- {i18n.t('form.labware.type')} + {i18n.t('form.generic.labware_type')} {props.labwareType}
@@ -27,7 +27,7 @@ export default function LabwareDetailsCard (props: Props) {
- {i18n.t('form.liquid.nickname')} + {i18n.t('form.generic.nickname')} {props.nickname} diff --git a/protocol-designer/src/components/IngredientsList/LabwareDetailsCard/index.js b/protocol-designer/src/components/IngredientsList/LabwareDetailsCard/index.js new file mode 100644 index 00000000000..f05aa083d8d --- /dev/null +++ b/protocol-designer/src/components/IngredientsList/LabwareDetailsCard/index.js @@ -0,0 +1,26 @@ +// @flow +import {connect} from 'react-redux' +import assert from 'assert' +import LabwareDetailsCard from './LabwareDetailsCard' +import {selectors as labwareIngredSelectors} from '../../../labware-ingred/reducers' +import type {ElementProps} from 'react' +import type {BaseState} from '../../../types' + +type Props = ElementProps + +function mapStateToProps (state: BaseState): Props { + const labwareData = labwareIngredSelectors.getSelectedContainer(state) + assert(labwareData, 'Expected labware data to exist in connected labware details card') + + return labwareData + ? { + labwareType: labwareData.type, + nickname: labwareData.name || 'Unnamed Labware', + } + : { + labwareType: '?', + nickname: '?', + } +} + +export default connect(mapStateToProps)(LabwareDetailsCard) diff --git a/protocol-designer/src/components/IngredientsList/LabwareDetailsCard/labwareDetailsCard.css b/protocol-designer/src/components/IngredientsList/LabwareDetailsCard/labwareDetailsCard.css new file mode 100644 index 00000000000..30c48d91c1e --- /dev/null +++ b/protocol-designer/src/components/IngredientsList/LabwareDetailsCard/labwareDetailsCard.css @@ -0,0 +1,11 @@ +@import '@opentrons/components'; +@import '../../../css/grid.css'; + +.row { + lost-utility: clearfix; + text-align: left; +} + +.label { + font-weight: var(--fw-bold); +} diff --git a/protocol-designer/src/components/IngredientsList.js b/protocol-designer/src/components/IngredientsList/index.js similarity index 85% rename from protocol-designer/src/components/IngredientsList.js rename to protocol-designer/src/components/IngredientsList/index.js index 67467bfb72c..04426bc5151 100644 --- a/protocol-designer/src/components/IngredientsList.js +++ b/protocol-designer/src/components/IngredientsList/index.js @@ -1,16 +1,15 @@ // @flow -// TODO: Ian 2018-06-07 break out these components into their own files (make IngredientsList a directory) // TODO: Ian 2018-10-09 figure out what belongs in LiquidsSidebar vs IngredientsList after #2427 import React from 'react' import {IconButton, SidePanel, swatchColors} from '@opentrons/components' -import {sortWells} from '../utils' -import {PDTitledList, PDListItem} from './lists' -import stepItemStyles from './steplist/StepItem.css' -import StepDescription from './StepDescription' +import {sortWells} from '../../utils' +import {PDTitledList, PDListItem} from '../lists' +import StepDescription from '../StepDescription' +import LabwareDetailsCard from './LabwareDetailsCard' import styles from './IngredientsList.css' -import type {LiquidGroupsById, LiquidGroup} from '../labware-ingred/types' -import type {SingleLabwareLiquidState} from '../step-generation' +import type {LiquidGroupsById, LiquidGroup} from '../../labware-ingred/types' +import type {SingleLabwareLiquidState} from '../../step-generation' type DeleteIngredient = (args: {|groupId: string, wellName?: string|}) => mixed type EditModeIngredientGroup = (args: {|groupId: string, wellName: ?string|}) => mixed @@ -151,8 +150,6 @@ type Props = { liquidGroupsById: LiquidGroupsById, labwareWellContents: SingleLabwareLiquidState, selectedIngredientGroupId: ?string, - renameLabwareFormMode: boolean, - openRenameLabwareForm: () => mixed, } export default function IngredientsList (props: Props) { @@ -162,20 +159,11 @@ export default function IngredientsList (props: Props) { editModeIngredientGroup, deleteIngredient, selectedIngredientGroupId, - renameLabwareFormMode, - openRenameLabwareForm, } = props return ( - {/* Labware Name "button" to open LabwareNameEditForm */} - + {Object.keys(liquidGroupsById).map((groupIdForCard) => type DP = { editModeIngredientGroup: $ElementType, deleteIngredient: $ElementType, - openRenameLabwareForm: $ElementType, } type SP = $Diff @@ -22,7 +21,6 @@ function mapStateToProps (state: BaseState): SP { const container = selectors.getSelectedContainer(state) return { - renameLabwareFormMode: selectors.getRenameLabwareFormMode(state), liquidGroupsById: selectors.getLiquidGroupsById(state), labwareWellContents: (container && selectors.getIngredientLocations(state)[container.id]) || {}, selectedIngredientGroupId: wellSelectionSelectors.getSelectedWellsCommonIngredId(state), @@ -34,7 +32,6 @@ function mapDispatchToProps (dispatch: ThunkDispatch<*>): DP { return { editModeIngredientGroup: (args) => dispatch(editModeIngredientGroup(args)), deleteIngredient: (args) => dispatch(deleteIngredient(args)), - openRenameLabwareForm: () => dispatch(openRenameLabwareForm()), } } diff --git a/protocol-designer/src/containers/LabwareNameEditForm.js b/protocol-designer/src/containers/LabwareNameEditForm.js deleted file mode 100644 index 7c8456953f4..00000000000 --- a/protocol-designer/src/containers/LabwareNameEditForm.js +++ /dev/null @@ -1,109 +0,0 @@ -// @flow -import * as React from 'react' -import {connect} from 'react-redux' -import type {Dispatch} from 'redux' -import type {BaseState} from '../types' - -import {selectors as labwareIngredSelectors} from '../labware-ingred/reducers' -import {closeRenameLabwareForm, modifyContainer} from '../labware-ingred/actions' - -import {FormGroup, InputField, PrimaryButton} from '@opentrons/components' -import formStyles from '../components/Form.css' - -type Props = { - renameLabwareFormMode: boolean, - labwareName: ?string, - - onCancel: (event: SyntheticMouseEvent<*>) => mixed, - onSaveName: (name: ?string) => (event: SyntheticMouseEvent<*>) => mixed, -} - -type SP = { - renameLabwareFormMode: $ElementType, - labwareName: $ElementType, -} - -type MP = { - _selectedLabwareId: ?string, -} - -type State = { - name: ?string, -} - -class LabwareNameEditForm extends React.Component { - constructor (props: Props) { - super(props) - this.state = {name: null} - } - - handleChangeName = (e: SyntheticInputEvent<*>) => { - this.setState({name: e.target.value}) - } - - // TODO(mc, 2018-07-24): use a different lifecycle hook - componentWillReceiveProps (nextProps: Props) { - this.setState({name: nextProps.labwareName}) - } - - render () { - const {onCancel, onSaveName, renameLabwareFormMode} = this.props - - if (!renameLabwareFormMode) { - // Not in "rename labware form mode", don't show form - return null - } - - return ( -
-
- - - -
- -
- Close - Save -
-
- ) - } -} - -function mapStateToProps (state: BaseState): SP & MP { - const _selectedLabwareId = labwareIngredSelectors.getSelectedContainerId(state) - return { - labwareName: _selectedLabwareId && labwareIngredSelectors.getLabwareNames(state)[_selectedLabwareId], - renameLabwareFormMode: labwareIngredSelectors.getRenameLabwareFormMode(state), - - _selectedLabwareId, - } -} - -function mergeProps (stateProps: SP & MP, dispatchProps: {dispatch: Dispatch<*>}): Props { - const {_selectedLabwareId, ...props} = stateProps - const {dispatch} = dispatchProps - - return { - ...props, - - onCancel: () => dispatch(closeRenameLabwareForm()), - - onSaveName: (name) => () => { - if (_selectedLabwareId) { - dispatch(modifyContainer({ - containerId: _selectedLabwareId, - modify: {name}, - })) - - dispatch(closeRenameLabwareForm()) - } else { - // TODO Ian 2018-05-30 use assert - console.warn('Tried to save labware name with no selected labware') - } - }, - } -} - -export default connect(mapStateToProps, null, mergeProps)(LabwareNameEditForm) diff --git a/protocol-designer/src/labware-ingred/actions.js b/protocol-designer/src/labware-ingred/actions.js index 82d70afa7c1..a3e0eb688d9 100644 --- a/protocol-designer/src/labware-ingred/actions.js +++ b/protocol-designer/src/labware-ingred/actions.js @@ -92,16 +92,6 @@ export const modifyContainer = createAction( |}) => args ) -export const openRenameLabwareForm = createAction( - 'OPEN_RENAME_LABWARE_FORM', - () => {} -) - -export const closeRenameLabwareForm = createAction( - 'CLOSE_RENAME_LABWARE_FORM', - () => {} -) - // =========== export type MoveLabware = { diff --git a/protocol-designer/src/labware-ingred/reducers/index.js b/protocol-designer/src/labware-ingred/reducers/index.js index 2fd72f3cc9e..f681d010dd3 100644 --- a/protocol-designer/src/labware-ingred/reducers/index.js +++ b/protocol-designer/src/labware-ingred/reducers/index.js @@ -80,15 +80,6 @@ const selectedContainerId = handleActions({ CLOSE_WELL_SELECTION_MODAL: (): SelectedContainerId => null, }, null) -type RenameLabwareFormModeState = boolean -const renameLabwareFormMode = handleActions({ - OPEN_RENAME_LABWARE_FORM: () => true, - - CLOSE_RENAME_LABWARE_FORM: () => false, - CLOSE_INGREDIENT_SELECTOR: () => false, - EDIT_MODE_INGREDIENT_GROUP: () => false, -}, false) - type DrillDownLabwareId = string | null const drillDownLabwareId = handleActions({ DRILL_DOWN_ON_LABWARE: (state, action: ActionType): DrillDownLabwareId => action.payload, @@ -306,7 +297,6 @@ export type RootState = {| selectedLiquidGroup: SelectedLiquidGroupState, ingredients: IngredientsState, ingredLocations: LocationsState, - renameLabwareFormMode: RenameLabwareFormModeState, |} // TODO Ian 2018-01-15 factor into separate files @@ -320,7 +310,6 @@ const rootReducer = combineReducers({ savedLabware, ingredients, ingredLocations, - renameLabwareFormMode, }) // SELECTORS @@ -497,8 +486,6 @@ const activeModals: Selector = createSelector( } ) -const getRenameLabwareFormMode = (state: BaseState) => rootSelector(state).renameLabwareFormMode - const slotToMoveFrom = (state: BaseState) => rootSelector(state).moveLabwareMode const hasLiquid = (state: BaseState) => !isEmpty(getLiquidGroupsById(state)) @@ -521,7 +508,6 @@ export const selectors = { getDrillDownLabwareId, activeModals, - getRenameLabwareFormMode, slotToMoveFrom, diff --git a/protocol-designer/src/localization/en/form.json b/protocol-designer/src/localization/en/form.json index 59765dae23a..6dd4b98a77b 100644 --- a/protocol-designer/src/localization/en/form.json +++ b/protocol-designer/src/localization/en/form.json @@ -1,10 +1,7 @@ { -"generic": { - "labware_type": "Type", - "nickname": "Nickname" - }, - "labware": { - "type": "Labware Type" + "generic": { + "labware_type": "Type", + "nickname": "Nickname" }, "liquid": { "details": "Details", @@ -14,50 +11,48 @@ "serialize_explanation": "Each placement of the liquid will get its own number. (\"Sample 1\", \"Sample 2\", \"Sample 3\")" }, "step_edit_form": { - "step_edit_form": { - "consolidate": { - "change_tip_option": { - "always": "For each dispense", - "once": "Only the first aspirate", - "never": "Never" - } - }, - "distribute": { - "change_tip_option": { - "always": "For each aspirate", - "once": "Only the first aspirate", - "never": "Never" - } - }, - "mix": { - "change_tip_option": { - "always": "For each well", - "once": "Only the first aspirate", - "never": "Never" - } + "consolidate": { + "change_tip_option": { + "always": "For each dispense", + "once": "Only the first aspirate", + "never": "Never" + } + }, + "distribute": { + "change_tip_option": { + "always": "For each aspirate", + "once": "Only the first aspirate", + "never": "Never" + } + }, + "mix": { + "change_tip_option": { + "always": "For each well", + "once": "Only the first aspirate", + "never": "Never" + } + }, + "transfer": { + "change_tip_option": { + "always": "For each aspirate", + "once": "Only the first aspirate", + "never": "Never" + } + }, + "field": { + "change_tip": { + "label": "Get new tip" }, - "transfer": { - "change_tip_option": { - "always": "For each aspirate", - "once": "Only the first aspirate", - "never": "Never" - } + "tip_position": { + "label": "Tip Position" }, - "field": { - "change_tip": { - "label": "Get new tip" - }, - "tip_position": { - "label": "Tip Position" - }, - "well_order": { - "label": "Well Order", - "option": { - "l2r": "Left to right", - "r2l": "Right to left", - "t2b": "Top to bottom", - "b2t": "Bottom to top" - } + "well_order": { + "label": "Well Order", + "option": { + "l2r": "Left to right", + "r2l": "Right to left", + "t2b": "Top to bottom", + "b2t": "Bottom to top" } } } diff --git a/protocol-designer/src/well-selection/reducers.js b/protocol-designer/src/well-selection/reducers.js index 18337afdce7..f49f029a0b7 100644 --- a/protocol-designer/src/well-selection/reducers.js +++ b/protocol-designer/src/well-selection/reducers.js @@ -42,7 +42,6 @@ const selectedWells = handleActions({ CLOSE_INGREDIENT_SELECTOR: () => selectedWellsInitialState, EDIT_INGREDIENT: () => selectedWellsInitialState, CLOSE_WELL_SELECTION_MODAL: () => selectedWellsInitialState, - OPEN_RENAME_LABWARE_FORM: () => selectedWellsInitialState, }, selectedWellsInitialState) type WellSelectionModalState = OpenWellSelectionModalPayload | null