fix(app): Fix run setup buttons (#16796)

Closes RQA-3578 and RQA-3577

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

@@ -3,6 +3,8 @@ import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
 import { when } from 'vitest-when'
 
+import { useHoverTooltip } from '@opentrons/components'
+
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { useLPCSuccessToast } from '../../../hooks/useLPCSuccessToast'
@@ -20,6 +22,13 @@ import {
   useUnmatchedModulesForProtocol,
 } from '/app/resources/runs'
 
+vi.mock('@opentrons/components', async () => {
+  const actual = await vi.importActual('@opentrons/components')
+  return {
+    ...actual,
+    useHoverTooltip: vi.fn(),
+  }
+})
 vi.mock('../SetupLabwareList')
 vi.mock('../SetupLabwareMap')
 vi.mock('/app/organisms/LabwarePositionCheck')
@@ -78,7 +87,6 @@ describe('SetupLabware', () => {
       .thenReturn({
         complete: true,
       })
-    when(vi.mocked(useRunHasStarted)).calledWith(RUN_ID).thenReturn(false)
     vi.mocked(getIsLabwareOffsetCodeSnippetsOn).mockReturnValue(false)
     vi.mocked(SetupLabwareMap).mockReturnValue(
       <div>mock setup labware map</div>
@@ -88,6 +96,8 @@ describe('SetupLabware', () => {
     )
     vi.mocked(useLPCDisabledReason).mockReturnValue(null)
     vi.mocked(useNotifyRunQuery).mockReturnValue({} as any)
+    vi.mocked(useHoverTooltip).mockReturnValue([{}, {}] as any)
+    vi.mocked(useRunHasStarted).mockReturnValue(false)
   })
 
   afterEach(() => {
@@ -98,8 +108,21 @@ describe('SetupLabware', () => {
     render()
     screen.getByText('mock setup labware list')
     screen.getByRole('button', { name: 'List View' })
+    screen.getByRole('button', { name: 'Confirm placements' })
     const mapView = screen.getByRole('button', { name: 'Map View' })
     fireEvent.click(mapView)
     screen.getByText('mock setup labware map')
   })
+
+  it('disables the confirmation button if the run has already started', () => {
+    vi.mocked(useRunHasStarted).mockReturnValue(true)
+
+    render()
+
+    const btn = screen.getByRole('button', {
+      name: 'Confirm placements',
+    })
+
+    expect(btn).toBeDisabled()
+  })
 })

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

@@ -1,17 +1,22 @@
 import { useTranslation } from 'react-i18next'
 import map from 'lodash/map'
+
 import {
   JUSTIFY_CENTER,
   Flex,
   SPACING,
   PrimaryButton,
   DIRECTION_COLUMN,
+  Tooltip,
+  useHoverTooltip,
 } from '@opentrons/components'
+
 import { useToggleGroup } from '/app/molecules/ToggleGroup/useToggleGroup'
 import { getModuleTypesThatRequireExtraAttention } from '../utils/getModuleTypesThatRequireExtraAttention'
 import {
   useMostRecentCompletedAnalysis,
   useModuleRenderInfoForProtocolById,
+  useRunHasStarted,
 } from '/app/resources/runs'
 import { useIsFlex } from '/app/redux-resources/robots'
 import { useStoredProtocolAnalysis } from '/app/resources/analysis'
@@ -46,6 +51,11 @@ export function SetupLabware(props: SetupLabwareProps): JSX.Element {
     moduleModels
   )
 
+  // TODO(jh, 11-13-24): These disabled tooltips are used throughout setup flows. Let's consolidate them.
+  const [targetProps, tooltipProps] = useHoverTooltip()
+  const runHasStarted = useRunHasStarted(runId)
+  const tooltipText = runHasStarted ? t('protocol_run_started') : null
+
   return (
     <>
       <Flex
@@ -70,10 +80,14 @@ export function SetupLabware(props: SetupLabwareProps): JSX.Element {
           onClick={() => {
             setLabwareConfirmed(true)
           }}
-          disabled={labwareConfirmed}
+          disabled={labwareConfirmed || runHasStarted}
+          {...targetProps}
         >
           {t('confirm_placements')}
         </PrimaryButton>
+        {tooltipText != null ? (
+          <Tooltip tooltipProps={tooltipProps}>{tooltipText}</Tooltip>
+        ) : null}
       </Flex>
     </>
   )

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

@@ -143,7 +143,6 @@ export function SetupLabwarePositionCheck(
         ) : null}
         <PrimaryButton
           textTransform={TYPOGRAPHY.textTransformCapitalize}
-          title={t('run_labware_position_check')}
           onClick={() => {
             launchLPC()
             setIsShowingLPCSuccessToast(false)

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

@@ -1,15 +1,26 @@
 import type * as React from 'react'
-import { describe, it, beforeEach, vi } from 'vitest'
+import { describe, it, beforeEach, vi, expect } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 
+import { useHoverTooltip } from '@opentrons/components'
+
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { SetupLiquids } from '../index'
 import { SetupLiquidsList } from '../SetupLiquidsList'
 import { SetupLiquidsMap } from '../SetupLiquidsMap'
+import { useRunHasStarted } from '/app/resources/runs'
 
+vi.mock('@opentrons/components', async () => {
+  const actual = await vi.importActual('@opentrons/components')
+  return {
+    ...actual,
+    useHoverTooltip: vi.fn(),
+  }
+})
 vi.mock('../SetupLiquidsList')
 vi.mock('../SetupLiquidsMap')
+vi.mock('/app/resources/runs')
 
 describe('SetupLiquids', () => {
   const render = (
@@ -44,6 +55,8 @@ describe('SetupLiquids', () => {
     vi.mocked(SetupLiquidsMap).mockReturnValue(
       <div>Mock setup liquids map</div>
     )
+    vi.mocked(useHoverTooltip).mockReturnValue([{}, {}] as any)
+    vi.mocked(useRunHasStarted).mockReturnValue(false)
   })
 
   it('renders the list and map view buttons and proceed button', () => {
@@ -64,4 +77,15 @@ describe('SetupLiquids', () => {
     fireEvent.click(mapViewButton)
     screen.getByText('Mock setup liquids list')
   })
+  it('disables the confirmation button if the run has already started', () => {
+    vi.mocked(useRunHasStarted).mockReturnValue(true)
+
+    render(props)
+
+    const btn = screen.getByRole('button', {
+      name: 'Confirm locations and volumes',
+    })
+
+    expect(btn).toBeDisabled()
+  })
 })

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

@@ -6,11 +6,14 @@ import {
   DIRECTION_COLUMN,
   ALIGN_CENTER,
   PrimaryButton,
+  useHoverTooltip,
+  Tooltip,
 } from '@opentrons/components'
 import { useToggleGroup } from '/app/molecules/ToggleGroup/useToggleGroup'
 import { ANALYTICS_LIQUID_SETUP_VIEW_TOGGLE } from '/app/redux/analytics'
 import { SetupLiquidsList } from './SetupLiquidsList'
 import { SetupLiquidsMap } from './SetupLiquidsMap'
+import { useRunHasStarted } from '/app/resources/runs'
 
 import type {
   CompletedProtocolAnalysis,
@@ -38,6 +41,12 @@ export function SetupLiquids({
     t('map_view') as string,
     ANALYTICS_LIQUID_SETUP_VIEW_TOGGLE
   )
+
+  // TODO(jh, 11-13-24): These disabled tooltips are used throughout setup flows. Let's consolidate them.
+  const [targetProps, tooltipProps] = useHoverTooltip()
+  const runHasStarted = useRunHasStarted(runId)
+  const tooltipText = runHasStarted ? t('protocol_run_started') : null
+
   return (
     <Flex
       flexDirection={DIRECTION_COLUMN}
@@ -56,10 +65,14 @@ export function SetupLiquids({
           onClick={() => {
             setLiquidSetupConfirmed(true)
           }}
-          disabled={isLiquidSetupConfirmed}
+          disabled={isLiquidSetupConfirmed || runHasStarted}
+          {...targetProps}
         >
           {t('confirm_locations_and_volumes')}
         </PrimaryButton>
+        {tooltipText != null ? (
+          <Tooltip tooltipProps={tooltipProps}>{tooltipText}</Tooltip>
+        ) : null}
       </Flex>
     </Flex>
   )