From 0bd3450ba17e37ae27247fda0cfe9a001a43f8a7 Mon Sep 17 00:00:00 2001
From: Pavel Strunkin <pashidlos@gmail.com>
Date: Tue, 26 May 2020 21:23:13 +0200
Subject: [PATCH] TestRun modal. Image details are added

---
 src/components/ImageDetails.tsx     | 27 ++++++++++++
 src/components/TestDetailsModal.tsx | 66 +++++++++++++++--------------
 src/types/testStatus.ts             | 12 +++---
 3 files changed, 68 insertions(+), 37 deletions(-)
 create mode 100644 src/components/ImageDetails.tsx

diff --git a/src/components/ImageDetails.tsx b/src/components/ImageDetails.tsx
new file mode 100644
index 00000000..8a494c64
--- /dev/null
+++ b/src/components/ImageDetails.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { Typography } from "@material-ui/core";
+import { staticService } from "../services";
+import useImage from "use-image";
+
+interface IProps {
+  type: "Baseline" | "Image" | "Diff";
+  imageName: string;
+}
+
+const ImageDetails: React.FunctionComponent<IProps> = ({ type, imageName }) => {
+  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>
+        </React.Fragment>
+      ) : (
+        <Typography variant='caption'>No image</Typography>
+      )}
+    </React.Fragment>
+  );
+};
+
+export default ImageDetails;
diff --git a/src/components/TestDetailsModal.tsx b/src/components/TestDetailsModal.tsx
index 9ced1df1..aebce697 100644
--- a/src/components/TestDetailsModal.tsx
+++ b/src/components/TestDetailsModal.tsx
@@ -11,7 +11,6 @@ import {
   Box,
 } from "@material-ui/core";
 import { TestRun } from "../types";
-import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import { testRunService, testVariationService } from "../services";
 import DrawArea from "./DrawArea";
 import { TestStatus } from "../types/testStatus";
@@ -20,21 +19,13 @@ import { IgnoreArea } from "../types/ignoreArea";
 import { KonvaEventObject } from "konva/types/Node";
 import { Close, Add, Delete, Save } from "@material-ui/icons";
 import TestStatusChip from "./TestStatusChip";
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    appBar: {
-      position: "relative",
-    },
-  })
-);
+import ImageDetails from "./ImageDetails";
 
 const TestDetailsModal: React.FunctionComponent<{
   testRun: TestRun;
   updateTestRun: (testRun: TestRun) => void;
 }> = ({ testRun, updateTestRun }) => {
   const history = useHistory();
-  const classes = useStyles();
 
   const [isDiffShown, setIsDiffShown] = useState(!!testRun.diffName);
   const [selectedRectId, setSelectedRectId] = React.useState<string>();
@@ -79,7 +70,7 @@ const TestDetailsModal: React.FunctionComponent<{
         when={!isIgnoreAreasSaved()}
         message={`You have unsaved changes that will be lost`}
       />
-      <AppBar className={classes.appBar}>
+      <AppBar position="sticky">
         <Toolbar>
           <Grid container justify="space-between">
             <Grid item>
@@ -214,6 +205,9 @@ const TestDetailsModal: React.FunctionComponent<{
       </Box>
       <Grid container>
         <Grid item xs={6}>
+          <Box m={1}>
+            <ImageDetails type="Baseline" imageName={testRun.baselineName} />
+          </Box>
           <DrawArea
             width={stageWidth}
             height={stageHeigth}
@@ -227,27 +221,37 @@ const TestDetailsModal: React.FunctionComponent<{
         </Grid>
         <Grid item xs={6}>
           {isDiffShown ? (
-            <DrawArea
-              width={stageWidth}
-              height={stageHeigth}
-              imageUrl={testRun.diffName}
-              ignoreAreas={ignoreAreas}
-              setIgnoreAreas={setIgnoreAreas}
-              selectedRectId={selectedRectId}
-              setSelectedRectId={setSelectedRectId}
-              onStageClick={removeSelection}
-            />
+            <React.Fragment>
+              <Box m={1}>
+                <ImageDetails type="Diff" imageName={testRun.diffName} />
+              </Box>
+              <DrawArea
+                width={stageWidth}
+                height={stageHeigth}
+                imageUrl={testRun.diffName}
+                ignoreAreas={ignoreAreas}
+                setIgnoreAreas={setIgnoreAreas}
+                selectedRectId={selectedRectId}
+                setSelectedRectId={setSelectedRectId}
+                onStageClick={removeSelection}
+              />
+            </React.Fragment>
           ) : (
-            <DrawArea
-              width={stageWidth}
-              height={stageHeigth}
-              imageUrl={testRun.imageName}
-              ignoreAreas={ignoreAreas}
-              setIgnoreAreas={setIgnoreAreas}
-              selectedRectId={selectedRectId}
-              setSelectedRectId={setSelectedRectId}
-              onStageClick={removeSelection}
-            />
+            <React.Fragment>
+              <Box m={1}>
+                <ImageDetails type="Image" imageName={testRun.imageName} />
+              </Box>
+              <DrawArea
+                width={stageWidth}
+                height={stageHeigth}
+                imageUrl={testRun.imageName}
+                ignoreAreas={ignoreAreas}
+                setIgnoreAreas={setIgnoreAreas}
+                selectedRectId={selectedRectId}
+                setSelectedRectId={setSelectedRectId}
+                onStageClick={removeSelection}
+              />
+            </React.Fragment>
           )}
         </Grid>
       </Grid>
diff --git a/src/types/testStatus.ts b/src/types/testStatus.ts
index f72498c3..de7f523b 100644
--- a/src/types/testStatus.ts
+++ b/src/types/testStatus.ts
@@ -1,7 +1,7 @@
 export enum TestStatus {
-    new = 'new',
-    ok = 'ok',
-    unresolved = 'unresolved',
-    failed = 'failed',
-  }
-  
\ No newline at end of file
+  new = "new",
+  ok = "ok",
+  unresolved = "unresolved",
+  failed = "failed",
+  approved = "approved",
+}