From 761f48b067db455a691c219f4d8c16dc6f355904 Mon Sep 17 00:00:00 2001
From: Juan Negrier <juannegrier@gmail.com>
Date: Thu, 16 Jul 2020 21:26:28 +0100
Subject: [PATCH 1/6] Loading media from historical tests

---
 components/templates/TestExpanded.tsx       | 13 +++------
 components/templates/TestExpansionPanel.tsx | 29 +++++++++++++++++++++
 package-lock.json                           | 15 +++++++++++
 package.json                                |  1 +
 4 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/components/templates/TestExpanded.tsx b/components/templates/TestExpanded.tsx
index 58625ab..8cbcdfc 100644
--- a/components/templates/TestExpanded.tsx
+++ b/components/templates/TestExpanded.tsx
@@ -12,6 +12,7 @@ import {
 import {
   TestErrorMessageExpansionPanel,
   TestMediaExpansionPanel,
+  HistoricalTests,
 } from "./TestExpansionPanel"
 import { TestResolution } from "./TestResolution"
 import { showStatusText } from "."
@@ -113,6 +114,7 @@ export const TestExpanded = function(props: TestProps) {
   function convertToSeconds(microseconds: number) {
     return (microseconds / 1000).toString()[0]
   }
+
   return (
     <div
       key={children.test_history_id}
@@ -238,16 +240,9 @@ export const TestExpanded = function(props: TestProps) {
             )}
           </TabPanel>
           <TabPanel value={historyTabValue} index={1}>
-            <Typography style={{ padding: "10px" }}>
-              {" "}
-              COMING:
-              <span
-                style={{ color: "grey", fontStyle: "italic", padding: "10px" }}
-              >
-                Historical info for this test
-              </span>
+            <HistoricalTests>
               {children.test_id}
-            </Typography>
+            </HistoricalTests>
           </TabPanel>
         </Paper>
       ) : (
diff --git a/components/templates/TestExpansionPanel.tsx b/components/templates/TestExpansionPanel.tsx
index 7168076..6b7c08e 100644
--- a/components/templates/TestExpansionPanel.tsx
+++ b/components/templates/TestExpansionPanel.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import useSWR  from "swr"
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore"
 import MuiExpansionPanel from "@material-ui/core/ExpansionPanel"
 import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary"
@@ -14,6 +15,8 @@ import {
 } from "@material-ui/core"
 import ReactPlayer from "react-player"
 
+const fetcher = url => fetch(url).then(res => res.json());
+
 const ExpandablePanel = withStyles({
   root: {
     width: "100%",
@@ -184,3 +187,29 @@ export const TestMediaExpansionPanel = function(props: TestProps) {
     </div>
   )
 }
+
+export const HistoricalTests = function(test_id) {
+
+  const { data, mutate, error } = useSWR(`${process.env.publicDeltaCore}/api/v1/test_history/test_id/${test_id.children}`, fetcher);
+
+  const loading = !data && !error;
+  const no_data = error && error.status === 204;
+
+  return (
+    <div style={{ paddingTop: "10px" }}>
+      {loading ? (
+          "Loading historical tests..."
+        ) : (
+          data.map(test => (
+            test.media ? (
+              <TestMediaExpansionPanel key={test.file_id}>
+                {test}
+              </TestMediaExpansionPanel>
+            ) : (
+              <div></div>
+            )
+          ))
+        )}
+    </div>
+  )
+}
diff --git a/package-lock.json b/package-lock.json
index f68ace7..745408d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10283,6 +10283,21 @@
         }
       }
     },
+    "swr": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-0.2.3.tgz",
+      "integrity": "sha512-JhuuD5ojqgjAQpZAhoPBd8Di0Mr1+ykByVKuRJdtKaxkUX/y8kMACWKkLgLQc8pcDOKEAnbIreNjU7HfqI9nHQ==",
+      "requires": {
+        "fast-deep-equal": "2.0.1"
+      },
+      "dependencies": {
+        "fast-deep-equal": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
+        }
+      }
+    },
     "symbol-observable": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
diff --git a/package.json b/package.json
index 47426db..2e3caea 100755
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "recharts": "^1.8.5",
     "redux": "^4.0.4",
     "redux-saga": "^1.1.3",
