Update streaming audit events UI to use collapsible component
The following discussion from #411005[3.0.png] should be addressed:
Based on the BootstrapVue docs which our components are based on it looks like a combination of the following is required:
If we decide to convert the collapsible design into it's own issue then a few items from the List of changes would need to be moved over:
- Update the spacing between each section so lines do not do the grouping; instead, they are done by space(For detail on the spacing, please see Figma)
- Update the type scale used in titles and subtitles. For detail on the spacing, please see Figma)
- Remove the box border of the area
- Some additional styling (unless I have missed this as an existing component)
#411005 (closed))
List of Changes (includes some from-
Adjust stream_item.vue
andaudit_events_stream.vue
to be proper collapsible sections -
From #411005 (closed)
-
Update the spacing between each section so lines do not do the grouping; instead, they are done by space(For detail on the spacing, please see Figma) -
Update the type scale used in titles and subtitles. For detail on the spacing, please see Figma)-> moved to #415336 (closed) -
Remove the box border of the area -
Some additional styling (unless I have missed this as an existing component)
-
Verification steps
- Go to issue-reproduce group audit events
- Verify that you can click both the chevron and the title of the streaming destination "https://hsandhu.requestcatcher.com/" to expand the form of the destination now
- Verify that if you add another streaming destination, the two destinations are separated by a grey line (check design)
Make sure to delete the streaming destination you created afterwards.
Edited by Lorenz van Herwaarden