Merge pull request #12 from Visual-Regression-Tracker/23-build-status

23 build status

Author: pashidlos

src/App.jsx

@@ -4,14 +4,17 @@ import Header from "./components/Header";
 import { AuthProvider } from "./contexts/auth.context";
 import { ProjectProvider } from "./contexts/project.context";
 import Router from "./Router";
+import { BuildProvider } from "./contexts/build.context";
 
 function App() {
   return (
     <div className="App">
       <AuthProvider>
         <ProjectProvider>
-          <Header />
-          <Router />
+          <BuildProvider>
+            <Header />
+            <Router />
+          </BuildProvider>
         </ProjectProvider>
       </AuthProvider>
     </div>

src/components/BuildList.tsx

@@ -9,17 +9,18 @@ import {
   Theme,
   createStyles,
   Chip,
+  Typography,
+  Grid,
 } from "@material-ui/core";
 import { Delete } from "@material-ui/icons";
-import { Build } from "../types";
-import { buildsService } from "../services";
 import { useHistory } from "react-router-dom";
-
-interface IBuildList {
-  builds: Build[];
-  setBuilds: React.Dispatch<React.SetStateAction<Build[]>>;
-  selectedBuildId: string | undefined;
-}
+import {
+  useBuildState,
+  useBuildDispatch,
+  deleteBuild,
+  selectBuild,
+} from "../contexts/build.context";
+import { BuildStatusChip } from "./BuildStatusChip";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -34,22 +35,21 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 );
 
-const BuildList: FunctionComponent<IBuildList> = ({
-  builds,
-  setBuilds,
-  selectedBuildId,
-}) => {
+const BuildList: FunctionComponent = () => {
   const classes = useStyles();
   const history = useHistory();
+  const { buildList, selectedBuildId } = useBuildState();
+  const buildDispatch = useBuildDispatch();
 
   return (
     <List>
-      {builds.map((build) => (
+      {buildList.map((build) => (
         <ListItem
           key={build.id}
           selected={selectedBuildId === build.id}
           button
           onClick={() => {
+            selectBuild(buildDispatch, build.id);
             history.push({
               search: "buildId=" + build.id,
             });
@@ -59,18 +59,39 @@ const BuildList: FunctionComponent<IBuildList> = ({
           }}
         >
           <ListItemText
-            primary={`#${build.id}`}
-            secondary={`Date: ${build.createdAt}`}
+            disableTypography
+            primary={
+              <Grid container>
+                <Grid item>
+                  <Typography variant="subtitle2">{`#${build.id}`}</Typography>
+                </Grid>
+              </Grid>
+            }
+            secondary={
+              <Grid container direction="column">
+                <Grid item>
+                  <Typography variant="caption" color="textPrimary">
+                    {build.createdAt}
+                  </Typography>
+                </Grid>
+                <Grid item>
+                  <Grid container justify="space-between">
+                    <Grid item>
+                      <Chip size="small" label={build.branchName} />
+                    </Grid>
+                    <Grid item>
+                      <BuildStatusChip status={build.status} />
+                    </Grid>
+                  </Grid>
+                </Grid>
+              </Grid>
+            }
           />
-          <Chip size="small" label={build.branchName} />
+
           <ListItemSecondaryAction className={classes.listItemSecondaryAction}>
             <IconButton
               onClick={() => {
-                buildsService.remove(build.id).then((isRemoved) => {
-                  if (isRemoved) {
-                    setBuilds(builds.filter((item) => item.id !== build.id));
-                  }
-                });
+                deleteBuild(buildDispatch, build.id);
               }}
             >
               <Delete />

src/components/BuildStatusChip.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Chip } from "@material-ui/core";
+import { BuildStatus } from "../types/buildStatus";
+
+export const BuildStatusChip: React.FunctionComponent<{
+  status: BuildStatus;
+}> = ({ status }) => {
+  let color: "inherit" | "primary" | "secondary" | "default" | undefined;
+  let variant: "default" | "outlined" | undefined;
+  switch (status) {
+    case BuildStatus.passed:
+      color = "primary";
+      variant = "outlined";
+      break;
+    case BuildStatus.unresolved:
+      color = "secondary";
+      break;
+    case BuildStatus.failed:
+      color = "secondary";
+      variant = "outlined";
+      break;
+    default:
+      color = undefined;
+      variant = undefined;
+  }
+  return <Chip variant={variant} color={color} label={status} size="small" />;
+};

src/components/TestDetailsModal.tsx

@@ -37,6 +37,7 @@ import { TestRunDetails } from "./TestRunDetails";
 import useImage from "use-image";
 import { routes } from "../constants";
 import { NoImagePlaceholder } from "./NoImageAvailable";
+import { useBuildDispatch, updateBuild } from "../contexts/build.context";
 
 const useStyles = makeStyles((theme) => ({
   imageContainer: {
@@ -65,6 +66,7 @@ const TestDetailsModal: React.FunctionComponent<{
 }> = ({ testRun, updateTestRun }) => {
   const classes = useStyles();
   const history = useHistory();
+  const buildDispatch = useBuildDispatch();
 
   const stageWidth = (window.innerWidth / 2) * 0.9;
   const stageHeigth = window.innerHeight;
@@ -172,6 +174,7 @@ const TestDetailsModal: React.FunctionComponent<{
                   onClick={() =>
                     testRunService.approve(testRun.id).then((testRun) => {
                       updateTestRun(testRun);
+                      updateBuild(buildDispatch, testRun);
                     })
                   }
                 >
@@ -180,9 +183,10 @@ const TestDetailsModal: React.FunctionComponent<{
                 <Button
                   color="secondary"
                   onClick={() =>
-                    testRunService
-                      .reject(testRun.id)
-                      .then((testRun) => updateTestRun(testRun))
+                    testRunService.reject(testRun.id).then((testRun) => {
+                      updateTestRun(testRun);
+                      updateBuild(buildDispatch, testRun);
+                    })
                   }
                 >
                   Reject