Auto expand pr table if param passed (#2783)

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,