Merge branch 'main' into spalmurray/repo-onboarding-card-overhaul

codecov · May 1, 2024 · 81cdb55 · 81cdb55
2 parents 2a56449 + 44246b9
commit 81cdb55
Show file tree

Hide file tree

Showing 16 changed files with 224 additions and 96 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "@hookform/resolvers": "^2.8.5",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-radio-group": "^1.1.3",
     "@sentry/react": "^8.0.0-beta.4",
     "@stripe/react-stripe-js": "^1.7.2",
     "@stripe/stripe-js": "^1.52.1",

diff --git a/src/layouts/Header/AdminLink.spec.jsx → src/layouts/Header/AdminLink.spec.tsx b/src/layouts/Header/AdminLink.spec.jsx → src/layouts/Header/AdminLink.spec.tsx
@@ -6,6 +6,23 @@ import { MemoryRouter, Route } from 'react-router-dom'
 
 import AdminLink from './AdminLink'
 
+const wrapper: ({
+  initialEntries,
+}: {
+  initialEntries?: string
+}) => React.FC<React.PropsWithChildren> =
+  ({ initialEntries = '/gh' }) =>
+  ({ children }) =>
+    (
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[initialEntries]}>
+          <Route path="/:provider" exact>
+            {children}
+          </Route>
+        </MemoryRouter>
+      </QueryClientProvider>
+    )
+
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
@@ -19,24 +36,12 @@ beforeEach(() => {
 afterAll(() => server.close())
 
 describe('AdminLink', () => {
-  let renderData
-
   function setup(data = {}) {
     server.use(
       rest.get('/internal/users/current', (req, res, ctx) =>
         res(ctx.status(200), ctx.json(data))
       )
     )
-
-    renderData = render(
-      <MemoryRouter initialEntries={['/gh']}>
-        <Route path="/:provider">
-          <QueryClientProvider client={queryClient}>
-            <AdminLink />
-          </QueryClientProvider>
-        </Route>
-      </MemoryRouter>
-    )
   }
 
   describe('user is an admin', () => {
@@ -52,6 +57,7 @@ describe('AdminLink', () => {
     })
 
     it('renders link to access page', async () => {
+      render(<AdminLink />, { wrapper: wrapper({}) })
       const link = await screen.findByText(/Admin/)
 
       expect(link).toBeInTheDocument()
@@ -71,8 +77,10 @@ describe('AdminLink', () => {
       })
     })
 
+    const { container } = render(<AdminLink />, { wrapper: wrapper({}) })
+
     it('renders nothing', () => {
-      expect(renderData.container).toBeEmptyDOMElement()
+      expect(container).toBeEmptyDOMElement()
     })
   })
 })
diff --git a/src/layouts/Header/AdminLink.jsx → src/layouts/Header/AdminLink.tsx b/src/layouts/Header/AdminLink.jsx → src/layouts/Header/AdminLink.tsx
@@ -10,7 +10,12 @@ function AdminLink() {
   }
 
   return (
-    <A variant="header" to={{ pageName: 'access' }}>
+    <A
+      variant="header"
+      to={{ pageName: 'access' }}
+      isExternal={false}
+      hook="header-admin-link"
+    >
       <Icon size="md" name="cog" variant="solid" /> Admin
     </A>
   )

diff --git a/src/layouts/Header/DesktopMenu.spec.jsx → src/layouts/Header/DesktopMenu.spec.tsx b/src/layouts/Header/DesktopMenu.spec.jsx → src/layouts/Header/DesktopMenu.spec.tsx
@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen, waitFor, within } from '@testing-library/react'
 import { graphql, rest } from 'msw'
 import { setupServer } from 'msw/node'
+import React from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import config from 'config'
@@ -13,7 +14,7 @@ jest.mock('config')
 const loggedInUser = {
   me: {
     owner: {
-      defaultOrgUsername: 'codecov',
+      defaultOrgUsername: 'codecov' as string | null,
     },
     user: {
       username: 'p',
@@ -46,7 +47,13 @@ const queryClient = new QueryClient({
 })
 const server = setupServer()
 
-const wrapper =
+const wrapper: ({
+  initialEntries,
+  path,
+}: {
+  initialEntries?: string
+  path?: string
+}) => React.FC<React.PropsWithChildren> =
   (
     { initialEntries = '/gh', path = '/:provider' } = {
       initialEntries: '/gh',
@@ -72,12 +79,7 @@ beforeEach(() => {
 afterAll(() => server.close())
 
 describe('DesktopMenu', () => {
-  function setup(
-    { hasLoggedInUser = true, user = loggedInUser } = {
-      hasLoggedInUser: true,
-      user: loggedInUser,
-    }
-  ) {
+  function setup({ hasLoggedInUser = true, user = loggedInUser }) {
     server.use(
       graphql.query('Seats', (req, res, ctx) =>
         res(ctx.status(200), ctx.data(mockSeatData))
@@ -97,7 +99,7 @@ describe('DesktopMenu', () => {
   describe('rendering logo button', () => {
     describe('when default org does not exist', () => {
       it('directs user to about codecov io', async () => {
-        setup()
+        setup({})
 
         render(<DesktopMenu />, {
           wrapper: wrapper({
@@ -184,7 +186,7 @@ describe('DesktopMenu', () => {
   })
 
   it('renders static links', async () => {
-    setup()
+    setup({})
 
     render(<DesktopMenu />, {
       wrapper: wrapper({
@@ -218,7 +220,7 @@ describe('DesktopMenu', () => {
   })
 
   it('renders the dropdown when user is logged in', async () => {
-    setup()
+    setup({})
 
     render(<DesktopMenu />, {
       wrapper: wrapper({
@@ -268,7 +270,7 @@ describe('DesktopMenu', () => {
   describe('when running in self hosted mode', () => {
     it('renders the seat count when user is logged in', async () => {
       config.IS_SELF_HOSTED = true
-      setup()
+      setup({})
 
       render(<DesktopMenu />, {
         wrapper: wrapper({
@@ -283,7 +285,7 @@ describe('DesktopMenu', () => {
 
     it('renders the admin link when user is logged in', async () => {
       config.IS_SELF_HOSTED = true
-      setup()
+      setup({})
 
       render(<DesktopMenu />, {
         wrapper: wrapper({
@@ -301,7 +303,7 @@ describe('DesktopMenu', () => {
 describe('LoginPrompt', () => {
   describe('with a provider available', () => {
     it('renders a login button and a sign up button', () => {
-      render(<LoginPrompt />, { wrapper: wrapper() })
+      render(<LoginPrompt />, { wrapper: wrapper({}) })
 
       const loginPrompt = screen.getByTestId('login-prompt')
 

diff --git a/src/layouts/Header/DesktopMenu.jsx → src/layouts/Header/DesktopMenu.tsx b/src/layouts/Header/DesktopMenu.jsx → src/layouts/Header/DesktopMenu.tsx
@@ -12,8 +12,12 @@ import AdminLink from './AdminLink'
 import Dropdown from './Dropdown'
 import SeatDetails from './SeatDetails'
 
+interface URLParams {
+  provider: string
+}
+
 export function LoginPrompt() {
-  const { provider } = useParams()
+  const { provider } = useParams<URLParams>()
 
   const to = window.location.href
   const { pathname } = useLocation()
@@ -25,7 +29,12 @@ export function LoginPrompt() {
     return (
       <div className="text-ds-gray-tertiary">
         New to Codecov?{' '}
-        <A to={{ pageName: 'root' }} variant="header">
+        <A
+          to={{ pageName: 'root' }}
+          variant="header"
+          isExternal={true}
+          hook="desktop-menu-learn-more"
+        >
           Learn more
         </A>
       </div>
@@ -36,17 +45,27 @@ export function LoginPrompt() {
       data-testid="login-prompt"
       className="mx-2 flex items-center justify-between gap-4 md:mx-0"
     >
-      <A to={{ pageName: 'signIn', options: { to } }} variant="header">
+      <A
+        to={{ pageName: 'signIn', options: { to } }}
+        variant="header"
+        isExternal={false}
+        hook="desktop-menu-login-link"
+      >
         Log in
       </A>
-      <Button to={{ pageName: 'signUp' }} variant="primary">
+      <Button
+        to={{ pageName: 'signUp' }}
+        variant="primary"
+        disabled={false}
+        hook="desktop-menu-login-button"
+      >
         Sign up
       </Button>
     </div>
   )
 }
 
-const LogoButton = ({ defaultOrg }) => {
+const LogoButton = ({ defaultOrg }: { defaultOrg: string }) => {
   let pageName = 'root'
   if (defaultOrg) {
     pageName = 'owner'
@@ -60,6 +79,8 @@ const LogoButton = ({ defaultOrg }) => {
       }}
       variant="header"
       data-testid="homepage-link"
+      isExternal={pageName === 'root' ? true : false}
+      hook="desktop-menu-homepage-link"
     >
       <span className="sr-only">Link to Homepage</span>
       <CodecovIcon />
@@ -82,17 +103,31 @@ function DesktopMenu() {
     <>
       <div data-testid="desktop-menu" className="flex items-center gap-4">
         <LogoButton defaultOrg={defaultOrg} />
-        <A to={{ pageName: 'docs' }} variant="header" showExternalIcon={false}>
+        <A
+          to={{ pageName: 'docs' }}
+          variant="header"
+          isExternal={false}
+          showExternalIcon={false}
+          hook="desktop-menu-docs-link"
+        >
           Docs
         </A>
         <A
           to={{ pageName: 'support' }}
           variant="header"
+          isExternal={false}
           showExternalIcon={false}
+          hook="desktop-menu-support-link"
         >
           Support
         </A>
-        <A to={{ pageName: 'blog' }} variant="header" showExternalIcon={false}>
+        <A
+          to={{ pageName: 'blog' }}
+          variant="header"
+          isExternal={false}
+          showExternalIcon={false}
+          hook="desktop-menu-blog-link"
+        >
           Blog
         </A>
       </div>