fix(ui): dont mutate searchparams (#38275)

Author: Skn0tt

packages/html-reporter/src/headerView.tsx

@@ -20,7 +20,7 @@ import './colors.css';
 import './common.css';
 import './headerView.css';
 import * as icons from './icons';
-import { Link, navigate, SearchParamsContext } from './links';
+import { Link, navigate, useSearchParams } from './links';
 import { statusIcon } from './statusIcon';
 import { filterWithQuery } from './filter';
 import { linkifyText } from '@web/renderUtils';
@@ -48,12 +48,12 @@ export const GlobalFilterView: React.FC<{
   filterText: string,
   setFilterText: (filterText: string) => void,
 }> = ({ stats, filterText, setFilterText }) => {
-  const searchParams = React.useContext(SearchParamsContext);
+  const searchParams = useSearchParams();
   React.useEffect(() => {
     // Add an extra space such that users can easily add to query
     const query = searchParams.get('q');
     setFilterText(query ? `${query.trim()} ` : '');
-  }, [searchParams, setFilterText]);
+  }, [searchParams.toString(), setFilterText]);
 
   return (<>
     <div className='pt-3'>
@@ -89,7 +89,7 @@ export const GlobalFilterView: React.FC<{
 const StatsNavView: React.FC<{
   stats: Stats
 }> = ({ stats }) => {
-  const searchParams = React.useContext(SearchParamsContext);
+  const searchParams = useSearchParams();
 
   return <nav>
     <Link className='subnav-item' href='#?'>
@@ -111,7 +111,7 @@ const NavLink: React.FC<{
   token: string,
   count: number,
 }> = ({ token, count }) => {
-  const searchParams = new URLSearchParams(React.useContext(SearchParamsContext));
+  const searchParams = useSearchParams();
   searchParams.delete('speedboard');
   searchParams.delete('testId');
 

packages/html-reporter/src/labels.tsx

@@ -17,7 +17,7 @@
 import * as React from 'react';
 import { clsx } from '@web/uiUtils';
 import { formatUrl, hashStringToInt } from './utils';
-import { navigate, ProjectLink, SearchParamsContext } from './links';
+import { navigate, ProjectLink, useSearchParams } from './links';
 import { filterWithQuery } from './filter';
 import './labels.css';
 
@@ -55,7 +55,7 @@ export const ProjectAndTagLabelsView: React.FC<{
 const LabelsClickView: React.FC<{
   labels: string[],
 }> = ({ labels }) => {
-  const searchParams = React.useContext(SearchParamsContext);
+  const searchParams = useSearchParams();
 
   const onClickHandle = React.useCallback((e: React.MouseEvent, label: string) => {
     e.preventDefault();

packages/html-reporter/src/links.tsx

@@ -37,7 +37,7 @@ export const Route: React.FunctionComponent<{
   predicate: (params: URLSearchParams) => boolean,
   children: any
 }> = ({ predicate, children }) => {
-  const searchParams = React.useContext(SearchParamsContext);
+  const searchParams = useSearchParams();
   return predicate(searchParams) ? children : null;
 };
 
@@ -64,7 +64,7 @@ export const ProjectLink: React.FunctionComponent<{
   projectNames: string[],
   projectName: string,
 }> = ({  projectNames, projectName }) => {
-  const searchParams = React.useContext(SearchParamsContext);
+  const searchParams = useSearchParams();
   if (searchParams.has('testId'))
     searchParams.delete('speedboard');
   searchParams.delete('testId');
@@ -153,7 +153,11 @@ export const TraceLink: React.FC<{ test: TestCaseSummary, trailingSeparator?: bo
   );
 };
 
-export const SearchParamsContext = React.createContext<URLSearchParams>(new URLSearchParams(window.location.hash.slice(1)));
+const SearchParamsContext = React.createContext<URLSearchParams>(new URLSearchParams(window.location.hash.slice(1)));
+
+export function useSearchParams() {
+  return new URLSearchParams(React.useContext(SearchParamsContext));
+}
 
 export const SearchParamsProvider: React.FunctionComponent<React.PropsWithChildren> = ({ children }) => {
   const [searchParams, setSearchParams] = React.useState<URLSearchParams>(new URLSearchParams(window.location.hash.slice(1)));
@@ -185,7 +189,7 @@ const kMissingContentType = 'x-playwright/missing';
 export type AnchorID = string | string[] | ((id: string) => boolean) | undefined;
 
 export function useAnchor(id: AnchorID, onReveal: React.EffectCallback) {
-  const searchParams = React.useContext(SearchParamsContext);
+  const searchParams = useSearchParams();
   const isAnchored = useIsAnchored(id);
   React.useEffect(() => {
     if (isAnchored)
@@ -194,7 +198,7 @@ export function useAnchor(id: AnchorID, onReveal: React.EffectCallback) {
 }
 
 export function useIsAnchored(id: AnchorID) {
-  const searchParams = React.useContext(SearchParamsContext);
+  const searchParams = useSearchParams();
   const anchor = searchParams.get('anchor');
   if (anchor === null)
     return false;

packages/html-reporter/src/metadataView.tsx

@@ -23,8 +23,8 @@ import type { Metadata } from '@playwright/test';
 import type { CIInfo, GitCommitInfo, MetadataWithCommitInfo } from '@testIsomorphic/types';
 import { CopyToClipboardContainer } from './copyToClipboard';
 import { linkifyText } from '@web/renderUtils';
-import { SearchParamsContext } from './links';
 import { formatUrl } from './utils';
+import { useSearchParams } from './links';
 
 class ErrorBoundary extends React.Component<React.PropsWithChildren<{}>, { error: Error | null, errorInfo: React.ErrorInfo | null }> {
   override state: { error: Error | null, errorInfo: React.ErrorInfo | null } = {
@@ -57,7 +57,7 @@ export const MetadataView: React.FC<{ metadata: Metadata }> = params => {
 };
 
 const InnerMetadataView: React.FC<{ metadata: Metadata }> = params => {
-  const searchParams = React.useContext(SearchParamsContext);
+  const searchParams = useSearchParams();
   const commitInfo = params.metadata as MetadataWithCommitInfo;
   const otherEntries = searchParams.has('show-metadata-other') ? Object.entries(params.metadata).filter(([key]) => !ignoreKeys.has(key)) : [];
   const hasMetadata = commitInfo.ci || commitInfo.gitCommit || otherEntries.length > 0;

packages/html-reporter/src/reportView.tsx

@@ -20,7 +20,7 @@ import './colors.css';
 import './common.css';
 import { Filter, filterWithQuery } from './filter';
 import { HeaderView, GlobalFilterView } from './headerView';
-import { navigate, Route, SearchParamsContext, testResultHref } from './links';
+import { navigate, Route, testResultHref, useSearchParams } from './links';
 import type { LoadedReport } from './loadedReport';
 import './reportView.css';
 import { TestCaseView } from './testCaseView';
@@ -48,7 +48,7 @@ type TestModelSummary = {
 export const ReportView: React.FC<{
   report: LoadedReport | undefined,
 }> = ({ report }) => {
-  const searchParams = React.useContext(SearchParamsContext);
+  const searchParams = useSearchParams();
   const [expandedFiles, setExpandedFiles] = React.useState<Map<string, boolean>>(new Map());
   const [filterText, setFilterText] = React.useState(searchParams.get('q') || '');
   const [metadataVisible, setMetadataVisible] = React.useState(false);
@@ -165,7 +165,7 @@ const TestCaseViewLoader: React.FC<{
   prev?: TestCaseSummary,
   testIdToFileIdMap: Map<string, string>,
 }> = ({ report, testIdToFileIdMap, next, prev, testId }) => {
-  const searchParams = React.useContext(SearchParamsContext);
+  const searchParams = useSearchParams();
   const [test, setTest] = React.useState<TestCase | 'loading' | 'not-found'>('loading');
   const run = +(searchParams.get('run') || '0');
 

packages/html-reporter/src/testCaseView.tsx

@@ -20,7 +20,7 @@ import * as React from 'react';
 import { TabbedPane } from './tabbedPane';
 import { AutoChip } from './chip';
 import './common.css';
-import { Link, SearchParamsContext, testResultHref, TraceLink } from './links';
+import { Link, testResultHref, TraceLink, useSearchParams } from './links';
 import { statusIcon } from './statusIcon';
 import './testCaseView.css';
 import { TestResultView } from './testResultView';
@@ -42,7 +42,7 @@ export const TestCaseView: React.FC<{
   options?: HTMLReportOptions,
 }> = ({ projectNames, test, testRunMetadata, run, next, prev, options }) => {
   const [selectedResultIndex, setSelectedResultIndex] = React.useState(run);
-  const searchParams = React.useContext(SearchParamsContext);
+  const searchParams = useSearchParams();
 
   const visibleTestAnnotations = test.annotations.filter(a => !a.type.startsWith('_')) ?? [];
 

packages/html-reporter/src/testFileView.tsx

@@ -18,7 +18,7 @@ import type { TestCaseSummary, TestFileSummary } from './types';
 import * as React from 'react';
 import { msToString } from './utils';
 import { Chip } from './chip';
-import { Link, LinkBadge, SearchParamsContext, testResultHref, TraceLink } from './links';
+import { Link, LinkBadge, testResultHref, TraceLink, useSearchParams } from './links';
 import { statusIcon } from './statusIcon';
 import './testFileView.css';
 import { video, image } from './icons';
@@ -32,7 +32,7 @@ export const TestFileView: React.FC<React.PropsWithChildren<{
   setFileExpanded?: (fileId: string, expanded: boolean) => void;
   footer?: React.JSX.Element | string;
 }>> = ({ file, projectNames, isFileExpanded, setFileExpanded, footer }) => {
-  const searchParams = React.useContext(SearchParamsContext);
+  const searchParams = useSearchParams();
   return <Chip
     expanded={isFileExpanded ? isFileExpanded(file.fileId) : undefined}
     noInsets={true}
@@ -74,7 +74,7 @@ export const TestFileView: React.FC<React.PropsWithChildren<{
 };
 
 function ImageDiffBadge({ test }: { test: TestCaseSummary }) {
-  const searchParams = React.useContext(SearchParamsContext);
+  const searchParams = useSearchParams();
   for (const result of test.results) {
     for (const attachment of result.attachments) {
       if (attachment.contentType.startsWith('image/') && !!attachment.name.match(/-(expected|actual|diff)/))
@@ -84,7 +84,7 @@ function ImageDiffBadge({ test }: { test: TestCaseSummary }) {
 }
 
 function VideoBadge({ test }: { test: TestCaseSummary }) {
-  const searchParams = React.useContext(SearchParamsContext);
+  const searchParams = useSearchParams();
   const resultWithVideo = test.results.find(result => result.attachments.some(attachment => attachment.name === 'video'));
   return resultWithVideo ? <LinkBadge href={testResultHref({ test, result: resultWithVideo, anchor: 'attachment-video' }, searchParams)} title='View video' dim={true}>{video()}</LinkBadge> : undefined;
 }

packages/html-reporter/src/testResultView.tsx

@@ -20,7 +20,7 @@ import { TreeItem } from './treeItem';
 import { formatUrl, msToString } from './utils';
 import { AutoChip } from './chip';
 import { traceImage } from './images';
-import { Anchor, AttachmentLink, generateTraceUrl, SearchParamsContext, testResultHref } from './links';
+import { Anchor, AttachmentLink, generateTraceUrl, testResultHref, useSearchParams } from './links';
 import { statusIcon } from './statusIcon';
 import type { ImageDiff } from '@web/shared/imageDiffView';
 import { ImageDiffView } from '@web/shared/imageDiffView';
@@ -193,7 +193,7 @@ const StepTreeItem: React.FC<{
   step: TestStep;
   depth: number,
 }> = ({ test, step, result, depth }) => {
-  const searchParams = React.useContext(SearchParamsContext);
+  const searchParams = useSearchParams();
   return <TreeItem title={<span aria-label={step.title}>
     <span style={{ float: 'right' }}>{msToString(step.duration)}</span>
     {step.attachments.length > 0 && <a