Add patch section commit detail page team tier

src/pages/CommitDetailPage/Header/Header.spec.tsx

@@ -1,11 +1,18 @@
 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 Header from './Header'
 
 jest.mock('./HeaderDefault', () => () => 'Default Header')
+jest.mock('./HeaderTeam', () => () => 'Team Header')
+jest.mock('shared/featureFlags')
+const mockedUseFlags = useFlags as jest.Mock<{ multipleTiers: boolean }>
 
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
@@ -26,13 +33,61 @@ afterEach(() => {
   server.resetHandlers()
 })
 afterAll(() => server.close())
+interface SetupArgs {
+  multipleTiers: boolean
+}
 
 describe('Header', () => {
-  describe('when rendered with valid values', () => {
-    it('renders the default header', async () => {
+  function setup({ multipleTiers = false }: SetupArgs) {
+    mockedUseFlags.mockReturnValue({
+      multipleTiers,
+    })
+
+    server.use(
+      graphql.query('OwnerTier', (req, res, ctx) => {
+        if (multipleTiers) {
+          return res(
+            ctx.status(200),
+            ctx.data({ owner: { plan: { tierName: TierNames.TEAM } } })
+          )
+        }
+        return res(
+          ctx.status(200),
+          ctx.data({ owner: { plan: { tierName: TierNames.PRO } } })
+        )
+      })
+    )
+  }
+
+  describe('when rendered and customer is not team tier', () => {
+    beforeEach(() => {
+      setup({ multipleTiers: false })
+    })
+
+    it('renders the default header component', async () => {
       render(<Header />, { wrapper })
+
       const defaultHeader = await screen.findByText(/Default Header/)
       expect(defaultHeader).toBeInTheDocument()
+
+      const teamHeader = screen.queryByText(/Team Header/)
+      expect(teamHeader).not.toBeInTheDocument()
+    })
+  })
+
+  describe('when rendered and customer has team tier', () => {
+    beforeEach(() => {
+      setup({ multipleTiers: true })
+    })
+
+    it('renders the team header component', async () => {
+      render(<Header />, { wrapper })
+
+      const teamHeader = await screen.findByText(/Team Header/)
+      expect(teamHeader).toBeInTheDocument()
+
+      const defaultHeader = screen.queryByText(/Default Header/)
+      expect(defaultHeader).not.toBeInTheDocument()
     })
   })
 })

src/pages/CommitDetailPage/Header/Header.tsx

@@ -1,6 +1,27 @@
+import { useParams } from 'react-router-dom'
+
+import { TierNames, useTier } from 'services/tier'
+import { useFlags } from 'shared/featureFlags'
+
 import HeaderDefault from './HeaderDefault'
+import HeaderTeam from './HeaderTeam'
+
+interface URLParams {
+  provider: string
+  owner: string
+}
 
 function Header() {
+  const { provider, owner } = useParams<URLParams>()
+  const { data: tierData } = useTier({ provider, owner })
+  const { multipleTiers } = useFlags({
+    multipleTiers: false,
+  })
+
+  if (multipleTiers && tierData === TierNames.TEAM) {
+    return <HeaderTeam />
+  }
+
   return <HeaderDefault />
 }
 

src/pages/CommitDetailPage/Header/HeaderTeam/HeaderTeam.jsx

@@ -0,0 +1,103 @@
+import { useParams } from 'react-router-dom'
+
+import { getProviderCommitURL, getProviderPullURL } from 'shared/utils'
+import { formatTimeToNow } from 'shared/utils/dates'
+import A from 'ui/A'
+import CIStatusLabel from 'ui/CIStatus'
+import Icon from 'ui/Icon'
+import TotalsNumber from 'ui/TotalsNumber'
+import TruncatedMessage from 'ui/TruncatedMessage/TruncatedMessage'
+
+import { useCommitHeaderDataTeam } from './hooks'
+
+import PullLabel from '../PullLabel'
+
+function HeaderTeam() {
+  const { provider, owner, repo, commit: commitSha } = useParams()
+  const shortSHA = commitSha?.slice(0, 7)
+
+  const { data: headerData } = useCommitHeaderDataTeam({
+    provider,
+    owner,
+    repo,
+    commitId: commitSha,
+  })
+  const commit = headerData?.commit
+
+  const providerPullUrl = getProviderPullURL({
+    provider,
+    owner,
+    repo,
+    pullId: commit?.pullId,
+  })
+
+  const providerCommitUrl = getProviderCommitURL({
+    provider,
+    owner,
+    repo,
+    commit: commitSha,
+  })
+
+  return (
+    <div className="flex flex-col justify-between gap-2 border-b border-ds-gray-secondary pb-2 text-xs md:flex-row">
+      <div className="flex flex-row flex-wrap items-center gap-6 divide-x divide-ds-gray-secondary">
+        <div>
+          {commit?.message && (
+            <TruncatedMessage>{commit?.message}</TruncatedMessage>
+          )}
+          <div className="flex items-center gap-2 text-ds-gray-quinary">
+            <div>
+              {commit?.createdAt && (
+                <span className="font-light">
+                  {formatTimeToNow(commit?.createdAt)}
+                </span>
+              )}{' '}
+              {commit?.author?.username && (
+                <A
+                  to={{
+                    pageName: 'owner',
+                    options: { owner: commit?.author?.username },
+                  }}
+                >
+                  {commit?.author?.username}
+                </A>
+              )}{' '}
+              <span className="font-light">authored commit</span>{' '}
+              <A
+                variant="code"
+                href={providerCommitUrl}
+                hook="provider commit url"
+                isExternal={true}
+              >
+                {shortSHA}
+              </A>
+            </div>
+            <CIStatusLabel ciPassed={commit?.ciPassed} />
+            <span className="flex flex-none items-center">
+              <Icon name="branch" variant="developer" size="sm" />
+              {commit?.branchName}
+            </span>
+            <PullLabel
+              pullId={commit?.pullId}
+              provider={provider}
+              providerPullUrl={providerPullUrl}
+            />
+          </div>
+        </div>
+        <div className="flex flex-col justify-center gap-2 px-6">
+          <h4 className="gap-2 font-mono text-xs text-ds-gray-quinary">
+            Patch Coverage
+          </h4>
+          <TotalsNumber
+            value={commit?.compareWithParent?.patchTotals?.percentCovered}
+            plain
+            large
+          />
+        </div>
+      </div>
+      <hr />
+    </div>
+  )
+}
+
+export default HeaderTeam

src/pages/CommitDetailPage/Header/HeaderTeam/HeaderTeam.spec.jsx

@@ -0,0 +1,146 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen, waitFor } from '@testing-library/react'
+import { graphql } from 'msw'
+import { setupServer } from 'msw/node'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import { useTruncation } from 'ui/TruncatedMessage/hooks'
+
+import HeaderTeam from './HeaderTeam'
+
+jest.mock('ui/TruncatedMessage/hooks')
+
+const mockData = (pullId = null) => ({
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      commit: {
+        author: {
+          username: 'cool-user',
+        },
+        branchName: 'cool-branch',
+        ciPassed: true,
+        commitid: 'id-1',
+        createdAt: '2022-01-01T12:59:59',
+        message: 'Test Commit',
+        pullId,
+        compareWithParent: {
+          __typename: 'Comparison',
+          patchTotals: {
+            percentCovered: 35.45,
+          },
+        },
+      },
+    },
+  },
+})
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+})
+const server = setupServer()
+
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    <MemoryRouter initialEntries={['/gh/codecov/test-repo/commit/id-1']}>
+      <Route path="/:provider/:owner/:repo/commit/:commit">{children}</Route>
+    </MemoryRouter>
+  </QueryClientProvider>
+)
+
+beforeAll(() => server.listen())
+afterEach(() => {
+  queryClient.clear()
+  server.resetHandlers()
+})
+afterAll(() => server.close())
+
+describe('HeaderTeam', () => {
+  function setup(pullId = 1234) {
+    useTruncation.mockImplementation(() => ({
+      ref: () => {},
+      canTruncate: false,
+    }))
+
+    server.use(
+      graphql.query('CommitPageHeaderDataTeam', (req, res, ctx) =>
+        res(ctx.status(200), ctx.data(mockData(pullId)))
+      )
+    )
+  }
+
+  describe('When rendered with valid values', () => {
+    beforeEach(() => {
+      setup()
+    })
+
+    it('renders commit message', async () => {
+      render(<HeaderTeam />, { wrapper })
+
+      const message = await screen.findByText('Test Commit')
+      expect(message).toBeInTheDocument()
+    })
+
+    it('The summary header', async () => {
+      render(<HeaderTeam />, { wrapper })
+
+      const authored = await screen.findByText(/authored commit/)
+      expect(authored).toBeInTheDocument()
+    })
+
+    it('renders commit id and link', async () => {
+      render(<HeaderTeam />, { wrapper })
+
+      const commitLink = await screen.findByRole('link', {
+        name: /id-1/i,
+      })
+      expect(commitLink).toBeInTheDocument()
+      expect(commitLink.href).toBe(
+        'https://github.com/codecov/test-repo/commit/id-1'
+      )
+    })
+
+    it('renders CI Passed', async () => {
+      render(<HeaderTeam />, { wrapper })
+
+      const ciPassed = await screen.findByText('CI Passed')
+      expect(ciPassed).toBeInTheDocument()
+    })
+
+    it('renders branch name', async () => {
+      render(<HeaderTeam />, { wrapper })
+
+      const branchName = await screen.findByText('cool-branch')
+      expect(branchName).toBeInTheDocument()
+    })
+
+    it('renders the patch coverage', async () => {
+      render(<HeaderTeam />, { wrapper })
+
+      await waitFor(() => queryClient.isFetching)
+      await waitFor(() => !queryClient.isFetching)
+
+      const patchCoverage = await screen.findByText(/Patch Coverage/)
+      expect(patchCoverage).toBeInTheDocument()
+
+      const patchCoverageValue = await screen.findByText(/35.45/)
+      expect(patchCoverageValue).toBeInTheDocument()
+    })
+  })
+
+  describe('renders with patch', () => {
+    beforeEach(() => {
+      setup(null)
+    })
+
+    it('does not render the pull label', async () => {
+      render(<HeaderTeam />, { wrapper })
+
+      await waitFor(() => queryClient.isFetching)
+      await waitFor(() => !queryClient.isFetching)
+
+      const pullIcon = screen.queryByText(/pull-request-open.svg/)
+      expect(pullIcon).not.toBeInTheDocument()
+    })
+  })
+})

src/pages/CommitDetailPage/Header/HeaderTeam/hooks/useCommitHeaderDataTeam.spec.tsx

@@ -22,7 +22,7 @@ const mockRepository = {
         compareWithParent: {
           __typename: 'Comparison',
           patchTotals: {
-            coverage: 100,
+            percentCovered: 100,
           },
         },
       },
@@ -141,7 +141,7 @@ describe('useCommitHeaderDataTeam', () => {
               compareWithParent: {
                 __typename: 'Comparison',
                 patchTotals: {
-                  coverage: 100,
+                  percentCovered: 100,
                 },
               },
             },