Skip to content

Commit 8896ebc

Browse files
pashidlospashidlos
authored
Direct url to testRun does not open modal (#158)
* Direct url to testRun does not open modal
1 parent 40daae7 commit 8896ebc

File tree

13 files changed

+150
-129
lines changed

13 files changed

+150
-129
lines changed

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
"@types/react-material-ui-form-validator": "^2.1.0",
6969
"@types/react-router-dom": "^5.1.5",
7070
"@types/socket.io-client": "^1.4.33",
71-
"@visual-regression-tracker/agent-cypress": "^4.6.1",
71+
"@visual-regression-tracker/agent-cypress": "^4.7.3",
7272
"cypress": "^5.6.0",
7373
"cypress-react-unit-test": "^4.17.0"
7474
}

‎src/_helpers/route.helpers.ts‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
1-
import { TestRun, TestVariation } from "../types";
21
import { routes } from "../constants";
32
import qs from "qs";
43

5-
export const buildTestRunUrl = (
6-
testVariation: TestVariation,
7-
testRun: TestRun
8-
) =>
9-
`${routes.HOME}${testVariation.projectId}?buildId=${testRun.buildId}&testId=${testRun.id}`;
4+
export const buildProjectPageUrl = (projectId: string) =>
5+
`${routes.HOME}${projectId}`;
106

