feat: Add Flags Query Param to Parent Commit Link in Commit Summary (#…

…2318)

Small update to carry along query params flag to the compared against commit in the commit detail page summary.

GH codecov/engineering-team#674

src/pages/CommitDetailPage/CommitDetailSummary/CommitDetailSummary.jsx

@@ -1,67 +1,77 @@
+import qs from 'qs'
+import { useLocation } from 'react-router-dom'
+
 import { UploadStateEnum } from 'shared/utils/commit'
 import A from 'ui/A'
 import Summary from 'ui/Summary'
 import TotalsNumber from 'ui/TotalsNumber'
 
 import { useCommitForSummary } from './hooks'
 
-const getSourceSummaryCards = ({ headCommitId, parentCommitId, state }) =>
-  state?.toUpperCase() === UploadStateEnum.error
-    ? [
-        {
-          name: 'error',
-          value: (
-            <p className="max-w-sm border-l border-ds-gray-secondary pl-4 text-sm leading-5 text-ds-gray-quinary">
-              There is an error processing the coverage reports. Common issues
-              are{' '}
-              <A
-                hook="documentation for fixing paths"
-                isExternal
-                href="https://docs.codecov.com/docs/fixing-paths"
-              >
-                files paths
-              </A>
-              , empty files or expired reports. See error{' '}
-              <A
-                hook="documentation for commit errors"
-                isExternal
-                href="https://docs.codecov.com/docs/error-reference"
-              >
-                reference
-              </A>{' '}
-              page for additional troubleshooting to resolve error.
-            </p>
-          ),
-        },
-      ]
-    : [
-        {
-          name: 'source',
-          title: 'Source',
-          value:
-            headCommitId && parentCommitId ? (
-              <p className="text-sm text-ds-gray-octonary">
-                This commit{' '}
-                <span className="font-mono font-semibold">
-                  {headCommitId?.slice(0, 7)}
-                </span>{' '}
-                compared to{' '}
-                <A
-                  to={{
-                    pageName: 'commit',
-                    options: { commit: parentCommitId },
-                  }}
-                >
-                  {parentCommitId?.slice(0, 7)}
-                </A>{' '}
-              </p>
-            ) : (
-              // not really sure what to do here as value
-              // is a required field on the Summary type
-              <div />
-            ),
-        },
-      ]
+const getSourceSummaryCards = ({
+  headCommitId,
+  parentCommitId,
+  state,
+  flags,
+}) => {
+  if (state?.toUpperCase() === UploadStateEnum.error) {
+    return [
+      {
+        name: 'error',
+        value: (
+          <p className="max-w-sm border-l border-ds-gray-secondary pl-4 text-sm leading-5 text-ds-gray-quinary">
+            There is an error processing the coverage reports. Common issues are{' '}
+            <A
+              hook="documentation for fixing paths"
+              isExternal
+              href="https://docs.codecov.com/docs/fixing-paths"
+            >
+              files paths
+            </A>
+            , empty files or expired reports. See error{' '}
+            <A
+              hook="documentation for commit errors"
+              isExternal
+              href="https://docs.codecov.com/docs/error-reference"
+            >
+              reference
+            </A>{' '}
+            page for additional troubleshooting to resolve error.
+          </p>
+        ),
+      },
+    ]
+  }
+
+  return [
+    {
+      name: 'source',
+      title: 'Source',
+      value:
+        headCommitId && parentCommitId ? (
+          <p className="text-sm text-ds-gray-octonary">
+            This commit{' '}
+            <span className="font-mono font-semibold">
+              {headCommitId?.slice(0, 7)}
+            </span>{' '}
+            compared to{' '}
+            <A
+              to={{
+                pageName: 'commit',
+                options: { commit: parentCommitId, queryParams: { flags } },
+              }}
+            >
+              {parentCommitId?.slice(0, 7)}
+            </A>{' '}
+          </p>
+        ) : (
+          // not really sure what to do here as value
+          // is a required field on the Summary type
+          <div />
+        ),
+    },
+  ]
+}
 
 const getTotalsSummaryCards = ({
   headCoverage,
@@ -103,6 +113,13 @@ const getTotalsSummaryCards = ({
 ]
 
 function CommitDetailSummary() {
+  const location = useLocation()
+  const queryParams = qs.parse(location.search, {
+    ignoreQueryPrefix: true,
+    depth: 1,
+  })
+  const flags = queryParams?.flags ?? []
+
   const {
     headCoverage,
     headCommitId,
@@ -112,15 +129,21 @@ function CommitDetailSummary() {
     state,
   } = useCommitForSummary()
 
-  const fields = [
-    ...getTotalsSummaryCards({
-      headCoverage,
-      headCommitId,
-      patchCoverage,
-      changeCoverage,
-    }),
-    ...getSourceSummaryCards({ headCommitId, parentCommitId, state }),
-  ]
+  const totalSummaryCards = getTotalsSummaryCards({
+    headCoverage,
+    headCommitId,
+    patchCoverage,
+    changeCoverage,
+  })
+
+  const sourceSummaryCards = getSourceSummaryCards({
+    headCommitId,
+    parentCommitId,
+    state,
+    flags,
+  })
+
+  const fields = [...totalSummaryCards, ...sourceSummaryCards]
 
   return (
     <div className="border-b border-ds-gray-secondary pb-4">

src/pages/CommitDetailPage/CommitDetailSummary/CommitDetailSummary.spec.jsx

@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } from '@testing-library/react'
 import { graphql } from 'msw'
 import { setupServer } from 'msw/node'
+import qs from 'qs'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import CommitDetailSummary from './CommitDetailSummary'
@@ -83,20 +84,31 @@ const queryClient = new QueryClient({
 })
 const server = setupServer()
 
-const wrapper = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter initialEntries={['/gh/codecov/cool-repo/commit/sha256']}>
-      <Route path="/:provider/:owner/:repo/commit/:commit">{children}</Route>
-    </MemoryRouter>
-  </QueryClientProvider>
-)
+const wrapper =
+  (initialEntries = '/gh/codecov/cool-repo/commit/sha256') =>
+  ({ children }) =>
+    (
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[initialEntries]}>
+          <Route path="/:provider/:owner/:repo/commit/:commit">
+            {children}
+          </Route>
+        </MemoryRouter>
+      </QueryClientProvider>
+    )
+
+beforeAll(() => {
+  server.listen()
+})
 
-beforeAll(() => server.listen())
 afterEach(() => {
   queryClient.clear()
   server.resetHandlers()
 })
-afterAll(() => server.close())
+
+afterAll(() => {
+  server.close()
+})
 
 describe('CommitDetailSummary', () => {
   function setup(hasErrored = false) {
@@ -135,7 +147,7 @@ describe('CommitDetailSummary', () => {
 
     describe('renders a card for every valid field', () => {
       it('has a head card', async () => {
-        render(<CommitDetailSummary />, { wrapper })
+        render(<CommitDetailSummary />, { wrapper: wrapper() })
 
         const headCardTitle = await screen.findByText('HEAD')
         expect(headCardTitle).toBeInTheDocument()
@@ -145,7 +157,7 @@ describe('CommitDetailSummary', () => {
       })
 
       it('has a patch card', async () => {
-        render(<CommitDetailSummary />, { wrapper })
+        render(<CommitDetailSummary />, { wrapper: wrapper() })
 
         const patchCardTitle = await screen.findByText('Patch')
         expect(patchCardTitle).toBeInTheDocument()
@@ -155,7 +167,7 @@ describe('CommitDetailSummary', () => {
       })
 
       it('has a change card', async () => {
-        render(<CommitDetailSummary />, { wrapper })
+        render(<CommitDetailSummary />, { wrapper: wrapper() })
 
         const changeCardTitle = await screen.findByText('Change')
         expect(changeCardTitle).toBeInTheDocument()
@@ -165,7 +177,7 @@ describe('CommitDetailSummary', () => {
       })
 
       it('has a source card', async () => {
-        render(<CommitDetailSummary />, { wrapper })
+        render(<CommitDetailSummary />, { wrapper: wrapper() })
 
         const sourceCardTitle = await screen.findByText('Source')
         expect(sourceCardTitle).toBeInTheDocument()
@@ -192,7 +204,7 @@ describe('CommitDetailSummary', () => {
     })
 
     it('renders error message', async () => {
-      render(<CommitDetailSummary />, { wrapper })
+      render(<CommitDetailSummary />, { wrapper: wrapper() })
 
       const errorMsg = await screen.findByText(
         /There is an error processing the coverage reports/
@@ -201,7 +213,7 @@ describe('CommitDetailSummary', () => {
     })
 
     it('suggests support links', async () => {
-      render(<CommitDetailSummary />, { wrapper })
+      render(<CommitDetailSummary />, { wrapper: wrapper() })
 
       const pathFix = await screen.findByRole('link', {
         name: 'files paths external-link.svg',
@@ -220,4 +232,31 @@ describe('CommitDetailSummary', () => {
       )
     })
   })
+
+  describe('when rendered with a flag query param', () => {
+    it('appends flag query param to commit id link', async () => {
+      setup()
+
+      render(<CommitDetailSummary />, {
+        wrapper: wrapper(
+          `/gh/codecov/cool-repo/commit/sha256${qs.stringify(
+            { flags: ['flag-1'] },
+            { addQueryPrefix: true }
+          )}`
+        ),
+      })
+
+      const parentCommitId = await screen.findByText(
+        commit().parent.commitid.slice(0, 7)
+      )
+      expect(parentCommitId).toBeInTheDocument()
+      expect(parentCommitId).toHaveAttribute(
+        'href',
+        `/gh/codecov/cool-repo/commit/fc43199b07c52cf3d6c19b7cdb368f74387c38ab${qs.stringify(
+          { flags: ['flag-1'] },
+          { addQueryPrefix: true }
+        )}`
+      )
+    })
+  })
 })