fix: Move the banner above summary, and fix the use of team hook (#2859)

src/pages/RepoPage/BundlesTab/BundleOnboarding/BundleOnboarding.spec.tsx

@@ -32,6 +32,7 @@ const mockGetRepo = (hasUploadToken: boolean, isActive: boolean) => ({
       activated: false,
       oldestCommitAt: '',
       active: isActive,
+      isFirstPullRequest: false,
     },
   },
 })

src/pages/RepoPage/BundlesTab/BundleOnboarding/RollupOnboarding/RollupOnboarding.spec.tsx

@@ -23,6 +23,7 @@ const mockGetRepo = {
       activated: false,
       oldestCommitAt: '',
       active: true,
+      isFirstPullRequest: false,
     },
   },
 }

src/pages/RepoPage/BundlesTab/BundleOnboarding/ViteOnboarding/ViteOnboarding.spec.tsx

@@ -23,6 +23,7 @@ const mockGetRepo = {
       activated: false,
       oldestCommitAt: '',
       active: true,
+      isFirstPullRequest: false,
     },
   },
 }

src/pages/RepoPage/BundlesTab/BundleOnboarding/WebpackOnboarding/WebpackOnboarding.spec.tsx

@@ -23,6 +23,7 @@ const mockGetRepo = {
       activated: false,
       oldestCommitAt: '',
       active: true,
+      isFirstPullRequest: false,
     },
   },
 }

src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.spec.tsx

@@ -34,6 +34,7 @@ const mockGetRepo = {
       activated: true,
       oldestCommitAt: '2020-01-01T12:00:00',
       active: true,
+      isFirstPullRequest: false,
     },
   },
 }

src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/hooks/useRepoComponentsTable.spec.tsx

@@ -71,6 +71,7 @@ const mockGetRepo = ({
       activated: isRepoActivated,
       oldestCommitAt: '2022-10-10T11:59:59',
       active: isRepoActive,
+      isFirstPullRequest: false,
     },
   },
 })

src/pages/RepoPage/CoverageOnboarding/CircleCI/CircleCI.spec.tsx

@@ -28,6 +28,7 @@ const mockGetRepo = {
       activated: false,
       oldestCommitAt: '',
       active: true,
+      isFirstPullRequest: false,
     },
   },
 }

src/pages/RepoPage/CoverageOnboarding/GitHubActions/GitHubActions.spec.tsx

@@ -28,6 +28,7 @@ const mockGetRepo = {
       activated: false,
       oldestCommitAt: '',
       active: true,
+      isFirstPullRequest: false,
     },
   },
 }

src/pages/RepoPage/CoverageOnboarding/NewRepoTab.spec.tsx

@@ -46,6 +46,7 @@ const mockGetRepo = (
       activated: false,
       oldestCommitAt: '',
       active: hasCommits,
+      isFirstPullRequest: false,
     },
   },
 })

src/pages/RepoPage/CoverageOnboarding/OtherCI/OtherCI.spec.tsx

@@ -28,6 +28,7 @@ const mockGetRepo = {
       activated: false,
       oldestCommitAt: '',
       active: true,
+      isFirstPullRequest: false,
     },
   },
 }

src/pages/RepoPage/CoverageTab/CoverageTab.jsx

@@ -4,11 +4,12 @@ import { Switch, useParams } from 'react-router-dom'
 import { SentryRoute } from 'sentry'
 
 import SilentNetworkErrorWrapper from 'layouts/shared/SilentNetworkErrorWrapper'
-import { useRepoSettingsTeam } from 'services/repo'
+import { useRepo } from 'services/repo'
 import { TierNames, useTier } from 'services/tier'
 import { useFlags } from 'shared/featureFlags'
 import Spinner from 'ui/Spinner'
 
+import FirstPullRequestBanner from './FirstPullRequestBanner'
 import Summary from './Summary'
 import SummaryTeamPlan from './SummaryTeamPlan'
 import ToggleElement from './ToggleElement'
