feat: add support for all branches in failed tests tab

basically we're going to be encoding a null branch parameter as specifying
"all branches". So if a user goes to `<service>/<owner>/<repo>/tests` they
will no longer get redirected or told to select a branch, we'll first attempt
to fetch the results for all branches from the API.

This change will rely on the change to the API which changes the default value
of the branch when it's undefined to fetch the "all branches" data instead of the
repo's default branch's data.

Author: joseph-sentry

src/pages/RepoPage/FailedTestsTab/FailedTestsPage/FailedTestsTable/FailedTestsTable.tsx

@@ -336,7 +336,8 @@ const FailedTestsTable = () => {
         <div className="mt-4 text-center text-ds-gray-quinary">
           <p>No data yet</p>
           <p>
-            To see data for the main branch, merge your PR into the main branch.
+            To see data for the {testData?.defaultBranch} branch, merge your PR
+            into the {testData?.defaultBranch} branch.
           </p>
         </div>
       </div>

src/pages/RepoPage/FailedTestsTab/FailedTestsPage/MetricsSection/MetricsSection.test.tsx

@@ -148,11 +148,14 @@ describe('MetricsSection', () => {
     })
   })
 
-  describe('when on default branch', () => {
+  describe.each([
+    ['default branch', 'main'],
+    ['all branches', ''],
+  ])('when on %s', (_, encodedBranch) => {
     it('renders subheaders', async () => {
       setup()
       render(<MetricsSection />, {
-        wrapper: wrapper('/gh/owner/repo/tests/main'),
+        wrapper: wrapper(`/gh/owner/repo/tests/${encodedBranch}`),
       })
 
       const runEfficiency = await screen.findByText('Improve CI Run Efficiency')
@@ -164,7 +167,7 @@ describe('MetricsSection', () => {
     it('renders total test runtime card', async () => {
       setup()
       render(<MetricsSection />, {
-        wrapper: wrapper('/gh/owner/repo/tests/main'),
+        wrapper: wrapper(`/gh/owner/repo/tests/${encodedBranch}`),
       })
 
       const title = await screen.findByText('Total test run time')
@@ -182,7 +185,7 @@ describe('MetricsSection', () => {
       it('renders slowest tests card', async () => {
         setup()
         render(<MetricsSection />, {
-          wrapper: wrapper('/gh/owner/repo/tests/main'),
+          wrapper: wrapper(`/gh/owner/repo/tests/${encodedBranch}`),
         })
 
         const title = await screen.findByText('Slowest tests')
@@ -199,7 +202,7 @@ describe('MetricsSection', () => {
       it('can update the location params on button click', async () => {
         const { user } = setup()
         render(<MetricsSection />, {
-          wrapper: wrapper('/gh/owner/repo/tests/main'),
+          wrapper: wrapper(`/gh/owner/repo/tests/${encodedBranch}`),
         })
         const select = await screen.findByText('12')
         expect(select).toBeInTheDocument()
@@ -217,7 +220,7 @@ describe('MetricsSection', () => {
       it('removes the location param on second button click', async () => {
         const { user } = setup()
         render(<MetricsSection />, {
-          wrapper: wrapper('/gh/owner/repo/tests/main'),
+          wrapper: wrapper(`/gh/owner/repo/tests/${encodedBranch}`),
         })
         const select = await screen.findByText('12')
         expect(select).toBeInTheDocument()
@@ -239,7 +242,7 @@ describe('MetricsSection', () => {
       it('renders total flaky tests card', async () => {
         setup()
         render(<MetricsSection />, {
-          wrapper: wrapper('/gh/owner/repo/tests/main'),
+          wrapper: wrapper(`/gh/owner/repo/tests/${encodedBranch}`),
         })
 
         const title = await screen.findByText('Flaky tests')
@@ -256,7 +259,7 @@ describe('MetricsSection', () => {
       it('can update the location params on button click', async () => {
         const { user } = setup()
         render(<MetricsSection />, {
-          wrapper: wrapper('/gh/owner/repo/tests/main'),
+          wrapper: wrapper(`/gh/owner/repo/tests/${encodedBranch}`),
         })
         const select = await screen.findByText(88)
         expect(select).toBeInTheDocument()
@@ -274,7 +277,7 @@ describe('MetricsSection', () => {
       it('removes the location param on second button click', async () => {
         const { user } = setup()
         render(<MetricsSection />, {
-          wrapper: wrapper('/gh/owner/repo/tests/main'),
+          wrapper: wrapper(`/gh/owner/repo/tests/${encodedBranch}`),
         })
         const select = await screen.findByText(88)
         expect(select).toBeInTheDocument()
@@ -313,7 +316,7 @@ describe('MetricsSection', () => {
       it('renders total failures card', async () => {
         setup()
         render(<MetricsSection />, {
-          wrapper: wrapper('/gh/owner/repo/tests/main'),
+          wrapper: wrapper(`/gh/owner/repo/tests/${encodedBranch}`),
         })
 
         const title = await screen.findByText('Cumulative Failures')
@@ -330,7 +333,7 @@ describe('MetricsSection', () => {
       it('can update the location params on button click', async () => {
         const { user } = setup()
         render(<MetricsSection />, {
-          wrapper: wrapper('/gh/owner/repo/tests/main'),
+          wrapper: wrapper(`/gh/owner/repo/tests/${encodedBranch}`),
         })
         const select = await screen.findByText(1)
         expect(select).toBeInTheDocument()
@@ -370,7 +373,7 @@ describe('MetricsSection', () => {
       it('renders total skips card', async () => {
         setup()
         render(<MetricsSection />, {
-          wrapper: wrapper('/gh/owner/repo/tests/main'),
+          wrapper: wrapper(`/gh/owner/repo/tests/${encodedBranch}`),
         })
 
         const title = await screen.findByText('Skipped tests')
@@ -387,7 +390,7 @@ describe('MetricsSection', () => {
       it('can update the location params on button click', async () => {
         const { user } = setup()
         render(<MetricsSection />, {
-          wrapper: wrapper('/gh/owner/repo/tests/main'),
+          wrapper: wrapper(`/gh/owner/repo/tests/${encodedBranch}`),
         })
         const select = await screen.findByText(20)
         expect(select).toBeInTheDocument()
@@ -405,7 +408,7 @@ describe('MetricsSection', () => {
       it('removes the location param on second button click', async () => {
         const { user } = setup()
         render(<MetricsSection />, {
-          wrapper: wrapper('/gh/owner/repo/tests/main'),
+          wrapper: wrapper(`/gh/owner/repo/tests/${encodedBranch}`),
         })
         const select = await screen.findByText(20)
         expect(select).toBeInTheDocument()

src/pages/RepoPage/FailedTestsTab/FailedTestsPage/MetricsSection/MetricsSection.tsx

@@ -377,9 +377,12 @@ function MetricsSection() {
   })
 
   const decodedBranch = getDecodedBranch(branch)
-  const selectedBranch = decodedBranch ?? testResults?.defaultBranch ?? ''
+  const selectedBranch = decodedBranch
 
-  if (selectedBranch !== testResults?.defaultBranch) {
+  if (
+    selectedBranch !== undefined &&
+    selectedBranch !== testResults?.defaultBranch
+  ) {
     return null
   }
 

src/pages/RepoPage/FailedTestsTab/FailedTestsPage/SelectorSection/BranchSelector/BranchSelector.test.tsx

@@ -134,6 +134,7 @@ interface SetupArgs {
   hasNextPage?: boolean
   nullOverview?: boolean
   nullHead?: boolean
+  nullBranch?: boolean
 }
 
 describe('BranchSelector', () => {
@@ -142,10 +143,12 @@ describe('BranchSelector', () => {
       hasNextPage = false,
       nullOverview = false,
       nullHead = false,
+      nullBranch = false,
     }: SetupArgs = {
       hasNextPage: false,
       nullOverview: false,
       nullHead: false,
+      nullBranch: false,
     }
   ) {
     const user = userEvent.setup()
@@ -182,6 +185,16 @@ describe('BranchSelector', () => {
           branch = info.variables?.branch
         }
 
+        if (nullBranch) {
+          return HttpResponse.json({
+            data: {
+              owner: {
+                repository: { __typename: 'Repository', branch: null },
+              },
+            },
+          })
+        }
+
         let mockedBranch = mockBranch(branch)
         if (nullHead) {
           mockedBranch = mockBranch(branch, null)
@@ -241,7 +254,7 @@ describe('BranchSelector', () => {
         wrapper: wrapper(queryClient),
       })
 
-      const dropDownBtn = await screen.findByText('main')
+      const dropDownBtn = await screen.findByText('All branches')
       expect(dropDownBtn).toBeInTheDocument()
     })
   })
@@ -255,7 +268,7 @@ describe('BranchSelector', () => {
         })
 
         await waitFor(() =>
-          expect(testLocation.pathname).toBe('/gh/codecov/test-repo/tests/main')
+          expect(testLocation.pathname).toBe('/gh/codecov/test-repo/tests')
         )
       })
 
@@ -286,7 +299,7 @@ describe('BranchSelector', () => {
         await user.click(select)
 
         const options = screen.getAllByRole('option')
-        expect(options[0]).toHaveTextContent('main')
+        expect(options[0]).toHaveTextContent('All branches')
       })
 
       it('navigates to the selected branch', async () => {
@@ -367,7 +380,7 @@ describe('BranchSelector', () => {
         wrapper: wrapper(queryClient),
       })
 
-      const select = await screen.findByText('main')
+      const select = await screen.findByText('All branches')
       await user.click(select)
 
       const input = await screen.findByRole('combobox')
@@ -383,9 +396,13 @@ describe('BranchSelector', () => {
     it('displays select a branch in the button', async () => {
       const { queryClient } = setup({
         nullOverview: true,
+        nullBranch: true,
       })
       render(<BranchSelector />, {
-        wrapper: wrapper(queryClient),
+        wrapper: wrapper(
+          queryClient,
+          '/gh/codecov/test-repo/tests/nonexistent-branch'
+        ),
       })
 
       const select = await screen.findByRole('button', {

src/pages/RepoPage/FailedTestsTab/FailedTestsPage/SelectorSection/BranchSelector/BranchSelector.tsx

@@ -15,6 +15,14 @@ interface URLParams {
   branch?: string
 }
 
+type Head = { commitid: string } | null
+
+interface BranchSelection {
+  name: string
+  value: string
+  head: Head
+}
+
 const getDecodedBranch = (branch?: string) =>
   branch ? decodeURIComponent(branch) : undefined
 
@@ -46,50 +54,60 @@ const BranchSelector = () => {
   })
 
   const decodedBranch = getDecodedBranch(branch)
-  const selectedBranch = decodedBranch ?? overview?.defaultBranch ?? ''
 
   const { data: searchBranchValue } = useBranch({
     provider,
     owner,
     repo,
-    branch: selectedBranch,
+    branch: decodedBranch,
     opts: {
-      queryKey: ['GetSelectedBranch', provider, owner, repo, selectedBranch],
-      enabled: !!selectedBranch,
+      queryKey: ['GetSelectedBranch', provider, owner, repo, decodedBranch],
+      enabled: !!decodedBranch,
     },
   })
 
-  let selection = searchBranchValue?.branch
-  if (!selection) {
-    selection = {
-      name: 'Select branch',
-      head: null,
-    }
-  }
-
-  if (
-    selectedBranch === overview?.defaultBranch &&
-    !branch &&
-    selection.head !== null
-  ) {
-    history.push(
-      failedTestsLink.path({ branch: encodeURIComponent(selection?.name) })
-    )
-  }
+  const selection: BranchSelection = searchBranchValue?.branch
+    ? {
+        name: searchBranchValue.branch.name,
+        value: searchBranchValue.branch.name,
+        head: searchBranchValue.branch.head,
+      }
+    : branch
+      ? {
+          name: 'Select branch',
+          value: branch,
+          head: null,
+        }
+      : {
+          name: 'All branches',
+          value: '',
+          head: null,
+        }
 
   const sortedBranchList = useMemo(() => {
-    if (!branchList?.branches) return []
-
-    if (overview?.defaultBranch) {
-      return [
-        // Pins the default branch to the top of the list always, filters it from results otherwise
-        { name: overview.defaultBranch, head: null },
-        ...branchList.branches.filter(
-          (branch) => branch.name !== overview.defaultBranch
-        ),
-      ]
+    if (!branchList?.branches?.length) return []
+
+    const allBranches = { name: 'All branches', value: '', head: null as Head }
+    const defaultBranch = overview?.defaultBranch
+      ? {
+          name: overview.defaultBranch,
+          value: overview.defaultBranch,
+          head: null as Head,
+        }
+      : undefined
+    const branches = branchList.branches
+      .filter((branch) => branch.name !== defaultBranch?.name)
+      .map((branch) => ({
+        name: branch.name,
+        value: branch.name,
+        head: branch.head,
+      }))
+
+    if (defaultBranch) {
+      return [allBranches, defaultBranch, ...branches]
     }
-    return branchList.branches
+
+    return [allBranches, ...branches]
   }, [overview?.defaultBranch, branchList.branches])
 
   return (
@@ -107,9 +125,11 @@ const BranchSelector = () => {
           ariaName="test results branch selector"
           items={sortedBranchList}
           value={selection}
-          onChange={(item: Branch) => {
+          onChange={(item: BranchSelection) => {
             history.push(
-              failedTestsLink.path({ branch: encodeURIComponent(item?.name) })
+              failedTestsLink.path({
+                branch: encodeURIComponent(item?.value),
+              })
             )
           }}
           variant="gray"

src/pages/RepoPage/FailedTestsTab/FailedTestsPage/SelectorSection/SelectorSection.test.tsx

@@ -178,11 +178,14 @@ describe('SelectorSection', () => {
     })
   })
 
-  describe('when on default branch', () => {
+  describe.each([
+    ['default branch', 'main'],
+    ['all branches', ''],
+  ])('when on %s', (_, encodedBranch) => {
     it('has all four selectors', async () => {
       setup()
       render(<SelectorSection />, {
-        wrapper: wrapper('/gh/owner/repo/tests/main'),
+        wrapper: wrapper(`/gh/owner/repo/tests/${encodedBranch}`),
       })
 
       const branchSelector = await screen.findByText('Branch Context')
@@ -198,7 +201,7 @@ describe('SelectorSection', () => {
     it('has 60 day retention link', async () => {
       setup()
       render(<SelectorSection />, {
-        wrapper: wrapper('/gh/owner/repo/tests/main'),
+        wrapper: wrapper(`/gh/owner/repo/tests/${encodedBranch}`),
       })
 
       const link = await screen.findByRole('link')