put metadata into context

packages/html-reporter/src/metadataView.tsx

@@ -23,15 +23,28 @@ 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): { gitCommitInfo?: GitCommitInfo, metadataEntries: MetadataEntries } {
-  return {
-    gitCommitInfo: metadata['git.commit.info'],
-    metadataEntries: Object.entries(metadata).filter(([key]) => key !== 'actualWorkers') // TODO: do not plumb actualWorkers through metadata.
-  };
+export const MetadataContext = React.createContext<MetadataEntries>([]);
+
+export function MetadataProvider({ metadata}: React.PropsWithChildren<{ metadata: Metadata }>) {
+  const entries = React.useMemo(() => {
+    // TODO: do not plumb actualWorkers through metadata.
+  
+    return Object.entries(metadata).filter(([key]) => key !== 'actualWorkers')
+  }, [metadata]);
+
+  return <MetadataContext.Provider value={entries} />;
+}
+
+export function useMetadata() {
+  return React.useContext(MetadataContext);
+}
+
+export function useGitCommitInfo() {
+  const metadataEntries = useMetadata();
+  return metadataEntries.find(([key]) => key === 'git.commit.info')?.[1] as GitCommitInfo | undefined;
 }
 
 class ErrorBoundary extends React.Component<React.PropsWithChildren<{}>, { error: Error | null, errorInfo: React.ErrorInfo | null }> {
@@ -60,12 +73,13 @@ class ErrorBoundary extends React.Component<React.PropsWithChildren<{}>, { error
   }
 }
 
-export const MetadataView: React.FC<{ metadataEntries: MetadataEntries }> = ({ metadataEntries }) => {
-  return <ErrorBoundary><InnerMetadataView metadataEntries={metadataEntries}/></ErrorBoundary>;
+export const MetadataView = () => {
+  return <ErrorBoundary><InnerMetadataView/></ErrorBoundary>;
 };
 
-const InnerMetadataView: React.FC<{ metadataEntries: MetadataEntries }> = ({ metadataEntries }) => {
-  const gitCommitInfo = React.useContext(GitCommitInfoContext);
+const InnerMetadataView = () => {
+  const metadataEntries = useMetadata();
+  const gitCommitInfo = useGitCommitInfo();
   const entries = metadataEntries.filter(([key]) => key !== 'git.commit.info');
   if (!gitCommitInfo && !entries.length)
     return null;

packages/html-reporter/src/reportView.tsx

@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import type { FilteredStats, TestCase, TestCaseSummary, TestFile, TestFileSummary } from './types';
+import type { FilteredStats, HTMLReport, TestCase, TestCaseSummary, TestFile, TestFileSummary } from './types';
 import * as React from 'react';
 import './colors.css';
 import './common.css';
@@ -26,10 +26,7 @@ import './reportView.css';
 import { TestCaseView } from './testCaseView';
 import { TestFilesHeader, TestFilesView } from './testFilesView';
 import './theme.css';
-import { filterMetadata } from './metadataView';
-import type { GitCommitInfo } from '@testIsomorphic/types';
-
-export const GitCommitInfoContext = React.createContext<GitCommitInfo | undefined>(undefined);
+import { MetadataProvider } from './metadataView';
 
 declare global {
   interface Window {
@@ -54,8 +51,6 @@ 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 || []) {
@@ -78,7 +73,7 @@ export const ReportView: React.FC<{
     return result;
   }, [report, filter]);
 
-  return <GitCommitInfoContext.Provider value={gitCommitInfo}><div className='htmlreport vbox px-4 pb-4'>
+  return <MetadataProvider metadata={report?.json().metadata ?? {}}><div className='htmlreport vbox px-4 pb-4'>
     <main>
       {report?.json() && <HeaderView stats={report.json().stats} filterText={filterText} setFilterText={setFilterText}></HeaderView>}
       <Route predicate={testFilesRoutePredicate}>
@@ -94,7 +89,7 @@ export const ReportView: React.FC<{
         {!!report && <TestCaseViewLoader report={report} tests={filteredTests.tests} testIdToFileIdMap={testIdToFileIdMap} />}
       </Route>
     </main>
-  </div></GitCommitInfoContext.Provider>;
+  </div></MetadataProvider>;
 };
 
 const TestCaseViewLoader: React.FC<{

packages/html-reporter/src/testErrorView.tsx

@@ -20,10 +20,10 @@ import './testErrorView.css';
 import * as icons from './icons';
 import type { ImageDiff } from '@web/shared/imageDiffView';
 import { ImageDiffView } from '@web/shared/imageDiffView';
-import { GitCommitInfoContext } from './reportView';
 import { TestResult } from './types';
 import { CopyToClipboard } from './copyToClipboard';
 import { fixTestPrompt } from '@web/components/prompts';
+import { useGitCommitInfo } from './metadataView';
 
 export const TestErrorView: React.FC<{ error: string; testId?: string; result?: TestResult }> = ({ error, testId, result }) => {
   return (
@@ -49,7 +49,7 @@ const PromptButton: React.FC<{
   error: string;
   result?: TestResult;
 }> = ({ error, result }) => {
-  const gitCommitInfo = React.useContext(GitCommitInfoContext);
+  const gitCommitInfo = useGitCommitInfo();
   const prompt = React.useMemo(() => fixTestPrompt(
     error,
     gitCommitInfo?.['pull.diff'] ?? gitCommitInfo?.['revision.diff'],

packages/html-reporter/src/testFilesView.tsx

@@ -22,7 +22,7 @@ import { msToString } from './utils';
 import { AutoChip } from './chip';
 import { TestErrorView } from './testErrorView';
 import * as icons from './icons';
-import { filterMetadata, MetadataView } from './metadataView';
+import { MetadataView, useMetadata } from './metadataView';
 
 export const TestFilesView: React.FC<{
   tests: TestFileSummary[],
@@ -69,7 +69,7 @@ export const TestFilesHeader: React.FC<{
 }> = ({ report, filteredStats, metadataVisible, toggleMetadataVisible }) => {
   if (!report)
     return;
-  const { metadataEntries } = filterMetadata(report.metadata || {});
+  const metadataEntries = useMetadata();
   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'}>
@@ -81,7 +81,7 @@ export const TestFilesHeader: React.FC<{
       <div data-testid='overall-time' style={{ color: 'var(--color-fg-subtle)', marginRight: '10px' }}>{report ? new Date(report.startTime).toLocaleString() : ''}</div>
       <div data-testid='overall-duration' style={{ color: 'var(--color-fg-subtle)' }}>Total time: {msToString(report.duration ?? 0)}</div>
     </div>
-    {metadataVisible && <MetadataView metadataEntries={metadataEntries}/>}
+    {metadataVisible && <MetadataView/>}
     {!!report.errors.length && <AutoChip header='Errors' dataTestId='report-errors'>
       {report.errors.map((error, index) => <TestErrorView key={'test-report-error-message-' + index} error={error}></TestErrorView>)}
     </AutoChip>}