chore: Migrate useSelfHostedSettings to TS Query V5 (#3574)

Author: nsdeschenes

src/pages/AdminSettings/AdminMembers/ActivationInfo/ActivationCount/ActivationCount.test.jsx renamed to src/pages/AdminSettings/AdminMembers/ActivationInfo/ActivationCount/ActivationCount.test.tsx

@@ -1,69 +1,86 @@
-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 ActivationCount from './ActivationCount'
 
-const queryClient = new QueryClient({
+const queryClientV5 = new QueryClientV5({
   defaultOptions: { queries: { retry: false } },
 })
 
-const mockResponse = {
+const mockResponse = ({
+  seatsUsed,
+  seatsLimit,
+}: {
+  seatsUsed: number
+  seatsLimit: number
+}) => ({
   config: {
     planAutoActivate: true,
-    seatsUsed: 5,
-    seatsLimit: 10,
+    seatsUsed,
+    seatsLimit,
   },
-}
+})
 
-const wrapper =
-  () =>
-  ({ children }) => (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter initialEntries={['/gh']}>
-        <Route path="/:provider">{children}</Route>
-      </MemoryRouter>
-    </QueryClientProvider>
-  )
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <QueryClientProviderV5 client={queryClientV5}>
+    <MemoryRouter initialEntries={['/gh']}>
+      <Route path="/:provider">
+        <Suspense fallback={<div>Loading</div>}>{children}</Suspense>
+      </Route>
+    </MemoryRouter>
+  </QueryClientProviderV5>
+)
 
 const server = setupServer()
 beforeAll(() => {
   server.listen()
 })
 
 beforeEach(() => {
+  queryClientV5.clear()
   server.resetHandlers()
-  queryClient.clear()
 })
 
 afterAll(() => {
   server.close()
 })
 
+interface SetupArgs {
+  seatsLimit: number
+  seatsUsed: number
+}
+
 describe('ActivationCount', () => {
-  function setup() {
+  function setup({ seatsLimit, seatsUsed }: SetupArgs) {
     server.use(
       graphql.query('SelfHostedSettings', () => {
-        return HttpResponse.json({ data: mockResponse })
+        return HttpResponse.json({
+          data: mockResponse({ seatsLimit, seatsUsed }),
+        })
       })
     )
   }
 
   describe('it renders component', () => {
     describe('seat limit is not reached', () => {
       it('displays seat count', async () => {
-        setup()
-        render(<ActivationCount />, { wrapper: wrapper() })
+        setup({ seatsLimit: 10, seatsUsed: 5 })
+        render(<ActivationCount />, { wrapper })
 
         const element = await screen.findByText('5')
         expect(element).toBeInTheDocument()
       })
 
       it('displays seat limit', async () => {
-        setup()
-        render(<ActivationCount />, { wrapper: wrapper() })
+        setup({ seatsLimit: 10, seatsUsed: 5 })
+        render(<ActivationCount />, { wrapper })
 
         const element = await screen.findByText('10')
         expect(element).toBeInTheDocument()
@@ -73,7 +90,7 @@ describe('ActivationCount', () => {
     describe('seat limit is reached', () => {
       it('displays info message', async () => {
         setup({ seatsLimit: 10, seatsUsed: 10 })
-        render(<ActivationCount />, { wrapper: wrapper() })
+        render(<ActivationCount />, { wrapper })
 
         const link = await screen.findByText('[email protected]')
         expect(link).toBeInTheDocument()

src/pages/AdminSettings/AdminMembers/ActivationInfo/ActivationCount/ActivationCount.jsx renamed to src/pages/AdminSettings/AdminMembers/ActivationInfo/ActivationCount/ActivationCount.tsx

@@ -1,11 +1,17 @@
-import PropTypes from 'prop-types'
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
+import { useParams } from 'react-router'
 
-import { useSelfHostedSettings } from 'services/selfHosted'
+import { SelfHostedSettingsQueryOpts } from 'services/selfHosted/SelfHostedSettingsQueryOpts'
 
 import ActivationLimit from './ActivationLimit'
 
+interface URLParams {
+  provider: string
+}
+
 function ActivationCount() {
-  const { data } = useSelfHostedSettings()
+  const { provider } = useParams<URLParams>()
+  const { data } = useSuspenseQueryV5(SelfHostedSettingsQueryOpts({ provider }))
 
   return (
     <div className="mt-4 flex flex-col gap-2 border-2 border-ds-gray-primary p-4">
@@ -21,9 +27,4 @@ function ActivationCount() {
   )
 }
 
-ActivationCount.propTypes = {
-  seatsUsed: PropTypes.number,
-  seatsLimit: PropTypes.number,
-}
-
 export default ActivationCount

src/pages/AdminSettings/AdminMembers/ActivationInfo/ActivationCount/index.js

@@ -2,8 +2,10 @@ import { render, screen } from '@testing-library/react'
 
 import ActivationInfo from './ActivationInfo'
 
-vi.mock('./ActivationCount', () => ({ default: () => 'ActivationCount' }))
-vi.mock('./AutoActivateMembers', () => ({
+vi.mock('./ActivationCount/ActivationCount', () => ({
+  default: () => 'ActivationCount',
+}))
+vi.mock('./AutoActivateMembers/AutoActivateMembers', () => ({
   default: () => 'AutoActivateMembers',
 }))
 

src/pages/AdminSettings/AdminMembers/ActivationInfo/ActivationInfo.test.jsx renamed to src/pages/AdminSettings/AdminMembers/ActivationInfo/ActivationInfo.test.tsx

@@ -2,8 +2,10 @@ import { lazy, Suspense } from 'react'
 
 import Spinner from 'ui/Spinner'
 
-const ActivationCount = lazy(() => import('./ActivationCount'))
-const AutoActivateMembers = lazy(() => import('./AutoActivateMembers'))
+const ActivationCount = lazy(() => import('./ActivationCount/ActivationCount'))
+const AutoActivateMembers = lazy(
+  () => import('./AutoActivateMembers/AutoActivateMembers')
+)
 
 const Loader = () => (
   <div className="flex items-center justify-center py-16">

src/pages/AdminSettings/AdminMembers/ActivationInfo/ActivationInfo.jsx renamed to src/pages/AdminSettings/AdminMembers/ActivationInfo/ActivationInfo.tsx

@@ -1,23 +1,39 @@
 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 userEvent from '@testing-library/user-event'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
+import { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import AutoActivateMembers from './AutoActivateMembers'
 
+const mockResponse = {
+  config: { planAutoActivate: true, seatsUsed: 1, seatsLimit: 10 },
+}
+
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
 
-const mockResponse = {
-  config: {
-    planAutoActivate: true,
-    seatsUsed: 1,
-    seatsLimit: 10,
-  },
-}
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <QueryClientProviderV5 client={queryClientV5}>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={['/gh']}>
+        <Route path="/:provider">
+          <Suspense fallback={<div>Loading</div>}>{children}</Suspense>
+        </Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  </QueryClientProviderV5>
+)
 
 const server = setupServer()
 beforeAll(() => {
@@ -33,14 +49,6 @@ afterAll(() => {
   server.close()
 })
 
-const wrapper = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter initialEntries={['/gh']}>
-      <Route path="/:provider">{children}</Route>
-    </MemoryRouter>
-  </QueryClientProvider>
-)
-
 describe('AutoActivateMembers', () => {
   function setup() {
     const user = userEvent.setup()
@@ -60,10 +68,7 @@ describe('AutoActivateMembers', () => {
   describe('it renders the component', () => {
     it('displays activated toggle', async () => {
       setup()
-      render(
-        <AutoActivateMembers autoActivate={mockResponse.planAutoActivate} />,
-        { wrapper }
-      )
+      render(<AutoActivateMembers />, { wrapper })
 
       const toggle = await screen.findByRole('button', {
         name: 'On',
@@ -75,10 +80,7 @@ describe('AutoActivateMembers', () => {
   describe('user clicks on toggle', () => {
     it('changes to off', async () => {
       const { user } = setup()
-      render(
-        <AutoActivateMembers autoActivate={mockResponse.planAutoActivate} />,
-        { wrapper }
-      )
+      render(<AutoActivateMembers />, { wrapper })
 
       let toggle = await screen.findByRole('button', { name: 'On' })
 

src/pages/AdminSettings/AdminMembers/ActivationInfo/AutoActivateMembers/AutoActivateMembers.test.jsx renamed to src/pages/AdminSettings/AdminMembers/ActivationInfo/AutoActivateMembers/AutoActivateMembers.test.tsx

@@ -1,5 +1,9 @@
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
+import { useParams } from 'react-router'
+
 import { useUpdateSelfHostedSettings } from 'services/account/useUpdateSelfHostedSettings'
-import { useSelfHostedSettings } from 'services/selfHosted'
+import { SelfHostedSettingsQueryOpts } from 'services/selfHosted/SelfHostedSettingsQueryOpts'
+import { Provider } from 'shared/api/helpers'
 import Spinner from 'ui/Spinner'
 import Toggle from 'ui/Toggle'
 
@@ -9,10 +13,18 @@ const Loader = () => (
   </div>
 )
 
+interface URLParams {
+  provider: Provider
+}
+
 function AutoActivateMembers() {
-  const { data, isLoading } = useSelfHostedSettings()
+  const { provider } = useParams<URLParams>()
+  const { data, isLoading } = useSuspenseQueryV5(
+    SelfHostedSettingsQueryOpts({ provider })
+  )
 
   const { mutate, isLoading: isMutating } = useUpdateSelfHostedSettings()
+
   if (isLoading) {
     return <Loader />
   }
@@ -24,7 +36,7 @@ function AutoActivateMembers() {
         <Toggle
           dataMarketing="auto-acitvate-members"
           label={data?.planAutoActivate ? 'On' : 'Off'}
-          value={data?.planAutoActivate}
+          value={!!data?.planAutoActivate}
           disabled={isMutating}
           onClick={() =>
             mutate({ shouldAutoActivate: !data?.planAutoActivate })

src/pages/AdminSettings/AdminMembers/ActivationInfo/AutoActivateMembers/AutoActivateMembers.jsx renamed to src/pages/AdminSettings/AdminMembers/ActivationInfo/AutoActivateMembers/AutoActivateMembers.tsx

@@ -1,8 +1,13 @@
 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 userEvent from '@testing-library/user-event'
 import { graphql, http, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
+import { Suspense } from 'react'
 import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils'
 import { MemoryRouter, Route } from 'react-router-dom'
 
@@ -61,12 +66,21 @@ const mockOpenSeatsTaken = {
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false, cacheTime: Infinity } },
 })
+
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false, cacheTime: Infinity } },
+})
+
 const wrapper = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter initialEntries={['/admin/gh/members']}>
-      <Route path="/admin/:provider/members">{children}</Route>
-    </MemoryRouter>
-  </QueryClientProvider>
+  <QueryClientProviderV5 client={queryClientV5}>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={['/admin/gh/members']}>
+        <Route path="/admin/:provider/members">
+          <Suspense fallback={<div>Loading</div>}>{children}</Suspense>
+        </Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
 const server = setupServer()
@@ -75,8 +89,9 @@ beforeAll(() => {
 })
 
 beforeEach(() => {
-  server.resetHandlers()
   queryClient.clear()
+  queryClientV5.clear()
+  server.resetHandlers()
 })
 
 afterAll(() => {