refactor: plumb gitcommitinfo with context

packages/html-reporter/src/metadataView.tsx

@@ -23,12 +23,15 @@ import type { Metadata } from '@playwright/test';
 import type { GitCommitInfo } from '@testIsomorphic/types';
 import { CopyToClipboardContainer } from './copyToClipboard';
 import { linkifyText } from '@web/renderUtils';
+import { GitCommitInfoContext } from './reportView';
 
 type MetadataEntries = [string, unknown][];
 
-export function filterMetadata(metadata: Metadata): MetadataEntries {
-  // TODO: do not plumb actualWorkers through metadata.
-  return Object.entries(metadata).filter(([key]) => key !== 'actualWorkers');
+export function filterMetadata(metadata: Metadata): { gitCommitInfo?: GitCommitInfo, metadataEntries: MetadataEntries } {
+  return {
+    gitCommitInfo: metadata['git.commit.info'],
+    metadataEntries: Object.entries(metadata).filter(([key]) => key !== 'git.commit.info' && key !== 'actualWorkers') // TODO: do not plumb actualWorkers through metadata.
+  };
 }
 
 class ErrorBoundary extends React.Component<React.PropsWithChildren<{}>, { error: Error | null, errorInfo: React.ErrorInfo | null }> {
@@ -61,9 +64,8 @@ export const MetadataView: React.FC<{ metadataEntries: MetadataEntries }> = ({ m
   return <ErrorBoundary><InnerMetadataView metadataEntries={metadataEntries}/></ErrorBoundary>;
 };
 
-const InnerMetadataView: React.FC<{ metadataEntries: MetadataEntries }> = ({ metadataEntries }) => {
-  const gitCommitInfo = metadataEntries.find(([key]) => key === 'git.commit.info')?.[1] as GitCommitInfo | undefined;
-  const entries = metadataEntries.filter(([key]) => key !== 'git.commit.info');
+const InnerMetadataView: React.FC<{ metadataEntries: MetadataEntries }> = ({ metadataEntries: entries }) => {
+  const gitCommitInfo = React.useContext(GitCommitInfoContext);
   if (!gitCommitInfo && !entries.length)
     return null;
   return <div className='metadata-view'>

packages/html-reporter/src/reportView.tsx

@@ -26,6 +26,10 @@ import './reportView.css';
 import { TestCaseView } from './testCaseView';
 import { TestFilesHeader, TestFilesView } from './testFilesView';
 import './theme.css';
+import { filterMetadata } from './metadataView';
+import type { GitCommitInfo } from '@playwright/isomorphic/types';
+
+export const GitCommitInfoContext = React.createContext<GitCommitInfo | undefined>(undefined);
 
 declare global {
   interface Window {
@@ -50,6 +54,8 @@ export const ReportView: React.FC<{
   const [filterText, setFilterText] = React.useState(searchParams.get('q') || '');
   const [metadataVisible, setMetadataVisible] = React.useState(false);
 
+  const gitCommitInfo = React.useMemo(() => filterMetadata(report?.json().metadata || {}).gitCommitInfo, [report]);
+
   const testIdToFileIdMap = React.useMemo(() => {
     const map = new Map<string, string>();
     for (const file of report?.json().files || []) {
@@ -72,7 +78,7 @@ export const ReportView: React.FC<{
     return result;
   }, [report, filter]);
 
-  return <div className='htmlreport vbox px-4 pb-4'>
+  return <MetadataContext.Provider value={gitCommitInfo}><div className='htmlreport vbox px-4 pb-4'>
     <main>
       {report?.json() && <HeaderView stats={report.json().stats} filterText={filterText} setFilterText={setFilterText}></HeaderView>}
       <Route predicate={testFilesRoutePredicate}>
@@ -88,7 +94,7 @@ export const ReportView: React.FC<{
         {!!report && <TestCaseViewLoader report={report} tests={filteredTests.tests} testIdToFileIdMap={testIdToFileIdMap} />}
       </Route>
     </main>
-  </div>;
+  </div></MetadataContext.Provider>;
 };
 
 const TestCaseViewLoader: React.FC<{

packages/html-reporter/src/testFilesView.tsx

@@ -69,7 +69,7 @@ export const TestFilesHeader: React.FC<{
 }> = ({ report, filteredStats, metadataVisible, toggleMetadataVisible }) => {
   if (!report)
     return;
-  const metadataEntries = filterMetadata(report.metadata || {});
+  const { metadataEntries } = filterMetadata(report.metadata || {});
   return <>
     <div className='mx-1' style={{ display: 'flex', marginTop: 10 }}>
       {metadataEntries.length > 0 && <div className='metadata-toggle' role='button' onClick={toggleMetadataVisible} title={metadataVisible ? 'Hide metadata' : 'Show metadata'}>