Merge remote-tracking branch 'origin/main' into sshin/chore/2721

VERSION

@@ -1 +1 @@
-24.10.1
+24.11.1

package.json

@@ -39,7 +39,7 @@
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@sentry/react": "^8.32.0",
+    "@sentry/react": "^8.35.0",
     "@stripe/react-stripe-js": "^2.7.1",
     "@stripe/stripe-js": "^3.4.0",
     "@tanstack/react-query": "^4.29.5",

src/config.js

@@ -9,7 +9,7 @@ const defaultConfig = {
   SENTRY_SESSION_SAMPLE_RATE: 0.1,
   SENTRY_ERROR_SAMPLE_RATE: 1.0,
   GH_APP: 'codecov',
-  GH_APP_AI: 'codecov', // TODO: Update to proper GH app name once it is live
+  GH_APP_AI: 'codecov-ai',
 }
 
 export function removeReactAppPrefix(obj) {

src/globals.css

@@ -199,6 +199,8 @@
 
     --color-github: 255, 255, 255;
     --color-github-text: 14, 27, 41;
+    --color-github-hover-bg: 70, 75, 85;
+
     --color-gitlab: 242, 98, 42;
     --color-bitbucket: 2, 75, 186;
     --color-okta: 255, 255, 255;
@@ -253,6 +255,8 @@
     --color-code-operator: 219 178, 89;
   }
 
+  /* Also used for prefers-color-scheme: light */
+  /* explicitly define it below if we want to change behavior */
   body {
     @apply lightMode;
   }
@@ -261,7 +265,7 @@
     @apply darkMode;
   }
 
-  /* new body theme can be applied here
+  /* new body theme can be applied here */
 
   @media (prefers-color-scheme: dark) {
     body {
@@ -271,9 +275,7 @@
     body.light {
       @apply lightMode;
     }
-
-     new body theme added above should be applied here as well to cover specificity
-  } */
+  }
 }
 
 #sentry-feedback {

src/layouts/Header/components/ThemeToggle/ThemeToggle.test.tsx

