diff --git a/CHANGELOG.md b/CHANGELOG.md index a6f500b5a9..926fb4b37e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -50,6 +50,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Added the CVSS v3.1 BaseScore calculator to the `/cvsscalculator` page in the Help section. [#2536](https://github.com/greenbone/gsa/pull/2536) ### 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) - Don't show word cloud as default in result dashboard [#2883](https://github.com/greenbone/gsa/pull/2883) - Sort host, os and vulns listpage by descending severity [#2880](https://github.com/greenbone/gsa/pull/2880) - Revert the changes from integer `score` to a float `severity` [#2854](https://github.com/greenbone/gsa/pull/2854) @@ -66,7 +68,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - CVE Tables Page can now be used with the updated xml-format and CVSSv3(.1). [#2583](https://github.com/greenbone/gsa/pull/2583) - The CVSS v2 BaseScore calculator calculates the score on the client side now. [#2536](https://github.com/greenbone/gsa/pull/2536) - ### Fixed - Fix dynamic severity checkbox not being checked upon clicking [#2882](https://github.com/greenbone/gsa/pull/2882) - Fixed result CVE parsing for result listpage and CVE reports [#2869](https://github.com/greenbone/gsa/pull/2869) 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 6a9072ce08..af991d0615 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(); + }); }); diff --git a/gsa/src/web/components/layout/horizontalsep.js b/gsa/src/web/components/layout/horizontalsep.js index d7b535b0f2..f81dac3647 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; diff --git a/gsa/src/web/pages/users/row.js b/gsa/src/web/pages/users/row.js index 04f78f86e6..9e7b0a92b9 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}