From 5c6da6fa3203ce06c1a4fb97827071f08023c024 Mon Sep 17 00:00:00 2001
From: Rula Abu Hasna <rula@codecov.io>
Date: Wed, 18 Oct 2023 15:03:18 +0200
Subject: [PATCH 01/11] Update with service less requests

---
 src/App.jsx                                   |   6 +
 src/App.spec.jsx                              |  10 ++
 src/layouts/BaseLayout/BaseLayout.jsx         |   7 +-
 src/layouts/BaseLayout/BaseLayout.spec.jsx    |  37 ++--
 src/pages/TermsOfService/TermsOfService.jsx   |  34 +++-
 .../TermsOfService/TermsOfService.spec.jsx    | 163 +++++++++++-------
 .../hooks/useTermsOfService.spec.tsx          |   9 +-
 .../TermsOfService/hooks/useTermsOfService.ts |  55 ++----
 src/services/user/useInternalUser.ts          |   1 +
 src/shared/api/api.js                         |  15 +-
 10 files changed, 192 insertions(+), 145 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 926b52e10c..e6892ea51c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -25,6 +25,7 @@ const OwnerPage = lazy(() => import('./pages/OwnerPage'))
 const PullRequestPage = lazy(() => import('./pages/PullRequestPage'))
 const RepoPage = lazy(() => import('./pages/RepoPage'))
 const SyncProviderPage = lazy(() => import('./pages/SyncProviderPage'))
