Integrate listing of existing custom headers into custom headers form for streaming audit events

What does this MR do and why?

This MR adds a read-only form on existing destinations to show the custom headers applied. This will be changed from read-only in the update mutation integration.

Overall it adds:

• Custom headers to GraphQL query for destinations retrieval
• Edit button to streaming items
• Editing mode to streaming items to toggle the editor
• Ability to set the editor to read-only when the item is passed in
• 'Save' button rather than 'Add' button on editing
• Section to the docs on the listing UI

Screenshots or screen recordings

Screen_Recording_2022-07-06_at_14.45.24

How to set up and validate locally

1. Enable the feature flag :custom_headers_streaming_audit_events_ui: echo "Feature.enable(:custom_headers_streaming_audit_events_ui)" | rails c.
2. Visit a group's audit events page e.g. http://gdk.test:3000/groups/gitlab-org/-/audit_events and look at the Streams tab.
3. Add a new destination without header values.
4. While adding, check the save button text is 'Add'.
5. Select the edit button on the destination item and check the fields are read-only and no header values exist.
6. Check the save button text is 'Save'.
7. Add a new destination with header values.
8. Select the edit button on the destination item and check the fields are read-only and the header values exist.

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 #361632 (closed)

doc/administration/audit_event_streaming.md

@@ -29,7 +29,7 @@ Event streaming destinations receive **all** audit event data, which could inclu
 Users with at least the Owner role for a group can add event streaming destinations for it:
 
 1. On the top bar, select **Menu > Groups** and find your group.
-1. On the left sidebar, select **Security & Compliance > Audit events**
+1. On the left sidebar, select **Security & Compliance > Audit events**.
 1. On the main area, select **Streams** tab.
     - When the destination list is empty, select **Add stream** to show the section for adding destinations.
     - When the destination list is not empty, select **{plus}** to show the section for adding destinations.
@@ -76,7 +76,7 @@ Users with at least the Owner role for a group can list event streaming destinat
 Users with at least the Owner role for a group can list event streaming destinations:
 
 1. On the top bar, select **Menu > Groups** and find your group.
-1. On the left sidebar, select **Security & Compliance > Audit events**
+1. On the left sidebar, select **Security & Compliance > Audit events**.
 1. On the main area, select **Streams** tab.
 
 ### Use the API
@@ -115,7 +115,7 @@ When the last destination is successfully deleted, event streaming is disabled f
 Users with at least the Owner role for a group can delete event streaming destinations.
 
 1. On the top bar, select **Menu > Groups** and find your group.
-1. On the left sidebar, select **Security & Compliance > Audit events**
+1. On the left sidebar, select **Security & Compliance > Audit events**.
 1. On the main area, select **Streams** tab.
 1. Select **{remove}** at the right side of each item.
 
@@ -184,7 +184,7 @@ not available. The UI for this feature is not ready for production use.
 Users with at least the Owner role for a group can add event streaming destinations and custom HTTP headers for it:
 
 1. On the top bar, select **Menu > Groups** and find your group.
-1. On the left sidebar, select **Security & Compliance > Audit events**
+1. On the left sidebar, select **Security & Compliance > Audit events**.
 1. On the main area, select **Streams** tab.
     - When the destination list is empty, select **Add stream** to show the section for adding destinations.
     - When the destination list is not empty, select **{plus}** to show the section for adding destinations.
@@ -220,7 +220,7 @@ mutation {
 ### Deleting custom HTTP headers
 
 Group owners can remove a HTTP header using the GraphQL `auditEventsStreamingHeadersDestroy` mutation. You can retrieve the header ID
-by [listing all the custom headers](#list-all-custom-headers-with-the-api) on the group.
+by [listing all the custom headers](#list-all-custom-headers) on the group.
 
 ```graphql
 mutation {
@@ -232,7 +232,11 @@ mutation {
 
 The header is deleted if the returned `errors` object is empty.
 
-### List all custom headers with the API
+### List all custom headers
+
+List all custom HTTP headers with the API or GitLab UI.
+
+#### Use the API
 
 You can list all custom headers for a top-level group as well as their value and ID using the GraphQL `externalAuditEventDestinations` query. The ID
 value returned by this query is what you need to pass to the `deletion` mutation.
@@ -258,6 +262,22 @@ query {
 }
 ```
 
+#### Use the GitLab UI
+
+FLAG:
+On self-managed GitLab, by default the UI for this feature is not available. To make it available per group, ask an administrator to
+[enable the feature flag](../administration/feature_flags.md) named `custom_headers_streaming_audit_events_ui`. On GitLab.com, the UI for this feature is
+not available. The UI for this feature is not ready for production use.
+
+Users with at least the Owner role for a group can add event streaming destinations and custom HTTP headers for it:
+
+1. On the top bar, select **Menu > Groups** and find your group.
+1. On the left sidebar, select **Security & Compliance > Audit events**.
+1. On the main area, select **Streams** tab.
+1. Select **{pencil}** at the right side of an item.
+1. A read-only view of the items custom headers is shown. To track progress on adding editing functionality, see the [relevant issue](https://gitlab.com/gitlab-org/gitlab/-/issues/361925).
+1. Select **Cancel** to close the read-only view.
+
 ## Verify event authenticity
 
 > [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/345424) in GitLab 14.8.