Use new report with better hooks support (#453)

Author: davidjgoss

CHANGELOG.md

@@ -35,7 +35,7 @@
     "@cucumber/message-streams": "4.0.1",
     "@cucumber/messages": "30.1.0",
     "@cucumber/query": "14.6.0",
-    "@cucumber/react-components": "24.0.1",
+    "@cucumber/react-components": "24.1.2",
     "@eslint/compat": "^2.0.0",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.32.0",

javascript/package-lock.json

@@ -3,9 +3,7 @@ import './styles.scss'
 import { Envelope } from '@cucumber/messages'
 import {
   EnvelopesProvider,
-  ExecutionSummary,
-  FilteredDocuments,
-  SearchBar,
+  Report,
   UrlSearchProvider,
 } from '@cucumber/react-components'
 import React from 'react'
@@ -23,11 +21,7 @@ root.render(
   <EnvelopesProvider envelopes={window.CUCUMBER_MESSAGES}>
     <UrlSearchProvider>
       <div id="report" className="html-formatter">
-        <div className="html-formatter__header">
-          <ExecutionSummary />
-          <SearchBar />
-        </div>
-        <FilteredDocuments />
+        <Report />
       </div>
     </UrlSearchProvider>
   </EnvelopesProvider>

javascript/package.json

@@ -38,10 +38,6 @@ code {
   max-width: 1600px;
   min-height: 100vh;
   margin: 0 auto;
-
-  &__header {
-    margin-bottom: 1.5rem;
-  }
 }
 
 @media all and (prefers-color-scheme: dark) {