feat(protocol-designer): implement duplicate step

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

@@ -15,20 +15,25 @@ import {PortalRoot} from './TooltipPortal'
 type Props = {
   orderedSteps: Array<StepIdType>,
   reorderSelectedStep: (delta: number) => mixed,
+  copySelectedStep: (delta: number) => mixed,
 }
 
 export default class StepList extends React.Component<Props> {
   handleKeyDown = (e: SyntheticKeyboardEvent<*>) => {
-    const {reorderSelectedStep} = this.props
+    const {reorderSelectedStep, copySelectedStep} = this.props
     const key = e.key
     const altIsPressed = e.getModifierState('Alt')
+    const ctlIsPressed = e.getModifierState('Control')
 
     if (altIsPressed) {
+      let delta = 0
       if (key === 'ArrowUp') {
-        reorderSelectedStep(-1)
+        delta = -1
       } else if (key === 'ArrowDown') {
-        reorderSelectedStep(1)
+        delta = 1
       }
+      if (!delta) return
+      ctlIsPressed ? copySelectedStep(delta) : reorderSelectedStep(delta)
     }
   }
 

protocol-designer/src/containers/ConnectedStepList.js

@@ -25,6 +25,7 @@ function mapStateToProps (state: BaseState): SP {
 
 function mapDispatchToProps (dispatch: ThunkDispatch<*>): DP {
   return {
+    copySelectedStep: (delta: number) => dispatch(steplistActions.copySelectedStep(delta)),
     reorderSelectedStep: (delta: number) =>
       dispatch(steplistActions.reorderSelectedStep(delta)),
   }

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

@@ -108,3 +108,25 @@ export const reorderSelectedStep = (delta: number) =>
       })
     }
   }
+
+export type CopySelectedStepAction = {
+  type: 'COPY_SELECTED_STEP',
+  payload: {
+    selectedStepId: StepIdType,
+    nextStepId: StepIdType,
+    delta: number,
+  },
+}
+
+export const copySelectedStep = (delta: number) =>
+  (dispatch: ThunkDispatch<CopySelectedStepAction>, getState: GetState) => {
+    const selectedStepId = selectors.getSelectedStepId(getState())
+    const nextStepId = uuid()
+
+    if (selectedStepId != null) {
+      dispatch({
+        type: 'COPY_SELECTED_STEP',
+        payload: { selectedStepId, nextStepId, delta },
+      })
+    }
+  }

protocol-designer/src/steplist/reducers.js

@@ -25,6 +25,7 @@ import type {
   ChangeFormInputAction,
   DeleteStepAction,
   ReorderSelectedStepAction,
+  CopySelectedStepAction,
   SaveStepFormAction,
   SelectStepAction,
   SelectTerminalItemAction,
@@ -127,6 +128,13 @@ const steps: Reducer<StepsState, *> = handleActions({
       }
     }, {...initialStepState})
   },
+  COPY_SELECTED_STEP: (state: StepsState, action: CopySelectedStepAction): StepsState => ({
+    ...state,
+    [action.payload.nextStepId]: {
+      ...(action.payload.selectedStepId ? state[action.payload.selectedStepId] : {}),
+      id: action.payload.nextStepId,
+    },
+  }),
 }, initialStepState)
 
 type SavedStepFormState = {
@@ -173,6 +181,13 @@ const savedStepForms: Reducer<SavedStepFormState, *> = handleActions({
       ...action.payload.update,
     },
   }),
+  COPY_SELECTED_STEP: (state: SavedStepFormState, action: CopySelectedStepAction): SavedStepFormState => ({
+    ...state,
+    [action.payload.nextStepId]: {
+      ...(action.payload.selectedStepId ? state[action.payload.selectedStepId] : {}),
+      id: action.payload.nextStepId,
+    },
+  }),
 }, {})
 
 type CollapsedStepsState = {
@@ -221,6 +236,18 @@ const orderedSteps: Reducer<OrderedStepsState, *> = handleActions({
       ...stepsWithoutSelectedStep.slice(nextIndex),
     ]
   },
+  COPY_SELECTED_STEP: (state: OrderedStepsState, action: CopySelectedStepAction): OrderedStepsState => {
+    const {selectedStepId, nextStepId, delta} = action.payload
+    const selectedIndex = state.findIndex(s => s === selectedStepId)
+
+    if (delta <= 0 && selectedIndex === 0) return [nextStepId, ...state]
+    const boundary = delta <= 0 ? selectedIndex + 1 + delta : selectedIndex + delta
+    return [
+      ...state.slice(0, boundary),
+      nextStepId,
+      ...state.slice(boundary, state.length),
+    ]
+  },
 }, [])
 
 export type SelectableItem = {