Add custom headers form to streaming audit events

What does this MR do and why?

This MR adds the custom headers form to the audit events streaming UI. It does not add the ability to save or delete the custom headers, which will be done in future MRs.

This MR follows the constraints from the issue:

1. Behind the :custom_headers_streaming_audit_events_ui feature flag
2. Form should be able to add and remove rows
   • Limited to 20 rows and shows a message when the limit is reached
   • Automatically shows a new blank row when the previous row gets filled in with a header and value
   • active checkbox is disabled for now
3. documentation updated explaining how to use the new UI and the row limit
4. Specs added for the new UI

Screenshots or screen recordings

Empty	With values	Video of use (checkbox is now marked as checked, not shown in video)
		Screen_Recording_2022-06-21_at_15.15.19

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. Check that the custom headers table isn't shown and that you can add new destination URLs, edit existing URLs, and delete URLs.
3. Enable the feature flag :custom_headers_streaming_audit_events_ui: echo "Feature.enable(:custom_headers_streaming_audit_events_ui)" | rails c.
4. Check that the custom headers table is shown and that you can add new destination URLs, edit existing URLs, and delete URLs.
   • The custom headers data will not be saved.
5. Check that you can fill in the header name and value inputs and a new row is automatically added when you do.
6. Check that you get a warning if the same header name is used twice.
7. Check that you can delete a header from the table.
8. Fill in 20 headers and check that no more can be added and a message is shown at 20 headers.

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.

MR reviews

• backend review
• backend maintainer
• UX review
• documentation review
• frontend review
• frontend maintainer

Related to #361630 (closed)

ee/app/assets/javascripts/audit_events/components/stream/stream_destination_editor.vue

@@ -9,6 +9,7 @@ import {
   GlSprintf,
   GlTableLite,
 } from '@gitlab/ui';
+import { cloneDeep } from 'lodash';
 import createFlash from '~/flash';
 import { thWidthPercent } from '~/lib/utils/table_utility';
 import externalAuditEventDestinationCreate from '../../graphql/create_external_destination.mutation.graphql';
@@ -16,7 +17,6 @@ import {
   ADD_STREAM_EDITOR_I18N,
   AUDIT_STREAMS_NETWORK_ERRORS,
   BLANK_CUSTOM_HEADER_OBJECT,
-  CUSTOM_HEADER_INPUT_TYPE,
   MAX_CUSTOM_HEADERS,
 } from '../../constants';
 
