fix(protocol-designer): highlight used wells when selected on step (#…

…17136)

closes AUTH-1190

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx

@@ -1,4 +1,5 @@
 import { useSelector, useDispatch } from 'react-redux'
+import { useTranslation } from 'react-i18next'
 import { useConditionalConfirm } from '@opentrons/components'
 import {
   getHoveredTerminalItemId,
@@ -28,7 +29,6 @@ import type {
 } from '../../../../ui/steps'
 import type { TerminalItemId } from '../../../../steplist'
 import type { ThunkDispatch } from '../../../../types'
-import { useTranslation } from 'react-i18next'
 
 export interface TerminalItemStepProps {
   id: TerminalItemId

protocol-designer/src/top-selectors/substep-highlight.ts

@@ -4,7 +4,11 @@ import { ALL, COLUMN, getWellNamePerMultiTip } from '@opentrons/shared-data'
 import * as StepGeneration from '@opentrons/step-generation'
 import { selectors as stepFormSelectors } from '../step-forms'
 import { selectors as fileDataSelectors } from '../file-data'
-import { getHoveredStepId, getHoveredSubstep } from '../ui/steps'
+import {
+  getHoveredStepId,
+  getHoveredSubstep,
+  getSelectedStepId,
+} from '../ui/steps'
 import { getWellSetForMultichannel } from '../utils'
 import type { WellGroup } from '@opentrons/components'
 import type {
@@ -275,17 +279,19 @@ export const wellHighlightsByLabwareId: Selector<
   getHoveredSubstep,
   fileDataSelectors.getSubsteps,
   stepFormSelectors.getOrderedStepIds,
+  getSelectedStepId,
   (
     robotStateTimeline,
     invariantContext,
     allStepArgsAndErrors,
     hoveredStepId,
     hoveredSubstep,
     substepsById,
-    orderedStepIds
+    orderedStepIds,
+    selectedStepId
   ) => {
     const timeline = robotStateTimeline.timeline
-    const stepId = hoveredStepId
+    const stepId = hoveredStepId || selectedStepId
     const timelineIndex = orderedStepIds.findIndex(i => i === stepId)
     const frame = timeline[timelineIndex]
     const robotState = frame && frame.robotState