fix: Hide tokenless banner for signed out user (#3677)

src/shared/GlobalTopBanners/TokenlessBanner/TokenlessBanner.test.tsx

@@ -5,6 +5,8 @@ import { setupServer } from 'msw/node'
 import { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
+import { Plans } from 'shared/utils/billing'
+
 import TokenlessBanner from './TokenlessBanner'
 
 const mocks = vi.hoisted(() => ({
@@ -15,6 +17,8 @@ vi.mock('shared/featureFlags', () => ({
   useFlags: mocks.useFlags,
 }))
 
+vi.mock('services/users')
+
 vi.mock('./TokenRequiredBanner', () => ({
   default: () => 'TokenRequiredBanner',
 }))
@@ -41,6 +45,50 @@ afterAll(() => {
   server.close()
 })
 
+const mockSignedInUser = {
+  me: {
+    owner: {
+      defaultOrgUsername: 'codecov',
+    },
+    email: '[email protected]',
+    privateAccess: true,
+    onboardingCompleted: true,
+    businessEmail: '[email protected]',
+    termsAgreement: true,
+    user: {
+      name: 'Jane Doe',
+      username: 'janedoe',
+      avatarUrl: 'http://127.0.0.1/avatar-url',
+      avatar: 'http://127.0.0.1/avatar-url',
+      student: false,
+      studentCreatedAt: null,
+      studentUpdatedAt: null,
+      customerIntent: 'PERSONAL',
+    },
+    trackingMetadata: {
+      service: 'github',
+      ownerid: 123,
+      serviceId: '123',
+      plan: Plans.USERS_BASIC,
+      staff: false,
+      hasYaml: false,
+      bot: null,
+      delinquent: null,
+      didTrial: null,
+      planProvider: null,
+      planUserCount: 1,
+      createdAt: 'timestamp',
+      updatedAt: 'timestamp',
+      profile: {
+        createdAt: 'timestamp',
+        otherGoal: null,
+        typeProjects: [],
+        goals: [],
+      },
+    },
+  },
+}
+
 const wrapper =
   (initialEntries = ['/gh/codecov']): React.FC<React.PropsWithChildren> =>
   ({ children }) => (
@@ -57,9 +105,11 @@ describe('TokenlessBanner', () => {
   function setup({
     tokenlessSection = true,
     uploadTokenRequired = false,
+    currentUser,
   }: {
     tokenlessSection?: boolean
     uploadTokenRequired?: boolean
+    currentUser?: any
   } = {}) {
     mocks.useFlags.mockReturnValue({ tokenlessSection })
 
@@ -74,12 +124,15 @@ describe('TokenlessBanner', () => {
             },
           },
         })
+      }),
+      graphql.query('CurrentUser', () => {
+        return HttpResponse.json({ data: currentUser })
       })
     )
   }
 
   it('renders nothing when tokenlessSection flag is false', () => {
-    setup({ tokenlessSection: false })
+    setup({ tokenlessSection: false, currentUser: mockSignedInUser })
     const { container } = render(<TokenlessBanner />, {
       wrapper: wrapper(['/gh/codecov']),
     })
@@ -95,7 +148,7 @@ describe('TokenlessBanner', () => {
   })
 
   it('renders TokenRequiredBanner when uploadTokenRequired is true', async () => {
-    setup({ uploadTokenRequired: true })
+    setup({ uploadTokenRequired: true, currentUser: mockSignedInUser })
     render(<TokenlessBanner />, { wrapper: wrapper(['/gh/codecov']) })
 
     await waitFor(() => {
@@ -105,7 +158,7 @@ describe('TokenlessBanner', () => {
   })
 
   it('renders TokenNotRequiredBanner when uploadTokenRequired is false', async () => {
-    setup({ uploadTokenRequired: false })
+    setup({ uploadTokenRequired: false, currentUser: mockSignedInUser })
     render(<TokenlessBanner />, { wrapper: wrapper(['/gh/codecov']) })
 
     await waitFor(() => {
@@ -115,7 +168,7 @@ describe('TokenlessBanner', () => {
   })
 
   it('renders nothing if coming from onboarding', async () => {
-    setup({ uploadTokenRequired: true })
+    setup({ uploadTokenRequired: true, currentUser: mockSignedInUser })
     render(<TokenlessBanner />, {
       wrapper: wrapper(['/gh/codecov?source=onboarding']),
     })
@@ -128,4 +181,10 @@ describe('TokenlessBanner', () => {
       ).not.toBeInTheDocument()
     })
   })
+
+  it('renders nothing when currentUser is not provided', () => {
+    setup({ uploadTokenRequired: false, currentUser: mockSignedInUser })
+    const { container } = render(<TokenlessBanner />, { wrapper: wrapper() })
+    expect(container).toBeEmptyDOMElement()
+  })
 })

src/shared/GlobalTopBanners/TokenlessBanner/TokenlessBanner.tsx

@@ -4,6 +4,7 @@ import { useParams } from 'react-router-dom'
 import { ONBOARDING_SOURCE } from 'pages/TermsOfService/constants'
 import { useLocationParams } from 'services/navigation'
 import { useUploadTokenRequired } from 'services/uploadTokenRequired'
+import { useUser } from 'services/user'
 import { useFlags } from 'shared/featureFlags'
 
 const TokenRequiredBanner = lazy(() => import('./TokenRequiredBanner'))
@@ -20,11 +21,19 @@ const TokenlessBanner: React.FC = () => {
   })
   const { provider, owner } = useParams<UseParams>()
   const { data } = useUploadTokenRequired({ provider, owner, enabled: !!owner })
+  const { data: currentUser } = useUser()
   const { params } = useLocationParams()
   // @ts-expect-error useLocationParams needs to be typed
   const cameFromOnboarding = params['source'] === ONBOARDING_SOURCE
 
-  if (!tokenlessSection || !owner || !data || cameFromOnboarding) return null
+  if (
+    !tokenlessSection ||
+    !owner ||
+    !data ||
+    !currentUser?.user ||
+    cameFromOnboarding
+  )
+    return null
 
   return data?.uploadTokenRequired ? (
     <TokenRequiredBanner />