Merge branch 'main' into paid-plans-onboarding-activation-required

.github/workflows/ci.yml

@@ -6,6 +6,7 @@ on:
       - main
       - staging
   pull_request:
+  merge_group:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}

VERSION

@@ -1 +1 @@
-24.4.1
+24.5.1

package.json

@@ -83,6 +83,7 @@
     "react-router-dom": "^5.2.1",
     "react-router-dom-v5-compat": "^6.15.0",
     "react-use": "^17.2.4",
+    "tailwind-merge": "^2.3.0",
     "victory": "^36.6.11",
     "yup": "^0.32.11",
     "zod": "^3.21.4"

src/assets/svg/codecov.tsx

@@ -0,0 +1,24 @@
+export const CodecovIcon = ({ fillColor = '' }: { fillColor?: string }) => {
+  return (
+    <svg
+      aria-labelledby="codecovLogoTitleId codecovLogoDescId"
+      xmlns="http://www.w3.org/2000/svg"
+      width="25px"
+      height="23px"
+      viewBox="0 0 25 23"
+      role="img"
+    >
+      <title id="codecovLogoTitleId">Codecov Logo</title>
+      <desc id="codecovLogoDescId">An umbrella logo.</desc>
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g transform="translate(-708.000000, -37.000000)" fill="currentColor">
+          <path
+            d="M732.5,48.9622237 C732.015555,49.2124622 731.506824,49.4261695 731.053915,49.7235559 C730.626903,50.0040468 730.292545,49.9912609 729.836644,49.7517534 C726.560854,48.0303366 722.586997,49.5495763 721.39171,52.9606735 C720.924644,54.2934901 720.934197,55.6380652 721.487931,56.9352639 C721.702588,57.4382523 721.707422,57.8638403 721.455589,58.3140869 C721.14402,58.8710729 720.818754,59.4205245 720.483936,60 C718.505985,57.9488894 717.914499,54.4898451 719.14938,51.6301401 C720.007317,49.6433015 721.423246,48.1927861 723.397629,47.2936629 C725.36453,46.3980786 727.410043,46.3391721 729.485942,46.865335 C729.843665,44.0382798 725.361653,40.0246467 721.443273,39.5775966 C715.773685,38.9307667 711.599674,42.9836708 710.941202,46.8818882 C713.968841,46.1522924 716.717025,46.6293666 719.126015,48.6279636 C718.670805,49.3625824 718.247016,50.0467426 717.794222,50.7773658 C717.628482,50.6569271 717.467115,50.5457354 717.312194,50.42621 C715.21201,48.8061671 712.963925,48.6138077 710.610411,49.7997006 C710.182134,50.0154628 709.88311,50.0050742 709.498109,49.7654526 C709.018383,49.4668104 708.501019,49.2273029 708,48.9623379 C708,48.7192915 708,48.4763593 708,48.2333129 C708.109918,47.6610294 708.211779,47.0870335 708.331136,46.5165766 C709.55819,40.6488729 715.266911,36.4503009 721.45064,37.0585447 C726.654198,37.5704376 730.957118,41.2668204 732.12835,46.3376881 C732.273143,46.9647683 732.377076,47.6010955 732.5,48.2331987 C732.5,48.4761309 732.5,48.7191773 732.5,48.9622237 Z"
+            id="Path"
+            fill={fillColor}
+          ></path>
+        </g>
+      </g>
+    </svg>
+  )
+}

src/layouts/EnterpriseLoginLayout/Header/Header.tsx

@@ -1,6 +1,6 @@
 import cs from 'classnames'
 
-import { ReactComponent as CodecovIcon } from 'assets/svg/codecov.svg'
+import { CodecovIcon } from 'assets/svg/codecov'
 import { useImpersonate } from 'services/impersonate'
 import A from 'ui/A'
 

src/layouts/Footer/Footer.jsx

@@ -1,6 +1,6 @@
 import config from 'config'
 
-import { ReactComponent as CodecovIcon } from 'assets/svg/codecov.svg'
+import { CodecovIcon } from 'assets/svg/codecov'
 import A from 'ui/A'
 
 import { FooterItem } from './FooterItem'

src/layouts/Header/DesktopMenu.spec.tsx

@@ -321,53 +321,5 @@ describe('LoginPrompt', () => {
         'https://about.codecov.io/sign-up/'
       )
     })
-
-    it('renders link to marketing if url starts with /login', () => {
-      render(<LoginPrompt />, {
-        wrapper: wrapper({
-          initialEntries: '/login/gh',
-          path: '/login/:provider',
-        }),
-      })
-
-      const newToCodecov = screen.getByText(/new to codecov\?/i)
-      expect(newToCodecov).toBeInTheDocument()
-
-      const learnMore = screen.getByRole('link', {
-        name: /learn more/i,
-      })
-      expect(learnMore).toBeInTheDocument()
-    })
-  })
-
-  describe('without a provider', () => {
-    it('does not render a login button and a sign up button', () => {
-      render(<LoginPrompt />, {
-        wrapper: wrapper({
-          initialEntries: '/login',
-          path: '/login',
-        }),
-      })
-
-      const loginPrompt = screen.queryByTestId('login-prompt')
-      expect(loginPrompt).not.toBeInTheDocument()
-    })
-
-    it('does not render a link to marketing if url starts with /login', () => {
-      render(<LoginPrompt />, {
-        wrapper: wrapper({
-          initialEntries: '/login',
-          path: '/login',
-        }),
-      })
-
-      const newToCodecov = screen.queryByText(/new to codecov\?/i)
-      expect(newToCodecov).not.toBeInTheDocument()
-
-      const learnMoreLink = screen.queryByRole('link', {
-        name: /learn more/i,
-      })
-      expect(learnMoreLink).not.toBeInTheDocument()
-    })
   })
 })

