From 3073f96a8af1ed913fe24d443443efff1940190d Mon Sep 17 00:00:00 2001
From: Kuba Janik <jakubjanik00@gmail.com>
Date: Tue, 23 Jul 2024 12:24:52 +0200
Subject: [PATCH] feat(html-reporter): pr feedback

---
 packages/html-reporter/src/reportView.tsx     | 19 ++++++++-----------
 packages/html-reporter/src/testCaseView.css   |  3 ++-
 packages/html-reporter/src/testCaseView.tsx   |  2 +-
 packages/html-reporter/src/testFileView.tsx   |  7 +++----
 packages/html-reporter/src/testFilesView.tsx  |  3 +--
 ...se-search-params.ts => useSearchParams.ts} |  0
 6 files changed, 15 insertions(+), 19 deletions(-)
 rename packages/html-reporter/src/{use-search-params.ts => useSearchParams.ts} (100%)

diff --git a/packages/html-reporter/src/reportView.tsx b/packages/html-reporter/src/reportView.tsx
index 0deb402b9d..5f1e200dfb 100644
--- a/packages/html-reporter/src/reportView.tsx
+++ b/packages/html-reporter/src/reportView.tsx
@@ -28,7 +28,7 @@ import { MetadataView } from './metadataView';
 import { TestCaseView } from './testCaseView';
 import { TestFilesView } from './testFilesView';
 import './theme.css';