+const TermsOfService = lazy(() => import('pages/TermsOfService'))
 
 const HomePageRedirect = () => {
   const { provider } = useParams()
@@ -60,6 +61,11 @@ const MainAppRoutes = () => (
         <SyncProviderPage />
       </BaseLayout>
     </SentryRoute>
+    <SentryRoute path="/terms" exact>
+      <BaseLayout>
+        <TermsOfService />
+      </BaseLayout>
+    </SentryRoute>
     {config.IS_SELF_HOSTED && (
       <SentryRoute path="/admin/:provider">
         <BaseLayout>
diff --git a/src/App.spec.jsx b/src/App.spec.jsx
index 6d54f9e1ac..76af45102c 100644
--- a/src/App.spec.jsx
+++ b/src/App.spec.jsx
@@ -276,6 +276,16 @@ describe('App', () => {
         },
       },
     ],
+    [
+      {
+        testLabel: 'TOSPage',
+        pathname: '/terms',
+        expected: {
+          page: /TermsOfService/i,
+          location: '/terms',
+        },
+      },
+    ],
   ]
 
   describe.each(cloudFullRouterCases)(
diff --git a/src/layouts/BaseLayout/BaseLayout.jsx b/src/layouts/BaseLayout/BaseLayout.jsx
index 936970bb12..01929a1b9b 100644
--- a/src/layouts/BaseLayout/BaseLayout.jsx
+++ b/src/layouts/BaseLayout/BaseLayout.jsx
@@ -17,7 +17,6 @@ import { useUserAccessGate } from './hooks/useUserAccessGate'
 const LimitedHeader = lazy(() => import('layouts/LimitedHeader'))
 const DefaultOrgSelector = lazy(() => import('pages/DefaultOrgSelector'))
 const InstallationHelpBanner = lazy(() => import('./InstallationHelpBanner'))
-const TermsOfService = lazy(() => import('pages/TermsOfService'))
 
 const FullPageLoader = () => (
   <div className="mt-16 flex flex-1 items-center justify-center">
@@ -36,11 +35,7 @@ const OnboardingOrChildren = ({ children }) => {
   const { isImpersonating } = useImpersonate()
 
   if (showAgreeToTerms && !isFullExperience) {
-    return (
-      <Suspense fallback={null}>
-        <TermsOfService />
-      </Suspense>
-    )
+    return <Redirect to="/terms" />
   }
 
   if (redirectToSyncPage && !isFullExperience) {
diff --git a/src/layouts/BaseLayout/BaseLayout.spec.jsx b/src/layouts/BaseLayout/BaseLayout.spec.jsx
index ee55dabbc0..2323b62e96 100644
--- a/src/layouts/BaseLayout/BaseLayout.spec.jsx
+++ b/src/layouts/BaseLayout/BaseLayout.spec.jsx
@@ -17,7 +17,6 @@ jest.mock('services/impersonate')
 jest.mock('shared/featureFlags')
 jest.mock('shared/GlobalTopBanners', () => () => 'GlobalTopBanners')
 jest.mock('./InstallationHelpBanner', () => () => 'InstallationHelpBanner')
-jest.mock('pages/TermsOfService', () => () => 'TermsOfService')
 jest.mock('pages/DefaultOrgSelector', () => () => 'DefaultOrgSelector')
 
 const mockOwner = {
@@ -167,9 +166,6 @@ describe('BaseLayout', () => {
       graphql.query('Seats', (_, res, ctx) =>
         res(ctx.status(200), ctx.data({}))
       ),
-      graphql.query('TermsOfService', (_, res, ctx) =>
-        res(ctx.status(200), ctx.data({}))
-      ),
       graphql.query('UseMyOrganizations', (_, res, ctx) =>
         res(
           ctx.status(200),
@@ -218,9 +214,6 @@ describe('BaseLayout', () => {
 
         const defaultOrg = screen.queryByText(/DefaultOrgSelector/)
         expect(defaultOrg).not.toBeInTheDocument()
-
-        const termsOfService = screen.queryByText(/TermsOfService/)
-        expect(termsOfService).not.toBeInTheDocument()
       })
     })
 
@@ -239,9 +232,6 @@ describe('BaseLayout', () => {
 
         const defaultOrg = screen.queryByText(/DefaultOrgSelector/)
         expect(defaultOrg).not.toBeInTheDocument()
-
-        const termsOfService = screen.queryByText(/TermsOfService/)
-        expect(termsOfService).not.toBeInTheDocument()
       })
     })
 
@@ -261,22 +251,7 @@ describe('BaseLayout', () => {
 
         const defaultOrg = screen.queryByText(/DefaultOrgSelector/)
         expect(defaultOrg).not.toBeInTheDocument()
-
-        const termsOfService = screen.queryByText(/TermsOfService/)
-        expect(termsOfService).not.toBeInTheDocument()
-      })
-    })
-
-    it(`renders the ${expectedPage}`, async () => {
-      setup({ termsOfServicePage: true, currentUser: loggedInUser })
-
-      render(<BaseLayout>hello</BaseLayout>, {
-        wrapper: wrapper(),
       })
-
-      expect(await screen.findByText(expectedMatcher)).toBeTruthy()
-      const tos = screen.getByText(expectedMatcher)
-      expect(tos).toBeInTheDocument()
     })
   })
 
@@ -308,6 +283,18 @@ describe('BaseLayout', () => {
     })
   })
 
+  describe('user has not accepted terms of service', () => {
+    it('redirects the user to /terms', async () => {
+      setup({ termsOfServicePage: true })
+
+      render(<BaseLayout>hello</BaseLayout>, {
+        wrapper: wrapper(),
+      })
+
+      await waitFor(() => expect(testLocation.pathname).toBe('/terms'))
+    })
+  })
+
   describe('user has not synced with providers', () => {
     it('redirects the user to /sync', async () => {
       setup({
diff --git a/src/pages/TermsOfService/TermsOfService.jsx b/src/pages/TermsOfService/TermsOfService.jsx
index 1aacdc2f6d..1265c1eddc 100644
--- a/src/pages/TermsOfService/TermsOfService.jsx
+++ b/src/pages/TermsOfService/TermsOfService.jsx
@@ -1,11 +1,15 @@
 import { zodResolver } from '@hookform/resolvers/zod'
+import gt from 'lodash/gt'
 import PropType from 'prop-types'
 import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
+import { Redirect } from 'react-router-dom'
 import { z } from 'zod'
 
 import umbrellaSvg from 'assets/svg/umbrella.svg'
-import { useUser } from 'services/user'
+import { useInternalUser } from 'services/user'
+import { useFlags } from 'shared/featureFlags'
+import { loginProviderToShortName } from 'shared/utils/loginProviders'
 import A from 'ui/A'
 import Button from 'ui/Button'
 import TextInput from 'ui/TextInput'
@@ -18,8 +22,8 @@ const FormSchema = z.object({
   tos: z.literal(true),
 })
 
-function isDisabled({ isValid, isDirty }) {
-  return (!isValid && isDirty) || !isDirty
+function isDisabled({ isValid, isDirty, isMutationLoading }) {
+  return (!isValid && isDirty) || !isDirty || isMutationLoading
 }
 
 function EmailInput({ register, marketingEmailMessage, showEmailRequired }) {
@@ -61,7 +65,7 @@ export default function TermsOfService() {
       resolver: zodResolver(FormSchema),
       mode: 'onChange',
     })
-  const { mutate } = useSaveTermsAgreement({
+  const { mutate, isLoading: isMutationLoading } = useSaveTermsAgreement({
     onSuccess: ({ data }) => {
       if (data?.saveTermsAgreement?.error) {
         setError('apiError', data?.saveTermsAgreement?.error)
@@ -70,12 +74,18 @@ export default function TermsOfService() {
     },
     onError: (error) => setError('apiError', error),
   })
-  const { data: currentUser, isLoading: userIsLoading } = useUser()
+  const { data: currentUser, isLoading: userIsLoading } = useInternalUser()
+  const hasSynced = gt(currentUser?.owners?.length, 0)
+
+  const { termsOfServicePage } = useFlags({
+    termsOfServicePage: false,
+  })
 
   const onSubmit = (data) => {
     mutate({
       businessEmail: data?.marketingEmail || currentUser?.email,
       termsAgreement: true,
+      marketingConsent: data?.marketingConsent,
     })
   }
 
@@ -93,6 +103,18 @@ export default function TermsOfService() {
 
   if (userIsLoading) return null
 
+  if (!termsOfServicePage || currentUser?.termsAgreement) {
+    if (hasSynced) {
+      const service = currentUser?.owners?.[0]?.service
+      const owner = currentUser?.owners?.[0]?.username
+      if (service) {
+        const provider = loginProviderToShortName(service)
+        return <Redirect to={`/${provider}/${owner}`} />
+      }
+    }
+    return <Redirect to="/sync" />
+  }
+
   return (
     <div className="mx-auto w-full max-w-[38rem] text-sm text-ds-gray-octonary">
       <div className="mt-14 flex gap-2">
@@ -177,7 +199,7 @@ export default function TermsOfService() {
         )}
         <div className="mt-3 flex justify-end">
           <Button
-            disabled={isDisabled(formState)}
+            disabled={isDisabled(formState, isMutationLoading)}
             type="submit"
             hook="user signed tos"
           >
diff --git a/src/pages/TermsOfService/TermsOfService.spec.jsx b/src/pages/TermsOfService/TermsOfService.spec.jsx
index 4705eb5605..c0f50f2594 100644
--- a/src/pages/TermsOfService/TermsOfService.spec.jsx
+++ b/src/pages/TermsOfService/TermsOfService.spec.jsx
@@ -1,11 +1,13 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { graphql } from 'msw'
+import { graphql, rest } from 'msw'
 import { setupServer } from 'msw/node'
 import { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
+import { useFlags } from 'shared/featureFlags'
+
 import TermsOfService from './TermsOfService'
 
 const queryClient = new QueryClient({
@@ -14,12 +16,23 @@ const queryClient = new QueryClient({
 const server = setupServer()
 let errorMock
 
+let testLocation = {
+  pathname: '',
+}
+
 const wrapper = ({ children }) => (
   <QueryClientProvider client={queryClient}>
     <MemoryRouter initialEntries={['/gh/codecov/cool-repo']}>
       <Route path="/:provider/:owner/:repo">
         <Suspense fallback={null}>{children}</Suspense>
       </Route>
+      <Route
+        path="*"
+        render={({ location }) => {
+          testLocation = location
+          return null
+        }}
+      />
     </MemoryRouter>
   </QueryClientProvider>
 )
@@ -37,22 +50,37 @@ afterAll(() => {
   server.close()
 })
 
+const mockedUserData = {
+  email: null,
+  name: null,
+  externalId: null,
+  owners: [],
+  termsAgreement: false,
+}
+
+jest.mock('shared/featureFlags')
+
 describe('TermsOfService', () => {
   beforeEach(() => jest.resetModules())
 
   function setup({
-    useUserData,
+    internalUserData = mockedUserData,
     isValidationError = false,
     isUnAuthError = false,
     isUnknownError = false,
+    termsOfServicePageFlag = true,
   } = {}) {
     const mockMutationVariables = jest.fn()
     const user = userEvent.setup()
 
+    useFlags.mockReturnValue({
+      termsOfServicePage: termsOfServicePageFlag,
+    })
+
     server.use(
-      graphql.query('CurrentUser', (req, res, ctx) => {
-        return res(ctx.status(200), ctx.data(useUserData))
-      }),
+      rest.get('/internal/user', (req, res, ctx) =>
+        res(ctx.status(200), ctx.json(internalUserData))
+      ),
       graphql.mutation('SigningTermsAgreement', (req, res, ctx) => {
         mockMutationVariables(req.variables)
         if (isUnAuthError) {
@@ -176,16 +204,12 @@ describe('TermsOfService', () => {
     // that the correct inputs are being sent to the server.
     it('Sign TOS, sends the correct inputs to the server', async () => {
       const { user, mockMutationVariables } = setup({
-        useUserData: {
-          me: {
-            email: 'personal@cr.com',
-            trackingMetadata: {
-              ownerid: '1234',
-            },
-            user: {
-              username: 'chetney',
-            },
-          },
+        internalUserData: {
+          email: 'personal@cr.com',
+          name: 'Chetney',
+          externalId: '1234',
+          owners: [],
+          termsAgreement: false,
         },
       })
 
@@ -209,6 +233,7 @@ describe('TermsOfService', () => {
           tosInput: {
             businessEmail: 'personal@cr.com',
             termsAgreement: true,
+            marketingConsent: false,
           },
         })
       )
@@ -230,11 +255,9 @@ describe('TermsOfService', () => {
       {
         validationDescription:
           'user has email, signs TOS, submit is now enabled',
-        useUserData: {
-          me: {
-            email: 'personal@cr.com',
-            termsAgreement: false,
-          },
+        internalUserData: {
+          email: 'personal@cr.com',
+          termsAgreement: false,
         },
       },
       [expectPageIsReady],
@@ -247,11 +270,9 @@ describe('TermsOfService', () => {
       {
         validationDescription:
           'user wants to receive emails, signs TOS, submit is now enabled',
-        useUserData: {
-          me: {
-            email: 'chetney@cr.com',
-            termsAgreement: false,
-          },
+        internalUserData: {
+          email: 'chetney@cr.com',
+          termsAgreement: false,
         },
       },
       [expectPageIsReady],
@@ -265,11 +286,9 @@ describe('TermsOfService', () => {
       {
         validationDescription:
           'user has email, user wants to receive emails, signs TOS, submit is now enabled',
-        useUserData: {
-          me: {
-            email: 'chetney@cr.com',
-            termsAgreement: false,
-          },
+        internalUserData: {
+          email: 'chetney@cr.com',
+          termsAgreement: false,
         },
       },
       [expectPageIsReady],
@@ -284,11 +303,9 @@ describe('TermsOfService', () => {
       {
         validationDescription:
           'signs TOS, decides not to, is warned they must sign and cannot submit',
-        useUserData: {
-          me: {
-            email: 'chetney@cr.com',
-            termsAgreement: false,
-          },
+        internalUserData: {
+          email: 'chetney@cr.com',
+          termsAgreement: false,
         },
       },
       [expectPageIsReady],
@@ -304,10 +321,8 @@ describe('TermsOfService', () => {
       {
         validationDescription:
           'user checks marketing consent and is required to provide an email, sign TOS (check email validation messages)',
-        useUserData: {
-          me: {
-            termsAgreement: false,
-          },
+        internalUserData: {
+          termsAgreement: false,
         },
       },
       [expectPageIsReady],
@@ -329,10 +344,8 @@ describe('TermsOfService', () => {
       {
         validationDescription:
           'user checks marketing consent and does not provide an email, sign TOS (check email validation messages)',
-        useUserData: {
-          me: {
-            termsAgreement: false,
-          },
+        internalUserData: {
+          termsAgreement: false,
         },
       },
       [expectPageIsReady],
@@ -346,11 +359,9 @@ describe('TermsOfService', () => {
       {
         validationDescription: 'server unknown error notification',
         isUnknownError: true,
-        useUserData: {
-          me: {
-            termsAgreement: false,
-            email: 'personal@cr.com',
-          },
+        internalUserData: {
+          termsAgreement: false,
+          email: 'personal@cr.com',
         },
       },
       [expectPageIsReady],
@@ -375,11 +386,9 @@ describe('TermsOfService', () => {
       {
         validationDescription: 'server failure error notification',
         isUnAuthError: true,
-        useUserData: {
-          me: {
-            termsAgreement: false,
-            email: 'personal@cr.com',
-          },
+        internalUserData: {
+          termsAgreement: false,
+          email: 'personal@cr.com',
         },
       },
       [expectPageIsReady],
@@ -399,11 +408,9 @@ describe('TermsOfService', () => {
         validationDescription:
           'server validation error notification (saveTerms)',
         isValidationError: true,
-        useUserData: {
-          me: {
-            termsAgreement: false,
-            email: 'personal@cr.com',
-          },
+        internalUserData: {
+          termsAgreement: false,
+          email: 'personal@cr.com',
         },
       },
       [expectPageIsReady],
@@ -411,6 +418,34 @@ describe('TermsOfService', () => {
       [expectClickSubmit],
       [expectRendersServerFailureResult, 'validation error'],
     ],
+    [
+      'case #10',
+      {
+        validationDescription:
+          'redirects to owner page if user has already synced a provider',
+        isValidationError: true,
+        internalUserData: {
+          termsAgreement: true,
+          email: '',
+          owners: [{ service: 'github', username: 'chetney' }],
+        },
+      },
+      [expectRedirectTo, '/gh/chetney'],
+    ],
+    [
+      'case #11',
+      {
+        validationDescription:
+          'redirects to "/" if user has not synced provider',
+        isValidationError: true,
+        internalUserData: {
+          termsAgreement: true,
+          email: '',
+          owners: [],
+        },
+      },
+      [expectRedirectTo, '/sync'],
+    ],
   ])('form validation, %s', (_, initializeTest, ...steps) => {
     beforeEach(() => {
       const spy = jest.spyOn(console, 'error')
@@ -423,9 +458,9 @@ describe('TermsOfService', () => {
     })
 
     describe(`
-      Has signed in: ${!!initializeTest.useUserData.me}
-      Has a email via oauth: ${initializeTest.useUserData.me?.email}
-    `, () => {
+        Has signed in: ${!!initializeTest.internalUserData}
+        Has a email via oauth: ${initializeTest.internalUserData?.email}
+      `, () => {
       jest.mock('./hooks/useTermsOfService', () => ({
         useSaveTermsAgreement: jest.fn(() => ({ data: 'mocked' })),
       }))
@@ -435,7 +470,7 @@ describe('TermsOfService', () => {
           isUnknownError: initializeTest.isUnknownError,
           isValidationError: initializeTest.isValidationError,
           isUnAuthError: initializeTest.isUnAuthError,
-          useUserData: initializeTest.useUserData,
+          internalUserData: initializeTest.internalUserData,
         })
         render(<TermsOfService />, { wrapper })
 
@@ -552,3 +587,7 @@ async function expectRendersServerFailureResult(user, expectedError = {}) {
   expect(issueLink).toBeInTheDocument()
   expect(issueLink.href).toBe('https://codecovpro.zendesk.com/hc/en-us')
 }
+
+async function expectRedirectTo(user, to) {
+  await waitFor(() => expect(testLocation.pathname).toBe(to))
+}
diff --git a/src/pages/TermsOfService/hooks/useTermsOfService.spec.tsx b/src/pages/TermsOfService/hooks/useTermsOfService.spec.tsx
index ff4b0a3a80..fd22751ebb 100644
--- a/src/pages/TermsOfService/hooks/useTermsOfService.spec.tsx
+++ b/src/pages/TermsOfService/hooks/useTermsOfService.spec.tsx
@@ -89,7 +89,9 @@ describe('useSaveTermsAgreement', () => {
 
         await waitFor(() => expect(successFn).toBeCalledWith('completed'))
 
-        expect(invalidateQueries).toHaveBeenCalledWith(['currentUser', 'gh'])
+        expect(invalidateQueries).toHaveBeenCalledWith({
+          queryKey: ['InternalUser'],
+        })
       })
     })
 
@@ -113,12 +115,13 @@ describe('useSaveTermsAgreement', () => {
         result.current.mutate({
           businessEmail: 'test@test.com',
           termsAgreement: true,
-          defaultOrg: 'codecov',
         })
 
         await waitFor(() => expect(successFn).toBeCalledWith('completed'))
 
-        expect(invalidateQueries).toHaveBeenCalledWith(['currentUser', 'gh'])
+        expect(invalidateQueries).toHaveBeenCalledWith({
+          queryKey: ['InternalUser'],
+        })
       })
     })
 
diff --git a/src/pages/TermsOfService/hooks/useTermsOfService.ts b/src/pages/TermsOfService/hooks/useTermsOfService.ts
index e6da5416a6..91bd6ff394 100644
--- a/src/pages/TermsOfService/hooks/useTermsOfService.ts
+++ b/src/pages/TermsOfService/hooks/useTermsOfService.ts
@@ -6,9 +6,9 @@ import Api from 'shared/api'
 import { assertIsString } from 'shared/asserts'
 
 const SaveTermsAgreementInputConfig = z.object({
-  businessEmail: z.string(),
+  businessEmail: z.string().optional(),
   termsAgreement: z.boolean(),
-  defaultOrg: z.string().nullish().optional(),
+  marketingConsent: z.boolean().optional(),
 })
 
 export type SaveTermsAgreementInput = z.infer<
@@ -21,7 +21,11 @@ const ResolverError = z.object({
   message: z.string(),
 })
 const SaveTermsAgreementPayloadConfig = z.object({
-  error: z.union([ResolverError, ResolverError]).nullish(),
+  data: z.object({
+    saveTermsAgreement: z.object({
+      error: z.union([ResolverError, ResolverError]).nullish(),
+    }),
+  }),
 })
 export type SaveTermsAgreementPayload = z.infer<
   typeof SaveTermsAgreementPayloadConfig
@@ -32,7 +36,7 @@ interface Params {
 }
 interface SaveTermsAgreementOptions {
   onSuccess?: (data: SaveTermsAgreementPayload) => void
-  onError?: () => void
+  onError?: (error: Error) => void
 }
 export function useSaveTermsAgreement(options: SaveTermsAgreementOptions = {}) {
   const { provider } = useParams<Params>()
@@ -41,9 +45,9 @@ export function useSaveTermsAgreement(options: SaveTermsAgreementOptions = {}) {
   return useMutation({
     mutationFn: (input: SaveTermsAgreementInput) => {
       const parsedInput = SaveTermsAgreementInputConfig.parse(input)
-      assertIsString(provider)
+      provider && assertIsString(provider)
 
-      const { businessEmail, defaultOrg, termsAgreement } = parsedInput
+      const { businessEmail, termsAgreement, marketingConsent } = parsedInput
 
       const querySignAgreement = `
         mutation SigningTermsAgreement($tosInput: SaveTermsAgreementInput!) {
@@ -58,50 +62,19 @@ export function useSaveTermsAgreement(options: SaveTermsAgreementOptions = {}) {
         }
       `
 
-      const queryWithDefaultOrg = `
-        mutation SigningTermsAgreement($tosInput: SaveTermsAgreementInput!, $defaultOrgInput: UpdateDefaultOrganizationInput!) {
-          saveTermsAgreement(input: $tosInput) {
-            error {
-              __typename
-              ... on ResolverError {
-                message
-              }
-            }
-          }
-          updateDefaultOrganization(input: $defaultOrgInput) {
-            error {
-              __typename
-              ... on ResolverError {
-                message
-              }
-            }
-          }
-        }
-      `
-
-      if (defaultOrg) {
-        const variables = {
-          tosInput: { businessEmail, termsAgreement },
-          defaultOrgInput: { username: defaultOrg },
-        }
-        return Api.graphqlMutation({
-          mutationPath: 'saveTermsAgreement',
-          provider,
-          query: queryWithDefaultOrg,
-          variables,
-        })
+      const variables = {
+        tosInput: { businessEmail, termsAgreement, marketingConsent },
       }
-
-      const variables = { tosInput: { businessEmail, termsAgreement } }
       return Api.graphqlMutation({
         mutationPath: 'saveTermsAgreement',
         provider,
         query: querySignAgreement,
         variables,
+        supportsServiceless: true,
       })
     },
     onSuccess: (data) => {
-      queryClient.invalidateQueries(['currentUser', provider])
+      queryClient.invalidateQueries({ queryKey: ['InternalUser'] })
       onSuccess && onSuccess(data)
     },
     ...rest,
diff --git a/src/services/user/useInternalUser.ts b/src/services/user/useInternalUser.ts
index 5e22bba3ae..7aff7987f7 100644
--- a/src/services/user/useInternalUser.ts
+++ b/src/services/user/useInternalUser.ts
@@ -27,6 +27,7 @@ const InternalUserSchema = z
     name: z.string().nullish(),
     externalId: z.string().nullish(),
     owners: z.array(OwnerSchema).nullish(),
+    termsAgreement: z.boolean().nullish(),
   })
   .nullish()
 
diff --git a/src/shared/api/api.js b/src/shared/api/api.js
index f9a70754f1..73de6b8197 100644
--- a/src/shared/api/api.js
+++ b/src/shared/api/api.js
@@ -55,8 +55,19 @@ function prefillMethod(method) {
     })
 }
 
-function graphql({ provider, query, variables = {}, signal }) {
-  const uri = `${config.API_URL}/graphql/${provider}`
+function graphql({
+  provider,
+  query,
+  variables = {},
+  signal,
+  supportsServiceless = false,
+}) {
+  let uri = `${config.API_URL}/graphql/${provider}`
+
+  if (supportsServiceless && !provider) {
+    uri = `${config.API_URL}/graphql/`
+  }
+
   const headers = {
     Accept: 'application/json',
     'Content-Type': 'application/json; charset=utf-8',

From e3be6418a7d4d53023af7e39e23121c3dc54e710 Mon Sep 17 00:00:00 2001
From: Rula Abu Hasna <rula@codecov.io>
Date: Wed, 18 Oct 2023 15:16:21 +0200
Subject: [PATCH 02/11]  Make sure hook supports service less

---
 src/pages/TermsOfService/hooks/useTermsOfService.spec.tsx | 4 +---
 src/pages/TermsOfService/hooks/useTermsOfService.ts       | 8 --------
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/pages/TermsOfService/hooks/useTermsOfService.spec.tsx b/src/pages/TermsOfService/hooks/useTermsOfService.spec.tsx
index fd22751ebb..61d535d6e1 100644
--- a/src/pages/TermsOfService/hooks/useTermsOfService.spec.tsx
+++ b/src/pages/TermsOfService/hooks/useTermsOfService.spec.tsx
@@ -150,9 +150,7 @@ describe('useSaveTermsAgreement', () => {
         })
 
         await waitFor(() =>
-          expect(spyErrorMock).toBeCalledWith(
-            'POST /graphql/gh net::ERR_FAILED'
-          )
+          expect(spyErrorMock).toBeCalledWith('POST /graphql/ net::ERR_FAILED')
         )
 
         expect(errorFn).toBeCalledWith('error')
diff --git a/src/pages/TermsOfService/hooks/useTermsOfService.ts b/src/pages/TermsOfService/hooks/useTermsOfService.ts
index 91bd6ff394..adbed66676 100644
--- a/src/pages/TermsOfService/hooks/useTermsOfService.ts
+++ b/src/pages/TermsOfService/hooks/useTermsOfService.ts
@@ -1,9 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { useParams } from 'react-router-dom'
 import { z } from 'zod'
 
 import Api from 'shared/api'
-import { assertIsString } from 'shared/asserts'
 
 const SaveTermsAgreementInputConfig = z.object({
   businessEmail: z.string().optional(),
@@ -31,21 +29,16 @@ export type SaveTermsAgreementPayload = z.infer<
   typeof SaveTermsAgreementPayloadConfig
 >
 
-interface Params {
-  provider?: string
-}
 interface SaveTermsAgreementOptions {
   onSuccess?: (data: SaveTermsAgreementPayload) => void
   onError?: (error: Error) => void
 }
 export function useSaveTermsAgreement(options: SaveTermsAgreementOptions = {}) {
-  const { provider } = useParams<Params>()
   const queryClient = useQueryClient()
   const { onSuccess, ...rest } = options
   return useMutation({
     mutationFn: (input: SaveTermsAgreementInput) => {
       const parsedInput = SaveTermsAgreementInputConfig.parse(input)
-      provider && assertIsString(provider)
 
       const { businessEmail, termsAgreement, marketingConsent } = parsedInput
 
@@ -67,7 +60,6 @@ export function useSaveTermsAgreement(options: SaveTermsAgreementOptions = {}) {
       }
       return Api.graphqlMutation({
         mutationPath: 'saveTermsAgreement',
-        provider,
         query: querySignAgreement,
         variables,
         supportsServiceless: true,

From d13b5c23f9ebad5d75c6b01bc5877bbd36a57767 Mon Sep 17 00:00:00 2001
From: nicholas-codecov <nicholas.deschenes@sentry.io>
Date: Tue, 17 Oct 2023 11:50:55 -0300
Subject: [PATCH 03/11] feat: Add Flag MultiSelect to CommitPageTabs (#2303)

Add a feature flagged multi select to the CommitPageTabs component.

GH codecov/engineering-team#344
---
 .../CommitDetailPageTabs.jsx                  |  13 +-
 .../CommitDetailPageTabs.spec.jsx             | 126 ++++++++++++++++--
 2 files changed, 125 insertions(+), 14 deletions(-)

diff --git a/src/pages/CommitDetailPage/CommitDetailPageTabs/CommitDetailPageTabs.jsx b/src/pages/CommitDetailPage/CommitDetailPageTabs/CommitDetailPageTabs.jsx
index b759268ebf..8636c1c730 100644
--- a/src/pages/CommitDetailPage/CommitDetailPageTabs/CommitDetailPageTabs.jsx
+++ b/src/pages/CommitDetailPage/CommitDetailPageTabs/CommitDetailPageTabs.jsx
@@ -7,6 +7,7 @@ import {
   commitFileviewString,
   commitTreeviewString,
 } from 'pages/RepoPage/utils'
+import { useFlags } from 'shared/featureFlags'
 import ToggleHeader from 'ui/FileViewer/ToggleHeader'
 import TabNavigation from 'ui/TabNavigation'
 
@@ -27,6 +28,10 @@ function CommitDetailPageTabs({
     queryParams = omit(params, ['search'])
   }
 
+  const { commitTabFlagMultiSelect } = useFlags({
+    commitTabFlagMultiSelect: false,
+  })
+
   const blobPath = location.pathname.includes(
     `/${provider}/${commitFileviewString({ owner, repo, commitSHA })}`
   )
@@ -73,7 +78,13 @@ function CommitDetailPageTabs({
           location: customLocation,
         },
       ]}
-      component={<ToggleHeader coverageIsLoading={false} showHitCount={true} />}
+      component={
+        <ToggleHeader
+          coverageIsLoading={false}
+          showHitCount={true}
+          showFlagsSelect={commitTabFlagMultiSelect}
+        />
+      }
     />
   )
 }
diff --git a/src/pages/CommitDetailPage/CommitDetailPageTabs/CommitDetailPageTabs.spec.jsx b/src/pages/CommitDetailPage/CommitDetailPageTabs/CommitDetailPageTabs.spec.jsx
index 7d44e749af..a3c8d2fef5 100644
--- a/src/pages/CommitDetailPage/CommitDetailPageTabs/CommitDetailPageTabs.spec.jsx
+++ b/src/pages/CommitDetailPage/CommitDetailPageTabs/CommitDetailPageTabs.spec.jsx
@@ -1,31 +1,105 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } from '@testing-library/react'
+import { graphql } from 'msw'
+import { setupServer } from 'msw/node'
 import qs from 'qs'
 import { MemoryRouter, Route } from 'react-router-dom'
 
+import { useFlags } from 'shared/featureFlags'
+
 import CommitDetailPageTabs from './CommitDetailPageTabs'
 
+jest.mock('shared/featureFlags')
+
+const mockFlagsResponse = {
+  owner: {
+    repository: {
+      flags: {
+        edges: [
+          {
+            node: {
+              name: 'flag-1',
+            },
+          },
+        ],
+        pageInfo: {
+          hasNextPage: true,
+          endCursor: '1-flag-1',
+        },
+      },
+    },
+  },
+}
+
+const mockBackfillResponse = {
+  config: {
+    isTimescaleEnabled: true,
+  },
+  owner: {
+    repository: {
+      flagsMeasurementsActive: true,
+      flagsMeasurementsBackfilled: true,
+      flagsCount: 4,
+    },
+  },
+}
+
+const server = setupServer()
+const queryClient = new QueryClient()
 const wrapper =
   (initialEntries = ['/gh/codecov/cool-repo/commit/sha256']) =>
   ({ children }) =>
     (
-      <MemoryRouter initialEntries={initialEntries}>
-        <Route
-          path={[
-            '/:provider/:owner/:repo/commit/:commit',
-            '/:provider/:owner/:repo/commit/:commit/indirect-changes',
-            '/:provider/:owner/:repo/commit/:commit/tree',
-            '/:provider/:owner/:repo/commit/:commit/tree/:path+',
-            '/:provider/:owner/:repo/commit/:commit/blob/:path+',
-          ]}
-        >
-          {children}
-        </Route>
-      </MemoryRouter>
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={initialEntries}>
+          <Route
+            path={[
+              '/:provider/:owner/:repo/commit/:commit',
+              '/:provider/:owner/:repo/commit/:commit/indirect-changes',
+              '/:provider/:owner/:repo/commit/:commit/tree',
+              '/:provider/:owner/:repo/commit/:commit/tree/:path+',
+              '/:provider/:owner/:repo/commit/:commit/blob/:path+',
+            ]}
+          >
+            {children}
+          </Route>
+        </MemoryRouter>
+      </QueryClientProvider>
     )
 
+beforeAll(() => {
+  server.listen()
+})
+
+afterEach(() => {
+  queryClient.clear()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})
+
 describe('CommitDetailPageTabs', () => {
+  function setup({ flagValue = false } = { flagValue: false }) {
+    useFlags.mockReturnValue({
+      commitTabFlagMultiSelect: flagValue,
+      coverageTabFlagMutliSelect: flagValue,
+    })
+
+    server.use(
+      graphql.query('FlagsSelect', (req, res, ctx) => {
+        return res(ctx.status(200), ctx.data(mockFlagsResponse))
+      }),
+      graphql.query('BackfillFlagMemberships', (req, res, ctx) => {
+        return res(ctx.status(200), ctx.data(mockBackfillResponse))
+      })
+    )
+  }
+
   describe('on base route', () => {
     it('highlights files changed tab', () => {
+      setup()
       render(<CommitDetailPageTabs commitSHA="sha256" />, {
         wrapper: wrapper(),
       })
@@ -36,6 +110,7 @@ describe('CommitDetailPageTabs', () => {
     })
 
     it('does not highlight files tab', () => {
+      setup()
       render(<CommitDetailPageTabs commitSHA="sha256" />, {
         wrapper: wrapper(),
       })
@@ -48,6 +123,7 @@ describe('CommitDetailPageTabs', () => {
 
   describe('on indirect changes route', () => {
     it('highlights indirect changes tab', () => {
+      setup()
       render(<CommitDetailPageTabs commitSHA="sha256" />, {
         wrapper: wrapper([
           '/gh/codecov/cool-repo/commit/sha256/indirect-changes',
@@ -60,6 +136,7 @@ describe('CommitDetailPageTabs', () => {
     })
 
     it('does not highlight files changed tab', () => {
+      setup()
       render(<CommitDetailPageTabs commitSHA="sha256" />, {
         wrapper: wrapper([
           '/gh/codecov/cool-repo/commit/sha256/indirect-changes',
@@ -75,6 +152,7 @@ describe('CommitDetailPageTabs', () => {
   describe('on files route', () => {
     describe('on tree route', () => {
       it('highlights files tab', () => {
+        setup()
         render(<CommitDetailPageTabs commitSHA="sha256" />, {
           wrapper: wrapper(['/gh/codecov/cool-repo/commit/sha256/tree']),
         })
@@ -85,6 +163,7 @@ describe('CommitDetailPageTabs', () => {
       })
 
       it('does not highlight files changed tab', () => {
+        setup()
         render(<CommitDetailPageTabs commitSHA="sha256" />, {
           wrapper: wrapper(['/gh/codecov/cool-repo/commit/sha256/tree']),
         })
@@ -97,6 +176,7 @@ describe('CommitDetailPageTabs', () => {
 
     describe('on a blob route', () => {
       it('highlights files tab', () => {
+        setup()
         render(<CommitDetailPageTabs commitSHA="sha256" />, {
           wrapper: wrapper([
             '/gh/codecov/cool-repo/commit/sha256/blob/index.js',
@@ -109,6 +189,7 @@ describe('CommitDetailPageTabs', () => {
       })
 
       it('does not highlight files changed tab', () => {
+        setup()
         render(<CommitDetailPageTabs commitSHA="sha256" />, {
           wrapper: wrapper(['/gh/codecov/cool-repo/commit/sha256/tree']),
         })
@@ -122,6 +203,7 @@ describe('CommitDetailPageTabs', () => {
 
   describe('rendering toggle header', () => {
     it('renders uncovered legend', () => {
+      setup()
       render(<CommitDetailPageTabs commitSHA="sha256" />, {
         wrapper: wrapper(),
       })
@@ -131,6 +213,7 @@ describe('CommitDetailPageTabs', () => {
     })
 
     it('renders partial legend', () => {
+      setup()
       render(<CommitDetailPageTabs commitSHA="sha256" />, {
         wrapper: wrapper(),
       })
@@ -140,6 +223,7 @@ describe('CommitDetailPageTabs', () => {
     })
 
     it('renders covered legend', () => {
+      setup()
       render(<CommitDetailPageTabs commitSHA="sha256" />, {
         wrapper: wrapper(),
       })
@@ -149,6 +233,7 @@ describe('CommitDetailPageTabs', () => {
     })
 
     it('renders hit count legend', () => {
+      setup()
       render(<CommitDetailPageTabs commitSHA="sha256" />, {
         wrapper: wrapper(),
       })
@@ -167,6 +252,7 @@ describe('CommitDetailPageTabs', () => {
         { flags: ['flag-1'] },
         { addQueryPrefix: true }
       )
+      setup()
       render(<CommitDetailPageTabs commitSHA="sha256" />, {
         wrapper: wrapper([`/gh/codecov/cool-repo/commit/sha256${queryString}`]),
       })
@@ -184,6 +270,7 @@ describe('CommitDetailPageTabs', () => {
         { flags: ['flag-1'] },
         { addQueryPrefix: true }
       )
+      setup()
       render(<CommitDetailPageTabs commitSHA="sha256" />, {
         wrapper: wrapper([`/gh/codecov/cool-repo/commit/sha256${queryString}`]),
       })
@@ -203,6 +290,7 @@ describe('CommitDetailPageTabs', () => {
         { flags: ['flag-1'] },
         { addQueryPrefix: true }
       )
+      setup()
       render(<CommitDetailPageTabs commitSHA="sha256" />, {
         wrapper: wrapper([`/gh/codecov/cool-repo/commit/sha256${queryString}`]),
       })
@@ -215,4 +303,16 @@ describe('CommitDetailPageTabs', () => {
       )
     })
   })
+
+  describe('flags multi-select', () => {
+    it('renders flag multi-select', async () => {
+      setup({ flagValue: true })
+      render(<CommitDetailPageTabs commitSHA="sha256" />, {
+        wrapper: wrapper(),
+      })
+
+      const flagSelect = await screen.findByText('All flags')
+      expect(flagSelect).toBeInTheDocument()
+    })
+  })
 })

From 0d77f808adad317aac07cf12a21a84eebfca2eed Mon Sep 17 00:00:00 2001
From: Adrian <adrian@codecov.io>
Date: Tue, 17 Oct 2023 09:03:17 -0700
Subject: [PATCH 04/11] Add patch column to pulls table (#2308)

* feat: add patch column to the pulls list page

* uncomment development settings
---
 .../RepoPage/PullsTab/PullsTable/PullsTable.jsx    | 14 ++++++++++++--
 .../PullsTab/PullsTable/PullsTable.spec.jsx        | 10 ++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/pages/RepoPage/PullsTab/PullsTable/PullsTable.jsx b/src/pages/RepoPage/PullsTab/PullsTable/PullsTable.jsx
index 64e31e3c21..f92dfc704f 100644
--- a/src/pages/RepoPage/PullsTab/PullsTable/PullsTable.jsx
+++ b/src/pages/RepoPage/PullsTab/PullsTable/PullsTable.jsx
@@ -31,7 +31,14 @@ const headers = [
       </>
     ),
     accessorKey: 'coverage',
-    width: 'w-3/12 justify-end',
+    width: 'w-2/12 justify-end',
+    cell: (info) => info.getValue(),
+  },
+  {
+    id: 'patch',
+    header: <span>Patch</span>,
+    accessorKey: 'patch',
+    width: 'w-2/12 justify-end',
     cell: (info) => info.getValue(),
   },
   {
@@ -42,7 +49,7 @@ const headers = [
       </>
     ),
     accessorKey: 'change',
-    width: 'w-3/12 justify-end',
+    width: 'w-2/12 justify-end',
     cell: (info) => info.getValue(),
   },
 ]
@@ -64,6 +71,7 @@ function transformPullToTable(pulls, isLoading) {
     return [
       {
         title: <span className="text-sm">no results found</span>,
+        patch: null,
         coverage: null,
         change: null,
       },
@@ -76,6 +84,7 @@ function transformPullToTable(pulls, isLoading) {
       pull
 
     const change = compareWithBase?.changeCoverage
+    const patch = compareWithBase?.patchTotals?.percentCovered
 
     return {
       title: (
@@ -88,6 +97,7 @@ function transformPullToTable(pulls, isLoading) {
         />
       ),
       coverage: <Coverage head={head} state={state} pullId={pullId} />,
+      patch: <TotalsNumber value={patch} data-testid="patch-value" />,
       change: (
         <TotalsNumber value={change} showChange data-testid="change-value" />
       ),
diff --git a/src/pages/RepoPage/PullsTab/PullsTable/PullsTable.spec.jsx b/src/pages/RepoPage/PullsTab/PullsTable/PullsTable.spec.jsx
index 7fdbb66bac..5a842f933f 100644
--- a/src/pages/RepoPage/PullsTab/PullsTable/PullsTable.spec.jsx
+++ b/src/pages/RepoPage/PullsTab/PullsTable/PullsTable.spec.jsx
@@ -156,6 +156,16 @@ describe('Pulls Table', () => {
       expect(cov1).toBeInTheDocument()
     })
 
+    it('renders pulls patch', async () => {
+      render(<PullsTable />, { wrapper })
+
+      const spinner = screen.queryByTestId('spinner')
+      await waitFor(() => expect(spinner).not.toBeInTheDocument())
+
+      const cov1 = await screen.findByText(/32.00%/)
+      expect(cov1).toBeInTheDocument()
+    })
+
     it('renders pulls change from base', async () => {
       render(<PullsTable />, { wrapper })
 

From ba607048021df85021db95542a0687748d6f1d4f Mon Sep 17 00:00:00 2001
From: nicholas-codecov <nicholas.deschenes@sentry.io>
Date: Tue, 17 Oct 2023 13:43:31 -0300
Subject: [PATCH 05/11] feat: Create Team Plan Table for the Files Changed
 Table on the Commit Detail Page (#2309)

Create new commit fetching hooks for the team plan, as well as creating a new table for files changed tab on the
commit detail page for the new team plan.

GH codecov/engineering-team#633
---
 .../FilesChangedTab/FilesChangedTab.jsx       |  21 -
 .../FilesChangedTab/FilesChangedTab.spec.jsx  |  17 -
 .../FilesChangedTab/FilesChangedTab.spec.tsx  | 100 ++++
 .../FilesChangedTab/FilesChangedTab.tsx       |  46 ++
 .../FilesChangedTable.jsx                     |  46 +-
 .../FilesChangedTable.spec.jsx                | 106 ++--
 .../index.js                                  |   0
 .../FilesChangedTableTeam.spec.tsx            | 460 +++++++++++++++
 .../FilesChangedTableTeam.tsx                 | 279 +++++++++
 .../FilesChangedTableTeam/index.ts            |   1 +
 .../FilesChangedTab/{index.js => index.ts}    |   0
 .../CommitFileDiff/CommitFileDiff.jsx         |   0
 .../CommitFileDiff/CommitFileDiff.spec.jsx    |  11 +
 .../CommitFileDiff/index.js                   |   0
 src/services/commit/index.js                  |   2 +
 src/services/commit/useCommitTeam.spec.tsx    | 538 ++++++++++++++++++
 src/services/commit/useCommitTeam.tsx         | 395 +++++++++++++
 .../commit/useCompareTotalsTeam.spec.tsx      | 261 +++++++++
 src/services/commit/useCompareTotalsTeam.tsx  | 202 +++++++
 src/services/tier/useTier.spec.tsx            |  64 ++-
 src/services/tier/useTier.ts                  |   2 +-
 src/ui/FileList/FileList.css                  |   4 +-
 22 files changed, 2435 insertions(+), 120 deletions(-)
 delete mode 100644 src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTab.jsx
 delete mode 100644 src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTab.spec.jsx
 create mode 100644 src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTab.spec.tsx
 create mode 100644 src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTab.tsx
 rename src/pages/CommitDetailPage/subRoute/FilesChangedTab/{FilesChangeTable => FilesChangedTable}/FilesChangedTable.jsx (84%)
 rename src/pages/CommitDetailPage/subRoute/FilesChangedTab/{FilesChangeTable => FilesChangedTable}/FilesChangedTable.spec.jsx (78%)
 rename src/pages/CommitDetailPage/subRoute/FilesChangedTab/{FilesChangeTable => FilesChangedTable}/index.js (100%)
 create mode 100644 src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTableTeam/FilesChangedTableTeam.spec.tsx
 create mode 100644 src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTableTeam/FilesChangedTableTeam.tsx
 create mode 100644 src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTableTeam/index.ts
 rename src/pages/CommitDetailPage/subRoute/FilesChangedTab/{index.js => index.ts} (100%)
 rename src/pages/CommitDetailPage/subRoute/FilesChangedTab/{FilesChangeTable => shared}/CommitFileDiff/CommitFileDiff.jsx (100%)
 rename src/pages/CommitDetailPage/subRoute/FilesChangedTab/{FilesChangeTable => shared}/CommitFileDiff/CommitFileDiff.spec.jsx (96%)
 rename src/pages/CommitDetailPage/subRoute/FilesChangedTab/{FilesChangeTable => shared}/CommitFileDiff/index.js (100%)
 create mode 100644 src/services/commit/useCommitTeam.spec.tsx
 create mode 100644 src/services/commit/useCommitTeam.tsx
 create mode 100644 src/services/commit/useCompareTotalsTeam.spec.tsx
 create mode 100644 src/services/commit/useCompareTotalsTeam.tsx

diff --git a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTab.jsx b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTab.jsx
deleted file mode 100644
index d1a88107fd..0000000000
--- a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTab.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { lazy, Suspense } from 'react'
-
-import Spinner from 'ui/Spinner'
-
-const FilesChangedTable = lazy(() => import('./FilesChangeTable'))
-
-const Loader = () => (
-  <div className="m-4 flex flex-1 justify-center">
-    <Spinner size={60} />
-  </div>
-)
-
-function FilesChanged() {
-  return (
-    <Suspense fallback={<Loader />}>
-      <FilesChangedTable />
-    </Suspense>
-  )
-}
-
-export default FilesChanged
diff --git a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTab.spec.jsx b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTab.spec.jsx
deleted file mode 100644
index 080f07f707..0000000000
--- a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTab.spec.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { render, screen } from '@testing-library/react'
-
-import FilesChangedTab from './FilesChangedTab'
-
-jest.mock(
-  './FilesChangeTable/FilesChangedTable',
-  () => () => 'FilesChangedTable'
-)
-
-describe('FilesChangedTab', () => {
-  it('renders commits table', async () => {
-    render(<FilesChangedTab />)
-
-    const table = await screen.findByText('FilesChangedTable')
-    expect(table).toBeInTheDocument()
-  })
-})
diff --git a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTab.spec.tsx b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTab.spec.tsx
new file mode 100644
index 0000000000..c5860d6b99
--- /dev/null
+++ b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTab.spec.tsx
@@ -0,0 +1,100 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen } from '@testing-library/react'
+import { graphql } from 'msw'
+import { setupServer } from 'msw/node'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import { TierNames } from 'services/tier'
+import { useFlags } from 'shared/featureFlags'
+
+import FilesChangedTab from './FilesChangedTab'
+
+jest.mock('./FilesChangedTable', () => () => 'FilesChangedTable')
+jest.mock('./FilesChangedTableTeam', () => () => 'FilesChangedTableTeam')
+
+jest.mock('shared/featureFlags')
+const mockedUseFlags = useFlags as jest.Mock<{ multipleTiers: boolean }>
+
+const mockTeamTier = {
+  owner: {
+    plan: {
+      tierName: TierNames.TEAM,
+    },
+  },
+}
+
+const mockProTier = {
+  owner: {
+    plan: {
+      tierName: TierNames.PRO,
+    },
+  },
+}
+
+const server = setupServer()
+const queryClient = new QueryClient()
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    <MemoryRouter initialEntries={['/gh/codecov/test-repo/commit/sha256']}>
+      <Route path="/:provider/:owner/:repo/commit/:commit">{children}</Route>
+    </MemoryRouter>
+  </QueryClientProvider>
+)
+
+beforeAll(() => {
+  server.listen()
+})
+
+afterEach(() => {
+  queryClient.clear()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+interface SetupArgs {
+  planValue: 'team' | 'pro'
+  flagValue: boolean
+}
+
+describe('FilesChangedTab', () => {
+  function setup({ planValue, flagValue }: SetupArgs) {
+    mockedUseFlags.mockReturnValue({
+      multipleTiers: flagValue,
+    })
+
+    server.use(
+      graphql.query('OwnerTier', (req, res, ctx) => {
+        if (planValue === 'team') {
+          return res(ctx.status(200), ctx.data(mockTeamTier))
+        }
+
+        return res(ctx.status(200), ctx.data(mockProTier))
+      })
+    )
+  }
+
+  describe('user has pro tier', () => {
+    it('renders files changed table', async () => {
+      setup({ planValue: 'pro', flagValue: false })
+      render(<FilesChangedTab />, { wrapper })
+
+      const table = await screen.findByText('FilesChangedTable')
+      expect(table).toBeInTheDocument()
+    })
+  })
+
+  describe('user has team tier', () => {
+    it('renders team files changed table', async () => {
+      setup({ planValue: 'team', flagValue: true })
+
+      render(<FilesChangedTab />, { wrapper })
+
+      const table = await screen.findByText('FilesChangedTableTeam')
+      expect(table).toBeInTheDocument()
+    })
+  })
+})
diff --git a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTab.tsx b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTab.tsx
new file mode 100644
index 0000000000..32ad90658e
--- /dev/null
+++ b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTab.tsx
@@ -0,0 +1,46 @@
+import { lazy, Suspense } from 'react'
+import { useParams } from 'react-router-dom'
+
+import { useTier } from 'services/tier'
+import { useFlags } from 'shared/featureFlags'
+import Spinner from 'ui/Spinner'
+
+const FilesChangedTable = lazy(() => import('./FilesChangedTable'))
+const FilesChangedTableTeam = lazy(() => import('./FilesChangedTableTeam'))
+
+const Loader = () => (
+  <div className="flex flex-1 justify-center p-4">
+    <Spinner />
+  </div>
+)
+
+interface URLParams {
+  provider: string
+  owner: string
+}
+
+function FilesChanged() {
+  const { provider, owner } = useParams<URLParams>()
+
+  const { multipleTiers } = useFlags({
+    multipleTiers: false,
+  })
+
+  const { data: tierData } = useTier({ provider, owner })
+
+  if (tierData === 'team' && multipleTiers) {
+    return (
+      <Suspense fallback={<Loader />}>
+        <FilesChangedTableTeam />
+      </Suspense>
+    )
+  }
+
+  return (
+    <Suspense fallback={<Loader />}>
+      <FilesChangedTable />
+    </Suspense>
+  )
+}
+
+export default FilesChanged
diff --git a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangeTable/FilesChangedTable.jsx b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTable/FilesChangedTable.jsx
similarity index 84%
rename from src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangeTable/FilesChangedTable.jsx
rename to src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTable/FilesChangedTable.jsx
index bf0019b59e..f7d1cf5910 100644
--- a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangeTable/FilesChangedTable.jsx
+++ b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTable/FilesChangedTable.jsx
@@ -2,7 +2,7 @@ import cs from 'classnames'
 import isEmpty from 'lodash/isEmpty'
 import isNumber from 'lodash/isNumber'
 import PropTypes from 'prop-types'
-import { lazy, Suspense, useMemo } from 'react'
+import { lazy, Suspense } from 'react'
 import { useParams } from 'react-router-dom'
 
 import Table from 'old_ui/Table'
@@ -12,17 +12,22 @@ import Icon from 'ui/Icon'
 import Spinner from 'ui/Spinner'
 import TotalsNumber from 'ui/TotalsNumber'
 
-const CommitFileDiff = lazy(() => import('./CommitFileDiff'))
+const CommitFileDiff = lazy(() => import('../shared/CommitFileDiff'))
 
 const getFileData = (row, commit) => {
   const headCov = row?.headCoverage?.coverage
   const patchCov = row?.patchCoverage?.coverage
   const baseCov = row?.baseCoverage?.coverage
 
-  const change =
-    isNumber(headCov) && isNumber(baseCov) ? headCov - baseCov : Number.NaN
+  let change = Number.NaN
+  if (isNumber(headCov) && isNumber(baseCov)) {
+    change = headCov - baseCov
+  }
 
-  const hasData = isNumber(headCov) || isNumber(patchCov)
+  let hasData = false
+  if (isNumber(headCov) || isNumber(patchCov)) {
+    hasData = true
+  }
 
   return {
     headCoverage: headCov,
@@ -89,15 +94,8 @@ const table = [
 ]
 
 function createTable({ tableData }) {
-  if (tableData?.length <= 0) {
-    return [{ name: null, coverage: null, patch: null, change: null }]
-  }
-
-  return tableData?.map((row) => {
-    const { headName, headCoverage, hasData, change, patchCoverage, commit } =
-      row
-
-    return {
+  return tableData?.map(
+    ({ headName, headCoverage, hasData, change, patchCoverage, commit }) => ({
       name: (
         <div className="flex flex-col break-all">
           <A
@@ -121,8 +119,8 @@ function createTable({ tableData }) {
       ) : (
         <span className="ml-4 text-sm text-ds-gray-quinary">No data</span>
       ),
-    }
-  })
+    })
+  )
 }
 
 const Loader = () => (
@@ -163,16 +161,16 @@ function FilesChangedTable() {
   const commit = commitData?.commit
   const filesChanged = commit?.compareWithParent?.impactedFiles
 
-  const formattedData = useMemo(
-    () => filesChanged?.map((row) => getFileData(row, commit)),
-    [filesChanged, commit]
-  )
-  const tableContent = createTable({ tableData: formattedData })
-
-  if (isLoading || commit?.state === 'pending') return <Loader />
+  if (isLoading || commit?.state === 'pending') {
+    return <Loader />
+  }
 
-  if (isEmpty(filesChanged))
+  if (isEmpty(filesChanged)) {
     return <p className="m-4">No files covered by tests were changed</p>
+  }
+
+  const formattedData = filesChanged?.map((row) => getFileData(row, commit))
+  const tableContent = createTable({ tableData: formattedData })
 
   return (
     <Table
diff --git a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangeTable/FilesChangedTable.spec.jsx b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTable/FilesChangedTable.spec.jsx
similarity index 78%
rename from src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangeTable/FilesChangedTable.spec.jsx
rename to src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTable/FilesChangedTable.spec.jsx
index 68b25064f9..b6fd9294a3 100644
--- a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangeTable/FilesChangedTable.spec.jsx
+++ b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTable/FilesChangedTable.spec.jsx
@@ -8,8 +8,40 @@ import { MemoryRouter, Route } from 'react-router-dom'
 
 import FilesChangedTable from './FilesChangedTable'
 
-jest.mock('./CommitFileDiff', () => () => 'CommitFileDiff')
+jest.mock('../shared/CommitFileDiff', () => () => 'CommitFileDiff')
+
+const mockCommitData = ({ data, state }) => ({
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      commit: {
+        totals: {
+          coverage: 100,
+        },
+        state,
+        commitid: '123',
+        pullId: 1,
+        branchName: null,
+        createdAt: null,
+        author: null,
+        uploads: null,
+        message: null,
+        ciPassed: null,
+        parent: null,
+        compareWithParent: {
+          __typename: 'Comparison',
+          state: 'processed',
+          indirectChangedFilesCount: 2,
+          directChangedFilesCount: 2,
+          patchTotals: null,
+          impactedFiles: data,
+        },
+      },
+    },
+  },
+})
 
+const server = setupServer()
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -18,14 +50,19 @@ const queryClient = new QueryClient({
     },
   },
 })
-const server = setupServer()
 
-beforeAll(() => server.listen())
+beforeAll(() => {
+  server.listen()
+})
+
 beforeEach(() => {
   server.resetHandlers()
   queryClient.clear()
 })
-afterAll(() => server.close())
+
+afterAll(() => {
+  server.close()
+})
 
 const wrapper = ({ children }) => (
   <QueryClientProvider client={queryClient}>
@@ -45,41 +82,9 @@ const wrapper = ({ children }) => (
 describe('FilesChangedTable', () => {
   function setup(data = [], state = 'processed') {
     server.use(
-      graphql.query('Commit', (req, res, ctx) =>
-        res(
-          ctx.status(200),
-          ctx.data({
-            owner: {
-              repository: {
-                __typename: 'Repository',
-                commit: {
-                  totals: {
-                    coverage: 100,
-                  },
-                  state,
-                  commitid: '123',
-                  pullId: 1,
-                  branchName: null,
-                  createdAt: null,
-                  author: null,
-                  uploads: null,
-                  message: null,
-                  ciPassed: null,
-                  parent: null,
-                  compareWithParent: {
-                    __typename: 'Comparison',
-                    state: 'processed',
-                    indirectChangedFilesCount: 2,
-                    directChangedFilesCount: 2,
-                    patchTotals: null,
-                    impactedFiles: data,
-                  },
-                },
-              },
-            },
-          })
-        )
-      )
+      graphql.query('Commit', (req, res, ctx) => {
+        return res(ctx.status(200), ctx.data(mockCommitData({ data, state })))
+      })
     )
   }
 
@@ -245,4 +250,27 @@ describe('FilesChangedTable', () => {
       expect(commitFileDiff).toBeInTheDocument()
     })
   })
+
+  describe('when state is pending', () => {
+    beforeEach(() => {
+      setup(
+        [
+          {
+            headName: '',
+            baseCoverage: null,
+            headCoverage: null,
+            patchCoverage: null,
+          },
+        ],
+        'pending'
+      )
+    })
+
+    it('renders spinner', async () => {
+      render(<FilesChangedTable />, { wrapper })
+
+      const spinner = await screen.findByTestId('spinner')
+      expect(spinner).toBeInTheDocument()
+    })
+  })
 })
diff --git a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangeTable/index.js b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTable/index.js
similarity index 100%
rename from src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangeTable/index.js
rename to src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTable/index.js
diff --git a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTableTeam/FilesChangedTableTeam.spec.tsx b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTableTeam/FilesChangedTableTeam.spec.tsx
new file mode 100644
index 0000000000..3f4e144b11
--- /dev/null
+++ b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTableTeam/FilesChangedTableTeam.spec.tsx
@@ -0,0 +1,460 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { graphql } from 'msw'
+import { setupServer } from 'msw/node'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import {
+  OrderingDirection,
+  OrderingParameter,
+} from 'services/commit/useCommitTeam'
+
+import FilesChangedTableTeam, { getFilter } from './FilesChangedTableTeam'
+
+jest.mock('../shared/CommitFileDiff', () => () => 'CommitFileDiff')
+
+const mockComparisonLiteData = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      commit: {
+        compareWithParent: {
+          __typename: 'Comparison',
+          state: 'processed',
+          patchTotals: {
+            coverage: 100,
+          },
+          impactedFiles: [
+            { headName: 'src/App.tsx', patchCoverage: { coverage: 100 } },
+          ],
+        },
+      },
+    },
+  },
+}
+
+const mockCommitLiteData = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      commit: {
+        branchName: null,
+        commitid: 'f00162848a3cebc0728d915763c2fd9e92132408',
+        pullId: 10,
+        createdAt: '2020-08-25T16:35:32',
+        author: {
+          username: 'febg',
+        },
+        state: 'processed',
+        uploads: null,
+        message: 'paths test',
+        ciPassed: true,
+        compareWithParent: {
+          __typename: 'Comparison',
+          state: 'pending',
+          indirectChangedFilesCount: 1,
+          directChangedFilesCount: 1,
+          patchTotals: {
+            coverage: 100,
+          },
+          impactedFiles: [
+            {
+              headName: 'src/App.jsx',
+              missesCount: 0,
+              patchCoverage: {
+                coverage: 100,
+              },
+            },
+            {
+              headName: 'src/File.jsx',
+              missesCount: 5,
+              patchCoverage: {
+                coverage: null,
+              },
+            },
+          ],
+        },
+        parent: {
+          commitid: 'd773f5bc170caec7f6e64420b0967e7bac978a8f',
+          totals: {
+            coverage: 38.30846,
+          },
+        },
+      },
+    },
+  },
+}
+
+const mockPendingCommit = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      commit: {
+        branchName: null,
+        commitid: 'f00162848a3cebc0728d915763c2fd9e92132408',
+        pullId: 10,
+        createdAt: '2020-08-25T16:35:32',
+        author: {
+          username: 'febg',
+        },
+        state: 'pending',
+        uploads: null,
+        message: 'paths test',
+        ciPassed: true,
+        compareWithParent: {
+          __typename: 'Comparison',
+          state: 'pending',
+          indirectChangedFilesCount: 1,
+          directChangedFilesCount: 1,
+          patchTotals: {
+            coverage: 100,
+          },
+          impactedFiles: [],
+        },
+        parent: {
+          commitid: 'd773f5bc170caec7f6e64420b0967e7bac978a8f',
+          totals: {
+            coverage: 38.30846,
+          },
+        },
+      },
+    },
+  },
+}
+
+const mockPendingComparison = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      commit: {
+        compareWithParent: {
+          __typename: 'Comparison',
+          state: 'pending',
+          patchTotals: {
+            coverage: 100,
+          },
+          impactedFiles: [],
+        },
+      },
+    },
+  },
+}
+
+const mockEmptyFilesCommit = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      commit: {
+        branchName: null,
+        commitid: 'f00162848a3cebc0728d915763c2fd9e92132408',
+        pullId: 10,
+        createdAt: '2020-08-25T16:35:32',
+        author: {
+          username: 'febg',
+        },
+        state: 'completed',
+        uploads: null,
+        message: 'paths test',
+        ciPassed: true,
+        compareWithParent: {
+          __typename: 'Comparison',
+          state: 'pending',
+          indirectChangedFilesCount: 1,
+          directChangedFilesCount: 1,
+          patchTotals: {
+            coverage: 100,
+          },
+          impactedFiles: [],
+        },
+        parent: {
+          commitid: 'd773f5bc170caec7f6e64420b0967e7bac978a8f',
+          totals: {
+            coverage: 38.30846,
+          },
+        },
+      },
+    },
+  },
+}
+
+const mockEmptyFilesComparison = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      commit: {
+        compareWithParent: {
+          __typename: 'Comparison',
+          state: 'pending',
+          patchTotals: {
+            coverage: 100,
+          },
+          impactedFiles: [],
+        },
+      },
+    },
+  },
+}
+
+const server = setupServer()
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+})
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    <MemoryRouter initialEntries={['/gh/codecov/test-repo/commit/s2h5a6']}>
+      <Route path="/:provider/:owner/:repo/commit/:commit">{children}</Route>
+    </MemoryRouter>
+  </QueryClientProvider>
+)
+
+beforeAll(() => {
+  server.listen()
+})
+
+beforeEach(() => {
+  queryClient.clear()
+  server.resetHandlers()
+})
+
+afterEach(() => {
+  queryClient.clear()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+interface SetupArgs {
+  pendingCommit?: boolean
+  noCoveredFiles?: boolean
+}
+
+describe('FilesChangedTableTeam', () => {
+  function setup(
+    { pendingCommit, noCoveredFiles }: SetupArgs = {
+      pendingCommit: false,
+      noCoveredFiles: false,
+    }
+  ) {
+    const user = userEvent.setup()
+    const mockVars = jest.fn()
+
+    server.use(
+      graphql.query('GetCommitTeam', (req, res, ctx) => {
+        mockVars(req.variables?.filters)
+
+        if (pendingCommit) {
+          return res(ctx.status(200), ctx.data(mockPendingCommit))
+        }
+
+        if (noCoveredFiles) {
+          return res(ctx.status(200), ctx.data(mockEmptyFilesCommit))
+        }
+
+        return res(ctx.status(200), ctx.data(mockCommitLiteData))
+      }),
+      graphql.query('GetCompareTotalsTeam', (req, res, ctx) => {
+        mockVars(req.variables)
+
+        if (pendingCommit) {
+          return res(ctx.status(200), ctx.data(mockPendingComparison))
+        }
+
+        if (noCoveredFiles) {
+          return res(ctx.status(200), ctx.data(mockEmptyFilesComparison))
+        }
+
+        return res(ctx.status(200), ctx.data(mockComparisonLiteData))
+      })
+    )
+
+    return { user, mockVars }
+  }
+
+  describe('renders header', () => {
+    it('renders name column', async () => {
+      setup()
+      render(<FilesChangedTableTeam />, { wrapper })
+
+      const nameHeader = await screen.findByText('Name')
+      expect(nameHeader).toBeInTheDocument()
+    })
+
+    it('renders missed lines column', async () => {
+      setup()
+      render(<FilesChangedTableTeam />, { wrapper })
+
+      const nameHeader = await screen.findByText('Missed lines')
+      expect(nameHeader).toBeInTheDocument()
+    })
+
+    it('renders patch % column', async () => {
+      setup()
+      render(<FilesChangedTableTeam />, { wrapper })
+
+      const nameHeader = await screen.findByText('Patch %')
+      expect(nameHeader).toBeInTheDocument()
+    })
+  })
+
+  describe('renders data rows', () => {
+    it('renders name column', async () => {
+      setup()
+      render(<FilesChangedTableTeam />, { wrapper })
+
+      await expect(await screen.findByText('src/App.jsx')).toBeTruthy()
+
+      const path = screen.getByText('src/App.jsx')
+      expect(path).toBeInTheDocument()
+    })
+
+    it('renders missed lines column', async () => {
+      setup()
+      render(<FilesChangedTableTeam />, { wrapper })
+
+      await expect(await screen.findByText('0')).toBeTruthy()
+
+      const missesCount = screen.getByText('0')
+      expect(missesCount).toBeInTheDocument()
+    })
+
+    it('renders patch % column', async () => {
+      setup()
+      render(<FilesChangedTableTeam />, { wrapper })
+
+      await expect(await screen.findByText('100.00%')).toBeTruthy()
+
+      const path = screen.getByText('100.00%')
+      expect(path).toBeInTheDocument()
+    })
+  })
+
+  describe('commit is pending', () => {
+    it('renders spinner', async () => {
+      setup({ pendingCommit: true })
+      render(<FilesChangedTableTeam />, { wrapper })
+
+      await waitFor(() => expect(queryClient.isFetching()).toBeGreaterThan(0))
+      await waitFor(() => expect(queryClient.isFetching()).toBe(0))
+
+      const spinner = await screen.findByTestId('spinner')
+      expect(spinner).toBeInTheDocument()
+    })
+  })
+
+  describe('no files were changed', () => {
+    it('renders no file covered message', async () => {
+      setup({ noCoveredFiles: true })
+      render(<FilesChangedTableTeam />, { wrapper })
+
+      const noFiles = await screen.findByText(
+        'No files covered by tests were changed'
+      )
+      expect(noFiles).toBeInTheDocument()
+    })
+  })
+
+  describe('expanding file diffs', () => {
+    it('renders commit file diff', async () => {
+      const { user } = setup({})
+      render(<FilesChangedTableTeam />, { wrapper })
+
+      expect(await screen.findByTestId('file-diff-expand')).toBeTruthy()
+      const expander = screen.getByTestId('file-diff-expand')
+      expect(expander).toBeInTheDocument()
+      await user.click(expander)
+
+      const commitFileDiff = await screen.findByText('CommitFileDiff')
+      expect(commitFileDiff).toBeInTheDocument()
+    })
+  })
+})
+
+describe('getFilter', () => {
+  describe('passed array is empty', () => {
+    it('returns undefined', () => {
+      const data = getFilter([])
+
+      expect(data).toBeUndefined()
+    })
+  })
+
+  describe('id is name', () => {
+    describe('desc is true', () => {
+      it('returns id name, desc direction', () => {
+        const data = getFilter([{ id: 'name', desc: true }])
+
+        expect(data).toStrictEqual({
+          direction: OrderingDirection.desc,
+          parameter: OrderingParameter.FILE_NAME,
+        })
+      })
+    })
+
+    describe('desc is false', () => {
+      it('returns id name, asc direction', () => {
+        const data = getFilter([{ id: 'name', desc: false }])
+
+        expect(data).toStrictEqual({
+          direction: OrderingDirection.asc,
+          parameter: OrderingParameter.FILE_NAME,
+        })
+      })
+    })
+  })
+
+  describe('id is missedLines', () => {
+    describe('desc is true', () => {
+      it('returns id missed lines, desc direction', () => {
+        const data = getFilter([{ id: 'missedLines', desc: true }])
+
+        expect(data).toStrictEqual({
+          direction: OrderingDirection.desc,
+          parameter: OrderingParameter.MISSES_COUNT,
+        })
+      })
+    })
+
+    describe('desc is false', () => {
+      it('returns id missed lines, asc direction', () => {
+        const data = getFilter([{ id: 'missedLines', desc: false }])
+
+        expect(data).toStrictEqual({
+          direction: OrderingDirection.asc,
+          parameter: OrderingParameter.MISSES_COUNT,
+        })
+      })
+    })
+  })
+
+  describe('id is patchPercentage', () => {
+    describe('desc is true', () => {
+      it('returns id patchPercentage, desc direction', () => {
+        const data = getFilter([{ id: 'patchPercentage', desc: true }])
+
+        expect(data).toStrictEqual({
+          direction: OrderingDirection.desc,
+          parameter: OrderingParameter.PATCH_COVERAGE,
+        })
+      })
+    })
+
+    describe('desc is false', () => {
+      it('returns id patch percentage, asc direction', () => {
+        const data = getFilter([{ id: 'name', desc: false }])
+
+        expect(data).toStrictEqual({
+          direction: OrderingDirection.asc,
+          parameter: OrderingParameter.FILE_NAME,
+        })
+      })
+    })
+  })
+})
diff --git a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTableTeam/FilesChangedTableTeam.tsx b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTableTeam/FilesChangedTableTeam.tsx
new file mode 100644
index 0000000000..1f21c9f2a2
--- /dev/null
+++ b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTableTeam/FilesChangedTableTeam.tsx
@@ -0,0 +1,279 @@
+import {
+  createColumnHelper,
+  ExpandedState,
+  flexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getSortedRowModel,
+  Row,
+  SortingState,
+  useReactTable,
+} from '@tanstack/react-table'
+import cs from 'classnames'
+import isEmpty from 'lodash/isEmpty'
+import { Fragment, lazy, Suspense, useState } from 'react'
+import { useParams } from 'react-router-dom'
+
+import {
+  ImpactedFile,
+  OrderingDirection,
+  OrderingParameter,
+  useCommitTeam,
+} from 'services/commit/useCommitTeam'
+import A from 'ui/A'
+import Icon from 'ui/Icon'
+import Spinner from 'ui/Spinner'
+import 'ui/FileList/FileList.css'
+
+const CommitFileDiff = lazy(() => import('../shared/CommitFileDiff'))
+
+const columnHelper = createColumnHelper<ImpactedFile>()
+
+const isNumericColumn = (cellId: string) =>
+  cellId === 'missedLines' || cellId === 'patchPercentage'
+
+export function getFilter(sorting: Array<{ id: string; desc: boolean }>) {
+  const state = sorting.at(0)
+
+  if (state) {
+    const direction = state?.desc
+      ? OrderingDirection.desc
+      : OrderingDirection.asc
+
+    let parameter = undefined
+    if (state.id === 'name') {
+      parameter = OrderingParameter.FILE_NAME
+    }
+
+    if (state.id === 'missedLines') {
+      parameter = OrderingParameter.MISSES_COUNT
+    }
+
+    if (state.id === 'patchPercentage') {
+      parameter = OrderingParameter.PATCH_COVERAGE
+    }
+
+    return { direction, parameter }
+  }
+
+  return undefined
+}
+
+function getColumns({ commitId }: { commitId: string }) {
+  return [
+    columnHelper.accessor('headName', {
+      id: 'name',
+      header: 'Name',
+      cell: ({ getValue, row }) => {
+        const headName = getValue()
+        return (
+          <div className="flex flex-row break-all">
+            <span
+              data-action="clickable"
+              data-testid="file-diff-expand"
+              className={cs(
+                'inline-flex items-center gap-1 font-sans hover:underline focus:ring-2',
+                {
+                  'text-ds-blue': row.getIsExpanded(),
+                }
+              )}
+              {...{
+                onClick: row.getToggleExpandedHandler(),
+              }}
+            >
+              <Icon
+                size="md"
+                name={row.getIsExpanded() ? 'chevronDown' : 'chevronRight'}
+                variant="solid"
+              />
+            </span>
+            {/* @ts-expect-error */}
+            <A
+              to={{
+                pageName: 'commitFileDiff',
+                options: {
+                  commit: commitId,
+                  tree: headName,
+                },
+              }}
+            >
+              {headName}
+            </A>
+          </div>
+        )
+      },
+    }),
+    columnHelper.accessor('missesCount', {
+      id: 'missedLines',
+      header: 'Missed lines',
+      cell: ({ renderValue }) => renderValue(),
+    }),
+    columnHelper.accessor('patchCoverage.coverage', {
+      id: 'patchPercentage',
+      header: 'Patch %',
+      cell: ({ getValue }) => {
+        const value = getValue()
+
+        if ((value && !isNaN(value)) || value === 0) {
+          return <span>{value?.toFixed(2)}%</span>
+        }
+
+        return <>-</>
+      },
+    }),
+  ]
+}
+
+function RenderSubComponent({ row }: { row: Row<ImpactedFile> }) {
+  const path = row.original?.headName
+
+  return (
+    <Suspense fallback={<Loader />}>
+      <CommitFileDiff path={path} />
+    </Suspense>
+  )
+}
+
+const Loader = () => (
+  <div className="mb-4 flex justify-center pt-4">
+    <Spinner />
+  </div>
+)
+
+interface URLParams {
+  provider: string
+  owner: string
+  repo: string
+  commit: string
+}
+
+export default function FilesChangedTableTeam() {
+  const [expanded, setExpanded] = useState<ExpandedState>({})
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: 'missedLines', desc: true },
+  ])
+  const { provider, owner, repo, commit: commitSHA } = useParams<URLParams>()
+
+  const { data: commitData, isLoading } = useCommitTeam({
+    provider,
+    owner,
+    repo,
+    commitid: commitSHA,
+    filters: {
+      hasUnintendedChanges: false,
+      ordering: getFilter(sorting),
+    },
+  })
+
+  let filesChanged = undefined
+  if (commitData?.commit?.compareWithParent?.__typename === 'Comparison') {
+    filesChanged = commitData?.commit?.compareWithParent?.impactedFiles
+  }
+
+  const table = useReactTable({
+    columns: getColumns({ commitId: commitSHA }),
+    data: filesChanged ?? [],
+    state: {
+      expanded,
+      sorting,
+    },
+    onSortingChange: setSorting,
+    onExpandedChange: setExpanded,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getRowCanExpand: () => true,
+  })
+
+  if (commitData?.commit?.state === 'pending') {
+    return <Loader />
+  }
+
+  if (isEmpty(filesChanged) && !isLoading) {
+    return <p className="m-4">No files covered by tests were changed</p>
+  }
+
+  return (
+    <div className="filelistui" data-highlight-row="onHover">
+      <div>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <div key={headerGroup.id} className="filelistui-thead">
+            {headerGroup.headers.map((header) => {
+              const isSorted = header.column.getIsSorted()
+
+              return (
+                <div
+                  key={header.id}
+                  data-sortable="true"
+                  {...{
+                    onClick: header.column.getToggleSortingHandler(),
+                  }}
+                  className={cs({
+                    'w-full @4xl/w-4/12': header.id === 'name',
+                    'w-2/12 hidden @4xl/filelist:block':
+                      header.id === 'missedLines' ||
+                      header.id === 'patchPercentage',
+                  })}
+                >
+                  <div
+                    className={cs('flex gap-1 items-center', {
+                      'flex-row-reverse justify-end': header.id === 'name',
+                      'justify-end': header.id === 'patchPercentage',
+                    })}
+                  >
+                    <span
+                      className="text-ds-blue-darker"
+                      data-sort-direction={isSorted}
+                    >
+                      <Icon name="arrowUp" size="sm" />
+                    </span>
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        ))}
+        {isLoading ? (
+          <Loader />
+        ) : (
+          table.getRowModel().rows.map((row, i) => (
+            <Fragment key={i}>
+              <div className="filelistui-row">
+                {row.getVisibleCells().map((cell) => {
+                  return (
+                    <div
+                      key={cell.id}
+                      {...(isNumericColumn(cell.column.id)
+                        ? {
+                            'data-type': 'numeric',
+                          }
+                        : {})}
+                      className={cs({
+                        'w-full @4xl/w-4/12': cell.column.id === 'name',
+                        'w-2/12 hidden @4xl/filelist:block':
+                          cell.column.id === 'missedLines' ||
+                          cell.column.id === 'patchPercentage',
+                      })}
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+              <div data-expanded={row.getIsExpanded()}>
+                {row.getIsExpanded() ? <RenderSubComponent row={row} /> : null}
+              </div>
+            </Fragment>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTableTeam/index.ts b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTableTeam/index.ts
new file mode 100644
index 0000000000..2f42faf7e2
--- /dev/null
+++ b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTableTeam/index.ts
@@ -0,0 +1 @@
+export { default } from './FilesChangedTableTeam'
diff --git a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/index.js b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/index.ts
similarity index 100%
rename from src/pages/CommitDetailPage/subRoute/FilesChangedTab/index.js
rename to src/pages/CommitDetailPage/subRoute/FilesChangedTab/index.ts
diff --git a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangeTable/CommitFileDiff/CommitFileDiff.jsx b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/shared/CommitFileDiff/CommitFileDiff.jsx
similarity index 100%
rename from src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangeTable/CommitFileDiff/CommitFileDiff.jsx
rename to src/pages/CommitDetailPage/subRoute/FilesChangedTab/shared/CommitFileDiff/CommitFileDiff.jsx
diff --git a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangeTable/CommitFileDiff/CommitFileDiff.spec.jsx b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/shared/CommitFileDiff/CommitFileDiff.spec.jsx
similarity index 96%
rename from src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangeTable/CommitFileDiff/CommitFileDiff.spec.jsx
rename to src/pages/CommitDetailPage/subRoute/FilesChangedTab/shared/CommitFileDiff/CommitFileDiff.spec.jsx
index 6e206b37d5..f6a691da8a 100644
--- a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangeTable/CommitFileDiff/CommitFileDiff.spec.jsx
+++ b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/shared/CommitFileDiff/CommitFileDiff.spec.jsx
@@ -67,6 +67,17 @@ const mockImpactedFile = {
               hitUploadIds: null,
             },
           },
+          {
+            baseNumber: null,
+            headNumber: '4',
+            baseCoverage: null,
+            headCoverage: 'H',
+            content: '# cool python comment',
+            coverageInfo: {
+              hitCount: null,
+              hitUploadIds: null,
+            },
+          },
         ],
       },
     ],
diff --git a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangeTable/CommitFileDiff/index.js b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/shared/CommitFileDiff/index.js
similarity index 100%
rename from src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangeTable/CommitFileDiff/index.js
rename to src/pages/CommitDetailPage/subRoute/FilesChangedTab/shared/CommitFileDiff/index.js
diff --git a/src/services/commit/index.js b/src/services/commit/index.js
index 37bd858f0c..10c29b3c3b 100644
--- a/src/services/commit/index.js
+++ b/src/services/commit/index.js
@@ -1,3 +1,5 @@
 export * from './useCommitYaml'
 export * from './useCompareTotals'
 export * from './useCommit'
+export * from './useCommitTeam'
+export * from './useCompareTotalsTeam'
diff --git a/src/services/commit/useCommitTeam.spec.tsx b/src/services/commit/useCommitTeam.spec.tsx
new file mode 100644
index 0000000000..2846089253
--- /dev/null
+++ b/src/services/commit/useCommitTeam.spec.tsx
@@ -0,0 +1,538 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook, waitFor } from '@testing-library/react'
+import { graphql } from 'msw'
+import { setupServer } from 'msw/node'
+
+import { useCommitTeam } from './useCommitTeam'
+
+const mockCompareData = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      commit: {
+        compareWithParent: {
+          __typename: 'Comparison',
+          state: 'processed',
+          patchTotals: {
+            coverage: 100,
+          },
+          impactedFiles: [
+            { headName: 'src/App.tsx', patchCoverage: { coverage: 100 } },
+          ],
+        },
+      },
+    },
+  },
+}
+
+const mockCommitData = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      commit: {
+        branchName: null,
+        commitid: 'f00162848a3cebc0728d915763c2fd9e92132408',
+        pullId: 10,
+        createdAt: '2020-08-25T16:35:32',
+        author: {
+          username: 'febg',
+        },
+        state: 'complete',
+        uploads: {
+          edges: [
+            {
+              node: {
+                id: 0,
+                state: 'PROCESSED',
+                provider: 'travis',
+                createdAt: '2020-08-25T16:36:19.55947400:00',
+                updatedAt: '2020-08-25T16:36:19.67986800:00',
+                flags: [],
+                downloadUrl:
+                  '/api/gh/febg/repo-test/download/build?path=v4/raw/2020-08-25/F84D6D9A7F883055E40E3B380280BC44/f00162848a3cebc0728d915763c2fd9e92132408/30582d33-de37-4272-ad50-c4dc805802fb.txt',
+                ciUrl: 'https://travis-ci.com/febg/repo-test/jobs/721065746',
+                uploadType: 'UPLOADED',
+                errors: null,
+                name: 'upload name',
+                jobCode: null,
+                buildCode: null,
+              },
+            },
+            {
+              node: {
+                id: 1,
+                state: 'PROCESSED',
+                provider: 'travis',
+                createdAt: '2020-08-25T16:36:25.82034000:00',
+                updatedAt: '2020-08-25T16:36:25.85988900:00',
+                flags: [],
+                downloadUrl:
+                  '/api/gh/febg/repo-test/download/build?path=v4/raw/2020-08-25/F84D6D9A7F883055E40E3B380280BC44/f00162848a3cebc0728d915763c2fd9e92132408/18b19f8d-5df6-48bd-90eb-50578ed8812f.txt',
+                ciUrl: 'https://travis-ci.com/febg/repo-test/jobs/721065763',
+                uploadType: 'UPLOADED',
+                errors: null,
+                name: 'upload name',
+                jobCode: null,
+                buildCode: null,
+              },
+            },
+          ],
+        },
+        message: 'paths test',
+        ciPassed: true,
+        compareWithParent: {
+          __typename: 'Comparison',
+          state: 'pending',
+          indirectChangedFilesCount: 1,
+          directChangedFilesCount: 1,
+          patchTotals: {
+            coverage: 100,
+          },
+          impactedFiles: [
+            {
+              headName: 'src/App.jsx',
+              missesCount: 0,
+              patchCoverage: {
+                coverage: 100,
+              },
+            },
+          ],
+        },
+        parent: {
+          commitid: 'd773f5bc170caec7f6e64420b0967e7bac978a8f',
+          totals: {
+            coverage: 38.30846,
+          },
+        },
+      },
+    },
+  },
+}
+
+const mockNotFoundError = {
+  owner: {
+    isCurrentUserPartOfOrg: true,
+    repository: {
+      __typename: 'NotFoundError',
+      message: 'commit not found',
+    },
+  },
+}
+
+const mockOwnerNotActivatedError = {
+  owner: {
+    isCurrentUserPartOfOrg: true,
+    repository: {
+      __typename: 'OwnerNotActivatedError',
+      message: 'owner not activated',
+    },
+  },
+}
+
+const mockNullOwner = {
+  owner: null,
+}
+
+const mockUnsuccessfulParseError = {}
+
+const server = setupServer()
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+})
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+)
+
+beforeAll(() => {
+  server.listen()
+})
+
+afterEach(() => {
+  jest.useRealTimers()
+  queryClient.clear()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+interface SetupArgs {
+  isNotFoundError?: boolean
+  isOwnerNotActivatedError?: boolean
+  isUnsuccessfulParseError?: boolean
+  isNullOwner?: boolean
+}
+
+describe('useCommitTeam', () => {
+  function setup({
+    isNotFoundError = false,
+    isOwnerNotActivatedError = false,
+    isUnsuccessfulParseError = false,
+    isNullOwner = false,
+  }: SetupArgs) {
+    server.use(
+      graphql.query('GetCommitTeam', (req, res, ctx) => {
+        if (isNotFoundError) {
+          return res(ctx.status(200), ctx.data(mockNotFoundError))
+        } else if (isOwnerNotActivatedError) {
+          return res(ctx.status(200), ctx.data(mockOwnerNotActivatedError))
+        } else if (isUnsuccessfulParseError) {
+          return res(ctx.status(200), ctx.data(mockUnsuccessfulParseError))
+        } else if (isNullOwner) {
+          return res(ctx.status(200), ctx.data(mockNullOwner))
+        } else {
+          return res(ctx.status(200), ctx.data(mockCommitData))
+        }
+      }),
+      graphql.query('GetCompareTotalsTeam', (req, res, ctx) => {
+        return res(ctx.status(200), ctx.data(mockCompareData))
+      })
+    )
+  }
+
+  describe('when useCommit is called', () => {
+    describe('api returns valid response', () => {
+      it('returns commit info', async () => {
+        setup({})
+
+        const { result } = renderHook(
+          () =>
+            useCommitTeam({
+              provider: 'gh',
+              owner: 'febg',
+              repo: 'repo-test',
+              commitid: 'a23sda3',
+            }),
+          {
+            wrapper,
+          }
+        )
+
+        await waitFor(() => result.current.isLoading)
+        await waitFor(() => !result.current.isLoading)
+
+        const expectedResult = {
+          commit: {
+            author: {
+              username: 'febg',
+            },
+            branchName: null,
+            ciPassed: true,
+            commitid: 'f00162848a3cebc0728d915763c2fd9e92132408',
+            compareWithParent: {
+              __typename: 'Comparison',
+              impactedFiles: [
+                {
+                  headName: 'src/App.tsx',
+                  patchCoverage: {
+                    coverage: 100,
+                  },
+                },
+              ],
+              patchTotals: {
+                coverage: 100,
+              },
+              state: 'processed',
+            },
+            createdAt: '2020-08-25T16:35:32',
+            message: 'paths test',
+            pullId: 10,
+            state: 'complete',
+            uploads: [
+              {
+                buildCode: null,
+                ciUrl: 'https://travis-ci.com/febg/repo-test/jobs/721065746',
+                createdAt: '2020-08-25T16:36:19.55947400:00',
+                downloadUrl:
+                  '/api/gh/febg/repo-test/download/build?path=v4/raw/2020-08-25/F84D6D9A7F883055E40E3B380280BC44/f00162848a3cebc0728d915763c2fd9e92132408/30582d33-de37-4272-ad50-c4dc805802fb.txt',
+                errors: [],
+                flags: [],
+                id: 0,
+                jobCode: null,
+                name: 'upload name',
+                provider: 'travis',
+                state: 'PROCESSED',
+                updatedAt: '2020-08-25T16:36:19.67986800:00',
+                uploadType: 'UPLOADED',
+              },
+              {
+                buildCode: null,
+                ciUrl: 'https://travis-ci.com/febg/repo-test/jobs/721065763',
+                createdAt: '2020-08-25T16:36:25.82034000:00',
+                downloadUrl:
+                  '/api/gh/febg/repo-test/download/build?path=v4/raw/2020-08-25/F84D6D9A7F883055E40E3B380280BC44/f00162848a3cebc0728d915763c2fd9e92132408/18b19f8d-5df6-48bd-90eb-50578ed8812f.txt',
+                errors: [],
+                flags: [],
+                id: 1,
+                jobCode: null,
+                name: 'upload name',
+                provider: 'travis',
+                state: 'PROCESSED',
+                updatedAt: '2020-08-25T16:36:25.85988900:00',
+                uploadType: 'UPLOADED',
+              },
+            ],
+          },
+        }
+
+        await waitFor(() => expect(result.current.data).toEqual(expectedResult))
+      })
+    })
+
+    describe('there is a null owner', () => {
+      it('returns a null value', async () => {
+        setup({ isNullOwner: true })
+        const { result } = renderHook(
+          () =>
+            useCommitTeam({
+              provider: 'gh',
+              owner: 'febg',
+              repo: 'repo-test',
+              commitid: 'a23sda3',
+            }),
+          {
+            wrapper,
+          }
+        )
+
+        await waitFor(() =>
+          expect(result.current.data).toStrictEqual({
+            commit: null,
+          })
+        )
+      })
+    })
+  })
+
+  describe('returns NotFoundError __typename', () => {
+    beforeEach(() => {
+      jest.spyOn(console, 'error')
+    })
+
+    afterEach(() => {
+      jest.resetAllMocks()
+    })
+
+    it('throws a 404', async () => {
+      setup({ isNotFoundError: true })
+      const { result } = renderHook(
+        () =>
+          useCommitTeam({
+            provider: 'gh',
+            owner: 'febg',
+            repo: 'repo-test',
+            commitid: 'a23sda3',
+          }),
+        {
+          wrapper,
+        }
+      )
+
+      await waitFor(() => expect(result.current.isError).toBeTruthy())
+      await waitFor(() =>
+        expect(result.current.error).toEqual(
+          expect.objectContaining({
+            status: 404,
+          })
+        )
+      )
+    })
+  })
+
+  describe('returns OwnerNotActivatedError __typename', () => {
+    beforeEach(() => {
+      jest.spyOn(console, 'error')
+    })
+
+    afterEach(() => {
+      jest.resetAllMocks()
+    })
+
+    it('throws a 403', async () => {
+      setup({ isOwnerNotActivatedError: true })
+      const { result } = renderHook(
+        () =>
+          useCommitTeam({
+            provider: 'gh',
+            owner: 'febg',
+            repo: 'repo-test',
+            commitid: 'a23sda3',
+          }),
+        {
+          wrapper,
+        }
+      )
+
+      await waitFor(() => expect(result.current.isError).toBeTruthy())
+      await waitFor(() =>
+        expect(result.current.error).toEqual(
+          expect.objectContaining({
+            status: 403,
+          })
+        )
+      )
+    })
+  })
+
+  describe('unsuccessful parse of zod schema', () => {
+    beforeEach(() => {
+      jest.spyOn(console, 'error')
+    })
+
+    afterEach(() => {
+      jest.resetAllMocks()
+    })
+
+    it('throws a 404', async () => {
+      setup({ isUnsuccessfulParseError: true })
+      const { result } = renderHook(
+        () =>
+          useCommitTeam({
+            provider: 'gh',
+            owner: 'febg',
+            repo: 'repo-test',
+            commitid: 'a23sda3',
+          }),
+        {
+          wrapper,
+        }
+      )
+
+      await waitFor(() => expect(result.current.isError).toBeTruthy())
+      await waitFor(() =>
+        expect(result.current.error).toEqual(
+          expect.objectContaining({
+            status: 404,
+          })
+        )
+      )
+    })
+  })
+})
+
+describe('useCommitTeam polling', () => {
+  function setup() {
+    let nbCallCompare = 0
+    server.use(
+      graphql.query(`GetCommitTeam`, (req, res, ctx) => {
+        return res(ctx.status(200), ctx.data(mockCommitData))
+      }),
+      graphql.query(`GetCompareTotalsTeam`, (req, res, ctx) => {
+        nbCallCompare++
+
+        if (nbCallCompare < 9) {
+          return res(ctx.status(200), ctx.data(mockCommitData))
+        }
+
+        return res(ctx.status(200), ctx.data(mockCompareData))
+      })
+    )
+  }
+
+  describe('when useCommit is called', () => {
+    beforeEach(async () => {
+      setup()
+    })
+
+    it('returns commit data merged with what polling fetched', async () => {
+      const { result } = renderHook(
+        () =>
+          useCommitTeam({
+            provider: 'gh',
+            owner: 'febg',
+            repo: 'repo-test',
+            commitid: 'a23sda3',
+            refetchInterval: 5,
+          }),
+        {
+          wrapper,
+        }
+      )
+
+      await waitFor(() => result.current.isSuccess)
+      await waitFor(() => {
+        if (
+          result.current.data?.commit?.compareWithParent?.__typename ===
+          'Comparison'
+        ) {
+          return (
+            result.current.data?.commit?.compareWithParent?.state ===
+            'processed'
+          )
+        }
+      })
+
+      await waitFor(() =>
+        expect(result.current.data).toEqual({
+          commit: {
+            branchName: null,
+            commitid: 'f00162848a3cebc0728d915763c2fd9e92132408',
+            pullId: 10,
+            createdAt: '2020-08-25T16:35:32',
+            author: {
+              username: 'febg',
+            },
+            state: 'complete',
+            message: 'paths test',
+            ciPassed: true,
+            compareWithParent: {
+              __typename: 'Comparison',
+              patchTotals: {
+                coverage: 100,
+              },
+              state: 'processed',
+              impactedFiles: [
+                {
+                  headName: 'src/App.tsx',
+                  patchCoverage: {
+                    coverage: 100,
+                  },
+                },
+              ],
+            },
+            uploads: [
+              {
+                buildCode: null,
+                ciUrl: 'https://travis-ci.com/febg/repo-test/jobs/721065746',
+                createdAt: '2020-08-25T16:36:19.55947400:00',
+                downloadUrl:
+                  '/api/gh/febg/repo-test/download/build?path=v4/raw/2020-08-25/F84D6D9A7F883055E40E3B380280BC44/f00162848a3cebc0728d915763c2fd9e92132408/30582d33-de37-4272-ad50-c4dc805802fb.txt',
+                errors: [],
+                flags: [],
+                id: 0,
+                jobCode: null,
+                name: 'upload name',
+                provider: 'travis',
+                state: 'PROCESSED',
+                updatedAt: '2020-08-25T16:36:19.67986800:00',
+                uploadType: 'UPLOADED',
+              },
+              {
+                buildCode: null,
+                ciUrl: 'https://travis-ci.com/febg/repo-test/jobs/721065763',
+                createdAt: '2020-08-25T16:36:25.82034000:00',
+                downloadUrl:
+                  '/api/gh/febg/repo-test/download/build?path=v4/raw/2020-08-25/F84D6D9A7F883055E40E3B380280BC44/f00162848a3cebc0728d915763c2fd9e92132408/18b19f8d-5df6-48bd-90eb-50578ed8812f.txt',
+                errors: [],
+                flags: [],
+                id: 1,
+                jobCode: null,
+                name: 'upload name',
+                provider: 'travis',
+                state: 'PROCESSED',
+                updatedAt: '2020-08-25T16:36:25.85988900:00',
+                uploadType: 'UPLOADED',
+              },
+            ],
+          },
+        })
+      )
+    })
+  })
+})
diff --git a/src/services/commit/useCommitTeam.tsx b/src/services/commit/useCommitTeam.tsx
new file mode 100644
index 0000000000..4485f6df95
--- /dev/null
+++ b/src/services/commit/useCommitTeam.tsx
@@ -0,0 +1,395 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { z } from 'zod'
+
+import {
+  FirstPullRequestSchema,
+  MissingBaseCommitSchema,
+  MissingBaseReportSchema,
+  MissingComparisonSchema,
+  MissingHeadCommitSchema,
+  MissingHeadReportSchema,
+} from 'services/comparison/schemas'
+import {
+  RepoNotFoundErrorSchema,
+  RepoOwnerNotActivatedErrorSchema,
+} from 'services/repo/schemas'
+import Api from 'shared/api'
+import {
+  ErrorCodeEnum,
+  UploadStateEnum,
+  UploadTypeEnum,
+} from 'shared/utils/commit'
+import { mapEdges } from 'shared/utils/graphql'
+import A from 'ui/A'
+
+import { useCompareTotalsTeam } from './useCompareTotalsTeam'
+
+export const OrderingDirection = {
+  desc: 'DESC',
+  asc: 'ASC',
+} as const
+
+export const OrderingParameter = {
+  FILE_NAME: 'FILE_NAME',
+  MISSES_COUNT: 'MISSES_COUNT',
+  PATCH_COVERAGE: 'PATCH_COVERAGE',
+} as const
+
+const ImpactedFilesOrdering = z.object({
+  direction: z.nativeEnum(OrderingDirection).optional(),
+  parameter: z.nativeEnum(OrderingParameter).optional(),
+})
+
+const CoverageObjSchema = z.object({
+  coverage: z.number().nullable(),
+})
+
+const UploadTypeEnumSchema = z.nativeEnum(UploadTypeEnum)
+
+const UploadStateEnumSchema = z.nativeEnum(UploadStateEnum)
+
+const UploadErrorCodeEnumSchema = z.nativeEnum(ErrorCodeEnum)
+
+const UploadErrorSchema = z.object({
+  errorCode: UploadErrorCodeEnumSchema.nullable(),
+})
+
+const ErrorsSchema = z.object({
+  edges: z.array(
+    z
+      .object({
+        node: UploadErrorSchema,
+      })
+      .nullable()
+  ),
+})
+
+const UploadSchema = z.object({
+  id: z.number().nullable(),
+  state: UploadStateEnumSchema,
+  provider: z.string().nullable(),
+  createdAt: z.string(),
+  updatedAt: z.string(),
+  flags: z.array(z.string()).nullable(),
+  jobCode: z.string().nullable(),
+  downloadUrl: z.string().nullable(),
+  ciUrl: z.string().nullable(),
+  uploadType: UploadTypeEnumSchema.nullable(),
+  buildCode: z.string().nullable(),
+  name: z.string().nullable(),
+  errors: ErrorsSchema.nullable(),
+})
+
+const UploadsSchema = z.object({
+  edges: z.array(
+    z
+      .object({
+        node: UploadSchema,
+      })
+      .nullable()
+  ),
+})
+
+const ImpactedFileSchema = z
+  .object({
+    headName: z.string().nullable(),
+    missesCount: z.number(),
+    patchCoverage: CoverageObjSchema.nullable(),
+  })
+  .nullable()
+
+export type ImpactedFile = z.infer<typeof ImpactedFileSchema>
+
+const ComparisonSchema = z.object({
+  __typename: z.literal('Comparison'),
+  indirectChangedFilesCount: z.number(),
+  directChangedFilesCount: z.number(),
+  state: z.string(),
+  patchTotals: CoverageObjSchema.nullable(),
+  impactedFiles: z.array(ImpactedFileSchema),
+})
+
+const CompareWithParentSchema = z.discriminatedUnion('__typename', [
+  ComparisonSchema,
+  FirstPullRequestSchema,
+  MissingBaseCommitSchema,
+  MissingBaseReportSchema,
+  MissingComparisonSchema,
+  MissingHeadCommitSchema,
+  MissingHeadReportSchema,
+])
+
+const CommitSchema = z.object({
+  state: z.string().nullable(),
+  commitid: z.string().nullable(),
+  pullId: z.number().nullable(),
+  branchName: z.string().nullable(),
+  createdAt: z.string().nullable(),
+  author: z
+    .object({
+      username: z.string().nullable(),
+    })
+    .nullable(),
+  uploads: UploadsSchema.nullable(),
+  message: z.string().nullable(),
+  ciPassed: z.boolean().nullable(),
+  compareWithParent: CompareWithParentSchema.nullable(),
+})
+
+const RepositorySchema = z.object({
+  __typename: z.literal('Repository'),
+  commit: CommitSchema.nullable(),
+})
+
+const RequestSchema = z.object({
+  owner: z
+    .object({
+      repository: z.discriminatedUnion('__typename', [
+        RepositorySchema,
+        RepoNotFoundErrorSchema,
+        RepoOwnerNotActivatedErrorSchema,
+      ]),
+    })
+    .nullable(),
+})
+
+const query = `query GetCommitTeam(
+  $owner: String!
+  $repo: String!
+  $commitid: String!
+  $filters: ImpactedFilesFilters
+) {
+  owner(username: $owner) {
+    repository(name: $repo) {
+      __typename
+      ... on Repository {
+        commit(id: $commitid) {
+          state
+          commitid
+          pullId
+          branchName
+          createdAt
+          author {
+            username
+          }
+          uploads {
+            edges {
+              node {
+                id
+                state
+                provider
+                createdAt
+                updatedAt
+                flags
+                jobCode
+                downloadUrl
+                ciUrl
+                uploadType
+                buildCode
+                name
+                errors {
+                  edges {
+                    node {
+                      errorCode
+                    }
+                  }
+                }
+              }
+            }
+          }
+          message
+          ciPassed
+          compareWithParent {
+            __typename
+            ... on Comparison {
+              indirectChangedFilesCount
+              directChangedFilesCount
+              state
+              patchTotals {
+                coverage: percentCovered
+              }
+              impactedFiles: impactedFilesDeprecated(filters: $filters) {
+                headName
+                missesCount
+                patchCoverage {
+                  coverage: percentCovered
+                }
+              }
+            }
+            ... on FirstPullRequest {
+              message
+            }
+            ... on MissingBaseCommit {
+              message
+            }
+            ... on MissingHeadCommit {
+              message
+            }
+            ... on MissingComparison {
+              message
+            }
+            ... on MissingBaseReport {
+              message
+            }
+            ... on MissingHeadReport {
+              message
+            }
+          }
+        }
+      }
+      ... on NotFoundError {
+        message
+      }
+      ... on OwnerNotActivatedError {
+        message
+      }
+    }
+  }
+}`
+
+interface UseCommitTeamArgs {
+  provider: string
+  owner: string
+  repo: string
+  commitid: string
+  filters?: {
+    hasUnintendedChanges?: boolean
+    flags?: Array<string>
+    ordering?: z.infer<typeof ImpactedFilesOrdering>
+  }
+  refetchInterval?: number
+}
+
+export function useCommitTeam({
+  provider,
+  owner,
+  repo,
+  commitid,
+  filters = {},
+  refetchInterval = 2000,
+}: UseCommitTeamArgs) {
+  const queryClient = useQueryClient()
+  const commitKey = [
+    'GetCommitTeam',
+    provider,
+    owner,
+    repo,
+    commitid,
+    query,
+    filters,
+  ]
+
+  const commitQuery = useQuery({
+    queryKey: commitKey,
+    queryFn: ({ signal }) =>
+      Api.graphql({
+        provider,
+        query,
+        signal,
+        variables: {
+          provider,
+          owner,
+          repo,
+          commitid,
+          filters,
+        },
+      }).then((res) => {
+        const parsedRes = RequestSchema.safeParse(res?.data)
+
+        if (!parsedRes.success) {
+          return Promise.reject({
+            status: 404,
+            data: null,
+          })
+        }
+
+        const data = parsedRes.data
+
+        if (data?.owner?.repository?.__typename === 'NotFoundError') {
+          return Promise.reject({
+            status: 404,
+            data: {},
+          })
+        }
+
+        if (data?.owner?.repository?.__typename === 'OwnerNotActivatedError') {
+          return Promise.reject({
+            status: 403,
+            data: {
+              detail: (
+                <p>
+                  Activation is required to view this repo, please{' '}
+                  {/* @ts-expect-error */}
+                  <A to={{ pageName: 'membersTab' }}>click here </A> to activate
+                  your account.
+                </p>
+              ),
+            },
+          })
+        }
+
+        const commit = data?.owner?.repository?.commit
+        const uploadEdges = data?.owner?.repository?.commit?.uploads
+
+        const uploads = mapEdges(uploadEdges).map((upload) => {
+          const errors = mapEdges(upload?.errors)
+
+          return {
+            ...upload,
+            errors: errors,
+          }
+        })
+
+        if (!commit) {
+          return {
+            commit: null,
+          }
+        }
+        return {
+          commit: {
+            ...commit,
+            uploads,
+          },
+        }
+      }),
+    suspense: false,
+  })
+
+  let shouldPoll = false
+  if (
+    commitQuery?.data?.commit?.compareWithParent?.__typename === 'Comparison'
+  ) {
+    shouldPoll =
+      commitQuery?.data?.commit?.compareWithParent?.state === 'pending'
+  }
+
+  useCompareTotalsTeam({
+    provider,
+    owner,
+    repo,
+    commitid,
+    filters,
+    opts: {
+      refetchInterval,
+      enabled: shouldPoll,
+      suspense: false,
+      onSuccess: (data) => {
+        let compareWithParent = undefined
+        if (data?.compareWithParent?.__typename === 'Comparison') {
+          compareWithParent = data?.compareWithParent
+        }
+
+        const impactedFileData = {
+          ...commitQuery?.data,
+          commit: {
+            ...commitQuery?.data?.commit,
+            compareWithParent,
+          },
+        }
+        queryClient.setQueryData(commitKey, impactedFileData)
+      },
+    },
+  })
+
+  return commitQuery
+}
diff --git a/src/services/commit/useCompareTotalsTeam.spec.tsx b/src/services/commit/useCompareTotalsTeam.spec.tsx
new file mode 100644
index 0000000000..811e086e75
--- /dev/null
+++ b/src/services/commit/useCompareTotalsTeam.spec.tsx
@@ -0,0 +1,261 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook, waitFor } from '@testing-library/react'
+import { graphql } from 'msw'
+import { setupServer } from 'msw/node'
+
+import { useCompareTotalsTeam } from './useCompareTotalsTeam'
+
+const mockCompareData = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      commit: {
+        compareWithParent: {
+          __typename: 'Comparison',
+          state: 'processed',
+          patchTotals: {
+            coverage: 100,
+          },
+          impactedFiles: [
+            { headName: 'src/App.tsx', patchCoverage: { coverage: 100 } },
+          ],
+        },
+      },
+    },
+  },
+}
+
+const mockNotFoundError = {
+  owner: {
+    isCurrentUserPartOfOrg: true,
+    repository: {
+      __typename: 'NotFoundError',
+      message: 'commit not found',
+    },
+  },
+}
+
+const mockOwnerNotActivatedError = {
+  owner: {
+    isCurrentUserPartOfOrg: true,
+    repository: {
+      __typename: 'OwnerNotActivatedError',
+      message: 'owner not activated',
+    },
+  },
+}
+
+const mockNullOwner = {
+  owner: null,
+}
+
+const mockUnsuccessfulParseError = {}
+
+const server = setupServer()
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+})
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+)
+
+beforeAll(() => {
+  server.listen()
+})
+
+afterEach(() => {
+  queryClient.clear()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+interface SetupArgs {
+  isNotFoundError?: boolean
+  isOwnerNotActivatedError?: boolean
+  isUnsuccessfulParseError?: boolean
+  isNullOwner?: boolean
+}
+
+describe('useCompareTotalsTeam', () => {
+  function setup({
+    isNotFoundError = false,
+    isOwnerNotActivatedError = false,
+    isUnsuccessfulParseError = false,
+    isNullOwner = false,
+  }: SetupArgs) {
+    server.use(
+      graphql.query('GetCompareTotalsTeam', (req, res, ctx) => {
+        if (isNotFoundError) {
+          return res(ctx.status(200), ctx.data(mockNotFoundError))
+        } else if (isOwnerNotActivatedError) {
+          return res(ctx.status(200), ctx.data(mockOwnerNotActivatedError))
+        } else if (isUnsuccessfulParseError) {
+          return res(ctx.status(200), ctx.data(mockUnsuccessfulParseError))
+        } else if (isNullOwner) {
+          return res(ctx.status(200), ctx.data(mockNullOwner))
+        } else {
+          return res(ctx.status(200), ctx.data(mockCompareData))
+        }
+      })
+    )
+  }
+
+  describe('when useCompareTotalsTeam is called', () => {
+    describe('api returns valid response', () => {
+      it('returns compare info', async () => {
+        setup({})
+        const { result } = renderHook(
+          () =>
+            useCompareTotalsTeam({
+              provider: 'gh',
+              owner: 'codecov',
+              repo: 'test-repo',
+              commitid: 's2h5a6',
+            }),
+          { wrapper }
+        )
+
+        const expectedResult = {
+          compareWithParent: {
+            __typename: 'Comparison',
+            impactedFiles: [
+              {
+                headName: 'src/App.tsx',
+                patchCoverage: {
+                  coverage: 100,
+                },
+              },
+            ],
+            patchTotals: {
+              coverage: 100,
+            },
+            state: 'processed',
+          },
+        }
+
+        await waitFor(() =>
+          expect(result.current.data).toStrictEqual(expectedResult)
+        )
+      })
+    })
+
+    describe('there is a null owner', () => {
+      it('returns a null value', async () => {
+        setup({ isNullOwner: true })
+        const { result } = renderHook(
+          () =>
+            useCompareTotalsTeam({
+              provider: 'gh',
+              owner: 'codecov',
+              repo: 'test-repo',
+              commitid: 's2h5a6',
+            }),
+          { wrapper }
+        )
+
+        await waitFor(() => expect(result.current.data).toBeNull())
+      })
+    })
+  })
+
+  describe('returns NotFound Error __typename', () => {
+    beforeEach(() => {
+      jest.spyOn(console, 'error')
+    })
+
+    afterEach(() => {
+      jest.resetAllMocks()
+    })
+
+    it('throws a 404', async () => {
+      setup({ isNotFoundError: true })
+      const { result } = renderHook(
+        () =>
+          useCompareTotalsTeam({
+            provider: 'gh',
+            owner: 'codecov',
+            repo: 'test-repo',
+            commitid: 's2h5a6',
+          }),
+        { wrapper }
+      )
+
+      await waitFor(() => expect(result.current.isError).toBeTruthy())
+      await waitFor(() =>
+        expect(result.current.error).toEqual(
+          expect.objectContaining({ status: 404 })
+        )
+      )
+    })
+  })
+
+  describe('returns OwnerNotActivatedError __typename', () => {
+    beforeEach(() => {
+      jest.spyOn(console, 'error')
+    })
+
+    afterEach(() => {
+      jest.resetAllMocks()
+    })
+
+    it('throws a 403', async () => {
+      setup({ isOwnerNotActivatedError: true })
+      const { result } = renderHook(
+        () =>
+          useCompareTotalsTeam({
+            provider: 'gh',
+            owner: 'codecov',
+            repo: 'test-repo',
+            commitid: 's2h5a6',
+          }),
+        { wrapper }
+      )
+
+      await waitFor(() => expect(result.current.isError).toBeTruthy())
+      await waitFor(() =>
+        expect(result.current.error).toEqual(
+          expect.objectContaining({ status: 403 })
+        )
+      )
+    })
+  })
+
+  describe('unsuccessful parse of zod schema', () => {
+    beforeEach(() => {
+      jest.spyOn(console, 'error')
+    })
+
+    afterEach(() => {
+      jest.resetAllMocks()
+    })
+
+    it('throws a 404', async () => {
+      setup({ isUnsuccessfulParseError: true })
+      const { result } = renderHook(
+        () =>
+          useCompareTotalsTeam({
+            provider: 'gh',
+            owner: 'codecov',
+            repo: 'test-repo',
+            commitid: 's2h5a6',
+          }),
+        { wrapper }
+      )
+
+      await waitFor(() => expect(result.current.isError).toBeTruthy())
+      await waitFor(() =>
+        expect(result.current.error).toEqual(
+          expect.objectContaining({ status: 404 })
+        )
+      )
+    })
+  })
+})
diff --git a/src/services/commit/useCompareTotalsTeam.tsx b/src/services/commit/useCompareTotalsTeam.tsx
new file mode 100644
index 0000000000..17add1cfc1
--- /dev/null
+++ b/src/services/commit/useCompareTotalsTeam.tsx
@@ -0,0 +1,202 @@
+import { useQuery, type UseQueryOptions } from '@tanstack/react-query'
+import { z } from 'zod'
+
+import {
+  FirstPullRequestSchema,
+  MissingBaseCommitSchema,
+  MissingBaseReportSchema,
+  MissingComparisonSchema,
+  MissingHeadCommitSchema,
+  MissingHeadReportSchema,
+} from 'services/comparison/schemas'
+import {
+  RepoNotFoundErrorSchema,
+  RepoOwnerNotActivatedErrorSchema,
+} from 'services/repo/schemas'
+import Api from 'shared/api'
+import A from 'ui/A'
+
+const CoverageObjSchema = z.object({
+  coverage: z.number().nullable(),
+})
+
+const ComparisonSchema = z.object({
+  __typename: z.literal('Comparison'),
+  state: z.string(),
+  patchTotals: CoverageObjSchema.nullable(),
+  impactedFiles: z.array(
+    z.object({
+      headName: z.string().nullable(),
+      patchCoverage: CoverageObjSchema.nullable(),
+    })
+  ),
+})
+
+const CompareWithParentSchema = z
+  .discriminatedUnion('__typename', [
+    ComparisonSchema,
+    FirstPullRequestSchema,
+    MissingBaseCommitSchema,
+    MissingBaseReportSchema,
+    MissingComparisonSchema,
+    MissingHeadCommitSchema,
+    MissingHeadReportSchema,
+  ])
+  .nullable()
+
+const CommitSchema = z.object({
+  compareWithParent: CompareWithParentSchema.nullable(),
+})
+const RepositorySchema = z.object({
+  __typename: z.literal('Repository'),
+  commit: CommitSchema.nullable(),
+})
+
+const RequestSchema = z.object({
+  owner: z
+    .object({
+      repository: z.discriminatedUnion('__typename', [
+        RepositorySchema,
+        RepoNotFoundErrorSchema,
+        RepoOwnerNotActivatedErrorSchema,
+      ]),
+    })
+    .nullable(),
+})
+
+const query = `
+query GetCompareTotalsTeam(
+  $owner: String!
+  $repo: String!
+  $commitid: String!
+  $filters: ImpactedFilesFilters
+) {
+  owner(username: $owner) {
+    repository(name: $repo) {
+      __typename
+      ... on Repository {
+        commit(id: $commitid) {
+          compareWithParent {
+            __typename
+            ... on Comparison {
+              state
+              patchTotals {
+                coverage: percentCovered
+              }
+              impactedFiles: impactedFilesDeprecated(filters: $filters) {
+                headName
+                patchCoverage {
+                  coverage: percentCovered
+                }
+              }
+            }
+            ... on FirstPullRequest {
+              message
+            }
+            ... on MissingBaseCommit {
+              message
+            }
+            ... on MissingHeadCommit {
+              message
+            }
+            ... on MissingComparison {
+              message
+            }
+            ... on MissingBaseReport {
+              message
+            }
+            ... on MissingHeadReport {
+              message
+            }
+          }
+        }
+      }
+      ... on NotFoundError {
+        message
+      }
+      ... on OwnerNotActivatedError {
+        message
+      }
+    }
+  }
+}`
+
+interface UseCompareTotalsTeamArgs {
+  provider: string
+  owner: string
+  repo: string
+  commitid: string
+  filters?: {}
+  opts?: UseQueryOptions<z.infer<typeof CommitSchema> | null>
+}
+
+export function useCompareTotalsTeam({
+  provider,
+  owner,
+  repo,
+  commitid,
+  filters = {},
+  opts,
+}: UseCompareTotalsTeamArgs) {
+  return useQuery({
+    queryKey: [
+      'GetCompareTotalsTeam',
+      provider,
+      owner,
+      repo,
+      commitid,
+      query,
+      filters,
+    ],
+    queryFn: ({ signal }) => {
+      return Api.graphql({
+        provider,
+        query,
+        signal,
+        variables: {
+          owner,
+          repo,
+          commitid,
+          filters,
+        },
+      }).then((res) => {
+        const parsedRes = RequestSchema.safeParse(res?.data)
+
+        if (!parsedRes.success) {
+          return Promise.reject({
+            status: 404,
+            data: null,
+          })
+        }
+
+        const data = parsedRes.data
+
+        if (data?.owner?.repository?.__typename === 'NotFoundError') {
+          return Promise.reject({
+            status: 404,
+            data: {},
+          })
+        }
+
+        if (data?.owner?.repository?.__typename === 'OwnerNotActivatedError') {
+          return Promise.reject({
+            status: 403,
+            data: {
+              detail: (
+                <p>
+                  Activation is required to view this repo, please{' '}
+                  {/* @ts-expect-error */}
+                  <A to={{ pageName: 'membersTab' }}>click here </A> to activate
+                  your account.
+                </p>
+              ),
+            },
+          })
+        }
+
+        return data?.owner?.repository?.commit ?? null
+      })
+    },
+    ...(!!opts && opts),
+  })
+}
diff --git a/src/services/tier/useTier.spec.tsx b/src/services/tier/useTier.spec.tsx
index fd0ae8d077..c4bf0d62cb 100644
--- a/src/services/tier/useTier.spec.tsx
+++ b/src/services/tier/useTier.spec.tsx
@@ -14,13 +14,17 @@ const mockOwnerTier = {
   },
 }
 
+const mockNullOwner = {
+  owner: null,
+}
+
+const mockUnsuccessfulParseError = {}
+
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
 const server = setupServer()
 
-const mockUnsuccessfulParseError = {}
-
 const wrapper = ({ children }: { children: ReactNode }) => (
   <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 )
@@ -38,12 +42,22 @@ afterAll(() => {
   server.close()
 })
 
+interface SetupArgs {
+  isNullOwner?: boolean
+  isUnsuccessfulParseError?: boolean
+}
+
 describe('useTier', () => {
-  function setup({ isUnsuccessfulParseError = false }) {
+  function setup({
+    isUnsuccessfulParseError = false,
+    isNullOwner = false,
+  }: SetupArgs) {
     server.use(
       graphql.query('OwnerTier', (req, res, ctx) => {
         if (isUnsuccessfulParseError) {
           return res(ctx.status(200), ctx.data(mockUnsuccessfulParseError))
+        } else if (isNullOwner) {
+          return res(ctx.status(200), ctx.data(mockNullOwner))
         } else {
           return res(ctx.status(200), ctx.data(mockOwnerTier))
         }
@@ -53,20 +67,38 @@ describe('useTier', () => {
 
   describe('when useTier is called', () => {
     describe('api returns valid response', () => {
-      beforeEach(() => {
-        setup({})
+      describe('tier field is resolved', () => {
+        it('returns the owners tier', async () => {
+          setup({})
+          const { result } = renderHook(
+            () =>
+              useTier({
+                provider: 'gh',
+                owner: 'codecov',
+              }),
+            { wrapper }
+          )
+
+          await waitFor(() => result.current.isSuccess)
+          await waitFor(() => expect(result.current.data).toEqual('pro'))
+        })
       })
-      it('returns the owners tier', async () => {
-        const { result } = renderHook(
-          () =>
-            useTier({
-              provider: 'gh',
-              owner: 'codecov',
-            }),
-          { wrapper }
-        )
-        await waitFor(() => result.current.isSuccess)
-        await waitFor(() => expect(result.current.data).toEqual('pro'))
+
+      describe('parent field is resolved as null', () => {
+        it('returns null value', async () => {
+          setup({ isNullOwner: true })
+
+          const { result } = renderHook(
+            () =>
+              useTier({
+                provider: 'gh',
+                owner: 'codecov',
+              }),
+            { wrapper }
+          )
+
+          await waitFor(() => expect(result.current.data).toBeNull())
+        })
       })
     })
 
diff --git a/src/services/tier/useTier.ts b/src/services/tier/useTier.ts
index 2cfe291ffa..54ce776d6d 100644
--- a/src/services/tier/useTier.ts
+++ b/src/services/tier/useTier.ts
@@ -5,7 +5,7 @@ import Api from 'shared/api'
 
 export const TierNames = {
   BASIC: 'basic',
-  LITE: 'lite',
+  TEAM: 'team',
   PRO: 'pro',
   ENTERPRISE: 'enterprise',
 } as const
diff --git a/src/ui/FileList/FileList.css b/src/ui/FileList/FileList.css
index a7605c9193..11d74de9be 100644
--- a/src/ui/FileList/FileList.css
+++ b/src/ui/FileList/FileList.css
@@ -40,8 +40,8 @@
   @apply text-right justify-end;
 }
 
-/* <element data-type="numeric"> */
-.filelistui [data-type='numeric'] {
+/* <element className="filelistui-row" data-type="numeric"> */
+.filelistui .filelistui-row [data-type='numeric'] {
   @apply font-mono text-right justify-end;
 }
 

From c774ee786dae4f53bd20a01ef545324573fe7ebe Mon Sep 17 00:00:00 2001
From: Terry <87824812+terry-codecov@users.noreply.github.com>
Date: Tue, 17 Oct 2023 20:06:36 +0200
Subject: [PATCH 06/11] Setup pull request page to pass around selected flags
 (#2282)

* feat: setup pull request page to pass around selected flags in links

* Feedback, fix passing links to files+folders, additional testing

* fix file explorer test failing on href match due to new query param pass through

* airplane commit, cant check local dev server: Resolve merge issues / tests + unify codebases missed of commitSHA and commitSha to just commitSha

* Prevent multislect from collapsing + wire up PR details page to pass through flags links

* Fix accidental removal of ref on usePrefetchPullFileEntry

* Add patch column to pulls table (#2308)

* feat: add patch column to the pulls list page

* uncomment development settings

* feat: Create Team Plan Table for the Files Changed Table on the Commit Detail Page (#2309)

Create new commit fetching hooks for the team plan, as well as creating a new table for files changed tab on the
commit detail page for the new team plan.

GH codecov/engineering-team#633

---------

Co-authored-by: Adrian <adrian@codecov.io>
Co-authored-by: nicholas-codecov <nicholas.deschenes@sentry.io>
---
 .../CommitDetailPage/CommitDetailPage.jsx     |   8 +-
 .../CommitDetailPageContent.jsx               |   6 +-
 .../CommitDetailPageTabs.jsx                  |  16 +-
 .../hooks/useCommitForSummary.js              |   4 +-
 src/pages/CommitDetailPage/Header/Header.jsx  |   8 +-
 .../FilesChangedTable/FilesChangedTable.jsx   |   4 +-
 .../IndirectChangesTable.jsx                  |   4 +-
 .../PullRequestPageTabs.jsx                   |  24 +-
 .../PullRequestPageTabs.spec.jsx              |  29 +-
 .../Summary/CompareSummary.jsx                |  53 +++-
 .../Summary/CompareSummary.spec.jsx           | 185 ++++++++++++-
 .../CommitsTab/CommitsTable/CommitsTable.jsx  |  11 +-
 .../CommitsTab/CommitsTable/Title/Title.jsx   |   5 +-
 .../hooks/useRepoPullContentsTable.js         |   6 +-
 src/pages/RepoPage/utils/paths.js             |   8 +-
 src/pages/RepoPage/utils/paths.spec.js        |   4 +-
 .../navigation/useNavLinks/useNavLinks.js     | 108 ++++++--
 .../useNavLinks/useNavLinks.spec.js           | 252 ++++++++++++++++++
 .../TableEntries/PullEntries/PullDirEntry.jsx |   4 +
 .../PullEntries/PullDirEntry.spec.jsx         |  58 +++-
 .../PullEntries/PullFileEntry.jsx             |  14 +-
 .../PullEntries/PullFileEntry.spec.jsx        |  97 ++++---
 src/ui/MultiSelect/MultiSelect.jsx            |   2 +-
 23 files changed, 785 insertions(+), 125 deletions(-)

diff --git a/src/pages/CommitDetailPage/CommitDetailPage.jsx b/src/pages/CommitDetailPage/CommitDetailPage.jsx
index 32ffbc8026..79893038e4 100644
--- a/src/pages/CommitDetailPage/CommitDetailPage.jsx
+++ b/src/pages/CommitDetailPage/CommitDetailPage.jsx
@@ -44,8 +44,8 @@ function CommitErrorBanners() {
 }
 
 function CommitDetailPage() {
-  const { provider, owner, repo, commit: commitSHA } = useParams()
-  const shortSHA = commitSHA?.slice(0, 7)
+  const { provider, owner, repo, commit: commitSha } = useParams()
+  const shortSHA = commitSha?.slice(0, 7)
 
   // reset cache when user navigates to the commit detail page
   const queryClient = useQueryClient()
@@ -55,7 +55,7 @@ function CommitDetailPage() {
     provider,
     owner,
     repo,
-    commitId: commitSHA,
+    commitId: commitSha,
   })
 
   if (
@@ -75,7 +75,7 @@ function CommitDetailPage() {
           { pageName: 'commits', text: 'commits' },
           {
             pageName: 'commit',
-            options: { commitSHA },
+            options: { commitSha },
             readOnly: true,
             text: shortSHA,
           },
diff --git a/src/pages/CommitDetailPage/CommitDetailPageContent/CommitDetailPageContent.jsx b/src/pages/CommitDetailPage/CommitDetailPageContent/CommitDetailPageContent.jsx
index 232f33fcbd..69a5c13210 100644
--- a/src/pages/CommitDetailPage/CommitDetailPageContent/CommitDetailPageContent.jsx
+++ b/src/pages/CommitDetailPage/CommitDetailPageContent/CommitDetailPageContent.jsx
@@ -27,13 +27,13 @@ const Loader = () => (
 )
 
 function CommitDetailPageContent() {
-  const { provider, owner, repo, commit: commitSHA } = useParams()
+  const { provider, owner, repo, commit: commitSha } = useParams()
 
   const { data: commitData } = useCommit({
     provider,
     owner,
     repo,
-    commitid: commitSHA,
+    commitid: commitSha,
   })
 
   const { erroredUploads } = extractUploads({
@@ -52,7 +52,7 @@ function CommitDetailPageContent() {
   return (
     <>
       <CommitPageTabs
-        commitSHA={commitSHA}
+        commitSha={commitSha}
         indirectChangedFilesCount={indirectChangedFilesCount}
         directChangedFilesCount={directChangedFilesCount}
       />
diff --git a/src/pages/CommitDetailPage/CommitDetailPageTabs/CommitDetailPageTabs.jsx b/src/pages/CommitDetailPage/CommitDetailPageTabs/CommitDetailPageTabs.jsx
index 8636c1c730..ef7f857af3 100644
--- a/src/pages/CommitDetailPage/CommitDetailPageTabs/CommitDetailPageTabs.jsx
+++ b/src/pages/CommitDetailPage/CommitDetailPageTabs/CommitDetailPageTabs.jsx
@@ -12,7 +12,7 @@ import ToggleHeader from 'ui/FileViewer/ToggleHeader'
 import TabNavigation from 'ui/TabNavigation'
 
 function CommitDetailPageTabs({
-  commitSHA,
+  commitSha,
   indirectChangedFilesCount,
   directChangedFilesCount,
 }) {
@@ -33,17 +33,17 @@ function CommitDetailPageTabs({
   })
 
   const blobPath = location.pathname.includes(
-    `/${provider}/${commitFileviewString({ owner, repo, commitSHA })}`
+    `/${provider}/${commitFileviewString({ owner, repo, commitSha })}`
   )
 
   const filePath = location.pathname.includes(
-    `/${provider}/${commitTreeviewString({ owner, repo, commitSHA })}`
+    `/${provider}/${commitTreeviewString({ owner, repo, commitSha })}`
   )
 
   let customLocation = undefined
   if (blobPath || filePath) {
     customLocation = {
-      pathname: `/${provider}/${owner}/${repo}/commit/${commitSHA}/tree`,
+      pathname: `/${provider}/${owner}/${repo}/commit/${commitSha}/tree`,
     }
   }
 
@@ -58,12 +58,12 @@ function CommitDetailPageTabs({
               <sup className="text-xs">{directChangedFilesCount}</sup>
             </>
           ),
-          options: { commit: commitSHA, queryParams },
+          options: { commit: commitSha, queryParams },
           exact: true,
         },
         {
           pageName: 'commitIndirectChanges',
-          options: { commit: commitSHA, queryParams },
+          options: { commit: commitSha, queryParams },
           children: (
             <>
               Indirect changes
@@ -74,7 +74,7 @@ function CommitDetailPageTabs({
         {
           pageName: 'commitTreeView',
           children: 'File explorer',
-          options: { commit: commitSHA, queryParams },
+          options: { commit: commitSha, queryParams },
           location: customLocation,
         },
       ]}
@@ -90,7 +90,7 @@ function CommitDetailPageTabs({
 }
 
 CommitDetailPageTabs.propTypes = {
-  commitSHA: PropTypes.string,
+  commitSha: PropTypes.string,
   indirectChangedFilesCount: PropTypes.number,
   directChangedFilesCount: PropTypes.number,
 }
diff --git a/src/pages/CommitDetailPage/CommitDetailSummary/hooks/useCommitForSummary.js b/src/pages/CommitDetailPage/CommitDetailSummary/hooks/useCommitForSummary.js
index 97f7038e59..1c1fff1b29 100644
--- a/src/pages/CommitDetailPage/CommitDetailSummary/hooks/useCommitForSummary.js
+++ b/src/pages/CommitDetailPage/CommitDetailSummary/hooks/useCommitForSummary.js
@@ -27,13 +27,13 @@ export function getCommitDataForSummary({
 }
 
 export function useCommitForSummary() {
-  const { provider, owner, repo, commit: commitSHA } = useParams()
+  const { provider, owner, repo, commit: commitSha } = useParams()
 
   const { data } = useCommit({
     provider,
     owner,
     repo,
-    commitid: commitSHA,
+    commitid: commitSha,
   })
 
   const compareWithParent = data?.commit?.compareWithParent
diff --git a/src/pages/CommitDetailPage/Header/Header.jsx b/src/pages/CommitDetailPage/Header/Header.jsx
index 7844b44c26..d15b7d0cda 100644
--- a/src/pages/CommitDetailPage/Header/Header.jsx
+++ b/src/pages/CommitDetailPage/Header/Header.jsx
@@ -11,14 +11,14 @@ import { useCommitHeaderData } from './hooks'
 import PullLabel from './PullLabel'
 
 function Header() {
-  const { provider, owner, repo, commit: commitSHA } = useParams()
-  const shortSHA = commitSHA?.slice(0, 7)
+  const { provider, owner, repo, commit: commitSha } = useParams()
+  const shortSHA = commitSha?.slice(0, 7)
 
   const { data: headerData } = useCommitHeaderData({
     provider,
     owner,
     repo,
-    commitId: commitSHA,
+    commitId: commitSha,
   })
 
   const providerPullUrl = getProviderPullURL({
@@ -32,7 +32,7 @@ function Header() {
     provider,
     owner,
     repo,
-    commit: commitSHA,
+    commit: commitSha,
   })
 
   return (
diff --git a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTable/FilesChangedTable.jsx b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTable/FilesChangedTable.jsx
index f7d1cf5910..9995bf7030 100644
--- a/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTable/FilesChangedTable.jsx
+++ b/src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangedTable/FilesChangedTable.jsx
@@ -146,13 +146,13 @@ RenderSubComponent.propTypes = {
 }
 
 function FilesChangedTable() {
-  const { provider, owner, repo, commit: commitSHA } = useParams()
+  const { provider, owner, repo, commit: commitSha } = useParams()
 
   const { data: commitData, isLoading } = useCommit({
     provider,
     owner,
     repo,
-    commitid: commitSHA,
+    commitid: commitSha,
     filters: {
       hasUnintendedChanges: false,
     },
diff --git a/src/pages/CommitDetailPage/subRoute/IndirectChangesTab/IndirectChangesTable/IndirectChangesTable.jsx b/src/pages/CommitDetailPage/subRoute/IndirectChangesTab/IndirectChangesTable/IndirectChangesTable.jsx
index 1e8de46c9e..f5b7f5bf57 100644
--- a/src/pages/CommitDetailPage/subRoute/IndirectChangesTab/IndirectChangesTable/IndirectChangesTable.jsx
+++ b/src/pages/CommitDetailPage/subRoute/IndirectChangesTab/IndirectChangesTable/IndirectChangesTable.jsx
@@ -139,13 +139,13 @@ RenderSubComponent.propTypes = {
 }
 
 function IndirectChangesTable() {
-  const { provider, owner, repo, commit: commitSHA } = useParams()
+  const { provider, owner, repo, commit: commitSha } = useParams()
 
   const { data: commitData, isLoading } = useCommit({
     provider,
     owner,
     repo,
-    commitid: commitSHA,
+    commitid: commitSha,
     filters: {
       hasUnintendedChanges: true,
     },
diff --git a/src/pages/PullRequestPage/PullRequestPageTabs/PullRequestPageTabs.jsx b/src/pages/PullRequestPage/PullRequestPageTabs/PullRequestPageTabs.jsx
index 759c8155ca..d7dba39e6a 100644
--- a/src/pages/PullRequestPage/PullRequestPageTabs/PullRequestPageTabs.jsx
+++ b/src/pages/PullRequestPage/PullRequestPageTabs/PullRequestPageTabs.jsx
@@ -1,9 +1,11 @@
+import qs from 'qs'
 import { useLocation, useParams } from 'react-router-dom'
 
 import {
   pullFileviewString,
   pullTreeviewString,
 } from 'pages/PullRequestPage/utils'
+import { useFlags } from 'shared/featureFlags'
 import ToggleHeader from 'ui/FileViewer/ToggleHeader'
 import TabNavigation from 'ui/TabNavigation'
 
@@ -17,9 +19,14 @@ function PullRequestPageTabs() {
     directChangedFilesCount,
     commitsCount,
   } = useTabsCounts()
+  const { pullRequestPageFlagMultiSelect } = useFlags({
+    pullRequestPageFlagMultiSelect: false,
+  })
 
-  const { pathname } = useLocation()
+  const { pathname, search } = useLocation()
   const { provider, owner, repo, pullId } = useParams()
+  const searchParams = qs.parse(search, { ignoreQueryPrefix: true })
+  const flags = searchParams?.flags ?? []
 
   const blobPath = pathname.includes(
     `/${provider}/${pullFileviewString({ owner, repo, pullId })}`
@@ -47,6 +54,7 @@ function PullRequestPageTabs() {
               <sup className="text-xs">{directChangedFilesCount}</sup>
             </>
           ),
+          options: { queryParams: { flags } },
           exact: true,
         },
         {
@@ -57,6 +65,7 @@ function PullRequestPageTabs() {
               <sup className="text-xs">{indirectChangesCount}</sup>
             </>
           ),
+          options: { queryParams: { flags } },
         },
         {
           pageName: 'pullCommits',
@@ -66,6 +75,7 @@ function PullRequestPageTabs() {
               <sup className="text-xs">{commitsCount}</sup>
             </>
           ),
+          options: { queryParams: { flags } },
         },
         {
           pageName: 'pullFlags',
@@ -75,6 +85,7 @@ function PullRequestPageTabs() {
               <sup className="text-xs">{flagsCount}</sup>
             </>
           ),
+          options: { queryParams: { flags } },
         },
         {
           pageName: 'pullComponents',
@@ -84,15 +95,22 @@ function PullRequestPageTabs() {
               <sup className="text-xs">{componentsCount}</sup>
             </>
           ),
+          options: { queryParams: { flags } },
         },
         {
           pageName: 'pullTreeView',
           children: 'File explorer',
-          options: { pullId },
+          options: { pullId, queryParams: { flags } },
           location: customLocation,
         },
       ]}
-      component={<ToggleHeader coverageIsLoading={false} showHitCount={true} />}
+      component={
+        <ToggleHeader
+          coverageIsLoading={false}
+          showHitCount={true}
+          showFlagsSelect={pullRequestPageFlagMultiSelect}
+        />
+      }
     />
   )
 }
diff --git a/src/pages/PullRequestPage/PullRequestPageTabs/PullRequestPageTabs.spec.jsx b/src/pages/PullRequestPage/PullRequestPageTabs/PullRequestPageTabs.spec.jsx
index df0bc3bee9..6412700a29 100644
--- a/src/pages/PullRequestPage/PullRequestPageTabs/PullRequestPageTabs.spec.jsx
+++ b/src/pages/PullRequestPage/PullRequestPageTabs/PullRequestPageTabs.spec.jsx
@@ -4,8 +4,12 @@ import { graphql } from 'msw'
 import { setupServer } from 'msw/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
+import { useFlags } from 'shared/featureFlags'
+
 import PullRequestPageTabs from './PullRequestPageTabs'
 
+jest.mock('shared/featureFlags')
+
 const mockCommits = {
   owner: {
     repository: {
@@ -77,13 +81,23 @@ afterAll(() => {
 })
 
 describe('PullRequestPageTabs', () => {
-  function setup() {
+  function setup(
+    { pullRequestPageFlagMultiSelect = false } = {
+      pullRequestPageFlagMultiSelect: false,
+    }
+  ) {
+    useFlags.mockReturnValue({
+      pullRequestPageFlagMultiSelect,
+    })
     server.use(
       graphql.query('PullPageData', (req, res, ctx) =>
         res(ctx.status(200), ctx.data(mockPullData))
       ),
       graphql.query('GetCommits', (req, res, ctx) =>
         res(ctx.status(200), ctx.data(mockCommits))
+      ),
+      graphql.query('BackfillFlagMemberships', (req, res, ctx) =>
+        res(ctx.status(200), ctx.data({}))
       )
     )
   }
@@ -285,4 +299,17 @@ describe('PullRequestPageTabs', () => {
       expect(legend).toBeInTheDocument()
     })
   })
+
+  // describe('flags select dropdown', () => {
+  //   beforeEach(() => setup({ pullRequestPageFlagMultiSelect: true }))
+
+  //   it('renders flags select dropdown', async () => {
+  //     render(<PullRequestPageTabs />, { wrapper: wrapper() })
+
+  //     const multiSelect = await screen.findByRole('button', {
+  //       name: 'All Flags',
+  //     })
+  //     expect(multiSelect).toBeInTheDocument()
+  //   })
+  // })
 })
diff --git a/src/pages/PullRequestPage/Summary/CompareSummary.jsx b/src/pages/PullRequestPage/Summary/CompareSummary.jsx
index 0b086be699..b74e043ef6 100644
--- a/src/pages/PullRequestPage/Summary/CompareSummary.jsx
+++ b/src/pages/PullRequestPage/Summary/CompareSummary.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
-import { useParams } from 'react-router-dom'
+import qs from 'qs'
+import { useLocation, useParams } from 'react-router-dom'
 
 import { getProviderCommitURL } from 'shared/utils'
 import A from 'ui/A'
@@ -90,18 +91,29 @@ function CardWithDifferentNumberOfUploads({
   behindBy,
   behindByCommit,
   defaultBranch,
+  flags = [],
 }) {
   return (
     <div className="flex flex-col gap-1">
       <p className="text-sm text-ds-gray-octonary">
         Coverage data is based on{' '}
         <span className="font-medium uppercase">head</span>{' '}
-        <A to={{ pageName: 'commit', options: { commit: headCommit } }}>
+        <A
+          to={{
+            pageName: 'commit',
+            options: { commit: headCommit, queryParams: { flags } },
+          }}
+        >
           {headCommit?.slice(0, 7)}
           <span>({head?.uploads?.totalCount} uploads)</span>
         </A>{' '}
         compared to <span className="font-medium uppercase">base</span>{' '}
-        <A to={{ pageName: 'commit', options: { commit: baseCommit } }}>
+        <A
+          to={{
+            pageName: 'commit',
+            options: { commit: baseCommit, queryParams: { flags } },
+          }}
+        >
           {baseCommit?.slice(0, 7)}
           <span>({base?.uploads?.totalCount} uploads)</span>
         </A>{' '}
@@ -149,6 +161,7 @@ CardWithDifferentNumberOfUploads.propTypes = {
   behindBy: PropTypes.number,
   behindByCommit: PropTypes.string,
   defaultBranch: PropTypes.string,
+  flags: PropTypes.array,
 }
 
 function CardWithSameNumberOfUploads({
@@ -157,16 +170,27 @@ function CardWithSameNumberOfUploads({
   behindBy,
   behindByCommit,
   defaultBranch,
+  flags = [],
 }) {
   return (
     <p className="text-sm text-ds-gray-octonary">
       Coverage data is based on{' '}
       <span className="font-medium uppercase">head</span>{' '}
-      <A to={{ pageName: 'commit', options: { commit: headCommit } }}>
+      <A
+        to={{
+          pageName: 'commit',
+          options: { commit: headCommit, queryParams: { flags } },
+        }}
+      >
         {headCommit?.slice(0, 7)}
       </A>{' '}
       compared to <span className="font-medium uppercase">base</span>{' '}
-      <A to={{ pageName: 'commit', options: { commit: baseCommit } }}>
+      <A
+        to={{
+          pageName: 'commit',
+          options: { commit: baseCommit, queryParams: { flags } },
+        }}
+      >
         {baseCommit?.slice(0, 7)}
       </A>{' '}
       <BehindByCommits
@@ -184,6 +208,7 @@ CardWithSameNumberOfUploads.propTypes = {
   behindBy: PropTypes.number,
   behindByCommit: PropTypes.string,
   defaultBranch: PropTypes.string,
+  flags: PropTypes.array,
 }
 
 function compareCards({
@@ -193,6 +218,7 @@ function compareCards({
   behindBy,
   behindByCommit,
   defaultBranch,
+  flags = [],
 }) {
   const headCommit = head?.commitid
   const baseCommit = base?.commitid
@@ -212,6 +238,7 @@ function compareCards({
                 behindBy={behindBy}
                 behindByCommit={behindByCommit}
                 defaultBranch={defaultBranch}
+                flags={flags}
               />
             ) : (
               <CardWithSameNumberOfUploads
@@ -220,6 +247,7 @@ function compareCards({
                 behindBy={behindBy}
                 behindByCommit={behindByCommit}
                 defaultBranch={defaultBranch}
+                flags={flags}
               />
             )}
           </>
@@ -247,7 +275,7 @@ function pendingCard({ patchCoverage, headCoverage, changeCoverage }) {
   return card
 }
 
-function lastCommitErrorCard({ recentCommit }) {
+function lastCommitErrorCard({ recentCommit, flags = [] }) {
   const card = []
 
   if (recentCommit?.state?.toLowerCase() === 'error') {
@@ -263,7 +291,10 @@ function lastCommitErrorCard({ recentCommit }) {
             <A
               to={{
                 pageName: 'commit',
-                options: { commit: recentCommit?.commitid },
+                options: {
+                  commit: recentCommit?.commitid,
+                  queryParams: { flags },
+                },
               }}
             >
               {recentCommit?.commitid?.slice(0, 7)}
@@ -290,6 +321,9 @@ function CompareSummary() {
     behindByCommit,
     defaultBranch,
   } = usePullForCompareSummary()
+  const { search } = useLocation()
+  const searchParams = qs.parse(search, { ignoreQueryPrefix: true })
+  const flags = searchParams?.flags ?? []
 
   const fields = [
     ...totalsCards({
@@ -305,9 +339,10 @@ function CompareSummary() {
       behindBy,
       behindByCommit,
       defaultBranch,
+      flags,
     }),
-    ...pendingCard({ patchCoverage, headCoverage, changeCoverage }),
-    ...lastCommitErrorCard({ recentCommit }),
+    ...pendingCard({ patchCoverage, headCoverage, changeCoverage, flags }),
+    ...lastCommitErrorCard({ recentCommit, flags }),
   ]
 
   return (
diff --git a/src/pages/PullRequestPage/Summary/CompareSummary.spec.jsx b/src/pages/PullRequestPage/Summary/CompareSummary.spec.jsx
index 5e6fd22abc..6b5adcbf9a 100644
--- a/src/pages/PullRequestPage/Summary/CompareSummary.spec.jsx
+++ b/src/pages/PullRequestPage/Summary/CompareSummary.spec.jsx
@@ -106,7 +106,34 @@ describe('CompareSummary', () => {
       setup({
         owner: {
           repository: {
-            pull: { commits: { edges: [{ node: { state: 'error' } }] } },
+            pull: {
+              commits: { edges: [{ node: { state: 'error' } }] },
+              behindBy: 82367894,
+              behindByCommit: '1798hvs8ofhn',
+              head: {
+                commitid: 'fc43199b07c52cf3d6c19b7cdb368f74387c38ab',
+                totals: {
+                  percentCovered: 78.33,
+                },
+                uploads: {
+                  totalCount: 4,
+                },
+              },
+              comparedTo: {
+                commitid: '2d6c42fe217c61b007b2c17544a9d85840381857',
+                uploads: {
+                  totalCount: 1,
+                },
+              },
+              compareWithBase: {
+                hasDifferentNumberOfHeadAndBaseReports: false,
+                patchTotals: {
+                  percentCovered: 92.12,
+                },
+                changeCoverage: 38.94,
+              },
+            },
+            defaultBranch: 'main',
           },
         },
       })
@@ -118,6 +145,35 @@ describe('CompareSummary', () => {
         /There is an error processing the coverage reports with/i
       )
       expect(card).toBeInTheDocument()
+
+      const baseCommitLink = screen.getByRole('link', {
+        name: /2d6c42f/i,
+      })
+      expect(baseCommitLink).toBeInTheDocument()
+      expect(baseCommitLink).toHaveAttribute(
+        'href',
+        '/gh/test-org/test-repo/commit/2d6c42fe217c61b007b2c17544a9d85840381857'
+      )
+    })
+
+    it('renders a error card with flags selected', async () => {
+      render(<CompareSummary />, {
+        wrapper: wrapper(['/gh/test-org/test-repo/pull/5?flags=a,b,c']),
+      })
+
+      const card = await screen.findByText(
+        /There is an error processing the coverage reports with/i
+      )
+      expect(card).toBeInTheDocument()
+
+      const baseCommitLink = screen.getByRole('link', {
+        name: /2d6c42f/i,
+      })
+      expect(baseCommitLink).toBeInTheDocument()
+      expect(baseCommitLink).toHaveAttribute(
+        'href',
+        '/gh/test-org/test-repo/commit/2d6c42fe217c61b007b2c17544a9d85840381857?flags=a%2Cb%2Cc'
+      )
     })
   })
 
@@ -189,8 +245,72 @@ describe('CompareSummary', () => {
       const headCommitIds = await screen.findAllByText('fc43199')
       expect(headCommitIds).toHaveLength(2)
 
-      const baseCommitIds = await screen.findAllByText('2d6c42f')
-      expect(baseCommitIds).toHaveLength(1)
+      const headCommitLink = screen.getByRole('link', {
+        name: /fc43199/i,
+      })
+      expect(headCommitLink).toBeInTheDocument()
+      expect(headCommitLink).toHaveAttribute(
+        'href',
+        '/gh/test-org/test-repo/commit/fc43199b07c52cf3d6c19b7cdb368f74387c38ab'
+      )
+
+      const baseCommitLink = screen.getByRole('link', {
+        name: /2d6c42f/i,
+      })
+      expect(baseCommitLink).toBeInTheDocument()
+      expect(baseCommitLink).toHaveAttribute(
+        'href',
+        '/gh/test-org/test-repo/commit/2d6c42fe217c61b007b2c17544a9d85840381857'
+      )
+    })
+
+    it('renders a card for every valid field with flags', async () => {
+      render(<CompareSummary />, {
+        wrapper: wrapper(['/gh/test-org/test-repo/pull/5?flags=a,b,c']),
+      })
+      const headCardTitle = await screen.findByText('HEAD')
+      expect(headCardTitle).toBeInTheDocument()
+      const headCardValue = await screen.findByText('78.33%')
+      expect(headCardValue).toBeInTheDocument()
+
+      const patchCardTitle = await screen.findByText('Patch')
+      expect(patchCardTitle).toBeInTheDocument()
+      const patchCardValue = await screen.findByText('92.12%')
+      expect(patchCardValue).toBeInTheDocument()
+
+      const changeCardTitle = await screen.findByText('Change')
+      expect(changeCardTitle).toBeInTheDocument()
+      const changeCardValue = await screen.findByText('38.94%')
+      expect(changeCardValue).toBeInTheDocument()
+      expect(changeCardValue).toHaveClass("before:content-['+']")
+
+      const sourceCardTitle = await screen.findByText('Source')
+      expect(sourceCardTitle).toBeInTheDocument()
+      const coverageBasedOnText = await screen.findByText(
+        /Coverage data is based on/i
+      )
+      expect(coverageBasedOnText).toBeInTheDocument()
+
+      const headCommitIds = await screen.findAllByText('fc43199')
+      expect(headCommitIds).toHaveLength(2)
+
+      const headCommitLink = screen.getByRole('link', {
+        name: /fc43199/i,
+      })
+      expect(headCommitLink).toBeInTheDocument()
+      expect(headCommitLink).toHaveAttribute(
+        'href',
+        '/gh/test-org/test-repo/commit/fc43199b07c52cf3d6c19b7cdb368f74387c38ab?flags=a%2Cb%2Cc'
+      )
+
+      const baseCommitLink = screen.getByRole('link', {
+        name: /2d6c42f/i,
+      })
+      expect(baseCommitLink).toBeInTheDocument()
+      expect(baseCommitLink).toHaveAttribute(
+        'href',
+        '/gh/test-org/test-repo/commit/2d6c42fe217c61b007b2c17544a9d85840381857?flags=a%2Cb%2Cc'
+      )
     })
 
     it('renders a card with the behind by information', async () => {
@@ -271,6 +391,65 @@ describe('CompareSummary', () => {
       )
       expect(await screen.findByText(/(4 uploads)/i)).toBeInTheDocument()
       expect(await screen.findByText(/(1 uploads)/i)).toBeInTheDocument()
+
+      const headCommitLink = screen.getByRole('link', {
+        name: /fc43199/i,
+      })
+      expect(headCommitLink).toBeInTheDocument()
+      expect(headCommitLink).toHaveAttribute(
+        'href',
+        '/gh/test-org/test-repo/commit/fc43199b07c52cf3d6c19b7cdb368f74387c38ab'
+      )
+
+      const baseCommitLink = screen.getByRole('link', {
+        name: /2d6c42f/i,
+      })
+      expect(baseCommitLink).toBeInTheDocument()
+      expect(baseCommitLink).toHaveAttribute(
+        'href',
+        '/gh/test-org/test-repo/commit/2d6c42fe217c61b007b2c17544a9d85840381857'
+      )
+    })
+
+    it('renders a card for every valid field with flags', async () => {
+      render(<CompareSummary />, {
+        wrapper: wrapper(['/gh/test-org/test-repo/pull/5?flags=a,b,c']),
+      })
+      const sourceCardTitle = await screen.findByText('Source')
+      expect(sourceCardTitle).toBeInTheDocument()
+
+      const differentUploadsText = await screen.findByText(
+        /Commits have different number of coverage report uploads/i
+      )
+      expect(differentUploadsText).toBeInTheDocument()
+      const learnMore = screen.getByRole('link', {
+        name: /learn more/i,
+      })
+      expect(learnMore).toBeInTheDocument()
+      expect(learnMore).toHaveAttribute(
+        'href',
+        'https://docs.codecov.com/docs/unexpected-coverage-changes#mismatching-base-and-head-commit-upload-counts'
+      )
+      expect(await screen.findByText(/(4 uploads)/i)).toBeInTheDocument()
+      expect(await screen.findByText(/(1 uploads)/i)).toBeInTheDocument()
+
+      const headCommitLink = screen.getByRole('link', {
+        name: /fc43199/i,
+      })
+      expect(headCommitLink).toBeInTheDocument()
+      expect(headCommitLink).toHaveAttribute(
+        'href',
+        '/gh/test-org/test-repo/commit/fc43199b07c52cf3d6c19b7cdb368f74387c38ab?flags=a%2Cb%2Cc'
+      )
+
+      const baseCommitLink = screen.getByRole('link', {
+        name: /2d6c42f/i,
+      })
+      expect(baseCommitLink).toBeInTheDocument()
+      expect(baseCommitLink).toHaveAttribute(
+        'href',
+        '/gh/test-org/test-repo/commit/2d6c42fe217c61b007b2c17544a9d85840381857?flags=a%2Cb%2Cc'
+      )
     })
   })
 
diff --git a/src/pages/PullRequestPage/subroute/CommitsTab/CommitsTable/CommitsTable.jsx b/src/pages/PullRequestPage/subroute/CommitsTab/CommitsTable/CommitsTable.jsx
index 5c488ebcc9..4f5a60736b 100644
--- a/src/pages/PullRequestPage/subroute/CommitsTab/CommitsTable/CommitsTable.jsx
+++ b/src/pages/PullRequestPage/subroute/CommitsTab/CommitsTable/CommitsTable.jsx
@@ -1,4 +1,5 @@
-import { useParams } from 'react-router-dom'
+import qs from 'qs'
+import { useLocation, useParams } from 'react-router-dom'
 
 import Table from 'old_ui/Table'
 import { useCommits } from 'services/commits'
@@ -63,7 +64,7 @@ const handleOnNull = () => {
   }
 }
 
-function transformPullToTable(commits) {
+function transformPullToTable(commits, flags) {
   if (commits?.length > 0) {
     return commits.map((commit) => {
       if (!commit) return handleOnNull()
@@ -89,6 +90,7 @@ function transformPullToTable(commits) {
             author={author}
             commitid={commitid}
             createdAt={createdAt}
+            flags={flags}
           />
         ),
         ciStatus: (
@@ -120,6 +122,9 @@ const Loader = () => (
 
 function CommitsTable() {
   const { provider, owner, repo, pullId } = useParams()
+  const { search } = useLocation()
+  const searchParams = qs.parse(search, { ignoreQueryPrefix: true })
+  const flags = searchParams?.flags ?? []
 
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
     useCommits({
@@ -134,7 +139,7 @@ function CommitsTable() {
 
   const commits = data?.commits
 
-  const dataTable = transformPullToTable(commits)
+  const dataTable = transformPullToTable(commits, flags)
 
   return (
     <>
diff --git a/src/pages/PullRequestPage/subroute/CommitsTab/CommitsTable/Title/Title.jsx b/src/pages/PullRequestPage/subroute/CommitsTab/CommitsTable/Title/Title.jsx
index 9934d4a2f2..9987a3edef 100644
--- a/src/pages/PullRequestPage/subroute/CommitsTab/CommitsTable/Title/Title.jsx
+++ b/src/pages/PullRequestPage/subroute/CommitsTab/CommitsTable/Title/Title.jsx
@@ -4,7 +4,7 @@ import { formatTimeToNow } from 'shared/utils/dates'
 import A from 'ui/A'
 import Avatar, { DefaultAuthor } from 'ui/Avatar'
 
-const Title = ({ message, author, commitid, createdAt }) => {
+const Title = ({ message, author, commitid, createdAt, flags = [] }) => {
   const user = {
     avatarUrl: author?.avatarUrl || DefaultAuthor.AVATAR_URL,
     username: author?.username || DefaultAuthor.USERNAME,
@@ -23,7 +23,7 @@ const Title = ({ message, author, commitid, createdAt }) => {
     <div className="flex flex-1 flex-row items-center gap-4 lg:w-auto">
       <Avatar user={user} bordered />
       <div className="flex flex-col">
-        <A to={{ pageName: 'commit', options: { commit: commitid } }}>
+        <A to={{ pageName: 'commit', options: { commit: commitid, flags } }}>
           <h2 className="text-sm font-semibold text-black">
             {commitMessage()}
           </h2>
@@ -52,6 +52,7 @@ Title.propTypes = {
   commitid: PropTypes.string,
   message: PropTypes.string,
   createdAt: PropTypes.string,
+  flags: PropTypes.arrayOf(PropTypes.string),
 }
 
 export default Title
diff --git a/src/pages/PullRequestPage/subroute/FileExplorer/hooks/useRepoPullContentsTable.js b/src/pages/PullRequestPage/subroute/FileExplorer/hooks/useRepoPullContentsTable.js
index 5cde21b4af..c63299ab1f 100644
--- a/src/pages/PullRequestPage/subroute/FileExplorer/hooks/useRepoPullContentsTable.js
+++ b/src/pages/PullRequestPage/subroute/FileExplorer/hooks/useRepoPullContentsTable.js
@@ -23,7 +23,7 @@ function determineDisplayType({ filters, isSearching }) {
 function createTableData({
   tableData,
   pullId,
-  commitSHA,
+  commitSha,
   urlPath,
   isSearching,
   filters,
@@ -55,7 +55,7 @@ function createTableData({
             />
           ) : (
             <PullFileEntry
-              commitSHA={commitSHA}
+              commitSha={commitSha}
               name={name}
               pullId={pullId}
               urlPath={urlPath}
@@ -190,7 +190,7 @@ export function useRepoPullContentsTable() {
       createTableData({
         tableData: pullData?.results,
         pullId,
-        commitSHA: pullData?.commitid,
+        commitSha: pullData?.commitid,
         urlPath: urlPath || '',
         isSearching: !!params?.search,
         filters: getQueryFilters({ params, sortBy: sortBy[0] }),
diff --git a/src/pages/RepoPage/utils/paths.js b/src/pages/RepoPage/utils/paths.js
index 522858e839..bb668ec4bf 100644
--- a/src/pages/RepoPage/utils/paths.js
+++ b/src/pages/RepoPage/utils/paths.js
@@ -1,6 +1,6 @@
 export const treeviewString = ({ owner, repo }) => `${owner}/${repo}/tree`
 export const fileviewString = ({ owner, repo }) => `${owner}/${repo}/blob`
-export const commitTreeviewString = ({ owner, repo, commitSHA }) =>
-  `${owner}/${repo}/commit/${commitSHA}/tree`
-export const commitFileviewString = ({ owner, repo, commitSHA }) =>
-  `${owner}/${repo}/commit/${commitSHA}/blob`
+export const commitTreeviewString = ({ owner, repo, commitSha }) =>
+  `${owner}/${repo}/commit/${commitSha}/tree`
+export const commitFileviewString = ({ owner, repo, commitSha }) =>
+  `${owner}/${repo}/commit/${commitSha}/blob`
diff --git a/src/pages/RepoPage/utils/paths.spec.js b/src/pages/RepoPage/utils/paths.spec.js
index c4c006ba2b..fec4dd8045 100644
--- a/src/pages/RepoPage/utils/paths.spec.js
+++ b/src/pages/RepoPage/utils/paths.spec.js
@@ -20,7 +20,7 @@ describe('fileviewString', () => {
 describe('commitTreeviewString', () => {
   it('returns a string', () => {
     expect(
-      commitTreeviewString({ owner: 'foo', repo: 'bar', commitSHA: 'sha256' })
+      commitTreeviewString({ owner: 'foo', repo: 'bar', commitSha: 'sha256' })
     ).toBe('foo/bar/commit/sha256/tree')
   })
 })
@@ -28,7 +28,7 @@ describe('commitTreeviewString', () => {
 describe('commitFileviewString', () => {
   it('returns a string', () => {
     expect(
-      commitFileviewString({ owner: 'foo', repo: 'bar', commitSHA: 'sha256' })
+      commitFileviewString({ owner: 'foo', repo: 'bar', commitSha: 'sha256' })
     ).toBe('foo/bar/commit/sha256/blob')
   })
 })
diff --git a/src/services/navigation/useNavLinks/useNavLinks.js b/src/services/navigation/useNavLinks/useNavLinks.js
index f53e7d90bc..aac252407a 100644
--- a/src/services/navigation/useNavLinks/useNavLinks.js
+++ b/src/services/navigation/useNavLinks/useNavLinks.js
@@ -4,8 +4,18 @@ import { useParams } from 'react-router-dom'
 
 import config from 'config'
 
+// Note to Terry, when we have more time automate all paths to pass through query search params.
+
 export function useNavLinks() {
-  const { provider: p, owner: o, repo: r, id: i, pullId: pi } = useParams()
+  const {
+    provider: p,
+    owner: o,
+    repo: r,
+    id: i,
+    pullId: pi,
+    commit: c,
+    path: pa,
+  } = useParams()
 
   const utmCookie = Cookie.get('utmParams')
   const utmCookieObj = qs.parse(utmCookie, {
@@ -159,6 +169,7 @@ export function useNavLinks() {
           provider: p,
           owner: o,
           repo: r,
+          commit: c,
           queryParams: {},
         }
       ) => {
@@ -363,13 +374,21 @@ export function useNavLinks() {
     },
     pullDetail: {
       path: (
-        { provider = p, owner = o, repo = r, pullId = pi } = {
+        { provider = p, owner = o, repo = r, pullId = pi, queryParams = {} } = {
           provider: p,
           owner: o,
           repo: r,
           pullId: pi,
+          queryParams: {},
+        }
+      ) => {
+        let query = ''
+        if (queryParams && Object.keys(queryParams).length > 0) {
+          query = qs.stringify(queryParams, { addQueryPrefix: true })
         }
-      ) => `/${provider}/${owner}/${repo}/pull/${pullId}`,
+
+        return `/${provider}/${owner}/${repo}/pull/${pullId}${query}`
+      },
       text: 'Files changed',
     },
     settings: {
@@ -452,13 +471,20 @@ export function useNavLinks() {
     pullIndirectChanges: {
       text: 'Indirect changes',
       path: (
-        { provider = p, owner = o, repo = r, pullId = pi } = {
+        { provider = p, owner = o, repo = r, pullId = pi, queryParams = {} } = {
           provider: p,
           owner: o,
           repo: r,
           pullId: pi,
+          queryParams: {},
+        }
+      ) => {
+        let query = ''
+        if (queryParams && Object.keys(queryParams).length > 0) {
+          query = qs.stringify(queryParams, { addQueryPrefix: true })
         }
-      ) => `/${provider}/${owner}/${repo}/pull/${pullId}/indirect-changes`,
+        return `/${provider}/${owner}/${repo}/pull/${pullId}/indirect-changes${query}`
+      },
       isExternalLink: false,
     },
     commitIndirectChanges: {
@@ -483,66 +509,116 @@ export function useNavLinks() {
     pullCommits: {
       text: 'Commits',
       path: (
-        { provider = p, owner = o, repo = r, pullId = pi } = {
+        { provider = p, owner = o, repo = r, pullId = pi, queryParams = {} } = {
           provider: p,
           owner: o,
           repo: r,
           pullId: pi,
+          queryParams: {},
         }
-      ) => `/${provider}/${owner}/${repo}/pull/${pullId}/commits`,
+      ) => {
+        let query = ''
+        if (Object.keys(queryParams).length > 0) {
+          query = qs.stringify(queryParams, { addQueryPrefix: true })
+        }
+        return `/${provider}/${owner}/${repo}/pull/${pullId}/commits${query}`
+      },
       isExternalLink: false,
     },
     pullFlags: {
       text: 'Flags',
       path: (
-        { provider = p, owner = o, repo = r, pullId = pi } = {
+        { provider = p, owner = o, repo = r, pullId = pi, queryParams = {} } = {
           provider: p,
           owner: o,
           repo: r,
           pullId: pi,
+          queryParams: {},
         }
-      ) => `/${provider}/${owner}/${repo}/pull/${pullId}/flags`,
+      ) => {
+        let query = ''
+        if (Object.keys(queryParams).length > 0) {
+          query = qs.stringify(queryParams, { addQueryPrefix: true })
+        }
+        return `/${provider}/${owner}/${repo}/pull/${pullId}/flags${query}`
+      },
       isExternalLink: false,
     },
     pullComponents: {
       text: 'Flags',
       path: (
-        { provider = p, owner = o, repo = r, pullId = pi } = {
+        { provider = p, owner = o, repo = r, pullId = pi, queryParams = {} } = {
           provider: p,
           owner: o,
           repo: r,
           pullId: pi,
+          queryParams: {},
         }
-      ) => `/${provider}/${owner}/${repo}/pull/${pullId}/components`,
+      ) => {
+        let query = ''
+        if (Object.keys(queryParams).length > 0) {
+          query = qs.stringify(queryParams, { addQueryPrefix: true })
+        }
+        return `/${provider}/${owner}/${repo}/pull/${pullId}/components${query}`
+      },
       isExternalLink: false,
     },
+    // Tree vs blogs gets strange, for some reason the code relies on a route param path not tree despite the path label. Could likely use a refactor.
     pullTreeView: {
       text: 'Pull tree view',
       path: (
-        { provider = p, owner = o, repo = r, pullId = pi, tree } = {
+        {
+          provider = p,
+          owner = o,
+          repo = r,
+          pullId = pi,
+          tree,
+          queryParams = {},
+        } = {
           provider: p,
           owner: o,
           repo: r,
           pullId: pi,
+          queryParams: {},
         }
       ) => {
+        // TODO: doesn't default to tree in the url, this diverges from the rest of the links how ever the breadcrumbs rely on it. We should make an alternative solution for the breadcrumb / to support converting to typescript.
+        let query = ''
+        if (Object.keys(queryParams).length > 0) {
+          query = qs.stringify(queryParams, { addQueryPrefix: true })
+        }
+
         if (tree) {
-          return `/${provider}/${owner}/${repo}/pull/${pullId}/tree/${tree}`
+          return `/${provider}/${owner}/${repo}/pull/${pullId}/tree/${tree}${query}`
         }
-        return `/${provider}/${owner}/${repo}/pull/${pullId}/tree`
+        return `/${provider}/${owner}/${repo}/pull/${pullId}/tree${query}`
       },
       isExternalLink: false,
     },
     pullFileView: {
       path: (
-        { provider = p, owner = o, repo = r, tree, pullId = pi } = {
+        {
+          provider = p,
+          owner = o,
+          repo = r,
+          tree = pa,
+          pullId = pi,
+          queryParams = {},
+        } = {
           provider: p,
           owner: o,
           repo: r,
           pullId: pi,
+          tree: pa,
+          queryParams: {},
         }
       ) => {
-        return `/${provider}/${owner}/${repo}/pull/${pullId}/blob/${tree}`
+        let query = ''
+        if (Object.keys(queryParams).length > 0) {
+          query = qs.stringify(queryParams, { addQueryPrefix: true })
+        }
+
+        return `/${provider}/${owner}/${repo}/pull/${pullId}/blob/${tree}${query}`
       },
       isExternalLink: false,
       text: 'Pull File View',
diff --git a/src/services/navigation/useNavLinks/useNavLinks.spec.js b/src/services/navigation/useNavLinks/useNavLinks.spec.js
index d26d83ba18..ade21e66a0 100644
--- a/src/services/navigation/useNavLinks/useNavLinks.spec.js
+++ b/src/services/navigation/useNavLinks/useNavLinks.spec.js
@@ -20,10 +20,21 @@ const wrapper =
           {children}
         </Route>
         <Route path="/:provider/:owner/:repo/pull/:pullId">{children}</Route>
+        <Route path="/:provider/:owner/:repo/pull/:pullId/commits">
+          {children}
+        </Route>
+        <Route path="/:provider/:owner/:repo/pull/:pullId/blob/:path+">
+          {children}
+        </Route>
+        <Route path="/:provider/:owner/:repo/pull/:pullId/tree/:path+">
+          {children}
+        </Route>
         <Route path="/admin/:provider/access">{children}</Route>
         <Route path="/admin/:provider/users">{children}</Route>
         <Route path="/admin/:provider/:owner/access">{children}</Route>
         <Route path="/admin/:provider/:owner/users">{children}</Route>
+        <Route path="/account/:provider/:owner">{children}</Route>
+        <Route path="/account/:provider/:owner/billing">{children}</Route>
       </MemoryRouter>
     )
 
@@ -1153,6 +1164,20 @@ describe('useNavLinks', () => {
       })
       expect(path).toBe('/bb/test-owner/test-repo/pull/123')
     })
+
+    it('passes flags selected through to url', () => {
+      const { result } = renderHook(() => useNavLinks(), {
+        wrapper: wrapper('/gl/doggo/squirrel-locator/pull/409'),
+      })
+
+      const path = result.current.pullDetail.path({
+        queryParams: { flags: ['myFlag'] },
+      })
+
+      expect(path).toBe(
+        '/gl/doggo/squirrel-locator/pull/409?flags%5B0%5D=myFlag'
+      )
+    })
   })
 
   describe('pull commits', () => {
@@ -1203,6 +1228,19 @@ describe('useNavLinks', () => {
       })
       expect(path).toBe('/bb/test-owner/test-repo/pull/123/flags')
     })
+    it('passes flags selected through to url', () => {
+      const { result } = renderHook(() => useNavLinks(), {
+        wrapper: wrapper('/gl/doggo/squirrel-locator/pull/409/flags'),
+      })
+
+      const path = result.current.pullFlags.path({
+        queryParams: { flags: ['myFlag'] },
+      })
+
+      expect(path).toBe(
+        '/gl/doggo/squirrel-locator/pull/409/flags?flags%5B0%5D=myFlag'
+      )
+    })
   })
 
   describe('pull components', () => {
@@ -1228,6 +1266,131 @@ describe('useNavLinks', () => {
       })
       expect(path).toBe('/bb/test-owner/test-repo/pull/888/components')
     })
+    it('passes flags selected through to url', () => {
+      const { result } = renderHook(() => useNavLinks(), {
+        wrapper: wrapper('/gl/doggo/squirrel-locator/pull/409/components'),
+      })
+
+      const path = result.current.pullComponents.path({
+        queryParams: { flags: ['myFlag'] },
+      })
+
+      expect(path).toBe(
+        '/gl/doggo/squirrel-locator/pull/409/components?flags%5B0%5D=myFlag'
+      )
+    })
+  })
+
+  describe('pull tree view', () => {
+    it('returns the correct link with nothing passed', () => {
+      const { result } = renderHook(() => useNavLinks(), {
+        wrapper: wrapper('/gl/doggo/squirrel-locator/pull/409/tree'),
+      })
+
+      const path = result.current.pullTreeView.path()
+      expect(path).toBe('/gl/doggo/squirrel-locator/pull/409/tree')
+    })
+
+    it('can override the params', () => {
+      const { result } = renderHook(() => useNavLinks(), {
+        wrapper: wrapper('/gl/doggo/squirrel-locator/pull/409/tree'),
+      })
+
+      const path = result.current.pullTreeView.path({
+        provider: 'bb',
+        owner: 'test-owner',
+        repo: 'test-repo',
+        pullId: 888,
+      })
+      expect(path).toBe('/bb/test-owner/test-repo/pull/888/tree')
+    })
+    describe('with tree option', () => {
+      it('returns the correct link with nothing passed', () => {
+        const { result } = renderHook(() => useNavLinks(), {
+          wrapper: wrapper('/gl/doggo/squirrel-locator/pull/409/tree/src/foo'),
+        })
+
+        const path = result.current.pullTreeView.path()
+        expect(path).toBe('/gl/doggo/squirrel-locator/pull/409/tree')
+      })
+
+      it('can override the params', () => {
+        const { result } = renderHook(() => useNavLinks(), {
+          wrapper: wrapper('/gl/doggo/squirrel-locator/pull/409/tree/src/foo'),
+        })
+
+        const path = result.current.pullTreeView.path({
+          provider: 'bb',
+          owner: 'test-owner',
+          repo: 'test-repo',
+          pullId: 888,
+          tree: 'src/bar',
+        })
+        expect(path).toBe('/bb/test-owner/test-repo/pull/888/tree/src/bar')
+      })
+    })
+    it('passes flags selected through to url', () => {
+      const { result } = renderHook(() => useNavLinks(), {
+        wrapper: wrapper('/gl/doggo/squirrel-locator/pull/409/tree'),
+      })
+
+      const path = result.current.pullTreeView.path({
+        queryParams: { flags: ['myFlag'] },
+      })
+
+      expect(path).toBe(
+        '/gl/doggo/squirrel-locator/pull/409/tree?flags%5B0%5D=myFlag'
+      )
+    })
+  })
+
+  describe('pull blob view', () => {
+    it('returns the correct link with nothing passed', () => {
+      const { result } = renderHook(() => useNavLinks(), {
+        wrapper: wrapper(
+          '/gl/doggo/squirrel-locator/pull/409/blob/src/some/repo/structure/main.go'
+        ),
+      })
+
+      const path = result.current.pullFileView.path()
+      expect(path).toBe(
+        '/gl/doggo/squirrel-locator/pull/409/blob/src/some/repo/structure/main.go'
+      )
+    })
+
+    it('can override the params', () => {
+      const { result } = renderHook(() => useNavLinks(), {
+        wrapper: wrapper(
+          '/gl/doggo/squirrel-locator/pull/409/blob/src/some/repo/structure/main.go'
+        ),
+      })
+
+      const path = result.current.pullFileView.path({
+        provider: 'bb',
+        owner: 'test-owner',
+        repo: 'test-repo',
+        pullId: 888,
+        tree: 'another/repo/structure/main.go',
+      })
+      expect(path).toBe(
+        '/bb/test-owner/test-repo/pull/888/blob/another/repo/structure/main.go'
+      )
+    })
+    it('passes flags selected through to url', () => {
+      const { result } = renderHook(() => useNavLinks(), {
+        wrapper: wrapper(
+          '/gl/doggo/squirrel-locator/pull/409/blob/src/some/repo/structure/main.go'
+        ),
+      })
+
+      const path = result.current.pullFileView.path({
+        queryParams: { flags: ['myFlag'] },
+      })
+
+      expect(path).toBe(
+        '/gl/doggo/squirrel-locator/pull/409/blob/src/some/repo/structure/main.go?flags%5B0%5D=myFlag'
+      )
+    })
   })
 
   describe('pull indirect changes', () => {
@@ -1257,6 +1420,21 @@ describe('useNavLinks', () => {
       })
       expect(path).toBe('/bb/test-owner/test-repo/pull/888/indirect-changes')
     })
+    it('passes flags selected through to url', () => {
+      const { result } = renderHook(() => useNavLinks(), {
+        wrapper: wrapper(
+          '/gl/doggo/squirrel-locator/pull/409/indirect-changes'
+        ),
+      })
+
+      const path = result.current.pullIndirectChanges.path({
+        queryParams: { flags: ['myFlag'] },
+      })
+
+      expect(path).toBe(
+        '/gl/doggo/squirrel-locator/pull/409/indirect-changes?flags%5B0%5D=myFlag'
+      )
+    })
   })
 
   describe('commit indirect changes', () => {
@@ -1451,6 +1629,34 @@ describe('useNavLinks', () => {
     })
   })
 
+  describe('circleCIEnvVars', () => {
+    it('returns the correct link with nothing passed', () => {
+      const { result } = renderHook(() => useNavLinks(), {
+        wrapper: wrapper('/gh/codecov/cool-repo'),
+      })
+
+      const path = result.current.circleCIEnvVars.path()
+      expect(path).toBe(
+        'https://app.circleci.com/settings/project/gh/codecov/cool-repo/environment-variables'
+      )
+    })
+
+    it('can override the params', () => {
+      const { result } = renderHook(() => useNavLinks(), {
+        wrapper: wrapper('/gh/codecov/cool-repo'),
+      })
+
+      const path = result.current.circleCIEnvVars.path({
+        provider: 'bb',
+        owner: 'test-owner',
+        repo: 'test-repo',
+      })
+      expect(path).toBe(
+        'https://app.circleci.com/settings/project/bb/test-owner/test-repo/environment-variables'
+      )
+    })
+  })
+
   describe('circleCI yaml', () => {
     it('returns the correct link with nothing passed', () => {
       const { result } = renderHook(() => useNavLinks(), {
@@ -1478,4 +1684,50 @@ describe('useNavLinks', () => {
       )
     })
   })
+
+  describe('billingAndUsers', () => {
+    it('returns the correct link with nothing passed', () => {
+      const { result } = renderHook(() => useNavLinks(), {
+        wrapper: wrapper('/account/gh/codecov/billing'),
+      })
+
+      const path = result.current.billingAndUsers.path()
+      expect(path).toBe('/account/gh/codecov/billing')
+    })
+
+    it('can override the params', () => {
+      const { result } = renderHook(() => useNavLinks(), {
+        wrapper: wrapper('/account/gh/codecov/billing'),
+      })
+
+      const path = result.current.billingAndUsers.path({
+        provider: 'bb',
+        owner: 'test-owner',
+      })
+      expect(path).toBe('/account/bb/test-owner/billing')
+    })
+  })
+
+  describe('Profile', () => {
+    it('returns the correct link with nothing passed', () => {
+      const { result } = renderHook(() => useNavLinks(), {
+        wrapper: wrapper('/account/gh/codecov'),
+      })
+
+      const path = result.current.profile.path()
+      expect(path).toBe('/account/gh/codecov')
+    })
+
+    it('can override the params', () => {
+      const { result } = renderHook(() => useNavLinks(), {
+        wrapper: wrapper('/account/gh/codecov'),
+      })
+
+      const path = result.current.profile.path({
+        provider: 'bb',
+        owner: 'test-owner',
+      })
+      expect(path).toBe('/account/bb/test-owner')
+    })
+  })
 })
diff --git a/src/shared/ContentsTable/TableEntries/PullEntries/PullDirEntry.jsx b/src/shared/ContentsTable/TableEntries/PullEntries/PullDirEntry.jsx
index 1ded00214d..a6065cccd1 100644
--- a/src/shared/ContentsTable/TableEntries/PullEntries/PullDirEntry.jsx
+++ b/src/shared/ContentsTable/TableEntries/PullEntries/PullDirEntry.jsx
@@ -5,6 +5,8 @@ import { usePrefetchPullDirEntry } from 'services/pathContents/pull/dir'
 import DirEntry from '../BaseEntries/DirEntry'
 
 function PullDirEntry({ pullId, urlPath, name, filters }) {
+  const flags = filters?.flags?.length > 0 ? filters?.flags : []
+
   const { runPrefetch } = usePrefetchPullDirEntry({
     pullId,
     path: name,
@@ -17,6 +19,7 @@ function PullDirEntry({ pullId, urlPath, name, filters }) {
       urlPath={urlPath}
       runPrefetch={runPrefetch}
       pageName="pullTreeView"
+      queryParams={{ flags }}
     />
   )
 }
@@ -31,6 +34,7 @@ PullDirEntry.propTypes = {
       parameter: PropTypes.any,
     }),
     searchValue: PropTypes.any,
+    flags: PropTypes.arrayOf(PropTypes.string),
   }),
 }
 
diff --git a/src/shared/ContentsTable/TableEntries/PullEntries/PullDirEntry.spec.jsx b/src/shared/ContentsTable/TableEntries/PullEntries/PullDirEntry.spec.jsx
index 971fdfb9ce..ff39cddabc 100644
--- a/src/shared/ContentsTable/TableEntries/PullEntries/PullDirEntry.spec.jsx
+++ b/src/shared/ContentsTable/TableEntries/PullEntries/PullDirEntry.spec.jsx
@@ -37,15 +37,22 @@ const queryClient = new QueryClient({
 })
 const server = setupServer()
 
-const wrapper = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter initialEntries={['/gh/codecov/test-repo/pull/123/tree']}>
-      <Route path="/:provider/:owner/:repo/pull/:pullId/:path+">
-        {children}
-      </Route>
-    </MemoryRouter>
-  </QueryClientProvider>
-)
+const wrapper =
+  (
+    { initialEntries } = {
+      initialEntries: ['/gh/codecov/test-repo/pull/123/tree'],
+    }
+  ) =>
+  ({ children }) =>
+    (
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={initialEntries}>
+          <Route path="/:provider/:owner/:repo/pull/:pullId/:path+">
+            {children}
+          </Route>
+        </MemoryRouter>
+      </QueryClientProvider>
+    )
 
 beforeAll(() => {
   server.listen()
@@ -74,7 +81,7 @@ describe('PullDirEntry', () => {
   it('displays the directory name', () => {
     render(
       <PullDirEntry pullId="123" name="dir" urlPath="path/to/directory" />,
-      { wrapper }
+      { wrapper: wrapper() }
     )
 
     expect(screen.getByText('dir')).toBeInTheDocument()
@@ -84,7 +91,7 @@ describe('PullDirEntry', () => {
     it('sets the correct href', () => {
       render(
         <PullDirEntry pullId="123" name="dir" urlPath="path/to/directory" />,
-        { wrapper }
+        { wrapper: wrapper() }
       )
 
       const a = screen.getByRole('link')
@@ -97,7 +104,7 @@ describe('PullDirEntry', () => {
 
   describe('no path is provided', () => {
     it('sets the correct href', () => {
-      render(<PullDirEntry pullId="123" name="dir" />, { wrapper })
+      render(<PullDirEntry pullId="123" name="dir" />, { wrapper: wrapper() })
 
       const a = screen.getByRole('link')
       expect(a).toHaveAttribute(
@@ -111,7 +118,7 @@ describe('PullDirEntry', () => {
     const user = userEvent.setup()
     render(
       <PullDirEntry pullId="123" name="dir" urlPath="path/to/directory" />,
-      { wrapper }
+      { wrapper: wrapper() }
     )
 
     const dir = screen.getByText('dir')
@@ -134,4 +141,29 @@ describe('PullDirEntry', () => {
       })
     )
   })
+
+  it('passes flags from the search params', () => {
+    render(
+      <PullDirEntry
+        pullId="123"
+        name="dir"
+        urlPath="path/to/directory"
+        filters={{
+          ordering: { direction: 'asc', parameter: 'name' },
+          flags: ['a', 'b'],
+        }}
+      />,
+      {
+        wrapper: wrapper({
+          initialEntries: ['/gh/codecov/test-repo/pull/123/tree'],
+        }),
+      }
+    )
+
+    const a = screen.getByRole('link')
+    expect(a).toHaveAttribute(
+      'href',
+      '/gh/codecov/test-repo/pull/123/tree/path/to/directory/dir?flags%5B0%5D=a&flags%5B1%5D=b'
+    )
+  })
 })
diff --git a/src/shared/ContentsTable/TableEntries/PullEntries/PullFileEntry.jsx b/src/shared/ContentsTable/TableEntries/PullEntries/PullFileEntry.jsx
index aab1c98a46..8440a592fa 100644
--- a/src/shared/ContentsTable/TableEntries/PullEntries/PullFileEntry.jsx
+++ b/src/shared/ContentsTable/TableEntries/PullEntries/PullFileEntry.jsx
@@ -6,16 +6,20 @@ import { displayTypeParameter } from '../../constants'
 import FileEntry from '../BaseEntries/FileEntry'
 
 function PullFileEntry({
-  commitSHA,
+  commitSha,
   path,
   isCriticalFile,
   name,
   urlPath,
   displayType,
+  filters,
 }) {
+  const flags = filters?.flags?.length > 0 ? filters?.flags : []
+
   const { runPrefetch } = usePrefetchPullFileEntry({
     path,
-    ref: commitSHA,
+    ref: commitSha,
+    flags,
   })
 
   return (
@@ -27,18 +31,22 @@ function PullFileEntry({
       path={path}
       runPrefetch={runPrefetch}
       pageName="pullFileView"
+      queryParams={{ flags }}
     />
   )
 }
 
 PullFileEntry.propTypes = {
-  commitSHA: PropTypes.string.isRequired,
+  commitSha: PropTypes.string.isRequired,
   pullId: PropTypes.string,
   urlPath: PropTypes.string,
   isCriticalFile: PropTypes.bool,
   name: PropTypes.string.isRequired,
   displayType: PropTypes.oneOf(Object.values(displayTypeParameter)),
   path: PropTypes.string,
+  filters: PropTypes.shape({
+    flags: PropTypes.arrayOf(PropTypes.string),
+  }),
 }
 
 export default PullFileEntry
diff --git a/src/shared/ContentsTable/TableEntries/PullEntries/PullFileEntry.spec.jsx b/src/shared/ContentsTable/TableEntries/PullEntries/PullFileEntry.spec.jsx
index a684340e84..d091251134 100644
--- a/src/shared/ContentsTable/TableEntries/PullEntries/PullFileEntry.spec.jsx
+++ b/src/shared/ContentsTable/TableEntries/PullEntries/PullFileEntry.spec.jsx
@@ -5,7 +5,7 @@ import { graphql } from 'msw'
 import { setupServer } from 'msw/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
-import CommitFileEntry from './PullFileEntry'
+import PullFileEntry from './PullFileEntry'
 
 import { displayTypeParameter } from '../../constants'
 
@@ -37,17 +37,22 @@ const queryClient = new QueryClient({
 })
 const server = setupServer()
 
-const wrapper = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter
-      initialEntries={['/gh/codecov/test-repo/coolCommitSha/blob/file.js']}
-    >
-      <Route path="/:provider/:owner/:repo/:commit/blob/:path+">
-        {children}
-      </Route>
-    </MemoryRouter>
-  </QueryClientProvider>
-)
+const wrapper =
+  (
+    { initialEntries } = {
+      initialEntries: ['/gh/codecov/test-repo/coolCommitSha/blob/file.js'],
+    }
+  ) =>
+  ({ children }) =>
+    (
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={initialEntries}>
+          <Route path="/:provider/:owner/:repo/:commit/blob/:path+">
+            {children}
+          </Route>
+        </MemoryRouter>
+      </QueryClientProvider>
+    )
 
 beforeAll(() => {
   server.listen()
@@ -60,7 +65,7 @@ afterAll(() => {
   server.close()
 })
 
-describe('CommitFileEntry', () => {
+describe('PullFileEntry', () => {
   function setup() {
     server.use(
       graphql.query('CoverageForFile', (req, res, ctx) =>
@@ -76,16 +81,15 @@ describe('CommitFileEntry', () => {
 
     it('displays the file path', () => {
       render(
-        <CommitFileEntry
-          commitSha="1234"
+        <PullFileEntry
           path="dir/file.js"
           name="file.js"
           urlPath="dir"
           isCriticalFile={false}
-          commitSHA="1234"
+          commitSha="1234"
           displayType={displayTypeParameter.list}
         />,
-        { wrapper }
+        { wrapper: wrapper() }
       )
 
       expect(screen.getByText('dir/file.js')).toBeInTheDocument()
@@ -99,16 +103,15 @@ describe('CommitFileEntry', () => {
 
     it('displays the file name', () => {
       render(
-        <CommitFileEntry
-          commitSha="1234"
+        <PullFileEntry
           path="dir/file.js"
           name="file.js"
           urlPath="dir"
           isCriticalFile={false}
-          commitSHA="1234"
+          commitSha="1234"
           displayType={displayTypeParameter.tree}
         />,
-        { wrapper }
+        { wrapper: wrapper() }
       )
 
       expect(screen.getByText('file.js')).toBeInTheDocument()
@@ -116,16 +119,15 @@ describe('CommitFileEntry', () => {
 
     it('does not display the file name', () => {
       render(
-        <CommitFileEntry
-          commitSha="1234"
+        <PullFileEntry
           path="dir/file.js"
           name="file.js"
           urlPath="dir"
           isCriticalFile={false}
-          commitSHA="1234"
+          commitSha="1234"
           displayType={displayTypeParameter.tree}
         />,
-        { wrapper }
+        { wrapper: wrapper() }
       )
 
       expect(screen.queryByText('dir/file.js')).not.toBeInTheDocument()
@@ -139,16 +141,15 @@ describe('CommitFileEntry', () => {
 
     it('displays critical file label', () => {
       render(
-        <CommitFileEntry
-          commitSha="1234"
+        <PullFileEntry
           path="dir/file.js"
           name="file.js"
           urlPath="dir"
-          commitSHA="1234"
+          commitSha="1234"
           isCriticalFile={true}
           displayType={displayTypeParameter.tree}
         />,
-        { wrapper }
+        { wrapper: wrapper() }
       )
 
       expect(screen.getByText('Critical File')).toBeInTheDocument()
@@ -162,16 +163,15 @@ describe('CommitFileEntry', () => {
 
     it('displays the file path label', () => {
       render(
-        <CommitFileEntry
-          commitSha="1234"
+        <PullFileEntry
           path="dir/file.js"
           name="file.js"
           urlPath="dir"
           isCriticalFile={false}
-          commitSHA="1234"
+          commitSha="1234"
           displayType={displayTypeParameter.list}
         />,
-        { wrapper }
+        { wrapper: wrapper() }
       )
 
       expect(screen.getByText('dir/file.js')).toBeInTheDocument()
@@ -186,16 +186,15 @@ describe('CommitFileEntry', () => {
     it('fires the prefetch function on hover', async () => {
       const user = userEvent.setup()
       render(
-        <CommitFileEntry
-          commitSha="1234"
+        <PullFileEntry
           path="dir/file.js"
           name="file.js"
           urlPath="dir"
           isCriticalFile={false}
-          commitSHA="1234"
+          commitSha="1234"
           displayType={displayTypeParameter.tree}
         />,
-        { wrapper }
+        { wrapper: wrapper() }
       )
 
       await user.hover(screen.getByText('file.js'))
@@ -218,4 +217,28 @@ describe('CommitFileEntry', () => {
       )
     })
   })
+  it('passes the flags filter through to the file link', () => {
+    render(
+      <PullFileEntry
+        path="dir/file.js"
+        name="file.js"
+        urlPath="dir"
+        isCriticalFile={false}
+        commitSha="1234"
+        displayType={displayTypeParameter.tree}
+        filters={{ flags: ['a', 'b'] }}
+      />,
+      {
+        wrapper: wrapper({
+          initialEntries: ['/gh/codecov/test-repo/coolCommitSha/blob/file.js'],
+        }),
+      }
+    )
+
+    const a = screen.getByRole('link')
+    expect(a).toHaveAttribute(
+      'href',
+      '/gh/codecov/test-repo/pull/undefined/blob/dir/file.js?flags%5B0%5D=a&flags%5B1%5D=b'
+    )
+  })
 })
diff --git a/src/ui/MultiSelect/MultiSelect.jsx b/src/ui/MultiSelect/MultiSelect.jsx
index 4ea9e6e484..0cd522c353 100644
--- a/src/ui/MultiSelect/MultiSelect.jsx
+++ b/src/ui/MultiSelect/MultiSelect.jsx
@@ -15,7 +15,7 @@ import Spinner from '../Spinner'
 
 const SelectClasses = {
   button:
-    'flex justify-between items-center w-full border border-ds-gray-tertiary rounded bg-white text-left px-3 h-8 disabled:text-ds-gray-quaternary disabled:bg-ds-gray-primary disabled:border-ds-gray-tertiary focus:outline-1',
+    'flex justify-between items-center w-full border border-ds-gray-tertiary rounded bg-white text-left px-3 h-8 disabled:text-ds-gray-quaternary disabled:bg-ds-gray-primary disabled:border-ds-gray-tertiary focus:outline-1 whitespace-nowrap',
   listContainer:
     'overflow-hidden rounded-bl rounded-br bg-white border-ds-gray-tertiary absolute w-full z-20 max-h-80 min-w-fit',
   listItem: 'block cursor-pointer py-1 px-3 text-sm',

From bb2ccd7ef3b5d086123452ca12d0d40d7d8c1678 Mon Sep 17 00:00:00 2001
From: Terry <87824812+terry-codecov@users.noreply.github.com>
Date: Tue, 17 Oct 2023 20:18:00 +0200
Subject: [PATCH 07/11] chore: Remove segment from frontend (#2314)

---
 .env                                          |   1 -
 .env.development                              |   1 -
 public/index.html                             |   6 -
 .../DefaultOrgSelector/DefaultOrgSelector.jsx |  11 -
 .../DefaultOrgSelector.spec.jsx               |  76 -----
 .../TriggerSyncBanner/TriggerSyncBanner.jsx   |  10 -
 .../TriggerSyncBanner.spec.jsx                |  15 -
 .../RepoPage/NewRepoTab/CircleCI/CircleCI.jsx |   7 +-
 .../NewRepoTab/CircleCI/CircleCI.spec.jsx     |  35 --
 .../GitHubActions/GitHubActions.jsx           |   7 +-
 .../GitHubActions/GitHubActions.spec.jsx      |  35 --
 .../RepoPage/NewRepoTab/OtherCI/OtherCI.jsx   |  14 +-
 .../NewRepoTab/OtherCI/OtherCI.spec.jsx       |  59 ----
 .../TerminalInstructions/InstructionBox.jsx   |   3 -
 .../InstructionBox.spec.jsx                   |  38 +--
 .../ImpactAnalysisToken.jsx                   |  23 +-
 .../ImpactAnalysisToken.spec.jsx              |  27 +-
 .../StaticAnalysisToken.jsx                   |  23 +-
 .../StaticAnalysisToken.spec.jsx              |  29 +-
 src/services/tracking/hooks.spec.js           |   6 -
 src/services/tracking/segment.js              | 109 ------
 src/services/tracking/segment.spec.js         | 311 ------------------
 src/services/tracking/useTracking.js          |   7 -
 src/services/user/index.js                    |   1 -
 src/services/user/useOnboardingTracking.js    | 113 -------
 .../user/useOnboardingTracking.spec.js        | 230 -------------
 26 files changed, 9 insertions(+), 1188 deletions(-)
 delete mode 100644 src/services/tracking/segment.js
 delete mode 100644 src/services/tracking/segment.spec.js
 delete mode 100644 src/services/user/useOnboardingTracking.js
 delete mode 100644 src/services/user/useOnboardingTracking.spec.js

diff --git a/.env b/.env
index 444ad9e487..a963de2990 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,3 @@
 REACT_APP_SENTRY_DSN=$SENTRY_DSN
 REACT_APP_STRIPE_KEY=$STRIPE_KEY
-REACT_APP_SEGMENT_KEY=$SEGMENT_KEY
 REACT_APP_BAREMETRICS_TOKEN=$BAREMETRICS_TOKEN
diff --git a/.env.development b/.env.development
index 217e8a0fe1..289e620838 100644
--- a/.env.development
+++ b/.env.development
@@ -2,7 +2,6 @@ PROXY_TO=https://stage-api.codecov.dev
 REACT_APP_API_URL=https://stage-api.codecov.dev
 REACT_APP_BASE_URL=https://stage-web.codecov.dev
 REACT_APP_MARKETING_BASE_URL=https://about.codecov.io
-REACT_APP_SEGMENT_KEY=$SEGMENT_KEY
 # REACT_APP_STRIPE_KEY=
 # REACT_APP_LAUNCHDARKLY=
 # REACT_APP_BAREMETRICS_TOKEN=
diff --git a/public/index.html b/public/index.html
index b396e97bb2..e57f29065b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -48,12 +48,6 @@
     -->
     <title>Codecov</title>
     <% if(process.env.REACT_APP_ENV === "production") { %>
-      <script>
-        const SEGMENT_KEY = '%REACT_APP_SEGMENT_KEY%'
-        !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey=SEGMENT_KEY;analytics.SNIPPET_VERSION="4.13.2";
-          analytics.load(SEGMENT_KEY);
-        }}();
-      </script>
       <script>
         window.dataLayer = [
           {
diff --git a/src/pages/DefaultOrgSelector/DefaultOrgSelector.jsx b/src/pages/DefaultOrgSelector/DefaultOrgSelector.jsx
index 0109cb659e..5726186aa1 100644
--- a/src/pages/DefaultOrgSelector/DefaultOrgSelector.jsx
+++ b/src/pages/DefaultOrgSelector/DefaultOrgSelector.jsx
@@ -7,7 +7,6 @@ import { z } from 'zod'
 import { TrialStatuses, usePlanData } from 'services/account'
 import { useUpdateDefaultOrganization } from 'services/defaultOrganization'
 import { useStaticNavLinks } from 'services/navigation'
-import { trackSegmentEvent } from 'services/tracking/segment'
 import { useStartTrial } from 'services/trial'
 import { useUser } from 'services/user'
 import { isBasicPlan } from 'shared/utils/billing'
@@ -100,16 +99,6 @@ function DefaultOrgSelector() {
   })
 
   const onSubmit = () => {
-    const segmentEvent = {
-      event: 'Onboarding default org selector',
-      data: {
-        ownerid: currentUser?.trackingMetadata?.ownerid,
-        username: currentUser?.user?.username,
-        org: selectedOrg,
-      },
-    }
-
-    trackSegmentEvent(segmentEvent)
     updateDefaultOrg({ username: selectedOrg })
 
     if (
diff --git a/src/pages/DefaultOrgSelector/DefaultOrgSelector.spec.jsx b/src/pages/DefaultOrgSelector/DefaultOrgSelector.spec.jsx
index 5174708dbd..035f55c1c2 100644
--- a/src/pages/DefaultOrgSelector/DefaultOrgSelector.spec.jsx
+++ b/src/pages/DefaultOrgSelector/DefaultOrgSelector.spec.jsx
@@ -7,11 +7,8 @@ import { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 import { useIntersection } from 'react-use'
 
-import { trackSegmentEvent } from 'services/tracking/segment'
-
 import DefaultOrgSelector from './DefaultOrgSelector'
 
-jest.mock('services/tracking/segment')
 jest.mock('react-use/lib/useIntersection')
 jest.mock('./GitHubHelpBanner', () => () => 'GitHubHelpBanner')
 
@@ -377,73 +374,6 @@ describe('DefaultOrgSelector', () => {
 
   describe('on submit', () => {
     beforeEach(() => jest.resetAllMocks())
-
-    it('tracks the segment event', async () => {
-      const segmentMock = jest.fn()
-      trackSegmentEvent.mockReturnValue(segmentMock)
-
-      const { user } = setup({
-        useUserData: {
-          me: {
-            email: 'personal@cr.com',
-            trackingMetadata: {
-              ownerid: '1234',
-            },
-            user: {
-              username: 'chetney',
-            },
-          },
-        },
-        myOrganizationsData: {
-          me: {
-            myOrganizations: {
-              edges: [
-                {
-                  node: {
-                    avatarUrl:
-                      'https://avatars0.githubusercontent.com/u/8226205?v=3&s=55',
-                    username: 'criticalRole',
-                    ownerid: 1,
-                  },
-                },
-              ],
-              pageInfo: { hasNextPage: false, endCursor: 'MTI=' },
-            },
-          },
-        },
-      })
-
-      render(<DefaultOrgSelector />, { wrapper: wrapper() })
-
-      const selectLabel = await screen.findByText(
-        /Which organization are you using today?/
-      )
-      expect(selectLabel).toBeInTheDocument()
-
-      const selectOrg = screen.getByRole('button', {
-        name: 'Select an organization',
-      })
-      await user.click(selectOrg)
-
-      const orgInList = screen.getByRole('option', { name: 'criticalRole' })
-      await user.click(orgInList)
-
-      const submit = await screen.findByRole('button', {
-        name: /Continue/,
-      })
-
-      await user.click(submit)
-
-      expect(trackSegmentEvent).toHaveBeenLastCalledWith({
-        event: 'Onboarding default org selector',
-        data: {
-          org: 'criticalRole',
-          ownerid: '1234',
-          username: 'chetney',
-        },
-      })
-    })
-
     it('fires update default org mutation', async () => {
       const { user, mockMutationVariables } = setup({
         useUserData: {
@@ -573,9 +503,6 @@ describe('DefaultOrgSelector', () => {
     beforeEach(() => jest.resetAllMocks())
 
     it('redirects to self org page', async () => {
-      const segmentMock = jest.fn()
-      trackSegmentEvent.mockReturnValue(segmentMock)
-
       const { user, mockMutationVariables } = setup({
         useUserData: {
           me: {
@@ -937,9 +864,6 @@ describe('DefaultOrgSelector', () => {
     beforeEach(() => jest.resetAllMocks())
 
     it('redirects to self org page', async () => {
-      const segmentMock = jest.fn()
-      trackSegmentEvent.mockReturnValue(segmentMock)
-
       const { user, mockMutationVariables } = setup({
         useUserData: {
           me: {
diff --git a/src/pages/RepoPage/FlagsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.jsx b/src/pages/RepoPage/FlagsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.jsx
index f0031bd797..e719d07340 100644
--- a/src/pages/RepoPage/FlagsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.jsx
+++ b/src/pages/RepoPage/FlagsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.jsx
@@ -1,8 +1,6 @@
 import { useParams } from 'react-router-dom'
 
 import { useActivateFlagMeasurements } from 'services/repo'
-import { trackSegmentEvent } from 'services/tracking/segment'
-import { useUser } from 'services/user'
 import Banner from 'ui/Banner'
 import BannerContent from 'ui/Banner/BannerContent'
 import BannerHeading from 'ui/Banner/BannerHeading'
@@ -12,17 +10,9 @@ import Icon from 'ui/Icon'
 function TriggerSyncBanner() {
   const { provider, owner, repo } = useParams()
   const { mutate } = useActivateFlagMeasurements({ provider, owner, repo })
-  const { data: user } = useUser()
 
   const enableFlagAnalytics = () => {
     mutate({ provider, owner, repo })
-    trackSegmentEvent({
-      event: 'Flags Analytics Enabled',
-      data: {
-        userId: user?.trackingMetadata?.ownerid,
-        repoName: repo,
-      },
-    })
   }
 
   return (
diff --git a/src/pages/RepoPage/FlagsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.spec.jsx b/src/pages/RepoPage/FlagsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.spec.jsx
index 832dc21464..32d60ae536 100644
--- a/src/pages/RepoPage/FlagsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.spec.jsx
+++ b/src/pages/RepoPage/FlagsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.spec.jsx
@@ -5,12 +5,9 @@ import userEvent from '@testing-library/user-event'
 import { MemoryRouter, Route, useParams } from 'react-router-dom'
 
 import { useActivateFlagMeasurements } from 'services/repo'
-import { trackSegmentEvent } from 'services/tracking/segment'
-import { useUser } from 'services/user'
 
 import TriggerSyncBanner from './TriggerSyncBanner'
 
-jest.mock('services/tracking/segment')
 jest.mock('services/user')
 
 jest.mock('services/repo/useActivateFlagMeasurements')
@@ -27,13 +24,6 @@ const queryClient = new QueryClient({
   },
 })
 
-const userData = {
-  username: 'codecov',
-  trackingMetadata: {
-    ownerid: 4,
-  },
-}
-
 const wrapper = ({ children }) => (
   <MemoryRouter initialEntries={['/gh/codecov/gazebo/flags']}>
     <Route path="/:provider/:owner/:repo/flags" exact={true}>
@@ -54,7 +44,6 @@ describe('TriggerSyncBanner', () => {
       provider: 'gh',
       repo: 'gazebo',
     })
-    useUser.mockReturnValue({ data: userData })
     useActivateFlagMeasurements.mockReturnValue({ mutate })
 
     return { mutate, user }
@@ -91,10 +80,6 @@ describe('TriggerSyncBanner', () => {
           repo: 'gazebo',
           owner: 'codecov',
         })
-        expect(trackSegmentEvent).toHaveBeenCalledWith({
-          data: { repoName: 'gazebo', userId: 4 },
-          event: 'Flags Analytics Enabled',
-        })
       })
     })
   })
diff --git a/src/pages/RepoPage/NewRepoTab/CircleCI/CircleCI.jsx b/src/pages/RepoPage/NewRepoTab/CircleCI/CircleCI.jsx
index 1bb9ae3ab5..9400b07164 100644
--- a/src/pages/RepoPage/NewRepoTab/CircleCI/CircleCI.jsx
+++ b/src/pages/RepoPage/NewRepoTab/CircleCI/CircleCI.jsx
@@ -2,7 +2,6 @@ import { useParams } from 'react-router-dom'
 
 import patchAndProject from 'assets/repoConfig/patch-and-project.svg'
 import { useRepo } from 'services/repo'
-import { useOnboardingTracking } from 'services/user'
 import { providerToInternalProvider } from 'shared/utils/provider'
 import A from 'ui/A'
 import CopyClipboard from 'ui/CopyClipboard'
@@ -13,7 +12,6 @@ function CircleCI() {
   const { provider, owner, repo } = useParams()
   const providerName = providerToInternalProvider(provider)
   const { data } = useRepo({ provider, owner, repo })
-  const { copiedCIToken } = useOnboardingTracking()
 
   return (
     <div className="flex flex-col gap-6">
@@ -35,10 +33,7 @@ function CircleCI() {
         </div>
         <pre className="flex items-center gap-2 overflow-auto rounded-md border-2 border-ds-gray-secondary bg-ds-gray-primary px-4 py-2 font-mono">
           CODECOV_TOKEN={data?.repository?.uploadToken}
-          <CopyClipboard
-            string={data?.repository?.uploadToken}
-            onClick={() => copiedCIToken(data?.repository?.uploadToken)}
-          />
+          <CopyClipboard string={data?.repository?.uploadToken} />
         </pre>
       </div>
       <div className="flex flex-col gap-3">
diff --git a/src/pages/RepoPage/NewRepoTab/CircleCI/CircleCI.spec.jsx b/src/pages/RepoPage/NewRepoTab/CircleCI/CircleCI.spec.jsx
index 1f639ef9b6..236331687c 100644
--- a/src/pages/RepoPage/NewRepoTab/CircleCI/CircleCI.spec.jsx
+++ b/src/pages/RepoPage/NewRepoTab/CircleCI/CircleCI.spec.jsx
@@ -1,17 +1,12 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
 import { graphql } from 'msw'
 import { setupServer } from 'msw/node'
 import { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
-import { trackSegmentEvent } from 'services/tracking/segment'
-
 import CircleCI from './CircleCI'
 
-jest.mock('services/tracking/segment')
-
 const mockCurrentUser = {
   me: {
     trackingMetadata: {
@@ -79,8 +74,6 @@ describe('CircleCI', () => {
         res(ctx.status(200), ctx.data(mockCurrentUser))
       )
     )
-
-    trackSegmentEvent.mockImplementation((data) => data)
   }
 
   describe('step one', () => {
@@ -122,34 +115,6 @@ describe('CircleCI', () => {
       )
       expect(tokenValue).toBeInTheDocument()
     })
-
-    describe('user copies token', () => {
-      it('fires segment event', async () => {
-        const user = userEvent.setup()
-        render(<CircleCI />, { wrapper })
-
-        // this is needed to wait for all the data to be loaded
-        const tokenValue = await screen.findByText(
-          /9e6a6189-20f1-482d-ab62-ecfaa2629295/
-        )
-        expect(tokenValue).toBeInTheDocument()
-
-        const buttons = await screen.findAllByTestId('clipboard')
-        const button = buttons[0]
-
-        await user.click(button)
-
-        expect(trackSegmentEvent).toBeCalled()
-        expect(trackSegmentEvent).toBeCalledWith({
-          data: {
-            category: 'Onboarding',
-            tokenHash: 'a2629295',
-            userId: 'user-owner-id',
-          },
-          event: 'User Onboarding Copied CI Token',
-        })
-      })
-    })
   })
 
   describe('step two', () => {
diff --git a/src/pages/RepoPage/NewRepoTab/GitHubActions/GitHubActions.jsx b/src/pages/RepoPage/NewRepoTab/GitHubActions/GitHubActions.jsx
index 5cd09f68b2..901e1a5729 100644
--- a/src/pages/RepoPage/NewRepoTab/GitHubActions/GitHubActions.jsx
+++ b/src/pages/RepoPage/NewRepoTab/GitHubActions/GitHubActions.jsx
@@ -2,7 +2,6 @@ import { useParams } from 'react-router-dom'
 
 import patchAndProject from 'assets/repoConfig/patch-and-project.svg'
 import { useRepo } from 'services/repo'
-import { useOnboardingTracking } from 'services/user'
 import A from 'ui/A'
 import CopyClipboard from 'ui/CopyClipboard'
 
@@ -15,7 +14,6 @@ const codecovActionString = `- name: Upload coverage reports to Codecov
 function GitHubActions() {
   const { provider, owner, repo } = useParams()
   const { data } = useRepo({ provider, owner, repo })
-  const { copiedCIToken } = useOnboardingTracking()
 
   return (
     <div className="flex flex-col gap-6">
@@ -34,10 +32,7 @@ function GitHubActions() {
         </div>
         <pre className="flex items-center gap-2 overflow-auto rounded-md border-2 border-ds-gray-secondary bg-ds-gray-primary px-4 py-2 font-mono">
           CODECOV_TOKEN={data?.repository?.uploadToken}
-          <CopyClipboard
-            string={data?.repository?.uploadToken}
-            onClick={() => copiedCIToken(data?.repository?.uploadToken)}
-          />
+          <CopyClipboard string={data?.repository?.uploadToken} />
         </pre>
       </div>
       <div className="flex flex-col gap-4">
diff --git a/src/pages/RepoPage/NewRepoTab/GitHubActions/GitHubActions.spec.jsx b/src/pages/RepoPage/NewRepoTab/GitHubActions/GitHubActions.spec.jsx
index 824f21079b..4139c6b755 100644
--- a/src/pages/RepoPage/NewRepoTab/GitHubActions/GitHubActions.spec.jsx
+++ b/src/pages/RepoPage/NewRepoTab/GitHubActions/GitHubActions.spec.jsx
@@ -1,17 +1,12 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
 import { graphql } from 'msw'
 import { setupServer } from 'msw/node'
 import { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
-import { trackSegmentEvent } from 'services/tracking/segment'
-
 import GitHubActions from './GitHubActions'
 
-jest.mock('services/tracking/segment')
-
 const mockCurrentUser = {
   me: {
     trackingMetadata: {
@@ -79,8 +74,6 @@ describe('GitHubActions', () => {
         res(ctx.status(200), ctx.data(mockCurrentUser))
       )
     )
-
-    trackSegmentEvent.mockImplementation((data) => data)
   }
 
   describe('step one', () => {
@@ -122,34 +115,6 @@ describe('GitHubActions', () => {
       )
       expect(tokenValue).toBeInTheDocument()
     })
-
-    describe('user copies token', () => {
-      it('fires segment event', async () => {
-        const user = userEvent.setup()
-        render(<GitHubActions />, { wrapper })
-
-        // this is needed to wait for all the data to be loaded
-        const tokenValue = await screen.findByText(
-          /9e6a6189-20f1-482d-ab62-ecfaa2629295/
-        )
-        expect(tokenValue).toBeInTheDocument()
-
-        const buttons = await screen.findAllByTestId('clipboard')
-        const button = buttons[0]
-
-        await user.click(button)
-
-        expect(trackSegmentEvent).toBeCalled()
-        expect(trackSegmentEvent).toBeCalledWith({
-          data: {
-            category: 'Onboarding',
-            tokenHash: 'a2629295',
-            userId: 'user-owner-id',
-          },
-          event: 'User Onboarding Copied CI Token',
-        })
-      })
-    })
   })
 
   describe('step two', () => {
diff --git a/src/pages/RepoPage/NewRepoTab/OtherCI/OtherCI.jsx b/src/pages/RepoPage/NewRepoTab/OtherCI/OtherCI.jsx
index 448578b2df..1228a890ee 100644
--- a/src/pages/RepoPage/NewRepoTab/OtherCI/OtherCI.jsx
+++ b/src/pages/RepoPage/NewRepoTab/OtherCI/OtherCI.jsx
@@ -2,7 +2,6 @@ import { useParams } from 'react-router-dom'
 
 import patchAndProject from 'assets/repoConfig/patch-and-project.svg'
 import { useRepo } from 'services/repo'
-import { useOnboardingTracking } from 'services/user'
 import A from 'ui/A'
 import CopyClipboard from 'ui/CopyClipboard'
 
@@ -11,7 +10,6 @@ import TerminalInstructions from './TerminalInstructions'
 function OtherCI() {
   const { provider, owner, repo } = useParams()
   const { data } = useRepo({ provider, owner, repo })
-  const { copiedCIToken, downloadUploaderClicked } = useOnboardingTracking()
 
   return (
     <div className="flex flex-col gap-6">
@@ -21,21 +19,13 @@ function OtherCI() {
         </h2>
         <pre className="flex items-center gap-2 overflow-auto rounded-md border-2 border-ds-gray-secondary bg-ds-gray-primary px-4 py-2 font-mono">
           CODECOV_TOKEN={data?.repository?.uploadToken}
-          <CopyClipboard
-            string={data?.repository?.uploadToken}
-            onClick={() => copiedCIToken(data?.repository?.uploadToken)}
-          />
+          <CopyClipboard string={data?.repository?.uploadToken} />
         </pre>
       </div>
       <div className="flex flex-col gap-3">
         <h2 className="text-base font-semibold">
           Step 2: add Codecov{' '}
-          <A
-            to={{ pageName: 'uploader' }}
-            data-testid="uploader"
-            onClick={() => downloadUploaderClicked()}
-            isExternal
-          >
+          <A to={{ pageName: 'uploader' }} data-testid="uploader" isExternal>
             uploader to your CI workflow
           </A>
         </h2>
diff --git a/src/pages/RepoPage/NewRepoTab/OtherCI/OtherCI.spec.jsx b/src/pages/RepoPage/NewRepoTab/OtherCI/OtherCI.spec.jsx
index 49a7a772b1..2546c55743 100644
--- a/src/pages/RepoPage/NewRepoTab/OtherCI/OtherCI.spec.jsx
+++ b/src/pages/RepoPage/NewRepoTab/OtherCI/OtherCI.spec.jsx
@@ -5,12 +5,8 @@ import { graphql } from 'msw'
 import { setupServer } from 'msw/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
-import { trackSegmentEvent } from 'services/tracking/segment'
-
 import OtherCI from './OtherCI'
 
-jest.mock('services/tracking/segment')
-
 const mockCurrentUser = {
   me: {
     trackingMetadata: {
@@ -75,8 +71,6 @@ describe('OtherCI', () => {
       )
     )
 
-    trackSegmentEvent.mockImplementation((data) => data)
-
     return { user }
   }
 
@@ -101,34 +95,6 @@ describe('OtherCI', () => {
       )
       expect(tokenValue).toBeInTheDocument()
     })
-
-    describe('user copies token', () => {
-      it('fires segment event', async () => {
-        const { user } = setup()
-        render(<OtherCI />, { wrapper })
-
-        // this is needed to wait for all the data to be loaded
-        const tokenValue = await screen.findByText(
-          /9e6a6189-20f1-482d-ab62-ecfaa2629295/
-        )
-        expect(tokenValue).toBeInTheDocument()
-
-        const buttons = await screen.findAllByTestId('clipboard')
-        const button = buttons[0]
-
-        await user.click(button)
-
-        expect(trackSegmentEvent).toBeCalled()
-        expect(trackSegmentEvent).toBeCalledWith({
-          data: {
-            category: 'Onboarding',
-            tokenHash: 'a2629295',
-            userId: 'user-owner-id',
-          },
-          event: 'User Onboarding Copied CI Token',
-        })
-      })
-    })
   })
 
   describe('step two', () => {
@@ -149,31 +115,6 @@ describe('OtherCI', () => {
       )
     })
 
-    describe('user clicks on header link', () => {
-      it('triggers segment event', async () => {
-        const { user } = setup()
-        render(<OtherCI />, { wrapper })
-
-        const tokenValue = await screen.findByText(
-          /9e6a6189-20f1-482d-ab62-ecfaa2629295/
-        )
-        expect(tokenValue).toBeInTheDocument()
-
-        const headerLink = await screen.findByRole('link', {
-          name: /uploader to your/,
-        })
-        expect(headerLink).toBeInTheDocument()
-
-        await user.click(headerLink)
-
-        expect(trackSegmentEvent).toBeCalled()
-        expect(trackSegmentEvent).toHaveBeenCalledWith({
-          data: { category: 'Onboarding', userId: 'user-owner-id' },
-          event: 'User Onboarding Download Uploader Clicked',
-        })
-      })
-    })
-
     it('renders instruction box', async () => {
       render(<OtherCI />, { wrapper })
 
diff --git a/src/pages/RepoPage/NewRepoTab/OtherCI/TerminalInstructions/InstructionBox.jsx b/src/pages/RepoPage/NewRepoTab/OtherCI/TerminalInstructions/InstructionBox.jsx
index b27208cba8..3ae2705a68 100644
--- a/src/pages/RepoPage/NewRepoTab/OtherCI/TerminalInstructions/InstructionBox.jsx
+++ b/src/pages/RepoPage/NewRepoTab/OtherCI/TerminalInstructions/InstructionBox.jsx
@@ -3,7 +3,6 @@ import { useState } from 'react'
 
 import config from 'config'
 
-import { useOnboardingTracking } from 'services/user'
 import CopyClipboard from 'ui/CopyClipboard'
 
 const systemsEnum = Object.freeze({
@@ -61,7 +60,6 @@ const WindowsSystemInstructions = () => {
 }
 
 export default function InstructionBox() {
-  const { terminalUploaderCommandClicked } = useOnboardingTracking()
   const [curSystem, setCurSystem] = useState(systemsEnum.LINUX)
 
   const handleInstructionClick = (e) => {
@@ -116,7 +114,6 @@ export default function InstructionBox() {
                 ? "$ProgressPreference = 'SilentlyContinue' Invoke-WebRequest -Uri https://uploader.codecov.io/latest/windows/codecov.exe -Outfile codecov.exe .\\codecov.exe"
                 : `curl -Os https://uploader.codecov.io/latest/${systemsMapper[curSystem]}/codecov chmod +x codecov ./codecov`
             }
-            onClick={terminalUploaderCommandClicked}
           />
         </span>
       </div>
diff --git a/src/pages/RepoPage/NewRepoTab/OtherCI/TerminalInstructions/InstructionBox.spec.jsx b/src/pages/RepoPage/NewRepoTab/OtherCI/TerminalInstructions/InstructionBox.spec.jsx
index 299b5fe9b2..07773d9df8 100644
--- a/src/pages/RepoPage/NewRepoTab/OtherCI/TerminalInstructions/InstructionBox.spec.jsx
+++ b/src/pages/RepoPage/NewRepoTab/OtherCI/TerminalInstructions/InstructionBox.spec.jsx
@@ -1,11 +1,9 @@
-import { render, screen, waitFor } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { graphql } from 'msw'
 
 import config from 'config'
 
-import { useOnboardingTracking } from 'services/user'
-
 import InstructionBox from '.'
 
 jest.mock('services/user')
@@ -20,18 +18,6 @@ describe('InstructionBox', () => {
     config.BASE_URL = 'https://app.codecov.io'
     config.IS_SELF_HOSTED = isSelfHosted
 
-    useOnboardingTracking.mockReturnValue({
-      terminalUploaderCommandClicked: () => {
-        mockTerminalUploaderCommandClicked({
-          data: {
-            category: 'Onboarding',
-            userId: 12345,
-          },
-          event: 'User Onboarding Terminal Uploader Command Clicked',
-        })
-      },
-    })
-
     graphql.query('CurrentUser', (_, res, ctx) =>
       res(
         ctx.status(200),
@@ -183,26 +169,4 @@ describe('InstructionBox', () => {
       expect(instruction).toBeInTheDocument()
     })
   })
-
-  describe('when the user clicks on the clipboard copy link', () => {
-    it('calls the trackSegmentEvent', async () => {
-      const { terminalUploaderCommandClicked, user } = setup()
-      render(<InstructionBox />)
-
-      const clipboard = screen.getByRole('button', {
-        name: 'clipboard-copy.svg copy',
-      })
-      await user.click(clipboard)
-
-      await waitFor(() => {
-        expect(terminalUploaderCommandClicked).toHaveBeenCalledWith({
-          event: 'User Onboarding Terminal Uploader Command Clicked',
-          data: {
-            category: 'Onboarding',
-            userId: 12345,
-          },
-        })
-      })
-    })
-  })
 })
diff --git a/src/pages/RepoPage/SettingsTab/tabs/GeneralTab/Tokens/ImpactAnalysisToken/ImpactAnalysisToken.jsx b/src/pages/RepoPage/SettingsTab/tabs/GeneralTab/Tokens/ImpactAnalysisToken/ImpactAnalysisToken.jsx
index e25db8fd74..c8c0633c9b 100644
--- a/src/pages/RepoPage/SettingsTab/tabs/GeneralTab/Tokens/ImpactAnalysisToken/ImpactAnalysisToken.jsx
+++ b/src/pages/RepoPage/SettingsTab/tabs/GeneralTab/Tokens/ImpactAnalysisToken/ImpactAnalysisToken.jsx
@@ -1,11 +1,7 @@
 import PropTypes from 'prop-types'
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
 
 import { useRegenerateRepositoryToken } from 'services/repositoryToken'
-import { trackSegmentEvent } from 'services/tracking/segment'
-import { useUser } from 'services/user'
-import { snakeifyKeys } from 'shared/utils/snakeifyKeys'
 import A from 'ui/A'
 import Button from 'ui/Button'
 import TokenWrapper from 'ui/TokenWrapper'
@@ -19,8 +15,6 @@ function ImpactAnalysisToken({ profilingToken }) {
   const { mutate, isLoading } = useRegenerateRepositoryToken({
     tokenType: TokenType.PROFILING,
   })
-  const { data: user } = useUser()
-  const { owner, repo } = useParams()
 
   if (!profilingToken) {
     return null
@@ -42,22 +36,7 @@ function ImpactAnalysisToken({ profilingToken }) {
           </A>
         </span>
         <div className="mt-4">
-          <TokenWrapper
-            token={profilingToken}
-            onClick={() => {
-              trackSegmentEvent(
-                snakeifyKeys({
-                  event: 'Impact Analysis Profiling Token Copied',
-                  data: {
-                    id: user?.trackingMetadata?.ownerid,
-                    userOwnerid: user?.trackingMetadata?.ownerid,
-                    ownerSlug: owner,
-                    repoSlug: repo,
-                  },
-                })
-              )
-            }}
-          />
+          <TokenWrapper token={profilingToken} />
         </div>
       </div>
       <div>
diff --git a/src/pages/RepoPage/SettingsTab/tabs/GeneralTab/Tokens/ImpactAnalysisToken/ImpactAnalysisToken.spec.jsx b/src/pages/RepoPage/SettingsTab/tabs/GeneralTab/Tokens/ImpactAnalysisToken/ImpactAnalysisToken.spec.jsx
index 032af3da53..332ecb311a 100644
--- a/src/pages/RepoPage/SettingsTab/tabs/GeneralTab/Tokens/ImpactAnalysisToken/ImpactAnalysisToken.spec.jsx
+++ b/src/pages/RepoPage/SettingsTab/tabs/GeneralTab/Tokens/ImpactAnalysisToken/ImpactAnalysisToken.spec.jsx
@@ -7,13 +7,11 @@ import { setupServer } from 'msw/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import { useAddNotification } from 'services/toastNotification'
-import { trackSegmentEvent } from 'services/tracking/segment'
 
 import ImpactAnalysisToken from './ImpactAnalysisToken'
 
 jest.mock('copy-to-clipboard', () => () => true)
 jest.mock('services/toastNotification')
-jest.mock('services/tracking/segment')
 
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
@@ -46,9 +44,7 @@ describe('ImpactAnalysisToken', () => {
     const user = userEvent.setup()
     const addNotification = jest.fn()
     const mutate = jest.fn()
-    const trackSegmentMock = jest.fn()
 
-    trackSegmentEvent.mockImplementation(trackSegmentMock)
     useAddNotification.mockReturnValue(addNotification)
 
     server.use(
@@ -82,7 +78,7 @@ describe('ImpactAnalysisToken', () => {
         )
       })
     )
-    return { addNotification, mutate, user, trackSegmentMock }
+    return { addNotification, mutate, user }
   }
 
   describe('renders ImpactAnalysisToken component', () => {
@@ -201,27 +197,6 @@ describe('ImpactAnalysisToken', () => {
     })
   })
 
-  describe('when the user clicks on the copy button', () => {
-    it('calls the trackSegmentEvent', async () => {
-      const { user, trackSegmentMock } = setup()
-      render(<ImpactAnalysisToken profilingToken="old token" />, { wrapper })
-
-      const button = await screen.findByRole('button', { name: /copy/i })
-      await user.click(button)
-
-      expect(trackSegmentMock).toHaveBeenCalledTimes(1)
-      expect(trackSegmentMock).toHaveBeenCalledWith({
-        event: 'Impact Analysis Profiling Token Copied',
-        data: {
-          owner_slug: 'codecov',
-          repo_slug: 'codecov-client',
-          user_ownerid: 1,
-          id: 1,
-        },
-      })
-    })
-  })
-
   describe('when user clicks on Generate New Token button', () => {
     it('calls the mutation', async () => {
       const { user, mutate } = setup()
diff --git a/src/pages/RepoPage/SettingsTab/tabs/GeneralTab/Tokens/StaticAnalysisToken/StaticAnalysisToken.jsx b/src/pages/RepoPage/SettingsTab/tabs/GeneralTab/Tokens/StaticAnalysisToken/StaticAnalysisToken.jsx
index dcbe95c9e3..cf6b944a9f 100644
--- a/src/pages/RepoPage/SettingsTab/tabs/GeneralTab/Tokens/StaticAnalysisToken/StaticAnalysisToken.jsx
+++ b/src/pages/RepoPage/SettingsTab/tabs/GeneralTab/Tokens/StaticAnalysisToken/StaticAnalysisToken.jsx
@@ -1,10 +1,6 @@
 import PropTypes from 'prop-types'
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
 
-import { trackSegmentEvent } from 'services/tracking/segment'
-import { useUser } from 'services/user'
-import { snakeifyKeys } from 'shared/utils/snakeifyKeys'
 import A from 'ui/A'
 import Button from 'ui/Button'
 import TokenWrapper from 'ui/TokenWrapper'
@@ -13,8 +9,6 @@ import RegenerateStaticTokenModal from './RegenerateStaticTokenModal'
 
 function StaticAnalysisToken({ staticAnalysisToken }) {
   const [showModal, setShowModal] = useState(false)
-  const { data: user } = useUser()
-  const { owner, repo } = useParams()
 
   if (!staticAnalysisToken) {
     return null
@@ -36,22 +30,7 @@ function StaticAnalysisToken({ staticAnalysisToken }) {
           </A>
         </span>
         <div className="mt-4">
-          <TokenWrapper
-            token={staticAnalysisToken}
-            onClick={() => {
-              trackSegmentEvent(
-                snakeifyKeys({
-                  event: 'Static Analysis Token Copied',
-                  data: {
-                    id: user?.trackingMetadata?.ownerid,
-                    userOwnerid: user?.trackingMetadata?.ownerid,
-                    ownerSlug: owner,
-                    repoSlug: repo,
-                  },
-                })
-              )
-            }}
-          />
+          <TokenWrapper token={staticAnalysisToken} />
         </div>
       </div>
       <div>
diff --git a/src/pages/RepoPage/SettingsTab/tabs/GeneralTab/Tokens/StaticAnalysisToken/StaticAnalysisToken.spec.jsx b/src/pages/RepoPage/SettingsTab/tabs/GeneralTab/Tokens/StaticAnalysisToken/StaticAnalysisToken.spec.jsx
index 96b2c66695..8598d259e8 100644
--- a/src/pages/RepoPage/SettingsTab/tabs/GeneralTab/Tokens/StaticAnalysisToken/StaticAnalysisToken.spec.jsx
+++ b/src/pages/RepoPage/SettingsTab/tabs/GeneralTab/Tokens/StaticAnalysisToken/StaticAnalysisToken.spec.jsx
@@ -7,13 +7,11 @@ import { setupServer } from 'msw/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import { useAddNotification } from 'services/toastNotification'
-import { trackSegmentEvent } from 'services/tracking/segment'
 
 import StaticAnalysisToken from './StaticAnalysisToken'
 
 jest.mock('copy-to-clipboard', () => () => true)
 jest.mock('services/toastNotification')
-jest.mock('services/tracking/segment')
 
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
@@ -46,9 +44,7 @@ describe('StaticAnalysisToken', () => {
     const user = userEvent.setup()
     const addNotification = jest.fn()
     const mutate = jest.fn()
-    const trackSegmentMock = jest.fn()
 
-    trackSegmentEvent.mockImplementation(trackSegmentMock)
     useAddNotification.mockReturnValue(addNotification)
 
     server.use(
@@ -82,7 +78,7 @@ describe('StaticAnalysisToken', () => {
         )
       })
     )
-    return { addNotification, mutate, user, trackSegmentMock }
+    return { addNotification, mutate, user }
   }
 
   describe('renders StaticAnalysisToken component', () => {
@@ -215,29 +211,6 @@ describe('StaticAnalysisToken', () => {
     })
   })
 
-  describe('when the user clicks on the copy button', () => {
-    it('calls the trackSegmentEvent', async () => {
-      const { user, trackSegmentMock } = setup()
-      render(<StaticAnalysisToken staticAnalysisToken="old token" />, {
-        wrapper,
-      })
-
-      const button = await screen.findByRole('button', { name: /copy/i })
-      await user.click(button)
-
-      expect(trackSegmentMock).toHaveBeenCalledTimes(1)
-      expect(trackSegmentMock).toHaveBeenCalledWith({
-        event: 'Static Analysis Token Copied',
-        data: {
-          owner_slug: 'codecov',
-          repo_slug: 'codecov-client',
-          user_ownerid: 1,
-          id: 1,
-        },
-      })
-    })
-  })
-
   describe('when user clicks on Generate New Token button', () => {
     it('calls the mutation', async () => {
       const { user, mutate } = setup()
diff --git a/src/services/tracking/hooks.spec.js b/src/services/tracking/hooks.spec.js
index 596f37548d..07089f6021 100644
--- a/src/services/tracking/hooks.spec.js
+++ b/src/services/tracking/hooks.spec.js
@@ -4,11 +4,8 @@ import { graphql } from 'msw'
 import { setupServer } from 'msw/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
-import { useSegmentPage } from './segment'
 import { useTracking } from './useTracking'
 
-jest.mock('./segment')
-
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
@@ -104,7 +101,6 @@ describe('useTracking', () => {
       await waitFor(() => result.current.isLoading)
       await waitFor(() => !result.current.isLoading)
 
-      await waitFor(() => expect(useSegmentPage).toHaveBeenCalled())
       await waitFor(() =>
         expect(window.dataLayer[0]).toEqual({
           codecov: {
@@ -188,7 +184,6 @@ describe('useTracking', () => {
       await waitFor(() => result.current.isLoading)
       await waitFor(() => !result.current.isLoading)
 
-      await waitFor(() => expect(useSegmentPage).toHaveBeenCalled())
       await waitFor(() =>
         expect(window.dataLayer[0]).toEqual({
           codecov: {
@@ -239,7 +234,6 @@ describe('useTracking', () => {
       await waitFor(() => result.current.isLoading)
       await waitFor(() => !result.current.isLoading)
 
-      await waitFor(() => expect(useSegmentPage).toHaveBeenCalled())
       await waitFor(() =>
         expect(window.dataLayer[0]).toEqual({
           codecov: {
diff --git a/src/services/tracking/segment.js b/src/services/tracking/segment.js
deleted file mode 100644
index 48e2271c2d..0000000000
--- a/src/services/tracking/segment.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import Cookie from 'js-cookie'
-import { useState } from 'react'
-import { useLocation } from 'react-router-dom'
-
-export const segmentUser = {
-  ownerid: null,
-  email: 'unknown@codecov.io',
-  name: 'unknown',
-  username: 'unknown',
-  service: null,
-  plan: null,
-  staff: null,
-  serviceId: null,
-}
-
-function identifyUser(user) {
-  return window?.analytics?.identify(
-    user.ownerid,
-    {
-      ...user,
-    },
-    {
-      integrations: {
-        Salesforce: true,
-        Marketo: false,
-      },
-      context: {
-        externalIds: [
-          {
-            id: user.service_id,
-            type: user.service + '_id',
-            collections: 'users',
-            encoding: 'none',
-          },
-        ],
-      },
-    }
-  )
-}
-
-function identifyFromAnalytics(id, type) {
-  return window?.analytics?.identify(
-    {},
-    {
-      integrations: {
-        Salesforce: false,
-        Marketo: false,
-      },
-      context: {
-        externalIds: [
-          {
-            id,
-            type,
-            collection: 'users',
-            encoding: 'none',
-          },
-        ],
-      },
-    }
-  )
-}
-
-export function identifySegmentUser(user) {
-  if (user.guest) {
-    window?.analytics?.identify({})
-    return
-  }
-
-  const gaId = Cookie.get('_ga')
-  const marketoId = Cookie.get('_mkto_trk')
-
-  if (gaId) identifyFromAnalytics(gaId, 'ga_client_id')
-  if (marketoId) identifyFromAnalytics(marketoId, 'marketo_cookie')
-
-  identifyUser(user)
-}
-
-export function useSegmentPage() {
-  const location = useLocation()
-  const [oldLocation, setOldLocation] = useState('')
-
-  if (oldLocation !== location.pathname) {
-    window?.analytics?.page()
-    setOldLocation(location.pathname)
-  }
-}
-
-export function trackSegmentEvent({ event, data }) {
-  return (
-    event &&
-    window?.analytics?.track(event, {
-      value: 1,
-      ...data,
-    })
-  )
-}
-
-export function pageSegmentEvent({ event, path, url }) {
-  return window?.analytics?.page(event, {
-    path,
-    url,
-  })
-}
-
-export function identifySegmentEvent({ id, data }) {
-  return window?.analytics?.identify(id, {
-    ...data,
-  })
-}
diff --git a/src/services/tracking/segment.spec.js b/src/services/tracking/segment.spec.js
deleted file mode 100644
index ed6646db34..0000000000
--- a/src/services/tracking/segment.spec.js
+++ /dev/null
@@ -1,311 +0,0 @@
-import { renderHook } from '@testing-library/react'
-import Cookie from 'js-cookie'
-import { useLocation } from 'react-router-dom'
-
-import {
-  identifySegmentEvent,
-  identifySegmentUser,
-  pageSegmentEvent,
-  trackSegmentEvent,
-  useSegmentPage,
-} from './segment'
-
-window.analytics = {
-  identify: jest.fn(),
-  page: jest.fn(),
-  track: jest.fn(),
-}
-
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useLocation: jest.fn(),
-}))
-
-describe('identifySegmentUser', () => {
-  function setup(user) {
-    identifySegmentUser(user)
-  }
-
-  describe('when user has all the data', () => {
-    const user = {
-      ownerid: 1,
-      service_id: '123',
-      plan: 'plan',
-      staff: true,
-      service: 'github',
-      name: 'Test User',
-      username: 'test_user',
-      email: 'tedlasso@test.com',
-      guest: false,
-    }
-
-    beforeEach(() => {
-      setup(user)
-    })
-
-    it('should set full data into identify object', () => {
-      expect(window.analytics.identify.mock.instances).toHaveLength(1)
-      expect(
-        window.analytics.identify.mock.instances[0].identify
-      ).toHaveBeenCalled()
-      expect(window.analytics.identify).toBeCalledWith(
-        1,
-        {
-          email: 'tedlasso@test.com',
-          guest: false,
-          name: 'Test User',
-          ownerid: 1,
-          plan: 'plan',
-          service: 'github',
-          service_id: '123',
-          staff: true,
-          username: 'test_user',
-        },
-        {
-          context: {
-            externalIds: [
-              {
-                collections: 'users',
-                encoding: 'none',
-                id: '123',
-                type: 'github_id',
-              },
-            ],
-          },
-          integrations: {
-            Marketo: false,
-            Salesforce: true,
-          },
-        }
-      )
-    })
-  })
-
-  describe('when user has all the data and all the cookies', () => {
-    const user = {
-      ownerid: 1,
-      service_id: '123',
-      plan: 'plan',
-      staff: true,
-      service: 'github',
-      name: 'Test User',
-      username: 'test_user',
-      email: 'tedlasso@test.com',
-      guest: false,
-    }
-
-    beforeEach(() => {
-      Cookie.set('_ga', '123')
-      Cookie.set('_mkto_trk', '456')
-      setup(user)
-    })
-
-    afterEach(() => {
-      Cookie.remove('_ga')
-      Cookie.remove('_mkto_trk')
-    })
-
-    it('hook should make 3 different identify calls', () => {
-      expect(window.analytics.identify.mock.instances).toHaveLength(3)
-      expect(
-        window.analytics.identify.mock.instances[0].identify
-      ).toBeCalledWith(
-        1,
-        {
-          email: 'tedlasso@test.com',
-          guest: false,
-          name: 'Test User',
-          ownerid: 1,
-          plan: 'plan',
-          service: 'github',
-          service_id: '123',
-          staff: true,
-          username: 'test_user',
-        },
-        {
-          context: {
-            externalIds: [
-              {
-                collections: 'users',
-                encoding: 'none',
-                id: '123',
-                type: 'github_id',
-              },
-            ],
-          },
-          integrations: {
-            Marketo: false,
-            Salesforce: true,
-          },
-        }
-      )
-      expect(
-        window.analytics.identify.mock.instances[1].identify
-      ).toBeCalledWith(
-        {},
-        {
-          context: {
-            externalIds: [
-              {
-                collection: 'users',
-                encoding: 'none',
-                id: '123',
-                type: 'ga_client_id',
-              },
-            ],
-          },
-          integrations: {
-            Marketo: false,
-            Salesforce: false,
-          },
-        }
-      )
-      expect(
-        window.analytics.identify.mock.instances[2].identify
-      ).toBeCalledWith(
-        {},
-        {
-          context: {
-            externalIds: [
-              {
-                collection: 'users',
-                encoding: 'none',
-                id: '456',
-                type: 'marketo_cookie',
-              },
-            ],
-          },
-          integrations: {
-            Marketo: false,
-            Salesforce: false,
-          },
-        }
-      )
-    })
-  })
-
-  describe('when user is anonymous', () => {
-    beforeEach(() => {
-      setup({ guest: true })
-    })
-
-    it('should make an identify call as a guest', () => {
-      expect(window.analytics.identify.mock.instances).toHaveLength(1)
-      expect(window.analytics.identify).toBeCalledWith({})
-    })
-  })
-})
-
-describe('useSegmentPage', () => {
-  function setup(pathname) {
-    useLocation.mockReturnValue({ pathname })
-  }
-
-  describe('when there is a path change', () => {
-    it('makes an analytics page call', () => {
-      let pathname = '/gh/thanos'
-      setup(pathname)
-
-      renderHook(() => useSegmentPage())
-
-      expect(window.analytics.page).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  describe('when there are a n-path changes', () => {
-    it('makes nth analytics page calls', () => {
-      const owners = ['orly', 'jester', 'nott']
-
-      owners.forEach((owner) => {
-        setup('/gh/' + owner)
-        renderHook(() => useSegmentPage())
-      })
-
-      expect(window.analytics.page).toHaveBeenCalledTimes(3)
-    })
-  })
-})
-
-describe('trackSegmentEvent', () => {
-  function setup(event, label, category) {
-    trackSegmentEvent({ event, data: { label, category } })
-  }
-
-  describe('when event is defined', () => {
-    it('returns an track event if part of event enums', () => {
-      const label = 'request demo'
-      const event = 'click'
-      const category = 'category A'
-      setup(event, label, category)
-
-      expect(window.analytics.track.mock.instances[0].track).toHaveBeenCalled()
-      expect(
-        window.analytics.track.mock.instances[0].track
-      ).toHaveBeenCalledWith('click', {
-        category,
-        label,
-        value: 1,
-      })
-    })
-  })
-
-  describe('when event is undefined', () => {
-    const event = undefined
-    const label = 'anything'
-    const category = 'anything'
-
-    beforeEach(() => {
-      setup(event, label, category)
-    })
-
-    it('returns an undefined track event', () => {
-      expect(window.analytics.track.mock.instances[0]).toBeUndefined()
-    })
-  })
-})
-
-describe('pageSegmentEvent', () => {
-  function setup({ event, path, url }) {
-    pageSegmentEvent({ event, path, url })
-  }
-
-  describe('when hook is called', () => {
-    it('returns a page segment event with a specified path and url', () => {
-      const event = 'random event'
-      const path = '/random/path'
-      const url = 'http://www.aRandomPage.com/random/path'
-      setup({ event, path, url })
-
-      expect(window.analytics.page).toHaveBeenCalled()
-      expect(window.analytics.page).toHaveBeenCalledWith('random event', {
-        path: '/random/path',
-        url: 'http://www.aRandomPage.com/random/path',
-      })
-    })
-  })
-})
-
-describe('identifySegmentEvent', () => {
-  function setup({ id, data }) {
-    identifySegmentEvent({ id, data })
-  }
-
-  describe('when the hook is called', () => {
-    it('returns an identify segment event with an id and custom data', () => {
-      const id = 1
-      const data = {
-        name: 'Zagreus',
-        numberOfEscapes: '99',
-        parent: 'Hades',
-        mother: 'Persephone',
-        bestFriend: 'Cerberus',
-      }
-      setup({ id, data })
-
-      expect(window.analytics.identify).toHaveBeenCalled()
-      expect(window.analytics.identify).toHaveBeenCalledWith(id, {
-        ...data,
-      })
-    })
-  })
-})
diff --git a/src/services/tracking/useTracking.js b/src/services/tracking/useTracking.js
index 908a4661d0..4ad92f6673 100644
--- a/src/services/tracking/useTracking.js
+++ b/src/services/tracking/useTracking.js
@@ -3,7 +3,6 @@ import { useUser } from 'services/user'
 import { useTrackFeatureFlags } from './featureFlags'
 import { gtmUser, setDataLayer } from './gtm'
 import { firePendo, pendoDefaultUser, useUpdatePendoWithOwner } from './pendo'
-import { identifySegmentUser, segmentUser, useSegmentPage } from './segment'
 import { getUserData } from './utils'
 
 const trackingInfo = [
@@ -12,11 +11,6 @@ const trackingInfo = [
     callback: setDataLayer,
     defaultUser: gtmUser,
   },
-  {
-    name: 'Segment',
-    callback: identifySegmentUser,
-    defaultUser: segmentUser,
-  },
   {
     name: 'Pendo',
     callback: firePendo,
@@ -50,7 +44,6 @@ export function useTracking() {
   })
 
   useTrackFeatureFlags(user) // TODO: Can probably delete
-  useSegmentPage()
   useUpdatePendoWithOwner(user)
 
   return { data: user, ...all }
diff --git a/src/services/user/index.js b/src/services/user/index.js
index 0b8627a2e3..ca96af372c 100644
--- a/src/services/user/index.js
+++ b/src/services/user/index.js
@@ -2,7 +2,6 @@ export * from './useInternalUser'
 export * from './useIsCurrentUserAnAdmin'
 export * from './useMyContexts'
 export * from './useOnboardUser'
-export * from './useOnboardingTracking'
 export * from './useOwner'
 export * from './useResyncUser'
 export * from './useUpdateProfile'
diff --git a/src/services/user/useOnboardingTracking.js b/src/services/user/useOnboardingTracking.js
deleted file mode 100644
index 0e7ce4a8de..0000000000
--- a/src/services/user/useOnboardingTracking.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import isArray from 'lodash/isArray'
-import { useLocation } from 'react-router-dom'
-
-import {
-  identifySegmentEvent,
-  pageSegmentEvent,
-  trackSegmentEvent,
-} from 'services/tracking/segment'
-import { useUser } from 'services/user'
-
-export function useOnboardingTracking() {
-  // TODO: create an app context where tracking meta data is shared within the app
-  const { data: user } = useUser()
-
-  const { pathname: path } = useLocation()
-  const url = window.location.href
-
-  return {
-    startOnboarding: () => {
-      trackSegmentEvent({
-        event: 'User Started Onboarding',
-        data: {
-          category: 'Onboarding',
-        },
-      })
-      const customPath = '/onboarding/1'
-      pageSegmentEvent({
-        event: 'Onboarding Page 1',
-        path: path + customPath,
-        url: url + customPath,
-      })
-    },
-    secondPage: () => {
-      const customPath = '/onboarding/2'
-      pageSegmentEvent({
-        event: 'Onboarding Page 2',
-        path: path + customPath,
-        url: url + customPath,
-      })
-    },
-    helpFindingOrganization: () => {
-      trackSegmentEvent({
-        event: 'User Onboarding Help Finding Org Clicked',
-        data: {
-          category: 'Onboarding',
-        },
-      })
-    },
-    skipOnboarding: () => {
-      trackSegmentEvent({
-        event: 'User Onboarding Skipped',
-        data: {
-          category: 'Onboarding',
-        },
-      })
-    },
-    selectOrganization: (user, organization) => {
-      const id = user?.trackingMetadata?.ownerid
-      trackSegmentEvent({
-        event: 'User Onboarding Selected Org',
-        data: {
-          category: 'Onboarding',
-        },
-      })
-      identifySegmentEvent({ id, organization })
-    },
-    completedOnboarding: (user, data) => {
-      const id = user?.trackingMetadata?.ownerid
-      trackSegmentEvent({
-        event: 'User Completed Onboarding',
-        data: {
-          category: 'Onboarding',
-        },
-      })
-
-      // Changing arrays to semicolon delimiting strings for analytics purposes
-      for (let [key, value] of Object.entries(data)) {
-        if (isArray(value)) {
-          data[key] = value.join(';')
-        }
-      }
-      identifySegmentEvent({ id, data })
-    },
-    downloadUploaderClicked: () => {
-      trackSegmentEvent({
-        event: 'User Onboarding Download Uploader Clicked',
-        data: {
-          category: 'Onboarding',
-          userId: user?.trackingMetadata?.ownerid,
-        },
-      })
-    },
-    copiedCIToken: (token) => {
-      trackSegmentEvent({
-        event: 'User Onboarding Copied CI Token',
-        data: {
-          category: 'Onboarding',
-          userId: user?.trackingMetadata?.ownerid,
-          tokenHash: token.slice(token.length - 8),
-        },
-      })
-    },
-    terminalUploaderCommandClicked: () => {
-      trackSegmentEvent({
-        event: 'User Onboarding Terminal Uploader Command Clicked',
-        data: {
-          category: 'Onboarding',
-          userId: user?.trackingMetadata?.ownerid,
-        },
-      })
-    },
-  }
-}
diff --git a/src/services/user/useOnboardingTracking.spec.js b/src/services/user/useOnboardingTracking.spec.js
deleted file mode 100644
index 32883f2b53..0000000000
--- a/src/services/user/useOnboardingTracking.spec.js
+++ /dev/null
@@ -1,230 +0,0 @@
-import { act, renderHook } from '@testing-library/react'
-import { MemoryRouter, Route } from 'react-router-dom'
-
-import {
-  identifySegmentEvent,
-  pageSegmentEvent,
-  trackSegmentEvent,
-} from 'services/tracking/segment'
-import { useUser } from 'services/user'
-
-import { useOnboardingTracking } from './useOnboardingTracking'
-
-jest.mock('services/tracking/segment')
-jest.mock('services/user')
-
-const wrapper = ({ children }) => (
-  <MemoryRouter initialEntries={['/campaign/three/rocks']}>
-    <Route path="/:provider/:owner/:repo">{children}</Route>
-  </MemoryRouter>
-)
-
-beforeEach(() => {
-  useUser.mockReturnValue({
-    data: {
-      username: 'Laerryn Coramar-Seelie',
-      trackingMetadata: {
-        ownerid: 4,
-      },
-    },
-  })
-
-  // override href location
-  Object.defineProperty(window, 'location', {
-    value: {
-      href: 'www.criticalrole.com/campaign/three/rocks',
-    },
-  })
-})
-
-describe('useOnboardingTracking', () => {
-  describe('startOnboarding', () => {
-    it('calls segment event with specific information', () => {
-      const { result } = renderHook(() => useOnboardingTracking(), { wrapper })
-      act(() => {
-        result.current.startOnboarding()
-      })
-
-      expect(trackSegmentEvent).toHaveBeenCalledWith({
-        data: {
-          category: 'Onboarding',
-        },
-        event: 'User Started Onboarding',
-      })
-      expect(pageSegmentEvent).toHaveBeenCalledWith({
-        event: 'Onboarding Page 1',
-        path: '/campaign/three/rocks/onboarding/1',
-        url: 'www.criticalrole.com/campaign/three/rocks/onboarding/1',
-      })
-    })
-  })
-
-  describe('secondPage', () => {
-    it('calls segment event with specific information', () => {
-      const { result } = renderHook(() => useOnboardingTracking(), { wrapper })
-      act(() => {
-        result.current.secondPage()
-      })
-
-      expect(pageSegmentEvent).toHaveBeenCalledWith({
-        event: 'Onboarding Page 2',
-        path: '/campaign/three/rocks/onboarding/2',
-        url: 'www.criticalrole.com/campaign/three/rocks/onboarding/2',
-      })
-    })
-  })
-
-  describe('helpFindingOrganization', () => {
-    it('calls segment event with specific information', () => {
-      const { result } = renderHook(() => useOnboardingTracking(), { wrapper })
-      act(() => {
-        result.current.helpFindingOrganization()
-      })
-
-      expect(trackSegmentEvent).toHaveBeenCalledWith({
-        event: 'User Onboarding Help Finding Org Clicked',
-        data: {
-          category: 'Onboarding',
-        },
-      })
-    })
-  })
-
-  describe('skipOnboarding', () => {
-    it('calls segment event with specific information', () => {
-      const { result } = renderHook(() => useOnboardingTracking(), { wrapper })
-      act(() => {
-        result.current.skipOnboarding()
-      })
-
-      expect(trackSegmentEvent).toHaveBeenCalledWith({
-        event: 'User Onboarding Skipped',
-        data: {
-          category: 'Onboarding',
-        },
-      })
-    })
-  })
-
-  describe('selectOrganization', () => {
-    it('calls segment event with specific information', () => {
-      const { result } = renderHook(() => useOnboardingTracking(), { wrapper })
-      act(() => {
-        result.current.selectOrganization(
-          {
-            username: 'Laerryn Coramar-Seelie',
-            trackingMetadata: {
-              ownerid: 4,
-            },
-          },
-
-          'codecov'
-        )
-      })
-
-      expect(trackSegmentEvent).toHaveBeenCalledWith({
-        event: 'User Onboarding Selected Org',
-        data: {
-          category: 'Onboarding',
-        },
-      })
-      expect(identifySegmentEvent).toHaveBeenCalledWith({
-        organization: 'codecov',
-        id: 4,
-      })
-    })
-  })
-
-  describe('completedOnboarding', () => {
-    it('calls segment event with specific information', () => {
-      const { result } = renderHook(() => useOnboardingTracking(), { wrapper })
-      act(() => {
-        result.current.completedOnboarding(
-          {
-            username: 'Laerryn Coramar-Seelie',
-            trackingMetadata: {
-              ownerid: 4,
-            },
-          },
-
-          {
-            businessEmail: '',
-            email: 'adrian@codecov.io',
-            goals: ['MAINTAIN_COVERAGE', 'TEAM_REQUIREMENTS'],
-            otherGoal: '',
-            typeProjects: ['EDUCATIONAL'],
-          }
-        )
-      })
-
-      expect(trackSegmentEvent).toHaveBeenCalledWith({
-        event: 'User Completed Onboarding',
-        data: {
-          category: 'Onboarding',
-        },
-      })
-      expect(identifySegmentEvent).toHaveBeenCalledWith({
-        data: {
-          businessEmail: '',
-          email: 'adrian@codecov.io',
-          goals: 'MAINTAIN_COVERAGE;TEAM_REQUIREMENTS',
-          otherGoal: '',
-          typeProjects: 'EDUCATIONAL',
-        },
-        id: 4,
-      })
-    })
-  })
-
-  describe('downloadUploaderClicked', () => {
-    it('calls segment event with specific information', () => {
-      const { result } = renderHook(() => useOnboardingTracking(), { wrapper })
-      act(() => {
-        result.current.downloadUploaderClicked()
-      })
-
-      expect(trackSegmentEvent).toHaveBeenCalledWith({
-        event: 'User Onboarding Download Uploader Clicked',
-        data: {
-          category: 'Onboarding',
-          userId: 4,
-        },
-      })
-    })
-  })
-
-  describe('copiedCIToken', () => {
-    it('calls segment event with specific information', () => {
-      const { result } = renderHook(() => useOnboardingTracking(), { wrapper })
-      act(() => {
-        result.current.copiedCIToken('c8859fa7-9449-45ba-9210-69c12034f097')
-      })
-
-      expect(trackSegmentEvent).toHaveBeenCalledWith({
-        event: 'User Onboarding Copied CI Token',
-        data: {
-          category: 'Onboarding',
-          userId: 4,
-          tokenHash: '2034f097',
-        },
-      })
-    })
-  })
-
-  describe('terminalUploaderCommandClicked', () => {
-    it('calls segment event with specific information', () => {
-      const { result } = renderHook(() => useOnboardingTracking(), { wrapper })
-      act(() => {
-        result.current.terminalUploaderCommandClicked()
-      })
-
-      expect(trackSegmentEvent).toHaveBeenCalledWith({
-        event: 'User Onboarding Terminal Uploader Command Clicked',
-        data: {
-          category: 'Onboarding',
-          userId: 4,
-        },
-      })
-    })
-  })
-})

From b72198f26891d4464758ab2151a9ad5bbf202e31 Mon Sep 17 00:00:00 2001
From: Rula Abu Hasna <rula@codecov.io>
Date: Wed, 18 Oct 2023 16:35:45 +0200
Subject: [PATCH 08/11] Update with tests

---
 src/layouts/BaseLayout/BaseLayout.spec.jsx    |  7 ++++-
 .../BaseLayout/hooks/useUserAccessGate.js     |  2 +-
 .../hooks/useUserAccessGate.spec.tsx          | 28 +++++++++++++++++--
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/layouts/BaseLayout/BaseLayout.spec.jsx b/src/layouts/BaseLayout/BaseLayout.spec.jsx
index 2323b62e96..e0e94b5de8 100644
--- a/src/layouts/BaseLayout/BaseLayout.spec.jsx
+++ b/src/layouts/BaseLayout/BaseLayout.spec.jsx
@@ -285,7 +285,12 @@ describe('BaseLayout', () => {
 
   describe('user has not accepted terms of service', () => {
     it('redirects the user to /terms', async () => {
-      setup({ termsOfServicePage: true })
+      setup({
+        termsOfServicePage: true,
+        internalUser: {
+          termsAgreement: false,
+        },
+      })
 
       render(<BaseLayout>hello</BaseLayout>, {
         wrapper: wrapper(),
diff --git a/src/layouts/BaseLayout/hooks/useUserAccessGate.js b/src/layouts/BaseLayout/hooks/useUserAccessGate.js
index 08bdfdf1d0..eda9fda5c2 100644
--- a/src/layouts/BaseLayout/hooks/useUserAccessGate.js
+++ b/src/layouts/BaseLayout/hooks/useUserAccessGate.js
@@ -79,7 +79,7 @@ const useUserAccessGate = () => {
     !isGuest &&
     !config.IS_SELF_HOSTED
   ) {
-    showAgreeToTerms = userData?.termsAgreement === false
+    showAgreeToTerms = internalUser?.termsAgreement === false
   }
 
   const onSyncPage = currentRoute.path === '/sync'
diff --git a/src/layouts/BaseLayout/hooks/useUserAccessGate.spec.tsx b/src/layouts/BaseLayout/hooks/useUserAccessGate.spec.tsx
index 3f350f6cb5..b8f59be8d1 100644
--- a/src/layouts/BaseLayout/hooks/useUserAccessGate.spec.tsx
+++ b/src/layouts/BaseLayout/hooks/useUserAccessGate.spec.tsx
@@ -160,6 +160,30 @@ const internalUserHasSyncedProviders = {
   ],
 }
 
+const internalUserWithSignedTOS = {
+  email: userSignedInIdentity.email,
+  name: userSignedInIdentity.name,
+  externalId: '123',
+  owners: [
+    {
+      service: 'github',
+    },
+  ],
+  termsAgreement: true,
+}
+
+const internalUserWithUnsignedTOS = {
+  email: userSignedInIdentity.email,
+  name: userSignedInIdentity.name,
+  externalId: '123',
+  owners: [
+    {
+      service: 'github',
+    },
+  ],
+  termsAgreement: false,
+}
+
 type InternalUser =
   | typeof internalUserNoSyncedProviders
   | typeof internalUserHasSyncedProviders
@@ -249,7 +273,7 @@ describe('useUserAccessGate', () => {
       'signed TOS',
       {
         user: loggedInUser,
-        internalUser: internalUserHasSyncedProviders,
+        internalUser: internalUserWithSignedTOS,
         termsOfServicePage: true,
         isSelfHosted: false,
         defaultOrgSelectorPage: false,
@@ -361,7 +385,7 @@ describe('useUserAccessGate', () => {
       'unsigned TOS',
       {
         user: loggedInUnsignedUser,
-        internalUser: internalUserHasSyncedProviders,
+        internalUser: internalUserWithUnsignedTOS,
         termsOfServicePage: true,
         isSelfHosted: false,
         defaultOrgSelectorPage: false,

From f7ecf8ab54362a0a73103771ac02b61cffd5b0aa Mon Sep 17 00:00:00 2001
From: Rula Abu Hasna <rula@codecov.io>
Date: Wed, 18 Oct 2023 17:21:52 +0200
Subject: [PATCH 09/11] test with support service less

---
 src/shared/api/api.test.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/shared/api/api.test.js b/src/shared/api/api.test.js
index 904905e13a..6d3f3b47bd 100644
--- a/src/shared/api/api.test.js
+++ b/src/shared/api/api.test.js
@@ -320,4 +320,22 @@ describe('when using a graphql mutation', () => {
       })
     })
   })
+
+  describe('when the mutation supports serviceless', () => {
+    beforeAll(() => {
+      result = Api.graphqlMutation({
+        query: 'query MyInfo { me }',
+        mutationPath: 'me',
+        supportsServiceless: true,
+      })
+    })
+
+    it('resolves with the data', async () => {
+      return expect(result).resolves.toEqual({
+        data: {
+          me: 'Codecov',
+        },
+      })
+    })
+  })
 })

From 88990a7fb69010e2d423867343dac4539c85b13b Mon Sep 17 00:00:00 2001
From: Rula Abu Hasna <rula@codecov.io>
Date: Thu, 19 Oct 2023 19:43:00 +0200
Subject: [PATCH 10/11] adjust logic to handle original route

---
 src/App.jsx                                   |  6 ---
 src/App.spec.jsx                              | 10 -----
 src/layouts/BaseLayout/BaseLayout.jsx         |  7 ++-
 src/layouts/BaseLayout/BaseLayout.spec.jsx    | 43 +++++++++++--------
 src/pages/TermsOfService/TermsOfService.jsx   | 21 ---------
 .../TermsOfService/TermsOfService.spec.jsx    | 18 +-------
 6 files changed, 34 insertions(+), 71 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index e6892ea51c..926b52e10c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -25,7 +25,6 @@ const OwnerPage = lazy(() => import('./pages/OwnerPage'))
 const PullRequestPage = lazy(() => import('./pages/PullRequestPage'))
 const RepoPage = lazy(() => import('./pages/RepoPage'))
 const SyncProviderPage = lazy(() => import('./pages/SyncProviderPage'))
-const TermsOfService = lazy(() => import('pages/TermsOfService'))
 
 const HomePageRedirect = () => {
   const { provider } = useParams()
@@ -61,11 +60,6 @@ const MainAppRoutes = () => (
         <SyncProviderPage />
       </BaseLayout>
     </SentryRoute>
-    <SentryRoute path="/terms" exact>
-      <BaseLayout>
-        <TermsOfService />
-      </BaseLayout>
-    </SentryRoute>
     {config.IS_SELF_HOSTED && (
       <SentryRoute path="/admin/:provider">
         <BaseLayout>
diff --git a/src/App.spec.jsx b/src/App.spec.jsx
index 76af45102c..6d54f9e1ac 100644
--- a/src/App.spec.jsx
+++ b/src/App.spec.jsx
@@ -276,16 +276,6 @@ describe('App', () => {
         },
       },
     ],
-    [
-      {
-        testLabel: 'TOSPage',
-        pathname: '/terms',
-        expected: {
-          page: /TermsOfService/i,
-          location: '/terms',
-        },
-      },
-    ],
   ]
 
   describe.each(cloudFullRouterCases)(
diff --git a/src/layouts/BaseLayout/BaseLayout.jsx b/src/layouts/BaseLayout/BaseLayout.jsx
index 01929a1b9b..936970bb12 100644
--- a/src/layouts/BaseLayout/BaseLayout.jsx
+++ b/src/layouts/BaseLayout/BaseLayout.jsx
@@ -17,6 +17,7 @@ import { useUserAccessGate } from './hooks/useUserAccessGate'
 const LimitedHeader = lazy(() => import('layouts/LimitedHeader'))
 const DefaultOrgSelector = lazy(() => import('pages/DefaultOrgSelector'))
 const InstallationHelpBanner = lazy(() => import('./InstallationHelpBanner'))
+const TermsOfService = lazy(() => import('pages/TermsOfService'))
 
 const FullPageLoader = () => (
   <div className="mt-16 flex flex-1 items-center justify-center">
@@ -35,7 +36,11 @@ const OnboardingOrChildren = ({ children }) => {
   const { isImpersonating } = useImpersonate()
 
   if (showAgreeToTerms && !isFullExperience) {
-    return <Redirect to="/terms" />
+    return (
+      <Suspense fallback={null}>
+        <TermsOfService />
+      </Suspense>
+    )
   }
 
   if (redirectToSyncPage && !isFullExperience) {
diff --git a/src/layouts/BaseLayout/BaseLayout.spec.jsx b/src/layouts/BaseLayout/BaseLayout.spec.jsx
index e0e94b5de8..3221d75457 100644
--- a/src/layouts/BaseLayout/BaseLayout.spec.jsx
+++ b/src/layouts/BaseLayout/BaseLayout.spec.jsx
@@ -17,6 +17,7 @@ jest.mock('services/impersonate')
 jest.mock('shared/featureFlags')
 jest.mock('shared/GlobalTopBanners', () => () => 'GlobalTopBanners')
 jest.mock('./InstallationHelpBanner', () => () => 'InstallationHelpBanner')
+jest.mock('pages/TermsOfService', () => () => 'TermsOfService')
 jest.mock('pages/DefaultOrgSelector', () => () => 'DefaultOrgSelector')
 
 const mockOwner = {
@@ -77,6 +78,7 @@ const internalUserHasSyncedProviders = {
       service: 'github',
     },
   ],
+  termsAgreement: false,
 }
 
 const queryClient = new QueryClient({
@@ -166,6 +168,9 @@ describe('BaseLayout', () => {
       graphql.query('Seats', (_, res, ctx) =>
         res(ctx.status(200), ctx.data({}))
       ),
+      graphql.query('TermsOfService', (_, res, ctx) =>
+        res(ctx.status(200), ctx.data({}))
+      ),
       graphql.query('UseMyOrganizations', (_, res, ctx) =>
         res(
           ctx.status(200),
@@ -214,6 +219,9 @@ describe('BaseLayout', () => {
 
         const defaultOrg = screen.queryByText(/DefaultOrgSelector/)
         expect(defaultOrg).not.toBeInTheDocument()
+
+        const termsOfService = screen.queryByText(/TermsOfService/)
+        expect(termsOfService).not.toBeInTheDocument()
       })
     })
 
@@ -232,6 +240,9 @@ describe('BaseLayout', () => {
 
         const defaultOrg = screen.queryByText(/DefaultOrgSelector/)
         expect(defaultOrg).not.toBeInTheDocument()
+
+        const termsOfService = screen.queryByText(/TermsOfService/)
+        expect(termsOfService).not.toBeInTheDocument()
       })
     })
 
@@ -251,7 +262,22 @@ describe('BaseLayout', () => {
 
         const defaultOrg = screen.queryByText(/DefaultOrgSelector/)
         expect(defaultOrg).not.toBeInTheDocument()
+
+        const termsOfService = screen.queryByText(/TermsOfService/)
+        expect(termsOfService).not.toBeInTheDocument()
+      })
+    })
+
+    it(`renders the ${expectedPage}`, async () => {
+      setup({ termsOfServicePage: true, currentUser: loggedInUser })
+
+      render(<BaseLayout>hello</BaseLayout>, {
+        wrapper: wrapper(),
       })
+
+      expect(await screen.findByText(expectedMatcher)).toBeTruthy()
+      const tos = screen.getByText(expectedMatcher)
+      expect(tos).toBeInTheDocument()
     })
   })
 
@@ -283,23 +309,6 @@ describe('BaseLayout', () => {
     })
   })
 
-  describe('user has not accepted terms of service', () => {
-    it('redirects the user to /terms', async () => {
-      setup({
-        termsOfServicePage: true,
-        internalUser: {
-          termsAgreement: false,
-        },
-      })
-
-      render(<BaseLayout>hello</BaseLayout>, {
-        wrapper: wrapper(),
-      })
-
-      await waitFor(() => expect(testLocation.pathname).toBe('/terms'))
-    })
-  })
-
   describe('user has not synced with providers', () => {
     it('redirects the user to /sync', async () => {
       setup({
diff --git a/src/pages/TermsOfService/TermsOfService.jsx b/src/pages/TermsOfService/TermsOfService.jsx
index 1265c1eddc..9ac09789e4 100644
--- a/src/pages/TermsOfService/TermsOfService.jsx
+++ b/src/pages/TermsOfService/TermsOfService.jsx
@@ -1,15 +1,11 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import gt from 'lodash/gt'
 import PropType from 'prop-types'
 import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
-import { Redirect } from 'react-router-dom'
 import { z } from 'zod'
 
 import umbrellaSvg from 'assets/svg/umbrella.svg'
 import { useInternalUser } from 'services/user'
-import { useFlags } from 'shared/featureFlags'
-import { loginProviderToShortName } from 'shared/utils/loginProviders'
 import A from 'ui/A'
 import Button from 'ui/Button'
 import TextInput from 'ui/TextInput'
@@ -75,11 +71,6 @@ export default function TermsOfService() {
     onError: (error) => setError('apiError', error),
   })
   const { data: currentUser, isLoading: userIsLoading } = useInternalUser()
-  const hasSynced = gt(currentUser?.owners?.length, 0)
-
-  const { termsOfServicePage } = useFlags({
-    termsOfServicePage: false,
-  })
 
   const onSubmit = (data) => {
     mutate({
@@ -103,18 +94,6 @@ export default function TermsOfService() {
 
   if (userIsLoading) return null
 
-  if (!termsOfServicePage || currentUser?.termsAgreement) {
-    if (hasSynced) {
-      const service = currentUser?.owners?.[0]?.service
-      const owner = currentUser?.owners?.[0]?.username
-      if (service) {
-        const provider = loginProviderToShortName(service)
-        return <Redirect to={`/${provider}/${owner}`} />
-      }
-    }
-    return <Redirect to="/sync" />
-  }
-
   return (
     <div className="mx-auto w-full max-w-[38rem] text-sm text-ds-gray-octonary">
       <div className="mt-14 flex gap-2">
diff --git a/src/pages/TermsOfService/TermsOfService.spec.jsx b/src/pages/TermsOfService/TermsOfService.spec.jsx
index c0f50f2594..ce1fcc55bc 100644
--- a/src/pages/TermsOfService/TermsOfService.spec.jsx
+++ b/src/pages/TermsOfService/TermsOfService.spec.jsx
@@ -422,7 +422,7 @@ describe('TermsOfService', () => {
       'case #10',
       {
         validationDescription:
-          'redirects to owner page if user has already synced a provider',
+          'redirects to main root if user has already synced a provider',
         isValidationError: true,
         internalUserData: {
           termsAgreement: true,
@@ -430,21 +430,7 @@ describe('TermsOfService', () => {
           owners: [{ service: 'github', username: 'chetney' }],
         },
       },
-      [expectRedirectTo, '/gh/chetney'],
-    ],
-    [
-      'case #11',
-      {
-        validationDescription:
-          'redirects to "/" if user has not synced provider',
-        isValidationError: true,
-        internalUserData: {
-          termsAgreement: true,
-          email: '',
-          owners: [],
-        },
-      },
-      [expectRedirectTo, '/sync'],
+      [expectRedirectTo, '/gh/codecov/cool-repo'],
     ],
   ])('form validation, %s', (_, initializeTest, ...steps) => {
     beforeEach(() => {

From 198ff06c9936a5701ade3fe8c114d80f8dea2498 Mon Sep 17 00:00:00 2001
From: Rula Abu Hasna <rula@codecov.io>
Date: Fri, 20 Oct 2023 17:39:43 +0200
Subject: [PATCH 11/11] it's fine it works with no providers

---
 src/layouts/BaseLayout/hooks/useUserAccessGate.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/layouts/BaseLayout/hooks/useUserAccessGate.js b/src/layouts/BaseLayout/hooks/useUserAccessGate.js
index eda9fda5c2..c2bd947465 100644
--- a/src/layouts/BaseLayout/hooks/useUserAccessGate.js
+++ b/src/layouts/BaseLayout/hooks/useUserAccessGate.js
@@ -73,12 +73,7 @@ const useUserAccessGate = () => {
 
   // the undefined provider check can be removed when the ToS has
   // been refactored to no longer use a provider
-  if (
-    termsOfServicePage &&
-    !isUndefined(provider) &&
-    !isGuest &&
-    !config.IS_SELF_HOSTED
-  ) {
+  if (termsOfServicePage && !isGuest && !config.IS_SELF_HOSTED) {
     showAgreeToTerms = internalUser?.termsAgreement === false
   }