src/layouts/Header/DesktopMenu.tsx

@@ -1,9 +1,6 @@
-import PropTypes from 'prop-types'
-import { useLocation, useParams } from 'react-router-dom'
-
 import config from 'config'
 
-import { ReactComponent as CodecovIcon } from 'assets/svg/codecov.svg'
+import { CodecovIcon } from 'assets/svg/codecov'
 import { useUser } from 'services/user'
 import A from 'ui/A'
 import Button from 'ui/Button'
@@ -12,34 +9,8 @@ import AdminLink from './AdminLink'
 import Dropdown from './Dropdown'
 import SeatDetails from './SeatDetails'
 
-interface URLParams {
-  provider: string
-}
-
 export function LoginPrompt() {
-  const { provider } = useParams<URLParams>()
-
   const to = window.location.href
-  const { pathname } = useLocation()
-
-  if (!provider) return null
-
-  // different page if login
-  if (pathname.startsWith('/login')) {
-    return (
-      <div className="text-ds-gray-tertiary">
-        New to Codecov?{' '}
-        <A
-          to={{ pageName: 'root' }}
-          variant="header"
-          isExternal={true}
-          hook="desktop-menu-learn-more"
-        >
-          Learn more
-        </A>
-      </div>
-    )
-  }
   return (
     <div
       data-testid="login-prompt"
@@ -65,7 +36,13 @@ export function LoginPrompt() {
   )
 }
 
-const LogoButton = ({ defaultOrg }: { defaultOrg: string }) => {
+export const LogoButton = ({
+  defaultOrg,
+  fillColor,
+}: {
+  defaultOrg: string
+  fillColor?: string
+}) => {
   let pageName = 'root'
   if (defaultOrg) {
     pageName = 'owner'
@@ -83,15 +60,11 @@ const LogoButton = ({ defaultOrg }: { defaultOrg: string }) => {
       hook="desktop-menu-homepage-link"
     >
       <span className="sr-only">Link to Homepage</span>
-      <CodecovIcon />
+      <CodecovIcon fillColor={fillColor} />
     </A>
   )
 }
 
-LogoButton.propTypes = {
-  defaultOrg: PropTypes.string.isRequired,
-}
-
 function DesktopMenu() {
   const { data: currentUser } = useUser({
     suspense: false,

src/layouts/Header/GuestHeader.spec.tsx

@@ -0,0 +1,104 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import GuestHeader from './GuestHeader'
+
+// silence console errors
+console.error = () => {}
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+})
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    <MemoryRouter initialEntries={['/gh']}>
+      <Route path={'/:provider'} exact>
+        {children}
+      </Route>
+    </MemoryRouter>
+  </QueryClientProvider>
+)
+
+beforeEach(() => {
+  queryClient.clear()
+})
+
+describe('GuestHeader', () => {
+  describe('links on the page', () => {
+    describe('codecov icon link', () => {
+      it('directs user to about page', async () => {
+        render(<GuestHeader />, {
+          wrapper,
+        })
+
+        const link = await screen.findByTestId('homepage-link')
+        expect(link).toBeInTheDocument()
+        expect(link).toHaveAttribute('href', 'https://about.codecov.io')
+      })
+    })
+    describe('why test code link', () => {
+      it('directs user to what is code coverage page', async () => {
+        render(<GuestHeader />, {
+          wrapper,
+        })
+
+        const link = await screen.findByTestId('why-test-link')
+        expect(link).toBeInTheDocument()
+        expect(link).toHaveAttribute(
+          'href',
+          'https://about.codecov.io/resource/what-is-code-coverage'
+        )
+      })
+    })
+    describe('Get a demo link', () => {
+      it('directs user to demo page', async () => {
+        render(<GuestHeader />, {
+          wrapper,
+        })
+
+        const link = await screen.findByTestId('demo-link')
+        expect(link).toBeInTheDocument()
+        expect(link).toHaveAttribute('href', 'https://about.codecov.io/demo')
+      })
+    })
+    describe('pricing link', () => {
+      it('directs user to pricing page', async () => {
+        render(<GuestHeader />, {
+          wrapper,
+        })
+
+        const link = await screen.findByTestId('pricing-link')
+        expect(link).toBeInTheDocument()
+        expect(link).toHaveAttribute('href', 'https://about.codecov.io/pricing')
+      })
+    })
+    describe('login link', () => {
+      it('directs user to login page', async () => {
+        render(<GuestHeader />, {
+          wrapper,
+        })
+
+        const link = await screen.findByTestId('login-link')
+        expect(link).toBeInTheDocument()
+        expect(link).toHaveAttribute('href', '/login')
+      })
+    })
+    describe('start trial link', () => {
+      it('directs user to start trial page', async () => {
+        render(<GuestHeader />, {
+          wrapper,
+        })
+
+        const link = await screen.findByTestId('start-trial-link')
+        expect(link).toBeInTheDocument()
+        expect(link).toHaveAttribute(
+          'href',
+          'https://about.codecov.io/codecov-free-trial'
+        )
+      })
+    })
+  })
+})