diff --git a/frontend/src/components/buildTable/Row.jsx b/frontend/src/components/buildTable/Row.jsx index 7a3c6075..409413ab 100644 --- a/frontend/src/components/buildTable/Row.jsx +++ b/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 ( @@ -44,7 +44,7 @@ const Row = ({ test_cases, suite, id, suiteId }) => { - {(testRunTime / 1000).toFixed(3)}s + {(testRunTime / 1000).toFixed(2)}s diff --git a/frontend/src/components/suite/Testlist.jsx b/frontend/src/components/suite/Testlist.jsx new file mode 100644 index 00000000..b2089b72 --- /dev/null +++ b/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 ( + + setOpen(!Open)} + onKeyPress={() => setOpen(!Open)} + > + +

{suite.name} Tests

+

+ {suite.tests.length} test + {suite.tests.length > 1 && 's'} +

+ {Open ? : } + + + + + + ); +}; + +export default Testlist; diff --git a/frontend/src/components/suite/Testlist.styles.js b/frontend/src/components/suite/Testlist.styles.js new file mode 100644 index 00000000..62a888b2 --- /dev/null +++ b/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 }) => ( + +))` + 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; +`; diff --git a/frontend/src/images/chevron-down-white.svg b/frontend/src/images/chevron-down-white.svg new file mode 100644 index 00000000..5b96efa3 --- /dev/null +++ b/frontend/src/images/chevron-down-white.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/images/chevron-left.svg b/frontend/src/images/chevron-left.svg index 8a213d9b..46d774ab 100644 --- a/frontend/src/images/chevron-left.svg +++ b/frontend/src/images/chevron-left.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/frontend/src/images/chevron-up-white.svg b/frontend/src/images/chevron-up-white.svg new file mode 100644 index 00000000..cdc087ba --- /dev/null +++ b/frontend/src/images/chevron-up-white.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/images/collection-closed.svg b/frontend/src/images/collection-closed.svg new file mode 100644 index 00000000..814e475a --- /dev/null +++ b/frontend/src/images/collection-closed.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/images/collection-open.svg b/frontend/src/images/collection-open.svg new file mode 100644 index 00000000..8d9e97d8 --- /dev/null +++ b/frontend/src/images/collection-open.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/images/collection-white.svg b/frontend/src/images/collection-white.svg new file mode 100644 index 00000000..13a57556 --- /dev/null +++ b/frontend/src/images/collection-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/pages/Suite.jsx b/frontend/src/pages/Suite.jsx index efb736ce..3ab9deea 100644 --- a/frontend/src/pages/Suite.jsx +++ b/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 = () => { - - - {selectedSuiteState.suite.tests.map((test, i) => { - return ( - - - {test.name} - {pickIcon(test.status)} - - - ); - })} - - + i.id === parseInt(testId, 10) @@ -139,42 +120,6 @@ const Suite = () => { const SelectedTest = ({ test }) => { return test ? (
- - - - - Name - - -
  • - - {test.name} -
    • -     -     - - - - Tags - - - {test.tags.map((tag, i) => { - return
  • {tag}
    • ; - })} -     -     - - - - Statuses - - -
  • Setup: {test.setup_status}
    • -
  • Execution: {test.execution_status}
    • -
  • Teardown: {test.teardown_status}
    • -     -     -     diff --git a/frontend/src/pages/Suite.styles.js b/frontend/src/pages/Suite.styles.js index 1beb1333..f04aa1c6 100644 --- a/frontend/src/pages/Suite.styles.js +++ b/frontend/src/pages/Suite.styles.js @@ -1,51 +1,11 @@ import styled from 'styled-components'; import FA from 'react-fontawesome'; -import { NavLink } from 'react-router-dom'; export const ParentInfoContainer = styled.div` display: flex; padding: 20px 0; `; -export const SuiteNav = styled.div` - list-style: none; - padding: 0; - align-content: center; - border-right: 1px solid grey; - flex-grow: 1; - - span { - float: right; - margin-left: 12px; - } - .active { - background: #fff; - } -`; - -export const SuiteDiv = styled.div` - display: flex; - width: 100%; - min-width: 140px; -`; - -export const StyledLink = styled(NavLink)` - width: 100%; - padding: 10px; - color: black !important; - cursor: pointer; - display: inline; - text-decoration: none; - - :hover { - background: #ddd; - } -`; - -export const FlexContainer = styled.div` - display: flex; -`; - export const StyledFont = styled(FA)` margin-right: 8px; `; @@ -57,14 +17,6 @@ export const FlexGrowColumn = styled.div` padding: 5px; `; -export const ListHeaderColumn = styled.ul` - list-style: none; - padding-left: 0px; - display: flex; - flex-direction: column; - padding: 5px; -`; - export const ListTitle = styled.div` color: grey; `;