Merge branch 'main' into dec_11_fix_no_flags_team_plan

src/pages/PlanPage/subRoutes/CurrentOrgPlan/AccountOrgs/AccountOrgs.test.tsx

@@ -1,4 +1,7 @@
-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 { delay, graphql, HttpResponse } from 'msw'
@@ -102,16 +105,11 @@ const mockReversedOrgs = {
 
 let testLocation: ReturnType<typeof useLocation>
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-      suspense: true,
-    },
-  },
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
 })
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
+  <QueryClientProviderV5 client={queryClientV5}>
     <MemoryRouter initialEntries={['/plan/gh/codecov']}>
       <Route path="/plan/:provider/:owner">{children}</Route>
       <Route
@@ -122,17 +120,22 @@ const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
         }}
       />
     </MemoryRouter>
-  </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
 const server = setupServer()
+beforeAll(() => {
+  server.listen()
+})
 
-beforeAll(() => server.listen())
 afterEach(() => {
-  queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
-afterAll(() => server.close())
+
+afterAll(() => {
+  server.close()
+})
 
 describe('AccountOrgs', () => {
   function setup() {

src/pages/PlanPage/subRoutes/CurrentOrgPlan/AccountOrgs/AccountOrgs.tsx

@@ -1,3 +1,4 @@
+import { useInfiniteQuery as useInfiniteQueryV5 } from '@tanstack/react-queryV5'
 import {
   createColumnHelper,
   flexRender,
@@ -16,7 +17,7 @@ import Spinner from 'ui/Spinner'
 import { Tooltip } from 'ui/Tooltip'
 
 import { Account } from '../hooks/useEnterpriseAccountDetails'
-import { useInfiniteAccountOrganizations } from '../hooks/useInfiniteAccountOrganizations'
+import { InfiniteAccountOrganizationsQueryOpts } from '../queries/InfiniteAccountOrganizationsQueryOpts'
 
 interface AccountOrgsArgs {
   account: Account
@@ -122,12 +123,14 @@ export default function AccountOrgs({ account }: AccountOrgsArgs) {
   ])
 
   const { data, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } =
-    useInfiniteAccountOrganizations({
-      provider,
-      owner,
-      first: 20,
-      orderingDirection: sorting[0]?.desc ? 'DESC' : 'ASC',
-    })
+    useInfiniteQueryV5(
+      InfiniteAccountOrganizationsQueryOpts({
+        provider,
+        owner,
+        first: 20,
+        orderingDirection: sorting[0]?.desc ? 'DESC' : 'ASC',
+      })
+    )
 
   const accountOrgs: AccountOrgRow[] = useMemo(() => {
     if (!data) return []

src/pages/PlanPage/subRoutes/CurrentOrgPlan/hooks/useInfiniteAccountOrganizations.test.tsx → src/pages/PlanPage/subRoutes/CurrentOrgPlan/queries/InfiniteAccountOrganizationsQueryOpts.test.tsx

@@ -1,10 +1,14 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+  useInfiniteQuery as useInfiniteQueryV5,
+} 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'
 
-import { useInfiniteAccountOrganizations } from './useInfiniteAccountOrganizations'
+import { InfiniteAccountOrganizationsQueryOpts } from './InfiniteAccountOrganizationsQueryOpts'
 
 const org1 = {
   username: 'org1',
@@ -63,29 +67,30 @@ const mockPageTwo = {
   },
 }
 
-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}>
+  <QueryClientProviderV5 client={queryClientV5}>
     <MemoryRouter initialEntries={['/plan/gh/codecov']}>
       <Route path="/plan/:provider/:owner">{children}</Route>
     </MemoryRouter>
-  </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
 const server = setupServer()
+beforeAll(() => {
+  server.listen()
+})
 
-beforeAll(() => server.listen())
 afterEach(() => {
-  queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
-afterAll(() => server.close())
+
+afterAll(() => {
+  server.close()
+})
 
 interface SetupArgs {
   invalidResponse?: boolean
@@ -124,7 +129,10 @@ describe('useInfiniteAccountOrganizations', () => {
   it('returns 404 when bad response from api', async () => {
     setup({ invalidResponse: true })
     const { result } = renderHook(
-      () => useInfiniteAccountOrganizations({ provider, owner }),
+      () =>
+        useInfiniteQueryV5(
+          InfiniteAccountOrganizationsQueryOpts({ provider, owner })
+        ),
       { wrapper }
     )
 
@@ -144,7 +152,10 @@ describe('useInfiniteAccountOrganizations', () => {
   it('returns 404 when no account for owner', async () => {
     setup({ noAccount: true })
     const { result } = renderHook(
-      () => useInfiniteAccountOrganizations({ provider, owner }),
+      () =>
+        useInfiniteQueryV5(
+          InfiniteAccountOrganizationsQueryOpts({ provider, owner })
+        ),
       { wrapper }
     )
 
@@ -164,7 +175,10 @@ describe('useInfiniteAccountOrganizations', () => {
   it('returns organizations for account', async () => {
     setup({})
     const { result } = renderHook(
-      () => useInfiniteAccountOrganizations({ provider, owner }),
+      () =>
+        useInfiniteQueryV5(
+          InfiniteAccountOrganizationsQueryOpts({ provider, owner })
+        ),
       { wrapper }
     )
 
@@ -184,7 +198,10 @@ describe('useInfiniteAccountOrganizations', () => {
   it('returns second page of orgs for account', async () => {
     setup({})
     const { result } = renderHook(
-      () => useInfiniteAccountOrganizations({ provider, owner }),
+      () =>
+        useInfiniteQueryV5(
+          InfiniteAccountOrganizationsQueryOpts({ provider, owner })
+        ),
       { wrapper }
     )
 

src/pages/PlanPage/subRoutes/CurrentOrgPlan/hooks/useInfiniteAccountOrganizations.ts → src/pages/PlanPage/subRoutes/CurrentOrgPlan/queries/InfiniteAccountOrganizationsQueryOpts.ts

@@ -1,10 +1,10 @@
-import { useInfiniteQuery } from '@tanstack/react-query'
+import { infiniteQueryOptions as infiniteQueryOptionsV5 } from '@tanstack/react-queryV5'
 import { z } from 'zod'
 
 import { OrderingDirection } from 'types'
 
 import Api from 'shared/api/api'
-import { NetworkErrorObject } from 'shared/api/helpers'
+import { rejectNetworkError } from 'shared/api/helpers'
 import { mapEdges } from 'shared/utils/graphql'
 
 const RequestSchema = z.object({
@@ -65,25 +65,25 @@ const query = `query InfiniteAccountOrganizations(
   }
 }`
 
-interface UseInfiniteAccountOrganizationsArgs {
+interface InfiniteAccountOrganizationsQueryArgs {
   provider: string
   owner: string
   first?: number
   orderingDirection?: OrderingDirection
 }
 
-export function useInfiniteAccountOrganizations({
+export function InfiniteAccountOrganizationsQueryOpts({
   provider,
   owner,
   first = 20,
   orderingDirection = 'DESC',
-}: UseInfiniteAccountOrganizationsArgs) {
+}: InfiniteAccountOrganizationsQueryArgs) {
   const variables = {
     first,
     direction: orderingDirection,
   }
 
-  return useInfiniteQuery({
+  return infiniteQueryOptionsV5({
     queryKey: ['InfiniteAccountOrganizations', provider, owner, variables],
     queryFn: ({ pageParam, signal }) =>
       Api.graphql({
@@ -99,29 +99,32 @@ export function useInfiniteAccountOrganizations({
         const parsedRes = RequestSchema.safeParse(res.data)
 
         if (!parsedRes.success) {
-          return Promise.reject({
+          return rejectNetworkError({
             status: 404,
             data: {},
             dev: 'useInfiniteAccountOrganizations - 404 Failed to parse data',
-          } satisfies NetworkErrorObject)
+            error: parsedRes.error,
+          })
         }
 
         const account = parsedRes?.data?.owner?.account
 
         if (!account) {
-          return Promise.reject({
+          return rejectNetworkError({
             status: 404,
             data: {},
             dev: 'useInfiniteAccountOrganizations - 404 Cannot find Account for Owner',
-          } satisfies NetworkErrorObject)
+          })
         }
 
         return {
           organizations: mapEdges(account.organizations),
           pageInfo: account.organizations.pageInfo,
         }
       }),
-    suspense: false,
-    getNextPageParam: (data) => data.pageInfo.endCursor,
+    initialPageParam: '',
+    getNextPageParam: (data) => {
+      return data?.pageInfo?.hasNextPage ? data?.pageInfo?.endCursor : null
+    },
   })
 }