@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/react'
 import { render, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
@@ -61,12 +60,6 @@ describe('ThemeToggle', () => {
       expect(sunIcon).toHaveAttribute('data-icon', 'sun')
     })
 
-    expect(Sentry.metrics.increment).toHaveBeenCalledWith(
-      'button_clicked.theme.dark',
-      1,
-      undefined
-    )
-
     // toggle back to light mode
     await userEvent.click(button)
     await waitFor(() => {
@@ -76,14 +69,6 @@ describe('ThemeToggle', () => {
     await waitFor(() => {
       expect(icon).toHaveAttribute('data-icon', 'moon')
     })
-
-    await waitFor(() => {
-      expect(Sentry.metrics.increment).toHaveBeenCalledWith(
-        'button_clicked.theme.light',
-        1,
-        undefined
-      )
-    })
   })
 
   it('assumes light mode when there is no theme in local storage', () => {

src/layouts/Header/components/ThemeToggle/ThemeToggle.tsx

@@ -1,5 +1,4 @@
 import { Theme, useThemeContext } from 'shared/ThemeContext'
-import { metrics } from 'shared/utils/metrics'
 import Icon from 'ui/Icon'
 
 const ThemeToggle = () => {
@@ -9,12 +8,6 @@ const ThemeToggle = () => {
     const newTheme = theme === Theme.LIGHT ? Theme.DARK : Theme.LIGHT
 
     setTheme(newTheme)
-
-    if (newTheme === Theme.DARK) {
-      metrics.increment('button_clicked.theme.dark', 1)
-    } else if (newTheme === Theme.LIGHT) {
-      metrics.increment('button_clicked.theme.light', 1)
-    }
   }
 
   return (

src/pages/CodecovAIPage/CodecovAICommands/CodecovAICommands.tsx

@@ -1,22 +1,22 @@
+import darkModeImage from 'assets/codecovAI/pr-review-example-dark-mode.png'
+import lightModeImage from 'assets/codecovAI/pr-review-example-light-mode.png'
+import { Theme, useThemeContext } from 'shared/ThemeContext'
 import { Card } from 'ui/Card'
 import { ExpandableSection } from 'ui/ExpandableSection'
 
 const CodecovAICommands: React.FC = () => {
+  const { theme } = useThemeContext()
+  const prReviewExampleSource =
+    theme === Theme.DARK ? darkModeImage : lightModeImage
   return (
     <div>
       <Card>
         <Card.Header>
           <Card.Title size="base">Codecov AI Commands</Card.Title>
         </Card.Header>
         <Card.Content>
-          After installing the app, use these commands in your PR comments:
+          After installing the app, use this command in your PR comments:
           <ul className="mt-2 list-inside list-disc space-y-1">
-            <li>
-              <span className="rounded border border-gray-200 bg-gray-100 px-1 font-semibold">
-                @codecov-ai-reviewer test
-              </span>
-              -- the assistant will generate tests for the PR.
-            </li>
             <li>
               <span className="rounded border border-gray-200 bg-gray-100 px-1 font-semibold">
                 @codecov-ai-reviewer review
@@ -33,19 +33,12 @@ const CodecovAICommands: React.FC = () => {
             generation may take time.
           </p>
         </ExpandableSection.Trigger>
-        <ExpandableSection.Content>
-          Screenshot goes here
-        </ExpandableSection.Content>
-      </ExpandableSection>
-      <ExpandableSection className="-mt-2 border-t-0">
-        <ExpandableSection.Trigger>
-          <p>
-            Here is an example of Codecov AI Test Generator in PR comments.
-            Comment generation may take time.
-          </p>
-        </ExpandableSection.Trigger>
-        <ExpandableSection.Content>
-          Screenshot goes here
+        <ExpandableSection.Content className="m-0 p-0">
+          <img
+            className="size-full object-cover"
+            alt="codecov pr review example"
+            src={prReviewExampleSource}
+          />
         </ExpandableSection.Content>
       </ExpandableSection>
     </div>

src/pages/CodecovAIPage/CodecovAIPage.test.tsx

@@ -1,7 +1,9 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
+import { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import { ThemeContextProvider } from 'shared/ThemeContext'
@@ -35,7 +37,9 @@ const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <QueryClientProvider client={queryClient}>
     <ThemeContextProvider>
       <MemoryRouter initialEntries={['/gh/codecov/']}>
-        <Route path="/:provider/:owner/">{children}</Route>
+        <Route path="/:provider/:owner/">
+          <Suspense fallback={null}>{children}</Suspense>
+        </Route>
       </MemoryRouter>
     </ThemeContextProvider>
   </QueryClientProvider>
@@ -136,14 +140,9 @@ describe('CodecovAIPage', () => {
     expect(commandText).toBeInTheDocument()
 
     const commandOneText = await screen.findByText(
-      / the assistant will generate tests/
-    )
-    expect(commandOneText).toBeInTheDocument()
-
-    const commandTwoText = await screen.findByText(
       / the assistant will review the PR/
     )
-    expect(commandTwoText).toBeInTheDocument()
+    expect(commandOneText).toBeInTheDocument()
   })
 
   it('renders examples', async () => {
@@ -153,14 +152,23 @@ describe('CodecovAIPage', () => {
       /Here is an example of Codecov AI Reviewer in PR comments/
     )
     expect(reviewExample).toBeInTheDocument()
+  })
 
-    const testGenerator = await screen.findByText(
-      /Here is an example of Codecov AI Test Generator/
+  it('renders screenshot', async () => {
+    render(<CodecovAIPage />, { wrapper })
+    const user = userEvent.setup()
+    const trigger = await screen.findByText((content) =>
+      content.startsWith('Here is an example')
     )
-    expect(testGenerator).toBeInTheDocument()
-  })
+    expect(trigger).toBeInTheDocument()
+
+    await user.click(trigger)
 
-  //TODO: Once we have screenshots, test that they are visible
+    const screenshot = await screen.findByRole('img', {
+      name: /codecov pr review example/,
+    })
+    expect(screenshot).toBeInTheDocument()
+  })
 
   it('renders a link to the docs', async () => {
     render(<CodecovAIPage />, { wrapper })

src/pages/CodecovAIPage/CodecovAIPage.tsx

@@ -36,9 +36,8 @@ const CodecovAIPage: React.FC = () => {
       <section>
         <p className="flex flex-col gap-4 sm:mr-4 sm:flex-initial lg:w-3/5">
           Codecov AI is a generative AI assistant developed by Codecov at
-          Sentry. It helps you with generating new tests for uncovered code and
-          reviews your code changes, offering suggestions for improvement before
-          merging pull requests.
+          Sentry. It helps you review your code changes, offering suggestions
+          for improvement before merging pull requests.
         </p>
       </section>
       <div className="flex flex-col gap-4 pt-2 lg:w-3/5">

src/pages/CodecovAIPage/ConfiguredRepositories/ConfiguredRepositories.tsx

@@ -4,7 +4,7 @@ import {
   getCoreRowModel,
   useReactTable,
 } from '@tanstack/react-table'
-import React, { useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import { useCodecovAIInstalledRepos } from 'services/codecovAI/useCodecovAIInstalledRepos'

src/pages/CodecovAIPage/InstallCodecovAI/InstallCodecovAI.tsx

@@ -23,9 +23,8 @@ const InstallCodecovAI: React.FC = () => {
         <Card.Content>
           To enable the Codecov AI assistant in your GitHub organization, or on
           specific repositories, you need to install the Codecov AI GitHub App
-          Integration. This will allow the assistant to analyze pull requests,
-          provide insights, and generate new tests to help increase your code
-          coverage.
+          Integration. This will allow the assistant to analyze pull requests
+          and provide insights.
           <div className="mt-4 flex">
             <Button
               to={{

src/pages/CodecovAIPage/LearnMoreBlurb/LearnMoreBlurb.tsx

@@ -10,8 +10,9 @@ function LearnMoreBlurb() {
           <p>
             Visit our guide to{' '}
             <A
-              to={{ pageName: 'quickStart' }}
-              hook="coverage-onboarding-learn-more"
+              to={{ pageName: 'codecovAIDocs' }}
+              hook="codecov-ai-docs-link"
+              data-testid="codecov-ai-docs-link"
               isExternal={true}
             >
               learn more

src/pages/CommitDetailPage/CommitBundleAnalysis/CommitBundleAnalysis.test.tsx

@@ -1,6 +1,5 @@
-import * as Sentry from '@sentry/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { render, screen, waitFor } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
 import { Suspense } from 'react'
@@ -229,20 +228,6 @@ describe('CommitBundleAnalysis', () => {
       expect(commitBundleAnalysisTable).toBeInTheDocument()
     })
 
-    it('sends bundle dropdown metric to sentry', async () => {
-      setup({ coverageEnabled: true, bundleAnalysisEnabled: true })
-      render(<CommitBundleAnalysis />, { wrapper })
-
-      await waitFor(() => expect(Sentry.metrics.increment).toHaveBeenCalled())
-      await waitFor(() =>
-        expect(Sentry.metrics.increment).toHaveBeenCalledWith(
-          'commit_detail_page.bundle_dropdown.opened',
-          1,
-          undefined
-        )
-      )
-    })
-
     describe('there is no data', () => {
       it('renders unknown error message', async () => {
         setup({
@@ -526,19 +511,5 @@ describe('CommitBundleAnalysis', () => {
       )
       expect(commitBundleAnalysisTable).toBeInTheDocument()
     })
-
-    it('sends bundle dropdown metric to sentry', async () => {
-      setup({ coverageEnabled: false, bundleAnalysisEnabled: true })
-      render(<CommitBundleAnalysis />, { wrapper })
-
-      await waitFor(() => expect(Sentry.metrics.increment).toHaveBeenCalled())
-      await waitFor(() =>
-        expect(Sentry.metrics.increment).toHaveBeenCalledWith(
-          'commit_detail_page.bundle_page.visited_page',
-          1,
-          undefined
-        )
-      )
-    })
   })
 })

src/pages/CommitDetailPage/CommitBundleAnalysis/CommitBundleAnalysis.tsx

@@ -1,10 +1,8 @@
-import { lazy, Suspense, useEffect } from 'react'
+import { lazy, Suspense } from 'react'
 import { useParams } from 'react-router-dom'
 
-import { useRepoOverview } from 'services/repo'
 import ComparisonErrorBanner from 'shared/ComparisonErrorBanner'
 import { ReportUploadType } from 'shared/utils/comparison'
-import { metrics } from 'shared/utils/metrics'
 import Spinner from 'ui/Spinner'
 
 import BundleMessage from './BundleMessage'
@@ -65,22 +63,13 @@ const BundleContent: React.FC<BundleContentProps> = ({ bundleCompareType }) => {
 
 const CommitBundleAnalysis: React.FC = () => {
   const { provider, owner, repo, commit: commitSha } = useParams<URLParams>()
-  const { data: overview } = useRepoOverview({ provider, owner, repo })
   const { data: commitPageData } = useCommitPageData({
     provider,
     owner,
     repo,
     commitId: commitSha,
   })
 
-  useEffect(() => {
-    if (overview?.bundleAnalysisEnabled && overview?.coverageEnabled) {
-      metrics.increment('commit_detail_page.bundle_dropdown.opened', 1)
-    } else if (overview?.bundleAnalysisEnabled) {
-      metrics.increment('commit_detail_page.bundle_page.visited_page', 1)
-    }
-  }, [overview?.bundleAnalysisEnabled, overview?.coverageEnabled])
-
   const bundleCompareType =
     commitPageData?.commit?.bundleAnalysis?.bundleAnalysisCompareWithParent
       ?.__typename