Skip to content

Commit 4ab91a5

Browse files
nakrovatinakrovati
committed
refactor(web): dirs structure and other improvements
1 parent 0982ad1 commit 4ab91a5

File tree

14 files changed

+139
-148
lines changed

14 files changed

+139
-148
lines changed

‎eslint.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,10 @@ export default [
8888
},
8989
rules: {
9090
...react.configs.recommended.rules,
91+
...react.configs["jsx-runtime"].rules,
9192
...reactHooks.configs.recommended.rules,
93+
94+
"react/jsx-no-useless-fragment": "warn",
9295
},
9396
settings: { react: { version: "detect" } },
9497
languageOptions: { globals: { ...globals.browser } },

‎webdriver-ts-results/src/App.css

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -25,32 +25,6 @@ select {
2525
font-size: 14px;
2626
}
2727

28-
.select-bar {
29-
background-color: #fafafa;
30-
border-top: 1px solid var(--border-color);
31-
border-bottom: 1px solid var(--border-color);
32-
padding: 10px 0;
33-
line-height: 0;
34-
}
35-
.select-bar__dropdowns {
36-
padding: 5px 0;
37-
display: flex;
38-
flex-direction: row;
39-
gap: 1rem;
40-
}
41-
42-
@media screen and (width>=640px) {
43-
.select-bar {
44-
flex-direction: unset;
45-
align-items: center;
46-
}
47-
}
48-
@media screen and (width>=768px) {
49-
.select-bar {
50-
align-items: center;
51-
}
52-
}
53-
5428
select {
5529
border: 1px solid var(--border-color);
5630
border-radius: 4px;
@@ -62,10 +36,6 @@ input + label {
6236
margin-left: 5px;
6337
}
6438

65-
.panel-body .checkbox {
66-
margin-top: 5px;
67-
margin-bottom: 5px;
68-
}
6939
thead.dummy th {
7040
padding: 0;
7141
border: 0;

‎webdriver-ts-results/src/App.tsx

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
11
import "./App.css";
22
import { FrameworkType, knownIssues } from "./Common";
33
import ResultTable from "./components/ResultTable";
4-
import { SelectionBar } from "./components/selection/SelectionBar";
4+
import SelectionBar from "./components/selection/SelectionBar";
55

66
const KnownIssuesList = () => {
77
return (
8-
<>
9-
<section>
10-
<h3>Known issues and notes</h3>
11-
{knownIssues.map((issue) => (
12-
<dl key={issue.issue.toFixed()} id={issue.issue.toFixed()}>
13-
<dt>
14-
<a target="_blank" rel="noopener noreferrer" href={issue.link}>
15-
{issue.issue.toFixed()}
16-
</a>
17-
</dt>
18-
<dd>{issue.text}</dd>
19-
</dl>
20-
))}
21-
</section>
22-
</>
8+
<section>
9+
<h3>Known issues and notes</h3>
10+
{knownIssues.map((issue) => (
11+
<dl key={issue.issue.toFixed()} id={issue.issue.toFixed()}>
12+
<dt>
13+
<a target="_blank" rel="noopener noreferrer" href={issue.link}>
14+
{issue.issue.toFixed()}
15+
</a>
16+
</dt>
17+
<dd>{issue.text}</dd>
18+
</dl>
19+
))}
20+
</section>
2321
);
2422
};
2523

‎webdriver-ts-results/src/assets/icons/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import CopyIcon from "./CopyIcon.tsx";
2+
import PasteIcon from "./PasteIcon.tsx";
3+
4+
export { CopyIcon, PasteIcon };

‎webdriver-ts-results/src/components/ResultTable.tsx

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -62,20 +62,18 @@ const ResultTable = ({ type }: Props) => {
6262
</h3>
6363
)}
6464
{displayMode === DisplayMode.BoxPlot ? (
65-
<>
66-
{benchmarks.length && (
67-
<React.Suspense fallback={<div>Loading...</div>}>
68-
<BoxPlotTable
69-
results={data.results}
70-
frameworks={data.frameworks}
71-
benchmarks={data.getResult(BenchmarkType.CPU).benchmarks}
72-
currentSortKey={currentSortKey}
73-
sortBy={sortBy}
74-
cpuDurationMode={cpuDurationMode}
75-
/>
76-
</React.Suspense>
77-
)}
78-
</>
65+
benchmarks.length && (
66+
<React.Suspense fallback={<div>Loading...</div>}>
67+
<BoxPlotTable
68+
results={data.results}
69+
frameworks={data.frameworks}
70+
benchmarks={data.getResult(BenchmarkType.CPU).benchmarks}
71+
currentSortKey={currentSortKey}
72+
sortBy={sortBy}
73+
cpuDurationMode={cpuDurationMode}
74+
/>
75+
</React.Suspense>
76+
)
7977
) : (
8078
<div className="results">
8179
<div className="results__table-container">

‎webdriver-ts-results/src/components/selection/CopyPasteSelection.css renamed to ‎webdriver-ts-results/src/components/selection/CopyPasteSelection/CopyPasteSelection.css

File renamed without changes.

‎webdriver-ts-results/src/components/selection/CopyPasteSelection.tsx renamed to ‎webdriver-ts-results/src/components/selection/CopyPasteSelection/index.tsx

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import { useCallback } from "react";
2-
import { useEffect } from "react";
1+
import { useCallback, useEffect } from "react";
32
import { useRootStore } from "@/reducer";
4-
import PasteIcon from "@/assets/icons/PasteIcon";
5-
import CopyIcon from "@/assets/icons/CopyIcon";
3+
import { CopyIcon, PasteIcon} from "@/assets/icons";
64
import "./CopyPasteSelection.css";
75

86
const CopyPasteSelection = () => {
@@ -79,27 +77,25 @@ const CopyPasteSelection = () => {
7977
}, [handlePaste]);
8078

8179
return (
82-
<>
83-
<div className="copy-paste-panel">
84-
<p>Copy/paste current selection</p>
85-
<div>
86-
<button
87-
className="button__icon"
88-
onClick={copy}
89-
aria-label="Copy selected frameworks and benchmarks"
90-
>
91-
<CopyIcon></CopyIcon>
92-
</button>
93-
<button
94-
className="button__icon"
95-
onClick={handlePasteFromClipboard}
96-
aria-label="Paste selected items (or use ctrl/cmd + v for firefox)"
97-
>
98-
<PasteIcon></PasteIcon>
99-
</button>
100-
</div>
80+
<div className="copy-paste-panel">
81+
<p>Copy/paste current selection</p>
82+
<div>
83+
<button
84+
className="button__icon"
85+
onClick={copy}
86+
aria-label="Copy selected frameworks and benchmarks"
87+
>
88+
<CopyIcon></CopyIcon>
89+
</button>
90+
<button
91+
className="button__icon"
92+
onClick={handlePasteFromClipboard}
93+
aria-label="Paste selected items (or use ctrl/cmd + v for firefox)"
94+
>
95+
<PasteIcon></PasteIcon>
96+
</button>
10197
</div>
102-
</>
98+
</div>
10399
);
104100
};
105101

‎webdriver-ts-results/src/components/selection/ModeSelectionPanel/DisplayModeSelector.tsx

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,20 @@ interface Props {
77

88
const DisplayModeSelector = ({ displayMode, onChange }: Props) => {
99
return (
10-
<>
11-
<div className="mode-selector">
12-
<label htmlFor="displayMode">Display mode:</label>
13-
<select
14-
id="displayMode"
15-
className="mode-selector__select"
16-
value={displayMode}
17-
aria-label="Select display mode"
18-
onChange={(evt) => onChange(Number(evt.target.value) as DisplayMode)}
19-
>
20-
<option value={DisplayMode.DisplayMean}>mean results</option>
21-
<option value={DisplayMode.DisplayMedian}>median results</option>
22-
<option value={DisplayMode.BoxPlot}>box plot</option>
23-
</select>
24-
</div>
25-
</>
10+
<div className="mode-selector">
11+
<label htmlFor="displayMode">Display mode:</label>
12+
<select
13+
id="displayMode"
14+
className="mode-selector__select"
15+
value={displayMode}
16+
aria-label="Select display mode"
17+
onChange={(evt) => onChange(Number(evt.target.value) as DisplayMode)}
18+
>
19+
<option value={DisplayMode.DisplayMean}>mean results</option>
20+
<option value={DisplayMode.DisplayMedian}>median results</option>
21+
<option value={DisplayMode.BoxPlot}>box plot</option>
22+
</select>
23+
</div>
2624
);
2725
};
2826

‎webdriver-ts-results/src/components/selection/ModeSelectionPanel/DurationModeSelector.tsx

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,22 @@ interface Props {
77

88
const DurationModeSelector = ({ cpuDurationMode, onChange }: Props) => {
99
return (
10-
<>
11-
<div className="mode-selector">
12-
<label htmlFor="durationMode">
13-
Duration measurement mode:
14-
</label>
15-
<select
16-
id="durationMode"
17-
className="mode-selector__select"
18-
value={cpuDurationMode}
19-
aria-label="Select CPU duration mode"
20-
onChange={(evt) => onChange(evt.target.value as CpuDurationMode)}
21-
>
22-
<option value={CpuDurationMode.Total}>total duration</option>
23-
<option value={CpuDurationMode.Script}>only JS duration</option>
24-
<option value={CpuDurationMode.Render}>only render duration</option>
25-
</select>
26-
</div>
27-
</>
10+
<div className="mode-selector">
11+
<label htmlFor="durationMode">
12+
Duration measurement mode:
13+
</label>
14+
<select
15+
id="durationMode"
16+
className="mode-selector__select"
17+
value={cpuDurationMode}
18+
aria-label="Select CPU duration mode"
19+
onChange={(evt) => onChange(evt.target.value as CpuDurationMode)}
20+
>
21+
<option value={CpuDurationMode.Total}>total duration</option>
22+
<option value={CpuDurationMode.Script}>only JS duration</option>
23+
<option value={CpuDurationMode.Render}>only render duration</option>
24+
</select>
25+
</div>
2826
);
2927
};
3028

‎webdriver-ts-results/src/components/selection/SelectionBar.tsx

Lines changed: 0 additions & 27 deletions
This file was deleted.

0 commit comments

Comments
 (0)