11-
export const buildTestRunLocation = (buildId: string, testRunId: string) => ({
12-
search: `buildId=${buildId}&testId=${testRunId}`,
7+
export const buildTestRunLocation = (buildId: string, testRunId?: string) => ({
8+
search: testRunId
9+
? `buildId=${buildId}&testId=${testRunId}`
10+
: `buildId=${buildId}`,
1311
});
1412

15-
export const buildBuildPageUrl = (projectId: string, buildId: string) =>
16-
`${routes.HOME}${projectId}?buildId=${buildId}`;
17-
1813
export interface QueryParams {
1914
buildId?: string;
2015
testId?: string;

‎src/components/ArrowButtons.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@ import { IconButton, makeStyles, Tooltip } from "@material-ui/core";
22
import { NavigateNext, NavigateBefore } from "@material-ui/icons";
33
import React from "react";
44
import { useHotkeys } from "react-hotkeys-hook";
5-
import { useHistory } from "react-router-dom";
65
import { useTestRunDispatch, selectTestRun } from "../contexts";
76
import { TestRun } from "../types";
8-
import { buildTestRunLocation } from "../_helpers/route.helpers";
97

108
const useStyles = makeStyles((theme) => ({
119
button: {
@@ -27,13 +25,11 @@ export const ArrowButtons: React.FunctionComponent<{
2725
selectedTestRunIndex: number;
2826
}> = ({ testRuns, selectedTestRunIndex }) => {
2927
const classes = useStyles();
30-
const history = useHistory();
3128
const testRunDispatch = useTestRunDispatch();
3229

3330
const navigateNext = () => {
3431
if (selectedTestRunIndex + 1 < testRuns.length) {
3532
const next = testRuns[selectedTestRunIndex + 1];
36-
history.push(buildTestRunLocation(next.buildId, next.id));
3733
selectTestRun(testRunDispatch, next.id);
3834
}
3935
};
@@ -42,7 +38,6 @@ export const ArrowButtons: React.FunctionComponent<{
4238
const navigateBefore = () => {
4339
if (selectedTestRunIndex > 0) {
4440
const prev = testRuns[selectedTestRunIndex - 1];
45-
history.push(buildTestRunLocation(prev.buildId, prev.id));
4641
selectTestRun(testRunDispatch, prev.id);
4742
}
4843
};

‎src/components/BuildList/index.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import {
1717
Box,
1818
} from "@material-ui/core";
1919
import { MoreVert } from "@material-ui/icons";
20-
import { useHistory } from "react-router-dom";
2120
import {
2221
useBuildState,
2322
useBuildDispatch,
@@ -55,7 +54,6 @@ const useStyles = makeStyles((theme: Theme) =>
5554

5655
const BuildList: FunctionComponent = () => {
5756
const classes = useStyles();
58-
const history = useHistory();
5957
const { buildList, selectedBuild, loading, total, take } = useBuildState();
6058
const buildDispatch = useBuildDispatch();
6159
const { enqueueSnackbar } = useSnackbar();
@@ -124,9 +122,7 @@ const BuildList: FunctionComponent = () => {
124122
selected={selectedBuild?.id === build.id}
125123
button
126124
onClick={() => {
127-
history.push({
128-
search: "buildId=" + build.id,
129-
});
125+
selectBuild(buildDispatch, build.id);
130126
}}
131127
classes={{
132128
container: classes.listItem,

‎src/components/TestDetailsDialog/index.tsx‎

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
import { Dialog, makeStyles } from "@material-ui/core";
22
import React from "react";
3-
import { useLocation } from "react-router-dom";
4-
import {
5-
selectTestRun,
6-
useTestRunDispatch,
7-
useTestRunState,
8-
} from "../../contexts";
9-
import { QueryParams, getQueryParams } from "../../_helpers/route.helpers";
3+
import { useTestRunState } from "../../contexts";
104
import { ArrowButtons } from "../ArrowButtons";
115
import TestDetailsModal from "../TestDetailsModal";
126

@@ -18,21 +12,13 @@ const useStyles = makeStyles((theme) => ({
1812

1913
export const TestDetailsDialog: React.FunctionComponent = () => {
2014
const classes = useStyles();
21-
const location = useLocation();
22-
const { testRuns, selectedTestRunIndex } = useTestRunState();
23-
const testRunDispatch = useTestRunDispatch();
15+
const { testRuns, selectedTestRunId } = useTestRunState();
2416

25-
const queryParams: QueryParams = React.useMemo(
26-
() => getQueryParams(location.search),
27-
[location.search]
17+
const selectedTestRunIndex = React.useMemo(
18+
() => testRuns.findIndex((t) => t.id === selectedTestRunId),
19+
[testRuns, selectedTestRunId]
2820
);
2921

30-
React.useEffect(() => {
31-
if (queryParams.testId) {
32-
selectTestRun(testRunDispatch, queryParams.testId);
33-
}
34-
}, [queryParams.testId, testRunDispatch]);
35-
3622
if (selectedTestRunIndex === undefined || !testRuns[selectedTestRunIndex]) {
3723
return null;
3824
}

‎src/components/TestDetailsModal.tsx‎

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -98,9 +98,6 @@ const TestDetailsModal: React.FunctionComponent<{
9898
};
9999

100100
const handleClose = () => {
101-
history.push({
102-
search: `buildId=${testRun.buildId}`,
103-
});
104101
selectTestRun(testRunDispatch, undefined);
105102
};
106103

@@ -116,9 +113,9 @@ const TestDetailsModal: React.FunctionComponent<{
116113
const fitStageToScreen = () => {
117114
const scale = image
118115
? Math.min(
119-
stageWidth < image.width ? stageWidth / image.width : 1,
120-
stageHeigth < image.height ? stageHeigth / image.height : 1
121-
)
116+
stageWidth < image.width ? stageWidth / image.width : 1,
117+
stageHeigth < image.height ? stageHeigth / image.height : 1
118+
)
122119
: 1;
123120
setStageScale(scale);
124121
resetPositioin();
@@ -151,7 +148,11 @@ const TestDetailsModal: React.FunctionComponent<{
151148
[image, baselineImage, testRun.baselineName, testRun.imageName]
152149
);
153150

154-
useHotkeys("d", () => shouldDiffHotKeyBeActive && setIsDiffShown((isDiffShown) => !isDiffShown));
151+
useHotkeys(
152+
"d",
153+
() =>
154+
shouldDiffHotKeyBeActive && setIsDiffShown((isDiffShown) => !isDiffShown)
155+
);
155156
useHotkeys("ESC", () => handleClose());
156157
const shouldDiffHotKeyBeActive = !!testRun.diffName;
157158

@@ -167,7 +168,7 @@ const TestDetailsModal: React.FunctionComponent<{
167168
<Grid item>
168169
<Typography variant="h6">{testRun.name}</Typography>
169170
</Grid>
170-
{(shouldDiffHotKeyBeActive) && (
171+
{shouldDiffHotKeyBeActive && (
171172
<Grid item>
172173
<Tooltip title={"Hotkey: D"}>
173174
<Switch
@@ -180,10 +181,10 @@ const TestDetailsModal: React.FunctionComponent<{
180181
)}
181182
{(testRun.status === TestStatus.unresolved ||
182183
testRun.status === TestStatus.new) && (
183-
<Grid item>
184-
<ApproveRejectButtons testRun={testRun} />
185-
</Grid>
186-
)}
184+
<Grid item>
185+
<ApproveRejectButtons testRun={testRun} />
186+
</Grid>
187+
)}
187188
<Grid item>
188189
<IconButton color="inherit" onClick={handleClose}>
189190
<Close />
@@ -338,7 +339,7 @@ const TestDetailsModal: React.FunctionComponent<{
338339
/>
339340
</Grid>
340341
<Grid item xs={6} className={classes.drawAreaItem}>
341-
{(isDiffShown) ? (
342+
{isDiffShown ? (
342343
<DrawArea
343344
type="Diff"
344345
imageName={testRun.diffName}
@@ -357,24 +358,24 @@ const TestDetailsModal: React.FunctionComponent<{
357358
drawModeState={[isDrawMode, setIsDrawMode]}
358359
/>
359360
) : (
360-
<DrawArea
361-
type="Image"
362-
imageName={testRun.imageName}
363-
branchName={testRun.branchName}
364-
imageState={[image, imageStatus]}
365-
ignoreAreas={ignoreAreas}
366-
tempIgnoreAreas={JSON.parse(testRun.tempIgnoreAreas)}
367-
setIgnoreAreas={setIgnoreAreas}
368-
selectedRectId={selectedRectId}
369-
setSelectedRectId={setSelectedRectId}
370-
onStageClick={removeSelection}
371-
stageScaleState={[stageScale, setStageScale]}
372-
stagePosState={[stagePos, setStagePos]}
373-
stageInitPosState={[stageInitPos, setStageInitPos]}
374-
stageOffsetState={[stageOffset, setStageOffset]}
375-
drawModeState={[isDrawMode, setIsDrawMode]}
376-
/>
377-
)}
361+
<DrawArea
362+
type="Image"
363+
imageName={testRun.imageName}
364+
branchName={testRun.branchName}
365+
imageState={[image, imageStatus]}
366+
ignoreAreas={ignoreAreas}
367+
tempIgnoreAreas={JSON.parse(testRun.tempIgnoreAreas)}
368+
setIgnoreAreas={setIgnoreAreas}
369+
selectedRectId={selectedRectId}
370+
setSelectedRectId={setSelectedRectId}
371+
onStageClick={removeSelection}
372+
stageScaleState={[stageScale, setStageScale]}
373+
stagePosState={[stagePos, setStagePos]}
374+
stageInitPosState={[stageInitPos, setStageInitPos]}
375+
stageOffsetState={[stageOffset, setStageOffset]}
376+
drawModeState={[isDrawMode, setIsDrawMode]}
377+
/>
378+
)}
378379
</Grid>
379380
</Grid>
380381
</Box>

‎src/components/TestRunList/index.tsx‎

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import React from "react";
22
import { Chip } from "@material-ui/core";
3-
import { useHistory } from "react-router-dom";
43
import TestStatusChip from "../TestStatusChip";
5-
import { buildTestRunLocation } from "../../_helpers/route.helpers";
64
import {
75
useTestRunState,
86
useTestRunDispatch,
97
getTestRunList,
108
useBuildState,
9+
selectTestRun,
1110
} from "../../contexts";
1211
import { useSnackbar } from "notistack";
1312
import {
@@ -76,7 +75,6 @@ const TestRunList: React.FunctionComponent = () => {
7675
const { testRuns, loading } = useTestRunState();
7776
const { selectedBuildId } = useBuildState();
7877
const testRunDispatch = useTestRunDispatch();
79-
const history = useHistory();
8078

8179
const getTestRunListCalback = React.useCallback(
8280
() =>
@@ -95,29 +93,26 @@ const TestRunList: React.FunctionComponent = () => {
9593

9694
return (
9795
<React.Fragment>
98-
{selectedBuildId && (<DataGrid
99-
rows={testRuns}
100-
columns={columnsDef}
101-
pageSize={10}
102-
rowsPerPageOptions={[10, 20, 30]}
103-
loading={loading}
104-
showToolbar={true}
105-
components={{
106-
Toolbar: DataGridCustomToolbar,
107-
}}
108-
checkboxSelection
109-
disableColumnSelector
110-
disableColumnMenu
111-
disableSelectionOnClick
112-
onRowClick={(param: RowParams) => {
113-
history.push(
114-
buildTestRunLocation(
115-
param.getValue("buildId")?.toString() || "",
116-
param.getValue("id")?.toString() || ""
117-
)
118-
);
119-
}}
120-
/>)}
96+
{selectedBuildId && (
97+
<DataGrid
98+
rows={testRuns}
99+
columns={columnsDef}
100+
pageSize={10}
101+
rowsPerPageOptions={[10, 20, 30]}
102+
loading={loading}
103+
showToolbar={true}
104+
components={{
105+
Toolbar: DataGridCustomToolbar,
106+
}}
107+
checkboxSelection
108+
disableColumnSelector
109+
disableColumnMenu
110+
disableSelectionOnClick
111+
onRowClick={(param: RowParams) => {
112+
selectTestRun(testRunDispatch, param.getValue("id")?.toString());
113+
}}
114+
/>
115+
)}
121116
</React.Fragment>
122117
);
123118
};

‎src/components/TestVariationMergeForm.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,12 @@ import React from "react";
22
import { Grid, Select, MenuItem, Button } from "@material-ui/core";
33
import { testVariationService } from "../services";
44
import { useHistory } from "react-router-dom";
5-
import { buildBuildPageUrl } from "../_helpers/route.helpers";
5+
import {
6+
buildProjectPageUrl,
7+
buildTestRunLocation,
8+
} from "../_helpers/route.helpers";
69
import { useSnackbar } from "notistack";
10+
import { selectBuild, useBuildDispatch } from "../contexts";
711

812
interface IProps {
913
projectId: string;
@@ -15,6 +19,7 @@ export const TestVariationMergeForm: React.FunctionComponent<IProps> = ({
1519
items,
1620
}) => {
1721
const history = useHistory();
22+
const buildDispatch = useBuildDispatch();
1823
const { enqueueSnackbar } = useSnackbar();
1924
const [branch, setBranch] = React.useState("");
2025

@@ -26,7 +31,11 @@ export const TestVariationMergeForm: React.FunctionComponent<IProps> = ({
2631
enqueueSnackbar(`Merge started in build: ${build.id}`, {
2732
variant: "success",
2833
});
29-
history.push(buildBuildPageUrl(projectId, build.id));
34+
history.push({
35+
pathname: buildProjectPageUrl(projectId),
36+
...buildTestRunLocation(build.id),
37+
});
38+
selectBuild(buildDispatch, build.id);
3039
})
3140
.catch((err) =>
3241
enqueueSnackbar(err, {

0 commit comments

Comments
 (0)