Repository: microsoft/playwright
File: packages/html-reporter/src/headerView.tsx (TypeScript)

Code before:
  stats: Stats
}> = ({ stats }) => {
  const searchParams = React.useContext(SearchParamsContext);

  return <nav>
    <Link className='subnav-item' href='#?'>
      <span className='subnav-item-label'>All</span>
      <span className='d-inline counter'>{stats.total - stats.skipped}</span>
    </Link>
    <NavLink token='passed' count={stats.expected} />
    <NavLink token='failed' count={stats.unexpected} />
    <NavLink token='flaky' count={stats.flaky} />
    <NavLink token='skipped' count={stats.skipped} />
    <Link className='subnav-item' href='#?speedboard' title='Speedboard' aria-selected={searchParams.has('speedboard')}>
      {icons.clock()}
    </Link>
    <SettingsButton />
  </nav>;
};

const NavLink: React.FC<{
  token: string,
  count: number,
}> = ({ token, count }) => {
  const searchParams = new URLSearchParams(React.useContext(SearchParamsContext));
  searchParams.delete('speedboard');

  const queryToken = `s:${token}`;
  
  const clickUrl = filterWithQuery(searchParams, queryToken, false);
  const ctrlClickUrl = filterWithQuery(searchParams, queryToken, true);

  const label = token.charAt(0).toUpperCase() + token.slice(1);

  return <Link className='subnav-item' href={clickUrl} click={clickUrl} ctrlClick={ctrlClickUrl}>
    {count > 0 && statusIcon(token as any)}
    <span className='subnav-item-label'>{label}</span>
    <span className='d-inline counter'>{count}</span>
  </Link>;
};

const SettingsButton: React.FC = () => {
  const settingsRef = React.useRef<HTMLDivElement>(null);
  const [settingsOpen, setSettingsOpen] = React.useState(false);
  const [darkMode, setDarkMode] = useDarkModeSetting();
  const [mergeFiles, setMergeFiles] = useSetting('mergeFiles', false);

  return <>
    <div
      role='button'
      ref={settingsRef}

Review comment (suggestion):
This is technically fine, but it's more standard to perform this in a `useMemo`. If you do wrap in a memo, all of the URL generation here should be memoed.

Code after:
  stats: Stats
}> = ({ stats }) => {
  const searchParams = React.useContext(SearchParamsContext);

  return <nav>
    <Link className='subnav-item' href='#?'>
      <span className='subnav-item-label'>All</span>
      <span className='d-inline counter'>{stats.total - stats.skipped}</span>
    </Link>
    <NavLink token='passed' count={stats.expected} />
    <NavLink token='failed' count={stats.unexpected} />
    <NavLink token='flaky' count={stats.flaky} />
    <NavLink token='skipped' count={stats.skipped} />
    <Link className='subnav-item' href='#?speedboard' title='Speedboard' aria-selected={searchParams.has('speedboard')}>
      {icons.clock()}
    </Link>
    <SettingsButton />
  </nav>;
};

const NavLink: React.FC<{
  token: string,
  count: number,
}> = ({ token, count }) => {
  const searchParams = new URLSearchParams(React.useContext(SearchParamsContext));
  searchParams.delete('speedboard');
  searchParams.delete('testId');

  const queryToken = `s:${token}`;

  const clickUrl = filterWithQuery(searchParams, queryToken, false);
  const ctrlClickUrl = filterWithQuery(searchParams, queryToken, true);

  const label = token.charAt(0).toUpperCase() + token.slice(1);

  return <Link className='subnav-item' href={clickUrl} click={clickUrl} ctrlClick={ctrlClickUrl}>
    {count > 0 && statusIcon(token as any)}
    <span className='subnav-item-label'>{label}</span>
    <span className='d-inline counter'>{count}</span>
  </Link>;
};

const SettingsButton: React.FC = () => {
  const settingsRef = React.useRef<HTMLDivElement>(null);
  const [settingsOpen, setSettingsOpen] = React.useState(false);
  const [darkMode, setDarkMode] = useDarkModeSetting();
  const [mergeFiles, setMergeFiles] = useSetting('mergeFiles', false);

  return <>
    <div
      role='button'