From 6bf8ea8da9c11f3061eed94f63a0aa9785efabed Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 4 Jun 2021 11:09:43 +0200 Subject: [PATCH 1/4] Allow to wrap HorizontalSep --- gsa/src/web/components/layout/horizontalsep.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/gsa/src/web/components/layout/horizontalsep.js b/gsa/src/web/components/layout/horizontalsep.js index a8af63089d..74cec42c96 100644 --- a/gsa/src/web/components/layout/horizontalsep.js +++ b/gsa/src/web/components/layout/horizontalsep.js @@ -17,11 +17,14 @@ */ import styled from 'styled-components'; +import {isDefined} from 'gmp/utils/identity'; + import PropTypes from 'web/utils/proptypes'; import Divider from './divider'; const HorizontalSep = styled(Divider)` + flex-wrap: ${props => (isDefined(props.wrap) ? props.wrap : null)}; & > *:not(:last-child)::after { content: ${({separator = '•'}) => `'${separator}'`}; margin-left: ${({spacing = '5px'}) => spacing}; @@ -31,6 +34,7 @@ const HorizontalSep = styled(Divider)` HorizontalSep.propTypes = { separator: PropTypes.string, spacing: PropTypes.string, + wrap: PropTypes.oneOf([true, 'wrap', 'nowrap']), }; export default HorizontalSep; From e0e7d18f1c779259065b4da8901159c0f4080616 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 4 Jun 2021 11:10:30 +0200 Subject: [PATCH 2/4] Add test for wrapping HorizontalSep --- .../__snapshots__/horizontalsep.js.snap | 77 +++++++++++++++++++ .../layout/__tests__/horizontalsep.js | 5 ++ 2 files changed, 82 insertions(+) diff --git a/gsa/src/web/components/layout/__tests__/__snapshots__/horizontalsep.js.snap b/gsa/src/web/components/layout/__tests__/__snapshots__/horizontalsep.js.snap index 1ff0d094af..e4c776bd12 100644 --- a/gsa/src/web/components/layout/__tests__/__snapshots__/horizontalsep.js.snap +++ b/gsa/src/web/components/layout/__tests__/__snapshots__/horizontalsep.js.snap @@ -1,5 +1,82 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`HorizontalSep tests should allow to wrap 1`] = ` +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: start; + -webkit-justify-content: start; + -ms-flex-pack: start; + justify-content: start; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-left: -5px; +} + +.c1 > * { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c1 > * { + margin-left: 5px; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: start; + -webkit-justify-content: start; + -ms-flex-pack: start; + justify-content: start; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c2 { + -webkit-flex-wrap: true; + -ms-flex-wrap: true; + flex-wrap: true; +} + +.c2 > *:not(:last-child)::after { + content: '•'; + margin-left: 5px; +} + +
+
+
+`; + exports[`HorizontalSep tests should render 1`] = ` .c1 { display: -webkit-box; diff --git a/gsa/src/web/components/layout/__tests__/horizontalsep.js b/gsa/src/web/components/layout/__tests__/horizontalsep.js index a0c2c83f89..97e477d4be 100644 --- a/gsa/src/web/components/layout/__tests__/horizontalsep.js +++ b/gsa/src/web/components/layout/__tests__/horizontalsep.js @@ -37,4 +37,9 @@ describe('HorizontalSep tests', () => { const {element} = render(); expect(element).toMatchSnapshot(); }); + + test('should allow to wrap', () => { + const {element} = render(); + expect(element).toMatchSnapshot(); + }); }); From f934fb0c6bf6a58a5b2f149f1bcf4a8712c73cf1 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 4 Jun 2021 11:11:14 +0200 Subject: [PATCH 3/4] Use wrappable HorizontalSep in User row --- gsa/src/web/pages/users/row.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/gsa/src/web/pages/users/row.js b/gsa/src/web/pages/users/row.js index 31a2f437d8..ffc6a15bf3 100644 --- a/gsa/src/web/pages/users/row.js +++ b/gsa/src/web/pages/users/row.js @@ -24,8 +24,8 @@ import {map} from 'gmp/utils/array'; import ExportIcon from 'web/components/icon/exporticon'; -import Divider from 'web/components/layout/divider'; import IconDivider from 'web/components/layout/icondivider'; +import HorizontalSeparator from 'web/components/layout/horizontalsep'; import DetailsLink from 'web/components/link/detailslink'; @@ -121,10 +121,10 @@ const Row = ({ onToggleDetailsClick={onToggleDetailsClick} /> - {roles} + {roles} - {groups} + {groups} {host_allow} {authMethod} From 7a5466ac42a1ae285b797c7f6d2296808f9fb856 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 4 Jun 2021 11:14:07 +0200 Subject: [PATCH 4/4] Update Changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0b778aa1e4..f57ed64357 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Set SameSite=strict for the session cookie to avoid CSRF [#2948](https://github.com/greenbone/gsa/pull/2948) ### Changed +- Properly space and linebreak roles and groups in users table row [#2949](https://github.com/greenbone/gsa/pull/2949) +- Make HorizontalSep component wrappable [#2949](https://github.com/greenbone/gsa/pull/2949) - Use greenbone sensor as default scanner type when opening the dialog if available [#2867](https://github.com/greenbone/gsa/pull/2867) ### Fixed