From e6ac66588a89adad75b01e5a61b00ecb9b1769bf Mon Sep 17 00:00:00 2001
From: cpadm <57954026+cpAdm@users.noreply.github.com>
Date: Sat, 18 Oct 2025 22:40:15 +0200
Subject: [PATCH] feat(html-report): Keep query when clicking project filter
 and the ability to right-click

---
 packages/html-reporter/src/filter.ts             | 3 ++-
 packages/html-reporter/src/headerView.tsx        | 5 ++---
 packages/html-reporter/src/labels.tsx            | 3 +--
 packages/html-reporter/src/links.tsx             | 8 ++++----
 packages/html-reporter/src/reportView.tsx        | 6 +++---
 packages/html-reporter/src/testCaseView.spec.tsx | 8 ++++----
 6 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/html-reporter/src/filter.ts b/packages/html-reporter/src/filter.ts
index 7e54c98d4d0dd..c08350feba0e2 100644
--- a/packages/html-reporter/src/filter.ts
+++ b/packages/html-reporter/src/filter.ts
@@ -213,7 +213,8 @@ function cacheSearchValues(test: TestCaseSummary & { [searchValuesSymbol]?: Sear
 // Extract quoted groups of search params, or tokens separated by whitespace
 const SEARCH_PARAM_GROUP_REGEX = /("[^"]*"|"[^"]*$|\S+)/g;
 
-export function filterWithQuery(existingQuery: string, token: string, append: boolean): string {
+export function filterWithQuery(searchParams: URLSearchParams, token: string, append: boolean): string {
+  const existingQuery = searchParams.get('q') ?? '';
   const tokens = [...existingQuery.matchAll(SEARCH_PARAM_GROUP_REGEX)].map(m => {
     const rawValue = m[0];
     return rawValue.startsWith('"') && rawValue.endsWith('"') && rawValue.length > 1 ? rawValue.slice(1, rawValue.length - 1) : rawValue;
diff --git a/packages/html-reporter/src/headerView.tsx b/packages/html-reporter/src/headerView.tsx
index 471818876e0f8..9e39df53b8b4a 100644
--- a/packages/html-reporter/src/headerView.tsx
+++ b/packages/html-reporter/src/headerView.tsx
@@ -102,11 +102,10 @@ const NavLink: React.FC<{
   count: number,
 }> = ({ token, count }) => {
   const searchParams = React.useContext(SearchParamsContext);
-  const q = searchParams.get('q')?.toString() || '';
   const queryToken = `s:${token}`;
 
-  const clickUrl = filterWithQuery(q, queryToken, false);
-  const ctrlClickUrl = filterWithQuery(q, queryToken, true);
+  const clickUrl = filterWithQuery(searchParams, queryToken, false);
+  const ctrlClickUrl = filterWithQuery(searchParams, queryToken, true);
 
   const label = token.charAt(0).toUpperCase() + token.slice(1);
 
diff --git a/packages/html-reporter/src/labels.tsx b/packages/html-reporter/src/labels.tsx
index 253518eaa958d..bbac8d7cb0cae 100644
--- a/packages/html-reporter/src/labels.tsx
+++ b/packages/html-reporter/src/labels.tsx
@@ -60,8 +60,7 @@ const LabelsClickView: React.FC<{
 
   const onClickHandle = React.useCallback((e: React.MouseEvent, label: string) => {
     e.preventDefault();
-    const q = searchParams.get('q')?.toString() || '';
-    navigate(filterWithQuery(q, label, e.metaKey || e.ctrlKey));
+    navigate(filterWithQuery(searchParams, label, e.metaKey || e.ctrlKey));
   }, [searchParams]);
 
   return <>
diff --git a/packages/html-reporter/src/links.tsx b/packages/html-reporter/src/links.tsx
index 6e1451aded113..e9cbaa1b75a73 100644
--- a/packages/html-reporter/src/links.tsx
+++ b/packages/html-reporter/src/links.tsx
@@ -24,6 +24,7 @@ import { clsx, useFlash } from '@web/uiUtils';
 import { trace } from './icons';
 import { Expandable } from './expandable';
 import { Label } from './labels';
+import { filterWithQuery } from './filter';
 
 export function navigate(href: string | URL) {
   window.history.pushState({}, '', href);
@@ -61,10 +62,9 @@ export const LinkBadge: React.FunctionComponent<LinkProps & { dim?: boolean }> =
 export const ProjectLink: React.FunctionComponent<{
   projectNames: string[],
   projectName: string,
-}> = ({ projectNames, projectName }) => {
-  const encoded = encodeURIComponent(projectName);
-  const value = projectName === encoded ? projectName : `"${encoded.replace(/%22/g, '%5C%22')}"`;
-  return <Link href={`#?q=p:${value}`}>
+}> = ({  projectNames, projectName }) => {
+  const searchParams = React.useContext(SearchParamsContext);
+  return <Link click={filterWithQuery(searchParams, `p:${projectName}`, false)} ctrlClick={filterWithQuery(searchParams, `p:${projectName}`, true)}>
     <Label label={projectName} colorIndex={projectNames.indexOf(projectName) % 6} />
   </Link>;
 };
diff --git a/packages/html-reporter/src/reportView.tsx b/packages/html-reporter/src/reportView.tsx
index c21ded5c7d669..4cd5a4eba458c 100644
--- a/packages/html-reporter/src/reportView.tsx
+++ b/packages/html-reporter/src/reportView.tsx
@@ -90,11 +90,11 @@ export const ReportView: React.FC<{
           break;
         case 'p':
           event.preventDefault();
-          navigate(filterWithQuery(q, 's:passed', false));
+          navigate(filterWithQuery(searchParams, 's:passed', false));
           break;
         case 'f':
           event.preventDefault();
-          navigate(filterWithQuery(q, 's:failed', false));
+          navigate(filterWithQuery(searchParams, 's:failed', false));
           break;
         case 'ArrowLeft':
           if (prev) {
@@ -113,7 +113,7 @@ export const ReportView: React.FC<{
 
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [prev, next, filterParam, q]);
+  }, [prev, next, filterParam, q, searchParams]);
 
   React.useEffect(() => {
     if (reportTitle)
diff --git a/packages/html-reporter/src/testCaseView.spec.tsx b/packages/html-reporter/src/testCaseView.spec.tsx
index 36ceff484a366..fd26ca21a5f0d 100644
--- a/packages/html-reporter/src/testCaseView.spec.tsx
+++ b/packages/html-reporter/src/testCaseView.spec.tsx
@@ -216,7 +216,7 @@ test('should correctly render prev and next', async ({ mount }) => {
     - text: group
     - link "« previous"
     - link "next »"
-    - text: "My test test.spec.ts:42 10ms"
+    - text: "My test test.spec.ts:42 10ms chromium"
   `);
 });
 
@@ -241,17 +241,17 @@ const testCaseWithTwoAttempts: TestCase = {
 test('total duration is selected run duration', async ({ mount, page }) => {
   const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} testRunMetadata={{}} test={testCaseWithTwoAttempts} prev={undefined} next={undefined} run={0}></TestCaseView>);
   await expect(component).toMatchAriaSnapshot(`
-    - text: "My test test.spec.ts:42 200ms"
+    - text: "My test test.spec.ts:42 200ms chromium"
     - tablist:
       - tab "Run 50ms"
       - 'tab "Retry #1 150ms"'
   `);
   await page.getByRole('tab', { name: 'Run' }).click();
   await expect(component).toMatchAriaSnapshot(`
-    - text: "My test test.spec.ts:42 200ms"
+    - text: "My test test.spec.ts:42 200ms chromium"
   `);
   await page.getByRole('tab', { name: 'Retry' }).click();
   await expect(component).toMatchAriaSnapshot(`
-    - text: "My test test.spec.ts:42 200ms"
+    - text: "My test test.spec.ts:42 200ms chromium"
   `);
 });