ref: Migrate useOktaConfig to TSQ V5

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()

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,11 +12,34 @@
 
 import { OktaConfigForm } from './OktaConfigForm'
 
+const oktaConfigMock = {
+  enabled: true,
+  enforced: true,
+  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()
 })
@@ -26,24 +53,6 @@
   server.close()
 })
 
-const oktaConfigMock = {
-  enabled: true,
-  enforced: true,
-  url: 'https://okta.com',
-  clientId: 'clientId',
-  clientSecret: 'clientSecret',
-}
-
-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() {
     const user = userEvent.setup()
@@ -187,7 +196,7 @@
       name: /Okta Sync Enabled/,
     })
     expect(oktaSyncEnabledToggle).toBeInTheDocument()
     expect(oktaSyncEnabledToggle).toHaveClass('bg-toggle-inactive')
 
     await user.click(oktaSyncEnabledToggle)
     expect(oktaSyncEnabledToggle).toHaveClass('bg-toggle-active')
@@ -201,7 +210,7 @@
       name: /Okta Login Enforced/,
     })
     expect(oktaLoginEnforceToggle).toBeInTheDocument()
     expect(oktaLoginEnforceToggle).toHaveClass('bg-toggle-inactive')
 
     await user.click(oktaLoginEnforceToggle)
     expect(oktaLoginEnforceToggle).toHaveClass('bg-toggle-active')
@@ -215,7 +224,7 @@
       name: /Okta Login Enforced/,
     })
     expect(oktaLoginEnforceToggle).toBeInTheDocument()
     expect(oktaLoginEnforceToggle).toHaveClass('bg-toggle-inactive')
 
     await user.click(oktaLoginEnforceToggle)
     const oktaSyncEnabledToggle = await screen.findByRole('button', {
@@ -233,7 +242,7 @@
       name: /Okta Sync Enabled/,
     })
     expect(oktaSyncEnabledToggle).toBeInTheDocument()
     expect(oktaSyncEnabledToggle).toHaveClass('bg-toggle-inactive')
 
     const oktaLoginEnforceToggle = await screen.findByRole('button', {
       name: /Okta Login Enforced/,
@@ -300,7 +309,7 @@
         name: /Okta Sync Enabled/,
       })
       await waitFor(() => {
-        expect(oktaSyncEnabledToggle).toHaveClass('bg-toggle-inactive')
+        expect(oktaSyncEnabledToggle).toHaveClass('bg-toggle-active')
       })
     })
 
@@ -312,7 +321,7 @@
         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'

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,
   })

src/pages/AccountSettings/tabs/OktaAccess/hooks/useOktaConfig.test.tsx → src/pages/AccountSettings/tabs/OktaAccess/queries/OktaConfigQueryOpts.test.tsx

@@ -1,9 +1,13 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+  useQuery as useQueryV5,
+} from '@tanstack/react-queryV5'
 import { renderHook, waitFor } from '@testing-library/react'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
 
-import { useOktaConfig } from './useOktaConfig'
+import { OktaConfigQueryOpts } from './OktaConfigQueryOpts'
 
 const oktaConfigMock = {
   enabled: true,
@@ -13,21 +17,23 @@ const oktaConfigMock = {
   clientSecret: 'clientSecret',
 }
 
-const queryClient = new QueryClient({
+const queryClientV5 = new QueryClientV5({
   defaultOptions: { queries: { retry: false } },
 })
 const server = setupServer()
 
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  <QueryClientProviderV5 client={queryClientV5}>
+    {children}
+  </QueryClientProviderV5>
 )
 
 beforeAll(() => {
   server.listen()
 })
 
 afterEach(() => {
-  queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 
@@ -58,10 +64,12 @@ describe('useOktaConfig', () => {
 
         const { result } = renderHook(
           () =>
-            useOktaConfig({
-              provider: 'gh',
-              username: 'codecov',
-            }),
+            useQueryV5(
+              OktaConfigQueryOpts({
+                provider: 'gh',
+                username: 'codecov',
+              })
+            ),
           { wrapper }
         )
 
@@ -90,10 +98,12 @@ describe('useOktaConfig', () => {
 
         const { result } = renderHook(
           () =>
-            useOktaConfig({
-              provider: 'gh',
-              username: 'codecov',
-            }),
+            useQueryV5(
+              OktaConfigQueryOpts({
+                provider: 'gh',
+                username: 'codecov',
+              })
+            ),
           { wrapper }
         )
 

src/pages/AccountSettings/tabs/OktaAccess/hooks/useOktaConfig.tsx → src/pages/AccountSettings/tabs/OktaAccess/queries/OktaConfigQueryOpts.tsx

@@ -1,4 +1,4 @@
-import { useQuery, type UseQueryOptions } from '@tanstack/react-query'
+import { queryOptions as queryOptionsV5 } from '@tanstack/react-queryV5'
 import { z } from 'zod'
 
 import Api from 'shared/api'
@@ -26,30 +26,32 @@ const OktaConfigRequestSchema = z.object({
 })
 
 const oktaConfigQuery = `
-  query GetOktaConfig($username: String!) {
-    owner(username: $username) {
-      isUserOktaAuthenticated
-      account {
-        oktaConfig {
-          enabled
-          enforced
-          url
-          clientId
-          clientSecret
-        }
+query GetOktaConfig($username: String!) {
+  owner(username: $username) {
+    isUserOktaAuthenticated
+    account {
+      oktaConfig {
+        enabled
+        enforced
+        url
+        clientId
+        clientSecret
       }
     }
   }
+}
 `
 
-interface UseOktaConfigArgs {
+interface OktaConfigQueryArgs {
   provider: string
   username: string
-  opts?: UseQueryOptions<z.infer<typeof OktaConfigRequestSchema>>
 }
 
-export function useOktaConfig({ provider, username, opts }: UseOktaConfigArgs) {
-  return useQuery({
+export function OktaConfigQueryOpts({
+  provider,
+  username,
+}: OktaConfigQueryArgs) {
+  return queryOptionsV5({
     queryKey: ['GetOktaConfig', provider, username, oktaConfigQuery],
     queryFn: ({ signal }) => {
       return Api.graphql({
@@ -73,6 +75,5 @@ export function useOktaConfig({ provider, username, opts }: UseOktaConfigArgs) {
         return parsedRes.data
       })
     },
-    ...(!!opts && opts),
   })
 }