fix: Add fixes and new rules to tokenless banner show logic (#3764)

Author: calvin-codecov

src/pages/AccountSettings/tabs/OktaAccess/queries/OktaConfigQueryOpts.test.tsx

@@ -93,7 +93,7 @@ describe('useOktaConfig', () => {
         consoleSpy.mockRestore()
       })
 
-      it('rejects with 404 status', async () => {
+      it('rejects with 400 status', async () => {
         setup({})
 
         const { result } = renderHook(

src/pages/AccountSettings/tabs/OrgUploadToken/TokenlessSection/constants.ts

@@ -0,0 +1,5 @@
+export const ADMIN_TOKEN_REQUIRED_BANNER = 'admin-token-required-banner'
+export const MEMBER_TOKEN_REQUIRED_BANNER = 'member-token-required-banner'
+export const ADMIN_TOKEN_NOT_REQUIRED_BANNER = 'admin-token-not-required-banner'
+export const MEMBER_TOKEN_NOT_REQUIRED_BANNER =
+  'member-token-not-required-banner'

src/pages/AccountSettings/tabs/OrgUploadToken/TokenlessSection/index.ts

@@ -1 +1,7 @@
 export { default } from './TokenlessSection'
+export {
+  ADMIN_TOKEN_REQUIRED_BANNER,
+  MEMBER_TOKEN_REQUIRED_BANNER,
+  ADMIN_TOKEN_NOT_REQUIRED_BANNER,
+  MEMBER_TOKEN_NOT_REQUIRED_BANNER,
+} from './constants'

src/pages/AccountSettings/tabs/OrgUploadToken/TokenlessSection/useSetUploadTokenRequired.tsx

@@ -6,6 +6,14 @@ import { useAddNotification } from 'services/toastNotification'
 import Api from 'shared/api'
 import { Provider } from 'shared/api/helpers'
 import { rejectNetworkError } from 'shared/api/rejectNetworkError'
+import { removeFromLocalStorage } from 'ui/TopBanner/TopBanner'
+
+import {
+  ADMIN_TOKEN_NOT_REQUIRED_BANNER,
+  ADMIN_TOKEN_REQUIRED_BANNER,
+  MEMBER_TOKEN_NOT_REQUIRED_BANNER,
+  MEMBER_TOKEN_REQUIRED_BANNER,
+} from './constants'
 
 const TOAST_DURATION = 10000
 
@@ -102,6 +110,13 @@ export const useSetUploadTokenRequired = ({
           disappearAfter: TOAST_DURATION,
         })
 
+        // we want to show the banners again when this setting is changed
+        // even if the user dismissed them in the past
+        removeFromLocalStorage(MEMBER_TOKEN_NOT_REQUIRED_BANNER)
+        removeFromLocalStorage(ADMIN_TOKEN_NOT_REQUIRED_BANNER)
+        removeFromLocalStorage(MEMBER_TOKEN_REQUIRED_BANNER)
+        removeFromLocalStorage(ADMIN_TOKEN_REQUIRED_BANNER)
+
         // only want to invalidate the query if the mutation was successful
         // otherwise we're just going to re-fetch the same data
         queryClient.invalidateQueries(['GetUploadTokenRequired'])

src/services/user/TokenlessQueryOpts.test.tsx

@@ -0,0 +1,112 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+  useQuery as useQueryV5,
+} from '@tanstack/react-queryV5'
+import { renderHook, waitFor } from '@testing-library/react'
+import { graphql, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import { TokenlessQueryOpts } from './TokenlessQueryOpts'
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+})
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
+
+const wrapper =
+  (initialEntries = '/gh'): React.FC<React.PropsWithChildren> =>
+  ({ children }) => (
+    <QueryClientProviderV5 client={queryClientV5}>
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[initialEntries]}>
+          <Route path="/:provider">{children}</Route>
+        </MemoryRouter>
+      </QueryClientProvider>
+    </QueryClientProviderV5>
+  )
+
+const server = setupServer()
+beforeAll(() => {
+  server.listen()
+})
+
+beforeEach(() => {
+  server.resetHandlers()
+  queryClientV5.clear()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+const mockCodecovOrg = {
+  hasActiveRepos: true,
+  hasPublicRepos: true,
+}
+
+describe('TokenlessQueryOpts', () => {
+  function setup({ invalidSchema = false }) {
+    server.use(
+      graphql.query('OwnerTokenlessData', () => {
+        if (invalidSchema) {
+          return HttpResponse.json({ data: {} })
+        }
+        return HttpResponse.json({ data: { owner: mockCodecovOrg } })
+      })
+    )
+  }
+
+  describe('when called and user is authenticated', () => {
+    it('returns the org', async () => {
+      setup({})
+      const { result } = renderHook(
+        () =>
+          useQueryV5(
+            TokenlessQueryOpts({ username: 'codecov', provider: 'gh' })
+          ),
+        { wrapper: wrapper() }
+      )
+
+      await waitFor(() => expect(result.current.data).toEqual(mockCodecovOrg))
+    })
+  })
+
+  describe('invalid schema', () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    afterAll(() => {
+      consoleSpy.mockRestore()
+    })
+
+    it('rejects with 400 status', async () => {
+      setup({ invalidSchema: true })
+
+      const { result } = renderHook(
+        () =>
+          useQueryV5(
+            TokenlessQueryOpts({
+              username: 'codecov',
+              provider: 'gh',
+            })
+          ),
+        { wrapper: wrapper() }
+      )
+      await waitFor(() => result.current.isLoading)
+      await waitFor(() => !result.current.isLoading)
+
+      await waitFor(() =>
+        expect(result.current.error).toEqual(
+          expect.objectContaining({
+            dev: 'TokenlessQueryOpts - Parsing Error',
+            status: 400,
+          })
+        )
+      )
+    })
+  })
+})

src/services/user/TokenlessQueryOpts.ts

@@ -0,0 +1,67 @@
+import { queryOptions as queryOptionsV5 } from '@tanstack/react-queryV5'
+import { z } from 'zod'
+
+import Api from 'shared/api'
+import { Provider } from 'shared/api/helpers'
+import { rejectNetworkError } from 'shared/api/rejectNetworkError'
+
+const OwnerSchema = z.object({
+  hasActiveRepos: z.boolean(),
+  hasPublicRepos: z.boolean(),
+})
+
+export type Owner = z.infer<typeof OwnerSchema>
+
+const RequestSchema = z.object({
+  owner: OwnerSchema.nullable(),
+})
+
+interface TokenlessQueryArgs {
+  username?: string
+  provider: Provider
+  opts?: {
+    suspense?: boolean
+    enabled?: boolean
+  }
+}
+
+const query = `query OwnerTokenlessData($username: String!) {
+  owner(username: $username) {
+    hasActiveRepos
+    hasPublicRepos
+  }
+}
+`
+
+export function TokenlessQueryOpts({
+  username,
+  provider,
+  opts = { enabled: username !== undefined },
+}: TokenlessQueryArgs) {
+  const variables = { username }
+  return queryOptionsV5({
+    queryKey: ['OwnerTokenlessData', variables, provider],
+    queryFn: ({ signal }) =>
+      Api.graphql({
+        provider,
+        query,
+        variables,
+        signal,
+      }).then((res) => {
+        const parsedRes = RequestSchema.safeParse(res?.data)
+
+        if (!parsedRes.success) {
+          return rejectNetworkError({
+            errorName: 'Parsing Error',
+            errorDetails: {
+              callingFn: 'TokenlessQueryOpts',
+              error: parsedRes.error,
+            },
+          })
+        }
+
+        return parsedRes?.data?.owner ?? null
+      }),
+    ...opts,
+  })
+}

src/shared/GlobalTopBanners/TokenlessBanner/TokenNotRequiredBanner/TokenNotRequiredBanner.tsx

@@ -1,6 +1,10 @@
 import React from 'react'
 import { useParams } from 'react-router'
 
+import {
+  ADMIN_TOKEN_NOT_REQUIRED_BANNER,
+  MEMBER_TOKEN_NOT_REQUIRED_BANNER,
+} from 'pages/AccountSettings/tabs/OrgUploadToken/TokenlessSection'
 import { useUploadTokenRequired } from 'services/uploadTokenRequired'
 import A from 'ui/A'
 import Icon from 'ui/Icon'
@@ -13,7 +17,7 @@ interface UseParams {
 
 const AdminTokenNotRequiredBanner: React.FC = () => {
   return (
-    <TopBanner localStorageKey="admin-token-not-required-banner">
+    <TopBanner localStorageKey={ADMIN_TOKEN_NOT_REQUIRED_BANNER}>
       <TopBanner.Start>
         <p className="items-center gap-1 md:flex">
           <span className="flex items-center gap-1 font-semibold">
@@ -41,7 +45,7 @@ const AdminTokenNotRequiredBanner: React.FC = () => {
 
 const MemberTokenNotRequiredBanner: React.FC = () => {
   return (
-    <TopBanner localStorageKey="member-token-not-required-banner">
+    <TopBanner localStorageKey={MEMBER_TOKEN_NOT_REQUIRED_BANNER}>
       <TopBanner.Start>
         <p className="items-center gap-1 md:flex">
           <span className="flex items-center gap-1 font-semibold">

src/shared/GlobalTopBanners/TokenlessBanner/TokenRequiredBanner/TokenRequiredBanner.tsx

@@ -1,6 +1,10 @@
 import { useState } from 'react'
 import { useParams } from 'react-router'
 
+import {
+  ADMIN_TOKEN_REQUIRED_BANNER,
+  MEMBER_TOKEN_REQUIRED_BANNER,
+} from 'pages/AccountSettings/tabs/OrgUploadToken/TokenlessSection'
 import { useUploadTokenRequired } from 'services/uploadTokenRequired'
 import A from 'ui/A'
 import Button from 'ui/Button'
@@ -79,7 +83,7 @@ const AdminTokenRequiredBanner: React.FC = () => {
   const orgUploadToken = data?.orgUploadToken
 
   return (
-    <TopBanner localStorageKey="admin-token-required-banner">
+    <TopBanner localStorageKey={ADMIN_TOKEN_REQUIRED_BANNER}>
       <TopBanner.Start>
         <p className="items-center gap-1 md:flex">
           <span className="flex items-center gap-1 font-semibold">
@@ -121,7 +125,7 @@ const MemberTokenRequiredBanner: React.FC = () => {
   const orgUploadToken = data?.orgUploadToken
 
   return (
-    <TopBanner localStorageKey="member-token-required-banner">
+    <TopBanner localStorageKey={MEMBER_TOKEN_REQUIRED_BANNER}>
       <TopBanner.Start>
         <p className="items-center gap-1 md:flex">
           <span className="flex items-center gap-1 font-semibold">