chore: Migrate useIgnoredIds to TS Query V5 (#3547)

src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadItem.test.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, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { MemoryRouter, Route } from 'react-router-dom'
 
+import { IgnoredIdsQueryOptions } from 'pages/CommitDetailPage/queries/IgnoredIdsQueryOptions'
 import { formatTimeToNow } from 'shared/utils/dates'
 import { Upload } from 'shared/utils/extractUploads'
 
@@ -26,21 +31,25 @@ const mockUpload: Upload = {
 }
 
 const queryClient = new QueryClient()
+const queryClientV5 = new QueryClientV5()
 
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter
-      initialEntries={[
-        '/gh/codecov/codecov-api/commit/a758cb364d190e9677ae2a3dd3b2af7690971624',
-      ]}
-    >
-      <Route path="/gh/:owner/:repo/commit/:commit">{children}</Route>
-    </MemoryRouter>
-  </QueryClientProvider>
+  <QueryClientProviderV5 client={queryClientV5}>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter
+        initialEntries={[
+          '/gh/codecov/codecov-api/commit/a758cb364d190e9677ae2a3dd3b2af7690971624',
+        ]}
+      >
+        <Route path="/gh/:owner/:repo/commit/:commit">{children}</Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
 })
 
 describe('UploadsCard', () => {
@@ -497,9 +506,9 @@ describe('UploadsCard', () => {
       await user.click(checkbox)
 
       await waitFor(() =>
-        expect(queryClient.getQueryData(['IgnoredUploadIds'])).toStrictEqual([
-          0,
-        ])
+        expect(
+          queryClientV5.getQueryData(IgnoredIdsQueryOptions().queryKey)
+        ).toStrictEqual([0])
       )
     })
 
@@ -511,11 +520,15 @@ describe('UploadsCard', () => {
       const checkbox = screen.getByRole('checkbox')
       await user.click(checkbox)
 
-      expect(queryClient.getQueryData(['IgnoredUploadIds'])).toStrictEqual([0])
+      expect(
+        queryClientV5.getQueryData(IgnoredIdsQueryOptions().queryKey)
+      ).toStrictEqual([0])
 
       await user.click(checkbox)
 
-      expect(queryClient.getQueryData(['IgnoredUploadIds'])).toStrictEqual([])
+      expect(
+        queryClientV5.getQueryData(IgnoredIdsQueryOptions().queryKey)
+      ).toStrictEqual([])
     })
 
     it('handles null id gracefully', async () => {

src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadItem.tsx

@@ -1,7 +1,8 @@
-import { useQueryClient } from '@tanstack/react-query'
+import { useQueryClient as useQueryClientV5 } from '@tanstack/react-queryV5'
 import without from 'lodash/without'
 import { useEffect, useState } from 'react'
 
+import { IgnoredIdsQueryOptions } from 'pages/CommitDetailPage/queries/IgnoredIdsQueryOptions'
 import { UploadTypeEnum } from 'shared/utils/commit'
 import { formatTimeToNow } from 'shared/utils/dates'
 import { Upload } from 'shared/utils/extractUploads'
@@ -35,7 +36,7 @@ const UploadItem = ({
   onSelectChange = () => {},
 }: UploadProps) => {
   const [checked, setChecked] = useState(true)
-  const queryClient = useQueryClient()
+  const queryClientV5 = useQueryClientV5()
   const isCarriedForward = uploadType === UploadTypeEnum.CARRIED_FORWARD
 
   useEffect(() => setChecked(isSelected ?? true), [isSelected])
@@ -53,13 +54,13 @@ const UploadItem = ({
 
               if (checked && id != null) {
                 // User is unchecking
-                queryClient.setQueryData(
-                  ['IgnoredUploadIds'],
+                queryClientV5.setQueryData(
+                  IgnoredIdsQueryOptions().queryKey,
                   (oldData?: number[]) => [...(oldData ?? []), id]
                 )
               } else if (id != null) {
-                queryClient.setQueryData(
-                  ['IgnoredUploadIds'],
+                queryClientV5.setQueryData(
+                  IgnoredIdsQueryOptions().queryKey,
                   (oldData?: number[]) => without(oldData, id)
                 )
               }

src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx

@@ -1,16 +1,21 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+} from '@tanstack/react-queryV5'
 import {
   render,
   screen,
   waitFor,
   waitForElementToBeRemoved,
-} from 'custom-testing-library'
-
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
+import { IgnoredIdsQueryOptions } from 'pages/CommitDetailPage/queries/IgnoredIdsQueryOptions'
+
 import UploadsCard from './UploadsCard'
 import { useUploads } from './useUploads'
 
@@ -22,34 +27,39 @@ const mocks = vi.hoisted(() => ({
 vi.mock('./useUploads', async () => mocks)
 vi.mock('services/commitErrors', async () => mocks)
 
+const server = setupServer()
 const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      suspense: true,
-      retry: false,
-    },
-  },
+  defaultOptions: { queries: { suspense: true, retry: false } },
+})
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
 })
-const server = setupServer()
 
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter initialEntries={['/gh/codecov/gazebo/1234']}>
-      <Route path="/:provider/:owner/:repo/:commit">{children}</Route>
-    </MemoryRouter>
-  </QueryClientProvider>
+  <QueryClientProviderV5 client={queryClientV5}>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={['/gh/codecov/gazebo/1234']}>
+        <Route path="/:provider/:owner/:repo/:commit">{children}</Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
 beforeAll(() => {
   console.error = () => {}
   server.listen()
 })
+
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
   vi.clearAllMocks()
 })
-afterAll(() => server.close())
+
+afterAll(() => {
+  server.close()
+})
 
 interface MockCommitErrors {
   data: {
@@ -193,6 +203,7 @@ describe('UploadsCard', () => {
       const covReportHistory = screen.getByText(/Coverage reports history/)
       expect(covReportHistory).toBeInTheDocument()
     })
+
     it('renders different cis', () => {
       render(<UploadsCard />, { wrapper })
 
@@ -201,6 +212,7 @@ describe('UploadsCard', () => {
       const travis = screen.getByText(/travis/)
       expect(travis).toBeInTheDocument()
     })
+
     it('renders build ids', () => {
       render(<UploadsCard />, { wrapper })
 
@@ -215,6 +227,7 @@ describe('UploadsCard', () => {
       const id5 = screen.getByText(/837462/)
       expect(id5).toBeInTheDocument()
     })
+
     it('renders flags', () => {
       render(<UploadsCard />, { wrapper })
 
@@ -255,6 +268,7 @@ describe('UploadsCard', () => {
       expect(currentlyNoUploads).toBeInTheDocument()
     })
   })
+
   describe('renders empty Uploads', () => {
     // ??
     beforeEach(() => {
@@ -276,6 +290,7 @@ describe('UploadsCard', () => {
       expect(uploads).toBeInTheDocument()
     })
   })
+
   describe('The yaml viewer', () => {
     beforeEach(() => {
       setup({
@@ -815,6 +830,7 @@ describe('UploadsCard', () => {
       })
     })
   })
+
   describe('select all interactor', () => {
     beforeEach(() => {
       setup({
@@ -908,32 +924,47 @@ describe('UploadsCard', () => {
       })
     })
 
-    it('unselects all when clicked', async () => {
-      const user = userEvent.setup()
-      render(<UploadsCard />, { wrapper })
+    describe('unselects all when clicked', () => {
+      it('unselects all when clicked', async () => {
+        const user = userEvent.setup()
+        render(<UploadsCard />, { wrapper })
 
-      const checkboxes = screen.getAllByRole('checkbox')
-      const travisCheckbox = checkboxes[0]
-      const travisUploadCheckbox1 = checkboxes[1]
-      const travisUploadCheckbox2 = checkboxes[2]
+        const checkboxes = screen.getAllByRole('checkbox')
+        const travisCheckbox = checkboxes[0]
+        const travisUploadCheckbox1 = checkboxes[1]
+        const travisUploadCheckbox2 = checkboxes[2]
 
-      expect(travisCheckbox).toBeChecked()
-      expect(travisUploadCheckbox1).toBeChecked()
-      expect(travisUploadCheckbox2).toBeChecked()
+        expect(travisCheckbox).toBeChecked()
+        expect(travisUploadCheckbox1).toBeChecked()
+        expect(travisUploadCheckbox2).toBeChecked()
 
-      await user.click(travisCheckbox!)
+        await user.click(travisCheckbox!)
 
-      expect(travisCheckbox).not.toBeChecked()
-      expect(travisUploadCheckbox1).not.toBeChecked()
-      expect(travisUploadCheckbox2).not.toBeChecked()
-
-      // 'circleci' uploads remain checked
-      const circleciCheckbox = checkboxes[3]
-      const circleciUploadCheckbox1 = checkboxes[4]
-      const circleciUploadCheckbox2 = checkboxes[5]
-      expect(circleciCheckbox).toBeChecked()
-      expect(circleciUploadCheckbox1).toBeChecked()
-      expect(circleciUploadCheckbox2).toBeChecked()
+        expect(travisCheckbox).not.toBeChecked()
+        expect(travisUploadCheckbox1).not.toBeChecked()
+        expect(travisUploadCheckbox2).not.toBeChecked()
+
+        // 'circleci' uploads remain checked
+        const circleciCheckbox = checkboxes[3]
+        const circleciUploadCheckbox1 = checkboxes[4]
+        const circleciUploadCheckbox2 = checkboxes[5]
+        expect(circleciCheckbox).toBeChecked()
+        expect(circleciUploadCheckbox1).toBeChecked()
+        expect(circleciUploadCheckbox2).toBeChecked()
+      })
+
+      it('adds ids to ignored ids query', async () => {
+        const user = userEvent.setup()
+        render(<UploadsCard />, { wrapper })
+
+        const checkboxes = screen.getAllByRole('checkbox')
+        const travisCheckbox = checkboxes[0]
+        await user.click(travisCheckbox!)
+
+        expect(
+          queryClientV5.getQueryData(IgnoredIdsQueryOptions().queryKey)
+        ).toEqual([0, 1])
+      })
     })
 
     it('shows an intermediate state', async () => {

src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.tsx

@@ -1,6 +1,8 @@
+import { useQueryClient as useQueryClientV5 } from '@tanstack/react-queryV5'
 import flatMap from 'lodash/flatMap'
 import { Fragment, useState } from 'react'
 
+import { IgnoredIdsQueryOptions } from 'pages/CommitDetailPage/queries/IgnoredIdsQueryOptions'
 import { useCommitErrors } from 'services/commitErrors'
 import { cn } from 'shared/utils/cn'
 import { NONE } from 'shared/utils/extractUploads'
@@ -28,6 +30,7 @@ export const SelectState = {
 } as const
 
 function UploadsCard() {
+  const queryClientV5 = useQueryClientV5()
   const [showYAMLModal, setShowYAMLModal] = useState(false)
   const [uploadFilters, setUploadFilters] = useState<UploadFilters>({
     flagErrors: false,
@@ -52,10 +55,22 @@ function UploadsCard() {
     const providerUploads = groupedUploads[provider]
     const providerUploadsIndex = providerUploads?.map((_, i) => i)
     const providerList = new Set(providerUploadsIndex)
-    setSelectedProviderSelectedUploads((prevState) => ({
-      ...prevState,
-      [provider]: new Set(providerUploadsIndex),
-    }))
+    setSelectedProviderSelectedUploads((prevState) => {
+      const updatedIds = {
+        ...prevState,
+        [provider]: new Set(providerUploadsIndex),
+      }
+
+      // Ids added are ignored, so we need to use the previous state to remove them, we also use a Set to remove duplicates
+      queryClientV5.setQueryData(
+        IgnoredIdsQueryOptions().queryKey,
+        Array.from(
+          new Set(Object.values(prevState).flatMap((ids) => Array.from(ids)))
+        )
+      )
+
+      return updatedIds
+    })
     return providerList
   }
 
@@ -75,13 +90,24 @@ function UploadsCard() {
   }
 
   const handleSelectAllForProviderGroup = (provider: string) => {
-    setSelectedProviderSelectedUploads((prevState) => ({
-      ...prevState,
-      [provider]:
-        determineCheckboxState(provider) === SelectState.NONE_SELECTED
-          ? fillSelectedUploads(provider)
-          : new Set(),
-    }))
+    setSelectedProviderSelectedUploads((prevState) => {
+      const updatedIds = {
+        ...prevState,
+        [provider]:
+          determineCheckboxState(provider) === SelectState.NONE_SELECTED
+            ? fillSelectedUploads(provider)
+            : new Set<number>(),
+      }
+
+      // Ids added are ignored, so we need to use the previous state to remove them, we also use a Set to remove duplicates
+      queryClientV5.setQueryData(
+        IgnoredIdsQueryOptions().queryKey,
+        Array.from(
+          new Set(Object.values(prevState).flatMap((ids) => Array.from(ids)))
+        )
+      )
+      return updatedIds
+    })
   }
 
   const determineCheckboxIcon = (title: string) => {