Merge branch 'main' into chore-update-pages-pull-request-page-tests-t…

…o-vitest

VERSION

@@ -1 +1 @@
-24.9.3
+24.10.1

codecov.yml

@@ -49,6 +49,8 @@ ignore:
   - './src/**/*.svg'
   - './src/**/*.png'
   - './src/**/*.jpg'
+  - ./src/**/*.mocks.js
+  - ./src/**/*.mocks.ts
 
 component_management:
   default_rules:

package.json

@@ -19,7 +19,7 @@
     "test:mutation": "npx stryker run",
     "eject": "craco eject",
     "lint": "eslint --fix --no-ignore --max-warnings=-1 -c .eslintrc.json",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "yarn generate-icons:webpack && storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic --exit-zero-on-changes -ci",
     "format-staged": "npx prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md}'",
@@ -53,13 +53,14 @@
   "dependencies": {
     "@hookform/resolvers": "^2.8.5",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.0.2",
     "@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.24.0",
+    "@sentry/react": "^8.32.0",
     "@stripe/react-stripe-js": "^2.7.1",
     "@stripe/stripe-js": "^3.4.0",
     "@tanstack/react-query": "^4.29.5",
@@ -177,12 +178,12 @@
     "storybook": "^8.2.6",
     "tailwindcss": "^3.4.4",
     "typescript": "^4.9.5",
-    "vite": "^5.4.1",
+    "vite": "^5.4.8",
     "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "webpack": "^5.84.1",
+    "webpack": "^5.94.0",
     "webpackbar": "^6.0.1"
   },
   "engines": {
@@ -210,7 +211,10 @@
   "resolutions": {
     "react-refresh": "^0.14.0",
     "resolve-url-loader/postcss": "8.4.31",
-    "micromatch": "^4.0.8"
+    "micromatch": "^4.0.8",
+    "express": "^4.21.0",
+    "path-to-regexp@^1.7.0": "^1.9.0",
+    "path-to-regexp@^6.2.0": "^6.3.0"
   },
   "packageManager": "[email protected]",
   "engineStrict": false

src/pages/CodecovAIPage/CodecovAICommands/CodecovAICommands.tsx

@@ -14,14 +14,14 @@ const CodecovAICommands: React.FC = () => {
             <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.
+              </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
-              </span>{' '}
-              --the assistant will review the PR and make suggestions.
+              </span>
+              -- the assistant will review the PR and make suggestions.
             </li>
           </ul>
         </Card.Content>

src/pages/CodecovAIPage/CodecovAIPage.test.tsx

@@ -1,4 +1,7 @@
-import { render, screen } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { cleanup, render, screen } from '@testing-library/react'
+import { graphql, HttpResponse } from 'msw2'
+import { setupServer } from 'msw2/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import { ThemeContextProvider } from 'shared/ThemeContext'
@@ -17,17 +20,75 @@ vi.mock('shared/featureFlags', async () => {
   }
 })
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: true,
+      suspense: true,
+    },
+  },
+})
+
+const server = setupServer()
+
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <ThemeContextProvider>
-    <MemoryRouter initialEntries={['/gh/codecov/test-repo/bundles/new']}>
-      <Route path="/:provider/:owner/:repo/bundles/new">{children}</Route>
-    </MemoryRouter>
-  </ThemeContextProvider>
+  <QueryClientProvider client={queryClient}>
+    <ThemeContextProvider>
+      <MemoryRouter initialEntries={['/gh/codecov/']}>
+        <Route path="/:provider/:owner/">{children}</Route>
+      </MemoryRouter>
+    </ThemeContextProvider>
+  </QueryClientProvider>
 )
 
