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)

app/assets/javascripts/ide/components/repo_editor.vue

 <script>
+import { GlTabs, GlTab } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { mapState, mapGetters, mapActions } from 'vuex';
 import {
@@ -45,6 +46,8 @@ const MARKDOWN_FILE_TYPE = 'markdown';
 export default {
   name: 'RepoEditor',
   components: {
+    GlTabs,
+    GlTab,
     FileAlert,
     ContentViewer,
     DiffViewer,
@@ -121,16 +124,6 @@ export default {
     isPreviewViewMode() {
       return this.fileEditor.viewMode === FILE_VIEW_MODE_PREVIEW;
     },
-    editTabCSS() {
-      return {
-        active: this.isEditorViewMode,
-      };
-    },
-    previewTabCSS() {
-      return {
-        active: this.isPreviewViewMode,
-      };
-    },
     showEditor() {
       return !this.shouldHideEditor && this.isEditorViewMode;
     },
@@ -487,28 +480,22 @@ export default {
 
 <template>
   <div id="ide" class="blob-viewer-container blob-editor-container">
-    <div v-if="showTabs" class="ide-mode-tabs clearfix">
-      <ul class="nav-links float-left border-bottom-0">
-        <li :class="editTabCSS">
-          <a
-            href="javascript:void(0);"
-            role="button"
-            data-testid="edit-tab"
-            @click.prevent="updateEditor({ viewMode: $options.FILE_VIEW_MODE_EDITOR })"
-            >{{ __('Edit') }}</a
-          >
-        </li>
-        <li :class="previewTabCSS">
-          <a
-            href="javascript:void(0);"
-            role="button"
-            data-testid="preview-tab"
-            @click.prevent="updateEditor({ viewMode: $options.FILE_VIEW_MODE_PREVIEW })"
-            >{{ previewMode.previewTitle }}</a
-          >
-        </li>
-      </ul>
-    </div>
+    <gl-tabs v-if="showTabs">
+      <gl-tab
+        title="Edit"
+        data-testid="edit-tab"
+        @click="updateEditor({ viewMode: $options.FILE_VIEW_MODE_EDITOR })"
+      >
+        {{ __('Edit') }}
+      </gl-tab>
+      <gl-tab
+        :title="previewMode.previewTitle"
+        data-testid="preview-tab"
+        @click="updateEditor({ viewMode: $options.FILE_VIEW_MODE_PREVIEW })"
+      >
+        {{ previewMode.previewTitle }}
+      </gl-tab>
+    </gl-tabs>
     <file-alert v-if="alertKey" :alert-key="alertKey" />
     <file-templates-bar v-else-if="showFileTemplatesBar(file.name)" />
     <div