feat: Create Team Plan Table for the Files Changed Table on the Commi…

…t 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

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()
+    })
+  })
+})

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

src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangeTable/FilesChangedTable.jsx → 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