feat: Update files explorer tab with components selector

src/pages/PullRequestPage/subroute/FileExplorer/FileExplorer.jsx

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

src/pages/PullRequestPage/subroute/FileExplorer/FileExplorer.spec.jsx

@@ -7,6 +7,8 @@ import { MemoryRouter, Route } from 'react-router-dom'
 
 import FileExplorer from './FileExplorer'
 
+jest.mock('../ComponentsSelector', () => () => 'ComponentsSelector')
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -194,6 +196,16 @@ describe('FileExplorer', () => {
       })
     })
 
+    describe('when rendered', () => {
+      it('renders ComponentsSelector', async () => {
+        setup()
+        render(<FileExplorer />, { wrapper: wrapper() })
+
+        const selector = await screen.findByText('ComponentsSelector')
+        expect(selector).toBeInTheDocument()
+      })
+    })
+
     describe('table is displaying file tree', () => {
       describe('default sort is set', () => {
         it('sets default sort to name asc', async () => {

src/pages/PullRequestPage/subroute/FileExplorer/hooks/useRepoPullContentsTable.js

@@ -153,7 +153,7 @@
   lines: 'LINES',
 })
 
-const getQueryFilters = ({ params, sortBy, flags }) => {
+const getQueryFilters = ({ params, sortBy, flags, components }) => {
   return {
     ...(params?.search && { searchValue: params.search }),
     ...(params?.displayType && {
@@ -166,6 +166,7 @@
       },
     }),
     ...(flags ? { flags } : {}),
+    ...(components ? { components } : {}),
   }
 }
 
@@ -177,6 +178,8 @@
     depth: 1,
   })
   const flags = queryParams?.flags
+  const components = queryParams?.components
+
   const { params } = useLocationParams(defaultQueryParams)
   const { treePaths } = usePullTreePaths()
   const [sortBy, setSortBy] = useTableDefaultSort()
@@ -187,7 +190,7 @@
     repo,
     pullId,
     path: urlPath || '',
-    filters: getQueryFilters({ params, sortBy: sortBy[0], flags }),
+    filters: getQueryFilters({ params, sortBy: sortBy[0], flags, components }),
     opts: {
       suspense: false,
     },

src/pages/PullRequestPage/subroute/FileExplorer/hooks/useRepoPullContentsTable.spec.js

@@ -258,6 +258,63 @@ describe('useRepoPullContentsTable', () => {
     })
   })
 
+  describe('when called with a selected components', () => {
+    it('makes a gql request with the list param', async () => {
+      const { variablesPassed } = setup()
+      const { result } = renderHook(() => useRepoPullContentsTable(), {
+        wrapper: wrapper([
+          '/gh/test-org/test-repo/pull/123/tree?components=a,b',
+        ]),
+      })
+
+      await waitFor(() => result.current.isLoading)
+      await waitFor(() => !result.current.isLoading)
+
+      expect(variablesPassed).toHaveBeenCalledWith({
+        pullId: 123,
+        filters: {
+          components: 'a,b',
+          ordering: {
+            direction: 'ASC',
+            parameter: 'NAME',
+          },
+        },
+        owner: 'test-org',
+        repo: 'test-repo',
+        path: '',
+      })
+    })
+  })
+
+  describe('when called with a selected flags and components', () => {
+    it('makes a gql request with the list param', async () => {
+      const { variablesPassed } = setup()
+      const { result } = renderHook(() => useRepoPullContentsTable(), {
+        wrapper: wrapper([
+          '/gh/test-org/test-repo/pull/123/tree?flags=a&components=b',
+        ]),
+      })
+
+      await waitFor(() => result.current.isLoading)
+      await waitFor(() => !result.current.isLoading)
+
+      expect(variablesPassed).toHaveBeenCalledWith({
+        pullId: 123,
+        filters: {
+          flags: 'a',
+          components: 'b',
+          ordering: {
+            direction: 'ASC',
+            parameter: 'NAME',
+          },
+        },
+        owner: 'test-org',
+        repo: 'test-repo',
+        path: '',
+      })
+    })
+  })
+
   describe('when handleSort is triggered', () => {
     it('makes a gql request with the updated params', async () => {
       const { variablesPassed } = setup()