ref: Migrate useOktaConfig to TSQ V5 (#3683)

src/pages/AccountSettings/tabs/OktaAccess/OktaAccess.test.tsx

@@ -1,4 +1,8 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+} from '@tanstack/react-queryV5'
 import { render, screen } from '@testing-library/react'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
@@ -10,15 +14,20 @@ import OktaAccess from './OktaAccess'
 const queryClient = new QueryClient({
   defaultOptions: { queries: { suspense: true, retry: false } },
 })
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
 
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter initialEntries={['/account/gh/codecov/okta-access/']}>
-      <Route path="/account/:provider/:owner/okta-access/">
-        <Suspense fallback={null}>{children}</Suspense>
-      </Route>
-    </MemoryRouter>
-  </QueryClientProvider>
+  <QueryClientProviderV5 client={queryClientV5}>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={['/account/gh/codecov/okta-access/']}>
+        <Route path="/account/:provider/:owner/okta-access/">
+          <Suspense fallback={null}>{children}</Suspense>
+        </Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
 const server = setupServer()
@@ -28,6 +37,7 @@ beforeAll(() => {
 
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 

src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.test.tsx

@@ -1,4 +1,8 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+} from '@tanstack/react-queryV5'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { graphql, HttpResponse } from 'msw'
@@ -8,44 +12,60 @@ import { MemoryRouter, Route } from 'react-router-dom'
 
 import { OktaConfigForm } from './OktaConfigForm'
 
+const oktaConfigMock = (isEnabled: boolean, isEnforced: boolean) => ({
+  enabled: isEnabled,
+  enforced: isEnforced,
+  url: 'https://okta.com',
+  clientId: 'clientId',
+  clientSecret: 'clientSecret',
+})
+
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
-const server = setupServer()
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <QueryClientProviderV5 client={queryClientV5}>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={['/account/gh/codecov/okta-access/']}>
+        <Route path="/account/:provider/:owner/okta-access/">
+          <Suspense fallback={null}>{children}</Suspense>
+        </Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  </QueryClientProviderV5>
+)
 
+const server = setupServer()
 beforeAll(() => {
   server.listen()
 })
 
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 
 afterAll(() => {
   server.close()
 })
 
