Skip to content

Commit 692ea04

Browse files
nicholas-codecovnicholas-codecov
authored
ref: Migrate useOktaConfig to TSQ V5 (#3683)
1 parent 4b05dff commit 692ea04

File tree

10 files changed

+211
-121
lines changed

10 files changed

+211
-121
lines changed

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

+17-7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
2+
import {
3+
QueryClientProvider as QueryClientProviderV5,
4+
QueryClient as QueryClientV5,
5+
} from '@tanstack/react-queryV5'
26
import { render, screen } from '@testing-library/react'
37
import { graphql, HttpResponse } from 'msw'
48
import { setupServer } from 'msw/node'
@@ -10,15 +14,20 @@ import OktaAccess from './OktaAccess'
1014
const queryClient = new QueryClient({
1115
defaultOptions: { queries: { suspense: true, retry: false } },
1216
})
17+
const queryClientV5 = new QueryClientV5({
18+
defaultOptions: { queries: { retry: false } },
19+
})
1320

1421
const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
15-
<QueryClientProvider client={queryClient}>
16-
<MemoryRouter initialEntries={['/account/gh/codecov/okta-access/']}>
17-
<Route path="/account/:provider/:owner/okta-access/">
18-
<Suspense fallback={null}>{children}</Suspense>
19-
</Route>
20-
</MemoryRouter>
21-
</QueryClientProvider>
22+
<QueryClientProviderV5 client={queryClientV5}>
23+
<QueryClientProvider client={queryClient}>
24+
<MemoryRouter initialEntries={['/account/gh/codecov/okta-access/']}>
25+
<Route path="/account/:provider/:owner/okta-access/">
26+
<Suspense fallback={null}>{children}</Suspense>
27+
</Route>
28+
</MemoryRouter>
29+
</QueryClientProvider>
30+
</QueryClientProviderV5>
2231
)
2332

