Feature/138 - Fix various bugs caused by the grid

end_to_end_tests/resources/page_locators/series_page.robot

@@ -1,5 +1,5 @@
 ***Variables***
 ${series_xpath}   xpath://*[@id="selectedTeam"]/div[2]/div[1]/div[2]/div[1]/h4
-${series_list}    xpath://*[@id="selectedTeam"]/div[2]/div/div/section[*]
+${series_list}    xpath://*[@id="selectedTeam"]/div[3]/div/div/section[*]
 ${team_breadcrumb}    xpath://*[@id="TeamBreadCrumb"]
 ${series_click_elements}    xpath://*[@id="selectedTeam"]/div[2]/div[*]/div/div[2]/div[1]

frontend/src/components/buttons/DropdownSelect.styles.js

@@ -86,5 +86,5 @@ export const DropdownWrapper = styled.div`
 export const Label = styled.label`
     display: inline-block;
     color: var(--evidence-grey);
-    margin: 8px 0 9px 0;
+    margin: var(--space-8) 0;
 `;

frontend/src/components/buttons/LastRunCheckbox.styles.js

@@ -2,19 +2,20 @@
 
 export const Header = styled.div`
     color: var(--evidence-grey);
-    margin: 8px 0;
+    margin: var(--space-8) 0;
 `;
 
 export const StyledDiv = styled.div`
-    padding: 8px;
     display: flex;
     flex-direction: ${props => props.direction};
-    border: 1px solid var(--hermanni-grey);
+    border: 1px solid var(--tonic-grey);
     border-radius: 4px;
     width: ${props => (props.direction === 'column' ? '10%' : '30%')};
     max-width: 230px;
     min-width: ${props => (props.direction === 'column' ? '200px' : '230px')};
-    margin-bottom: 24px;
+    line-height: 34px;
+    padding: 0 var(--space-8);
+
     @media only screen and (max-width: 1024px) {
         width: ${props => (props.direction === 'column' ? '20%' : '30%')};
     }

frontend/src/components/buttons/OffSetButtons.styles.js

@@ -18,16 +18,17 @@ export const FlexDiv = styled.div`
 
     button:hover {
         text-decoration: none;
-        background: var(--hermanni-grey-lighter);
-        border-radius: 4px;
         color: var(--evidence-grey-darker);
     }
+
+    > * {
+        margin-right: var(--space-8);
+    }
 `;
 
 export const StyledDirectionButton = styled.button`
     width: 36px;
-
-    margin: 1px 4px 6px 4px;
+    height: 36px;
     background: ${props =>
         props.disabled ? 'var(--tonic-grey) !important' : 'var(--nero-white)'};
     border: 1px solid var(--tonic-grey);
@@ -38,9 +39,6 @@ export const StyledDirectionButton = styled.button`
 export const LatestButton = styled.button`
     width: 89px;
     height: 36px;
-
-    margin: 1px 4px 6px 0;
-
     background: var(--nero-white);
     border: 1px solid var(--tonic-grey);
     box-sizing: border-box;
@@ -67,6 +65,5 @@ export const StyledInput = styled.input`
     border-radius: 4px;
     max-width: 54px;
     height: 36px;
-    margin: 1px 4px 6px 4px;
     text-align: right;
 `;

frontend/src/components/overview/FilterContainer.styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const FilterContainer = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    margin: var(--space-24) 0 var(--space-16) 0;
+
+    > div {
+        margin-right: var(--space-24);
+        margin-bottom: var(--space-24);
+    }
+`;

frontend/src/components/overview/Series.jsx

