Feature/suite layout testlist

frontend/src/components/buildTable/Row.jsx

@@ -23,7 +23,7 @@ const Row = ({ test_cases, suite, id, suiteId }) => {
                 ? filteredBuilds[0]
                 : builds[0];
 
-        const testRunTime = build ? build.test_run_time : 'ei ole';
+        const testRunTime = build ? build.test_run_time : 'not found';
 
         return (
             <SuiteRow key={index} position={index} build={build}>
@@ -44,7 +44,7 @@ const Row = ({ test_cases, suite, id, suiteId }) => {
 
                 <Error build={build} />
                 <td className="test-time-row">
-                    {(testRunTime / 1000).toFixed(3)}s
+                    {(testRunTime / 1000).toFixed(2)}s
                 </td>
                 <Flakiness builds={builds} id={id} />
             </SuiteRow>

frontend/src/components/suite/Testlist.jsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { useParams } from 'react-router';
+import { pickIcon } from '../TestIcon';
+import {
+    FlexContainer,
+    HeaderContainer,
+    SvgCollection,
+    SvgDown,
+    SvgUp,
+    TestListContainer,
+    DotSpan,
+    TestStatusRow,
+    StyledLink,
+    SvgStatus,
+    TimeContainer,
+    TagContainer,
+    Tag,
+} from './Testlist.styles';
+
+const Testlist = ({ suite }) => {
+    const { suiteId, buildId, seriesId, testId } = useParams();
+    const [Open, setOpen] = useState(true);
+
+    return (
+        <FlexContainer className="container">
+            <HeaderContainer
+                onClick={() => setOpen(!Open)}
+                onKeyPress={() => setOpen(!Open)}
+            >
+                <SvgCollection />
+                <h3>{suite.name} Tests</h3>
+                <p>
+                    {suite.tests.length} test
+                    {suite.tests.length > 1 && 's'}
+                </p>
+                {Open ? <SvgUp></SvgUp> : <SvgDown></SvgDown>}
+            </HeaderContainer>
+            <TestListContainer className={Open ? 'Open' : 'Close'}>
+                <ul>
+                    {' '}
+                    {suite.tests.map((test, i) => {
+                        return (
+                            <li key={i}>
+                                <DotSpan
+                                    isselected={test.id.toString() === testId}
+                                />
+                                <TestStatusRow>
+                                    {' '}
+                                    <StyledLink
+                                        isselected={
+                                            test.id.toString() === testId
+                                        }
+                                        to={`/series/${seriesId}/build/${buildId}/suite/${suiteId}/test/${test.id}/history`}
+                                    >
+                                        {test.name}
+                                    </StyledLink>
+                                    <SvgStatus>
+                                        {pickIcon(test.status)}
+                                    </SvgStatus>
+                                    <TimeContainer>
+                                        {(test.elapsed / 1000).toFixed(2)}s
+                                    </TimeContainer>
+                                    <TagContainer>
+                                        {' '}
+                                        {test.tags.map((tag, i) => {
+                                            return <Tag key={i}>{tag}</Tag>;
+                                        })}
+                                    </TagContainer>
+                                </TestStatusRow>
+                            </li>
+                        );
+                    })}
+                </ul>
+            </TestListContainer>
+        </FlexContainer>
+    );
+};
+
+export default Testlist;

frontend/src/components/suite/Testlist.styles.js

@@ -0,0 +1,175 @@
+import React from 'react';
+import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';
+import { ReactComponent as Collection } from '../../images/collection-white.svg';
+import { ReactComponent as Up } from '../../images/chevron-up-white.svg';
+import { ReactComponent as Down } from '../../images/chevron-down-white.svg';
+
+export const FlexContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    padding: 40px 0px;
+    :hover {
+        cursor: pointer;
+    }
+
+    .Open,
+    .Close {
+        max-height: 0;
+        overflow-y: hidden;
+    }
+
+    .Open {
+        max-height: 100%;
+    }
+`;
+
+export const HeaderContainer = styled.div`
+    background: var(--titan-green);
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+    border-radius: 48px;
+    width: 100%;
+    color: var(--nero-white);
+
+    h3 {
+        font-size: 20px;
+        font-family: 'Space Mono';
+        letter-spacing: -0.04em;
+        font-style: normal;
+        font-weight: normal;
+        flex: 20;
+        padding-left: 56px;
+    }
+
+    p {
+        flex: 2;
+    }
+`;
+
+export const SvgCollection = styled(Collection)`
+    position: relative;
+    left: 24px;
+`;
+
+export const SvgDown = styled(Down)`
+    color: white;
+    flex: 1;
+`;
+
+export const SvgUp = styled(Up)`
+    color: white;
+    flex: 1;
+`;
+
+export const TestListContainer = styled.div`
+    padding-left: 24px;
+
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        margin-left: 10px;
+    }
+
+    ul li {
+        margin: 0;
+        padding: 0 7px;
+        border-left: 1px solid var(--tonic-grey);
+    }
+
+    ul li:last-child {
+        border-left: none;
+    }
+
+    ul li:before {
+        position: relative;
+        top: -0.3em;
+        height: 2.4em;
+        width: 32px;
+        color: white;
+        border-bottom: 1px solid var(--tonic-grey);
+        content: '';
+        display: inline-block;
+        left: -7px;
+    }
+    ul li:first-child:before {
+        height: 3.2em;
+    }
+
+    ul li:last-child:before {
+        border-left: 1px solid var(--tonic-grey);
+        width: 33px;
+    }
+`;
+
+export const DotSpan = styled.span`
+    height: 9px;
+    width: 9px;
+    background-color: ${props =>
+        props.isselected ? 'var(--pirlo-blue)' : 'var(--tonic-grey)'};
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    left: -7px;
+`;
+
+export const TestStatusRow = styled.div`
+    display: inline-flex;
+    flex-direction: row;
+    width: 80%;
+    align-items: center;
+
+    span {
+        color: var(--evidence-grey);
+    }
+`;
+
+// eslint-disable-next-line no-unused-vars
+export const StyledLink = styled(({ isselected, ...props }) => (
+    <NavLink {...props} />
+))`
+    padding: 4px;
+    font-weight: bolder;
+    cursor: pointer;
+    display: inline;
+    text-decoration: none;
+    flex: 2;
+    color: ${props => props.isselected && 'var(--pirlo-blue) !important'};
+
+    :hover {
+        background: var(--tonic-grey);
+    }
+`;
+
+export const SvgStatus = styled.span`
+    position: relative;
+    top: -2px;
+    flex: 0.5;
+`;
+
+export const TimeContainer = styled.span`
+    flex: 0.5;
+`;
+
+export const TagContainer = styled.span`
+    flex: 3;
+
+    @media only screen and (max-width: 1300px) {
+        flex: 2;
+    }
+
+    @media only screen and (max-width: 1024px) {
+        flex: 1;
+    }
+`;
+
+export const Tag = styled.span`
+    border: 1px solid var(--evidence-grey);
+    padding: 0 8px;
+    border-radius: 16px;
+    font-size: 10px;
+    margin: 0 8px;
+`;

frontend/src/pages/Suite.jsx

@@ -12,15 +12,11 @@ import Loading from '../components/Loading';
 import Header from '../components/header/Header';
 import SuiteLogMessage from '../components/SuiteLogMessage';
 import SuiteMetadata from '../components/metadata/SuiteMetadata';
+import TestList from '../components/suite/Testlist';
 import {
     ParentInfoContainer,
-    SuiteNav,
-    SuiteDiv,
-    StyledLink,
-    FlexContainer,
     StyledFont,
     FlexGrowColumn,
-    ListHeaderColumn,
     ListTitle,
     SelectedTestDiv,
 } from './Suite.styles';
@@ -107,22 +103,7 @@ const Suite = () => {
                         <ParentBuild />
                     </ParentInfoContainer>
                     <SuiteMetadata />
-                    <FlexContainer className="container">
-                        <SuiteNav className="suiteNav" id="suiteId">
-                            {selectedSuiteState.suite.tests.map((test, i) => {
-                                return (
-                                    <SuiteDiv key={i}>
-                                        <StyledLink
-                                            to={`/series/${seriesId}/build/${buildId}/suite/${suiteId}/test/${test.id}/history`}
-                                        >
-                                            {test.name}
-                                            <span>{pickIcon(test.status)}</span>
-                                        </StyledLink>
-                                    </SuiteDiv>
-                                );
-                            })}
-                        </SuiteNav>
-                    </FlexContainer>
+                    <TestList suite={selectedSuiteState.suite} />
                     <SelectedTest
                         test={selectedSuiteState.suite.tests.find(
                             i => i.id === parseInt(testId, 10)
@@ -139,42 +120,6 @@ const Suite = () => {
 const SelectedTest = ({ test }) => {
     return test ? (
         <div>
-            <SelectedTestDiv>
-                <FlexGrowColumn className="flex-grow flex-column">
-                    <ListTitle className="list-title">
-                        <StyledFont name="desktop" />
-                        Name
-                    </ListTitle>
-                    <ListHeaderColumn className="flex-column list-header">
-                        <li>
-                            <StyledFont name="info" />
-                            {test.name}
-                        </li>
-                    </ListHeaderColumn>
-                </FlexGrowColumn>
-                <FlexGrowColumn className="flex-grow flex-column">
-                    <ListTitle className="list-title">
-                        <StyledFont name="tags" />
-                        Tags
-                    </ListTitle>
-                    <ListHeaderColumn className="flex-column list-header">
-                        {test.tags.map((tag, i) => {
-                            return <li key={i}>{tag}</li>;
-                        })}
-                    </ListHeaderColumn>
-                </FlexGrowColumn>
-                <FlexGrowColumn className="flex-grow flex-column">
-                    <ListTitle className="list-title">
-                        <StyledFont name="tachometer" />
-                        Statuses
-                    </ListTitle>
-                    <ListHeaderColumn className="flex-column list-header">
-                        <li>Setup: {test.setup_status}</li>
-                        <li>Execution: {test.execution_status}</li>
-                        <li>Teardown: {test.teardown_status}</li>
-                    </ListHeaderColumn>
-                </FlexGrowColumn>
-            </SelectedTestDiv>
             <SelectedTestDiv>
                 <FlexGrowColumn className="flex-grow flex-column">
                     <ListTitle className="list-title">