Improve UX of audit events streams UI

Merged Robert Hunt requested to merge 367963-follow-up-improve-ux-of-audit-events-streams-ui into master

What does this MR do and why?

This MR fixes some existing UX issues with the audit events streams UI:

  1. Fixes the alignment of the various custom headers tables
  2. Fixed dark mode background
  3. Added tooltip to the custom header delete button
  4. Changes the new header row creation to a manual process rather than an automated one
  5. Revises the streaming destinations count to be clear on what is being counted
  6. 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

  1. The layout on smaller screens
  2. The visual hierarchy between the adding form and each individual streaming item

Screenshots or screen recordings

Custom headers tables alignment

Before After
Screenshot_2022-07-26_at_13.45.01 Screenshot_2022-08-04_at_13.58.25

Dark mode background

Before After
Screenshot_2022-07-26_at_13.44.16 Screenshot_2022-07-26_at_13.29.48

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
Screenshot_2022-07-26_at_13.41.40 Screenshot_2022-08-04_at_14.03.12

How to set up and validate locally

  1. Visit a group's audit events page e.g. http://gdk.test:3000/groups/gitlab-org/-/audit_events and look at the Streams tab.
  2. Click the Add streaming destination button and confirm you can add a new destination and new headers.
  3. Click the edit button on a destination and confirm that you can add/update/delete headers.
  4. Check the add form, add headers table, edit form, and edit headers table lines up with the other content properly.
  5. Check the tooltip shown on the destinations delete button.
  6. 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.

Related to #367963 (closed) #368442

Edited by Robert Hunt