fix: Only show activation banner for non activated users (#2831)

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

@@ -16,7 +16,6 @@ jest.mock('./GitHubActions', () => () => 'GitHubActions')
 jest.mock('./OtherCI', () => () => 'OtherCI')
 jest.mock('./ActivationBanner', () => () => 'ActivationBanner')
 
-
 const mockCurrentUser = {
   me: {
     trackingMetadata: {
@@ -25,11 +24,15 @@ const mockCurrentUser = {
   },
 }
 
-const mockGetRepo = (noUploadToken = false, hasCommits = false) => ({
+const mockGetRepo = (
+  noUploadToken = false,
+  hasCommits = false,
+  isCurrentUserActivated = false
+) => ({
   owner: {
     isCurrentUserPartOfOrg: true,
     isAdmin: null,
-    isCurrentUserActivated: null,
+    isCurrentUserActivated,
     repository: {
       __typename: 'Repository',
       private: false,
@@ -95,10 +98,15 @@ afterAll(() => server.close())
 interface SetupArgs {
   hasCommits?: boolean
   noUploadToken?: boolean
+  isCurrentUserActivated?: boolean
 }
 
 describe('NewRepoTab', () => {
-  function setup({ hasCommits = false, noUploadToken = false }: SetupArgs) {
+  function setup({
+    hasCommits = false,
+    noUploadToken = false,
+    isCurrentUserActivated = false,
+  }: SetupArgs) {
     const user = userEvent.setup()
     const hardRedirect = jest.fn()
     mockedUseRedirect.mockImplementation((data) => ({
@@ -107,7 +115,12 @@ describe('NewRepoTab', () => {
 
     server.use(
       graphql.query('GetRepo', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data(mockGetRepo(noUploadToken, hasCommits)))
+        res(
+          ctx.status(200),
+          ctx.data(
+            mockGetRepo(noUploadToken, hasCommits, isCurrentUserActivated)
+          )
+        )
       ),
       graphql.query('CurrentUser', (req, res, ctx) =>
         res(ctx.status(200), ctx.data(mockCurrentUser))
@@ -267,4 +280,19 @@ describe('NewRepoTab', () => {
       })
     })
   })
+
+  describe('user is activated', () => {
+    it('does not render ActivationBanner', async () => {
+      setup({
+        isCurrentUserActivated: true,
+      })
+      render(<NewRepoTab />, { wrapper: wrapper() })
+
+      await waitFor(() => queryClient.isFetching)
+      await waitFor(() => !queryClient.isFetching)
+
+      const banner = screen.queryByText('ActivationBanner')
+      expect(banner).not.toBeInTheDocument()
+    })
+  })
 })

src/pages/RepoPage/CoverageOnboarding/NewRepoTab.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import { lazy, Suspense } from 'react'
 import { Switch, useParams } from 'react-router-dom'
 
@@ -24,7 +23,13 @@ const Loader = () => (
   </div>
 )
 
-function Content({ provider }: { provider: string }) {
+function Content({
+  provider,
+  isCurrentUserActivated,
+}: {
+  provider: string
+  isCurrentUserActivated: boolean
+}) {
   if (providerToName(provider) !== 'Github') {
     return (
       <div className="mt-6">
@@ -44,7 +49,7 @@ function Content({ provider }: { provider: string }) {
           { pageName: 'newOtherCI' },
         ]}
       />
-      <ActivationBanner />
+      {!isCurrentUserActivated ? <ActivationBanner /> : null}
       <div className="mt-6">
         <Switch>
           <SentryRoute path="/:provider/:owner/:repo/new" exact>
@@ -64,10 +69,6 @@ function Content({ provider }: { provider: string }) {
   )
 }
 
-Content.propTypes = {
-  provider: PropTypes.string,
-}
-
 interface URLParams {
   provider: string
   owner: string
@@ -90,7 +91,10 @@ function NewRepoTab() {
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-4 pt-4 lg:w-3/5">
         <IntroBlurb />
-        <Content provider={provider} />
+        <Content
+          provider={provider}
+          isCurrentUserActivated={data?.isCurrentUserActivated ?? false}
+        />
       </div>
     </div>
   )