fix(app): invalidate OT2 calibration queries when calibration flows complete (#13809)

Ensure that all queries for /calibration endpoints (OT2 only) are invalidated upon completion of any
of the three OT2 calibration flows.

Closes RQA-1814

Co-authored-by: Shlok Amin <[email protected]>

Author: b-cooper

app/src/organisms/CalibrateDeck/index.tsx

@@ -1,7 +1,9 @@
 // Deck Calibration Orchestration Component
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { useQueryClient } from 'react-query'
 
+import { useHost } from '@opentrons/react-api-client'
 import { getPipetteModelSpecs } from '@opentrons/shared-data'
 import { useConditionalConfirm } from '@opentrons/components'
 
@@ -71,6 +73,9 @@ export function CalibrateDeck(
   const { currentStep, instrument, labware, supportedCommands } =
     session?.details || {}
 
+  const queryClient = useQueryClient()
+  const host = useHost()
+
   const {
     showConfirmation: showConfirmExit,
     confirm: confirmExit,
@@ -97,6 +102,11 @@ export function CalibrateDeck(
   }
 
   function cleanUpAndExit(): void {
+    queryClient
+      .invalidateQueries([host, 'calibration'])
+      .catch((e: Error) =>
+        console.error(`error invalidating calibration queries: ${e.message}`)
+      )
     if (
       exitBeforeDeckConfigCompletion &&
       currentStep !== Sessions.DECK_STEP_CALIBRATION_COMPLETE

app/src/organisms/CalibratePipetteOffset/index.tsx

@@ -1,7 +1,9 @@
 // Pipette Offset Calibration Orchestration Component
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { useQueryClient } from 'react-query'
 
+import { useHost } from '@opentrons/react-api-client'
 import { getPipetteModelSpecs } from '@opentrons/shared-data'
 import { useConditionalConfirm } from '@opentrons/components'
 
@@ -60,6 +62,9 @@ export function CalibratePipetteOffset(
   const { currentStep, instrument, labware, supportedCommands } =
     session?.details ?? {}
 
+  const queryClient = useQueryClient()
+  const host = useHost()
+
   const {
     showConfirmation: showConfirmExit,
     confirm: confirmExit,
@@ -92,6 +97,11 @@ export function CalibratePipetteOffset(
   }
 
   function cleanUpAndExit(): void {
+    queryClient
+      .invalidateQueries([host, 'calibration'])
+      .catch((e: Error) =>
+        console.error(`error invalidating calibration queries: ${e.message}`)
+      )
     if (session?.id != null) {
       dispatchRequests(
         Sessions.createSessionCommand(robotName, session.id, {

app/src/organisms/CalibrateTipLength/index.tsx

@@ -1,8 +1,10 @@
 // Tip Length Calibration Orchestration Component
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { useQueryClient } from 'react-query'
 import { css } from 'styled-components'
 
+import { useHost } from '@opentrons/react-api-client'
 import { getPipetteModelSpecs } from '@opentrons/shared-data'
 import { useConditionalConfirm } from '@opentrons/components'
 
@@ -72,6 +74,9 @@ export function CalibrateTipLength(
   } = props
   const { currentStep, instrument, labware } = session?.details ?? {}
 
+  const queryClient = useQueryClient()
+  const host = useHost()
+
   const isMulti = React.useMemo(() => {
     const spec =
       instrument != null ? getPipetteModelSpecs(instrument.model) : null
@@ -96,6 +101,11 @@ export function CalibrateTipLength(
   }
 
   function cleanUpAndExit(): void {
+    queryClient
+      .invalidateQueries([host, 'calibration'])
+      .catch((e: Error) =>
+        console.error(`error invalidating calibration queries: ${e.message}`)
+      )
     if (session?.id != null) {
       dispatchRequests(
         Sessions.createSessionCommand(robotName, session.id, {

components/src/testing/utils/mountWithProviders.tsx

@@ -2,6 +2,7 @@ import assert from 'assert'
 import * as React from 'react'
 import { I18nextProvider } from 'react-i18next'
 import { Provider } from 'react-redux'
+import { QueryClient, QueryClientProvider } from 'react-query'
 import { mount } from 'enzyme'
 
 import type { Store } from 'redux'
@@ -33,6 +34,8 @@ export function mountWithProviders<Element, State, Action>(
     dispatch: jest.fn(),
   }
 
+  const queryClient = new QueryClient()
+
   const I18nWrapper: React.ElementType<
     React.ComponentProps<typeof I18nextProvider>
   > = provideI18n
@@ -67,7 +70,9 @@ export function mountWithProviders<Element, State, Action>(
     i18n: React.ComponentProps<typeof I18nextProvider>['i18n']
   }): JSX.Element => (
     <StateWrapper store={store}>
-      <I18nWrapper i18n={i18n}>{children}</I18nWrapper>
+      <QueryClientProvider client={queryClient}>
+        <I18nWrapper i18n={i18n}>{children}</I18nWrapper>
+      </QueryClientProvider>
     </StateWrapper>
   )
 

components/src/testing/utils/mountWithStore.ts renamed to components/src/testing/utils/mountWithStore.tsx

@@ -1,6 +1,7 @@
 import assert from 'assert'
 import * as React from 'react'
 import { Provider } from 'react-redux'
+import { QueryClient, QueryClientProvider } from 'react-query'
 import { mount } from 'enzyme'
 
 import type { ReactWrapper } from 'enzyme'
@@ -35,9 +36,27 @@ export function mountWithStore<Props, State = {}, Action = {}>(
     dispatch: jest.fn(),
   }
 
+  const queryClient = new QueryClient()
+
+  const BaseProviders = ({
+    children,
+    store,
+    queryClient,
+  }: {
+    children: React.ReactNode
+    store: any
+    queryClient: any
+  }): JSX.Element => {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <Provider store={store as any}>{children}</Provider>
+      </QueryClientProvider>
+    )
+  }
+
   const wrapper = mount<Props>(node, {
-    wrappingComponent: Provider,
-    wrappingComponentProps: { store },
+    wrappingComponent: BaseProviders,
+    wrappingComponentProps: { store, queryClient },
   })
 
   // force a re-render by returning a new state to recalculate selectors

components/src/testing/utils/renderWithProviders.tsx

@@ -31,16 +31,17 @@ export function renderWithProviders<State>(
   const ProviderWrapper: React.ComponentType<React.PropsWithChildren<{}>> = ({
     children,
   }) => {
+    const BaseWrapper = (
+      <QueryClientProvider client={queryClient}>
+        <Provider store={store}>{children}</Provider>
+      </QueryClientProvider>
+    )
     if (i18nInstance != null) {
       return (
-        <I18nextProvider i18n={i18nInstance}>
-          <QueryClientProvider client={queryClient}>
-            <Provider store={store}>{children}</Provider>
-          </QueryClientProvider>
-        </I18nextProvider>
+        <I18nextProvider i18n={i18nInstance}>{BaseWrapper}</I18nextProvider>
       )
     } else {
-      return <Provider store={store}>{children}</Provider>
+      return BaseWrapper
     }
   }