Setup pull request page to pass around selected flags

src/pages/CommitDetailPage/CommitDetailPage.jsx

@@ -44,8 +44,8 @@ function CommitErrorBanners() {
 }
 
 function CommitDetailPage() {
-  const { provider, owner, repo, commit: commitSHA } = useParams()
-  const shortSHA = commitSHA?.slice(0, 7)
+  const { provider, owner, repo, commit: commitSha } = useParams()
+  const shortSHA = commitSha?.slice(0, 7)
 
   // reset cache when user navigates to the commit detail page
   const queryClient = useQueryClient()
@@ -55,7 +55,7 @@ function CommitDetailPage() {
     provider,
     owner,
     repo,
-    commitId: commitSHA,
+    commitId: commitSha,
   })
 
   if (
@@ -75,7 +75,7 @@ function CommitDetailPage() {
           { pageName: 'commits', text: 'commits' },
           {
             pageName: 'commit',
-            options: { commitSHA },
+            options: { commitSha },
             readOnly: true,
             text: shortSHA,
           },

src/pages/CommitDetailPage/CommitDetailPageContent/CommitDetailPageContent.jsx

@@ -27,13 +27,13 @@ const Loader = () => (
 )
 
 function CommitDetailPageContent() {
-  const { provider, owner, repo, commit: commitSHA } = useParams()
+  const { provider, owner, repo, commit: commitSha } = useParams()
 
   const { data: commitData } = useCommit({
     provider,
     owner,
     repo,
-    commitid: commitSHA,
+    commitid: commitSha,
   })
 
   const { erroredUploads } = extractUploads({
@@ -52,7 +52,7 @@ function CommitDetailPageContent() {
   return (
     <>
       <CommitPageTabs
-        commitSHA={commitSHA}
+        commitSha={commitSha}
         indirectChangedFilesCount={indirectChangedFilesCount}
         directChangedFilesCount={directChangedFilesCount}
       />

src/pages/CommitDetailPage/CommitDetailPageTabs/CommitDetailPageTabs.jsx

@@ -12,7 +12,7 @@ import ToggleHeader from 'ui/FileViewer/ToggleHeader'
 import TabNavigation from 'ui/TabNavigation'
 
 function CommitDetailPageTabs({
-  commitSHA,
+  commitSha,
   indirectChangedFilesCount,
   directChangedFilesCount,
 }) {
@@ -33,17 +33,17 @@ function CommitDetailPageTabs({
   })
 
   const blobPath = location.pathname.includes(
-    `/${provider}/${commitFileviewString({ owner, repo, commitSHA })}`
+    `/${provider}/${commitFileviewString({ owner, repo, commitSha })}`
   )
 
   const filePath = location.pathname.includes(
-    `/${provider}/${commitTreeviewString({ owner, repo, commitSHA })}`
+    `/${provider}/${commitTreeviewString({ owner, repo, commitSha })}`
   )
 
   let customLocation = undefined
   if (blobPath || filePath) {
     customLocation = {
-      pathname: `/${provider}/${owner}/${repo}/commit/${commitSHA}/tree`,
+      pathname: `/${provider}/${owner}/${repo}/commit/${commitSha}/tree`,
     }
   }
 
@@ -58,12 +58,12 @@ function CommitDetailPageTabs({
               <sup className="text-xs">{directChangedFilesCount}</sup>
             </>
           ),
-          options: { commit: commitSHA, queryParams },
+          options: { commit: commitSha, queryParams },
           exact: true,
         },
         {
           pageName: 'commitIndirectChanges',
-          options: { commit: commitSHA, queryParams },
+          options: { commit: commitSha, queryParams },
           children: (
             <>
               Indirect changes
@@ -74,7 +74,7 @@ function CommitDetailPageTabs({
         {
           pageName: 'commitTreeView',
           children: 'File explorer',
-          options: { commit: commitSHA, queryParams },
+          options: { commit: commitSha, queryParams },
           location: customLocation,
         },
       ]}
@@ -90,7 +90,7 @@ function CommitDetailPageTabs({
 }
 
 CommitDetailPageTabs.propTypes = {
-  commitSHA: PropTypes.string,
+  commitSha: PropTypes.string,
   indirectChangedFilesCount: PropTypes.number,
   directChangedFilesCount: PropTypes.number,
 }

src/pages/CommitDetailPage/CommitDetailSummary/hooks/useCommitForSummary.js

@@ -27,13 +27,13 @@ export function getCommitDataForSummary({
 }
 
 export function useCommitForSummary() {
-  const { provider, owner, repo, commit: commitSHA } = useParams()
+  const { provider, owner, repo, commit: commitSha } = useParams()
 
   const { data } = useCommit({
     provider,
     owner,
     repo,
-    commitid: commitSHA,
+    commitid: commitSha,
   })
 
   const compareWithParent = data?.commit?.compareWithParent

src/pages/CommitDetailPage/Header/Header.jsx

@@ -11,14 +11,14 @@ import { useCommitHeaderData } from './hooks'
 import PullLabel from './PullLabel'
 
 function Header() {
-  const { provider, owner, repo, commit: commitSHA } = useParams()
-  const shortSHA = commitSHA?.slice(0, 7)
+  const { provider, owner, repo, commit: commitSha } = useParams()
+  const shortSHA = commitSha?.slice(0, 7)
 
   const { data: headerData } = useCommitHeaderData({
     provider,
     owner,
     repo,
-    commitId: commitSHA,
+    commitId: commitSha,
   })
 
   const providerPullUrl = getProviderPullURL({
@@ -32,7 +32,7 @@ function Header() {
     provider,
     owner,
     repo,
-    commit: commitSHA,
+    commit: commitSha,
   })
 
   return (

src/pages/CommitDetailPage/subRoute/FilesChangedTab/FilesChangeTable/FilesChangedTable.jsx

@@ -148,13 +148,13 @@ RenderSubComponent.propTypes = {
 }
 
 function FilesChangedTable() {
-  const { provider, owner, repo, commit: commitSHA } = useParams()
+  const { provider, owner, repo, commit: commitSha } = useParams()
 
   const { data: commitData, isLoading } = useCommit({
     provider,
     owner,
     repo,
-    commitid: commitSHA,
+    commitid: commitSha,
     filters: {
       hasUnintendedChanges: false,
     },

src/pages/CommitDetailPage/subRoute/IndirectChangesTab/IndirectChangesTable/IndirectChangesTable.jsx

@@ -139,13 +139,13 @@ RenderSubComponent.propTypes = {
 }
 
 function IndirectChangesTable() {
-  const { provider, owner, repo, commit: commitSHA } = useParams()
+  const { provider, owner, repo, commit: commitSha } = useParams()
 
   const { data: commitData, isLoading } = useCommit({
     provider,
     owner,
     repo,
-    commitid: commitSHA,
+    commitid: commitSha,
     filters: {
       hasUnintendedChanges: true,
     },

src/pages/PullRequestPage/PullRequestPageTabs/PullRequestPageTabs.jsx

@@ -1,9 +1,11 @@
+import qs from 'qs'
 import { useLocation, useParams } from 'react-router-dom'
 
 import {
   pullFileviewString,
   pullTreeviewString,
 } from 'pages/PullRequestPage/utils'
+import { useFlags } from 'shared/featureFlags'
 import ToggleHeader from 'ui/FileViewer/ToggleHeader'
 import TabNavigation from 'ui/TabNavigation'
 
@@ -17,9 +19,14 @@ function PullRequestPageTabs() {
     directChangedFilesCount,
     commitsCount,
   } = useTabsCounts()
+  const { pullRequestPageFlagMultiSelect } = useFlags({
+    pullRequestPageFlagMultiSelect: false,
+  })
 
-  const { pathname } = useLocation()
+  const { pathname, search } = useLocation()
   const { provider, owner, repo, pullId } = useParams()
+  const searchParams = qs.parse(search, { ignoreQueryPrefix: true })
+  const flags = searchParams?.flags ?? []
 
   const blobPath = pathname.includes(
     `/${provider}/${pullFileviewString({ owner, repo, pullId })}`
@@ -47,6 +54,7 @@ function PullRequestPageTabs() {
               <sup className="text-xs">{directChangedFilesCount}</sup>
             </>
           ),
+          options: { queryParams: { flags } },
           exact: true,
         },
         {
@@ -57,6 +65,7 @@ function PullRequestPageTabs() {
               <sup className="text-xs">{indirectChangesCount}</sup>
             </>
           ),
+          options: { queryParams: { flags } },
         },
         {
           pageName: 'pullCommits',
@@ -66,6 +75,7 @@ function PullRequestPageTabs() {
               <sup className="text-xs">{commitsCount}</sup>
             </>
           ),
+          options: { queryParams: { flags } },
         },
         {
           pageName: 'pullFlags',
@@ -75,6 +85,7 @@ function PullRequestPageTabs() {
               <sup className="text-xs">{flagsCount}</sup>
             </>
           ),
+          options: { queryParams: { flags } },
         },
         {
           pageName: 'pullComponents',
@@ -84,15 +95,22 @@ function PullRequestPageTabs() {
               <sup className="text-xs">{componentsCount}</sup>
             </>
           ),
+          options: { queryParams: { flags } },
         },
         {
           pageName: 'pullTreeView',
           children: 'File explorer',
-          options: { pullId },
+          options: { pullId, queryParams: { flags } },
           location: customLocation,
         },
       ]}
-      component={<ToggleHeader coverageIsLoading={false} showHitCount={true} />}
+      component={
+        <ToggleHeader
+          coverageIsLoading={false}
+          showHitCount={true}
+          showFlagsSelect={pullRequestPageFlagMultiSelect}
+        />
+      }
     />
   )
 }

src/pages/PullRequestPage/PullRequestPageTabs/PullRequestPageTabs.spec.jsx

@@ -4,8 +4,12 @@ import { graphql } from 'msw'
 import { setupServer } from 'msw/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
+import { useFlags } from 'shared/featureFlags'
+
 import PullRequestPageTabs from './PullRequestPageTabs'
 
+jest.mock('shared/featureFlags')
+
 const mockCommits = {
   owner: {
     repository: {
@@ -77,13 +81,23 @@ afterAll(() => {
 })
 
 describe('PullRequestPageTabs', () => {
-  function setup() {
+  function setup(
+    { pullRequestPageFlagMultiSelect = false } = {
+      pullRequestPageFlagMultiSelect: false,
+    }
+  ) {
+    useFlags.mockReturnValue({
+      pullRequestPageFlagMultiSelect,
+    })
     server.use(
       graphql.query('PullPageData', (req, res, ctx) =>
         res(ctx.status(200), ctx.data(mockPullData))
       ),
       graphql.query('GetCommits', (req, res, ctx) =>
         res(ctx.status(200), ctx.data(mockCommits))
+      ),
+      graphql.query('BackfillFlagMemberships', (req, res, ctx) =>
+        res(ctx.status(200), ctx.data({}))
       )
     )
   }
@@ -285,4 +299,17 @@ describe('PullRequestPageTabs', () => {
       expect(legend).toBeInTheDocument()
     })
   })
+
+  // describe('flags select dropdown', () => {
+  //   beforeEach(() => setup({ pullRequestPageFlagMultiSelect: true }))
+
+  //   it('renders flags select dropdown', async () => {
+  //     render(<PullRequestPageTabs />, { wrapper: wrapper() })
+
+  //     const multiSelect = await screen.findByRole('button', {
+  //       name: 'All Flags',
+  //     })
+  //     expect(multiSelect).toBeInTheDocument()
+  //   })
+  // })
 })