feat(protocol-designer): add labware details card

* remove old LabwareNameEditForm and its reducers + actions + selectors

Closes #2428

protocol-designer/src/components/IngredientSelectionModal.js

@@ -5,20 +5,15 @@ 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 = {}
 
 export default function IngredientSelectionModal (props: Props) {
   return (
     <div className={styles.ingredient_modal}>
-
       <IngredientPropertiesForm />
-      <LabwareNameEditForm />
-
       <SelectablePlate selectable />
-
       <WellSelectionInstructions />
     </div>
   )

protocol-designer/src/components/IngredientsList/LabwareDetailsCard/LabwareDetailsCard.js

@@ -19,15 +19,15 @@ export default function LabwareDetailsCard (props: Props) {
       <PDListItem>
         <div className={styles.row}>
           <span className={cx(styles.label, styles.column_1_3)}>
-            {i18n.t('form.labware.type')}
+            {i18n.t('form.generic.labware_type')}
           </span>
           <span className={styles.column_2_3}>{props.labwareType}</span>
         </div>
       </PDListItem>
       <PDListItem border>
         <div className={styles.row}>
           <span className={cx(styles.label, styles.column_1_3)}>
-            {i18n.t('form.liquid.nickname')}
+            {i18n.t('form.generic.nickname')}
           </span>
           <span className={styles.column_1_3}>
             {props.nickname}

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<typeof LabwareDetailsCard>
+
+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)

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);
+}

protocol-designer/src/components/IngredientsList.js → 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 (
     <SidePanel title='Name & Liquids'>
-        {/* Labware Name "button" to open LabwareNameEditForm */}
-        <PDTitledList
-          className={stepItemStyles.step_item}
-          title='labware name'
-          iconName='pencil'
-          selected={renameLabwareFormMode}
-          onClick={openRenameLabwareForm}
-        />
+        <LabwareDetailsCard />
 
         {Object.keys(liquidGroupsById).map((groupIdForCard) =>
           <IngredGroupCard key={groupIdForCard}

protocol-designer/src/containers/IngredientsList.js

@@ -3,7 +3,7 @@ import * as React from 'react'
 import {connect} from 'react-redux'
 import {selectors} from '../labware-ingred/reducers'
 import * as wellSelectionSelectors from '../top-selectors/well-contents'
-import {editModeIngredientGroup, deleteIngredient, openRenameLabwareForm} from '../labware-ingred/actions'
+import {editModeIngredientGroup, deleteIngredient} from '../labware-ingred/actions'
 import type {BaseState, ThunkDispatch} from '../types'
 
 import IngredientsList from '../components/IngredientsList'
@@ -13,7 +13,6 @@ type Props = React.ElementProps<typeof IngredientsList>
 type DP = {
   editModeIngredientGroup: $ElementType<Props, 'editModeIngredientGroup'>,
   deleteIngredient: $ElementType<Props, 'deleteIngredient'>,
-  openRenameLabwareForm: $ElementType<Props, 'openRenameLabwareForm'>,
 }
 
 type SP = $Diff<Props, DP>
@@ -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()),
   }
 }
 

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 = {

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<typeof actions.drillDownOnLabware>): 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<ActiveModals> = 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,