Merge branch 'main' into onboarding-banner

codecov.yml

@@ -23,7 +23,7 @@ comment:
   require_changes: no
   require_base: no
   require_head: yes
-  after_n_builds: 6
+  after_n_builds: 9 # ceil(number of test files / 80). See ci.yml for more details.
 
 ignore:
   - ./src/**/*.stories.js

package.json

@@ -46,7 +46,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-radio-group": "^1.1.3",
-    "@sentry/react": "^8.0.0-beta.4",
+    "@sentry/react": "8.0.0-rc.1",
     "@stripe/react-stripe-js": "^1.7.2",
     "@stripe/stripe-js": "^1.52.1",
     "@tanstack/react-query": "^4.29.5",

src/App.spec.tsx

@@ -3,10 +3,12 @@ import { render, screen, waitFor } 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 { MemoryRouter, Route, useLocation } from 'react-router-dom'
 
 import config from 'config'
 
+import { useLocationParams } from 'services/navigation'
+
 import App from './App'
 
 jest.mock('./pages/AccountSettings', () => () => 'AccountSettings')
@@ -23,16 +25,12 @@ jest.mock('./pages/TermsOfService', () => () => 'TermsOfService')
 jest.mock('./pages/EnterpriseLandingPage', () => () => 'EnterpriseLandingPage')
 jest.mock('./pages/SyncProviderPage', () => () => 'SyncProviderPage')
 
-jest.mock('./shared/GlobalBanners', () => () => '')
-jest.mock('./shared/GlobalTopBanners', () => () => '')
-jest.mock('./layouts/Header', () => () => '')
-jest.mock('./layouts/Footer', () => () => '')
-
-jest.mock('@tanstack/react-query-devtools', () => ({
-  ReactQueryDevtools: () => 'ReactQueryDevtools',
+jest.mock('services/navigation', () => ({
+  ...jest.requireActual('services/navigation'),
+  useLocationParams: jest.fn(),
 }))
 
-jest.mock('config')
+const mockedUseLocationParams = useLocationParams as jest.Mock
 
 const internalUser = {
   email: 'internal@user.com',
@@ -74,7 +72,7 @@ const queryClient = new QueryClient({
 })
 
 const server = setupServer()
-let testLocation: any
+let testLocation: ReturnType<typeof useLocation>
 const wrapper =
   (initialEntries = ['']): React.FC<React.PropsWithChildren> =>
   ({ children }) =>
@@ -102,6 +100,7 @@ beforeEach(() => {
   config.IS_SELF_HOSTED = false
   queryClient.clear()
   server.resetHandlers()
+  mockedUseLocationParams.mockReturnValue({ params: {} })
 })
 
 afterAll(() => {
@@ -124,6 +123,9 @@ describe('App', () => {
           return res(ctx.status(200), ctx.json({}))
         }
       }),
+      rest.get('/internal/users/current', (req, res, ctx) => {
+        return res(ctx.status(200), ctx.json({}))
+      }),
       graphql.query('DetailOwner', (_, res, ctx) =>
         res(ctx.status(200), ctx.data({ owner: 'codecov' }))
       ),
@@ -132,6 +134,18 @@ describe('App', () => {
           return res(ctx.status(200), ctx.data(user))
         }
         return res(ctx.status(200), ctx.data({}))
+      }),
+      graphql.query('GetPlanData', (req, res, ctx) => {
+        return res(ctx.status(200), ctx.data({}))
+      }),
+      graphql.query('OwnerTier', (req, res, ctx) => {
+        return res(ctx.status(200), ctx.data({}))
+      }),
+      graphql.query('Seats', (req, res, ctx) => {
+        return res(ctx.status(200), ctx.data({}))
+      }),
+      graphql.query('HasAdmins', (req, res, ctx) => {
+        return res(ctx.status(200), ctx.data({}))
       })
     )
   }
@@ -313,17 +327,6 @@ describe('App', () => {
         },
       },
     ],
-    [
-      {
-        testLabel: 'SetupActionRedirect',
-        pathname: '/gh?setup_action=install',
-        expected: {
-          page: /OwnerPage/i,
-          location: '/gh/codecov',
-          search: '?setup_action=install',
-        },
-      },
-    ],
   ]
 
   describe.each(cloudFullRouterCases)(
@@ -539,6 +542,20 @@ describe('App', () => {
       await waitFor(() => expect(testLocation.pathname).toBe('/login'))
     })
   })
+
+  describe('user has setup action', () => {
+    it(`renders the setup action redirect page`, async () => {
+      mockedUseLocationParams.mockReturnValue({
+        params: { setup_action: 'install' },
+      })
+      setup({ hasLoggedInUser: true, hasSession: true })
+      render(<App />, { wrapper: wrapper(['/gh?setup_action=install']) })
+
+      await waitFor(() => expect(testLocation.pathname).toBe('/gh/codecov'))
+      const page = await screen.findByText(/OwnerPage/i)
+      expect(page).toBeInTheDocument()
+    })
+  })
   describe('user has session, not logged in', () => {
     it('redirects to session default', async () => {
       setup({ hasLoggedInUser: false, hasSession: true })
@@ -548,5 +565,17 @@ describe('App', () => {
         expect(testLocation.pathname).toBe('/cool-service/cool-guy')
       )
     })
+
+    it('redirects to plan page if to param === plan', async () => {
+      mockedUseLocationParams.mockReturnValue({
+        params: { to: 'plan' },
+      })
+      setup({ hasLoggedInUser: false, hasSession: true })
+
+      render(<App />, { wrapper: wrapper(['/blah']) })
+      await waitFor(() =>
+        expect(testLocation.pathname).toBe('/plan/cool-service/cool-guy')
+      )
+    })
   })
 })