@@ -54,14 +54,14 @@ const Series = () => {
 
     return (
         <ParentContainer>
-            <ChartContainer id="timeLineContainer" minWidth="790px">
+            <ChartContainer id="timeLineContainer" width="790px">
                 <ElementHeader>{t('series.all_builds')}</ElementHeader>
                 <TimeLineChart />
             </ChartContainer>
             <ChartContainer minWidth="400px">
                 <LastBuildElement />
             </ChartContainer>
-            <ChartContainer className="overview-list" minWidth="500px">
+            <ChartContainer className="overview-list" width="500px">
                 <ElementHeader>{t('series.stability_table')}</ElementHeader>
                 <DashboardList />
             </ChartContainer>

frontend/src/components/overview/Series.styles.js

@@ -7,13 +7,13 @@ export const ParentContainer = styled.div`
 `;
 
 export const ChartContainer = styled(overviewElement)`
-    margin: 20px 40px 40px 0;
+    margin: var(--space-24) var(--space-40) var(--space-40) 0;
     background-color: var(--nero-white);
-    min-width: ${props => props.minWidth};
+    width: ${props => props.width};
 `;
 
 export const ElementHeader = styled.h3`
     text-align: center;
-    margin: 10px;
+    margin: var(--space-8);
     font-family: 'Hack';
 `;

frontend/src/components/suite/LogMessages.jsx

@@ -37,7 +37,7 @@ const LogMessages = ({ test }) => {
                                                         <Fail />
                                                     </span>
                                                 </InfoLevel>
-                                                <td>
+                                                <td className="suite-log-message">
                                                     <SuiteLogMessage
                                                         message={message}
                                                     />

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

@@ -11,6 +11,7 @@ export const SelectedTestContainer = styled.div`
         border: 1px solid var(--hermanni-grey);
         border-radius: 8px;
         position: relative;
+
         &::after {
             content: '';
             position: absolute;
@@ -21,6 +22,7 @@ export const SelectedTestContainer = styled.div`
             height: 100%;
         }
     }
+
     thead {
         background: var(--hermanni-grey);
         text-align: left;
@@ -35,52 +37,52 @@ export const SelectedTestContainer = styled.div`
             padding-left: 8px;
         }
     }
+
     .table-item {
         padding: 0.25rem 0rem;
         white-space: normal;
-        overflow: hidden;
+        display: inline-block;
     }
 
     tbody tr {
         border-bottom: 1px solid var(--hermanni-grey);
     }
 
-    tbody td:first-child {
-        padding-left: 8px;
+    tbody td {
+        vertical-align: top;
+        &:first-child {
+            padding-left: 8px;
+            white-space: nowrap;
+        }
     }
 
-    .tableLogLevel {
-        width: 10%;
-    }
-    .tableMessage {
-        width: 70%;
-    }
-    .tableTimeStamp {
-        width: 20%;
+    .suite-log-message {
+        > div {
+            width: calc(100vw / 2.5);
+            word-break: break-word;
+        }
     }
 `;
 
-export const FlexGrowColumn = styled.div`
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    padding: 5px;
-`;
-
 export const LogRow = styled.tr`
-    background: ${props =>
+    background-color: ${props =>
         props.log_level === 'FAIL' && 'var(--nelson-purple)'};
     color: ${props => props.log_level === 'FAIL' && 'var(--nero-white)'};
+
+    .suite-log-message {
+        .can-be-opened {
+            &::after {
+                background-color: ${props =>
+                    props.log_level === 'FAIL' && 'var(--nelson-purple)'};
+            }
+        }
+    }
 `;
 
 export const InfoLevel = styled.td`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
     span {
         position: relative;
         top: -2px;
-        left: -16px;
+        margin: 0 10px;
     }
 `;

frontend/src/components/suite/SuiteLogMessage.jsx

@@ -1,22 +1,59 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { TestMessage } from './SuiteLogMessage.styles';
 
 const SuiteLogMessage = ({ message }) => {
-    const [isOpen, setIsopen] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    let canBeOpened = useRef(false);
+    const content = React.createRef();
+    const container = React.createRef();
+    const [windowSize, setWindowSize] = useState([0, 0]);
+
+    function updateWindowSize() {
+        setWindowSize([window.innerWidth, window.innerHeight]);
+    }
+
+    useEffect(function updateWindowSizeOnResize() {
+        window.addEventListener('resize', updateWindowSize);
+        updateWindowSize();
+        return () => window.removeEventListener('resize', updateWindowSize);
+    }, []);
+
+    useEffect(
+        function updateWindowSizeWhenMessageChanges() {
+            updateWindowSize();
+        },
+        [message]
+    );
+
+    useEffect(
+        function checkCanMessageBeOpened() {
+            if (!isOpen) {
+                canBeOpened.current =
+                    content.current.offsetWidth > container.current.offsetWidth;
+            }
+        },
+        [content, container, windowSize, isOpen]
+    );
+
+    function open() {
+        if (canBeOpened.current || isOpen) {
+            return setIsOpen(!isOpen);
+        }
+    }
 
     return (
-        <div>
-            <TestMessage
-                title={message}
-                role="button"
-                tabIndex="0"
-                onClick={() => setIsopen(!isOpen)}
-                onKeyDown={() => setIsopen(!isOpen)}
-                open={isOpen}
-            >
-                {message}
-            </TestMessage>
-        </div>
+        <TestMessage
+            title={message}
+            role="button"
+            className={canBeOpened.current ? 'can-be-opened' : ''}
+            tabIndex={canBeOpened.current ? 0 : -1}
+            ref={container}
+            onClick={() => open()}
+            onKeyPress={() => open()}
+            open={isOpen}
+        >
+            <div ref={content}>{message}</div>
+        </TestMessage>
     );
 };
 

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

@@ -2,12 +2,27 @@
 
 export const TestMessage = styled.div`
     padding: 0.25rem 0rem;
-    white-space: nowrap;
-    text-overflow: ellipsis;
     width: 100%;
     overflow: hidden;
-    white-space: ${props => (props.open ? 'normal' : 'nowrap')};
-    :hover {
+
+    &.can-be-opened {
         cursor: pointer;
+        position: relative;
+
+        &::after {
+            content: '...';
+            position: absolute;
+            top: 1px;
+            right: 0;
+            width: 30px;
+            line-height: 30px;
+            background: var(--nero-white);
+            display: ${props => (props.open ? 'none' : 'inline-block')};
+        }
+    }
+
+    & > div {
+        display: inline-block;
+        white-space: ${props => (props.open ? 'normal' : 'nowrap')};
     }
 `;

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

@@ -49,8 +49,9 @@ export const HeaderContainer = styled.button`
         font-weight: normal;
         text-transform: none;
         letter-spacing: -0.04em;
+        line-height: var(--space-40);
         flex: 20;
-        padding-left: 56px;
+        padding: var(--space-8) 0 var(--space-8) 56px;
         margin: 0;
     }
 
@@ -148,7 +149,7 @@ export const StyledLink = styled(({ isselected, ...props }) => (
     text-decoration: none;
     flex: 2;
     color: ${props => props.isselected && 'var(--pirlo-blue) !important'};
-    outline-offset: -1px;
+    outline-offset: -2px;
 
     :hover {
         color: var(--titan-green-darker);