TestRun. Do not change order when details modal is shown (#234)

closes Visual-Regression-Tracker/Visual-Regression-Tracker#305

Author: pashidlos

package-lock.json

@@ -14,7 +14,7 @@
     "konva": "^7.0.3",
     "lint-staged": "^10.5.4",
     "material-ui-popup-state": "^1.8.3",
-    "notistack": "^0.9.17",
+    "notistack": "^1.0.10",
     "prettier": "^2.2.1",
     "qs": "^6.9.4",
     "react": "^16.13.1",

package.json

@@ -44,11 +44,6 @@ const useStyles = makeStyles((theme: Theme) =>
     listItemSecondaryAction: {
       visibility: "hidden",
     },
-    listItem: {
-      "&:hover $listItemSecondaryAction": {
-        visibility: "inherit",
-      },
-    },
   })
 );
 
@@ -125,9 +120,6 @@ const BuildList: FunctionComponent = () => {
                   onClick={() => {
                     selectBuild(buildDispatch, build.id);
                   }}
-                  classes={{
-                    container: classes.listItem,
-                  }}
                 >
                   <ListItemText
                     disableTypography
@@ -144,7 +136,7 @@ const BuildList: FunctionComponent = () => {
                           </Typography>
                         </Grid>
                         <Grid item>
-                          <Grid container justify="space-between">
+                          <Grid container justifyContent="space-between">
                             <Grid item>
                               <Chip size="small" label={build.branchName} />
                             </Grid>
@@ -174,7 +166,7 @@ const BuildList: FunctionComponent = () => {
         </List>
       </Box>
       <Box height="9%">
-        <Grid container justify="center">
+        <Grid container justifyContent="center">
           <Grid item>
             <Pagination
               size="small"

src/components/BuildList/index.tsx

@@ -128,7 +128,7 @@ export const DrawArea: FunctionComponent<IDrawArea> = ({
           container
           direction="column"
           alignItems="center"
-          justify="center"
+          justifyContent="center"
           className={classes.progressContainer}
         >
           <Grid item>

src/components/DrawArea.tsx

@@ -72,14 +72,18 @@ const Header: FunctionComponent = () => {
     <React.Fragment>
       <AppBar position="static" color="default">
         <Toolbar>
-          <Grid container justify="space-between" alignItems="center">
+          <Grid container justifyContent="space-between" alignItems="center">
             <Grid item>
               <Link to="/">
                 <img src={logo} width="60" height="60" alt="logo" />
               </Link>
             </Grid>
             <Grid item>
-              <Grid container justify="space-between" alignItems="center">
+              <Grid
+                container
+                justifyContent="space-between"
+                alignItems="center"
+              >
                 <GuidedTour />
                 {loggedIn && (
                   <IconButton

src/components/Header.tsx

@@ -77,7 +77,12 @@ const LoginForm = () => {
           </Grid>
         </CardContent>
         <CardActions>
-          <Grid container direction="column" justify="center" spacing={3}>
+          <Grid
+            container
+            direction="column"
+            justifyContent="center"
+            spacing={3}
+          >
             <Grid item>
               <Button
                 type="submit"

src/components/LoginForm.tsx

@@ -122,7 +122,7 @@ const RegisterForm = () => {
           </Grid>
         </CardContent>
         <CardActions>
-          <Grid container justify="center">
+          <Grid container justifyContent="center">
             <Grid item>
               <Button
                 type="submit"

src/components/RegisterForm.tsx

@@ -249,7 +249,7 @@ const TestDetailsModal: React.FunctionComponent<{
     <React.Fragment>
       <AppBar position="sticky">
         <Toolbar>
-          <Grid container justify="space-between">
+          <Grid container justifyContent="space-between">
             <Grid item>
               <Typography variant="h6">{testRun.name}</Typography>
             </Grid>

src/components/TestDetailsDialog/TestDetailsModal.tsx

@@ -97,7 +97,7 @@ const columnsDef: GridColDef[] = [
 
 const TestRunList: React.FunctionComponent = () => {
   const { enqueueSnackbar } = useSnackbar();
-  const { testRuns, loading } = useTestRunState();
+  const { testRun, testRuns, loading } = useTestRunState();
   const { selectedBuildId } = useBuildState();
   const testRunDispatch = useTestRunDispatch();
 
@@ -148,14 +148,17 @@ const TestRunList: React.FunctionComponent = () => {
             );
           }}
           onStateChange={(props: GridStateChangeParams) => {
-            testRunDispatch({
-              type: "filter",
-              payload: props.state.visibleRows.visibleRows,
-            });
-            testRunDispatch({
-              type: "sort",
-              payload: props.state.sorting.sortedRows,
-            });
+            if (!testRun) {
+              // only if testRun modal is not shown
+              testRunDispatch({
+                type: "filter",
+                payload: props.state.visibleRows.visibleRows,
+              });
+              testRunDispatch({
+                type: "sort",
+                payload: props.state.sorting.sortedRows,
+              });
+            }
           }}
         />
       )}

src/components/TestRunList/index.tsx

@@ -156,6 +156,9 @@ function testRunReducer(state: State, action: IAction): State {
           }
           return t;
         }),
+        testRun:
+          state.testRun &&
+          action.payload.find((item) => item.id === state.testRun!.id),
       };
     case "touched":
       return {