2433
const server = setupServer()
@@ -28,6 +37,7 @@ beforeAll(() => {
2837

2938
afterEach(() => {
3039
queryClient.clear()
40+
queryClientV5.clear()
3141
server.resetHandlers()
3242
})
3343

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

+51-29
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
2+
import {
3+
QueryClientProvider as QueryClientProviderV5,
4+
QueryClient as QueryClientV5,
5+
} from '@tanstack/react-queryV5'
26
import { render, screen, waitFor } from '@testing-library/react'
37
import userEvent from '@testing-library/user-event'
48
import { graphql, HttpResponse } from 'msw'
@@ -8,44 +12,60 @@ import { MemoryRouter, Route } from 'react-router-dom'
812

913
import { OktaConfigForm } from './OktaConfigForm'
1014

15+
const oktaConfigMock = (isEnabled: boolean, isEnforced: boolean) => ({
16+
enabled: isEnabled,
17+
enforced: isEnforced,
18+
url: 'https://okta.com',
19+
clientId: 'clientId',
20+
clientSecret: 'clientSecret',
21+
})
22+
1123
const queryClient = new QueryClient({
1224
defaultOptions: { queries: { retry: false } },
1325
})
14-
const server = setupServer()
26+
const queryClientV5 = new QueryClientV5({
27+
defaultOptions: { queries: { retry: false } },
28+
})
29+
30+
const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
31+
<QueryClientProviderV5 client={queryClientV5}>
32+
<QueryClientProvider client={queryClient}>
33+
<MemoryRouter initialEntries={['/account/gh/codecov/okta-access/']}>
34+
<Route path="/account/:provider/:owner/okta-access/">
35+
<Suspense fallback={null}>{children}</Suspense>
36+
</Route>
37+
</MemoryRouter>
38+
</QueryClientProvider>
39+
</QueryClientProviderV5>
40+
)
1541

42+
const server = setupServer()
1643
beforeAll(() => {
1744
server.listen()
1845
})
1946

2047
afterEach(() => {
2148
queryClient.clear()
49+
queryClientV5.clear()
2250
server.resetHandlers()
2351
})
2452

2553
afterAll(() => {
2654
server.close()
2755
})
2856

29-
const oktaConfigMock = {
30-
enabled: true,
31-
enforced: true,
32-
url: 'https://okta.com',
33-
clientId: 'clientId',
34-
clientSecret: 'clientSecret',
57+
interface SetupArgs {
58+
isEnabled?: boolean
59+
isEnforced?: boolean
3560
}
3661

37-
const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
38-
<QueryClientProvider client={queryClient}>
39-
<MemoryRouter initialEntries={['/account/gh/codecov/okta-access/']}>
40-
<Route path="/account/:provider/:owner/okta-access/">
41-
<Suspense fallback={null}>{children}</Suspense>
42-
</Route>
43-
</MemoryRouter>
44-
</QueryClientProvider>
45-
)
46-
4762
describe('OktaConfigForm', () => {
48-
function setup() {
63+
function setup(
64+
{ isEnabled = true, isEnforced = true }: SetupArgs = {
65+
isEnabled: true,
66+
isEnforced: true,
67+
}
68+
) {
4969
const user = userEvent.setup()
5070
const mutate = vi.fn()
5171

@@ -56,7 +76,7 @@ describe('OktaConfigForm', () => {
5676
owner: {
5777
isUserOktaAuthenticated: true,
5878
account: {
59-
oktaConfig: oktaConfigMock,
79+
oktaConfig: oktaConfigMock(isEnabled, isEnforced),
6080
},
6181
},
6282
},
@@ -180,7 +200,7 @@ describe('OktaConfigForm', () => {
180200
})
181201

182202
it('should toggle Okta Sync Enabled on', async () => {
183-
const { user } = setup()
203+
const { user } = setup({ isEnabled: false, isEnforced: false })
184204
render(<OktaConfigForm />, { wrapper })
185205

186206
const oktaSyncEnabledToggle = await screen.findByRole('button', {
@@ -190,11 +210,13 @@ describe('OktaConfigForm', () => {
190210
expect(oktaSyncEnabledToggle).toHaveClass('bg-toggle-inactive')
191211

192212
await user.click(oktaSyncEnabledToggle)
193-
expect(oktaSyncEnabledToggle).toHaveClass('bg-toggle-active')
213+
await waitFor(() =>
214+
expect(oktaSyncEnabledToggle).toHaveClass('bg-toggle-active')
215+
)
194216
})
195217

196218
it('should toggle Okta Login Enforce on', async () => {
197-
const { user } = setup()
219+
const { user } = setup({ isEnabled: false, isEnforced: false })
198220
render(<OktaConfigForm />, { wrapper })
199221

200222
const oktaLoginEnforceToggle = await screen.findByRole('button', {
@@ -204,11 +226,13 @@ describe('OktaConfigForm', () => {
204226
expect(oktaLoginEnforceToggle).toHaveClass('bg-toggle-inactive')
205227

206228
await user.click(oktaLoginEnforceToggle)
207-
expect(oktaLoginEnforceToggle).toHaveClass('bg-toggle-active')
229+
await waitFor(() =>
230+
expect(oktaLoginEnforceToggle).toHaveClass('bg-toggle-active')
231+
)
208232
})
209233

210234
it('toggles enabled on when enforced is on', async () => {
211-
const { user } = setup()
235+
const { user } = setup({ isEnabled: false, isEnforced: false })
212236
render(<OktaConfigForm />, { wrapper })
213237

214238
const oktaLoginEnforceToggle = await screen.findByRole('button', {
@@ -226,7 +250,7 @@ describe('OktaConfigForm', () => {
226250
})
227251

228252
it('disables enforce toggle when enabled is off', async () => {
229-
const { user } = setup()
253+
const { user } = setup({ isEnabled: false, isEnforced: false })
230254
render(<OktaConfigForm />, { wrapper })
231255

232256
const oktaSyncEnabledToggle = await screen.findByRole('button', {
@@ -299,9 +323,7 @@ describe('OktaConfigForm', () => {
299323
const oktaSyncEnabledToggle = await screen.findByRole('button', {
300324
name: /Okta Sync Enabled/,
301325
})
302-
await waitFor(() => {
303-
expect(oktaSyncEnabledToggle).toHaveClass('bg-toggle-inactive')
304-
})
326+
expect(oktaSyncEnabledToggle).toHaveClass('bg-toggle-active')
305327
})
306328

307329
it('renders default values for Okta Login Enforce toggle', async () => {
@@ -312,7 +334,7 @@ describe('OktaConfigForm', () => {
312334
name: /Okta Login Enforced/,
313335
})
314336
await waitFor(() => {
315-
expect(oktaLoginEnforceToggle).toHaveClass('bg-toggle-inactive')
337+
expect(oktaLoginEnforceToggle).toHaveClass('bg-toggle-active')
316338
})
317339
})
318340
})

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

+13-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { zodResolver } from '@hookform/resolvers/zod'
2+
import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
23
import { useState } from 'react'
34
import { SubmitHandler, useForm } from 'react-hook-form'
45
import { useParams } from 'react-router-dom'
@@ -12,7 +13,8 @@ import Icon from 'ui/Icon'
1213
import TextInput from 'ui/TextInput'
1314
import Toggle from 'ui/Toggle'
1415

15-
import { useOktaConfig, useUpdateOktaConfig } from '../hooks'
16+
import { useUpdateOktaConfig } from '../hooks'
17+
import { OktaConfigQueryOpts } from '../queries/OktaConfigQueryOpts'
1618

1719
const FormSchema = z.object({
1820
clientId: z.string().min(1, 'Client ID is required'),
@@ -29,10 +31,12 @@ interface URLParams {
2931
export function OktaConfigForm() {
3032
const { provider, owner } = useParams<URLParams>()
3133

32-
const { data } = useOktaConfig({
33-
provider,
34-
username: owner,
35-
})
34+
const { data } = useSuspenseQueryV5(
35+
OktaConfigQueryOpts({
36+
provider,
37+
username: owner,
38+
})
39+
)
3640
const oktaConfig = data?.owner?.account?.oktaConfig
3741

3842
const { register, handleSubmit, formState, reset } = useForm<FormValues>({
@@ -44,9 +48,8 @@ export function OktaConfigForm() {
4448
redirectUri: oktaConfig?.url,
4549
},
4650
})
47-
const { isDirty, isValid } = formState
48-
const { mutate } = useUpdateOktaConfig({ provider, owner })
4951

52+
const { mutate } = useUpdateOktaConfig({ provider, owner })
5053
const [oktaEnabled, setOktaEnabled] = useState(oktaConfig?.enabled)
5154
const [oktaLoginEnforce, setOktaLoginEnforce] = useState(oktaConfig?.enforced)
5255
const [showPassword, setShowPassword] = useState(false)
@@ -158,7 +161,9 @@ export function OktaConfigForm() {
158161
<div>
159162
<Button
160163
type="submit"
161-
disabled={!isValid || !isDirty || isSubmitting}
164+
disabled={
165+
!formState.isValid || !formState.isDirty || isSubmitting
166+
}
162167
to={undefined}
163168
hook="save okta form changes"
164169
>

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

-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
export { useOktaConfig } from './useOktaConfig'
21
export { useUpdateOktaConfig } from './useUpdateOktaConfig'

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

+15-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
2+
import {
3+
QueryClientProvider as QueryClientProviderV5,
4+
QueryClient as QueryClientV5,
5+
} from '@tanstack/react-queryV5'
26
import { render, renderHook, screen, waitFor } from '@testing-library/react'
37
import { graphql, HttpResponse } from 'msw'
48
import { setupServer } from 'msw/node'
@@ -18,15 +22,20 @@ const mockedToastNotification = useAddNotification as Mock
1822
const queryClient = new QueryClient({
1923
defaultOptions: { queries: { retry: false } },
2024
})
25+
const queryClientV5 = new QueryClientV5({
26+
defaultOptions: { queries: { retry: false } },
27+
})
2128

2229
const wrapper =
2330
(initialEntries = '/gh/codecov'): React.FC<React.PropsWithChildren> =>
2431
({ children }) => (
25-
<QueryClientProvider client={queryClient}>
26-
<MemoryRouter initialEntries={[initialEntries]}>
27-
<Route path="/:provider/:owner">{children}</Route>
28-
</MemoryRouter>
29-
</QueryClientProvider>
32+
<QueryClientProviderV5 client={queryClientV5}>
33+
<QueryClientProvider client={queryClient}>
34+
<MemoryRouter initialEntries={[initialEntries]}>
35+
<Route path="/:provider/:owner">{children}</Route>
36+
</MemoryRouter>
37+
</QueryClientProvider>
38+
</QueryClientProviderV5>
3039
)
3140

3241
const provider = 'gh'
@@ -49,6 +58,7 @@ beforeAll(() => {
4958

5059
afterEach(() => {
5160
queryClient.clear()
61+
queryClientV5.clear()
5262
server.resetHandlers()
5363
})
5464

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

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1-
import { useMutation, useQueryClient } from '@tanstack/react-query'
1+
import { useMutation } from '@tanstack/react-query'
2+
import { useQueryClient as useQueryClientV5 } from '@tanstack/react-queryV5'
23
import z from 'zod'
34

45
import { useAddNotification } from 'services/toastNotification'
56
import Api from 'shared/api'
67
import { NetworkErrorObject } from 'shared/api/helpers'
78
import A from 'ui/A'
89

10+
import { OktaConfigQueryOpts } from '../queries/OktaConfigQueryOpts'
11+
912
const TOAST_DURATION = 10000
1013

1114
const query = `
@@ -78,7 +81,7 @@ type MutationFnParams = {
7881

7982
export const useUpdateOktaConfig = ({ provider, owner }: URLParams) => {
8083
const addToast = useAddNotification()
81-
const queryClient = useQueryClient()
84+
const queryClientV5 = useQueryClientV5()
8285

8386
return useMutation({
8487
mutationFn: ({
@@ -143,7 +146,9 @@ export const useUpdateOktaConfig = ({ provider, owner }: URLParams) => {
143146
})
144147
},
145148
onSettled: () => {
146-
queryClient.invalidateQueries(['GetOktaConfig'])
149+
queryClientV5.invalidateQueries(
150+
OktaConfigQueryOpts({ provider, username: owner })
151+
)
147152
},
148153
retry: false,
149154
})

0 commit comments

Comments
 (0)