@@ -25,11 +26,16 @@ const Loader = () => (
 )
 
 function CoverageTab() {
-  const { data: repoData } = useRepoSettingsTeam()
+  const { provider, owner, repo } = useParams()
+  const { data: repoData } = useRepo({
+    provider,
+    owner,
+    repo,
+  })
+
   const { multipleTiers } = useFlags({
     multipleTiers: false,
   })
-  const { provider, owner } = useParams()
   const { data: tierName } = useTier({ provider, owner })
 
   const showTeamSummary =
@@ -39,6 +45,9 @@ function CoverageTab() {
 
   return (
     <div className="mx-4 flex flex-col gap-2 divide-y border-solid border-ds-gray-secondary sm:mx-0">
+      {repoData?.repository?.isFirstPullRequest ? (
+        <FirstPullRequestBanner />
+      ) : null}
       {showTeamSummary ? <SummaryTeamPlan /> : <Summary />}
       {!showTeamSummary && (
         <SentryRoute

src/pages/RepoPage/CoverageTab/CoverageTab.spec.jsx

@@ -23,23 +23,6 @@ const queryClient = new QueryClient({
 
 const server = setupServer()
 
-const mockRepoSettings = (isPrivate = false) => ({
-  owner: {
-    repository: {
-      __typename: 'Repository',
-      activated: true,
-      defaultBranch: 'master',
-      private: isPrivate,
-      uploadToken: 'token',
-      graphToken: 'token',
-      yaml: 'yaml',
-      bot: {
-        username: 'test',
-      },
-    },
-  },
-})
-
 const wrapper =
   (initialEntries = ['/gh/codecov/cool-repo/tree/main']) =>
   ({ children }) =>
@@ -53,13 +36,24 @@ const wrapper =
       </QueryClientProvider>
     )
 
-const mockRepo = {
+const mockRepo = (isPrivate = false, isFirstPullRequest = false) => ({
   owner: {
+    isCurrentUserPartOfOrg: true,
+    isAdmin: null,
+    isCurrentUserActivated: null,
     repository: {
+      __typename: 'Repository',
+      private: isPrivate,
+      uploadToken: '9e6a6189-20f1-482d-ab62-ecfaa2629295',
       defaultBranch: 'main',
+      yaml: '',
+      activated: false,
+      oldestCommitAt: '',
+      active: true,
+      isFirstPullRequest,
     },
   },
-}
+})
 
 const repoConfigMock = {
   owner: {
@@ -208,10 +202,14 @@ afterAll(() => {
 
 describe('Coverage Tab', () => {
   function setup(
-    { repoData = mockRepo, isPrivate = false, tierValue = TierNames.PRO } = {
-      repoData: mockRepo,
+    {
+      isPrivate = false,
+      tierValue = TierNames.PRO,
+      isFirstPullRequest = false,
+    } = {
       isPrivate: false,
       tierValue: TierNames.PRO,
+      isFirstPullRequest: false,
     }
   ) {
     useFlags.mockReturnValue({
@@ -220,7 +218,7 @@ describe('Coverage Tab', () => {
 
     server.use(
       graphql.query('GetRepo', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data(repoData))
+        res(ctx.status(200), ctx.data(mockRepo(isPrivate, isFirstPullRequest)))
       ),
       graphql.query('GetBranches', (req, res, ctx) =>
         res(ctx.status(200), ctx.data(branchesMock))
@@ -268,10 +266,7 @@ describe('Coverage Tab', () => {
         (req, res, ctx) => {
           return res(ctx.status(200), ctx.json({ data: {} }))
         }
-      ),
-      graphql.query('GetRepoSettingsTeam', (req, res, ctx) => {
-        return res(ctx.status(200), ctx.data(mockRepoSettings(isPrivate)))
-      })
+      )
     )
   }
 
@@ -328,4 +323,15 @@ describe('Coverage Tab', () => {
       expect(coverageChart).not.toBeInTheDocument()
     })
   })
+
+  it('renders first pull request banner', async () => {
+    setup({ isFirstPullRequest: true })
+
+    render(<CoverageTab />, { wrapper: wrapper(['/gh/test-org/repoName']) })
+
+    const firstPullRequestBanner = await screen.findByText(
+      /Once merged to your default branch, Codecov will show your report results on this dashboard./
+    )
+    expect(firstPullRequestBanner).toBeInTheDocument()
+  })
 })

src/pages/RepoPage/CoverageTab/FirstPullRequestBanner/FirstPullRequestBanner.spec.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import FirstPullRequestBanner from './FirstPullRequestBanner'
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <MemoryRouter initialEntries={['/gh/codecov/gazebo']}>
+    <Route path="/:provider/:owner/:repo">{children}</Route>
+  </MemoryRouter>
+)
+
+describe('FirstPullRequestBanner', () => {
+  it('renders content', () => {
+    render(<FirstPullRequestBanner />, { wrapper })
+    const content = screen.getByText(
+      'Once merged to your default branch, Codecov will show your report results on this dashboard.'
+    )
+    expect(content).toBeInTheDocument()
+  })
+
+  it('renders the correct link', () => {
+    render(<FirstPullRequestBanner />, { wrapper })
+    const link = screen.getByRole('link', { name: 'edit default branch' })
+    expect(link).toHaveAttribute('href', '/gh/codecov/gazebo/settings')
+  })
+})

src/pages/RepoPage/CoverageTab/FirstPullRequestBanner/FirstPullRequestBanner.tsx

@@ -0,0 +1,27 @@
+import A from 'ui/A'
+import Banner from 'ui/Banner'
+import BannerContent from 'ui/Banner/BannerContent'
+
+const FirstPullRequestBanner = () => {
+  return (
+    <Banner>
+      <BannerContent>
+        <p>
+          Once merged to your default branch, Codecov will show your report
+          results on this dashboard.{' '}
+          <A
+            to={{ pageName: 'settings' }}
+            hook={'repo-to-edit-branch'}
+            variant="semibold"
+            isExternal={false}
+            data-testid="settings-page"
+          >
+            edit default branch
+          </A>
+        </p>
+      </BannerContent>
+    </Banner>
+  )
+}
+
+export default FirstPullRequestBanner

src/pages/RepoPage/CoverageTab/FirstPullRequestBanner/index.ts

@@ -0,0 +1 @@
+export { default } from './FirstPullRequestBanner'

src/pages/RepoPage/CoverageTab/subroute/FileExplorer/CodeTreeTable/CodeTreeTable.spec.tsx

@@ -356,22 +356,6 @@ describe('CodeTreeTable', () => {
       })
     })
 
-    describe('there is no results found', () => {
-      it('displays error fetching data message', async () => {
-        setup({ noFiles: true })
-        render(<CodeTreeTable />, { wrapper: wrapper() })
-
-        const message = await screen.findByText(
-          'Once merged to your default branch, Codecov will show your report results on this dashboard.'
-        )
-        expect(message).toBeInTheDocument()
-
-        const link = await screen.findByTestId('settings-page')
-        expect(link).toBeInTheDocument()
-        expect(link).toHaveAttribute('href', '/gh/codecov/cool-repo/settings')
-      })
-    })
-
     describe('when head commit has no reports', () => {
       it('renders no report uploaded message', async () => {
         setup({ noHeadReport: true })

src/pages/RepoPage/CoverageTab/subroute/FileExplorer/FileListTable/FileListTable.spec.tsx

@@ -290,24 +290,6 @@ describe('FileListTable', () => {
       })
     })
 
-    describe('there is no results found', () => {
-      it('displays error fetching data message', async () => {
-        setup({ noFiles: true })
-        render(<FileListTable />, {
-          wrapper: wrapper('/gh/codecov/cool-repo/tree/main/'),
-        })
-
-        const message = await screen.findByText(
-          'Once merged to your default branch, Codecov will show your report results on this dashboard.'
-        )
-        expect(message).toBeInTheDocument()
-
-        const link = await screen.findByTestId('settings-page')
-        expect(link).toBeInTheDocument()
-        expect(link).toHaveAttribute('href', '/gh/codecov/cool-repo/settings')
-      })
-    })
-
     describe('when head commit has no reports', () => {
       it('renders no report uploaded message', async () => {
         setup({ noHeadReport: true })

src/pages/RepoPage/CoverageTab/subroute/FileExplorer/shared/RepoContentsResult.tsx

@@ -37,8 +37,8 @@ const RepoContentsResult: React.FC<RepoContentsProps> = ({
         head commit
       `
   } else {
-    copy = (
-      <p>
+    return (
+      <p className="mt-4">
         Once merged to your default branch, Codecov will show your report
         results on this dashboard.{' '}
         <A

src/pages/RepoPage/DeactivatedRepo/DeactivatedRepo.spec.jsx

@@ -52,6 +52,7 @@ describe('DeactivatedRepo', () => {
                 activated: false,
                 oldestCommitAt: '',
                 active: false,
+                isFirstPullRequest: false,
               },
             },
           })

src/pages/RepoPage/FlagsTab/subroute/FlagsTable/FlagsTable.spec.tsx

@@ -41,6 +41,7 @@ const mockGetRepo = ({ isAdmin = true }) => ({
       activated: true,
       oldestCommitAt: '2020-01-01T12:00:00',
       active: true,
+      isFirstPullRequest: false,
     },
   },
 })

src/pages/RepoPage/RepoPage.spec.tsx

@@ -52,6 +52,7 @@ const mockGetRepo = ({
       activated: isRepoActivated,
       oldestCommitAt: '',
       active: isRepoActive,
+      isFirstPullRequest: false,
     },
   },
 })