feat: Update Commit Detail Page File Explorer Tab to Grab Selected Flags

src/pages/CommitDetailPage/subRoute/CommitDetailFileExplorer/CommitDetailFileExplorer.jsx

@@ -27,6 +27,8 @@
   const { params, updateParams } = useLocationParams(defaultQueryParams)
   const { treePaths } = useCommitTreePaths()
 
+  const hasFlagsSelected = params?.flags?.length > 0
+
   return (
     <div className="mt-2 flex flex-col gap-2">
       <ContentsTableHeader>
@@ -49,7 +51,10 @@
       />
       {isLoading && <Loader />}
       {data?.length === 0 && !isLoading && (
-        <MissingFileData isSearching={isSearching} />
+        <MissingFileData
+          isSearching={isSearching}
+          hasFlagsSelected={hasFlagsSelected}
+        />
       )}
     </div>
   )

src/pages/CommitDetailPage/subRoute/CommitDetailFileExplorer/hooks/useRepoCommitContentsTable.js

@@ -10,6 +10,7 @@
 import CommitFileEntry from 'shared/ContentsTable/TableEntries/CommitEntries/CommitFileEntry'
 import { useTableDefaultSort } from 'shared/ContentsTable/useTableDefaultSort'
 import { adjustListIfUpDir } from 'shared/ContentsTable/utils'
+import { useFlags } from 'shared/featureFlags'
 import { useCommitTreePaths } from 'shared/treePaths'
 import { determineProgressColor } from 'shared/utils/determineProgressColor'
 import CoverageProgress from 'ui/CoverageProgress'
@@ -151,9 +152,15 @@
   lines: 'LINES',
 })
 
-const getQueryFilters = ({ params, sortBy }) => {
+const getQueryFilters = ({ params, sortBy, enableFlags }) => {
+  let flags = {}
+  if (params?.flags && enableFlags) {
+    flags = { flags: params?.flags }
+  }
+
   return {
     ...(params?.search && { searchValue: params.search }),
+    ...flags,
     ...(params?.displayType && {
       displayType: displayTypeParameter[params?.displayType],
     }),
@@ -172,14 +179,22 @@
   const { treePaths } = useCommitTreePaths()
   const [sortBy, setSortBy] = useTableDefaultSort()
 
+  const { commitTabFlagMultiSelect } = useFlags({
+    commitTabFlagMultiSelect: false,
+  })
+
   const { data: commitData, isLoading: commitIsLoading } =
     useRepoCommitContents({
       provider,
       owner,
       repo,
       commit,
       path: urlPath || '',
-      filters: getQueryFilters({ params, sortBy: sortBy[0] }),
+      filters: getQueryFilters({
+        params,
+        sortBy: sortBy[0],
+        enableFlags: commitTabFlagMultiSelect,
+      }),
       opts: {
         suspense: false,
       },

src/pages/CommitDetailPage/subRoute/CommitDetailFileExplorer/hooks/useRepoCommitContentsTable.spec.js

@@ -6,9 +6,11 @@ import { MemoryRouter, Route } from 'react-router-dom'
 import { act } from 'react-test-renderer'
 
 import { useLocationParams } from 'services/navigation'
+import { useFlags } from 'shared/featureFlags'
 
 import { useRepoCommitContentsTable } from './useRepoCommitContentsTable'
 
+jest.mock('shared/featureFlags')
 jest.mock('services/navigation', () => ({
   ...jest.requireActual('services/navigation'),
   useLocationParams: jest.fn(),
@@ -98,7 +100,13 @@ afterAll(() => {
 describe('useRepoCommitContentsTable', () => {
   const calledCommitContents = jest.fn()
 
-  function setup({ noData } = { noData: false }) {
+  function setup(
+    { noData = false, flagValue = false } = { noData: false, flagValue: false }
+  ) {
+    useFlags.mockReturnValue({
+      commitTabFlagMultiSelect: flagValue,
+    })
+
     server.use(
       graphql.query('CommitPathContents', (req, res, ctx) => {
         calledCommitContents(req?.variables)
@@ -252,6 +260,42 @@ describe('useRepoCommitContentsTable', () => {
     })
   })
 
+  describe('when there is a flags param', () => {
+    describe('feature flag is turned on', () => {
+      beforeEach(() => {
+        useLocationParams.mockReturnValue({
+          params: { flags: ['flag-1'] },
+        })
+      })
+
+      it('makes a gql request with the flags value', async () => {
+        setup({ flagValue: true })
+
+        const { result } = renderHook(() => useRepoCommitContentsTable(), {
+          wrapper: wrapper(),
+        })
+
+        await waitFor(() => result.current.isLoading)
+        await waitFor(() => !result.current.isLoading)
+
+        expect(calledCommitContents).toHaveBeenCalled()
+        expect(calledCommitContents).toHaveBeenCalledWith({
+          commit: 'sha256',
+          filters: {
+            flags: ['flag-1'],
+            ordering: {
+              direction: 'ASC',
+              parameter: 'NAME',
+            },
+          },
+          name: 'test-org',
+          repo: 'test-repo',
+          path: '',
+        })
+      })
+    })
+  })
+
   describe('when handleSort is triggered', () => {
     beforeEach(() => {
       useLocationParams.mockReturnValue({

src/shared/ContentsTable/MissingFileData/MissingFileData.jsx

@@ -1,10 +1,19 @@
 import PropTypes from 'prop-types'
 
-function MissingFileData({ isSearching }) {
+function MissingFileData({ isSearching, hasFlagsSelected }) {
   if (isSearching) {
     return <p className="flex flex-1 justify-center">No results found</p>
   }
 
+  if (hasFlagsSelected) {
+    return (
+      <p className="flex flex-1 justify-center">
+        No coverage report uploaded for the selected flags in this branch&apos;s
+        head commit
+      </p>
+    )
+  }
+
   return (
     <p className="flex flex-1 justify-center">
       There was a problem getting repo contents from your provider
@@ -14,6 +23,7 @@ function MissingFileData({ isSearching }) {
 
 MissingFileData.propTypes = {
   isSearching: PropTypes.bool,
+  hasFlagsSelected: PropTypes.bool,
 }
 
 export default MissingFileData

src/shared/ContentsTable/MissingFileData/MissingFileData.spec.jsx

@@ -3,6 +3,13 @@ import { render, screen } from '@testing-library/react'
 import MissingFileData from './MissingFileData'
 
 describe('MissingFileData', () => {
+  it('displays problem fetching contents', () => {
+    render(<MissingFileData />)
+
+    const problem = screen.getByText(/problem getting repo contents/)
+    expect(problem).toBeInTheDocument()
+  })
+
   describe('when isSearching is true', () => {
     it('displays no results found', () => {
       render(<MissingFileData isSearching={true} />)
@@ -12,12 +19,14 @@ describe('MissingFileData', () => {
     })
   })
 
-  describe('when isSearching is false', () => {
-    it('displays problem fetching contents', () => {
-      render(<MissingFileData isSearching={false} />)
+  describe('when hasFlagsSelected is true', () => {
+    it('displays no results with selected flags found', () => {
+      render(<MissingFileData hasFlagsSelected={true} />)
 
-      const problem = screen.getByText(/problem getting repo contents/)
-      expect(problem).toBeInTheDocument()
+      const noResults = screen.getByText(
+        "No coverage report uploaded for the selected flags in this branch's head commit"
+      )
+      expect(noResults).toBeInTheDocument()
     })
   })
 })