branh added

Author: pashidlos

src/components/DrawArea.tsx

@@ -32,6 +32,7 @@ const useStyles = makeStyles((theme) => ({
 interface IDrawArea {
   type: "Baseline" | "Image" | "Diff";
   imageName: string;
+  branchName: string;
   ignoreAreas: IgnoreArea[];
   setIgnoreAreas: (ignoreAreas: IgnoreArea[]) => void;
   selectedRectId: string | undefined;
@@ -55,6 +56,7 @@ interface IDrawArea {
 export const DrawArea: FunctionComponent<IDrawArea> = ({
   type,
   imageName,
+  branchName,
   ignoreAreas,
   setIgnoreAreas,
   selectedRectId,
@@ -124,7 +126,7 @@ export const DrawArea: FunctionComponent<IDrawArea> = ({
     <React.Fragment>
       <Grid container direction="column">
         <Grid item>
-          <ImageDetails type={type} imageName={imageName} />
+          <ImageDetails type={type} branchName={branchName} imageName={imageName} />
         </Grid>
         {imageStatus === "loading" && (
           <Grid

src/components/ImageDetails.tsx

@@ -1,24 +1,38 @@
 import React from "react";
-import { Typography } from "@material-ui/core";
+import { Typography, Chip, Grid } from "@material-ui/core";
 import { staticService } from "../services";
 import useImage from "use-image";
 
 interface IProps {
   type: "Baseline" | "Image" | "Diff";
   imageName: string;
+  branchName: string;
 }
 
-const ImageDetails: React.FunctionComponent<IProps> = ({ type, imageName }) => {
+const ImageDetails: React.FunctionComponent<IProps> = ({
+  type,
+  imageName,
+  branchName,
+}) => {
   const [image] = useImage(staticService.getImage(imageName));
   return (
     <React.Fragment>
       <Typography>{type}</Typography>
       {imageName ? (
         <React.Fragment>
-          <Typography variant='caption'>Real size: {`${image?.width} x ${image?.height}`}</Typography>
+          <Grid container spacing={2}>
+            <Grid item>
+              <Typography variant="caption">
+                Real size: {`${image?.width} x ${image?.height}`}
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Chip size="small" label={branchName} />
+            </Grid>
+          </Grid>
         </React.Fragment>
       ) : (
-        <Typography variant='caption'>No image</Typography>
+        <Typography variant="caption">No image</Typography>
       )}
     </React.Fragment>
   );

src/components/TestDetailsModal.tsx

@@ -319,6 +319,7 @@ const TestDetailsModal: React.FunctionComponent<{
           <DrawArea
             type="Baseline"
             imageName={testRun.baselineName}
+            branchName={testRun.baselineBranchName}
             ignoreAreas={[]}
             setIgnoreAreas={setIgnoreAreas}
             selectedRectId={selectedRectId}
@@ -336,6 +337,7 @@ const TestDetailsModal: React.FunctionComponent<{
             <DrawArea
               type="Diff"
               imageName={testRun.diffName}
+              branchName={testRun.branchName}
               ignoreAreas={ignoreAreas}
               setIgnoreAreas={setIgnoreAreas}
               selectedRectId={selectedRectId}
@@ -351,6 +353,7 @@ const TestDetailsModal: React.FunctionComponent<{
             <DrawArea
               type="Image"
               imageName={testRun.imageName}
+              branchName={testRun.branchName}
               ignoreAreas={ignoreAreas}
               setIgnoreAreas={setIgnoreAreas}
               selectedRectId={selectedRectId}

src/components/TestVariationDetails.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Typography } from "@material-ui/core";
+import { Grid, Typography, Chip } from "@material-ui/core";
 import { TestVariation } from "../types";
 
 interface IProps {
@@ -33,6 +33,9 @@ export const TestVariationDetails: React.FunctionComponent<IProps> = ({
             <Typography>Viewport: {testVariation.viewport}</Typography>
           </Grid>
         )}
+        <Grid item>
+          <Chip size="small" label={testVariation.branchName} />
+        </Grid>
       </Grid>
     </Grid>
   );

src/pages/ProjectListPage.tsx

@@ -116,6 +116,7 @@ const ProjectsListPage = () => {
               <CardContent>
                 <Typography>Key: {project.id}</Typography>
                 <Typography>Name: {project.name}</Typography>
+                <Typography>Main branch: {project.mainBranchName}</Typography>
                 <Typography>Created: {formatDateTime(project.createdAt)}</Typography>
               </CardContent>
               <CardActions>

src/types/project.ts

@@ -3,6 +3,7 @@ import { Build } from "./build";
 export interface Project {
   id: string;
   name: string;
+  mainBranchName: string;
   builds: Build[];
   updatedAt: string;
   createdAt: string;

src/types/testRun.ts

@@ -17,4 +17,6 @@ export interface TestRun {
   device: string;
   ignoreAreas: string;
   comment?: string;
+  branchName: string;
+  baselineBranchName: string;
 }

src/types/testVariation.ts

@@ -4,6 +4,7 @@ export interface TestVariation {
   id: string;
   name: string;
   baselineName: string;
+  branchName: string;
   os: string;
   browser: string;
   viewport: string;