+    "swr": "^0.2.3",
     "typescript-fsa": "^3.0.0",
     "typescript-fsa-reducers": "^1.2.1"
   },

From 7a2c6e8a0de5e45b376cbe5b662073d3f9d9acc5 Mon Sep 17 00:00:00 2001
From: Juan Negrier <juannegrier@gmail.com>
Date: Sun, 19 Jul 2020 21:55:04 +0100
Subject: [PATCH 2/6] Added collapsable object for each test

---
 components/templates/TestExpansionPanel.tsx | 57 ++++++++++++++++++---
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/components/templates/TestExpansionPanel.tsx b/components/templates/TestExpansionPanel.tsx
index 6b7c08e..7bed51f 100644
--- a/components/templates/TestExpansionPanel.tsx
+++ b/components/templates/TestExpansionPanel.tsx
@@ -195,19 +195,62 @@ export const HistoricalTests = function(test_id) {
   const loading = !data && !error;
   const no_data = error && error.status === 204;
 
+  const [historicalTestsExpandedPanel, setHistoricalTestsExpandedPanel] = React.useState<
+    string | false
+  >(false)
+  const expandCollapsePanel = (historicalTestsPanel: string) => (
+    _event: React.ChangeEvent<{}>,
+    isExpanded: boolean
+  ) => {
+    setHistoricalTestsExpandedPanel(isExpanded ? historicalTestsPanel : false)
+  }
+
   return (
     <div style={{ paddingTop: "10px" }}>
       {loading ? (
           "Loading historical tests..."
         ) : (
           data.map(test => (
-            test.media ? (
-              <TestMediaExpansionPanel key={test.file_id}>
-                {test}
-              </TestMediaExpansionPanel>
-            ) : (
-              <div></div>
-            )
+          <ExpandablePanel
+              key={test.test_history_id}
+              expanded={historicalTestsExpandedPanel === test.test_history_id}
+              onChange={expandCollapsePanel(test.test_history_id)}
+              TransitionProps={{ unmountOnExit: true }}
+              style={{
+                backgroundColor: "#F3EFEE", // media block  expandable color
+                borderBottom: "1px solid #F3EFEE",
+              }}
+            >
+              <CollapsedLineSummary
+                expandIcon={<ExpandMoreIcon />}
+                style={{
+                  backgroundColor: "#F3EFEE", // media block collapsed color
+                  borderBottom: "1px solid #F3EFEE",
+                }}
+              >
+                <Typography color="textPrimary">{test.status} - Resolution: {test.resolution} Date: {test.end_datetime}</Typography>
+              </CollapsedLineSummary>
+              <PanelDetails>
+                <div>
+                  <Typography
+                    style={{ paddingTop: "20px", paddingBottom: "20px" }}
+                  >
+                    Error type:
+                    <span style={{ color: "grey" }}> {test.error_type} </span>
+                  </Typography>
+                  <TestErrorMessageExpansionPanel>
+                    {test}
+                  </TestErrorMessageExpansionPanel>
+                  {test.media ? (
+                  <TestMediaExpansionPanel key={test.file_id}>
+                    {test}
+                    </TestMediaExpansionPanel>
+                  ) : (
+                    <div></div>
+                  )}
+                </div>
+              </PanelDetails>
+            </ExpandablePanel>
           ))
         )}
     </div>

From 0fddbe27c1f9de4becdc281b66fe994d652f1e24 Mon Sep 17 00:00:00 2001
From: Juan Negrier <juannegrier@gmail.com>
Date: Mon, 20 Jul 2020 21:56:50 +0100
Subject: [PATCH 3/6] =?UTF-8?q?Applying=20some=20cosmetic=20changes=20?=
 =?UTF-8?q?=F0=9F=92=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/templates/TestExpansionPanel.tsx | 50 ++++++++---
 components/templates/index.ts               |  2 +
 components/templates/showDate.js            | 20 +++++
 components/templates/showResolution.js      | 95 +++++++++++++++++++++
 components/templates/showStatusIcon.js      |  1 -
 5 files changed, 153 insertions(+), 15 deletions(-)
 create mode 100644 components/templates/showDate.js
 create mode 100644 components/templates/showResolution.js

diff --git a/components/templates/TestExpansionPanel.tsx b/components/templates/TestExpansionPanel.tsx
index 7bed51f..52c144c 100644
--- a/components/templates/TestExpansionPanel.tsx
+++ b/components/templates/TestExpansionPanel.tsx
@@ -4,6 +4,8 @@ import ExpandMoreIcon from "@material-ui/icons/ExpandMore"
 import MuiExpansionPanel from "@material-ui/core/ExpansionPanel"
 import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary"
 import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails"
+import Divider from '@material-ui/core/Divider';
+import Container from '@material-ui/core/Container';
 import {
   Typography,
   List,
@@ -13,6 +15,11 @@ import {
   CardActionArea,
   CardMedia,
 } from "@material-ui/core"
+import {
+  showStatusText,
+  showResolutionText,
+  showDateText
+} from "."
 import ReactPlayer from "react-player"
 
 const fetcher = url => fetch(url).then(res => res.json());
@@ -190,7 +197,7 @@ export const TestMediaExpansionPanel = function(props: TestProps) {
 
 export const HistoricalTests = function(test_id) {
 
-  const { data, mutate, error } = useSWR(`${process.env.publicDeltaCore}/api/v1/test_history/test_id/${test_id.children}`, fetcher);
+  const { data, error } = useSWR(`${process.env.publicDeltaCore}/api/v1/test_history/test_id/${test_id.children}`, fetcher);
 
   const loading = !data && !error;
   const no_data = error && error.status === 204;
@@ -205,7 +212,9 @@ export const HistoricalTests = function(test_id) {
     setHistoricalTestsExpandedPanel(isExpanded ? historicalTestsPanel : false)
   }
 
-  return (
+  if(no_data){
+    return ("No Historical data was found")
+  } else return (
     <div style={{ paddingTop: "10px" }}>
       {loading ? (
           "Loading historical tests..."
@@ -228,19 +237,32 @@ export const HistoricalTests = function(test_id) {
                   borderBottom: "1px solid #F3EFEE",
                 }}
               >
-                <Typography color="textPrimary">{test.status} - Resolution: {test.resolution} Date: {test.end_datetime}</Typography>
+                <Typography color="textPrimary">{showStatusText(test.status)} {showResolutionText(test.resolution)} {showDateText(test.end_datetime)}</Typography>
               </CollapsedLineSummary>
               <PanelDetails>
-                <div>
-                  <Typography
-                    style={{ paddingTop: "20px", paddingBottom: "20px" }}
-                  >
-                    Error type:
-                    <span style={{ color: "grey" }}> {test.error_type} </span>
-                  </Typography>
-                  <TestErrorMessageExpansionPanel>
-                    {test}
-                  </TestErrorMessageExpansionPanel>
+                <Container maxWidth="sm">
+                  {test.error_type? (
+                      <Typography
+                        align="center"
+                        variant="subtitle2"
+                        style={{paddingTop: "1em", paddingBottom: "1em",color: "#C71585",
+                        margin: "5px",
+                        border: "1px #C71585 solid",
+                        backgroundColor: "white"  }}
+                      >
+                          {test.error_type}
+                      </Typography>
+                    ) : (
+                      <div></div>
+                    )
+                  }
+                  {test.trace? (
+                    <TestErrorMessageExpansionPanel>
+                      {test}
+                    </TestErrorMessageExpansionPanel>
+                  ) : (
+                    <div></div>
+                  )}
                   {test.media ? (
                   <TestMediaExpansionPanel key={test.file_id}>
                     {test}
@@ -248,7 +270,7 @@ export const HistoricalTests = function(test_id) {
                   ) : (
                     <div></div>
                   )}
-                </div>
+                </Container>
               </PanelDetails>
             </ExpandablePanel>
           ))
diff --git a/components/templates/index.ts b/components/templates/index.ts
index c1217a2..5135650 100755
--- a/components/templates/index.ts
+++ b/components/templates/index.ts
@@ -3,6 +3,8 @@ export * from "./PageHeader"
 export * from "./SpacingPaper"
 export * from "./TestExpanded"
 export * from "./Pagination"
+export * from "./showDate"
+export * from "./showResolution"
 export * from "./showStatusIcon"
 export * from "./showTestStats"
 export * from "./TestExpansionPanel"
diff --git a/components/templates/showDate.js b/components/templates/showDate.js
new file mode 100644
index 0000000..29c8531
--- /dev/null
+++ b/components/templates/showDate.js
@@ -0,0 +1,20 @@
+import React from "react"
+import {Typography, Tooltip} from "@material-ui/core"
+
+export function showDateText(date) {
+    let dateBadge
+    dateBadge = (
+        <Tooltip title="End date">
+            <button style={
+                {
+                    color: "#6B8E23",
+                    margin: "5px",
+                    border: "1px #6B8E23 solid",
+                    backgroundColor: "white"
+                }
+            }>
+                {date} </button>
+        </Tooltip>
+    )
+    return dateBadge
+}
diff --git a/components/templates/showResolution.js b/components/templates/showResolution.js
new file mode 100644
index 0000000..9c115c0
--- /dev/null
+++ b/components/templates/showResolution.js
@@ -0,0 +1,95 @@
+import React from "react"
+import {Typography, Tooltip} from "@material-ui/core"
+
+export function showResolutionText(resolution) {
+    let resolutionBadge
+    if (resolution === "Not set") {
+        resolutionBadge = (
+            <Tooltip title="Resolution">
+                <button style={
+                    {
+                        color: "#008B8B",
+                        margin: "5px",
+                        border: "1px #008B8B solid",
+                        backgroundColor: "white"
+                    }
+                }>Not set</button>
+            </Tooltip>
+        )
+    } else if (resolution === "Test is flaky") {
+        resolutionBadge = (
+            <Tooltip title="Resolution">
+                <button style={
+                    {
+                        color: "#FF8C00",
+                        margin: "5px",
+                        border: "1px #FF8C00 solid",
+                        backgroundColor: "white"
+                    }
+                }>Test is flaky</button>
+            </Tooltip>
+        )
+    } else if (resolution === "Product defect") {
+        resolutionBadge = (
+            <Tooltip title="Resolution">
+                <button style={
+                    {
+                        color: "#800000",
+                        margin: "5px",
+                        border: "1px #800000 solid",
+                        backgroundColor: "white"
+                    }
+                }>Product defect</button>
+            </Tooltip>
+        )
+    } else if (resolution === "Test needs to be updated") {
+        resolutionBadge = (
+            <Tooltip title="Resolution">
+                <button style={
+                    {
+                        color: "#66CDAA",
+                        margin: "5px",
+                        border: "1px #66CDAA solid",
+                        backgroundColor: "white"
+                    }
+                }>Test needs to be updated</button>
+            </Tooltip>
+        )
+    } else if (resolution === "To investigate") {
+        resolutionBadge = (
+            <Tooltip title="Resolution">
+                <button style={
+                    {
+                        color: "#00FF7F",
+                        margin: "5px",
+                        border: "1px #00FF7F solid",
+                        backgroundColor: "white"
+                    }
+                }>To investigate</button>
+            </Tooltip>
+        )
+    } else if (resolution === "Environment issue") {
+        resolutionBadge = (
+            <Tooltip title="Resolution">
+                <button style={
+                    {
+                        color: "#EE82EE",
+                        margin: "5px",
+                        border: "1px #EE82EE solid",
+                        backgroundColor: "white"
+                    }
+                }>Environment issue</button>
+            </Tooltip>
+        )
+    } else {
+        resolutionBadge = (
+            <Tooltip title="Resolution">
+                <Typography style={
+                    {color: "grey"}
+                }>
+                    {resolution} </Typography>
+            </Tooltip>
+        )
+    }
+    return resolutionBadge
+}
diff --git a/components/templates/showStatusIcon.js b/components/templates/showStatusIcon.js
index 74d0a40..bc25620 100644
--- a/components/templates/showStatusIcon.js
+++ b/components/templates/showStatusIcon.js
@@ -58,7 +58,6 @@ export function showStatusIcon(status) {
       } else if (status === "Skipped") {
         statusIcon = (
           <button style={{color:"grey", margin: "5px" , border: "1px grey solid", backgroundColor: "white"}}>SKIPPED</button>
-
         )
       } else if (status === "Running" || status === "In Process") {
         statusIcon = (

From dad0e8ef1b2b9f8ed74443bb9e7bc65089861cb7 Mon Sep 17 00:00:00 2001
From: Juan Negrier <juannegrier@gmail.com>
Date: Mon, 20 Jul 2020 22:02:44 +0100
Subject: [PATCH 4/6] Returning proper tsx element

---
 components/templates/TestExpansionPanel.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/components/templates/TestExpansionPanel.tsx b/components/templates/TestExpansionPanel.tsx
index 52c144c..2ae3eaa 100644
--- a/components/templates/TestExpansionPanel.tsx
+++ b/components/templates/TestExpansionPanel.tsx
@@ -213,7 +213,18 @@ export const HistoricalTests = function(test_id) {
   }
 
   if(no_data){
-    return ("No Historical data was found")
+    return (
+      <Typography
+        align="center"
+        variant="subtitle2"
+        style={{paddingTop: "1em", paddingBottom: "1em",color: "#48D1CC",
+        margin: "5px",
+        border: "1px #48D1CC solid",
+        backgroundColor: "white"  }}
+        >
+          No historical data was found
+      </Typography>
+    )
   } else return (
     <div style={{ paddingTop: "10px" }}>
       {loading ? (

From 3d3e5daee4a33e2999608facfa6121c9ad747625 Mon Sep 17 00:00:00 2001
From: Juan Negrier <juannegrier@gmail.com>
Date: Mon, 20 Jul 2020 22:13:00 +0100
Subject: [PATCH 5/6] Removing unused import

---
 components/templates/TestExpansionPanel.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/templates/TestExpansionPanel.tsx b/components/templates/TestExpansionPanel.tsx
index 2ae3eaa..a8f4870 100644
--- a/components/templates/TestExpansionPanel.tsx
+++ b/components/templates/TestExpansionPanel.tsx
@@ -4,7 +4,6 @@ import ExpandMoreIcon from "@material-ui/icons/ExpandMore"
 import MuiExpansionPanel from "@material-ui/core/ExpansionPanel"
 import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary"
 import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails"
-import Divider from '@material-ui/core/Divider';
 import Container from '@material-ui/core/Container';
 import {
   Typography,

From 370d9786f3c1f9e0735b4b7cc4cde456fe741009 Mon Sep 17 00:00:00 2001
From: Alex Pishcheiko <oleksandra.pishcheiko@distilled.ie>
Date: Tue, 21 Jul 2020 15:09:46 +0100
Subject: [PATCH 6/6] renaming components, moving testHistory into a separate
 file

---
 components/templates/SpacingPaper.tsx         |  36 ----
 .../templates/{TestExpanded.tsx => Test.tsx}  |  15 +-
 ...sionPanel.tsx => TestExpandablePanels.tsx} | 108 +-----------
 components/templates/TestHistory.tsx          | 166 ++++++++++++++++++
 components/templates/index.ts                 |   6 +-
 5 files changed, 178 insertions(+), 153 deletions(-)
 delete mode 100755 components/templates/SpacingPaper.tsx
 rename components/templates/{TestExpanded.tsx => Test.tsx} (95%)
 rename components/templates/{TestExpansionPanel.tsx => TestExpandablePanels.tsx} (59%)
 create mode 100644 components/templates/TestHistory.tsx

diff --git a/components/templates/SpacingPaper.tsx b/components/templates/SpacingPaper.tsx
deleted file mode 100755
index 4000864..0000000
--- a/components/templates/SpacingPaper.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Paper } from "@material-ui/core"
-import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
-
-const useStyles = makeStyles<Theme, Props>((theme: Theme) =>
-  createStyles({
-    root: (props: Props) => ({
-      padding: props.noPadding === true ? theme.spacing(0) : theme.spacing(2),
-      marginBottom: theme.spacing(2),
-    }),
-  })
-)
-
-type Props = {
-  /**
-   * shildren
-   */
-  children: React.ReactNode
-  /**
-   * zero-padding flag
-   */
-  noPadding?: boolean
-}
-
-/**
- * Paper with spacing
- * @param props IProps
- */
-export const SpacingPaper = (props: Props) => {
-  const { children } = props
-  const classes = useStyles(props)
-  return (
-    <Paper className={classes.root} elevation={6}>
-      {children}
-    </Paper>
-  )
-}
diff --git a/components/templates/TestExpanded.tsx b/components/templates/Test.tsx
similarity index 95%
rename from components/templates/TestExpanded.tsx
rename to components/templates/Test.tsx
index 8cbcdfc..294bbd1 100644
--- a/components/templates/TestExpanded.tsx
+++ b/components/templates/Test.tsx
@@ -12,10 +12,9 @@ import {
 import {
   TestErrorMessageExpansionPanel,
   TestMediaExpansionPanel,
-  HistoricalTests,
-} from "./TestExpansionPanel"
+} from "./TestExpandablePanels"
 import { TestResolution } from "./TestResolution"
-import { showStatusText } from "."
+import { showStatusText, HistoricalTests } from "."
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -156,10 +155,10 @@ export const TestExpanded = function(props: TestProps) {
               <Tab label="Test History" id="tab-1" />
             </Tabs>
           </AppBar>
-          <TabPanel value={historyTabValue} index={0} >
-            <Typography style={{ paddingTop: "20px"}}>
+          <TabPanel value={historyTabValue} index={0}>
+            <Typography style={{ paddingTop: "20px" }}>
               Full path:
-              <span style={{ color: "grey"}}> {children.file}</span>
+              <span style={{ color: "grey" }}> {children.file}</span>
             </Typography>
             <Typography style={{ paddingTop: "20px" }}>
               Duration:
@@ -240,9 +239,7 @@ export const TestExpanded = function(props: TestProps) {
             )}
           </TabPanel>
           <TabPanel value={historyTabValue} index={1}>
-            <HistoricalTests>
-              {children.test_id}
-            </HistoricalTests>
+            <HistoricalTests>{children.test_id}</HistoricalTests>
           </TabPanel>
         </Paper>
       ) : (
diff --git a/components/templates/TestExpansionPanel.tsx b/components/templates/TestExpandablePanels.tsx
similarity index 59%
rename from components/templates/TestExpansionPanel.tsx
rename to components/templates/TestExpandablePanels.tsx
index a8f4870..0cbebda 100644
--- a/components/templates/TestExpansionPanel.tsx
+++ b/components/templates/TestExpandablePanels.tsx
@@ -1,10 +1,8 @@
 import React from "react"
-import useSWR  from "swr"
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore"
 import MuiExpansionPanel from "@material-ui/core/ExpansionPanel"
 import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary"
 import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails"
-import Container from '@material-ui/core/Container';
 import {
   Typography,
   List,
@@ -14,15 +12,8 @@ import {
   CardActionArea,
   CardMedia,
 } from "@material-ui/core"
-import {
-  showStatusText,
-  showResolutionText,
-  showDateText
-} from "."
 import ReactPlayer from "react-player"
 
-const fetcher = url => fetch(url).then(res => res.json());
-
 const ExpandablePanel = withStyles({
   root: {
     width: "100%",
@@ -109,7 +100,9 @@ export const TestErrorMessageExpansionPanel = function(props: TestProps) {
         </CollapsedLineSummary>
         <PanelDetails>
           <List>
-            <ListItem style={{ wordBreak: "break-all", whiteSpace: "pre-wrap" }}>
+            <ListItem
+              style={{ wordBreak: "break-all", whiteSpace: "pre-wrap" }}
+            >
               {" "}
               {children.trace}
             </ListItem>
@@ -193,98 +186,3 @@ export const TestMediaExpansionPanel = function(props: TestProps) {
     </div>
   )
 }
-
-export const HistoricalTests = function(test_id) {
-
-  const { data, error } = useSWR(`${process.env.publicDeltaCore}/api/v1/test_history/test_id/${test_id.children}`, fetcher);
-
-  const loading = !data && !error;
-  const no_data = error && error.status === 204;
-
-  const [historicalTestsExpandedPanel, setHistoricalTestsExpandedPanel] = React.useState<
-    string | false
-  >(false)
-  const expandCollapsePanel = (historicalTestsPanel: string) => (
-    _event: React.ChangeEvent<{}>,
-    isExpanded: boolean
-  ) => {
-    setHistoricalTestsExpandedPanel(isExpanded ? historicalTestsPanel : false)
-  }
-
-  if(no_data){
-    return (
-      <Typography
-        align="center"
-        variant="subtitle2"
-        style={{paddingTop: "1em", paddingBottom: "1em",color: "#48D1CC",
-        margin: "5px",
-        border: "1px #48D1CC solid",
-        backgroundColor: "white"  }}
-        >
-          No historical data was found
-      </Typography>
-    )
-  } else return (
-    <div style={{ paddingTop: "10px" }}>
-      {loading ? (
-          "Loading historical tests..."
-        ) : (
-          data.map(test => (
-          <ExpandablePanel
-              key={test.test_history_id}
-              expanded={historicalTestsExpandedPanel === test.test_history_id}
-              onChange={expandCollapsePanel(test.test_history_id)}
-              TransitionProps={{ unmountOnExit: true }}
-              style={{
-                backgroundColor: "#F3EFEE", // media block  expandable color
-                borderBottom: "1px solid #F3EFEE",
-              }}
-            >
-              <CollapsedLineSummary
-                expandIcon={<ExpandMoreIcon />}
-                style={{
-                  backgroundColor: "#F3EFEE", // media block collapsed color
-                  borderBottom: "1px solid #F3EFEE",
-                }}
-              >
-                <Typography color="textPrimary">{showStatusText(test.status)} {showResolutionText(test.resolution)} {showDateText(test.end_datetime)}</Typography>
-              </CollapsedLineSummary>
-              <PanelDetails>
-                <Container maxWidth="sm">
-                  {test.error_type? (
-                      <Typography
-                        align="center"
-                        variant="subtitle2"
-                        style={{paddingTop: "1em", paddingBottom: "1em",color: "#C71585",
-                        margin: "5px",
-                        border: "1px #C71585 solid",
-                        backgroundColor: "white"  }}
-                      >
-                          {test.error_type}
-                      </Typography>
-                    ) : (
-                      <div></div>
-                    )
-                  }
-                  {test.trace? (
-                    <TestErrorMessageExpansionPanel>
-                      {test}
-                    </TestErrorMessageExpansionPanel>
-                  ) : (
-                    <div></div>
-                  )}
-                  {test.media ? (
-                  <TestMediaExpansionPanel key={test.file_id}>
-                    {test}
-                    </TestMediaExpansionPanel>
-                  ) : (
-                    <div></div>
-                  )}
-                </Container>
-              </PanelDetails>
-            </ExpandablePanel>
-          ))
-        )}
-    </div>
-  )
-}
diff --git a/components/templates/TestHistory.tsx b/components/templates/TestHistory.tsx
new file mode 100644
index 0000000..d01e541
--- /dev/null
+++ b/components/templates/TestHistory.tsx
@@ -0,0 +1,166 @@
+import React from "react"
+import useSWR from "swr"
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore"
+import MuiExpansionPanel from "@material-ui/core/ExpansionPanel"
+import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary"
+import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails"
+import Container from "@material-ui/core/Container"
+import { Typography, withStyles } from "@material-ui/core"
+import {
+  showStatusText,
+  showResolutionText,
+  showDateText,
+  TestErrorMessageExpansionPanel,
+  TestMediaExpansionPanel,
+} from "."
+
+const fetcher = url => fetch(url).then(res => res.json())
+
+const ExpandablePanel = withStyles({
+  root: {
+    width: "100%",
+    boxShadow: "none",
+    "&:not(:last-child)": {
+      borderBottom: 0,
+    },
+    "&:before": {
+      display: "none",
+    },
+    "&$expanded": {
+      margin: "auto",
+    },
+  },
+  expanded: {},
+})(MuiExpansionPanel)
+
+const CollapsedLineSummary = withStyles({
+  root: {
+    marginBottom: -1,
+    minHeight: 56,
+    "&$expanded": {
+      minHeight: 56,
+    },
+    width: "100%",
+  },
+  content: {
+    "&$expanded": {
+      margin: "12px 0",
+    },
+  },
+  expanded: {},
+})(MuiExpansionPanelSummary)
+
+const PanelDetails = withStyles(theme => ({
+  root: {
+    padding: theme.spacing(2),
+    width: "100%",
+  },
+}))(MuiExpansionPanelDetails)
+
+export const HistoricalTests = function(testId) {
+  const { data, error } = useSWR(
+    `${process.env.publicDeltaCore}/api/v1/test_history/test_id/${testId.children}`,
+    fetcher
+  )
+
+  const loading = !data && !error
+  const noData = !data
+  const [
+    historicalTestsExpandedPanel,
+    setHistoricalTestsExpandedPanel,
+  ] = React.useState<string | false>(false)
+  const expandCollapsePanel = (historicalTestsPanel: string) => (
+    _event: React.ChangeEvent<{}>,
+    isExpanded: boolean
+  ) => {
+    setHistoricalTestsExpandedPanel(isExpanded ? historicalTestsPanel : false)
+  }
+
+  if (noData) {
+    return (
+      <Typography
+        align="center"
+        variant="subtitle2"
+        style={{
+          paddingTop: "1em",
+          paddingBottom: "1em",
+          color: "#48D1CC",
+          margin: "5px",
+          border: "1px #48D1CC solid",
+          backgroundColor: "white",
+        }}
+      >
+        No historical data was found
+      </Typography>
+    )
+  } else {
+    return (
+      <div style={{ paddingTop: "10px" }}>
+        {loading
+          ? "Loading historical tests..."
+          : data.map(test => (
+              <ExpandablePanel
+                key={test.test_history_id}
+                expanded={historicalTestsExpandedPanel === test.test_history_id}
+                onChange={expandCollapsePanel(test.test_history_id)}
+                TransitionProps={{ unmountOnExit: true }}
+                style={{
+                  backgroundColor: "#F3EFEE", // media block  expandable color
+                  borderBottom: "1px solid #F3EFEE",
+                }}
+              >
+                <CollapsedLineSummary
+                  expandIcon={<ExpandMoreIcon />}
+                  style={{
+                    backgroundColor: "#F3EFEE", // media block collapsed color
+                    borderBottom: "1px solid #F3EFEE",
+                  }}
+                >
+                  <Typography color="textPrimary">
+                    {showStatusText(test.status)}{" "}
+                    {showResolutionText(test.resolution)}{" "}
+                    {showDateText(test.end_datetime)}
+                  </Typography>
+                </CollapsedLineSummary>
+                <PanelDetails>
+                  <Container maxWidth="sm">
+                    {test.error_type ? (
+                      <Typography
+                        align="center"
+                        variant="subtitle2"
+                        style={{
+                          paddingTop: "1em",
+                          paddingBottom: "1em",
+                          color: "#C71585",
+                          margin: "5px",
+                          border: "1px #C71585 solid",
+                          backgroundColor: "white",
+                        }}
+                      >
+                        {test.error_type}
+                      </Typography>
+                    ) : (
+                      <div></div>
+                    )}
+                    {test.trace ? (
+                      <TestErrorMessageExpansionPanel>
+                        {test}
+                      </TestErrorMessageExpansionPanel>
+                    ) : (
+                      <div></div>
+                    )}
+                    {test.media ? (
+                      <TestMediaExpansionPanel key={test.file_id}>
+                        {test}
+                      </TestMediaExpansionPanel>
+                    ) : (
+                      <div></div>
+                    )}
+                  </Container>
+                </PanelDetails>
+              </ExpandablePanel>
+            ))}
+      </div>
+    )
+  }
+}
diff --git a/components/templates/index.ts b/components/templates/index.ts
index 5135650..ecb9b00 100755
--- a/components/templates/index.ts
+++ b/components/templates/index.ts
@@ -1,12 +1,12 @@
 export * from "./BasePage"
 export * from "./PageHeader"
-export * from "./SpacingPaper"
-export * from "./TestExpanded"
+export * from "./Test"
 export * from "./Pagination"
 export * from "./showDate"
 export * from "./showResolution"
 export * from "./showStatusIcon"
 export * from "./showTestStats"
-export * from "./TestExpansionPanel"
+export * from "./TestExpandablePanels"
 export * from "./TestResolution"
 export * from "./ListOfSuites"
+export * from "./TestHistory"