refactor(app): load modules to retrieve moduleId for run setup module controls

app/src/organisms/Devices/HeaterShakerWizard/TestShake.tsx

@@ -1,6 +1,9 @@
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { useCreateLiveCommandMutation } from '@opentrons/react-api-client'
+import {
+  useCreateCommandMutation,
+  useCreateLiveCommandMutation,
+} from '@opentrons/react-api-client'
 import {
   ALIGN_CENTER,
   ALIGN_FLEX_START,
@@ -23,6 +26,7 @@ import { InputField } from '../../../atoms/InputField'
 import { Collapsible } from '../ModuleCard/Collapsible'
 import { useLatchControls } from '../ModuleCard/hooks'
 import { HeaterShakerModuleCard } from './HeaterShakerModuleCard'
+import { useModuleIdFromRun } from '../ModuleCard/useModuleIdFromRun'
 
 import type { HeaterShakerModule } from '../../../redux/modules/types'
 import type {
@@ -35,35 +39,52 @@ interface TestShakeProps {
   module: HeaterShakerModule
   setCurrentPage: React.Dispatch<React.SetStateAction<number>>
   moduleFromProtocol?: ProtocolModuleInfo
+  runId?: string
 }
 
 export function TestShake(props: TestShakeProps): JSX.Element {
-  const { module, setCurrentPage, moduleFromProtocol } = props
+  const { module, setCurrentPage, moduleFromProtocol, runId } = props
   const { t } = useTranslation(['heater_shaker', 'device_details'])
   const { createLiveCommand } = useCreateLiveCommandMutation()
+  const { createCommand } = useCreateCommandMutation()
   const [isExpanded, setExpanded] = React.useState(false)
   const [shakeValue, setShakeValue] = React.useState<string | null>(null)
   const [targetProps, tooltipProps] = useHoverTooltip()
-  const { toggleLatch, isLatchClosed } = useLatchControls(module)
+  const { toggleLatch, isLatchClosed } = useLatchControls(module, runId)
+  const { moduleIdFromRun } = useModuleIdFromRun(
+    module,
+    runId != null ? runId : null
+  )
   const isShaking = module.data.speedStatus !== 'idle'
 
   const setShakeCommand: HeaterShakerSetTargetShakeSpeedCreateCommand = {
     commandType: 'heaterShakerModule/setTargetShakeSpeed',
     params: {
-      moduleId: module.id,
+      moduleId: runId != null ? moduleIdFromRun : module.id,
       rpm: shakeValue !== null ? parseInt(shakeValue) : 0,
     },
   }
 
   const stopShakeCommand: HeaterShakerStopShakeCreateCommand = {
     commandType: 'heaterShakerModule/stopShake',
     params: {
-      moduleId: module.id,
+      moduleId: runId != null ? moduleIdFromRun : module.id,
     },
   }
 
   const handleShakeCommand = (): void => {
-    if (shakeValue !== null) {
+    if (runId != null) {
+      createCommand({
+        runId: runId,
+        command: isShaking ? stopShakeCommand : setShakeCommand,
+      }).catch((e: Error) => {
+        console.error(
+          `error setting module status with command type ${
+            stopShakeCommand.commandType ?? setShakeCommand.commandType
+          } and run id ${runId}: ${e.message}`
+        )
+      })
+    } else {
       createLiveCommand({
         command: isShaking ? stopShakeCommand : setShakeCommand,
       }).catch((e: Error) => {
@@ -184,7 +205,7 @@ export function TestShake(props: TestShakeProps): JSX.Element {
             marginLeft={SIZE_AUTO}
             marginTop={SPACING.spacing4}
             onClick={handleShakeCommand}
-            disabled={!isLatchClosed}
+            disabled={!isLatchClosed || (shakeValue === null && !isShaking)}
             {...targetProps}
           >
             {isShaking ? t('stop_shaking') : t('start_shaking')}

app/src/organisms/Devices/HeaterShakerWizard/__tests__/TestShake.test.tsx

@@ -1,29 +1,40 @@
 import * as React from 'react'
 import { nestedTextMatcher, renderWithProviders } from '@opentrons/components'
 import { fireEvent } from '@testing-library/react'
-import { useCreateLiveCommandMutation } from '@opentrons/react-api-client'
+import {
+  useCreateCommandMutation,
+  useCreateLiveCommandMutation,
+} from '@opentrons/react-api-client'
 import { i18n } from '../../../../i18n'
 import { useLatchControls } from '../../ModuleCard/hooks'
 import { TestShake } from '../TestShake'
 import { HeaterShakerModuleCard } from '../HeaterShakerModuleCard'
 import heaterShakerCommands from '@opentrons/shared-data/protocol/fixtures/6/heaterShakerCommands.json'
 import { mockHeaterShaker } from '../../../../redux/modules/__fixtures__'
+import { useModuleIdFromRun } from '../../ModuleCard/useModuleIdFromRun'
 
 import type { ProtocolModuleInfo } from '../../../Devices/ProtocolRun/utils/getProtocolModulesInfo'
 
 jest.mock('@opentrons/react-api-client')
 jest.mock('../HeaterShakerModuleCard')
 jest.mock('../../ModuleCard/hooks')
+jest.mock('../../ModuleCard/useModuleIdFromRun')
 
 const mockUseLiveCommandMutation = useCreateLiveCommandMutation as jest.MockedFunction<
   typeof useCreateLiveCommandMutation
 >
+const mockUseCommandMutation = useCreateCommandMutation as jest.MockedFunction<
+  typeof useCreateCommandMutation
+>
 const mockUseLatchControls = useLatchControls as jest.MockedFunction<
   typeof useLatchControls
 >
 const mockHeaterShakerModuleCard = HeaterShakerModuleCard as jest.MockedFunction<
   typeof HeaterShakerModuleCard
 >
+const mockUseModuleIdFromRun = useModuleIdFromRun as jest.MockedFunction<
+  typeof useModuleIdFromRun
+>
 
 const render = (props: React.ComponentProps<typeof TestShake>) => {
   return renderWithProviders(<TestShake {...props} />, {
@@ -113,6 +124,7 @@ const mockMovingHeaterShaker = {
 describe('TestShake', () => {
   let props: React.ComponentProps<typeof TestShake>
   let mockCreateLiveCommand = jest.fn()
+  let mockCreateCommand = jest.fn()
   beforeEach(() => {
     props = {
       setCurrentPage: jest.fn(),
@@ -124,13 +136,20 @@ describe('TestShake', () => {
     mockUseLiveCommandMutation.mockReturnValue({
       createLiveCommand: mockCreateLiveCommand,
     } as any)
+    mockCreateCommand = jest.fn()
+    mockUseCommandMutation.mockReturnValue({
+      createCommand: mockCreateCommand,
+    } as any)
     mockHeaterShakerModuleCard.mockReturnValue(
       <div>Mock Heater Shaker Module Card</div>
     )
     mockUseLatchControls.mockReturnValue({
       handleLatch: jest.fn(),
       isLatchClosed: true,
     } as any)
+    mockUseModuleIdFromRun.mockReturnValue({
+      moduleIdFromRun: 'heatershaker_id',
+    })
   })
   it('renders the correct title', () => {
     const { getByText } = render(props)
@@ -191,7 +210,7 @@ describe('TestShake', () => {
 
     const { getByRole } = render(props)
     const button = getByRole('button', { name: /Start Shaking/i })
-    expect(button).toBeEnabled()
+    expect(button).toBeDisabled()
   })
 
   it('renders an input field for speed setting', () => {

app/src/organisms/Devices/HeaterShakerWizard/index.tsx

@@ -30,12 +30,13 @@ import type { ProtocolModuleInfo } from '../../Devices/ProtocolRun/utils/getProt
 interface HeaterShakerWizardProps {
   onCloseClick: () => unknown
   moduleFromProtocol?: ProtocolModuleInfo
+  runId?: string
 }
 
 export const HeaterShakerWizard = (
   props: HeaterShakerWizardProps
 ): JSX.Element | null => {
-  const { onCloseClick, moduleFromProtocol } = props
+  const { onCloseClick, moduleFromProtocol, runId } = props
   const { t } = useTranslation(['heater_shaker', 'shared'])
   const [currentPage, setCurrentPage] = React.useState(0)
   const { robotName } = useParams<NavRouteParams>()
@@ -99,6 +100,7 @@ export const HeaterShakerWizard = (
               module={heaterShaker}
               setCurrentPage={setCurrentPage}
               moduleFromProtocol={moduleFromProtocol}
+              runId={runId}
             />
           ) : null
         )

app/src/organisms/Devices/ModuleCard/HeaterShakerSlideout.tsx

@@ -25,6 +25,7 @@ import {
   TYPOGRAPHY,
   useConditionalConfirm,
 } from '@opentrons/components'
+import { useModuleIdFromRun } from './useModuleIdFromRun'
 import { PrimaryButton } from '../../../atoms/buttons'
 import { getIsHeaterShakerAttached } from '../../../redux/config'
 import { InputField } from '../../../atoms/InputField'
@@ -54,14 +55,18 @@ export const HeaterShakerSlideout = (
   const { createCommand } = useCreateCommandMutation()
   const moduleName = getModuleDisplayName(module.moduleModel)
   const configHasHeaterShakerAttached = useSelector(getIsHeaterShakerAttached)
+  const { moduleIdFromRun } = useModuleIdFromRun(
+    module,
+    runId != null ? runId : null
+  )
   const modulePart = isSetShake ? t('shake_speed') : t('temperature')
 
   const sendShakeSpeedCommand = (): void => {
     if (hsValue != null && isSetShake) {
       const setShakeCommand: HeaterShakerSetTargetShakeSpeedCreateCommand = {
         commandType: 'heaterShakerModule/setTargetShakeSpeed',
         params: {
-          moduleId: module.id,
+          moduleId: runId != null ? moduleIdFromRun : module.id,
           rpm: parseInt(hsValue),
         },
       }
@@ -98,7 +103,7 @@ export const HeaterShakerSlideout = (
       const setTempCommand: HeaterShakerStartSetTargetTemperatureCreateCommand = {
         commandType: 'heaterShakerModule/startSetTargetTemperature',
         params: {
-          moduleId: module.id,
+          moduleId: runId != null ? moduleIdFromRun : module.id,
           // @ts-expect-error TODO: remove this after https://github.com/Opentrons/opentrons/pull/10182 merges
           temperature: parseInt(hsValue),
         },

app/src/organisms/Devices/ModuleCard/MagneticModuleSlideout.tsx

@@ -4,6 +4,7 @@ import {
   useCreateCommandMutation,
   useCreateLiveCommandMutation,
 } from '@opentrons/react-api-client'
+import { useModuleIdFromRun } from './useModuleIdFromRun'
 import {
   Flex,
   Text,
@@ -80,6 +81,10 @@ export const MagneticModuleSlideout = (
   const [engageHeightValue, setEngageHeightValue] = React.useState<
     string | null
   >(null)
+  const { moduleIdFromRun } = useModuleIdFromRun(
+    module,
+    runId != null ? runId : null
+  )
 
   const moduleName = getModuleDisplayName(module.moduleModel)
   const info = getInfoByModel(module.moduleModel)
@@ -114,7 +119,7 @@ export const MagneticModuleSlideout = (
       const setEngageCommand: MagneticModuleEngageMagnetCreateCommand = {
         commandType: 'magneticModule/engage',
         params: {
-          moduleId: module.id,
+          moduleId: runId != null ? moduleIdFromRun : module.id,
           height: parseInt(engageHeightValue),
         },
       }

app/src/organisms/Devices/ModuleCard/ModuleOverflowMenu.tsx

@@ -30,6 +30,7 @@ export const ModuleOverflowMenu = (
     handleTestShakeClick,
     handleWizardClick,
   } = props
+
   const [targetProps, tooltipProps] = useHoverTooltip()
   const { menuOverflowItemsByModuleType } = useModuleOverflowMenu(
     module,

app/src/organisms/Devices/ModuleCard/TemperatureModuleData.tsx

@@ -62,7 +62,7 @@ export const TemperatureModuleData = (
         data-testid={`temp_module_data`}
       >
         <Text marginBottom={SPACING.spacing1}>
-          {t(targetTemp === null ? 'na_temp' : 'target_temp', {
+          {t(targetTemp == null ? 'na_temp' : 'target_temp', {
             temp: targetTemp,
           })}
         </Text>

app/src/organisms/Devices/ModuleCard/TemperatureModuleSlideout.tsx

@@ -19,6 +19,7 @@ import {
   TEMP_MAX,
   TEMP_MIN,
 } from '@opentrons/shared-data'
+import { useModuleIdFromRun } from './useModuleIdFromRun'
 import { Slideout } from '../../../atoms/Slideout'
 import { PrimaryButton } from '../../../atoms/buttons'
 import { InputField } from '../../../atoms/InputField'
@@ -40,6 +41,10 @@ export const TemperatureModuleSlideout = (
   const { t } = useTranslation('device_details')
   const { createLiveCommand } = useCreateLiveCommandMutation()
   const { createCommand } = useCreateCommandMutation()
+  const { moduleIdFromRun } = useModuleIdFromRun(
+    module,
+    runId != null ? runId : null
+  )
   const name = getModuleDisplayName(module.moduleModel)
   const [temperatureValue, setTemperatureValue] = React.useState<string | null>(
     null
@@ -50,7 +55,7 @@ export const TemperatureModuleSlideout = (
       const saveTempCommand: TemperatureModuleSetTargetTemperatureCreateCommand = {
         commandType: 'temperatureModule/setTargetTemperature',
         params: {
-          moduleId: module.id,
+          moduleId: runId != null ? moduleIdFromRun : module.id,
           celsius: parseInt(temperatureValue),
         },
       }

app/src/organisms/Devices/ModuleCard/TestShakeSlideout.tsx

@@ -35,6 +35,7 @@ import { InputField } from '../../../atoms/InputField'
 import { Tooltip } from '../../../atoms/Tooltip'
 import { HeaterShakerWizard } from '../HeaterShakerWizard'
 import { useLatchControls } from './hooks'
+import { useModuleIdFromRun } from './useModuleIdFromRun'
 import { Collapsible } from './Collapsible'
 
 import type { HeaterShakerModule } from '../../../redux/modules/types'
@@ -60,6 +61,10 @@ export const TestShakeSlideout = (
   const name = getModuleDisplayName(module.moduleModel)
   const [targetProps, tooltipProps] = useHoverTooltip()
   const { toggleLatch, isLatchClosed } = useLatchControls(module, runId)
+  const { moduleIdFromRun } = useModuleIdFromRun(
+    module,
+    runId != null ? runId : null
+  )
 
   const [showCollapsed, setShowCollapsed] = React.useState(false)
   const [shakeValue, setShakeValue] = React.useState<string | null>(null)
@@ -69,42 +74,40 @@ export const TestShakeSlideout = (
   const setShakeCommand: HeaterShakerSetTargetShakeSpeedCreateCommand = {
     commandType: 'heaterShakerModule/setTargetShakeSpeed',
     params: {
-      moduleId: module.id,
+      moduleId: runId != null ? moduleIdFromRun : module.id,
       rpm: shakeValue !== null ? parseInt(shakeValue) : 0,
     },
   }
 
   const stopShakeCommand: HeaterShakerStopShakeCreateCommand = {
     commandType: 'heaterShakerModule/stopShake',
     params: {
-      moduleId: module.id,
+      moduleId: runId != null ? moduleIdFromRun : module.id,
     },
   }
 
   const handleShakeCommand = (): void => {
-    if (shakeValue !== null) {
-      if (runId != null) {
-        createCommand({
-          runId: runId,
-          command: isShaking ? stopShakeCommand : setShakeCommand,
-        }).catch((e: Error) => {
-          console.error(
-            `error setting module status with command type ${
-              stopShakeCommand.commandType ?? setShakeCommand.commandType
-            }: ${e.message}`
-          )
-        })
-      } else {
-        createLiveCommand({
-          command: isShaking ? stopShakeCommand : setShakeCommand,
-        }).catch((e: Error) => {
-          console.error(
-            `error setting module status with command type ${
-              stopShakeCommand.commandType ?? setShakeCommand.commandType
-            }: ${e.message}`
-          )
-        })
-      }
+    if (runId != null) {
+      createCommand({
+        runId: runId,
+        command: isShaking ? stopShakeCommand : setShakeCommand,
+      }).catch((e: Error) => {
+        console.error(
+          `error setting module status with command type ${
+            stopShakeCommand.commandType ?? setShakeCommand.commandType
+          }: ${e.message}`
+        )
+      })
+    } else {
+      createLiveCommand({
+        command: isShaking ? stopShakeCommand : setShakeCommand,
+      }).catch((e: Error) => {
+        console.error(
+          `error setting module status with command type ${
+            stopShakeCommand.commandType ?? setShakeCommand.commandType
+          }: ${e.message}`
+        )
+      })
     }
     setShakeValue(null)
   }
@@ -249,7 +252,7 @@ export const TestShakeSlideout = (
             marginTop={SPACING.spacing3}
             paddingX={SPACING.spacing4}
             onClick={handleShakeCommand}
-            disabled={!isLatchClosed}
+            disabled={!isLatchClosed || (shakeValue === null && !isShaking)}
             {...targetProps}
           >
             {isShaking