+beforeAll(() => {
+  server.listen()
+})
+
+afterEach(() => {
+  queryClient.clear()
+  server.resetHandlers()
+})
+
+afterEach(() => {
+  cleanup()
+  vi.clearAllMocks()
+  queryClient.clear()
+})
+
+afterAll(() => {
+  server.close()
+})
+
 describe('CodecovAIPage', () => {
+  function setup(
+    aiFeaturesEnabled = false,
+    aiEnabledRepos = ['repo-1', 'repo-2']
+  ) {
+    server.use(
+      graphql.query('GetCodecovAIAppInstallInfo', (info) => {
+        return HttpResponse.json({
+          data: {
+            owner: {
+              aiFeaturesEnabled,
+            },
+          },
+        })
+      }),
+      graphql.query('GetCodecovAIInstalledRepos', (info) => {
+        return HttpResponse.json({
+          data: {
+            owner: {
+              aiEnabledRepos,
+            },
+          },
+        })
+      })
+    )
+  }
   beforeEach(() => {
     mocks.useFlags.mockReturnValue({ codecovAiFeaturesTab: true })
+    setup()
   })
 
   it('renders top section', async () => {
@@ -55,7 +116,7 @@ describe('CodecovAIPage', () => {
 
   it('renders the install button', async () => {
     render(<CodecovAIPage />, { wrapper })
-    const buttonEl = screen.getByRole('link', { name: /Install Codecov AI/i })
+    const buttonEl = await screen.findByText(/Install Codecov AI/i)
     expect(buttonEl).toBeInTheDocument()
   })
 
@@ -75,12 +136,12 @@ describe('CodecovAIPage', () => {
     expect(commandText).toBeInTheDocument()
 
     const commandOneText = await screen.findByText(
-      /the assistant will generate tests/
+      / the assistant will generate tests/
     )
     expect(commandOneText).toBeInTheDocument()
 
     const commandTwoText = await screen.findByText(
-      /the assistant will review the PR/
+      / the assistant will review the PR/
     )
     expect(commandTwoText).toBeInTheDocument()
   })
@@ -107,15 +168,48 @@ describe('CodecovAIPage', () => {
     const docLink = await screen.findByText(/Visit our guide/)
     expect(docLink).toBeInTheDocument()
   })
-})
 
-describe('flag is off', () => {
-  it('does not render page', async () => {
-    mocks.useFlags.mockReturnValue({ codecovAiFeaturesTab: false })
+  describe('AI features are enabled and configured', () => {
+    beforeEach(() => {
+      setup(true)
+      mocks.useFlags.mockReturnValue({ codecovAiFeaturesTab: true })
+    })
+
+    it('does not render install link', () => {
+      setup(true)
+      render(<CodecovAIPage />, { wrapper })
+      const topSection = screen.queryByText(/Install Codecov AI/)
+      expect(topSection).not.toBeInTheDocument()
+    })
+
+    it('renders list of repos', async () => {
+      render(<CodecovAIPage />, { wrapper })
+
+      const repo1Link = await screen.findByText(/repo-1/)
+      expect(repo1Link).toBeInTheDocument()
+      const repo2Link = await screen.findByText(/repo-2/)
+      expect(repo2Link).toBeInTheDocument()
+    })
+
+    describe('No repos returned', () => {
+      it('renders install link', async () => {
+        setup(true, [])
+        render(<CodecovAIPage />, { wrapper })
+        const buttonEl = await screen.findByText(/Install Codecov AI/i)
+        expect(buttonEl).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('flag is off', () => {
+    it('does not render page', async () => {
+      setup(true)
+      mocks.useFlags.mockReturnValue({ codecovAiFeaturesTab: false })
 
-    render(<CodecovAIPage />, { wrapper })
+      render(<CodecovAIPage />, { wrapper })
 
-    const topSection = screen.queryByText(/Codecov AI is a/)
-    expect(topSection).not.toBeInTheDocument()
+      const topSection = screen.queryByText(/Codecov AI is a/)
+      expect(topSection).not.toBeInTheDocument()
+    })
   })
 })

src/pages/CodecovAIPage/CodecovAIPage.tsx

@@ -1,8 +1,10 @@
 import { Redirect, useParams } from 'react-router-dom'
 
+import { useCodecovAIInstallation } from 'services/codecovAI/useCodecovAIInstallation'
 import { useFlags } from 'shared/featureFlags'
 
 import CodecovAICommands from './CodecovAICommands/CodecovAICommands'
+import ConfiguredRepositories from './ConfiguredRepositories/ConfiguredRepositories'
 import InstallCodecovAI from './InstallCodecovAI/InstallCodecovAI'
 import LearnMoreBlurb from './LearnMoreBlurb/LearnMoreBlurb'
 import Tabs from './Tabs/Tabs'
@@ -14,11 +16,15 @@ interface URLParams {
 
 const CodecovAIPage: React.FC = () => {
   const { provider, owner } = useParams<URLParams>()
-
   const { codecovAiFeaturesTab } = useFlags({
     codecovAiFeaturesTab: false,
   })
 
+  const { data: installationData } = useCodecovAIInstallation({
+    owner,
+    provider,
+  })
+
   if (!codecovAiFeaturesTab) {
     return <Redirect to={`/${provider}/${owner}`} />
   }
@@ -36,7 +42,11 @@ const CodecovAIPage: React.FC = () => {
         </p>
       </section>
       <div className="flex flex-col gap-4 pt-2 lg:w-3/5">
-        <InstallCodecovAI />
+        {installationData?.aiFeaturesEnabled ? (
+          <ConfiguredRepositories />
+        ) : (
+          <InstallCodecovAI />
+        )}
         <CodecovAICommands />
         <LearnMoreBlurb />
       </div>