Merge remote-tracking branch 'origin/main' into sshin/2859

src/layouts/Header/components/AdminLink/AdminLink.test.tsx

@@ -1,39 +1,43 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { render, screen } from '@testing-library/react'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+} from '@tanstack/react-queryV5'
+import { render, screen, waitFor } from '@testing-library/react'
 import { http, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
+import { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import AdminLink from './AdminLink'
 
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
+
 const wrapper: ({
   initialEntries,
 }: {
   initialEntries?: string
 }) => React.FC<React.PropsWithChildren> =
   ({ initialEntries = '/gh' }) =>
   ({ children }) => (
-    <QueryClientProvider client={queryClient}>
+    <QueryClientProviderV5 client={queryClientV5}>
       <MemoryRouter initialEntries={[initialEntries]}>
         <Route path="/:provider" exact>
-          {children}
+          <Suspense fallback={<div>Loading</div>}>{children}</Suspense>
         </Route>
       </MemoryRouter>
-    </QueryClientProvider>
+    </QueryClientProviderV5>
   )
 
-const queryClient = new QueryClient({
-  defaultOptions: { queries: { retry: false } },
-})
-
 const server = setupServer()
 beforeAll(() => {
   server.listen()
 })
 
-beforeEach(() => {
+afterEach(() => {
+  queryClientV5.clear()
   server.resetHandlers()
-  queryClient.clear()
 })
 
 afterAll(() => {
@@ -69,7 +73,7 @@ describe('AdminLink', () => {
   })
 
   describe('user is not an admin', () => {
-    it('renders nothing', () => {
+    it('renders nothing', async () => {
       setup({
         activated: false,
         email: '[email protected]',
@@ -80,7 +84,7 @@ describe('AdminLink', () => {
       })
 
       const { container } = render(<AdminLink />, { wrapper: wrapper({}) })
-      expect(container).toBeEmptyDOMElement()
+      await waitFor(() => expect(container).toBeEmptyDOMElement())
     })
   })
 })

src/layouts/Header/components/AdminLink/AdminLink.tsx

@@ -1,9 +1,19 @@
-import { useSelfHostedCurrentUser } from 'services/selfHosted'
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
+import { useParams } from 'react-router'
+
+import { SelfHostedCurrentUserQueryOpts } from 'services/selfHosted/SelfHostedCurrentUserQueryOpts'
 import A from 'ui/A'
 import Icon from 'ui/Icon'
 
+interface URLParams {
+  provider: string
+}
+
 function AdminLink() {
-  const { data: user } = useSelfHostedCurrentUser()
+  const { provider } = useParams<URLParams>()
+  const { data: user } = useSuspenseQueryV5(
+    SelfHostedCurrentUserQueryOpts({ provider })
+  )
 
   if (!user?.isAdmin) {
     return null

src/layouts/Header/components/SeatDetails/SeatDetails.test.tsx

@@ -1,7 +1,12 @@
 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'
+import { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import SeatDetails from './SeatDetails'
@@ -14,37 +19,43 @@ const mockData = {
 }
 
 const mockUndefinedSeats = {
-  config: {},
+  config: null,
 }
 
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+})
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
+
 const wrapper: ({
   initialEntries,
 }: {
   initialEntries?: string
 }) => React.FC<React.PropsWithChildren> =
   ({ initialEntries = '/gh' }) =>
   ({ children }) => (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter initialEntries={[initialEntries]}>
-        <Route path="/:provider" exact>
-          {children}
-        </Route>
-      </MemoryRouter>
-    </QueryClientProvider>
+    <QueryClientProviderV5 client={queryClientV5}>
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[initialEntries]}>
+          <Route path="/:provider" exact>
+            <Suspense fallback={<div>Loading</div>}>{children}</Suspense>
+          </Route>
+        </MemoryRouter>
+      </QueryClientProvider>
+    </QueryClientProviderV5>
   )
 
-const queryClient = new QueryClient({
-  defaultOptions: { queries: { retry: false } },
-})
-
 const server = setupServer()
 beforeAll(() => {
   server.listen()
 })
 
 afterEach(() => {
-  server.resetHandlers()
   queryClient.clear()
+  queryClientV5.clear()
+  server.resetHandlers()
 })
 
 afterAll(() => {
@@ -62,12 +73,10 @@ describe('SeatDetails', () => {
 
   describe('renders component', () => {
     describe('values are defined', () => {
-      beforeEach(() => {
-        setup({})
-      })
-
       it('displays the number of active seats', async () => {
+        setup({})
         render(<SeatDetails />, { wrapper: wrapper({}) })
+
         const number = await screen.findByText('5')
         expect(number).toBeInTheDocument()
 
@@ -76,6 +85,7 @@ describe('SeatDetails', () => {
       })
 
       it('displays the number of total seats', async () => {
+        setup({})
         render(<SeatDetails />, { wrapper: wrapper({}) })
 
         const number = await screen.findByText('10')

src/layouts/Header/components/SeatDetails/SeatDetails.tsx

@@ -1,7 +1,17 @@
-import { useSelfHostedSeatsConfig } from 'services/selfHosted'
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
+import { useParams } from 'react-router'
+
+import { SelfHostedSeatsConfigQueryOpts } from 'services/selfHosted/SelfHostedSeatsConfigQueryOpts'
+
+interface URLParams {
+  provider: string
+}
 
 function SeatDetails() {
-  const { data: selfHostedSeats } = useSelfHostedSeatsConfig()
+  const { provider } = useParams<URLParams>()
+  const { data: selfHostedSeats } = useSuspenseQueryV5(
+    SelfHostedSeatsConfigQueryOpts({ provider })
+  )
 
   if (!selfHostedSeats?.seatsUsed || !selfHostedSeats?.seatsLimit) {
     return <p>Unable to get seat usage information</p>

src/pages/AccountSettings/AccountSettings.test.jsx

@@ -167,6 +167,7 @@ describe('AccountSettings', () => {
                 isTeamPlan:
                   planValue === Plans.USERS_TEAMM ||
                   planValue === Plans.USERS_TEAMY,
+                isTrialPlan: false,
               },
             },
           },

src/pages/AccountSettings/AccountSettingsSideMenu.test.jsx

@@ -155,6 +155,7 @@ describe('AccountSettingsSideMenu', () => {
                 isTeamPlan:
                   planValue === Plans.USERS_TEAMM ||
                   planValue === Plans.USERS_TEAMY,
+                isTrialPlan: false,
               },
             },
           },

src/pages/AccountSettings/tabs/Profile/ActivationBanner/ActivationBanner.jsx

@@ -1,9 +1,8 @@
-import { useQueryClient } from '@tanstack/react-query'
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
+import { useParams } from 'react-router'
 
-import {
-  useSelfHostedCurrentUser,
-  useSelfHostedSeatsConfig,
-} from 'services/selfHosted'
+import { SelfHostedCurrentUserQueryOpts } from 'services/selfHosted/SelfHostedCurrentUserQueryOpts'
+import { SelfHostedSeatsConfigQueryOpts } from 'services/selfHosted/SelfHostedSeatsConfigQueryOpts'
 import A from 'ui/A'
 import Banner from 'ui/Banner'
 import BannerContent from 'ui/Banner/BannerContent'
@@ -39,17 +38,21 @@ function canChangeActivation({ seatConfig, currentUser }) {
 }
 
 function ActivationBanner() {
-  const queryClient = useQueryClient()
-  const { data: currentUser } = useSelfHostedCurrentUser()
-  const { data: seatConfig } = useSelfHostedSeatsConfig()
+  const { provider } = useParams()
+
+  const { data: seatConfig } = useSuspenseQueryV5(
+    SelfHostedSeatsConfigQueryOpts({ provider })
+  )
+  const { data: currentUser } = useSuspenseQueryV5(
+    SelfHostedCurrentUserQueryOpts({ provider })
+  )
 
   const { canChange, displaySeatMsg } = canChangeActivation({
     seatConfig,
     currentUser,
   })
 
   const { mutate } = useSelfActivationMutation({
-    queryClient,
     canChange,
   })