Improve UX of audit events streams UI
What does this MR do and why?
This MR fixes some existing UX issues with the audit events streams UI:
- Fixes the alignment of the various custom headers tables
- Fixed dark mode background
- Added tooltip to the custom header delete button
- Changes the new header row creation to a manual process rather than an automated one
- Revises the streaming destinations count to be clear on what is being counted
- Changed the position of the add form button to be on the same visual line as the streaming destinations count
Known issues that will be fixed in another MR
- The layout on smaller screens
- The visual hierarchy between the adding form and each individual streaming item
Screenshots or screen recordings
Custom headers tables alignment
Before | After |
---|---|
Dark mode background
Before | After |
---|---|
Header row creation
Before | After |
---|---|
Screen_Recording_2022-07-26_at_13.40.12 | Screen_Recording_2022-08-04_at_14.01.53 |
Streams count and add streams button position
Before | After |
---|---|
How to set up and validate locally
- Visit a group's audit events page e.g.
http://gdk.test:3000/groups/gitlab-org/-/audit_events
and look at the Streams tab. - Click the
Add streaming destination
button and confirm you can add a new destination and new headers. - Click the
edit
button on a destination and confirm that you can add/update/delete headers. - Check the add form, add headers table, edit form, and edit headers table lines up with the other content properly.
- Check the tooltip shown on the destinations delete button.
- Enable dark mode and confirm the add form, add headers table, edit form, and edit headers table look as expected.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #367963 (closed) #368442 (closed)
Edited by Robert Hunt