Properly space and linebreak roles and groups in users table row

[swaterkamp]

What:
Properly space and linebreak roles and groups in users table row by not using the Divider component, but HorizontalSep with a new wrap prop.

Why:
Adding too many roles and/or groups to a user grew the table row too wide and move parts of it out of screen. It was also not very readable even without growing > 100%/width

How:
Visually inspect how roles and groups are displayed. Add test for wrapped HorizontalSep

Checklist:

• Tests
• CHANGELOG Entry
• Labels for ports to other branches

[codecov]

Codecov Report

Merging #2949 (7a5466a) into gsa-20.08 (2f34292) will increase coverage by 0.67%.
The diff coverage is 100.00%.

@@              Coverage Diff              @@
##           gsa-20.08    #2949      +/-   ##
=============================================
+ Coverage      53.06%   53.74%   +0.67%     
=============================================
  Files           1072     1072              
  Lines          25900    25909       +9     
  Branches        7372     7373       +1     
=============================================
+ Hits           13744    13924     +180     
+ Misses         11034    10881     -153     
+ Partials        1122     1104      -18     

Impacted Files	Coverage Δ
gsa/src/web/pages/extras/cvsscalculatorpage.js	94.73% <ø> (ø)
gsa/src/web/pages/extras/feedstatuspage.js	97.67% <ø> (ø)
gsa/src/web/pages/extras/trashcanpage.js	3.27% <ø> (ø)
gsa/src/web/pages/permissions/multipledialog.js	15.78% <ø> (ø)
gsa/src/web/pages/radius/dialog.js	66.66% <ø> (ø)
gsa/src/web/pages/results/details.js	47.12% <ø> (+40.22%)	⬆️
gsa/src/web/pages/start/page.js	51.23% <ø> (ø)
gsa/src/web/pages/users/detailspage.js	33.33% <ø> (ø)
gsa/src/web/pages/users/row.js	26.66% <ø> (ø)
gsa/src/gmp/models/user.js	100.00% <100.00%> (ø)
... and 21 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a6c8b7b...7a5466a. Read the comment docs.

[bjoernricks]

Properly space and linebreak roles and groups in users table row by not using the Divider component, which prevents wraps in flexbox. Instead add a ,  to each entry, except the last one, and let flexbox do it's magic (using the Layout component).

Why not using the wrap prop at the divider?

[swaterkamp]

This might be a slightly misleading commit message. The <Divider> is a <Layout> and should be able to handle the wrap, of course. When introducing the comma between the items, however, I used <Layout> instead, because otherwise I would have had to wrap each item and its comma into another span or so, to get the spacing right. Switching to <Layout> kept the component tree a bit simpler and easier to read.

[bjoernricks]

For me your solutions looks to complicated. If this can't be fixed with CSS (especially flexbox) alone it should be abstracted into a Divider like component.

[swaterkamp]

Using , is just making this so complicated. I now decided on using a wrappable HorizontalSep, to keep the solution as simple as possible.

Changes have been implemented