get all selector working as well

Author: nicholas-codecov

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

@@ -14,6 +14,8 @@ 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'
 
@@ -47,13 +49,17 @@ beforeAll(() => {
   console.error = () => {}
   server.listen()
 })
+
 afterEach(() => {
   queryClient.clear()
   queryClientV5.clear()
   server.resetHandlers()
   vi.clearAllMocks()
 })
-afterAll(() => server.close())
+
+afterAll(() => {
+  server.close()
+})
 
 interface MockCommitErrors {
   data: {
@@ -197,6 +203,7 @@ describe('UploadsCard', () => {
       const covReportHistory = screen.getByText(/Coverage reports history/)
       expect(covReportHistory).toBeInTheDocument()
     })
+
     it('renders different cis', () => {
       render(<UploadsCard />, { wrapper })
 
@@ -205,6 +212,7 @@ describe('UploadsCard', () => {
       const travis = screen.getByText(/travis/)
       expect(travis).toBeInTheDocument()
     })
+
     it('renders build ids', () => {
       render(<UploadsCard />, { wrapper })
 
@@ -219,6 +227,7 @@ describe('UploadsCard', () => {
       const id5 = screen.getByText(/837462/)
       expect(id5).toBeInTheDocument()
     })
+
     it('renders flags', () => {
       render(<UploadsCard />, { wrapper })
 
@@ -259,6 +268,7 @@ describe('UploadsCard', () => {
       expect(currentlyNoUploads).toBeInTheDocument()
     })
   })
+
   describe('renders empty Uploads', () => {
     // ??
     beforeEach(() => {
@@ -280,6 +290,7 @@ describe('UploadsCard', () => {
       expect(uploads).toBeInTheDocument()
     })
   })
+
   describe('The yaml viewer', () => {
     beforeEach(() => {
       setup({
@@ -819,6 +830,7 @@ describe('UploadsCard', () => {
       })
     })
   })
+
   describe('select all interactor', () => {
     beforeEach(() => {
       setup({
@@ -912,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) => {