fix(app): store run step completion in redux (#16570)

[It turns out that since we implemented the green checks displayed for
completed steps as react component state, if you navigate away from the
component it loses the state.

To fix this we can throw it in redux. This PR does that, in the app
anyway.

## testing
- [x] the green checks on the desktop should still work, including when
you nav away and back

## reviews
- i have not done redux stuff in a while! does this look right?


Closes RQA-3304

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/ActionButton/hooks/useActionButtonProperties.ts

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
+import { useSelector } from 'react-redux'
 
 import {
   RUN_STATUS_IDLE,
@@ -14,6 +15,7 @@ import {
   useTrackEvent,
 } from '/app/redux/analytics'
 import { useTrackProtocolRunEvent } from '/app/redux-resources/analytics'
+import { getMissingSetupSteps } from '/app/redux/protocol-runs'
 import { useIsHeaterShakerInProtocol } from '/app/organisms/ModuleCard/hooks'
 import { isAnyHeaterShakerShaking } from '../../../RunHeaderModalContainer/modals'
 import {
@@ -24,6 +26,8 @@ import {
 
 import type { IconName } from '@opentrons/components'
 import type { BaseActionButtonProps } from '..'
+import type { State } from '/app/redux/types'
+import type { StepKey } from '/app/redux/protocol-runs'
 
 interface UseButtonPropertiesProps extends BaseActionButtonProps {
   isProtocolNotReady: boolean
@@ -42,7 +46,6 @@ interface UseButtonPropertiesProps extends BaseActionButtonProps {
 export function useActionButtonProperties({
   isProtocolNotReady,
   runStatus,
-  missingSetupSteps,
   robotName,
   runId,
   confirmAttachment,
@@ -66,6 +69,9 @@ export function useActionButtonProperties({
   const isHeaterShakerInProtocol = useIsHeaterShakerInProtocol()
   const isHeaterShakerShaking = isAnyHeaterShakerShaking(attachedModules)
   const trackEvent = useTrackEvent()
+  const missingSetupSteps = useSelector<State, StepKey[]>((state: State) =>
+    getMissingSetupSteps(state, runId)
+  )
 
   let buttonText = ''
   let handleButtonClick = (): void => {}

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/hooks/useMissingStepsModal.ts

@@ -1,17 +1,21 @@
+import { useSelector } from 'react-redux'
 import { RUN_STATUS_IDLE, RUN_STATUS_STOPPED } from '@opentrons/api-client'
 import { useConditionalConfirm } from '@opentrons/components'
 
 import { useIsHeaterShakerInProtocol } from '/app/organisms/ModuleCard/hooks'
 import { isAnyHeaterShakerShaking } from '../modals'
+import { getMissingSetupSteps } from '/app/redux/protocol-runs'
 
 import type { UseConditionalConfirmResult } from '@opentrons/components'
 import type { RunStatus, AttachedModule } from '@opentrons/api-client'
 import type { ConfirmMissingStepsModalProps } from '../modals'
+import type { State } from '/app/redux/types'
+import type { StepKey } from '/app/redux/protocol-runs'
 
 interface UseMissingStepsModalProps {
   runStatus: RunStatus | null
   attachedModules: AttachedModule[]
-  missingSetupSteps: string[]
+  runId: string
   handleProceedToRunClick: () => void
 }
 
@@ -30,12 +34,14 @@ export type UseMissingStepsModalResult =
 export function useMissingStepsModal({
   attachedModules,
   runStatus,
-  missingSetupSteps,
+  runId,
   handleProceedToRunClick,
 }: UseMissingStepsModalProps): UseMissingStepsModalResult {
   const isHeaterShakerInProtocol = useIsHeaterShakerInProtocol()
   const isHeaterShakerShaking = isAnyHeaterShakerShaking(attachedModules)
-
+  const missingSetupSteps = useSelector<State, StepKey[]>((state: State) =>
+    getMissingSetupSteps(state, runId)
+  )
   const shouldShowHSConfirm =
     isHeaterShakerInProtocol &&
     !isHeaterShakerShaking &&

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/ConfirmMissingStepsModal.tsx

@@ -12,11 +12,27 @@ import {
   TYPOGRAPHY,
   Modal,
 } from '@opentrons/components'
+import {
+  LPC_STEP_KEY,
+  LABWARE_SETUP_STEP_KEY,
+  LIQUID_SETUP_STEP_KEY,
+  MODULE_SETUP_STEP_KEY,
+  ROBOT_CALIBRATION_STEP_KEY,
+} from '/app/redux/protocol-runs'
+import type { StepKey } from '/app/redux/protocol-runs'
+
+const STEP_KEY_TO_I18N_KEY = {
+  [LPC_STEP_KEY]: 'applied_labware_offsets',
+  [LABWARE_SETUP_STEP_KEY]: 'labware_placement',
+  [LIQUID_SETUP_STEP_KEY]: 'liquids',
+  [MODULE_SETUP_STEP_KEY]: 'module_setup',
+  [ROBOT_CALIBRATION_STEP_KEY]: 'robot_calibration',
+}
 
 export interface ConfirmMissingStepsModalProps {
   onCloseClick: () => void
   onConfirmClick: () => void
-  missingSteps: string[]
+  missingSteps: StepKey[]
 }
 export const ConfirmMissingStepsModal = (
   props: ConfirmMissingStepsModalProps
@@ -41,7 +57,7 @@ export const ConfirmMissingStepsModal = (
             missingSteps: new Intl.ListFormat('en', {
               style: 'short',
               type: 'conjunction',
-            }).format(missingSteps.map(step => t(step))),
+            }).format(missingSteps.map(step => t(STEP_KEY_TO_I18N_KEY[step]))),
           })}
         </LegacyStyledText>
       </Flex>

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/useRunHeaderModalContainer.ts

@@ -62,7 +62,6 @@ export function useRunHeaderModalContainer({
   runStatus,
   runRecord,
   attachedModules,
-  missingSetupSteps,
   protocolRunControls,
   runErrors,
 }: UseRunHeaderModalContainerProps): UseRunHeaderModalContainerResult {
@@ -102,7 +101,7 @@ export function useRunHeaderModalContainer({
   const missingStepsModalUtils = useMissingStepsModal({
     attachedModules,
     runStatus,
-    missingSetupSteps,
+    runId,
     handleProceedToRunClick,
   })
 

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/__tests__/ProtocolRunHeader.test.tsx

@@ -30,6 +30,7 @@ vi.mock('react-router-dom')
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/redux-resources/robots')
 vi.mock('/app/resources/runs')
+vi.mock('/app/redux/protocol-runs')
 vi.mock('../RunHeaderModalContainer')
 vi.mock('../RunHeaderBannerContainer')
 vi.mock('../RunHeaderContent')
@@ -51,7 +52,6 @@ describe('ProtocolRunHeader', () => {
       robotName: MOCK_ROBOT,
       runId: MOCK_RUN_ID,
       makeHandleJumpToStep: vi.fn(),
-      missingSetupSteps: [],
     }
 
     vi.mocked(useNavigate).mockReturnValue(mockNavigate)

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/index.tsx

@@ -35,7 +35,6 @@ export interface ProtocolRunHeaderProps {
   robotName: string
   runId: string
   makeHandleJumpToStep: (index: number) => () => void
-  missingSetupSteps: string[]
 }
 
 export function ProtocolRunHeader(