feat(protocol-designer): implement duplicate step

components/src/__tests__/__snapshots__/lists.test.js.snap

@@ -111,6 +111,7 @@ exports[`ListItem renders ListItem without icon correctly 1`] = `
 exports[`TitledList renders TitledList with children correctly 1`] = `
 <div
   className="titled_list"
+  onContextMenu={undefined}
   onMouseEnter={undefined}
   onMouseLeave={undefined}
 >
@@ -137,6 +138,7 @@ exports[`TitledList renders TitledList with children correctly 1`] = `
 exports[`TitledList renders TitledList with onMouseEnter & onMouseLeave correctly 1`] = `
 <div
   className="titled_list"
+  onContextMenu={undefined}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
@@ -156,6 +158,7 @@ exports[`TitledList renders TitledList with onMouseEnter & onMouseLeave correctl
 exports[`TitledList renders TitledList with optional icon correctly 1`] = `
 <div
   className="titled_list"
+  onContextMenu={undefined}
   onMouseEnter={undefined}
   onMouseLeave={undefined}
 >
@@ -175,6 +178,7 @@ exports[`TitledList renders TitledList with optional icon correctly 1`] = `
 exports[`TitledList renders TitledList without icon correctly 1`] = `
 <div
   className="titled_list"
+  onContextMenu={undefined}
   onMouseEnter={undefined}
   onMouseLeave={undefined}
 >
@@ -194,6 +198,7 @@ exports[`TitledList renders TitledList without icon correctly 1`] = `
 exports[`TitledList renders collapsed TitledList correctly 1`] = `
 <div
   className="titled_list"
+  onContextMenu={undefined}
   onMouseEnter={undefined}
   onMouseLeave={undefined}
 >
@@ -233,6 +238,7 @@ exports[`TitledList renders collapsed TitledList correctly 1`] = `
 exports[`TitledList renders expanded TitledList correctly 1`] = `
 <div
   className="titled_list"
+  onContextMenu={undefined}
   onMouseEnter={undefined}
   onMouseLeave={undefined}
 >

components/src/lists/TitledList.js

@@ -22,6 +22,8 @@ type ListProps = {
   description?: React.Node,
   /** optional click action (on title div, not children) */
   onClick?: (event: SyntheticMouseEvent<>) => mixed,
+  /** optional right click action (on wrapping div) */
+  onContextMenu?: (event: SyntheticMouseEvent<>) => mixed,
   /** optional mouseEnter action */
   onMouseEnter?: (event: SyntheticMouseEvent<>) => mixed,
   /** optional mouseLeave action */
@@ -42,7 +44,7 @@ type ListProps = {
  * An ordered list with optional title, icon, and description.
  */
 export default function TitledList (props: ListProps) {
-  const {iconName, disabled, onCollapseToggle, iconProps, onMouseEnter, onMouseLeave} = props
+  const {iconName, disabled, onCollapseToggle, iconProps, onMouseEnter, onMouseLeave, onContextMenu} = props
   const collapsible = onCollapseToggle != null
 
   const onClick = !disabled
@@ -74,7 +76,7 @@ export default function TitledList (props: ListProps) {
   const iconClass = cx(styles.title_bar_icon, styles.icon_left_of_title, iconProps && iconProps.className)
 
   return (
-    <div className={className} {...{onMouseEnter, onMouseLeave}}>
+    <div className={className} {...{onMouseEnter, onMouseLeave, onContextMenu}}>
       <div onClick={onClick} className={titleBarClass}>
         {iconName && (
           <Icon {...iconProps} className={iconClass} name={iconName} />

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

@@ -6,7 +6,7 @@ import without from 'lodash/without'
 import cx from 'classnames'
 
 import {actions, selectors} from '../../steplist'
-import type {FormData, StepType, StepFieldName} from '../../form-types'
+import type {FormData, StepType, StepFieldName, StepIdType} from '../../form-types'
 import type {BaseState, ThunkDispatch} from '../../types'
 import formStyles from '../forms.css'
 import styles from './StepEditForm.css'
@@ -37,7 +37,7 @@ type SP = {
   formData?: ?FormData,
   isNewStep?: boolean,
 }
-type DP = { deleteStep: () => mixed }
+type DP = { deleteStep: (StepIdType) => mixed }
 
 type StepEditFormState = {
   showConfirmDeleteModal: boolean,
@@ -101,7 +101,7 @@ class StepEditForm extends React.Component<Props, StepEditFormState> {
           onCancelClick={this.toggleConfirmDeleteModal}
           onContinueClick={() => {
             this.toggleConfirmDeleteModal()
-            deleteStep()
+            this.props.formData && deleteStep(this.props.formData.id)
           }}
         />}
         <div className={cx(formStyles.form, styles[formData.stepType])}>
@@ -127,7 +127,7 @@ const mapStateToProps = (state: BaseState): SP => ({
 })
 
 const mapDispatchToProps = (dispatch: ThunkDispatch<*>): DP => ({
-  deleteStep: () => dispatch(actions.deleteStep()),
+  deleteStep: (stepId: StepIdType) => dispatch(actions.deleteStep(stepId)),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(StepEditForm)

protocol-designer/src/components/steplist/ContextMenu.js

@@ -0,0 +1,119 @@
+// @flow
+import * as React from 'react'
+import {connect} from 'react-redux'
+import type {ThunkDispatch} from '../../types'
+import i18n from '../../localization'
+import {actions as steplistActions} from '../../steplist'
+import {Portal} from '../portals/TopPortal'
+import type {StepIdType} from '../../form-types'
+import styles from './StepItem.css'
+
+const MENU_OFFSET_PX = 5
+
+type DP = {
+  deleteStep: (StepIdType) => {},
+  duplicateStep: (StepIdType) => {},
+}
+type Props = {
+  children: ({makeStepOnContextMenu: (StepIdType) => (event: SyntheticMouseEvent<>) => mixed}) => React.Node,
+} & DP
+type State = {
+  visible: boolean,
+  left: ?number,
+  top: ?number,
+  stepId: ?StepIdType,
+}
+
+class ContextMenu extends React.Component<Props, State> {
+  state = {
+    visible: false,
+    left: null,
+    top: null,
+    stepId: null,
+  }
+  menuRoot: ?HTMLElement
+
+  componentDidMount () {
+    global.addEventListener('click', this.handleClick)
+  }
+
+  componentWillUnmount () {
+    global.removeEventListener('click', this.handleClick)
+  }
+
+  makeHandleContextMenu = (stepId: StepIdType) => (event) => {
+    event.preventDefault()
+
+    const clickX = event.clientX
+    const clickY = event.clientY
+
+    this.setState({visible: true, stepId}, () => {
+      const screenW = window.innerWidth
+      const screenH = window.innerHeight
+      const rootW = this.menuRoot ? this.menuRoot.offsetWidth : 0
+      const rootH = this.menuRoot ? this.menuRoot.offsetHeight : 0
+
+      const left = (screenW - clickX) > rootW ? clickX + MENU_OFFSET_PX : clickX - rootW - MENU_OFFSET_PX
+      const top = (screenH - clickY) > rootH ? clickY + MENU_OFFSET_PX : clickY - rootH - MENU_OFFSET_PX
+      this.setState({left, top})
+    })
+  }
+
+  handleClick = (event: SyntheticMouseEvent<*>) => {
+    const { visible } = this.state
+
+    const wasOutside = !(this.menuRoot && event.target instanceof Node && this.menuRoot.contains(event.target))
+
+    if (wasOutside && visible) this.setState({visible: false, left: null, top: null})
+  }
+
+  handleDuplicate = () => {
+    if (this.state.stepId != null) {
+      this.props.duplicateStep(this.state.stepId)
+      this.setState({stepId: null, visible: false})
+    }
+  }
+
+  handleDelete = () => {
+    if (this.state.stepId != null && confirm(i18n.t('alert.window.confirm_delete_step'))) {
+      this.props.deleteStep(this.state.stepId)
+      this.setState({stepId: null, visible: false})
+    }
+  }
+
+  render () {
+    return (
+      <div>
+        {this.props.children({makeStepOnContextMenu: this.makeHandleContextMenu})}
+        {this.state.visible &&
+          <Portal>
+            <React.Fragment>
+              <div
+                ref={ref => { this.menuRoot = ref }}
+                style={{left: this.state.left, top: this.state.top}}
+                className={styles.context_menu}>
+                <div
+                  onClick={this.handleDuplicate}
+                  className={styles.context_menu_item}>
+                  {i18n.t('context_menu.step.duplicate')}
+                </div>
+                <div
+                  onClick={this.handleDelete}
+                  className={styles.context_menu_item}>
+                  {i18n.t('context_menu.step.delete')}
+                </div>
+              </div>
+            </React.Fragment>
+          </Portal>
+        }
+      </div>
+    )
+  }
+}
+
+const mapDispatchToProps = (dispatch: ThunkDispatch<*>) => ({
+  deleteStep: (stepId: StepIdType) => dispatch(steplistActions.deleteStep(stepId)),
+  duplicateStep: (stepId: StepIdType) => dispatch(steplistActions.duplicateStep(stepId)),
+})
+
+export default connect(null, mapDispatchToProps)(ContextMenu)

protocol-designer/src/components/steplist/DraggableStepItems.js

@@ -5,6 +5,7 @@ import isEqual from 'lodash/isEqual'
 
 import StepItem from '../../containers/ConnectedStepItem'
 import type {StepIdType} from '../../form-types'
+import ContextMenu from './ContextMenu'
 
 const DND_TYPES: {STEP_ITEM: "STEP_ITEM"} = {
   STEP_ITEM: 'STEP_ITEM',
@@ -104,14 +105,19 @@ class StepItems extends React.Component<StepItemsProps, StepItemsState> {
     const currentIds = this.props.isOver ? this.state.stepIds : this.props.orderedSteps
     return this.props.connectDropTarget(
       <div>
-        {currentIds.map((stepId: StepIdType) => (
-          <DragDropStepItem
-            key={stepId}
-            stepId={stepId}
-            findStepIndex={this.findStepIndex}
-            onDrag={this.onDrag}
-            moveStep={this.moveStep} />
-        ))}
+        <ContextMenu>
+          {({makeStepOnContextMenu}) => (
+            currentIds.map((stepId: StepIdType) => (
+              <DragDropStepItem
+                key={stepId}
+                stepId={stepId}
+                onStepContextMenu={makeStepOnContextMenu(stepId)}
+                findStepIndex={this.findStepIndex}
+                onDrag={this.onDrag}
+                moveStep={this.moveStep} />
+            ))
+          )}
+        </ContextMenu>
       </div>
     )
   }

protocol-designer/src/components/steplist/StepItem.css

@@ -151,3 +151,28 @@
 .labware_display_name {
   cursor: default;
 }
+
+.context_menu {
+  position: absolute;
+  color: var(--c-font-light);
+  background-color: var(--c-bg-dark);
+  box-shadow: 0 2px 6px #999;
+  z-index: 100000;
+}
+
+.context_menu_item {
+  padding: 6px 50px 5px 10px;
+  min-width: 160px;
+  cursor: default;
+  font-size: var(--fs-body-1);
+}
+
+.context_menu_item:hover {
+  background-color: color(var(--c-bg-dark) shade(30%));
+  color: var(--c-font-light);
+}
+
+.context_menu_item:active {
+  color: white;
+  background-color: color(var(--c-bg-dark) shade(30%));
+}

protocol-designer/src/components/steplist/StepItem.js

@@ -32,6 +32,7 @@ type StepItemProps = {
   getLabware: (labwareId: ?string) => ?Labware,
   handleSubstepHover: SubstepIdentifier => mixed,
   onStepClick?: (event?: SyntheticEvent<>) => mixed,
+  onStepContextMenu?: (event?: SyntheticEvent<>) => mixed,
   onStepItemCollapseToggle?: (event?: SyntheticEvent<>) => mixed,
   onStepHover?: (event?: SyntheticEvent<>) => mixed,
   onStepMouseLeave?: (event?: SyntheticEvent<>) => mixed,
@@ -48,6 +49,7 @@ function StepItem (props: StepItemProps) {
 
     onStepMouseLeave,
     onStepClick,
+    onStepContextMenu,
     onStepItemCollapseToggle,
     onStepHover,
   } = props
@@ -63,6 +65,7 @@ function StepItem (props: StepItemProps) {
       iconProps={{className: error ? styles.error_icon : ''}}
       title={title || ''}
       onClick={onStepClick}
+      onContextMenu={onStepContextMenu}
       onMouseEnter={onStepHover}
       onMouseLeave={onStepMouseLeave}
       onCollapseToggle={onStepItemCollapseToggle}

protocol-designer/src/components/steplist/StepList.js

@@ -25,11 +25,14 @@ export default class StepList extends React.Component<Props> {
     const altIsPressed = e.getModifierState('Alt')
 
     if (altIsPressed) {
+      let delta = 0
       if (key === 'ArrowUp') {
-        reorderSelectedStep(-1)
+        delta = -1
       } else if (key === 'ArrowDown') {
-        reorderSelectedStep(1)
+        delta = 1
       }
+      if (!delta) return
+      reorderSelectedStep(delta)
     }
   }
 

protocol-designer/src/localization/en/alert.json

@@ -34,6 +34,7 @@
   },
   "window": {
     "confirm_create_new": "Are you sure you want to create a new file? Any unsaved changes will be discarded.",
+    "confirm_delete_step": "Are you sure you want to delete this step?",
     "confirm_import": "Are you sure you want to import this file? You will lose any current unsaved changes.",
     "confirm_leave": "Are you sure you want to leave? You will lose any unsaved changes."
   }

protocol-designer/src/localization/en/context_menu.json

@@ -0,0 +1,6 @@
+{
+  "step": {
+    "duplicate": "Duplicate Step",
+    "delete": "Delete Step"
+  }
+}

protocol-designer/src/localization/en/index.js

@@ -3,6 +3,7 @@
 import alert from './alert.json'
 import button from './button.json'
 import card from './card.json'
+import context_menu from './context_menu.json'
 import deck from './deck.json'
 import form from './form.json'
 import modal from './modal.json'
@@ -15,6 +16,7 @@ export default {
     alert,
     button,
     card,
+    context_menu,
     deck,
     form,
     modal,

protocol-designer/src/steplist/actions/actions.js

@@ -54,12 +54,10 @@ export type DeleteStepAction = {
   payload: StepIdType,
 }
 
-export const deleteStep = () => (dispatch: Dispatch<*>, getState: GetState) => {
-  dispatch({
-    type: 'DELETE_STEP',
-    payload: selectors.getSelectedStepId(getState()),
-  })
-}
+export const deleteStep = (stepId: StepIdType) => ({
+  type: 'DELETE_STEP',
+  payload: stepId,
+})
 
 type ExpandAddStepButtonAction = {
   type: 'EXPAND_ADD_STEP_BUTTON',