@@ -38,13 +38,19 @@ export default {
     return {
       destinationUrl: '',
       loading: false,
-      customHeaders: [{ ...BLANK_CUSTOM_HEADER_OBJECT }],
+      customHeaders: [cloneDeep(BLANK_CUSTOM_HEADER_OBJECT)],
     };
   },
   computed: {
     hasMaxCustomHeaders() {
       return this.customHeaders.length === MAX_CUSTOM_HEADERS;
     },
+    isSubmitButtonDisabled() {
+      return (
+        !this.destinationUrl ||
+        this.customHeaders.filter((header) => header.validationErrors.name !== '').length > 0
+      );
+    },
   },
   methods: {
     async addDestinationUrl() {
@@ -81,27 +87,13 @@ export default {
     isRowFilled(index) {
       return this.customHeaders[index].name !== '' && this.customHeaders[index].value !== '';
     },
+    headerNameExists(value) {
+      return this.customHeaders.filter((header) => header.name === value).length;
+    },
     addBlankCustomHeader() {
-      this.customHeaders.push({ ...BLANK_CUSTOM_HEADER_OBJECT });
+      this.customHeaders.push(cloneDeep(BLANK_CUSTOM_HEADER_OBJECT));
     },
-    updateCustomHeader(index, type, value) {
-      switch (type) {
-        case CUSTOM_HEADER_INPUT_TYPE.HEADER:
-          this.customHeaders[index].name = value;
-
-          break;
-        case CUSTOM_HEADER_INPUT_TYPE.VALUE:
-          this.customHeaders[index].value = value;
-
-          break;
-        case CUSTOM_HEADER_INPUT_TYPE.ACTIVE:
-          this.customHeaders[index].active = value;
-
-          break;
-        default:
-          break;
-      }
-
+    checkIfNewRowNeeded(index) {
       // If the maximum custom headers hasn't been reached,
       // the previous row is filled out
       // and we're updating the last row in the table
@@ -114,6 +106,25 @@ export default {
         this.addBlankCustomHeader();
       }
     },
+    updateCustomHeaderName(index, value) {
+      if (value !== '' && this.headerNameExists(value)) {
+        this.customHeaders[index].validationErrors.name =
+          ADD_STREAM_EDITOR_I18N.HEADER_INPUT_DUPLICATE_ERROR;
+      } else {
+        this.customHeaders[index].validationErrors.name = '';
+        this.customHeaders[index].name = value;
+      }
+
+      this.checkIfNewRowNeeded(index);
+    },
+    updateCustomHeaderValue(index, value) {
+      this.customHeaders[index].value = value;
+
+      this.checkIfNewRowNeeded(index);
+    },
+    updateCustomHeaderActive(index, value) {
+      this.customHeaders[index].active = value;
+    },
     removeCustomHeader(index) {
       this.customHeaders.splice(index, 1);
       const headersCount = this.customHeaders.length;
@@ -125,28 +136,32 @@ export default {
     },
   },
   i18n: { ...ADD_STREAM_EDITOR_I18N, CREATING_ERROR },
-  CUSTOM_HEADER_INPUT_TYPE,
   MAX_CUSTOM_HEADERS,
   fields: [
     {
       key: 'name',
       label: ADD_STREAM_EDITOR_I18N.TABLE_COLUMN_NAME_LABEL,
-      thClass: ['gl-p-3!', thWidthPercent(40)],
+      thClass: ['gl-border-top-0!', 'gl-p-3!', thWidthPercent(40)],
       tdClass: ['gl-p-3!'],
     },
     {
       key: 'value',
       label: ADD_STREAM_EDITOR_I18N.TABLE_COLUMN_VALUE_LABEL,
-      thClass: ['gl-p-3!', thWidthPercent(50)],
+      thClass: ['gl-border-top-0!', 'gl-p-3!', thWidthPercent(50)],
       tdClass: ['gl-p-3!'],
     },
     {
       key: 'active',
       label: ADD_STREAM_EDITOR_I18N.TABLE_COLUMN_ACTIVE_LABEL,
-      thClass: ['gl-p-3!', thWidthPercent(5)],
+      thClass: ['gl-border-top-0!', 'gl-p-3!', thWidthPercent(5)],
       tdClass: ['gl-p-3!'],
     },
-    { key: 'actions', label: '', thClass: ['gl-p-3!'], tdClass: ['gl-p-3! gl-text-right'] },
+    {
+      key: 'actions',
+      label: '',
+      thClass: ['gl-border-top-0!', 'gl-p-3!'],
+      tdClass: ['gl-p-3! gl-text-right'],
+    },
   ],
 };
 </script>
@@ -170,30 +185,48 @@ export default {
         />
       </gl-form-group>
 
-      <gl-form-group v-if="showStreamsCustomHeaders" :label="$options.i18n.CUSTOM_HEADERS_LABEL">
-        <gl-table-lite :items="customHeaders" :fields="$options.fields" primary-key="name">
-          <template #cell(name)="{ index, item: { disabled = false } }">
-            <gl-form-input
-              value=""
-              :placeholder="$options.i18n.HEADER_INPUT_PLACEHOLDER"
-              :disabled="disabled"
-              @input="updateCustomHeader(index, $options.CUSTOM_HEADER_INPUT_TYPE.HEADER, $event)"
-            />
+      <div v-if="showStreamsCustomHeaders" class="gl-mb-5">
+        <strong class="gl-display-block gl-mb-3">{{ $options.i18n.CUSTOM_HEADERS_LABEL }}</strong>
+        <gl-table-lite :items="customHeaders" :fields="$options.fields">
+          <template
+            #cell(name)="{
+              index,
+              item: {
+                disabled = false,
+                validationErrors: { name: feedback = '' },
+              },
+            }"
+          >
+            <gl-form-group
+              class="gl-m-0"
+              label-class="gl-m-0! gl-p-0!"
+              :invalid-feedback="feedback"
+            >
+              <gl-form-input
+                value=""
+                :placeholder="$options.i18n.HEADER_INPUT_PLACEHOLDER"
+                :disabled="disabled"
+                :state="feedback === ''"
+                @input="updateCustomHeaderName(index, $event)"
+              />
+            </gl-form-group>
           </template>
           <template #cell(value)="{ index, item: { disabled = false } }">
-            <gl-form-input
-              value=""
-              :placeholder="$options.i18n.VALUE_INPUT_PLACEHOLDER"
-              :disabled="disabled"
-              @input="updateCustomHeader(index, $options.CUSTOM_HEADER_INPUT_TYPE.VALUE, $event)"
-            />
+            <gl-form-group class="gl-m-0" label-class="gl-m-0! gl-p-0!">
+              <gl-form-input
+                value=""
+                :placeholder="$options.i18n.VALUE_INPUT_PLACEHOLDER"
+                :disabled="disabled"
+                @input="updateCustomHeaderValue(index, $event)"
+              />
+            </gl-form-group>
           </template>
           <template #cell(active)="{ index }">
             <gl-form-checkbox
               class="gl-mt-3"
               :checked="false"
               :disabled="true"
-              @input="updateCustomHeader(index, $options.CUSTOM_HEADER_INPUT_TYPE.ACTIVE, $event)"
+              @input="updateCustomHeaderActive(index, $event)"
             />
           </template>
           <template #cell(actions)="{ index }">
@@ -207,11 +240,11 @@ export default {
             </template>
           </gl-sprintf>
         </p>
-      </gl-form-group>
+      </div>
 
       <div class="gl-display-flex">
         <gl-button
-          :disabled="!destinationUrl"
+          :disabled="isSubmitButtonDisabled"
           :loading="loading"
           :name="$options.i18n.ADD_BUTTON_NAME"
           class="gl-mr-3"