refactor redux reducer logic

components/src/molecules/DeckLabel/index.tsx

@@ -11,6 +11,7 @@ import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { ModuleModel } from '@opentrons/shared-data'
 
 export interface DeckLabelProps {
+  isZoomed: boolean
   text: string
   isSelected: boolean
   moduleModel?: ModuleModel
@@ -26,6 +27,7 @@ export function DeckLabel({
   moduleModel,
   maxWidth = FLEX_MAX_CONTENT,
   isLast = false,
+  isZoomed,
 }: DeckLabelProps): JSX.Element {
   const DECK_LABEL_BASE_STYLE = (
     labelBorderRadius?: string
@@ -59,7 +61,7 @@ export function DeckLabel({
 
   return (
     <Flex
-      fontSize="6px"
+      fontSize={isZoomed ? '6px' : '18px'}
       data-testid={`DeckLabel_${isSelected ? 'Selected' : 'UnSelected'}`}
       css={
         isSelected

protocol-designer/src/molecules/DropdownStepFormField/index.tsx

@@ -66,9 +66,9 @@ export function DropdownStepFormField(
             availableOptionId ?? { name: 'Choose option', value: '' }
           }
           onClick={value => {
-            const selection = { id: value, text: 'selected' }
+            const selection = { id: value, text: 'Selected' }
             updateValue(value)
-            dispatch(selectSelection(selection))
+            dispatch(selectSelection({ selection, mode: 'replace' }))
           }}
           onEnter={onEnter}
           onExit={onExit}

protocol-designer/src/pages/Designer/DeckSetup/ModuleLabel.tsx

@@ -52,6 +52,7 @@ export const ModuleLabel = (props: ModuleLabelProps): JSX.Element => {
 
   return (
     <DeckLabelSet
+      isZoomed={true}
       ref={labelContainerRef}
       deckLabels={[
         {

protocol-designer/src/pages/Designer/HighlightLabware.tsx

@@ -36,13 +36,20 @@ export function HighlightLabware(
     hoveredLabware.includes(adapterId ?? labwareOnDeck.id)
   const highlighted = hoveredLabwareOnSelection.id === labwareOnDeck.id
 
+  let labelText
+  if (hoveredLabwareOnSelection != null && !isLabwareSelectionSelected) {
+    labelText = hoveredLabwareOnSelection.text ?? undefined
+  } else if (isLabwareSelectionSelected) {
+    labelText = selectedLabwareSelection[0].text ?? undefined
+  }
   if (highlighted || selected) {
     return (
       <LabwareLabel
         isSelected={selected}
         isLast={true}
         position={position}
         labwareDef={labwareOnDeck.def}
+        labelText={labelText}
       />
     )
   }

protocol-designer/src/pages/Designer/LabwareLabel.tsx

@@ -14,6 +14,7 @@ interface ModuleLabelProps {
   isSelected: boolean
   isLast: boolean
   nestedLabwareInfo?: DeckLabelProps[]
+  labelText?: string
 }
 export const LabwareLabel = (props: ModuleLabelProps): JSX.Element => {
   const {
@@ -22,6 +23,7 @@ export const LabwareLabel = (props: ModuleLabelProps): JSX.Element => {
     isSelected,
     isLast,
     nestedLabwareInfo = [],
+    labelText = labwareDef.metadata.displayName,
   } = props
   const labelContainerRef = useRef<HTMLDivElement>(null)
   const designerTab = useSelector(getDesignerTab)
@@ -30,9 +32,10 @@ export const LabwareLabel = (props: ModuleLabelProps): JSX.Element => {
   const deckLabels = [
     ...nestedLabwareInfo,
     {
-      text: labwareDef.metadata.displayName,
+      text: labelText,
       isSelected: isSelected,
       isLast: isLast,
+      isZoomed: designerTab === 'startingDeck',
     },
   ]
 

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx

@@ -61,6 +61,10 @@ import type {
   LiquidHandlingTab,
   StepFormProps,
 } from './types'
+import {
+  hoverSelection,
+  selectSelection,
+} from '../../../../ui/steps/actions/actions'
 
 type StepFormMap = {
   [K in StepType]?: React.ComponentType<StepFormProps> | null
@@ -235,6 +239,8 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
         })
       )
       dispatch(analyticsEvent(stepDuration))
+      dispatch(selectSelection({ id: null, text: null, fieldType: undefined }))
+      dispatch(hoverSelection({ id: null, text: null, fieldType: undefined }))
     } else {
       setShowFormErrors(true)
       if (tab === 'aspirate' && isDispenseError && !isAspirateError) {

protocol-designer/src/ui/steps/actions/__tests__/actions.test.ts

@@ -7,7 +7,7 @@ import * as utils from '../../../../utils'
 import * as stepFormSelectors from '../../../../step-forms/selectors'
 import { getRobotStateTimeline } from '../../../../file-data/selectors'
 import { getMultiSelectLastSelected } from '../../selectors'
-import { selectStep, selectAllSteps, deselectAllSteps } from '../actions'
+import { selectAllSteps, deselectAllSteps } from '../actions'
 import {
   duplicateStep,
   duplicateMultipleSteps,
@@ -52,38 +52,6 @@ const initialRobotState: RobotState = {
 }
 
 describe('steps actions', () => {
-  describe('selectStep', () => {
-    const stepId = 'stepId'
-    beforeEach(() => {
-      when(vi.mocked(stepFormSelectors.getSavedStepForms))
-        .calledWith(expect.anything())
-        .thenReturn({
-          stepId: {
-            foo: 'getSavedStepFormsResult',
-          } as any,
-        })
-    })
-    afterEach(() => {
-      vi.resetAllMocks()
-    })
-    // TODO(IL, 2020-04-17): also test scroll to top behavior
-    it('should select the step and populate the form', () => {
-      const store: any = mockStore()
-      store.dispatch(selectStep(stepId))
-      expect(store.getActions()).toEqual([
-        {
-          type: 'SELECT_STEP',
-          payload: stepId,
-        },
-        {
-          type: 'POPULATE_FORM',
-          payload: {
-            foo: 'getSavedStepFormsResult',
-          },
-        },
-      ])
-    })
-  })
   describe('selectAllSteps', () => {
     let ids: string[]
     beforeEach(() => {

protocol-designer/src/ui/steps/actions/actions.ts

@@ -55,9 +55,18 @@ export const hoverSelection = (args: Selection): hoverSelectionAction => ({
   type: 'HOVER_SELECTION',
   payload: { id: args.id, text: args.text },
 })
-export const selectSelection = (args: Selection): selectSelectionAction => ({
+export const selectSelection = (args: {
+  selection: Selection | null
+  mode: 'add' | 'clear' | 'replace'
+}): selectSelectionAction => ({
   type: 'SELECT_SELECTION',
-  payload: { id: args.id, text: args.text },
+  payload: {
+    selection:
+      args.selection != null
+        ? { id: args.selection.id, text: args.selection.text }
+        : null,
+    mode: args.mode,
+  },
 })
 
 export const hoverOnSubstep = (
@@ -94,21 +103,6 @@ export const clearWellSelectionLabwareKey = (): ClearWellSelectionLabwareKeyActi
   type: 'CLEAR_WELL_SELECTION_LABWARE_KEY',
   payload: null,
 })
-export const resetSelectStep = (stepId: StepIdType): ThunkAction<any> => (
-  dispatch: ThunkDispatch<any>,
-  getState: GetState
-) => {
-  const selectStepAction: SelectStepAction = {
-    type: 'SELECT_STEP',
-    payload: stepId,
-  }
-  dispatch(selectStepAction)
-  dispatch({
-    type: 'POPULATE_FORM',
-    payload: null,
-  })
-  resetScrollElements()
-}
 
 export const populateForm = (stepId: StepIdType): ThunkAction<any> => (
   dispatch: ThunkDispatch<any>,
@@ -120,24 +114,22 @@ export const populateForm = (stepId: StepIdType): ThunkAction<any> => (
     type: 'POPULATE_FORM',
     payload: formData,
   })
-  resetScrollElements()
-}
-
-export const selectStep = (stepId: StepIdType): ThunkAction<any> => (
-  dispatch: ThunkDispatch<any>,
-  getState: GetState
-) => {
-  const selectStepAction: SelectStepAction = {
-    type: 'SELECT_STEP',
-    payload: stepId,
+  if (formData.stepType === 'moveLabware') {
+    dispatch({
+      type: 'SELECT_SELECTION',
+      payload: {
+        selection: { id: formData.labware, text: 'Selected' },
+        mode: 'add',
+      },
+    })
+    dispatch({
+      type: 'SELECT_SELECTION',
+      payload: {
+        selection: { id: formData.newLocation, text: 'New location' },
+        mode: 'add',
+      },
+    })
   }
-  dispatch(selectStepAction)
-  const state = getState()
-  const formData = { ...stepFormSelectors.getSavedStepForms(state)[stepId] }
-  dispatch({
-    type: 'POPULATE_FORM',
-    payload: formData,
-  })
   resetScrollElements()
 }
 

protocol-designer/src/ui/steps/actions/types.ts

@@ -38,7 +38,7 @@ export interface Selection {
 }
 export interface selectSelectionAction {
   type: 'SELECT_SELECTION'
-  payload: Selection
+  payload: { selection: Selection | null; mode: 'add' | 'clear' | 'replace' }
 }
 export interface hoverSelectionAction {
   type: 'HOVER_SELECTION'

protocol-designer/src/ui/steps/reducers.ts

@@ -205,11 +205,30 @@ const selectedSelection: Reducer<Selection[], any> = handleActions(
     SELECT_SELECTION: (
       state: Selection[],
       action: {
-        payload: Selection
+        payload: {
+          selection: Selection | null
+          mode: 'add' | 'clear' | 'replace'
+        }
       }
     ) => {
-      const exists = state.some(sel => sel.id === action.payload.id)
-      return exists ? state : [...state, action.payload]
+      const { selection, mode } = action.payload
+
+      switch (mode) {
+        case 'clear':
+          return []
+        case 'replace':
+          return selection != null ? [selection] : state
+        case 'add': {
+          const exists = state.some(sel => sel.id === selection?.id)
+          if (selection != null) {
+            return exists ? state : [...state, selection]
+          } else {
+            return state
+          }
+        }
+        default:
+          return state
+      }
     },
   },
   []