Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Migrate useSyncProviders to TS Query V5 #3573

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 26 additions & 16 deletions src/pages/SyncProviderPage/SyncProviderPage.test.tsx
Original file line number Diff line number Diff line change
@@ -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 { graphql, http, HttpResponse } from 'msw'
import { setupServer } from 'msw/node'
Expand All @@ -22,30 +26,35 @@ const createMockedInternalUser = (
owners: owner !== undefined ? [owner] : [],
})

const server = setupServer()
const queryClient = new QueryClient({
defaultOptions: { queries: { suspense: true } },
defaultOptions: { queries: { retry: false, suspense: true } },
})
const queryClientV5 = new QueryClientV5({
defaultOptions: { queries: { retry: false } },
})
const server = setupServer()

const testLocation: { pathname: string } = {
pathname: '',
}

const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
<QueryClientProvider client={queryClient}>
<MemoryRouter initialEntries={['/sync']}>
<Route path="/sync">
<Suspense fallback={<p>Loading</p>}>{children}</Suspense>
</Route>
<Route
path="*"
render={({ location }) => {
testLocation.pathname = location.pathname
return null
}}
/>
</MemoryRouter>
</QueryClientProvider>
<QueryClientProviderV5 client={queryClientV5}>
<QueryClientProvider client={queryClient}>
<MemoryRouter initialEntries={['/sync']}>
<Route path="/sync">
<Suspense fallback={<p>Loading</p>}>{children}</Suspense>
</Route>
<Route
path="*"
render={({ location }) => {
testLocation.pathname = location.pathname
return null
}}
/>
</MemoryRouter>
</QueryClientProvider>
</QueryClientProviderV5>
)

beforeAll(() => {
Expand All @@ -54,6 +63,7 @@ beforeAll(() => {

afterEach(() => {
queryClient.clear()
queryClientV5.clear()
server.resetHandlers()
})

Expand Down
13 changes: 5 additions & 8 deletions src/pages/SyncProviderPage/SyncProviderPage.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
import gt from 'lodash/gt'
import isEmpty from 'lodash/isEmpty'
import { Redirect } from 'react-router-dom'

import { useSyncProviders } from 'services/config'
import { SyncProvidersQueryOpts } from 'services/config/SyncProvidersQueryOpts'
import { useInternalUser } from 'services/user/useInternalUser'
import { loginProviderToShortName } from 'shared/utils/loginProviders'
import A from 'ui/A'

import SyncButton from './SyncButton'

interface SyncButtonProps {
hasSynced: boolean
}

const SyncButtons: React.FC<SyncButtonProps> = ({ hasSynced }) => {
const { data: syncProviders } = useSyncProviders({ enabled: !hasSynced })
const SyncButtons: React.FC = () => {
const { data: syncProviders } = useSuspenseQueryV5(SyncProvidersQueryOpts())

if (isEmpty(syncProviders)) {
return (
Expand Down Expand Up @@ -80,7 +77,7 @@ const SyncProviderPage: React.FC = () => {
</p>
</div>
<div className="mx-auto mt-2 w-96 space-y-4 border-t border-ds-gray-secondary pt-4">
<SyncButtons hasSynced={hasSynced} />
<SyncButtons />
</div>
</div>
)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,31 +1,45 @@
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 { MemoryRouter, Route } from 'react-router-dom'

import { EnterpriseSyncProviders, useSyncProviders } from './useSyncProviders'
import {
EnterpriseSyncProviders,
SyncProvidersQueryOpts,
} from './SyncProvidersQueryOpts'

const server = setupServer()
const queryClient = new QueryClient({
defaultOptions: { queries: { retry: false } },
})
const queryClientV5 = new QueryClientV5({
defaultOptions: { queries: { retry: false } },
})

const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
<QueryClientProvider client={queryClient}>
<MemoryRouter initialEntries={['/']}>
<Route path="/">{children}</Route>
</MemoryRouter>
</QueryClientProvider>
<QueryClientProviderV5 client={queryClientV5}>
<QueryClientProvider client={queryClient}>
<MemoryRouter initialEntries={['/']}>
<Route path="/">{children}</Route>
</MemoryRouter>
</QueryClientProvider>
</QueryClientProviderV5>
)

beforeAll(() => {
server.listen()
})

beforeEach(() => {
server.resetHandlers()
queryClient.clear()
queryClientV5.clear()
server.resetHandlers()
})

afterAll(() => {
Expand Down Expand Up @@ -54,13 +68,13 @@ describe('useSyncProviders', () => {

describe('third party services are configured providers', () => {
it('returns data', async () => {
setup({
syncProviders: ['GITHUB', 'GITLAB', 'BITBUCKET'],
})
const { result } = renderHook(() => useSyncProviders({}), { wrapper })
setup({ syncProviders: ['GITHUB', 'GITLAB', 'BITBUCKET'] })
const { result } = renderHook(
() => useQueryV5(SyncProvidersQueryOpts()),
{ wrapper }
)

await waitFor(() => result.current.isSuccess)

await waitFor(() =>
expect(result.current.data).toStrictEqual(['gh', 'gl', 'bb'])
)
Expand All @@ -76,10 +90,12 @@ describe('useSyncProviders', () => {
'BITBUCKET_SERVER',
],
})
const { result } = renderHook(() => useSyncProviders({}), { wrapper })
const { result } = renderHook(
() => useQueryV5(SyncProvidersQueryOpts()),
{ wrapper }
)

await waitFor(() => result.current.isSuccess)

await waitFor(() =>
expect(result.current.data).toStrictEqual(['ghe', 'gle', 'bbs'])
)
Expand All @@ -96,14 +112,13 @@ describe('useSyncProviders', () => {
})

it('throws an error', async () => {
setup({
hasParsingError: true,
})

const { result } = renderHook(() => useSyncProviders({}), { wrapper })
setup({ hasParsingError: true })
const { result } = renderHook(
() => useQueryV5(SyncProvidersQueryOpts()),
{ wrapper }
)

await waitFor(() => expect(result.current.isError).toBeTruthy())

expect(result.current.error).toEqual(
expect.objectContaining({ status: 404 })
)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { useQuery } from '@tanstack/react-query'
import { queryOptions as queryOptionsV5 } from '@tanstack/react-queryV5'
import { z } from 'zod'

import Api from 'shared/api'
import { rejectNetworkError } from 'shared/api/helpers'

const EnterpriseSyncProvidersUnionSchema = z.union([
z.literal('GITHUB'),
Expand Down Expand Up @@ -29,12 +30,8 @@ query GetSyncProviders {
}
}`

interface UseSyncProvidersArgs {
enabled?: boolean
}

export const useSyncProviders = ({ enabled = true }: UseSyncProvidersArgs) => {
return useQuery({
export const SyncProvidersQueryOpts = () => {
return queryOptionsV5({
queryKey: ['GetSyncProviders'],
queryFn: ({ signal }) => {
return Api.graphql({
Expand All @@ -45,8 +42,11 @@ export const useSyncProviders = ({ enabled = true }: UseSyncProvidersArgs) => {
const parsedRes = GetSyncProvidersSchema.safeParse(res?.data)

if (!parsedRes.success) {
return Promise.reject({
return rejectNetworkError({
status: 404,
data: {},
dev: `SyncProvidersQueryOpts - 404 Failed to parse`,
error: parsedRes.error,
})
}

Expand Down Expand Up @@ -81,6 +81,5 @@ export const useSyncProviders = ({ enabled = true }: UseSyncProvidersArgs) => {
return syncProviders
})
},
enabled,
})
}
1 change: 0 additions & 1 deletion src/services/config/index.ts

This file was deleted.

Loading