-const oktaConfigMock = {
-  enabled: true,
-  enforced: true,
-  url: 'https://okta.com',
-  clientId: 'clientId',
-  clientSecret: 'clientSecret',
+interface SetupArgs {
+  isEnabled?: boolean
+  isEnforced?: boolean
 }
 
-const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter initialEntries={['/account/gh/codecov/okta-access/']}>
-      <Route path="/account/:provider/:owner/okta-access/">
-        <Suspense fallback={null}>{children}</Suspense>
-      </Route>
-    </MemoryRouter>
-  </QueryClientProvider>
-)
-
 describe('OktaConfigForm', () => {
-  function setup() {
+  function setup(
+    { isEnabled = true, isEnforced = true }: SetupArgs = {
+      isEnabled: true,
+      isEnforced: true,
+    }
+  ) {
     const user = userEvent.setup()
     const mutate = vi.fn()
 
@@ -56,7 +76,7 @@ describe('OktaConfigForm', () => {
             owner: {
               isUserOktaAuthenticated: true,
               account: {
-                oktaConfig: oktaConfigMock,
+                oktaConfig: oktaConfigMock(isEnabled, isEnforced),
               },
             },
           },
@@ -180,7 +200,7 @@ describe('OktaConfigForm', () => {
   })
 
   it('should toggle Okta Sync Enabled on', async () => {
-    const { user } = setup()
+    const { user } = setup({ isEnabled: false, isEnforced: false })
     render(<OktaConfigForm />, { wrapper })
 
     const oktaSyncEnabledToggle = await screen.findByRole('button', {
@@ -190,11 +210,13 @@ describe('OktaConfigForm', () => {
     expect(oktaSyncEnabledToggle).toHaveClass('bg-toggle-inactive')
 
     await user.click(oktaSyncEnabledToggle)
-    expect(oktaSyncEnabledToggle).toHaveClass('bg-toggle-active')
+    await waitFor(() =>
+      expect(oktaSyncEnabledToggle).toHaveClass('bg-toggle-active')
+    )
   })
 
   it('should toggle Okta Login Enforce on', async () => {
-    const { user } = setup()
+    const { user } = setup({ isEnabled: false, isEnforced: false })
     render(<OktaConfigForm />, { wrapper })
 
     const oktaLoginEnforceToggle = await screen.findByRole('button', {
@@ -204,11 +226,13 @@ describe('OktaConfigForm', () => {
     expect(oktaLoginEnforceToggle).toHaveClass('bg-toggle-inactive')
 
     await user.click(oktaLoginEnforceToggle)
-    expect(oktaLoginEnforceToggle).toHaveClass('bg-toggle-active')
+    await waitFor(() =>
+      expect(oktaLoginEnforceToggle).toHaveClass('bg-toggle-active')
+    )
   })
 
   it('toggles enabled on when enforced is on', async () => {
-    const { user } = setup()
+    const { user } = setup({ isEnabled: false, isEnforced: false })
     render(<OktaConfigForm />, { wrapper })
 
     const oktaLoginEnforceToggle = await screen.findByRole('button', {
@@ -226,7 +250,7 @@ describe('OktaConfigForm', () => {
   })
 
   it('disables enforce toggle when enabled is off', async () => {
-    const { user } = setup()
+    const { user } = setup({ isEnabled: false, isEnforced: false })
     render(<OktaConfigForm />, { wrapper })
 
     const oktaSyncEnabledToggle = await screen.findByRole('button', {
@@ -299,9 +323,7 @@ describe('OktaConfigForm', () => {
       const oktaSyncEnabledToggle = await screen.findByRole('button', {
         name: /Okta Sync Enabled/,
       })
-      await waitFor(() => {
-        expect(oktaSyncEnabledToggle).toHaveClass('bg-toggle-inactive')
-      })
+      expect(oktaSyncEnabledToggle).toHaveClass('bg-toggle-active')
     })
 
     it('renders default values for Okta Login Enforce toggle', async () => {
@@ -312,7 +334,7 @@ describe('OktaConfigForm', () => {
         name: /Okta Login Enforced/,
       })
       await waitFor(() => {
-        expect(oktaLoginEnforceToggle).toHaveClass('bg-toggle-inactive')
+        expect(oktaLoginEnforceToggle).toHaveClass('bg-toggle-active')
       })
     })
   })

src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx

@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
 import { useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { useParams } from 'react-router-dom'
@@ -12,7 +13,8 @@ import Icon from 'ui/Icon'
 import TextInput from 'ui/TextInput'
 import Toggle from 'ui/Toggle'
 
-import { useOktaConfig, useUpdateOktaConfig } from '../hooks'
+import { useUpdateOktaConfig } from '../hooks'
+import { OktaConfigQueryOpts } from '../queries/OktaConfigQueryOpts'
 
 const FormSchema = z.object({
   clientId: z.string().min(1, 'Client ID is required'),
@@ -29,10 +31,12 @@ interface URLParams {
 export function OktaConfigForm() {
   const { provider, owner } = useParams<URLParams>()
 
-  const { data } = useOktaConfig({
-    provider,
-    username: owner,
-  })
+  const { data } = useSuspenseQueryV5(
+    OktaConfigQueryOpts({
+      provider,
+      username: owner,
+    })
+  )
   const oktaConfig = data?.owner?.account?.oktaConfig
 
   const { register, handleSubmit, formState, reset } = useForm<FormValues>({
@@ -44,9 +48,8 @@ export function OktaConfigForm() {
       redirectUri: oktaConfig?.url,
     },
   })
-  const { isDirty, isValid } = formState
-  const { mutate } = useUpdateOktaConfig({ provider, owner })
 
+  const { mutate } = useUpdateOktaConfig({ provider, owner })
   const [oktaEnabled, setOktaEnabled] = useState(oktaConfig?.enabled)
   const [oktaLoginEnforce, setOktaLoginEnforce] = useState(oktaConfig?.enforced)
   const [showPassword, setShowPassword] = useState(false)
@@ -158,7 +161,9 @@ export function OktaConfigForm() {
             <div>
               <Button
                 type="submit"
-                disabled={!isValid || !isDirty || isSubmitting}
+                disabled={
+                  !formState.isValid || !formState.isDirty || isSubmitting
+                }
                 to={undefined}
                 hook="save okta form changes"
               >

src/pages/AccountSettings/tabs/OktaAccess/hooks/index.ts

@@ -1,2 +1 @@
-export { useOktaConfig } from './useOktaConfig'
 export { useUpdateOktaConfig } from './useUpdateOktaConfig'

src/pages/AccountSettings/tabs/OktaAccess/hooks/useUpdateOktaConfig.test.tsx

@@ -1,4 +1,8 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+} from '@tanstack/react-queryV5'
 import { render, renderHook, screen, waitFor } from '@testing-library/react'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
@@ -18,15 +22,20 @@ const mockedToastNotification = useAddNotification as Mock
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
 
 const wrapper =
   (initialEntries = '/gh/codecov'): React.FC<React.PropsWithChildren> =>
   ({ children }) => (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter initialEntries={[initialEntries]}>
-        <Route path="/:provider/:owner">{children}</Route>
-      </MemoryRouter>
-    </QueryClientProvider>
+    <QueryClientProviderV5 client={queryClientV5}>
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[initialEntries]}>
+          <Route path="/:provider/:owner">{children}</Route>
+        </MemoryRouter>
+      </QueryClientProvider>
+    </QueryClientProviderV5>
   )
 
 const provider = 'gh'
@@ -49,6 +58,7 @@ beforeAll(() => {
 
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 

src/pages/AccountSettings/tabs/OktaAccess/hooks/useUpdateOktaConfig.tsx

@@ -1,11 +1,14 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useMutation } from '@tanstack/react-query'
+import { useQueryClient as useQueryClientV5 } from '@tanstack/react-queryV5'
 import z from 'zod'
 
 import { useAddNotification } from 'services/toastNotification'
 import Api from 'shared/api'
 import { NetworkErrorObject } from 'shared/api/helpers'
 import A from 'ui/A'
 
+import { OktaConfigQueryOpts } from '../queries/OktaConfigQueryOpts'
+
 const TOAST_DURATION = 10000
 
 const query = `
@@ -78,7 +81,7 @@ type MutationFnParams = {
 
 export const useUpdateOktaConfig = ({ provider, owner }: URLParams) => {
   const addToast = useAddNotification()
-  const queryClient = useQueryClient()
+  const queryClientV5 = useQueryClientV5()
 
   return useMutation({
     mutationFn: ({
@@ -143,7 +146,9 @@ export const useUpdateOktaConfig = ({ provider, owner }: URLParams) => {
       })
     },
     onSettled: () => {
-      queryClient.invalidateQueries(['GetOktaConfig'])
+      queryClientV5.invalidateQueries(
+        OktaConfigQueryOpts({ provider, username: owner })
+      )
     },
     retry: false,
   })