fix(app): invalidate OT2 calibration queries when calibration flows c…

…omplete (#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]>
Opentrons · Oct 18, 2023 · 692888c · 692888c
1 parent 855ec92
commit 692888c
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 9 deletions.
diff --git a/app/src/organisms/CalibrateDeck/index.tsx b/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

diff --git a/app/src/organisms/CalibratePipetteOffset/index.tsx b/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, {

diff --git a/app/src/organisms/CalibrateTipLength/index.tsx b/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, {

diff --git a/components/src/testing/utils/mountWithProviders.tsx b/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>
  )
 

diff --git a/...nents/src/testing/utils/mountWithStore.ts → ...ents/src/testing/utils/mountWithStore.tsx b/...nents/src/testing/utils/mountWithStore.ts → ...ents/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

diff --git a/components/src/testing/utils/renderWithProviders.tsx b/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
  }
  }