Skip to content

Commit e529772

Browse files
pashidlospashidlos
authored
Merge pull request #1 from Visual-Regression-Tracker/10-menu_broken_link
TestRunList. Menu url fixed
2 parents 5ad34d2 + de3519b commit e529772

File tree

3 files changed

+87
-74
lines changed

3 files changed

+87
-74
lines changed

‎src/_helpers/route.helpers.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { TestRun } from "../types"
2+
3+
export const buildTestRunLocation = (testRun: TestRun) => ({
4+
search: `buildId=${testRun.buildId}&testId=${testRun.id}`,
5+
})

‎src/components/TestRunList.tsx‎

Lines changed: 79 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { MoreVert } from "@material-ui/icons";
1515
import { useHistory } from "react-router-dom";
1616
import { TestRun } from "../types";
1717
import TestStatusChip from "./TestStatusChip";
18+
import { buildTestRunLocation } from "../_helpers/route.helpers";
1819

1920
const TestRunList: React.FunctionComponent<{
2021
items: TestRun[];
@@ -23,84 +24,94 @@ const TestRunList: React.FunctionComponent<{
2324
}> = ({ items, selectedId, handleRemove }) => {
2425
const history = useHistory();
2526
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
26-
const open = Boolean(anchorEl);
27+
const [selectedTestRun, setSelectedTestRun] = React.useState<
28+
TestRun | undefined
29+
>(undefined);
2730

28-
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
31+
const handleClick = (
32+
event: React.MouseEvent<HTMLElement>,
33+
testRun: TestRun
34+
) => {
2935
event.stopPropagation();
3036
setAnchorEl(event.currentTarget);
37+
setSelectedTestRun(testRun);
3138
};
3239

3340
const handleClose = () => {
34-
setAnchorEl(null);
41+
setSelectedTestRun(undefined);
3542
};
3643

3744
return (
38-
<TableContainer>
39-
<Table>
40-
<TableHead>
41-
<TableRow>
42-
<TableCell>Name</TableCell>
43-
<TableCell>OS</TableCell>
44-
<TableCell>Browser</TableCell>
45-
<TableCell>Viewport</TableCell>
46-
<TableCell>Status</TableCell>
47-
<TableCell></TableCell>
48-
</TableRow>
49-
</TableHead>
50-
<TableBody>
51-
{items.map((test) => (
52-
<TableRow key={test.id} hover selected={test.id === selectedId}>
53-
<TableCell
54-
onClick={() => {
55-
history.push({
56-
search: `buildId=${test.buildId}&testId=${test.id}`,
57-
});
58-
}}
59-
>
60-
<Typography>{test.testVariation.name}</Typography>
61-
</TableCell>
62-
<TableCell>
63-
<Typography>{test.testVariation.os}</Typography>
64-
</TableCell>
65-
<TableCell>
66-
<Typography>{test.testVariation.browser}</Typography>
67-
</TableCell>
68-
<TableCell>
69-
<Typography>{test.testVariation.viewport}</Typography>
70-
</TableCell>
71-
<TableCell>
72-
<TestStatusChip status={test.status} />
73-
</TableCell>
74-
<TableCell>
75-
<IconButton onClick={handleClick}>
76-
<MoreVert />
77-
</IconButton>
78-
<Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
79-
<MenuItem
80-
onClick={() => {
81-
history.push({
82-
search: `buildId=${test.buildId}&testId=${test.id}`,
83-
});
84-
handleClose();
85-
}}
86-
>
87-
Details
88-
</MenuItem>
89-
<MenuItem
90-
onClick={() => {
91-
handleRemove(test.id);
92-
handleClose();
93-
}}
94-
>
95-
Delete
96-
</MenuItem>
97-
</Menu>
98-
</TableCell>
45+
<React.Fragment>
46+
<TableContainer>
47+
<Table>
48+
<TableHead>
49+
<TableRow>
50+
<TableCell>Name</TableCell>
51+
<TableCell>OS</TableCell>
52+
<TableCell>Browser</TableCell>
53+
<TableCell>Viewport</TableCell>
54+
<TableCell>Status</TableCell>
55+
<TableCell></TableCell>
9956
</TableRow>
100-
))}
101-
</TableBody>
102-
</Table>
103-
</TableContainer>
57+
</TableHead>
58+
<TableBody>
59+
{items.map((test) => (
60+
<TableRow key={test.id} hover selected={test.id === selectedId}>
61+
<TableCell
62+
onClick={() => {
63+
history.push(buildTestRunLocation(test));
64+
}}
65+
>
66+
<Typography>{test.testVariation.name}</Typography>
67+
</TableCell>
68+
<TableCell>
69+
<Typography>{test.testVariation.os}</Typography>
70+
</TableCell>
71+
<TableCell>
72+
<Typography>{test.testVariation.browser}</Typography>
73+
</TableCell>
74+
<TableCell>
75+
<Typography>{test.testVariation.viewport}</Typography>
76+
</TableCell>
77+
<TableCell>
78+
<TestStatusChip status={test.status} />
79+
</TableCell>
80+
<TableCell>
81+
<IconButton onClick={(event) => handleClick(event, test)}>
82+
<MoreVert />
83+
</IconButton>
84+
</TableCell>
85+
</TableRow>
86+
))}
87+
</TableBody>
88+
</Table>
89+
</TableContainer>
90+
{selectedTestRun && (
91+
<Menu
92+
anchorEl={anchorEl}
93+
open={!!selectedTestRun}
94+
onClose={handleClose}
95+
>
96+
<MenuItem
97+
onClick={() => {
98+
history.push(buildTestRunLocation(selectedTestRun));
99+
handleClose();
100+
}}
101+
>
102+
Details
103+
</MenuItem>
104+
<MenuItem
105+
onClick={() => {
106+
handleRemove(selectedTestRun.id);
107+
handleClose();
108+
}}
109+
>
110+
Delete
111+
</MenuItem>
112+
</Menu>
113+
)}
114+
</React.Fragment>
104115
);
105116
};
106117

‎src/pages/ProjectPage.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import TestRunList from "../components/TestRunList";
1010
import TestDetailsModal from "../components/TestDetailsModal";
1111
import { NavigateBefore, NavigateNext } from "@material-ui/icons";
1212
import Filters from "../components/Filters";
13+
import { buildTestRunLocation } from "../_helpers/route.helpers";
1314

1415
const getQueryParams = (guery: string) => {
1516
const queryParams = qs.parse(guery, { ignoreQueryPrefix: true });
@@ -171,9 +172,7 @@ const ProjectPage = () => {
171172
}}
172173
onClick={() => {
173174
const next = testRuns[selectedTestRunIndex + 1];
174-
history.push({
175-
search: `buildId=${next.buildId}&testId=${next.id}`,
176-
});
175+
history.push(buildTestRunLocation(next));
177176
}}
178177
>
179178
<NavigateNext style={styles.icon} />
@@ -188,9 +187,7 @@ const ProjectPage = () => {
188187
}}
189188
onClick={() => {
190189
const prev = testRuns[selectedTestRunIndex - 1];
191-
history.push({
192-
search: `buildId=${prev.buildId}&testId=${prev.id}`,
193-
});
190+
history.push(buildTestRunLocation(prev));
194191
}}
195192
>
196193
<NavigateBefore style={styles.icon} />

0 commit comments

Comments
 (0)