-import { useSearchParams } from './use-search-params';
+import { useSearchParams } from './useSearchParams';
 
 declare global {
   interface Window {
@@ -47,11 +47,10 @@ export const ReportView: React.FC<{
   const [expandedFiles, setExpandedFiles] = React.useState<Map<string, boolean>>(new Map());
   const [filterText, setFilterText] = React.useState(searchParams.get('q') || '');
 
-  const reportData = report?.json();
   const filter = React.useMemo(() => Filter.parse(filterText), [filterText]);
 
   const filteredFiles = React.useMemo(() => {
-    const files = reportData?.files ?? [];
+    const files = report?.json().files ?? [];
 
     return files
         .map(file => {
@@ -59,21 +58,21 @@ export const ReportView: React.FC<{
           return { ...file, tests };
         })
         .filter(file => file.tests.length !== 0);
-  }, [filter, reportData?.files]);
+  }, [filter, report]);
 
   const filteredStats = React.useMemo(() => computeStats(filteredFiles), [filteredFiles]);
 
   return <div className='htmlreport vbox px-4 pb-4'>
     <main>
-      {reportData && <HeaderView stats={reportData.stats} filterText={filterText} setFilterText={setFilterText}></HeaderView>}
-      {reportData?.metadata && <MetadataView {...reportData.metadata as Metainfo} />}
+      {report?.json() && <HeaderView stats={report?.json().stats} filterText={filterText} setFilterText={setFilterText}></HeaderView>}
+      {report?.json().metadata && <MetadataView {...report.json().metadata as Metainfo} />}
       <Route predicate={testFilesRoutePredicate}>
         <TestFilesView
-          report={reportData}
+          report={report?.json()}
           filter={filter}
           expandedFiles={expandedFiles}
           setExpandedFiles={setExpandedFiles}
-          projectNames={reportData?.projectNames ?? []}
+          projectNames={report?.json().projectNames ?? []}
           filteredStats={filteredStats}
           filteredFiles={filteredFiles}
         />
@@ -83,7 +82,6 @@ export const ReportView: React.FC<{
           <TestCaseViewLoader
             report={report}
             filteredFiles={filteredFiles}
-            filter={filter}
           />
         )}
       </Route>
@@ -94,8 +92,7 @@ export const ReportView: React.FC<{
 const TestCaseViewLoader: React.FC<{
   report: LoadedReport,
   filteredFiles: TestFileSummary[],
-  filter: Filter
-}> = ({ report, filteredFiles, filter }) => {
+}> = ({ report, filteredFiles }) => {
   const searchParams = useSearchParams();
   const [test, setTest] = React.useState<TestCase | undefined>();
   const testId = searchParams.get('testId') ?? '';
diff --git a/packages/html-reporter/src/testCaseView.css b/packages/html-reporter/src/testCaseView.css
index 950ab0d10b..570b82479c 100644
--- a/packages/html-reporter/src/testCaseView.css
+++ b/packages/html-reporter/src/testCaseView.css
@@ -50,8 +50,8 @@
 
 .test-case-navigation {
   display: flex;
-  align-items: center;
   gap: 8px;
+  padding-top: 8px;
 }
 
 .test-case-location,
@@ -65,6 +65,7 @@
   flex: none;
   align-items: center;
   padding: 0 8px;
+  height: 16px;
 }
 
 .test-case-annotation {
diff --git a/packages/html-reporter/src/testCaseView.tsx b/packages/html-reporter/src/testCaseView.tsx
index 5985de6021..4b761ec6e1 100644
--- a/packages/html-reporter/src/testCaseView.tsx
+++ b/packages/html-reporter/src/testCaseView.tsx
@@ -26,7 +26,7 @@ import { TestResultView } from './testResultView';
 import { linkifyText } from './renderUtils';
 import { hashStringToInt, msToString } from './utils';
 import * as icons from './icons';
-import { useSearchParams } from './use-search-params';
+import { useSearchParams } from './useSearchParams';
 
 export const TestCaseView: React.FC<{
   projectNames: string[],
diff --git a/packages/html-reporter/src/testFileView.tsx b/packages/html-reporter/src/testFileView.tsx
index 52c908a697..b490cc0000 100644
--- a/packages/html-reporter/src/testFileView.tsx
+++ b/packages/html-reporter/src/testFileView.tsx
@@ -18,20 +18,19 @@ import type { HTMLReport, TestCaseSummary, TestFileSummary } from './types';
 import * as React from 'react';
 import { hashStringToInt, msToString } from './utils';
 import { Chip } from './chip';
-import { filterWithToken, type Filter } from './filter';
+import { filterWithToken } from './filter';
 import { generateTraceUrl, Link, navigate, ProjectLink } from './links';
 import { statusIcon } from './statusIcon';
 import './testFileView.css';
 import { video, image, trace } from './icons';
-import { useSearchParams } from './use-search-params';
+import { useSearchParams } from './useSearchParams';
 
 export const TestFileView: React.FC<React.PropsWithChildren<{
   report: HTMLReport;
   file: TestFileSummary;
   isFileExpanded: (fileId: string) => boolean;
   setFileExpanded: (fileId: string, expanded: boolean) => void;
-  filter: Filter;
-}>> = ({ file, report, isFileExpanded, setFileExpanded, filter }) => {
+}>> = ({ file, report, isFileExpanded, setFileExpanded }) => {
   const searchParams = useSearchParams();
   const q = searchParams.get('q') ?? '';
 
diff --git a/packages/html-reporter/src/testFilesView.tsx b/packages/html-reporter/src/testFilesView.tsx
index 3e744f8348..40f9b78d19 100644
--- a/packages/html-reporter/src/testFilesView.tsx
+++ b/packages/html-reporter/src/testFilesView.tsx
@@ -68,8 +68,7 @@ export const TestFilesView: React.FC<{
           const newExpanded = new Map(expandedFiles);
           newExpanded.set(fileId, expanded);
           setExpandedFiles(newExpanded);
-        }}
-        filter={filter}>
+        }}>
       </TestFileView>;
     })}
   </>;
diff --git a/packages/html-reporter/src/use-search-params.ts b/packages/html-reporter/src/useSearchParams.ts
similarity index 100%
rename from packages/html-reporter/src/use-search-params.ts
rename to packages/html-reporter/src/useSearchParams.ts