[feat] Place components selector in commit details file explorer

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

@@ -10,6 +10,8 @@ import Spinner from 'ui/Spinner'
 
 import { useRepoCommitContentsTable } from './hooks'
 
+import ComponentsSelector from '../ComponentsSelector'
+
 const Loader = () => (
   <div className="flex flex-1 justify-center">
     <Spinner size={60} />
@@ -36,12 +38,15 @@ function CommitDetailFileExplorer() {
           <DisplayTypeButton />
           <Breadcrumb paths={treePaths} />
         </div>
-        <SearchField
-          dataMarketing="commit-files-search"
-          placeholder="Search for files"
-          searchValue={params?.search}
-          setSearchValue={(search) => updateParams({ search })}
-        />
+        <div className="flex gap-2">
+          <ComponentsSelector />
+          <SearchField
+            dataMarketing="commit-files-search"
+            placeholder="Search for files"
+            searchValue={params?.search}
+            setSearchValue={(search) => updateParams({ search })}
+          />
+        </div>
       </ContentsTableHeader>
       <Table
         data={data}

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

@@ -7,6 +7,8 @@ import { MemoryRouter, Route } from 'react-router-dom'
 
 import CommitDetailFileExplorer from './CommitDetailFileExplorer'
 
+jest.mock('../ComponentsSelector', () => () => 'Components Selector')
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -181,6 +183,13 @@ describe('CommitDetailFileExplorer', () => {
         const coverage = await screen.findByText('Coverage %')
         expect(coverage).toBeInTheDocument()
       })
+
+      it('renders components selector', async () => {
+        render(<CommitDetailFileExplorer />, { wrapper: wrapper() })
+
+        const table = await screen.findByText('Components Selector')
+        expect(table).toBeInTheDocument()
+      })
     })
 
     describe('table is displaying file tree', () => {

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

@@ -153,13 +153,19 @@ const sortingParameter = Object.freeze({
 
 const getQueryFilters = ({ params, sortBy }) => {
   let flags = {}
+  let components = {}
   if (params?.flags) {
     flags = { flags: params?.flags }
   }
 
+  if (params?.components) {
+    components = { components: params?.components }
+  }
+
   return {
     ...(params?.search && { searchValue: params.search }),
     ...flags,
+    ...components,
     ...(params?.displayType && {
       displayType: displayTypeParameter[params?.displayType],
     }),

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

@@ -286,6 +286,42 @@ describe('useRepoCommitContentsTable', () => {
     })
   })
 
+  describe('when there is a flags and components param', () => {
+    beforeEach(() => {
+      useLocationParams.mockReturnValue({
+        params: { flags: ['flag-1'], components: ['component-1'] },
+      })
+    })
+
+    it('makes a gql request with the flags and components value', async () => {
+      setup({})
+
+      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'],
+          components: ['component-1'],
+
+          ordering: {
+            direction: 'ASC',
+            parameter: 'NAME',
+          },
+        },
+        name: 'test-org',
+        repo: 'test-repo',
+        path: '',
+      })
+    })
+  })
+
   describe('when handleSort is triggered', () => {
     beforeEach(() => {
       useLocationParams.mockReturnValue({

src/services/pathContents/commit/file/usePrefetchCommitFileEntry.spec.tsx

@@ -260,6 +260,34 @@ describe('usePrefetchCommitFileEntry', () => {
     })
   })
 
+  describe('flags and components arg is passed', () => {
+    it('fetches with passed variables', async () => {
+      const { mockVars } = setup({})
+      const { result } = renderHook(
+        () =>
+          usePrefetchCommitFileEntry({
+            commitSha: 'f00162848a3cebc0728d915763c2fd9e92132408',
+            path: 'src/file.js',
+            flags: ['flag-1', 'flag-2'],
+            components: ['c-1', 'c-2'],
+          }),
+        { wrapper }
+      )
+
+      await result.current.runPrefetch()
+
+      await waitFor(() => expect(mockVars).toBeCalled())
+      await waitFor(() =>
+        expect(mockVars).toHaveBeenCalledWith(
+          expect.objectContaining({
+            flags: ['flag-1', 'flag-2'],
+            components: ['c-1', 'c-2'],
+          })
+        )
+      )
+    })
+  })
+
   describe('returns NotFoundError __typename', () => {
     beforeEach(() => {
       jest.spyOn(console, 'error')

src/services/pathContents/commit/file/usePrefetchCommitFileEntry.tsx

@@ -17,21 +17,32 @@ interface UsePrefetchCommitFileEntryArgs {
   commitSha: string
   path: string
   flags?: Array<string>
+  components?: Array<string>
   options?: QueryOptions
 }
 
 export function usePrefetchCommitFileEntry({
   commitSha,
   path,
   flags = [],
+  components = [],
   options = {},
 }: UsePrefetchCommitFileEntryArgs) {
   const { provider, owner, repo } = useParams<URLParams>()
   const queryClient = useQueryClient()
 
   const runPrefetch = async () => {
     await queryClient.prefetchQuery({
-      queryKey: ['commit', provider, owner, repo, commitSha, path, flags],
+      queryKey: [
+        'commit',
+        provider,
+        owner,
+        repo,
+        commitSha,
+        path,
+        flags,
+        components,
+      ],
       queryFn: ({ signal }) => {
         return Api.graphql({
           provider,
@@ -44,6 +55,7 @@ export function usePrefetchCommitFileEntry({
             ref: commitSha,
             path,
             flags,
+            components,
           },
         }).then((res) => {
           const parsedRes = RequestSchema.safeParse(res?.data)

src/shared/ContentsTable/TableEntries/CommitEntries/CommitDirEntry.jsx

@@ -6,6 +6,7 @@ import DirEntry from '../BaseEntries/DirEntry'
 
 function CommitDirEntry({ commitSha, urlPath, name, filters }) {
   const flags = filters?.flags?.length > 0 ? filters?.flags : []
+  const components = filters?.components?.length > 0 ? filters?.components : []
 
   const { runPrefetch } = usePrefetchCommitDirEntry({
     commit: commitSha,
@@ -20,7 +21,7 @@ function CommitDirEntry({ commitSha, urlPath, name, filters }) {
       runPrefetch={runPrefetch}
       pageName="commitTreeView"
       commitSha={commitSha}
-      queryParams={{ flags }}
+      queryParams={{ flags, components }}
     />
   )
 }
@@ -36,6 +37,7 @@ CommitDirEntry.propTypes = {
     }),
     searchValue: PropTypes.any,
     flags: PropTypes.arrayOf(PropTypes.string),
+    components: PropTypes.arrayOf(PropTypes.string),
   }),
 }
 

src/shared/ContentsTable/TableEntries/CommitEntries/CommitDirEntry.spec.jsx

@@ -115,7 +115,7 @@ describe('CommitDirEntry', () => {
             commitSha="1234"
             name="dir"
             urlPath="path/to/directory"
-            filters={{ flags: ['flag-1'] }}
+            filters={{ flags: ['flag-1'], components: ['component-1'] }}
           />,
           { wrapper }
         )
@@ -124,7 +124,7 @@ describe('CommitDirEntry', () => {
         expect(a).toHaveAttribute(
           'href',
           `/gh/codecov/test-repo/commit/1234/tree/path/to/directory/dir${qs.stringify(
-            { flags: ['flag-1'] },
+            { flags: ['flag-1'], components: ['component-1'] },
             { addQueryPrefix: true }
           )}`
         )

src/shared/ContentsTable/TableEntries/CommitEntries/CommitFileEntry.jsx

@@ -15,11 +15,13 @@ function CommitFileEntry({
   filters,
 }) {
   const flags = filters?.flags?.length > 0 ? filters?.flags : []
+  const components = filters?.components?.length > 0 ? filters?.components : []
 
   const { runPrefetch } = usePrefetchCommitFileEntry({
     path,
     commitSha,
     flags,
+    components,
   })
 
   return (
@@ -32,7 +34,7 @@ function CommitFileEntry({
       path={path}
       runPrefetch={runPrefetch}
       pageName="commitFileDiff"
-      queryParams={{ flags }}
+      queryParams={{ flags, components }}
     />
   )
 }
@@ -46,6 +48,7 @@ CommitFileEntry.propTypes = {
   path: PropTypes.string,
   filters: PropTypes.shape({
     flags: PropTypes.arrayOf(PropTypes.string),
+    components: PropTypes.arrayOf(PropTypes.string),
   }),
 }
 

src/shared/ContentsTable/TableEntries/CommitEntries/CommitFileEntry.spec.jsx

@@ -128,6 +128,31 @@ describe('CommitFileEntry', () => {
         )
       })
     })
+
+    describe('filters with flags and components are passed', () => {
+      it('sets the correct query params', () => {
+        setup()
+        render(
+          <CommitFileEntry
+            commitSha="1234"
+            path="dir/file.js"
+            name="file.js"
+            urlPath="dir"
+            isCriticalFile={false}
+            displayType={displayTypeParameter.list}
+            filters={{ flags: ['flag-1'], components: ['component-test'] }}
+          />,
+          { wrapper }
+        )
+
+        const path = screen.getByRole('link', { name: 'dir/file.js' })
+        expect(path).toBeInTheDocument()
+        expect(path).toHaveAttribute(
+          'href',
+          '/gh/codecov/test-repo/commit/1234/blob/dir/file.js?flags%5B0%5D=flag-1&components%5B0%5D=component-test'
+        )
+      })
+    })
   })
 
   describe('checking properties on tree display', () => {