feat: add all branches as default capability to test analytics page (#3928)

Author: adrianviquez

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

@@ -222,7 +222,7 @@ const FailedTestsTable = () => {
     repo,
     ordering: getSortingOption(sorting),
     filters: {
-      branch: branch ? getDecodedBranch(branch) : undefined,
+      branch: branch ? getDecodedBranch(branch) : null,
       flags: flags as string[],
       // eslint-disable-next-line camelcase
       test_suites: testSuites as string[],

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

@@ -363,22 +363,27 @@ function MetricsSection() {
     depth: 1,
   })
 
+  const decodedBranch = getDecodedBranch(branch)
+  const selectedBranch = decodedBranch ?? null
+
   const { data: testResults } = useTestResultsAggregates({
     interval: queryParams?.historicalTrend as MeasurementInterval,
+    branch: selectedBranch,
   })
   const disabledFlakeAggregates =
     (testResults?.isTeamPlan || testResults?.isFreePlan) && testResults?.private
   const { data: flakeAggregates } = useFlakeAggregates({
     interval: queryParams?.historicalTrend as MeasurementInterval,
+    branch: selectedBranch,
     opts: {
       enabled: !disabledFlakeAggregates,
     },
   })
 
-  const decodedBranch = getDecodedBranch(branch)
-  const selectedBranch = decodedBranch ?? testResults?.defaultBranch ?? ''
-
-  if (selectedBranch !== testResults?.defaultBranch) {
+  if (
+    selectedBranch !== testResults?.defaultBranch &&
+    selectedBranch !== null
+  ) {
     return null
   }
 

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

@@ -235,27 +235,27 @@ describe('BranchSelector', () => {
       expect(branchContext).toBeInTheDocument()
     })
 
-    it('renders default branch as selected branch', async () => {
+    it('renders all branches as default selected option', async () => {
       const { queryClient } = setup()
       render(<BranchSelector />, {
         wrapper: wrapper(queryClient),
       })
 
-      const dropDownBtn = await screen.findByText('main')
+      const dropDownBtn = await screen.findByText('All Branches')
       expect(dropDownBtn).toBeInTheDocument()
     })
   })
 
   describe('navigating branches', () => {
     describe('user lands on the page', () => {
-      it('redirects to the default branch', async () => {
+      it('redirects to /tests', async () => {
         const { queryClient } = setup()
         render(<BranchSelector />, {
           wrapper: wrapper(queryClient),
         })
 
         await waitFor(() =>
-          expect(testLocation.pathname).toBe('/gh/codecov/test-repo/tests/main')
+          expect(testLocation.pathname).toBe('/gh/codecov/test-repo/tests')
         )
       })
 
@@ -274,7 +274,7 @@ describe('BranchSelector', () => {
     })
 
     describe('user selects a branch', () => {
-      it('shows default branch as first option in dropdown', async () => {
+      it('shows all branches as first option in dropdown', async () => {
         const { queryClient, user } = setup()
         render(<BranchSelector />, {
           wrapper: wrapper(queryClient),
@@ -286,7 +286,8 @@ describe('BranchSelector', () => {
         await user.click(select)
 
         const options = screen.getAllByRole('option')
-        expect(options[0]).toHaveTextContent('main')
+        expect(options[0]).toHaveTextContent('All Branches')
+        expect(options[1]).toHaveTextContent('main')
       })
 
       it('navigates to the selected branch', async () => {
@@ -367,7 +368,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')
@@ -392,7 +393,7 @@ describe('BranchSelector', () => {
         name: 'test results branch selector',
       })
 
-      expect(select).toHaveTextContent('Select branch')
+      expect(select).toHaveTextContent('All Branches')
     })
   })
 })

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

@@ -15,6 +15,8 @@ interface URLParams {
   branch?: string
 }
 
+export const ALL_BRANCHES = 'All Branches'
+
 const getDecodedBranch = (branch?: string) =>
   branch ? decodeURIComponent(branch) : undefined
 
@@ -45,44 +47,34 @@ const BranchSelector = () => {
     },
   })
 
-  const decodedBranch = getDecodedBranch(branch)
-  const selectedBranch = decodedBranch ?? overview?.defaultBranch ?? ''
+  const decodedBranch = getDecodedBranch(branch) ?? ''
 
   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',
+      name: ALL_BRANCHES,
       head: null,
     }
   }
 
-  if (
-    selectedBranch === overview?.defaultBranch &&
-    !branch &&
-    selection.head !== null
-  ) {
-    history.push(
-      failedTestsLink.path({ branch: encodeURIComponent(selection?.name) })
-    )
-  }
-
   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: ALL_BRANCHES, head: null },
         { name: overview.defaultBranch, head: null },
         ...branchList.branches.filter(
           (branch) => branch.name !== overview.defaultBranch
@@ -109,7 +101,12 @@ const BranchSelector = () => {
           value={selection}
           onChange={(item: Branch) => {
             history.push(
-              failedTestsLink.path({ branch: encodeURIComponent(item?.name) })
+              failedTestsLink.path({
+                branch:
+                  item?.name === ALL_BRANCHES
+                    ? ''
+                    : encodeURIComponent(item?.name),
+              })
             )
           }}
           variant="gray"

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

@@ -91,7 +91,7 @@ function SelectorSection() {
   return (
     <div className="flex flex-1 flex-col gap-2 md:flex-row md:justify-between md:gap-0">
       <BranchSelector />
-      {selectedBranch === overview?.defaultBranch ? (
+      {selectedBranch === overview?.defaultBranch || selectedBranch === null ? (
         <>
           <div className="flex flex-col gap-1 px-4">
             <h3 className="text-sm font-semibold text-ds-gray-octonary">

src/pages/RepoPage/FailedTestsTab/FailedTestsPage/hooks/useFlakeAggregates/useFlakeAggregates.tsx

@@ -36,14 +36,15 @@ const query = `
   query GetFlakeAggregates(
     $owner: String!
     $repo: String!
+    $branch: String
     $interval: MeasurementInterval
   ) {
     owner(username: $owner) {
       repository: repository(name: $repo) {
         __typename
         ... on Repository {
             testAnalytics {
-              flakeAggregates(interval: $interval) {
+              flakeAggregates(branch: $branch, interval: $interval) {
                 flakeCount
                 flakeCountPercentChange
                 flakeRate
@@ -72,17 +73,19 @@ interface UseFlakeAggregatesOptions {
 
 interface UseFlakeAggregatesParams {
   interval?: MeasurementInterval
+  branch?: string | null
   opts?: UseFlakeAggregatesOptions
 }
 
 export const useFlakeAggregates = ({
   interval,
   opts,
+  branch,
 }: UseFlakeAggregatesParams = {}) => {
   const { provider, owner, repo } = useParams<URLParams>()
 
   return useQuery({
-    queryKey: ['GetFlakeAggregates', provider, owner, repo, interval],
+    queryKey: ['GetFlakeAggregates', provider, owner, repo, interval, branch],
     queryFn: ({ signal }) =>
       Api.graphql({
         provider,
@@ -92,6 +95,7 @@ export const useFlakeAggregates = ({
           provider,
           owner,
           repo,
+          branch,
           interval,
         },
       }).then((res) => {

src/pages/RepoPage/FailedTestsTab/FailedTestsPage/hooks/useInfiniteTestResults/useInfiniteTestResults.tsx

@@ -170,7 +170,7 @@ interface UseTestResultsArgs {
   owner: string
   repo: string
   filters?: {
-    branch?: string
+    branch?: string | null
     flags?: string[]
     interval?: MeasurementInterval
     parameter?: TestResultsFilterParameterType

src/pages/RepoPage/FailedTestsTab/FailedTestsPage/hooks/useTestResultsAggregates/useTestResultsAggregates.tsx

@@ -52,6 +52,7 @@ const query = `
   query GetTestResultsAggregates(
     $owner: String!
     $repo: String!
+    $branch: String
     $interval: MeasurementInterval
   ) {
     owner(username: $owner) {
@@ -66,7 +67,7 @@ const query = `
             private
             defaultBranch
             testAnalytics {
-              testResultsAggregates(interval: $interval) {
+              testResultsAggregates(branch: $branch, interval: $interval) {
                 totalDuration
                 totalDurationPercentChange
                 slowestTestsDuration
@@ -96,13 +97,22 @@ interface URLParams {
 
 export const useTestResultsAggregates = ({
   interval,
+  branch,
 }: {
   interval?: MeasurementInterval
+  branch?: string | null
 }) => {
   const { provider, owner, repo } = useParams<URLParams>()
 
   return useQuery({
-    queryKey: ['GetTestResultsAggregates', provider, owner, repo, interval],
+    queryKey: [
+      'GetTestResultsAggregates',
+      provider,
+      owner,
+      repo,
+      interval,
+      branch,
+    ],
     queryFn: ({ signal }) =>
       Api.graphql({
         provider,
@@ -112,6 +122,7 @@ export const useTestResultsAggregates = ({
           provider,
           owner,
           repo,
+          branch,
           interval,
         },
       }).then((res) => {