fix(html): preserve the expanded/collapsed state of global errors chip (#39496)

Author: dgozman

packages/html-reporter/src/reportView.tsx

@@ -52,6 +52,7 @@ export const ReportView: React.FC<{
   const [expandedFiles, setExpandedFiles] = React.useState<Map<string, boolean>>(new Map());
   const [filterText, setFilterText] = React.useState(searchParams.get('q') || '');
   const [metadataVisible, setMetadataVisible] = React.useState(false);
+  const [errorsVisible, setErrorsVisible] = React.useState(true);
   const speedboard = searchParams.has('speedboard');
   const [mergeFiles] = useSetting('mergeFiles', false);
   const testId = searchParams.get('testId');
@@ -140,7 +141,13 @@ export const ReportView: React.FC<{
     <main>
       {report && <GlobalFilterView stats={report.json().stats} filterText={filterText} setFilterText={setFilterText} />}
       <Route predicate={testFilesRoutePredicate}>
-        <TestFilesHeader report={report?.json()} filteredStats={filteredStats} metadataVisible={metadataVisible} toggleMetadataVisible={() => setMetadataVisible(visible => !visible)}/>
+        <TestFilesHeader
+          report={report?.json()}
+          filteredStats={filteredStats}
+          metadataVisible={metadataVisible}
+          toggleMetadataVisible={() => setMetadataVisible(visible => !visible)}
+          errorsVisible={errorsVisible}
+          setErrorsVisible={setErrorsVisible}/>
         <TestFilesView
           files={testModel.files}
           expandedFiles={expandedFiles}
@@ -149,7 +156,13 @@ export const ReportView: React.FC<{
         />
       </Route>
       <Route predicate={speedboardRoutePredicate}>
-        <TestFilesHeader report={report?.json()} filteredStats={filteredStats} metadataVisible={metadataVisible} toggleMetadataVisible={() => setMetadataVisible(visible => !visible)}/>
+        <TestFilesHeader
+          report={report?.json()}
+          filteredStats={filteredStats}
+          metadataVisible={metadataVisible}
+          toggleMetadataVisible={() => setMetadataVisible(visible => !visible)}
+          errorsVisible={errorsVisible}
+          setErrorsVisible={setErrorsVisible}/>
         {report && <Speedboard report={report} tests={testModel.tests} />}
       </Route>
       <Route predicate={testCaseRoutePredicate}>

packages/html-reporter/src/testFilesView.tsx

@@ -20,7 +20,7 @@ import { TestFileView } from './testFileView';
 import './testFileView.css';
 import './chip.css';
 import { msToString } from './utils';
-import { AutoChip } from './chip';
+import { Chip } from './chip';
 import { CodeSnippet } from './testErrorView';
 import * as icons from './icons';
 import { isMetadataEmpty, MetadataView } from './metadataView';
@@ -71,7 +71,9 @@ export const TestFilesHeader: React.FC<{
   filteredStats?: FilteredStats,
   metadataVisible: boolean,
   toggleMetadataVisible: () => void,
-}> = ({ report, filteredStats, metadataVisible, toggleMetadataVisible }) => {
+  errorsVisible: boolean,
+  setErrorsVisible: (visible: boolean) => void,
+}> = ({ report, filteredStats, metadataVisible, toggleMetadataVisible, errorsVisible, setErrorsVisible }) => {
   if (!report)
     return null;
 
@@ -99,8 +101,8 @@ export const TestFilesHeader: React.FC<{
     <HeaderView title={report.options.title} leftSuperHeader={leftSuperHeader} rightSuperHeader={rightSuperHeader} />
     {!isMetadataInTopLine && metadataToggleButton}
     {metadataVisible && <MetadataView metadata={report.metadata}/>}
-    {!!report.errors.length && <AutoChip header='Errors' dataTestId='report-errors'>
+    {!!report.errors.length && <Chip header='Errors' dataTestId='report-errors' expanded={errorsVisible} setExpanded={setErrorsVisible}>
       {report.errors.map((error, index) => <CodeSnippet key={'test-report-error-message-' + index} code={error}/>)}
-    </AutoChip>}
+    </Chip>}
   </>;
 };