Merge branch 'main' into th/run-preview-trigger

Author: thomasrockhu-codecov

README.md

@@ -30,6 +30,8 @@ To run the project in development mode
 > npm run start
 ```
 
+Note: The first run of `npm run start` may take 5-10 minutes to finish building.
+
 The page will reload when you make edits. There is a local proxy to the staging API so you can develop against it. You can overwrite it by creating a `.env.local` file with it with the following:
 
 ```
@@ -166,5 +168,4 @@ Read more at the [official documentation.](https://mswjs.io/docs/getting-started
 
 ## Contributing
 
-This repository, like all of Codecov's repositories, strives to follow our general [Contributing guidlines](https://github.com/codecov/contributing). If you're considering making a contribution to this repository, we encourage review of our Contributing guidelines first. 
-
+This repository, like all of Codecov's repositories, strives to follow our general [Contributing guidelines](https://github.com/codecov/contributing). If you're considering making a contribution to this repository, we encourage review of our Contributing guidelines first.

src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/FilesChangedTable/FilesChangedTable.spec.tsx

@@ -116,11 +116,14 @@ const mockPull = ({
 const server = setupServer()
 
 const wrapper =
-  (queryClient: QueryClient): React.FC<React.PropsWithChildren> =>
+  (
+    queryClient: QueryClient,
+    initialEntries = ['/gh/codecov/test-repo/pull/s2h5a6']
+  ): React.FC<React.PropsWithChildren> =>
   ({ children }) =>
     (
       <QueryClientProvider client={queryClient}>
-        <MemoryRouter initialEntries={['/gh/codecov/test-repo/pull/s2h5a6']}>
+        <MemoryRouter initialEntries={initialEntries}>
           <Route path="/:provider/:owner/:repo/pull/:pull">{children}</Route>
         </MemoryRouter>
       </QueryClientProvider>
@@ -374,6 +377,18 @@ describe('FilesChangedTable', () => {
       const pullFileDiff = await screen.findByText('FileDiff')
       expect(pullFileDiff).toBeInTheDocument()
     })
+
+    it('auto expands if param is passed in url', async () => {
+      const { queryClient } = setup()
+      render(<FilesChangedTable />, {
+        wrapper: wrapper(queryClient, [
+          '/gh/codecov/test-repo/pull/s2h5a6?filepath=flag1/mafs.js',
+        ]),
+      })
+
+      const pullFileDiff = await screen.findByText('FileDiff')
+      expect(pullFileDiff).toBeInTheDocument()
+    })
   })
 
   describe('highlights critical files', () => {

src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/FilesChangedTable/FilesChangedTable.tsx

@@ -12,8 +12,9 @@ import {
 import cs from 'classnames'
 import isEmpty from 'lodash/isEmpty'
 import isNumber from 'lodash/isNumber'
-import { Fragment, lazy, Suspense, useMemo, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import qs from 'qs'
+import { Fragment, lazy, Suspense, useEffect, useMemo, useState } from 'react'
+import { useLocation , useParams } from 'react-router-dom'
 
 import {
   ImpactedFile,
@@ -246,6 +247,11 @@ export default function FilesChangedTable() {
     { id: 'missedLines', desc: true },
   ])
   const { provider, owner, repo, pullId } = useParams<URLParams>()
+  const location = useLocation()
+  const params = qs.parse(location.search, {
+    ignoreQueryPrefix: true,
+  })
+  const currentlySelectedFile = params.filepath
 
   const { data: pullData, isLoading } = usePull({
     provider,
@@ -274,6 +280,19 @@ export default function FilesChangedTable() {
     return []
   }, [pullData?.pull?.compareWithBase])
 
+  useEffect(() => {
+    if (data.length > 0 && currentlySelectedFile) {
+      const fileToExpandIndex = data.findIndex(
+        (file) => file && file.headName === currentlySelectedFile
+      )
+      if (fileToExpandIndex !== -1) {
+        setExpanded({
+          [fileToExpandIndex]: true,
+        })
+      }
+    }
+  }, [data, currentlySelectedFile])
+
   const table = useReactTable({
     columns: getColumns({ pullId }),
     data,

src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/TableTeam/TableTeam.spec.tsx

@@ -221,11 +221,14 @@ const mockNoChangeFileData = {
 const server = setupServer()
 
 const wrapper =
-  (queryClient: QueryClient): React.FC<React.PropsWithChildren> =>
+  (
+    queryClient: QueryClient,
+    initialEntries = ['/gh/codecov/test-repo/pull/s2h5a6']
+  ): React.FC<React.PropsWithChildren> =>
   ({ children }) =>
     (
       <QueryClientProvider client={queryClient}>
-        <MemoryRouter initialEntries={['/gh/codecov/test-repo/pull/s2h5a6']}>
+        <MemoryRouter initialEntries={initialEntries}>
           <Route path="/:provider/:owner/:repo/pull/:pull">{children}</Route>
         </MemoryRouter>
       </QueryClientProvider>
@@ -425,6 +428,18 @@ describe('TableTeam', () => {
       const pullFileDiff = await screen.findByText('FileDiff')
       expect(pullFileDiff).toBeInTheDocument()
     })
+
+    it('auto expands if param is passed in url', async () => {
+      const { queryClient } = setup()
+      render(<TableTeam />, {
+        wrapper: wrapper(queryClient, [
+          '/gh/codecov/test-repo/pull/s2h5a6?filepath=src/App.jsx',
+        ]),
+      })
+
+      const pullFileDiff = await screen.findByText('FileDiff')
+      expect(pullFileDiff).toBeInTheDocument()
+    })
   })
 
   describe('highlights critical files', () => {

src/pages/PullRequestPage/PullCoverage/routes/FilesChangedTab/FilesChanged/TableTeam/TableTeam.tsx

@@ -11,8 +11,9 @@ import {
 } from '@tanstack/react-table'
 import cs from 'classnames'
 import isEmpty from 'lodash/isEmpty'
-import { Fragment, lazy, Suspense, useMemo, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import qs from 'qs'
+import { Fragment, lazy, Suspense, useEffect, useMemo, useState } from 'react'
+import { useLocation , useParams } from 'react-router-dom'
 
 import {
   ImpactedFile,
@@ -174,6 +175,12 @@ export default function FilesChangedTableTeam() {
     mostRecentCompare = pullData?.pull?.compareWithBase
   }
 
+  const location = useLocation()
+  const params = qs.parse(location.search, {
+    ignoreQueryPrefix: true,
+  })
+  const currentlySelectedFile = params.filepath
+
   const data = useMemo(() => {
     if (
       pullData?.pull?.compareWithBase?.__typename === 'Comparison' &&
@@ -185,6 +192,19 @@ export default function FilesChangedTableTeam() {
     return []
   }, [pullData?.pull?.compareWithBase])
 
+  useEffect(() => {
+    if (data.length > 0 && currentlySelectedFile) {
+      const fileToExpandIndex = data.findIndex(
+        (file) => file && file.headName === currentlySelectedFile
+      )
+      if (fileToExpandIndex !== -1) {
+        setExpanded({
+          [fileToExpandIndex]: true,
+        })
+      }
+    }
+  }, [data, currentlySelectedFile])
+
   const table = useReactTable({
     columns: getColumns({ pullId }),
     data,

src/pages/RepoPage/ComponentsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.spec.tsx

@@ -63,14 +63,10 @@ describe('TriggerSyncBanner', () => {
       render(<TriggerSyncBanner />, { wrapper })
 
       const enableAnalyticsText = screen.getByText(
-        'You need to enable Component analytics to see coverage data'
+        'You will need to enable components to see related coverage data.'
       )
       expect(enableAnalyticsText).toBeInTheDocument()
-      expect(
-        screen.getByText(
-          'Component analytics is disabled by default. Enable this feature below to see all your historical coverage data and coverage trend for each component.'
-        )
-      ).toBeInTheDocument()
+      expect(screen.getByText('No data to display')).toBeInTheDocument()
       expect(screen.getByText('Enable component analytics')).toBeInTheDocument()
     })
 

src/pages/RepoPage/ComponentsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.tsx

@@ -1,11 +1,7 @@
 import { useParams } from 'react-router-dom'
 
 import { MEASUREMENT_TYPE, useActivateMeasurements } from 'services/repo'
-import Banner from 'ui/Banner'
-import BannerContent from 'ui/Banner/BannerContent'
-import BannerHeading from 'ui/Banner/BannerHeading'
 import Button from 'ui/Button'
-import Icon from 'ui/Icon'
 
 type URLParams = {
   provider: string
@@ -23,37 +19,22 @@ function TriggerSyncBanner() {
   })
 
   return (
-    <div className="py-4">
-      <Banner variant="plain">
-        <BannerHeading>
-          <div className="flex items-center gap-2">
-            <Icon name="informationCircle" />
-            <h2 className="font-semibold">
-              You need to enable Component analytics to see coverage data
-            </h2>
-          </div>
-        </BannerHeading>
-        <BannerContent>
-          <div className="flex flex-col gap-4">
-            <p>
-              Component analytics is disabled by default. Enable this feature
-              below to see all your historical coverage data and coverage trend
-              for each component.
-            </p>
-            <div className="flex self-start">
-              <Button
-                to={undefined}
-                hook="backfill-task"
-                variant="primary"
-                onClick={mutate}
-                disabled={false}
-              >
-                Enable component analytics
-              </Button>
-            </div>
-          </div>
-        </BannerContent>
-      </Banner>
+    <div className="mt-12 grid gap-4">
+      <div className="flex flex-col items-center gap-1">
+        <p>No data to display</p>
+        <p>You will need to enable components to see related coverage data.</p>
+      </div>
+      <div className="flex flex-col items-center">
+        <Button
+          to={undefined}
+          hook="backfill-task"
+          variant="primary"
+          onClick={mutate}
+          disabled={false}
+        >
+          Enable component analytics
+        </Button>
+      </div>
     </div>
   )
 }

src/pages/RepoPage/ComponentsTab/ComponentsTab.jsx

@@ -5,7 +5,6 @@ import { SentryRoute } from 'sentry'
 import { useRepoSettingsTeam } from 'services/repo'
 import { TierNames, useTier } from 'services/tier'
 
-import blurredTable from './assets/blurredTable.png'
 import BackfillBanners from './BackfillBanners/BackfillBanners'
 import { useRepoBackfillingStatus } from './BackfillBanners/hooks'
 import Header from './Header'
@@ -56,16 +55,10 @@ function ComponentsTab() {
         {showComponentsTable({
           componentsMeasurementsActive,
           componentsMeasurementsBackfilled,
-        }) ? (
+        }) && (
           <SentryRoute path="/:provider/:owner/:repo/components" exact>
             <ComponentsTable />
           </SentryRoute>
-        ) : (
-          <img
-            alt="Blurred components table"
-            src={blurredTable}
-            className="h-auto max-w-full"
-          />
         )}
       </div>
     </div>

src/pages/RepoPage/ComponentsTab/ComponentsTab.spec.jsx

@@ -242,14 +242,6 @@ describe('Components Tab', () => {
       const syncingBanner = screen.queryByText(/Syncing Banner/)
       expect(syncingBanner).not.toBeInTheDocument()
     })
-
-    it('renders a blurred image of the table', async () => {
-      render(<ComponentsTab />, { wrapper })
-      const blurredComponentsTableImage = await screen.findByRole('img', {
-        name: /Blurred components table/,
-      })
-      expect(blurredComponentsTableImage).toBeInTheDocument()
-    })
   })
 
   describe('when rendered while ongoing syncing', () => {
@@ -277,14 +269,6 @@ describe('Components Tab', () => {
       const syncingBanner = await screen.findByText(/Syncing Banner/)
       expect(syncingBanner).toBeInTheDocument()
     })
-
-    it('renders a blurred image of the table', async () => {
-      render(<ComponentsTab />, { wrapper })
-      const blurredComponentsTableImage = await screen.findByRole('img', {
-        name: /Blurred components table/,
-      })
-      expect(blurredComponentsTableImage).toBeInTheDocument()
-    })
   })
 
   describe('when rendered with backfilled repo', () => {

src/services/repo/useRepoComponents.tsx

@@ -218,6 +218,7 @@ export function useRepoComponents({
         interval,
         after,
         before,
+        branch,
         signal,
       }),
     ...opts,