src/App.tsx

@@ -38,20 +38,23 @@ const HomePageRedirect = () => {
   const { data: currentUser } = useUser()
   const { data: internalUser } = useInternalUser({})
   const { params } = useLocationParams()
+  // @ts-expect-error useLocationParams needs to be typed
+  const { setup_action: setupAction, to } = params
 
   let redirectURL = '/login'
 
   if (internalUser && internalUser.owners) {
     redirectURL = `/${internalUser.owners[0]?.service}/${internalUser.owners[0]?.username}`
+    if (to === 'plan') {
+      redirectURL = '/plan' + redirectURL
+    }
   }
 
   if (provider && isProvider(provider) && currentUser) {
     const defaultOrg =
       currentUser.owner?.defaultOrgUsername ?? currentUser.user?.username
     redirectURL = `/${provider}/${defaultOrg}`
 
-    // @ts-expect-error useLocationParams needs to be typed
-    const { setup_action: setupAction } = params
     if (setupAction) {
       redirectURL += `?setup_action=${setupAction}`
     }

src/layouts/Footer/Footer.jsx

@@ -40,7 +40,10 @@ function Footer() {
           ))}
         </ul>
         <A to={{ pageName: 'owner' }}>
-          <CodecovIcon className="mr-2 cursor-pointer text-ds-gray-quinary" />
+          <CodecovIcon
+            className="mr-2 cursor-pointer text-ds-gray-quinary"
+            fillColor="#68737e"
+          />
         </A>
         <ul className="flex flex-1 items-center justify-center gap-4 lg:justify-end">
           {rightMenu.map((props, i) => (

src/old_ui/Table/Table.spec.jsx

@@ -81,6 +81,7 @@ describe('Table', () => {
               header: 'Header 1',
               accessorKey: 'col1',
               cell: (info) => info.getValue(),
+              justifyStart: true,
             },
             {
               header: 'Header 2',

src/pages/AccountSettings/tabs/Access/Access.spec.jsx → src/pages/AccountSettings/tabs/Access/Access.spec.tsx

@@ -5,7 +5,7 @@ import { subDays } from 'date-fns'
 import { graphql } from 'msw'
 import { setupServer } from 'msw/node'
 import { Suspense } from 'react'
-import { MemoryRouter, Route } from 'react-router-dom'
+import { MemoryRouter, Route, useLocation } from 'react-router-dom'
 
 import Access from './Access'
 
@@ -55,8 +55,8 @@ const queryClient = new QueryClient({
 })
 const server = setupServer()
 
-let testLocation
-const wrapper =
+let testLocation: ReturnType<typeof useLocation>
+const wrapper: (initialEntries?: string) => React.FC<React.PropsWithChildren> =
   (initialEntries = '/account/gh/codecov-user/access') =>
   ({ children }) =>
     (
@@ -167,7 +167,7 @@ describe('AccessTab', () => {
 
         const revokeButtons = await screen.findAllByText(/Revoke/)
 
-        await user.click(revokeButtons[0])
+        await user.click(revokeButtons[0]!)
 
         await waitFor(() => expect(window.confirm).toHaveBeenCalled())
       })

src/pages/AccountSettings/tabs/Access/Access.jsx → src/pages/AccountSettings/tabs/Access/Access.tsx

@@ -9,8 +9,13 @@ import CreateTokenModal from './CreateTokenModal'
 import SessionsTable from './SessionsTable'
 import TokensTable from './TokensTable'
 
+interface URLParams {
+  provider: string
+  owner: string
+}
+
 function Access() {
-  const { provider, owner } = useParams()
+  const { provider, owner } = useParams<URLParams>()
   const [showModal, setShowModal] = useState(false)
 
   const { data: sessionData } = useSessions({
@@ -42,7 +47,12 @@ function Access() {
           </a>
           .
         </p>
-        <Button hook="generate-token" onClick={() => setShowModal(true)}>
+        <Button
+          hook="generate-token"
+          onClick={() => setShowModal(true)}
+          to={undefined}
+          disabled={false}
+        >
           Generate Token
         </Button>
         {showModal && (
@@ -54,9 +64,7 @@ function Access() {
       </div>
       <TokensTable tokens={sessionData?.tokens} />
       <h2 className="mb-4 mt-8 text-lg font-semibold">Login Sessions</h2>
-      <div className="max-w-screen-md">
-        <SessionsTable sessions={sessionData?.sessions} />
-      </div>
+      <SessionsTable sessions={sessionData?.sessions} />
     </div>
   )
 }