Properly space and linebreak roles and groups in users table row

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

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;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1 c2"
+    margin="5px"
+  />
+</div>
+`;
+
 exports[`HorizontalSep tests should render 1`] = `
 .c1 {
   display: -webkit-box;

gsa/src/web/components/layout/__tests__/horizontalsep.js

@@ -37,4 +37,9 @@ describe('HorizontalSep tests', () => {
     const {element} = render(<HorizontalSep separator="|" spacing="10px" />);
     expect(element).toMatchSnapshot();
   });
+
+  test('should allow to wrap', () => {
+    const {element} = render(<HorizontalSep wrap />);
+    expect(element).toMatchSnapshot();
+  });
 });

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;

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}
       />
       <TableData>
-        <Divider>{roles}</Divider>
+        <HorizontalSeparator wrap>{roles}</HorizontalSeparator>
       </TableData>
       <TableData>
-        <Divider>{groups}</Divider>
+        <HorizontalSeparator wrap>{groups}</HorizontalSeparator>
       </TableData>
       <TableData>{host_allow}</TableData>
       <TableData>{authMethod}</TableData>