From e0b783c23ae5660cc4b4cb1a4b2999fc4f539eee Mon Sep 17 00:00:00 2001
From: nrosandich <nrosandich@gitlab.com>
Date: Wed, 5 Jul 2023 09:17:12 +1200
Subject: [PATCH 1/3] Add gcp logging streaming destination

Adds a form to manage streaming audit event destination integration
with GCP Logging.

Changelog: changed
EE: true
---
 .../components/audit_events_stream.vue        | 152 +++++++-
 .../components/stream/stream_delete_modal.vue |  45 ++-
 .../stream/stream_destination_editor.vue      |   3 +
 .../components/stream/stream_empty_state.vue  |  49 ++-
 .../stream_gcp_logging_destination_editor.vue | 297 ++++++++++++++++
 .../components/stream/stream_item.vue         |  38 +-
 .../javascripts/audit_events/constants.js     |  14 +
 .../audit_events/graphql/cache_update.js      |  42 +++
 ...e_gcp_logging_destination.mutation.graphql |  26 ++
 ...e_gcp_logging_destination.mutation.graphql |   5 +
 ...e_gcp_logging_destination.mutation.graphql |  26 ++
 ...e_cloud_logging_destinations.query.graphql |  14 +
 .../components/audit_events_stream_spec.js    | 103 ++++--
 .../stream_empty_state_spec.js.snap           |  16 +-
 .../__snapshots__/stream_item_spec.js.snap    |   2 +-
 .../stream/stream_delete_modal_spec.js        |  65 +++-
 .../stream/stream_destination_editor_spec.js  |   2 +-
 .../stream/stream_empty_state_spec.js         |  14 +-
 ...eam_gcp_logging_destination_editor_spec.js | 325 ++++++++++++++++++
 .../components/stream/stream_item_spec.js     |  79 ++++-
 ee/spec/frontend/audit_events/mock_data.js    |  82 ++++-
 locale/gitlab.pot                             |  27 ++
 22 files changed, 1330 insertions(+), 96 deletions(-)
 create mode 100644 ee/app/assets/javascripts/audit_events/components/stream/stream_gcp_logging_destination_editor.vue
 create mode 100644 ee/app/assets/javascripts/audit_events/graphql/mutations/create_gcp_logging_destination.mutation.graphql
 create mode 100644 ee/app/assets/javascripts/audit_events/graphql/mutations/delete_gcp_logging_destination.mutation.graphql
 create mode 100644 ee/app/assets/javascripts/audit_events/graphql/mutations/update_gcp_logging_destination.mutation.graphql
 create mode 100644 ee/app/assets/javascripts/audit_events/graphql/queries/get_get_google_cloud_logging_destinations.query.graphql
 create mode 100644 ee/spec/frontend/audit_events/components/stream/stream_gcp_logging_destination_editor_spec.js

diff --git a/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue b/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue
index 471504f3ff83a6..a1df9728851324 100644
--- a/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue
+++ b/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue
@@ -1,28 +1,38 @@
 <script>
-import { GlAlert, GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon, GlDisclosureDropdown } from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import {
   ADD_STREAM,
+  ADD_HTTP,
+  ADD_GCP_LOGGING,
   ADD_STREAM_MESSAGE,
   AUDIT_STREAMS_NETWORK_ERRORS,
   DELETE_STREAM_MESSAGE,
   UPDATE_STREAM_MESSAGE,
   streamsLabel,
+  DESTINATION_TYPE_HTTP,
+  DESTINATION_TYPE_GCP_LOGGING,
 } from '../constants';
-import { removeAuditEventsStreamingDestination } from '../graphql/cache_update';
+import {
+  removeAuditEventsStreamingDestination,
+  removeGcpLoggingAuditEventsStreamingDestination,
+} from '../graphql/cache_update';
 import externalDestinationsQuery from '../graphql/queries/get_external_destinations.query.graphql';
 import instanceExternalDestinationsQuery from '../graphql/queries/get_instance_external_destinations.query.graphql';
+import gcpLoggingDestinationsQuery from '../graphql/queries/get_get_google_cloud_logging_destinations.query.graphql';
 import StreamEmptyState from './stream/stream_empty_state.vue';
 import StreamDestinationEditor from './stream/stream_destination_editor.vue';
+import StreamGcpLoggingDestinationEditor from './stream/stream_gcp_logging_destination_editor.vue';
 import StreamItem from './stream/stream_item.vue';
 
 const { FETCHING_ERROR } = AUDIT_STREAMS_NETWORK_ERRORS;
 export default {
   components: {
     GlAlert,
-    GlButton,
     GlLoadingIcon,
+    GlDisclosureDropdown,
     StreamDestinationEditor,
+    StreamGcpLoggingDestinationEditor,
     StreamEmptyState,
     StreamItem,
   },
@@ -30,30 +40,65 @@ export default {
   data() {
     return {
       externalAuditEventDestinations: null,
-      showEditor: false,
+      gcpLoggingAuditEventDestinations: null,
+      isEditorVisible: false,
       successMessage: null,
+      editorType: DESTINATION_TYPE_HTTP,
+      items: [
+        {
+          text: ADD_HTTP,
+          action: () => {
+            this.showEditor(DESTINATION_TYPE_HTTP);
+          },
+        },
+        {
+          text: ADD_GCP_LOGGING,
+          action: () => {
+            this.showEditor(DESTINATION_TYPE_GCP_LOGGING);
+          },
+        },
+      ],
     };
   },
   computed: {
     isLoading() {
-      return this.$apollo.queries.externalAuditEventDestinations.loading;
+      return (
+        this.$apollo.queries.externalAuditEventDestinations.loading &&
+        this.$apollo.queries.gcpLoggingAuditEventDestinations.loading
+      );
     },
     isInstance() {
       return this.groupPath === 'instance';
     },
-    shouldShowEmptyMode() {
-      return !this.destinationsCount && !this.showEditor;
+    showEmptyState() {
+      return !this.destinationsCount && !this.gcpLoggingDestinationsCount && !this.isEditorVisible;
     },
     destinationsCount() {
       return this.externalAuditEventDestinations?.length ?? 0;
     },
+    gcpLoggingDestinationsCount() {
+      return this.gcpLoggingAuditEventDestinations?.length ?? 0;
+    },
+    totalCount() {
+      return this.destinationsCount + this.gcpLoggingDestinationsCount;
+    },
     destinationQuery() {
       return this.isInstance ? instanceExternalDestinationsQuery : externalDestinationsQuery;
     },
+    gcpLoggingDestinationQuery() {
+      return gcpLoggingDestinationsQuery;
+    },
+    addOptions() {
+      return this.isInstance ? [this.items[0]] : this.items;
+    },
   },
   methods: {
-    setEditorVisibility(state) {
-      this.showEditor = state;
+    showEditor(type) {
+      this.editorType = type;
+      this.isEditorVisible = true;
+    },
+    hideEditor() {
+      this.isEditorVisible = false;
     },
     clearSuccessMessage() {
       this.successMessage = null;
@@ -62,11 +107,11 @@ export default {
       return this.$apollo.queries.externalAuditEventDestinations.refetch();
     },
     async onAddedDestination() {
-      this.setEditorVisibility(false);
+      this.hideEditor();
       this.successMessage = ADD_STREAM_MESSAGE;
     },
     async onUpdatedDestination() {
-      this.setEditorVisibility(false);
+      this.hideEditor();
       this.successMessage = UPDATE_STREAM_MESSAGE;
     },
     async onDeletedDestination(id) {
@@ -76,7 +121,18 @@ export default {
         destinationId: id,
       });
 
-      if (this.destinationsCount) {
+      if (this.totalCount) {
+        this.successMessage = DELETE_STREAM_MESSAGE;
+      }
+    },
+    async onDeletedGcpLoggingDestination(id) {
+      removeGcpLoggingAuditEventsStreamingDestination({
+        store: this.$apollo.provider.defaultClient,
+        fullPath: this.groupPath,
+        destinationId: id,
+      });
+
+      if (this.totalCount) {
         this.successMessage = DELETE_STREAM_MESSAGE;
       }
     },
@@ -108,21 +164,56 @@ export default {
           message: FETCHING_ERROR,
         });
 
+        this.clearSuccessMessage();
+      },
+    },
+    gcpLoggingAuditEventDestinations: {
+      query() {
+        return this.gcpLoggingDestinationQuery;
+      },
+      context: {
+        isSingleRequest: true,
+      },
+      variables() {
+        return {
+          fullPath: this.groupPath,
+        };
+      },
+      skip() {
+        return this.isInstance;
+      },
+      update(data) {
+        const destinations = data.group.googleCloudLoggingConfigurations.nodes;
+        return destinations;
+      },
+      error() {
+        createAlert({
+          message: FETCHING_ERROR,
+        });
+
         this.clearSuccessMessage();
       },
     },
   },
   i18n: {
     ADD_STREAM,
+    ADD_HTTP,
+    ADD_GCP_LOGGING,
     FETCHING_ERROR,
     streamsLabel,
   },
+  DESTINATION_TYPE_HTTP,
+  DESTINATION_TYPE_GCP_LOGGING,
 };
 </script>
 
 <template>
   <gl-loading-icon v-if="isLoading" size="lg" />
-  <stream-empty-state v-else-if="shouldShowEmptyMode" @add="setEditorVisibility(true)" />
+  <stream-empty-state
+    v-else-if="showEmptyState"
+    @addHttp="showEditor($options.DESTINATION_TYPE_HTTP)"
+    @addGcpLogging="showEditor($options.DESTINATION_TYPE_GCP_LOGGING)"
+  />
   <div v-else>
     <gl-alert
       v-if="successMessage"
@@ -137,17 +228,30 @@ export default {
       class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-mb-6 gl-mt-3"
     >
       <h4 class="gl-m-0">
-        {{ $options.i18n.streamsLabel(destinationsCount) }}
+        {{ $options.i18n.streamsLabel(totalCount) }}
       </h4>
-      <gl-button variant="confirm" @click="setEditorVisibility(true)">
-        {{ $options.i18n.ADD_STREAM }}
-      </gl-button>
+      <gl-disclosure-dropdown
+        :toggle-text="$options.i18n.ADD_STREAM"
+        category="primary"
+        variant="confirm"
+        data-testid="dropdown-toggle"
+        :items="addOptions"
+      />
     </div>
-    <div v-if="showEditor" class="gl-mb-4 gl-p-4 gl-border gl-rounded-base">
+    <div v-if="isEditorVisible" class="gl-mb-4 gl-p-4 gl-border gl-rounded-base">
       <stream-destination-editor
+        v-if="editorType === $options.DESTINATION_TYPE_HTTP"
+        :type="$options.DESTINATION_TYPE_HTTP"
+        @added="onAddedDestination"
+        @error="clearSuccessMessage"
+        @cancel="hideEditor"
+      />
+      <stream-gcp-logging-destination-editor
+        v-else-if="editorType === $options.DESTINATION_TYPE_GCP_LOGGING"
+        :type="$options.DESTINATION_TYPE_GCP_LOGGING"
         @added="onAddedDestination"
         @error="clearSuccessMessage"
-        @cancel="setEditorVisibility(false)"
+        @cancel="hideEditor"
       />
     </div>
     <ul class="content-list gl-border-t gl-border-gray-50">
@@ -155,10 +259,20 @@ export default {
         v-for="item in externalAuditEventDestinations"
         :key="item.id"
         :item="item"
+        :type="$options.DESTINATION_TYPE_HTTP"
         @deleted="onDeletedDestination(item.id)"
         @updated="onUpdatedDestination"
         @error="clearSuccessMessage"
       />
+      <stream-item
+        v-for="item in gcpLoggingAuditEventDestinations"
+        :key="item.id"
+        :item="item"
+        :type="$options.DESTINATION_TYPE_GCP_LOGGING"
+        @deleted="onDeletedGcpLoggingDestination(item.id)"
+        @updated="onUpdatedDestination"
+        @error="clearSuccessMessage"
+      />
     </ul>
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/audit_events/components/stream/stream_delete_modal.vue b/ee/app/assets/javascripts/audit_events/components/stream/stream_delete_modal.vue
index 0e858416881b4c..be0747356a39e2 100644
--- a/ee/app/assets/javascripts/audit_events/components/stream/stream_delete_modal.vue
+++ b/ee/app/assets/javascripts/audit_events/components/stream/stream_delete_modal.vue
@@ -2,10 +2,10 @@
 import { GlModal, GlSprintf } from '@gitlab/ui';
 
 import { __, s__ } from '~/locale';
-import externalDestinationsQuery from '../../graphql/queries/get_external_destinations.query.graphql';
-import instanceExternalDestinationsQuery from '../../graphql/queries/get_instance_external_destinations.query.graphql';
 import deleteExternalDestination from '../../graphql/mutations/delete_external_destination.mutation.graphql';
 import deleteInstanceExternalDestination from '../../graphql/mutations/delete_instance_external_destination.mutation.graphql';
+import googleCloudLoggingConfigurationDestroy from '../../graphql/mutations/delete_gcp_logging_destination.mutation.graphql';
+import { DESTINATION_TYPE_HTTP, DESTINATION_TYPE_GCP_LOGGING } from '../../constants';
 
 export default {
   components: {
@@ -18,19 +18,46 @@ export default {
       type: Object,
       required: true,
     },
+    type: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     isInstance() {
       return this.groupPath === 'instance';
     },
-    destinationQuery() {
-      return this.isInstance ? instanceExternalDestinationsQuery : externalDestinationsQuery;
-    },
     destinationDestroyMutation() {
-      return this.isInstance ? deleteInstanceExternalDestination : deleteExternalDestination;
+      switch (this.type) {
+        case DESTINATION_TYPE_GCP_LOGGING:
+          return googleCloudLoggingConfigurationDestroy;
+        case DESTINATION_TYPE_HTTP:
+        default:
+          return this.isInstance ? deleteInstanceExternalDestination : deleteExternalDestination;
+      }
+    },
+    destinationTitle() {
+      switch (this.type) {
+        case DESTINATION_TYPE_GCP_LOGGING:
+          return this.item.googleProjectIdName;
+        case DESTINATION_TYPE_HTTP:
+        default:
+          return this.item.destinationUrl;
+      }
     },
   },
   methods: {
+    destinationErrors(data) {
+      switch (this.type) {
+        case DESTINATION_TYPE_GCP_LOGGING:
+          return data.googleCloudLoggingConfigurationDestroy.errors;
+        case DESTINATION_TYPE_HTTP:
+        default:
+          return this.isInstance
+            ? data.instanceExternalAuditEventDestinationDestroy.errors
+            : data.externalAuditEventDestinationDestroy.errors;
+      }
+    },
     async deleteDestination() {
       this.reportDeleting();
 
@@ -46,9 +73,7 @@ export default {
           },
         });
 
-        const errors = this.isInstance
-          ? data.instanceExternalAuditEventDestinationDestroy.errors
-          : data.externalAuditEventDestinationDestroy.errors;
+        const errors = this.destinationErrors(data);
 
         if (errors.length > 0) {
           this.reportError(new Error(errors[0]));
@@ -100,7 +125,7 @@ export default {
   >
     <gl-sprintf :message="$options.i18n.message">
       <template #destination>
-        <strong>{{ item.destinationUrl }}</strong>
+        <strong>{{ destinationTitle }}</strong>
       </template>
     </gl-sprintf>
   </gl-modal>
diff --git a/ee/app/assets/javascripts/audit_events/components/stream/stream_destination_editor.vue b/ee/app/assets/javascripts/audit_events/components/stream/stream_destination_editor.vue
index 1136b442bf6485..bf46de11714450 100644
--- a/ee/app/assets/javascripts/audit_events/components/stream/stream_destination_editor.vue
+++ b/ee/app/assets/javascripts/audit_events/components/stream/stream_destination_editor.vue
@@ -32,6 +32,7 @@ import {
   ADD_STREAM_EDITOR_I18N,
   AUDIT_STREAMS_NETWORK_ERRORS,
   createBlankHeader,
+  DESTINATION_TYPE_HTTP,
 } from '../../constants';
 import {
   addAuditEventsStreamingDestination,
@@ -596,6 +597,7 @@ export default {
       tdClass: finalTdClasses,
     },
   ],
+  DESTINATION_TYPE_HTTP,
 };
 </script>
 
@@ -799,6 +801,7 @@ export default {
     <stream-delete-modal
       v-if="isEditing"
       ref="deleteModal"
+      :type="$options.DESTINATION_TYPE_HTTP"
       :item="item"
       @deleting="onDeleting"
       @delete="onDelete"
diff --git a/ee/app/assets/javascripts/audit_events/components/stream/stream_empty_state.vue b/ee/app/assets/javascripts/audit_events/components/stream/stream_empty_state.vue
index d9168e1d65c06b..835f937e4b9eec 100644
--- a/ee/app/assets/javascripts/audit_events/components/stream/stream_empty_state.vue
+++ b/ee/app/assets/javascripts/audit_events/components/stream/stream_empty_state.vue
@@ -1,13 +1,44 @@
 <script>
-import { GlButton, GlEmptyState } from '@gitlab/ui';
-import { ADD_STREAM, AUDIT_STREAMS_EMPTY_STATE_I18N } from '../../constants';
+import { GlEmptyState, GlDisclosureDropdown } from '@gitlab/ui';
+import {
+  ADD_STREAM,
+  AUDIT_STREAMS_EMPTY_STATE_I18N,
+  ADD_HTTP,
+  ADD_GCP_LOGGING,
+} from '../../constants';
 
 export default {
   components: {
-    GlButton,
     GlEmptyState,
+    GlDisclosureDropdown,
+  },
+  inject: ['groupPath', 'emptyStateSvgPath'],
+  data() {
+    return {
+      items: [
+        {
+          text: ADD_HTTP,
+          action: () => {
+            this.$emit('addHttp');
+          },
+        },
+        {
+          text: ADD_GCP_LOGGING,
+          action: () => {
+            this.$emit('addGcpLogging');
+          },
+        },
+      ],
+    };
+  },
+  computed: {
+    isInstance() {
+      return this.groupPath === 'instance';
+    },
+    addOptions() {
+      return this.isInstance ? [this.items[0]] : this.items;
+    },
   },
-  inject: ['emptyStateSvgPath'],
   i18n: {
     ...AUDIT_STREAMS_EMPTY_STATE_I18N,
     ADD_STREAM,
@@ -32,9 +63,13 @@ export default {
       <p>{{ $options.i18n.DESCRIPTION_2 }}</p>
     </template>
     <template #actions>
-      <gl-button variant="confirm" @click="$emit('add')">
-        {{ $options.i18n.ADD_STREAM }}
-      </gl-button>
+      <gl-disclosure-dropdown
+        :toggle-text="$options.i18n.ADD_STREAM"
+        category="primary"
+        variant="confirm"
+        data-testid="dropdown-toggle"
+        :items="addOptions"
+      />
     </template>
   </gl-empty-state>
 </template>
diff --git a/ee/app/assets/javascripts/audit_events/components/stream/stream_gcp_logging_destination_editor.vue b/ee/app/assets/javascripts/audit_events/components/stream/stream_gcp_logging_destination_editor.vue
new file mode 100644
index 00000000000000..b31084fa9b275a
--- /dev/null
+++ b/ee/app/assets/javascripts/audit_events/components/stream/stream_gcp_logging_destination_editor.vue
@@ -0,0 +1,297 @@
+<script>
+import { GlAlert, GlButton, GlForm, GlFormGroup, GlFormInput } from '@gitlab/ui';
+import { isEmpty } from 'lodash';
+import * as Sentry from '@sentry/browser';
+import { GlTooltipDirective as GlTooltip } from '@gitlab/ui/dist/directives/tooltip';
+import { createAlert } from '~/alert';
+import googleCloudLoggingConfigurationCreate from '../../graphql/mutations/create_gcp_logging_destination.mutation.graphql';
+import googleCloudLoggingConfigurationUpdate from '../../graphql/mutations/update_gcp_logging_destination.mutation.graphql';
+import {
+  ADD_STREAM_EDITOR_I18N,
+  AUDIT_STREAMS_NETWORK_ERRORS,
+  DESTINATION_TYPE_GCP_LOGGING,
+} from '../../constants';
+import { addGcpLoggingAuditEventsStreamingDestination } from '../../graphql/cache_update';
+import StreamDeleteModal from './stream_delete_modal.vue';
+
+const { CREATING_ERROR, UPDATING_ERROR } = AUDIT_STREAMS_NETWORK_ERRORS;
+
+export default {
+  components: {
+    GlAlert,
+    GlButton,
+    GlForm,
+    GlFormGroup,
+    GlFormInput,
+    StreamDeleteModal,
+  },
+  directives: {
+    GlTooltip,
+  },
+  inject: ['groupPath'],
+  props: {
+    item: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      googleProjectIdName: '',
+      logIdName: '',
+      privateKey: '',
+      clientEmail: '',
+      errors: [],
+      loading: false,
+    };
+  },
+  computed: {
+    isSubmitButtonDisabled() {
+      return !this.googleProjectIdName || !this.logIdName || !this.privateKey || !this.clientEmail;
+    },
+    isEditing() {
+      return !isEmpty(this.item);
+    },
+    addButtonName() {
+      return this.isEditing
+        ? ADD_STREAM_EDITOR_I18N.SAVE_BUTTON_NAME
+        : ADD_STREAM_EDITOR_I18N.ADD_BUTTON_NAME;
+    },
+    addButtonText() {
+      return this.isEditing
+        ? ADD_STREAM_EDITOR_I18N.SAVE_BUTTON_TEXT
+        : ADD_STREAM_EDITOR_I18N.ADD_BUTTON_TEXT;
+    },
+  },
+  mounted() {
+    this.googleProjectIdName = this.item.googleProjectIdName;
+    this.logIdName = this.item.logIdName;
+    this.privateKey = this.item.privateKey;
+    this.clientEmail = this.item.clientEmail;
+  },
+  methods: {
+    onDeleting() {
+      this.loading = true;
+    },
+    onDelete() {
+      this.$emit('deleted', this.item.id);
+      this.loading = false;
+    },
+    onError(error) {
+      this.loading = false;
+      createAlert({
+        message: AUDIT_STREAMS_NETWORK_ERRORS.DELETING_ERROR,
+        captureError: true,
+        error,
+      });
+      this.$emit('error');
+    },
+    clearError(index) {
+      this.errors.splice(index, 1);
+    },
+    async addDestination() {
+      this.errors = [];
+      this.loading = true;
+
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation: googleCloudLoggingConfigurationCreate,
+          variables: {
+            id: this.item.id,
+            fullPath: this.groupPath,
+            googleProjectIdName: this.googleProjectIdName,
+            clientEmail: this.clientEmail,
+            privateKey: this.privateKey,
+            logIdName: this.logIdName,
+          },
+          context: {
+            isSingleRequest: true,
+          },
+          update(cache, { data: updateData }, args) {
+            const errors = updateData?.googleCloudLoggingConfigurationCreate?.errors;
+            if (errors.length) {
+              return;
+            }
+
+            const newGcpLoggingDestination =
+              updateData?.googleCloudLoggingConfigurationCreate?.googleCloudLoggingConfiguration;
+
+            addGcpLoggingAuditEventsStreamingDestination({
+              store: cache,
+              fullPath: args.variables.fullPath,
+              newDestination: newGcpLoggingDestination,
+            });
+          },
+        });
+
+        const { errors } = data.googleCloudLoggingConfigurationCreate;
+
+        if (errors.length > 0) {
+          this.errors.push(...errors);
+          this.$emit('error');
+        } else {
+          this.$emit('added');
+        }
+      } catch (e) {
+        Sentry.captureException(e);
+        this.errors.push(CREATING_ERROR);
+        this.$emit('error');
+      } finally {
+        this.loading = false;
+      }
+    },
+    async updateDestination() {
+      this.errors = [];
+      this.loading = true;
+
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation: googleCloudLoggingConfigurationUpdate,
+          variables: {
+            id: this.item.id,
+            fullPath: this.groupPath,
+            googleProjectIdName: this.googleProjectIdName,
+            clientEmail: this.clientEmail,
+            privateKey: this.privateKey,
+            logIdName: this.logIdName,
+          },
+          context: {
+            isSingleRequest: true,
+          },
+        });
+
+        const {
+          googleCloudLoggingConfigurationUpdate: { errors },
+        } = data;
+
+        if (errors.length > 0) {
+          this.errors.push(...errors);
+          this.$emit('error');
+        } else {
+          this.$emit('updated');
+        }
+      } catch (e) {
+        Sentry.captureException(e);
+        this.errors.push(UPDATING_ERROR);
+        this.$emit('error');
+      } finally {
+        this.loading = false;
+      }
+    },
+    deleteDestination() {
+      this.$refs.deleteModal.show();
+    },
+  },
+  i18n: ADD_STREAM_EDITOR_I18N,
+  DESTINATION_TYPE_GCP_LOGGING,
+};
+</script>
+
+<template>
+  <div>
+    <gl-alert
+      v-if="!isEditing"
+      :title="$options.i18n.WARNING_TITLE"
+      :dismissible="false"
+      class="gl-mb-5"
+      data-testid="data-warning"
+      variant="warning"
+    >
+      {{ $options.i18n.WARNING_CONTENT }}
+    </gl-alert>
+
+    <gl-alert
+      v-for="(error, index) in errors"
+      :key="index"
+      :dismissible="true"
+      class="gl-mb-5"
+      data-testid="alert-errors"
+      variant="danger"
+      @dismiss="clearError(index)"
+    >
+      {{ error }}
+    </gl-alert>
+
+    <gl-form @submit.prevent="() => (isEditing ? updateDestination() : addDestination())">
+      <gl-form-group
+        :label="$options.i18n.GCP_LOGGING_DESTINATION_PROJECT_ID_LABEL"
+        data-testid="gcp-logging-destination-project-id-form-group"
+      >
+        <gl-form-input
+          v-model="googleProjectIdName"
+          :placeholder="$options.i18n.GCP_LOGGING_DESTINATION_PROJECT_ID_PLACEHOLDER"
+          data-testid="gcp-logging-destination-project-id"
+        />
+      </gl-form-group>
+      <gl-form-group
+        :label="$options.i18n.GCP_LOGGING_DESTINATION_CLIENT_EMAIL_LABEL"
+        data-testid="gcp-logging-destination-client-email-form-group"
+      >
+        <gl-form-input
+          v-model="clientEmail"
+          :placeholder="$options.i18n.GCP_LOGGING_DESTINATION_CLIENT_EMAIL_PLACEHOLDER"
+          data-testid="gcp-logging-destination-client-email"
+        />
+      </gl-form-group>
+      <gl-form-group
+        :label="$options.i18n.GCP_LOGGING_DESTINATION_LOG_ID_LABEL"
+        data-testid="gcp-logging-destination-log-id-form-group"
+      >
+        <gl-form-input
+          v-model="logIdName"
+          :placeholder="$options.i18n.GCP_LOGGING_DESTINATION_LOG_ID_PLACEHOLDER"
+          data-testid="gcp-logging-destination-log-id"
+        />
+      </gl-form-group>
+      <gl-form-group
+        :label="$options.i18n.GCP_LOGGING_DESTINATION_PASSWORD_LABEL"
+        data-testid="gcp-logging-destination-password-form-group"
+      >
+        <gl-form-input
+          v-model="privateKey"
+          type="password"
+          data-testid="gcp-logging-destination-password"
+        />
+      </gl-form-group>
+
+      <div class="gl-display-flex">
+        <gl-button
+          :disabled="isSubmitButtonDisabled"
+          :loading="loading"
+          :name="addButtonName"
+          class="gl-mr-3"
+          variant="confirm"
+          type="submit"
+          data-testid="stream-destination-add-button"
+          >{{ addButtonText }}</gl-button
+        >
+        <gl-button
+          :name="$options.i18n.CANCEL_BUTTON_NAME"
+          data-testid="stream-destination-cancel-button"
+          @click="$emit('cancel')"
+          >{{ $options.i18n.CANCEL_BUTTON_TEXT }}</gl-button
+        >
+        <gl-button
+          v-if="isEditing"
+          :name="$options.i18n.DELETE_BUTTON_TEXT"
+          :loading="loading"
+          variant="danger"
+          class="gl-ml-auto"
+          data-testid="stream-destination-delete-button"
+          @click="deleteDestination"
+          >{{ $options.i18n.DELETE_BUTTON_TEXT }}</gl-button
+        >
+      </div>
+    </gl-form>
+    <stream-delete-modal
+      v-if="isEditing"
+      ref="deleteModal"
+      :type="$options.DESTINATION_TYPE_GCP_LOGGING"
+      :item="item"
+      @deleting="onDeleting"
+      @delete="onDelete"
+      @error="onError"
+    />
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/audit_events/components/stream/stream_item.vue b/ee/app/assets/javascripts/audit_events/components/stream/stream_item.vue
index 3bfb27cfb8ef29..9be778e430cfc7 100644
--- a/ee/app/assets/javascripts/audit_events/components/stream/stream_item.vue
+++ b/ee/app/assets/javascripts/audit_events/components/stream/stream_item.vue
@@ -9,8 +9,13 @@ import {
   GlButton,
   GlTooltipDirective as GlTooltip,
 } from '@gitlab/ui';
-import { STREAM_ITEMS_I18N } from '../../constants';
+import {
+  STREAM_ITEMS_I18N,
+  DESTINATION_TYPE_HTTP,
+  DESTINATION_TYPE_GCP_LOGGING,
+} from '../../constants';
 import StreamDestinationEditor from './stream_destination_editor.vue';
+import StreamGcpLoggingDestinationEditor from './stream_gcp_logging_destination_editor.vue';
 
 export default {
   components: {
@@ -22,6 +27,7 @@ export default {
     GlButton,
     GlIcon,
     StreamDestinationEditor,
+    StreamGcpLoggingDestinationEditor,
   },
   directives: {
     GlTooltip,
@@ -32,6 +38,10 @@ export default {
       type: Object,
       required: true,
     },
+    type: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -45,6 +55,15 @@ export default {
     isInstance() {
       return this.groupPath === 'instance';
     },
+    destinationTitle() {
+      switch (this.type) {
+        case DESTINATION_TYPE_GCP_LOGGING:
+          return this.item.googleProjectIdName;
+        case DESTINATION_TYPE_HTTP:
+        default:
+          return this.item.destinationUrl;
+      }
+    },
   },
   methods: {
     toggleEditMode() {
@@ -66,7 +85,9 @@ export default {
         : queryData.group.externalAuditEventDestinationCreate;
     },
   },
-  i18n: STREAM_ITEMS_I18N,
+  i18n: { ...STREAM_ITEMS_I18N },
+  DESTINATION_TYPE_HTTP,
+  DESTINATION_TYPE_GCP_LOGGING,
 };
 </script>
 
@@ -84,7 +105,7 @@ export default {
           name="chevron-right"
           class="gl-transition-medium"
           :class="{ 'gl-rotate-90': isEditing }"
-        /><span class="gl-font-lg gl-ml-2">{{ item.destinationUrl }}</span>
+        /><span class="gl-font-lg gl-ml-2">{{ destinationTitle }}</span>
       </gl-button>
 
       <template v-if="isItemFiltered">
@@ -111,7 +132,16 @@ export default {
     </div>
     <gl-collapse :visible="isEditing">
       <stream-destination-editor
-        v-if="isEditing"
+        v-if="isEditing && type == $options.DESTINATION_TYPE_HTTP"
+        :item="item"
+        class="gl-pr-0 gl-pl-6 gl-pb-5"
+        @updated="onUpdated"
+        @deleted="onDelete"
+        @error="onEditorError"
+        @cancel="toggleEditMode"
+      />
+      <stream-gcp-logging-destination-editor
+        v-else-if="isEditing && type == $options.DESTINATION_TYPE_GCP_LOGGING"
         :item="item"
         class="gl-pr-0 gl-pl-6 gl-pb-5"
         @updated="onUpdated"
diff --git a/ee/app/assets/javascripts/audit_events/constants.js b/ee/app/assets/javascripts/audit_events/constants.js
index 8a80effd8cd6ff..93261f5ecefe22 100644
--- a/ee/app/assets/javascripts/audit_events/constants.js
+++ b/ee/app/assets/javascripts/audit_events/constants.js
@@ -73,6 +73,8 @@ export const AUDIT_EVENTS_TAB_TITLES = {
 export const streamsLabel = (count) =>
   n__('AuditStreams|%d destination', 'AuditStreams|%d destinations', count);
 export const ADD_STREAM = s__('AuditStreams|Add streaming destination');
+export const ADD_HTTP = s__('AuditStreams|HTTP endpoint');
+export const ADD_GCP_LOGGING = s__('AuditStreams|Google Cloud Logging');
 export const ADD_STREAM_MESSAGE = s__('AuditStreams|Stream added successfully');
 export const UPDATE_STREAM_MESSAGE = s__('AuditStreams|Stream updated successfully');
 export const DELETE_STREAM_MESSAGE = s__('AuditStreams|Stream deleted successfully');
@@ -117,6 +119,15 @@ export const ADD_STREAM_EDITOR_I18N = {
   DELETE_BUTTON_TEXT: s__('AuditStreams|Delete destination'),
   HEADER_FILTERING: s__('AuditStreams|Event filtering (optional)'),
   FILTER_BY_AUDIT_EVENT_TYPE: s__('AuditStreams|Filter by audit event type'),
+  GCP_LOGGING_DESTINATION_PROJECT_ID_LABEL: s__('AuditStreams|Project ID'),
+  GCP_LOGGING_DESTINATION_PROJECT_ID_PLACEHOLDER: s__('AuditStreams|my-google-project'),
+  GCP_LOGGING_DESTINATION_CLIENT_EMAIL_LABEL: s__('AuditStreams|Client Email'),
+  GCP_LOGGING_DESTINATION_CLIENT_EMAIL_PLACEHOLDER: s__(
+    'AuditStreams|my-email@my-google-project.iam.gservice.account.com',
+  ),
+  GCP_LOGGING_DESTINATION_LOG_ID_LABEL: s__('AuditStreams|Log ID'),
+  GCP_LOGGING_DESTINATION_LOG_ID_PLACEHOLDER: s__('AuditStreams|audit-events'),
+  GCP_LOGGING_DESTINATION_PASSWORD_LABEL: s__('AuditStreams|Private key'),
 };
 
 export const AUDIT_STREAMS_EMPTY_STATE_I18N = {
@@ -157,3 +168,6 @@ export const createBlankHeader = () => ({
   disabled: false,
   validationErrors: { name: '' },
 });
+
+export const DESTINATION_TYPE_HTTP = 'http';
+export const DESTINATION_TYPE_GCP_LOGGING = 'gcpLogging';
diff --git a/ee/app/assets/javascripts/audit_events/graphql/cache_update.js b/ee/app/assets/javascripts/audit_events/graphql/cache_update.js
index e34dead2781006..cca5c96b3ecf4f 100644
--- a/ee/app/assets/javascripts/audit_events/graphql/cache_update.js
+++ b/ee/app/assets/javascripts/audit_events/graphql/cache_update.js
@@ -1,6 +1,7 @@
 import produce from 'immer';
 import getExternalDestinationsQuery from './queries/get_external_destinations.query.graphql';
 import getInstanceExternalDestinationsQuery from './queries/get_instance_external_destinations.query.graphql';
+import gcpLoggingDestinationsQuery from './queries/get_get_google_cloud_logging_destinations.query.graphql';
 import ExternalAuditEventDestinationFragment from './fragments/external_audit_event_destination.fragment.graphql';
 import InstanceExternalAuditEventDestinationFragment from './fragments/instance_external_audit_event_destination.fragment.graphql';
 
@@ -143,3 +144,44 @@ export function removeEventTypeFilters({ store, destinationId, filtersToRemove =
   });
   store.writeFragment({ ...destinationIdRecord, data: destination });
 }
+
+export function addGcpLoggingAuditEventsStreamingDestination({ store, fullPath, newDestination }) {
+  const sourceData = store.readQuery({
+    query: gcpLoggingDestinationsQuery,
+    variables: { fullPath },
+  });
+
+  if (!sourceData) {
+    return;
+  }
+
+  const data = produce(sourceData, (draftData) => {
+    const { nodes } = draftData.group.googleCloudLoggingConfigurations;
+    nodes.push(newDestination);
+  });
+
+  store.writeQuery({ query: gcpLoggingDestinationsQuery, variables: { fullPath }, data });
+}
+
+export function removeGcpLoggingAuditEventsStreamingDestination({
+  store,
+  fullPath,
+  destinationId,
+}) {
+  const sourceData = store.readQuery({
+    query: gcpLoggingDestinationsQuery,
+    variables: { fullPath },
+  });
+
+  if (!sourceData) {
+    return;
+  }
+
+  const data = produce(sourceData, (draftData) => {
+    draftData.group.googleCloudLoggingConfigurations.nodes = draftData.group.googleCloudLoggingConfigurations.nodes.filter(
+      (node) => node.id !== destinationId,
+    );
+  });
+
+  store.writeQuery({ query: gcpLoggingDestinationsQuery, variables: { fullPath }, data });
+}
diff --git a/ee/app/assets/javascripts/audit_events/graphql/mutations/create_gcp_logging_destination.mutation.graphql b/ee/app/assets/javascripts/audit_events/graphql/mutations/create_gcp_logging_destination.mutation.graphql
new file mode 100644
index 00000000000000..306660a6e00d2b
--- /dev/null
+++ b/ee/app/assets/javascripts/audit_events/graphql/mutations/create_gcp_logging_destination.mutation.graphql
@@ -0,0 +1,26 @@
+mutation createGcpLoggingDestination(
+  $fullPath: ID!
+  $googleProjectIdName: String!
+  $clientEmail: String!
+  $privateKey: String!
+  $logIdName: String!
+) {
+  googleCloudLoggingConfigurationCreate(
+    input: {
+      groupPath: $fullPath
+      googleProjectIdName: $googleProjectIdName
+      clientEmail: $clientEmail
+      privateKey: $privateKey
+      logIdName: $logIdName
+    }
+  ) {
+    errors
+    googleCloudLoggingConfiguration {
+      id
+      logIdName
+      privateKey
+      googleProjectIdName
+      clientEmail
+    }
+  }
+}
diff --git a/ee/app/assets/javascripts/audit_events/graphql/mutations/delete_gcp_logging_destination.mutation.graphql b/ee/app/assets/javascripts/audit_events/graphql/mutations/delete_gcp_logging_destination.mutation.graphql
new file mode 100644
index 00000000000000..d1b7a3fea44ae1
--- /dev/null
+++ b/ee/app/assets/javascripts/audit_events/graphql/mutations/delete_gcp_logging_destination.mutation.graphql
@@ -0,0 +1,5 @@
+mutation deleteGcpLoggingDestination($id: AuditEventsGoogleCloudLoggingConfigurationID!) {
+  googleCloudLoggingConfigurationDestroy(input: { id: $id }) {
+    errors
+  }
+}
diff --git a/ee/app/assets/javascripts/audit_events/graphql/mutations/update_gcp_logging_destination.mutation.graphql b/ee/app/assets/javascripts/audit_events/graphql/mutations/update_gcp_logging_destination.mutation.graphql
new file mode 100644
index 00000000000000..dfa2bebebf35cc
--- /dev/null
+++ b/ee/app/assets/javascripts/audit_events/graphql/mutations/update_gcp_logging_destination.mutation.graphql
@@ -0,0 +1,26 @@
+mutation updateGcpLoggingDestination(
+  $id: AuditEventsGoogleCloudLoggingConfigurationID!
+  $googleProjectIdName: String!
+  $clientEmail: String!
+  $privateKey: String!
+  $logIdName: String!
+) {
+  googleCloudLoggingConfigurationUpdate(
+    input: {
+      id: $id
+      googleProjectIdName: $googleProjectIdName
+      clientEmail: $clientEmail
+      privateKey: $privateKey
+      logIdName: $logIdName
+    }
+  ) {
+    errors
+    googleCloudLoggingConfiguration {
+      id
+      logIdName
+      privateKey
+      googleProjectIdName
+      clientEmail
+    }
+  }
+}
diff --git a/ee/app/assets/javascripts/audit_events/graphql/queries/get_get_google_cloud_logging_destinations.query.graphql b/ee/app/assets/javascripts/audit_events/graphql/queries/get_get_google_cloud_logging_destinations.query.graphql
new file mode 100644
index 00000000000000..edcc47f44ca83e
--- /dev/null
+++ b/ee/app/assets/javascripts/audit_events/graphql/queries/get_get_google_cloud_logging_destinations.query.graphql
@@ -0,0 +1,14 @@
+query getGoogleCloudLoggingDestinations($fullPath: ID!) {
+  group(fullPath: $fullPath) {
+    id
+    googleCloudLoggingConfigurations {
+      nodes {
+        id
+        logIdName
+        privateKey
+        googleProjectIdName
+        clientEmail
+      }
+    }
+  }
+}
diff --git a/ee/spec/frontend/audit_events/components/audit_events_stream_spec.js b/ee/spec/frontend/audit_events/components/audit_events_stream_spec.js
index 36f95f17178ca5..c4b6b5114e3705 100644
--- a/ee/spec/frontend/audit_events/components/audit_events_stream_spec.js
+++ b/ee/spec/frontend/audit_events/components/audit_events_stream_spec.js
@@ -1,6 +1,6 @@
-import Vue, { nextTick } from 'vue';
+import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import { GlAlert, GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlDisclosureDropdown, GlLoadingIcon } from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -14,6 +14,7 @@ import {
 } from 'ee/audit_events/constants';
 import AuditEventsStream from 'ee/audit_events/components/audit_events_stream.vue';
 import StreamDestinationEditor from 'ee/audit_events/components/stream/stream_destination_editor.vue';
+import StreamGcpLoggingDestinationEditor from 'ee/audit_events/components/stream/stream_gcp_logging_destination_editor.vue';
 import StreamItem from 'ee/audit_events/components/stream/stream_item.vue';
 import StreamEmptyState from 'ee/audit_events/components/stream/stream_empty_state.vue';
 import {
@@ -23,6 +24,9 @@ import {
   mockInstanceExternalDestinations,
   instanceGroupPath,
   instanceDestinationDataPopulator,
+  mockOptionsItems,
+  mockHttpType,
+  mockGcpLoggingType,
 } from '../mock_data';
 
 jest.mock('~/alert');
@@ -46,9 +50,11 @@ describe('AuditEventsStream', () => {
   };
 
   const findSuccessMessage = () => wrapper.findComponent(GlAlert);
-  const findAddDestinationButton = () => wrapper.findComponent(GlButton);
+  const findAddDestinationButton = () => wrapper.findComponent(GlDisclosureDropdown);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findStreamDestinationEditor = () => wrapper.findComponent(StreamDestinationEditor);
+  const findStreamGcpLoggingDestinationEditor = () =>
+    wrapper.findComponent(StreamGcpLoggingDestinationEditor);
   const findStreamEmptyState = () => wrapper.findComponent(StreamEmptyState);
   const findStreamItems = () => wrapper.findAllComponents(StreamItem);
 
@@ -100,23 +106,27 @@ describe('AuditEventsStream', () => {
         return waitForPromises();
       });
 
-      it('shows destination editor', async () => {
+      it('shows http destination editor', async () => {
         expect(findLoadingIcon().exists()).toBe(false);
         expect(findStreamDestinationEditor().exists()).toBe(false);
 
-        findAddDestinationButton().vm.$emit('click');
-        await nextTick();
+        expect(findAddDestinationButton().props('toggleText')).toBe('Add streaming destination');
+
+        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[0]);
+        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[0]);
 
+        await wrapper.vm.showEditor(mockHttpType);
         expect(findStreamDestinationEditor().exists()).toBe(true);
       });
 
-      it('exits edit mode when an external destination is added', async () => {
+      it('exits edit mode when an external http destination is added', async () => {
         expect(findLoadingIcon().exists()).toBe(false);
         expect(findStreamDestinationEditor().exists()).toBe(false);
 
-        findAddDestinationButton().vm.$emit('click');
-        await nextTick();
+        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[0]);
+        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[0]);
 
+        await wrapper.vm.showEditor(mockHttpType);
         const streamDestinationEditorComponent = findStreamDestinationEditor();
 
         expect(streamDestinationEditorComponent.exists()).toBe(true);
@@ -127,18 +137,49 @@ describe('AuditEventsStream', () => {
         expect(findSuccessMessage().text()).toBe(ADD_STREAM_MESSAGE);
       });
 
+      it('shows http gcp logging editor', async () => {
+        expect(findLoadingIcon().exists()).toBe(false);
+        expect(findStreamGcpLoggingDestinationEditor().exists()).toBe(false);
+
+        expect(findAddDestinationButton().props('toggleText')).toBe('Add streaming destination');
+
+        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[1]);
+        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[1]);
+
+        await wrapper.vm.showEditor(mockGcpLoggingType);
+        expect(findStreamGcpLoggingDestinationEditor().exists()).toBe(true);
+      });
+
+      it('exits edit mode when an external gcp logging destination is added', async () => {
+        expect(findLoadingIcon().exists()).toBe(false);
+        expect(findStreamGcpLoggingDestinationEditor().exists()).toBe(false);
+
+        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[1]);
+        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[1]);
+
+        await wrapper.vm.showEditor(mockGcpLoggingType);
+        expect(findStreamGcpLoggingDestinationEditor().exists()).toBe(true);
+
+        findStreamGcpLoggingDestinationEditor().vm.$emit('added');
+        await waitForPromises();
+
+        expect(findSuccessMessage().text()).toBe(ADD_STREAM_MESSAGE);
+      });
+
       it('clears the success message if an error occurs afterwards', async () => {
-        findAddDestinationButton().vm.$emit('click');
-        await nextTick();
+        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[0]);
+        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[0]);
 
+        await wrapper.vm.showEditor(mockHttpType);
         findStreamDestinationEditor().vm.$emit('added');
         await waitForPromises();
 
         expect(findSuccessMessage().text()).toBe(ADD_STREAM_MESSAGE);
 
-        findAddDestinationButton().vm.$emit('click');
-        await nextTick();
+        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[0]);
+        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[0]);
 
+        await wrapper.vm.showEditor(mockHttpType);
         findStreamDestinationEditor().vm.$emit('error');
         await waitForPromises();
 
@@ -193,16 +234,6 @@ describe('AuditEventsStream', () => {
     });
 
     describe('when initialized', () => {
-      it('should render the loading icon while waiting for data to be returned', () => {
-        const instanceDestinationQuerySpy = jest.fn();
-        const mockApollo = createMockApollo([
-          [instanceExternalDestinationsQuery, instanceDestinationQuerySpy],
-        ]);
-        createComponent(mockApollo);
-
-        expect(findLoadingIcon().exists()).toBe(true);
-      });
-
       it('should render empty state when no data is returned', async () => {
         const instanceDestinationQuerySpy = jest
           .fn()
@@ -246,9 +277,10 @@ describe('AuditEventsStream', () => {
         expect(findLoadingIcon().exists()).toBe(false);
         expect(findStreamDestinationEditor().exists()).toBe(false);
 
-        findAddDestinationButton().vm.$emit('click');
-        await nextTick();
+        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[0]);
+        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[0]);
 
+        await wrapper.vm.showEditor(mockHttpType);
         expect(findStreamDestinationEditor().exists()).toBe(true);
       });
 
@@ -256,31 +288,32 @@ describe('AuditEventsStream', () => {
         expect(findLoadingIcon().exists()).toBe(false);
         expect(findStreamDestinationEditor().exists()).toBe(false);
 
-        findAddDestinationButton().vm.$emit('click');
-        await nextTick();
-
-        const streamDestinationEditorComponent = findStreamDestinationEditor();
+        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[0]);
+        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[0]);
 
-        expect(streamDestinationEditorComponent.exists()).toBe(true);
+        await wrapper.vm.showEditor(mockHttpType);
+        expect(findStreamDestinationEditor().exists()).toBe(true);
 
-        streamDestinationEditorComponent.vm.$emit('added');
+        findStreamDestinationEditor().vm.$emit('added');
         await waitForPromises();
 
         expect(findSuccessMessage().text()).toBe(ADD_STREAM_MESSAGE);
       });
 
       it('clears the success message if an error occurs afterwards', async () => {
-        findAddDestinationButton().vm.$emit('click');
-        await nextTick();
+        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[0]);
+        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[0]);
 
+        await wrapper.vm.showEditor(mockHttpType);
         findStreamDestinationEditor().vm.$emit('added');
         await waitForPromises();
 
         expect(findSuccessMessage().text()).toBe(ADD_STREAM_MESSAGE);
 
-        findAddDestinationButton().vm.$emit('click');
-        await nextTick();
+        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[0]);
+        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[0]);
 
+        await wrapper.vm.showEditor(mockHttpType);
         findStreamDestinationEditor().vm.$emit('error');
         await waitForPromises();
 
diff --git a/ee/spec/frontend/audit_events/components/stream/__snapshots__/stream_empty_state_spec.js.snap b/ee/spec/frontend/audit_events/components/stream/__snapshots__/stream_empty_state_spec.js.snap
index 8f1a93c4cb8957..ffa2359b01b6eb 100644
--- a/ee/spec/frontend/audit_events/components/stream/__snapshots__/stream_empty_state_spec.js.snap
+++ b/ee/spec/frontend/audit_events/components/stream/__snapshots__/stream_empty_state_spec.js.snap
@@ -50,17 +50,19 @@ exports[`StreamEmptyState should render correctly 1`] = `
       <div
         class="gl-display-flex gl-flex-wrap gl-justify-content-center"
       >
-        <gl-button-stub
-          buttontextclasses=""
+        <gl-disclosure-dropdown-stub
+          autoclose="true"
           category="primary"
+          data-testid="dropdown-toggle"
           icon=""
+          items="[object Object],[object Object]"
+          placement="left"
+          positioningstrategy="absolute"
           size="medium"
+          toggleid="dropdown-toggle-btn-10"
+          toggletext="Add streaming destination"
           variant="confirm"
-        >
-          
-      Add streaming destination
-    
-        </gl-button-stub>
+        />
       </div>
     </div>
   </div>
diff --git a/ee/spec/frontend/audit_events/components/stream/__snapshots__/stream_item_spec.js.snap b/ee/spec/frontend/audit_events/components/stream/__snapshots__/stream_item_spec.js.snap
index 9654720cdf264c..f25f4d8464cf2e 100644
--- a/ee/spec/frontend/audit_events/components/stream/__snapshots__/stream_item_spec.js.snap
+++ b/ee/spec/frontend/audit_events/components/stream/__snapshots__/stream_item_spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StreamItem Group StreamItem when an item has event filters renders a popover 1`] = `
+exports[`StreamItem Group http StreamItem when an item has event filters renders a popover 1`] = `
 <div
   class="gl-popover"
   data-testid="filter-popover"
diff --git a/ee/spec/frontend/audit_events/components/stream/stream_delete_modal_spec.js b/ee/spec/frontend/audit_events/components/stream/stream_delete_modal_spec.js
index 03559a4e676f84..eda56d4f8d5181 100644
--- a/ee/spec/frontend/audit_events/components/stream/stream_delete_modal_spec.js
+++ b/ee/spec/frontend/audit_events/components/stream/stream_delete_modal_spec.js
@@ -6,15 +6,19 @@ import VueApollo from 'vue-apollo';
 import StreamDeleteModal from 'ee/audit_events/components/stream/stream_delete_modal.vue';
 import deleteExternalDestination from 'ee/audit_events/graphql/mutations/delete_external_destination.mutation.graphql';
 import deleteInstanceExternalDestination from 'ee/audit_events/graphql/mutations/delete_instance_external_destination.mutation.graphql';
+import googleCloudLoggingConfigurationDestroy from 'ee/audit_events/graphql/mutations/delete_gcp_logging_destination.mutation.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import {
   groupPath,
   destinationDeleteMutationPopulator,
   mockExternalDestinations,
+  mockHttpType,
+  mockGcpLoggingType,
   instanceGroupPath,
   destinationInstanceDeleteMutationPopulator,
   mockInstanceExternalDestinations,
+  destinationGcpLoggingDeleteMutationPopulator,
 } from '../../mock_data';
 
 Vue.use(VueApollo);
@@ -27,6 +31,9 @@ describe('StreamDeleteModal', () => {
   const deleteInstanceSuccess = jest
     .fn()
     .mockResolvedValue(destinationInstanceDeleteMutationPopulator());
+  const deleteGcpLoggingSuccess = jest
+    .fn()
+    .mockResolvedValue(destinationGcpLoggingDeleteMutationPopulator());
   const deleteError = jest
     .fn()
     .mockResolvedValue(destinationDeleteMutationPopulator(['Random Error message']));
@@ -36,6 +43,7 @@ describe('StreamDeleteModal', () => {
 
   let groupPathProvide = groupPath;
   let itemProvide = mockExternalDestinations[0];
+  let typeProvide = mockHttpType;
   let deleteExternalDestinationProvide = deleteExternalDestination;
 
   const findModal = () => wrapper.findComponent(GlModal);
@@ -48,6 +56,7 @@ describe('StreamDeleteModal', () => {
       apolloProvider: mockApollo,
       propsData: {
         item: itemProvide,
+        type: typeProvide,
       },
       provide: {
         groupPath: groupPathProvide,
@@ -79,7 +88,7 @@ describe('StreamDeleteModal', () => {
     });
   });
 
-  describe('Group clickDeleteDestination', () => {
+  describe('Group HTTP clickDeleteDestination', () => {
     it('emits "deleting" event when busy deleting', () => {
       createComponent();
       clickDeleteFramework();
@@ -127,10 +136,64 @@ describe('StreamDeleteModal', () => {
     });
   });
 
+  describe('Group GCP Logging clickDeleteDestination', () => {
+    beforeEach(() => {
+      typeProvide = mockGcpLoggingType;
+      deleteExternalDestinationProvide = googleCloudLoggingConfigurationDestroy;
+    });
+
+    it('emits "deleting" event when busy deleting', () => {
+      createComponent();
+      clickDeleteFramework();
+
+      expect(wrapper.emitted('deleting')).toHaveLength(1);
+    });
+
+    it('calls the delete mutation with the destination ID', async () => {
+      createComponent(deleteGcpLoggingSuccess);
+      clickDeleteFramework();
+
+      await waitForPromises();
+
+      expect(deleteGcpLoggingSuccess).toHaveBeenCalledWith({
+        id: mockExternalDestinations[0].id,
+        isInstance: false,
+      });
+    });
+
+    it('emits "delete" event when the destination is successfully deleted', async () => {
+      createComponent(deleteGcpLoggingSuccess);
+      clickDeleteFramework();
+
+      await waitForPromises();
+
+      expect(wrapper.emitted('delete')).toHaveLength(1);
+    });
+
+    it('emits "error" event when there is a network error', async () => {
+      createComponent(deleteNetworkError);
+      clickDeleteFramework();
+
+      await waitForPromises();
+
+      expect(wrapper.emitted('error')).toHaveLength(1);
+    });
+
+    it('emits "error" event when there is a graphql error', async () => {
+      createComponent(deleteError);
+      clickDeleteFramework();
+
+      await waitForPromises();
+
+      expect(wrapper.emitted('error')).toHaveLength(1);
+    });
+  });
+
   describe('Instance clickDeleteDestination', () => {
     beforeEach(() => {
       groupPathProvide = instanceGroupPath;
       itemProvide = instanceDestination;
+      typeProvide = instanceGroupPath;
       deleteExternalDestinationProvide = deleteInstanceExternalDestination;
     });
 
diff --git a/ee/spec/frontend/audit_events/components/stream/stream_destination_editor_spec.js b/ee/spec/frontend/audit_events/components/stream/stream_destination_editor_spec.js
index 4081775debd173..ef5da2c6e4ca6b 100644
--- a/ee/spec/frontend/audit_events/components/stream/stream_destination_editor_spec.js
+++ b/ee/spec/frontend/audit_events/components/stream/stream_destination_editor_spec.js
@@ -231,7 +231,7 @@ describe('StreamDestinationEditor', () => {
         await waitForPromises();
 
         expect(findAlertErrors()).toHaveLength(1);
-        expect(findAlertErrors().at(0).text()).toBe(errorMsg);
+        expect(findAlertErrors().at(0).text()).toBe(AUDIT_STREAMS_NETWORK_ERRORS.CREATING_ERROR);
         expect(wrapper.emitted('error')).toBeDefined();
         expect(wrapper.emitted('added')).toBeUndefined();
       });
diff --git a/ee/spec/frontend/audit_events/components/stream/stream_empty_state_spec.js b/ee/spec/frontend/audit_events/components/stream/stream_empty_state_spec.js
index f2ce97b29377b8..7cb9481df2f062 100644
--- a/ee/spec/frontend/audit_events/components/stream/stream_empty_state_spec.js
+++ b/ee/spec/frontend/audit_events/components/stream/stream_empty_state_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlButton, GlEmptyState } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlEmptyState } from '@gitlab/ui';
 import StreamEmptyState from 'ee/audit_events/components/stream/stream_empty_state.vue';
-import { mockSvgPath } from '../../mock_data';
+import { mockSvgPath, groupPath } from '../../mock_data';
 
 describe('StreamEmptyState', () => {
   let wrapper;
@@ -10,6 +10,7 @@ describe('StreamEmptyState', () => {
     wrapper = shallowMount(StreamEmptyState, {
       provide: {
         emptyStateSvgPath: mockSvgPath,
+        groupPath,
       },
       stubs: {
         GlEmptyState,
@@ -17,6 +18,8 @@ describe('StreamEmptyState', () => {
     });
   };
 
+  const findAddDestinationButton = () => wrapper.findComponent(GlDisclosureDropdown);
+
   beforeEach(() => {
     createComponent();
   });
@@ -25,9 +28,8 @@ describe('StreamEmptyState', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('should emit add event', () => {
-    wrapper.findComponent(GlButton).vm.$emit('click');
-
-    expect(wrapper.emitted('add')).toBeDefined();
+  it('should show options', () => {
+    expect(findAddDestinationButton().exists()).toBe(true);
+    expect(findAddDestinationButton().props('toggleText')).toBe('Add streaming destination');
   });
 });
diff --git a/ee/spec/frontend/audit_events/components/stream/stream_gcp_logging_destination_editor_spec.js b/ee/spec/frontend/audit_events/components/stream/stream_gcp_logging_destination_editor_spec.js
new file mode 100644
index 00000000000000..f7a8519fd2c65b
--- /dev/null
+++ b/ee/spec/frontend/audit_events/components/stream/stream_gcp_logging_destination_editor_spec.js
@@ -0,0 +1,325 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlForm } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
+import { createAlert } from '~/alert';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import googleCloudLoggingConfigurationCreate from 'ee/audit_events/graphql/mutations/create_gcp_logging_destination.mutation.graphql';
+import googleCloudLoggingConfigurationUpdate from 'ee/audit_events/graphql/mutations/update_gcp_logging_destination.mutation.graphql';
+import StreamGcpLoggingDestinationEditor from 'ee/audit_events/components/stream/stream_gcp_logging_destination_editor.vue';
+import StreamDeleteModal from 'ee/audit_events/components/stream/stream_delete_modal.vue';
+import { AUDIT_STREAMS_NETWORK_ERRORS, ADD_STREAM_EDITOR_I18N } from 'ee/audit_events/constants';
+import {
+  gcpLoggingDestinationCreateMutationPopulator,
+  gcpLoggingDestinationUpdateMutationPopulator,
+  groupPath,
+  mockGcpLoggingDestination,
+  mockNewGcpLoggingDestination,
+} from '../../mock_data';
+
+jest.mock('~/alert');
+Vue.use(VueApollo);
+
+describe('StreamDestinationEditor', () => {
+  let wrapper;
+
+  const createComponent = ({
+    mountFn = mountExtended,
+    props = {},
+    apolloHandlers = [
+      [
+        googleCloudLoggingConfigurationCreate,
+        jest.fn().mockResolvedValue(gcpLoggingDestinationCreateMutationPopulator()),
+      ],
+    ],
+  } = {}) => {
+    const mockApollo = createMockApollo(apolloHandlers);
+    wrapper = mountFn(StreamGcpLoggingDestinationEditor, {
+      attachTo: document.body,
+      provide: {
+        groupPath,
+      },
+      propsData: {
+        ...props,
+      },
+      apolloProvider: mockApollo,
+    });
+  };
+
+  const findWarningMessage = () => wrapper.findByTestId('data-warning');
+  const findAlertErrors = () => wrapper.findAllByTestId('alert-errors');
+  const findDestinationForm = () => wrapper.findComponent(GlForm);
+  const findAddStreamBtn = () => wrapper.findByTestId('stream-destination-add-button');
+  const findCancelStreamBtn = () => wrapper.findByTestId('stream-destination-cancel-button');
+  const findDeleteBtn = () => wrapper.findByTestId('stream-destination-delete-button');
+  const findDeleteModal = () => wrapper.findComponent(StreamDeleteModal);
+
+  const findProjectIdFormGroup = () =>
+    wrapper.findByTestId('gcp-logging-destination-project-id-form-group');
+  const findProjectId = () => wrapper.findByTestId('gcp-logging-destination-project-id');
+  const findClientEmailFormGroup = () =>
+    wrapper.findByTestId('gcp-logging-destination-client-email-form-group');
+  const findClientEmailUrl = () => wrapper.findByTestId('gcp-logging-destination-client-email');
+  const findLogIdFormGroup = () =>
+    wrapper.findByTestId('gcp-logging-destination-log-id-form-group');
+  const findLogId = () => wrapper.findByTestId('gcp-logging-destination-log-id');
+  const findPasswordFormGroup = () =>
+    wrapper.findByTestId('gcp-logging-destination-password-form-group');
+  const findPassword = () => wrapper.findByTestId('gcp-logging-destination-password');
+
+  afterEach(() => {
+    createAlert.mockClear();
+  });
+
+  describe('Group GCP Logging StreamDestinationEditor', () => {
+    describe('when initialized', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('should render the destinations warning', () => {
+        expect(findWarningMessage().props('title')).toBe(ADD_STREAM_EDITOR_I18N.WARNING_TITLE);
+      });
+
+      it('should render the destination ProjectId input', () => {
+        expect(findProjectIdFormGroup().exists()).toBe(true);
+        expect(findProjectId().exists()).toBe(true);
+        expect(findProjectId().attributes('placeholder')).toBe(
+          ADD_STREAM_EDITOR_I18N.GCP_LOGGING_DESTINATION_PROJECT_ID_PLACEHOLDER,
+        );
+      });
+
+      it('should render the destination ClientEmail input', () => {
+        expect(findClientEmailFormGroup().exists()).toBe(true);
+        expect(findClientEmailUrl().exists()).toBe(true);
+        expect(findClientEmailUrl().attributes('placeholder')).toBe(
+          ADD_STREAM_EDITOR_I18N.GCP_LOGGING_DESTINATION_CLIENT_EMAIL_PLACEHOLDER,
+        );
+      });
+
+      it('should render the destination IdForm input', () => {
+        expect(findLogIdFormGroup().exists()).toBe(true);
+        expect(findLogId().exists()).toBe(true);
+        expect(findLogId().attributes('placeholder')).toBe(
+          ADD_STREAM_EDITOR_I18N.GCP_LOGGING_DESTINATION_LOG_ID_PLACEHOLDER,
+        );
+      });
+
+      it('should render the destination Password input', () => {
+        expect(findPasswordFormGroup().exists()).toBe(true);
+        expect(findPassword().exists()).toBe(true);
+      });
+
+      it('does not render the delete button', () => {
+        expect(findDeleteBtn().exists()).toBe(false);
+      });
+
+      it('renders the save button text', () => {
+        expect(findAddStreamBtn().text()).toBe(ADD_STREAM_EDITOR_I18N.ADD_BUTTON_TEXT);
+      });
+    });
+
+    describe('add destination event', () => {
+      it('should emit add event after destination added', async () => {
+        createComponent();
+
+        await findProjectId().vm.$emit('input', mockGcpLoggingDestination.googleProjectIdName);
+        await findClientEmailUrl().vm.$emit('input', mockGcpLoggingDestination.clientEmail);
+        await findLogId().vm.$emit('input', mockGcpLoggingDestination.logIdName);
+        await findPassword().vm.$emit('input', mockGcpLoggingDestination.privateKey);
+        await findDestinationForm().vm.$emit('submit', { preventDefault: () => {} });
+        await waitForPromises();
+
+        expect(findAlertErrors()).toHaveLength(0);
+        expect(wrapper.emitted('error')).toBeUndefined();
+        expect(wrapper.emitted('added')).toBeDefined();
+      });
+
+      it('should not emit add destination event and reports error when server returns error', async () => {
+        const errorMsg = 'Destination hosts limit exceeded';
+        createComponent({
+          apolloHandlers: [
+            [
+              googleCloudLoggingConfigurationCreate,
+              jest.fn().mockResolvedValue(gcpLoggingDestinationCreateMutationPopulator([errorMsg])),
+            ],
+          ],
+        });
+
+        findProjectId().vm.$emit('input', mockGcpLoggingDestination.googleProjectIdName);
+        findClientEmailUrl().vm.$emit('input', mockGcpLoggingDestination.clientEmail);
+        findLogId().vm.$emit('input', mockGcpLoggingDestination.logIdName);
+        findPassword().vm.$emit('input', mockGcpLoggingDestination.privateKey);
+        findDestinationForm().vm.$emit('submit', { preventDefault: () => {} });
+        await waitForPromises();
+
+        expect(findAlertErrors()).toHaveLength(1);
+        expect(findAlertErrors().at(0).text()).toBe(errorMsg);
+        expect(wrapper.emitted('error')).toBeDefined();
+        expect(wrapper.emitted('added')).toBeUndefined();
+      });
+
+      it('should not emit add destination event and reports error when network error occurs', async () => {
+        const sentryError = new Error('Network error');
+        const sentryCaptureExceptionSpy = jest.spyOn(Sentry, 'captureException');
+        createComponent({
+          apolloHandlers: [
+            [googleCloudLoggingConfigurationCreate, jest.fn().mockRejectedValue(sentryError)],
+          ],
+        });
+
+        findProjectId().vm.$emit('input', mockGcpLoggingDestination.googleProjectIdName);
+        findClientEmailUrl().vm.$emit('input', mockGcpLoggingDestination.clientEmail);
+        findLogId().vm.$emit('input', mockGcpLoggingDestination.logIdName);
+        findPassword().vm.$emit('input', mockGcpLoggingDestination.privateKey);
+        findDestinationForm().vm.$emit('submit', { preventDefault: () => {} });
+        await waitForPromises();
+
+        expect(findAlertErrors()).toHaveLength(1);
+        expect(findAlertErrors().at(0).text()).toBe(AUDIT_STREAMS_NETWORK_ERRORS.CREATING_ERROR);
+        expect(sentryCaptureExceptionSpy).toHaveBeenCalledWith(sentryError);
+        expect(wrapper.emitted('error')).toBeDefined();
+        expect(wrapper.emitted('added')).toBeUndefined();
+      });
+    });
+
+    describe('cancel event', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('should emit cancel event correctly', () => {
+        findCancelStreamBtn().vm.$emit('click');
+
+        expect(wrapper.emitted('cancel')).toBeDefined();
+      });
+    });
+
+    describe('when editing an existing destination', () => {
+      describe('renders', () => {
+        beforeEach(() => {
+          createComponent({ props: { item: mockGcpLoggingDestination } });
+        });
+
+        it('the destination fields', () => {
+          expect(findProjectId().exists()).toBe(true);
+          expect(findProjectId().element.value).toBe(mockGcpLoggingDestination.googleProjectIdName);
+          expect(findClientEmailUrl().exists()).toBe(true);
+          expect(findClientEmailUrl().element.value).toBe(mockGcpLoggingDestination.clientEmail);
+          expect(findLogId().exists()).toBe(true);
+          expect(findLogId().element.value).toBe(mockGcpLoggingDestination.logIdName);
+          expect(findPassword().exists()).toBe(true);
+          expect(findPassword().element.value).toBe(mockGcpLoggingDestination.privateKey);
+        });
+
+        it('the delete button', () => {
+          expect(findDeleteBtn().exists()).toBe(true);
+        });
+      });
+
+      it('should emit updated event after destination updated', async () => {
+        createComponent({
+          props: { item: mockGcpLoggingDestination },
+          apolloHandlers: [
+            [
+              googleCloudLoggingConfigurationUpdate,
+              jest.fn().mockResolvedValue(gcpLoggingDestinationUpdateMutationPopulator()),
+            ],
+          ],
+        });
+
+        findProjectId().vm.$emit('input', mockNewGcpLoggingDestination.googleProjectIdName);
+        findClientEmailUrl().vm.$emit('input', mockNewGcpLoggingDestination.clientEmail);
+        findLogId().vm.$emit('input', mockNewGcpLoggingDestination.logIdName);
+        findPassword().vm.$emit('input', mockNewGcpLoggingDestination.privateKey);
+        findDestinationForm().vm.$emit('submit', { preventDefault: () => {} });
+        await waitForPromises();
+
+        expect(findAlertErrors()).toHaveLength(0);
+        expect(wrapper.emitted('error')).toBeUndefined();
+        expect(wrapper.emitted('updated')).toBeDefined();
+      });
+
+      it('should not emit add destination event and reports error when server returns error', async () => {
+        const errorMsg = 'Destination hosts limit exceeded';
+        createComponent({
+          props: { item: mockGcpLoggingDestination },
+          apolloHandlers: [
+            [
+              googleCloudLoggingConfigurationUpdate,
+              jest.fn().mockResolvedValue(gcpLoggingDestinationUpdateMutationPopulator([errorMsg])),
+            ],
+          ],
+        });
+
+        findProjectId().vm.$emit('input', mockGcpLoggingDestination.googleProjectIdName);
+        findClientEmailUrl().vm.$emit('input', mockGcpLoggingDestination.clientEmail);
+        findLogId().vm.$emit('input', mockGcpLoggingDestination.logIdName);
+        findPassword().vm.$emit('input', mockGcpLoggingDestination.privateKey);
+        findDestinationForm().vm.$emit('submit', { preventDefault: () => {} });
+        await waitForPromises();
+
+        expect(findAlertErrors()).toHaveLength(1);
+        expect(findAlertErrors().at(0).text()).toBe(AUDIT_STREAMS_NETWORK_ERRORS.UPDATING_ERROR);
+        expect(wrapper.emitted('error')).toBeDefined();
+        expect(wrapper.emitted('updated')).toBeUndefined();
+      });
+
+      it('should not emit add destination event and reports error when network error occurs', async () => {
+        const sentryError = new Error('Network error');
+        const sentryCaptureExceptionSpy = jest.spyOn(Sentry, 'captureException');
+        createComponent({
+          props: { item: mockGcpLoggingDestination },
+          apolloHandlers: [
+            [googleCloudLoggingConfigurationUpdate, jest.fn().mockRejectedValue(sentryError)],
+          ],
+        });
+
+        findProjectId().vm.$emit('input', mockGcpLoggingDestination.googleProjectIdName);
+        findClientEmailUrl().vm.$emit('input', mockGcpLoggingDestination.clientEmail);
+        findLogId().vm.$emit('input', mockGcpLoggingDestination.logIdName);
+        findPassword().vm.$emit('input', mockGcpLoggingDestination.privateKey);
+        findDestinationForm().vm.$emit('submit', { preventDefault: () => {} });
+        await waitForPromises();
+
+        expect(findAlertErrors()).toHaveLength(1);
+        expect(findAlertErrors().at(0).text()).toBe(AUDIT_STREAMS_NETWORK_ERRORS.UPDATING_ERROR);
+        expect(sentryCaptureExceptionSpy).toHaveBeenCalledWith(sentryError);
+        expect(wrapper.emitted('error')).toBeDefined();
+        expect(wrapper.emitted('updated')).toBeUndefined();
+      });
+    });
+
+    describe('deleting', () => {
+      beforeEach(() => {
+        createComponent({ props: { item: mockGcpLoggingDestination } });
+      });
+
+      it('should emit deleted on success operation', async () => {
+        const deleteButton = findDeleteBtn();
+        await deleteButton.trigger('click');
+        await findDeleteModal().vm.$emit('deleting');
+
+        expect(deleteButton.props('loading')).toBe(true);
+
+        await findDeleteModal().vm.$emit('delete');
+
+        expect(deleteButton.props('loading')).toBe(false);
+        expect(wrapper.emitted('deleted')).toEqual([[mockGcpLoggingDestination.id]]);
+      });
+
+      it('shows the alert for the error', () => {
+        const errorMsg = 'An error occurred';
+        findDeleteModal().vm.$emit('error', errorMsg);
+
+        expect(createAlert).toHaveBeenCalledWith({
+          message: AUDIT_STREAMS_NETWORK_ERRORS.DELETING_ERROR,
+          captureError: true,
+          error: errorMsg,
+        });
+      });
+    });
+  });
+});
diff --git a/ee/spec/frontend/audit_events/components/stream/stream_item_spec.js b/ee/spec/frontend/audit_events/components/stream/stream_item_spec.js
index 99b505bbbd7e51..027f403dca01fd 100644
--- a/ee/spec/frontend/audit_events/components/stream/stream_item_spec.js
+++ b/ee/spec/frontend/audit_events/components/stream/stream_item_spec.js
@@ -3,11 +3,14 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { STREAM_ITEMS_I18N } from 'ee/audit_events/constants';
 import StreamItem from 'ee/audit_events/components/stream/stream_item.vue';
 import StreamDestinationEditor from 'ee/audit_events/components/stream/stream_destination_editor.vue';
+import StreamGcpLoggingDestinationEditor from 'ee/audit_events/components/stream/stream_gcp_logging_destination_editor.vue';
 import {
   groupPath,
   mockExternalDestinations,
   instanceGroupPath,
   mockInstanceExternalDestinations,
+  mockHttpType,
+  mockGcpLoggingType,
 } from '../../mock_data';
 
 describe('StreamItem', () => {
@@ -18,12 +21,14 @@ describe('StreamItem', () => {
   const instanceDestination = mockInstanceExternalDestinations[0];
 
   let groupPathProvide = groupPath;
-  let itemProvide = destinationWithoutFilters;
+  let itemProps = destinationWithoutFilters;
+  let typeProps = mockHttpType;
 
   const createComponent = (props = {}) => {
     wrapper = mountExtended(StreamItem, {
       propsData: {
-        item: itemProvide,
+        item: itemProps,
+        type: typeProps,
         ...props,
       },
       provide: {
@@ -37,9 +42,10 @@ describe('StreamItem', () => {
 
   const findToggleButton = () => wrapper.findByTestId('toggle-btn');
   const findEditor = () => wrapper.findComponent(StreamDestinationEditor);
+  const findGcpLoggingEditor = () => wrapper.findComponent(StreamGcpLoggingDestinationEditor);
   const findFilterBadge = () => wrapper.findByTestId('filter-badge');
 
-  describe('Group StreamItem', () => {
+  describe('Group http StreamItem', () => {
     describe('render', () => {
       beforeEach(() => {
         createComponent();
@@ -124,10 +130,75 @@ describe('StreamItem', () => {
     });
   });
 
+  describe('Group gcp logging StreamItem', () => {
+    beforeEach(() => {
+      typeProps = mockGcpLoggingType;
+    });
+
+    describe('render', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('should not render the editor', () => {
+        expect(findGcpLoggingEditor().exists()).toBe(false);
+      });
+    });
+
+    describe('deleting', () => {
+      const id = 1;
+
+      it('bubbles up the "deleted" event', async () => {
+        createComponent();
+        await findToggleButton().vm.$emit('click');
+
+        findGcpLoggingEditor().vm.$emit('deleted', id);
+
+        expect(wrapper.emitted('deleted')).toEqual([[id]]);
+      });
+    });
+
+    describe('editing', () => {
+      beforeEach(async () => {
+        createComponent();
+        await findToggleButton().vm.$emit('click');
+      });
+
+      it('should pass the item to the editor', () => {
+        expect(findGcpLoggingEditor().exists()).toBe(true);
+        expect(findGcpLoggingEditor().props('item')).toStrictEqual(mockExternalDestinations[0]);
+      });
+
+      it('should emit the updated event when the editor fires its update event', async () => {
+        findGcpLoggingEditor().vm.$emit('updated');
+        await waitForPromises();
+
+        expect(wrapper.emitted('updated')).toBeDefined();
+
+        expect(findGcpLoggingEditor().exists()).toBe(false);
+      });
+
+      it('should emit the error event when the editor fires its error event', () => {
+        findGcpLoggingEditor().vm.$emit('error');
+
+        expect(wrapper.emitted('error')).toBeDefined();
+        expect(findGcpLoggingEditor().exists()).toBe(true);
+      });
+
+      it('should close the editor when the editor fires its cancel event', async () => {
+        findGcpLoggingEditor().vm.$emit('cancel');
+        await waitForPromises();
+
+        expect(findGcpLoggingEditor().exists()).toBe(false);
+      });
+    });
+  });
+
   describe('Instance StreamItem', () => {
     beforeEach(() => {
       groupPathProvide = instanceGroupPath;
-      itemProvide = instanceDestination;
+      itemProps = instanceDestination;
+      typeProps = mockHttpType;
     });
 
     describe('render', () => {
diff --git a/ee/spec/frontend/audit_events/mock_data.js b/ee/spec/frontend/audit_events/mock_data.js
index 65ec7b2e370483..4e63f7f9082b6c 100644
--- a/ee/spec/frontend/audit_events/mock_data.js
+++ b/ee/spec/frontend/audit_events/mock_data.js
@@ -41,6 +41,9 @@ export default () => [
   populateEvent('User 4', false, false),
 ];
 
+export const mockHttpType = 'http';
+export const mockGcpLoggingType = 'gcpLogging';
+
 export const mockExternalDestinationUrl = 'https://api.gitlab.com';
 export const mockExternalDestinationHeader = () => ({
   id: uniqueId('gid://gitlab/AuditEvents::Streaming::Header/'),
@@ -112,6 +115,24 @@ export const mockInstanceExternalDestinations = [
   },
 ];
 
+export const mockGcpLoggingDestination = {
+  __typename: 'GoogleCloudLoggingConfigurationType',
+  id: 'gid://gitlab/AuditEvents::GoogleCloudLoggingConfiguration/1',
+  clientEmail: 'my-email@my-google-project.iam.gservice.account.com',
+  googleProjectIdName: 'my-google-project',
+  logIdName: 'audit-events',
+  privateKey: 'PRIVATE_KEY',
+};
+
+export const mockNewGcpLoggingDestination = {
+  __typename: 'GoogleCloudLoggingConfigurationType',
+  id: 'gid://gitlab/AuditEvents::GoogleCloudLoggingConfiguration/1',
+  clientEmail: 'new-email@my-google-project.iam.gservice.account.com',
+  googleProjectIdName: 'new-google-project',
+  logIdName: 'audit-events',
+  privateKey: 'PRIVATE_KEY',
+};
+
 export const groupPath = 'test-group';
 
 export const instanceGroupPath = 'instance';
@@ -151,7 +172,7 @@ export const destinationCreateMutationPopulator = (errors = []) => {
 
   const errorData = {
     errors,
-    externalAuditEventDestination: null,
+    googleCloudLoggingConfiguration: null,
   };
 
   return {
@@ -161,6 +182,42 @@ export const destinationCreateMutationPopulator = (errors = []) => {
   };
 };
 
+export const gcpLoggingDestinationCreateMutationPopulator = (errors = []) => {
+  const correctData = {
+    errors,
+    googleCloudLoggingConfiguration: mockGcpLoggingDestination,
+  };
+
+  const errorData = {
+    errors,
+    googleCloudLoggingConfiguration: null,
+  };
+
+  return {
+    data: {
+      googleCloudLoggingConfigurationCreate: errors.length > 0 ? errorData : correctData,
+    },
+  };
+};
+
+export const gcpLoggingDestinationUpdateMutationPopulator = (errors = []) => {
+  const correctData = {
+    errors,
+    googleCloudLoggingConfiguration: mockGcpLoggingDestination,
+  };
+
+  const errorData = {
+    errors,
+    externalAuditEventDestination: null,
+  };
+
+  return {
+    data: {
+      googleCloudLoggingConfigurationUpdate: errors.length > 0 ? errorData : correctData,
+    },
+  };
+};
+
 export const destinationDeleteMutationPopulator = (errors = []) => ({
   data: {
     externalAuditEventDestinationDestroy: {
@@ -306,3 +363,26 @@ export const destinationInstanceDeleteMutationPopulator = (errors = []) => ({
     },
   },
 });
+
+export const destinationGcpLoggingDeleteMutationPopulator = (errors = []) => ({
+  data: {
+    googleCloudLoggingConfigurationDestroy: {
+      errors,
+    },
+  },
+});
+
+export const mockOptionsItems = [
+  {
+    text: 'HTTP endpoint',
+    action: () => {
+      this.showEditor('http');
+    },
+  },
+  {
+    text: 'Google Cloud Logging',
+    action: () => {
+      this.showEditor('gcpLogging');
+    },
+  },
+];
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 78b7c5238e92c1..b863867169b73d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -6564,6 +6564,9 @@ msgstr ""
 msgid "AuditStreams|Cancel editing"
 msgstr ""
 
+msgid "AuditStreams|Client Email"
+msgstr ""
+
 msgid "AuditStreams|Custom HTTP headers (optional)"
 msgstr ""
 
@@ -6588,15 +6591,30 @@ msgstr ""
 msgid "AuditStreams|Filter by audit event type"
 msgstr ""
 
+msgid "AuditStreams|Google Cloud Logging"
+msgstr ""
+
+msgid "AuditStreams|HTTP endpoint"
+msgstr ""
+
 msgid "AuditStreams|Header"
 msgstr ""
 
+msgid "AuditStreams|Log ID"
+msgstr ""
+
 msgid "AuditStreams|Maximum of %{number} HTTP headers has been reached."
 msgstr ""
 
 msgid "AuditStreams|No header created yet."
 msgstr ""
 
+msgid "AuditStreams|Private key"
+msgstr ""
+
+msgid "AuditStreams|Project ID"
+msgstr ""
+
 msgid "AuditStreams|Remove custom header"
 msgstr ""
 
@@ -6633,6 +6651,9 @@ msgstr ""
 msgid "AuditStreams|Verification token"
 msgstr ""
 
+msgid "AuditStreams|audit-events"
+msgstr ""
+
 msgid "AuditStreams|ex: 1000"
 msgstr ""
 
@@ -6642,6 +6663,12 @@ msgstr ""
 msgid "AuditStreams|filtered"
 msgstr ""
 
+msgid "AuditStreams|my-email@my-google-project.iam.gservice.account.com"
+msgstr ""
+
+msgid "AuditStreams|my-google-project"
+msgstr ""
+
 msgid "Aug"
 msgstr ""
 
-- 
GitLab


From b7b61757cbfff4bffa6a416b0f0869a62d30ac43 Mon Sep 17 00:00:00 2001
From: nrosandich <nrosandich@gitlab.com>
Date: Wed, 5 Jul 2023 10:56:36 +1200
Subject: [PATCH 2/3] Update from review feedback

---
 .../components/audit_events_stream.vue        |  16 ++-
 .../components/stream/stream_delete_modal.vue |   5 +-
 .../components/stream/stream_empty_state.vue  |   6 +-
 .../components/audit_events_stream_spec.js    |  61 ++++------
 .../stream_empty_state_spec.js.snap           | 111 ++++++++++++++++--
 .../stream/stream_empty_state_spec.js         |  20 +++-
 ee/spec/frontend/audit_events/mock_data.js    |  15 ---
 7 files changed, 153 insertions(+), 81 deletions(-)

diff --git a/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue b/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue
index a1df9728851324..542c118f333965 100644
--- a/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue
+++ b/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue
@@ -121,8 +121,10 @@ export default {
         destinationId: id,
       });
 
-      if (this.totalCount) {
+      if (this.totalCount > 1) {
         this.successMessage = DELETE_STREAM_MESSAGE;
+      } else {
+        this.clearSuccessMessage();
       }
     },
     async onDeletedGcpLoggingDestination(id) {
@@ -132,8 +134,10 @@ export default {
         destinationId: id,
       });
 
-      if (this.totalCount) {
+      if (this.totalCount > 1) {
         this.successMessage = DELETE_STREAM_MESSAGE;
+      } else {
+        this.clearSuccessMessage();
       }
     },
   },
@@ -209,11 +213,7 @@ export default {
 
 <template>
   <gl-loading-icon v-if="isLoading" size="lg" />
-  <stream-empty-state
-    v-else-if="showEmptyState"
-    @addHttp="showEditor($options.DESTINATION_TYPE_HTTP)"
-    @addGcpLogging="showEditor($options.DESTINATION_TYPE_GCP_LOGGING)"
-  />
+  <stream-empty-state v-else-if="showEmptyState" @add="showEditor" />
   <div v-else>
     <gl-alert
       v-if="successMessage"
@@ -241,14 +241,12 @@ export default {
     <div v-if="isEditorVisible" class="gl-mb-4 gl-p-4 gl-border gl-rounded-base">
       <stream-destination-editor
         v-if="editorType === $options.DESTINATION_TYPE_HTTP"
-        :type="$options.DESTINATION_TYPE_HTTP"
         @added="onAddedDestination"
         @error="clearSuccessMessage"
         @cancel="hideEditor"
       />
       <stream-gcp-logging-destination-editor
         v-else-if="editorType === $options.DESTINATION_TYPE_GCP_LOGGING"
-        :type="$options.DESTINATION_TYPE_GCP_LOGGING"
         @added="onAddedDestination"
         @error="clearSuccessMessage"
         @cancel="hideEditor"
diff --git a/ee/app/assets/javascripts/audit_events/components/stream/stream_delete_modal.vue b/ee/app/assets/javascripts/audit_events/components/stream/stream_delete_modal.vue
index be0747356a39e2..548bda6b64042a 100644
--- a/ee/app/assets/javascripts/audit_events/components/stream/stream_delete_modal.vue
+++ b/ee/app/assets/javascripts/audit_events/components/stream/stream_delete_modal.vue
@@ -78,7 +78,7 @@ export default {
         if (errors.length > 0) {
           this.reportError(new Error(errors[0]));
         } else {
-          this.reportSuccess(this.id);
+          this.$emit('delete');
         }
       } catch (error) {
         this.reportError(error);
@@ -90,9 +90,6 @@ export default {
     reportError(error) {
       this.$emit('error', error);
     },
-    reportSuccess(id) {
-      this.$emit('delete', id);
-    },
     show() {
       this.$refs.modal.show();
     },
diff --git a/ee/app/assets/javascripts/audit_events/components/stream/stream_empty_state.vue b/ee/app/assets/javascripts/audit_events/components/stream/stream_empty_state.vue
index 835f937e4b9eec..d33c38e170e874 100644
--- a/ee/app/assets/javascripts/audit_events/components/stream/stream_empty_state.vue
+++ b/ee/app/assets/javascripts/audit_events/components/stream/stream_empty_state.vue
@@ -5,6 +5,8 @@ import {
   AUDIT_STREAMS_EMPTY_STATE_I18N,
   ADD_HTTP,
   ADD_GCP_LOGGING,
+  DESTINATION_TYPE_HTTP,
+  DESTINATION_TYPE_GCP_LOGGING,
 } from '../../constants';
 
 export default {
@@ -19,13 +21,13 @@ export default {
         {
           text: ADD_HTTP,
           action: () => {
-            this.$emit('addHttp');
+            this.$emit('add', DESTINATION_TYPE_HTTP);
           },
         },
         {
           text: ADD_GCP_LOGGING,
           action: () => {
-            this.$emit('addGcpLogging');
+            this.$emit('add', DESTINATION_TYPE_GCP_LOGGING);
           },
         },
       ],
diff --git a/ee/spec/frontend/audit_events/components/audit_events_stream_spec.js b/ee/spec/frontend/audit_events/components/audit_events_stream_spec.js
index c4b6b5114e3705..76ad45795b551d 100644
--- a/ee/spec/frontend/audit_events/components/audit_events_stream_spec.js
+++ b/ee/spec/frontend/audit_events/components/audit_events_stream_spec.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import { GlAlert, GlDisclosureDropdown, GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlDisclosureDropdown, GlDisclosureDropdownItem, GlLoadingIcon } from '@gitlab/ui';
 import { createAlert } from '~/alert';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import externalDestinationsQuery from 'ee/audit_events/graphql/queries/get_external_destinations.query.graphql';
@@ -24,9 +24,6 @@ import {
   mockInstanceExternalDestinations,
   instanceGroupPath,
   instanceDestinationDataPopulator,
-  mockOptionsItems,
-  mockHttpType,
-  mockGcpLoggingType,
 } from '../mock_data';
 
 jest.mock('~/alert');
@@ -41,16 +38,28 @@ describe('AuditEventsStream', () => {
     .mockResolvedValue(destinationDataPopulator(mockExternalDestinations));
 
   const createComponent = (mockApollo) => {
-    wrapper = shallowMountExtended(AuditEventsStream, {
+    wrapper = mountExtended(AuditEventsStream, {
       provide: {
         groupPath: providedGroupPath,
       },
       apolloProvider: mockApollo,
+      stubs: {
+        GlAlert: true,
+        GlLoadingIcon: true,
+        StreamItem: true,
+        StreamDestinationEditor: true,
+        StreamGcpLoggingDestinationEditor: true,
+        StreamEmptyState: true,
+      },
     });
   };
 
   const findSuccessMessage = () => wrapper.findComponent(GlAlert);
   const findAddDestinationButton = () => wrapper.findComponent(GlDisclosureDropdown);
+  const findDisclosureDropdownItem = (index) =>
+    wrapper.findAllComponents(GlDisclosureDropdownItem).at(index).find('button');
+  const findHttpDropdownItem = () => findDisclosureDropdownItem(0);
+  const findGcpLoggingDropdownItem = () => findDisclosureDropdownItem(1);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findStreamDestinationEditor = () => wrapper.findComponent(StreamDestinationEditor);
   const findStreamGcpLoggingDestinationEditor = () =>
@@ -112,10 +121,8 @@ describe('AuditEventsStream', () => {
 
         expect(findAddDestinationButton().props('toggleText')).toBe('Add streaming destination');
 
-        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[0]);
-        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[0]);
+        await findHttpDropdownItem().trigger('click');
 
-        await wrapper.vm.showEditor(mockHttpType);
         expect(findStreamDestinationEditor().exists()).toBe(true);
       });
 
@@ -123,10 +130,8 @@ describe('AuditEventsStream', () => {
         expect(findLoadingIcon().exists()).toBe(false);
         expect(findStreamDestinationEditor().exists()).toBe(false);
 
-        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[0]);
-        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[0]);
+        await findHttpDropdownItem().trigger('click');
 
-        await wrapper.vm.showEditor(mockHttpType);
         const streamDestinationEditorComponent = findStreamDestinationEditor();
 
         expect(streamDestinationEditorComponent.exists()).toBe(true);
@@ -143,10 +148,8 @@ describe('AuditEventsStream', () => {
 
         expect(findAddDestinationButton().props('toggleText')).toBe('Add streaming destination');
 
-        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[1]);
-        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[1]);
+        await findGcpLoggingDropdownItem().trigger('click');
 
-        await wrapper.vm.showEditor(mockGcpLoggingType);
         expect(findStreamGcpLoggingDestinationEditor().exists()).toBe(true);
       });
 
@@ -154,10 +157,8 @@ describe('AuditEventsStream', () => {
         expect(findLoadingIcon().exists()).toBe(false);
         expect(findStreamGcpLoggingDestinationEditor().exists()).toBe(false);
 
-        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[1]);
-        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[1]);
+        await findGcpLoggingDropdownItem().trigger('click');
 
-        await wrapper.vm.showEditor(mockGcpLoggingType);
         expect(findStreamGcpLoggingDestinationEditor().exists()).toBe(true);
 
         findStreamGcpLoggingDestinationEditor().vm.$emit('added');
@@ -167,19 +168,15 @@ describe('AuditEventsStream', () => {
       });
 
       it('clears the success message if an error occurs afterwards', async () => {
-        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[0]);
-        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[0]);
+        await findHttpDropdownItem().trigger('click');
 
-        await wrapper.vm.showEditor(mockHttpType);
         findStreamDestinationEditor().vm.$emit('added');
         await waitForPromises();
 
         expect(findSuccessMessage().text()).toBe(ADD_STREAM_MESSAGE);
 
-        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[0]);
-        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[0]);
+        await findHttpDropdownItem().trigger('click');
 
-        await wrapper.vm.showEditor(mockHttpType);
         findStreamDestinationEditor().vm.$emit('error');
         await waitForPromises();
 
@@ -277,10 +274,8 @@ describe('AuditEventsStream', () => {
         expect(findLoadingIcon().exists()).toBe(false);
         expect(findStreamDestinationEditor().exists()).toBe(false);
 
-        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[0]);
-        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[0]);
+        await findHttpDropdownItem().trigger('click');
 
-        await wrapper.vm.showEditor(mockHttpType);
         expect(findStreamDestinationEditor().exists()).toBe(true);
       });
 
@@ -288,10 +283,8 @@ describe('AuditEventsStream', () => {
         expect(findLoadingIcon().exists()).toBe(false);
         expect(findStreamDestinationEditor().exists()).toBe(false);
 
-        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[0]);
-        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[0]);
+        await findHttpDropdownItem().trigger('click');
 
-        await wrapper.vm.showEditor(mockHttpType);
         expect(findStreamDestinationEditor().exists()).toBe(true);
 
         findStreamDestinationEditor().vm.$emit('added');
@@ -301,19 +294,15 @@ describe('AuditEventsStream', () => {
       });
 
       it('clears the success message if an error occurs afterwards', async () => {
-        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[0]);
-        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[0]);
+        await findHttpDropdownItem().trigger('click');
 
-        await wrapper.vm.showEditor(mockHttpType);
         findStreamDestinationEditor().vm.$emit('added');
         await waitForPromises();
 
         expect(findSuccessMessage().text()).toBe(ADD_STREAM_MESSAGE);
 
-        await findAddDestinationButton().vm.$emit('action', mockOptionsItems[0]);
-        expect(findAddDestinationButton().emitted().action[0][0]).toEqual(mockOptionsItems[0]);
+        await findHttpDropdownItem().trigger('click');
 
-        await wrapper.vm.showEditor(mockHttpType);
         findStreamDestinationEditor().vm.$emit('error');
         await waitForPromises();
 
diff --git a/ee/spec/frontend/audit_events/components/stream/__snapshots__/stream_empty_state_spec.js.snap b/ee/spec/frontend/audit_events/components/stream/__snapshots__/stream_empty_state_spec.js.snap
index ffa2359b01b6eb..4e2753317dfc82 100644
--- a/ee/spec/frontend/audit_events/components/stream/__snapshots__/stream_empty_state_spec.js.snap
+++ b/ee/spec/frontend/audit_events/components/stream/__snapshots__/stream_empty_state_spec.js.snap
@@ -50,19 +50,106 @@ exports[`StreamEmptyState should render correctly 1`] = `
       <div
         class="gl-display-flex gl-flex-wrap gl-justify-content-center"
       >
-        <gl-disclosure-dropdown-stub
-          autoclose="true"
-          category="primary"
+        <div
+          class="gl-new-dropdown gl-disclosure-dropdown"
           data-testid="dropdown-toggle"
-          icon=""
-          items="[object Object],[object Object]"
-          placement="left"
-          positioningstrategy="absolute"
-          size="medium"
-          toggleid="dropdown-toggle-btn-10"
-          toggletext="Add streaming destination"
-          variant="confirm"
-        />
+        >
+          <button
+            aria-controls="base-dropdown-14"
+            aria-labelledby="dropdown-toggle-btn-10"
+            class="btn btn-confirm btn-md gl-button gl-new-dropdown-toggle"
+            data-testid="base-dropdown-toggle"
+            id="dropdown-toggle-btn-10"
+            listeners="[object Object]"
+            type="button"
+          >
+            <!---->
+             
+            <!---->
+              
+            <span
+              class="gl-button-text"
+            >
+              <span
+                class="gl-new-dropdown-button-text"
+              >
+                
+        Add streaming destination
+      
+              </span>
+               
+              <svg
+                aria-hidden="true"
+                class="gl-button-icon gl-new-dropdown-chevron gl-icon s16"
+                data-testid="chevron-down-icon"
+                role="img"
+              >
+                <use
+                  href="file-mock#chevron-down"
+                />
+              </svg>
+            </span>
+          </button>
+           
+          <div
+            class="gl-new-dropdown-panel gl-w-31!"
+            data-testid="base-dropdown-menu"
+            id="base-dropdown-14"
+          >
+            <div
+              class="gl-new-dropdown-inner"
+            >
+                
+              <ul
+                aria-labelledby="dropdown-toggle-btn-10"
+                class="gl-new-dropdown-contents"
+                data-testid="disclosure-content"
+                id="disclosure-11"
+                tabindex="-1"
+              >
+                <li
+                  class="gl-new-dropdown-item"
+                  data-testid="disclosure-dropdown-item"
+                  tabindex="0"
+                >
+                  <button
+                    class="gl-new-dropdown-item-content"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="gl-new-dropdown-item-text-wrapper"
+                    >
+                      
+          HTTP endpoint
+        
+                    </span>
+                  </button>
+                </li>
+                <li
+                  class="gl-new-dropdown-item"
+                  data-testid="disclosure-dropdown-item"
+                  tabindex="0"
+                >
+                  <button
+                    class="gl-new-dropdown-item-content"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="gl-new-dropdown-item-text-wrapper"
+                    >
+                      
+          Google Cloud Logging
+        
+                    </span>
+                  </button>
+                </li>
+              </ul>
+               
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/ee/spec/frontend/audit_events/components/stream/stream_empty_state_spec.js b/ee/spec/frontend/audit_events/components/stream/stream_empty_state_spec.js
index 7cb9481df2f062..6183f0eb7409e5 100644
--- a/ee/spec/frontend/audit_events/components/stream/stream_empty_state_spec.js
+++ b/ee/spec/frontend/audit_events/components/stream/stream_empty_state_spec.js
@@ -1,5 +1,5 @@
-import { shallowMount } from '@vue/test-utils';
-import { GlDisclosureDropdown, GlEmptyState } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlDisclosureDropdownItem, GlEmptyState } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import StreamEmptyState from 'ee/audit_events/components/stream/stream_empty_state.vue';
 import { mockSvgPath, groupPath } from '../../mock_data';
 
@@ -7,7 +7,7 @@ describe('StreamEmptyState', () => {
   let wrapper;
 
   const createComponent = () => {
-    wrapper = shallowMount(StreamEmptyState, {
+    wrapper = mountExtended(StreamEmptyState, {
       provide: {
         emptyStateSvgPath: mockSvgPath,
         groupPath,
@@ -19,6 +19,10 @@ describe('StreamEmptyState', () => {
   };
 
   const findAddDestinationButton = () => wrapper.findComponent(GlDisclosureDropdown);
+  const findDisclosureDropdownItem = (index) =>
+    wrapper.findAllComponents(GlDisclosureDropdownItem).at(index).find('button');
+  const findHttpDropdownItem = () => findDisclosureDropdownItem(0);
+  const findGcpLoggingDropdownItem = () => findDisclosureDropdownItem(1);
 
   beforeEach(() => {
     createComponent();
@@ -32,4 +36,14 @@ describe('StreamEmptyState', () => {
     expect(findAddDestinationButton().exists()).toBe(true);
     expect(findAddDestinationButton().props('toggleText')).toBe('Add streaming destination');
   });
+
+  it('emits event on select http', async () => {
+    await findHttpDropdownItem().trigger('click');
+    expect(wrapper.emitted('add')).toStrictEqual([['http']]);
+  });
+
+  it('emits event on select gcp logging', async () => {
+    await findGcpLoggingDropdownItem().trigger('click');
+    expect(wrapper.emitted('add')).toStrictEqual([['gcpLogging']]);
+  });
 });
diff --git a/ee/spec/frontend/audit_events/mock_data.js b/ee/spec/frontend/audit_events/mock_data.js
index 4e63f7f9082b6c..8471c3b5f4ee7c 100644
--- a/ee/spec/frontend/audit_events/mock_data.js
+++ b/ee/spec/frontend/audit_events/mock_data.js
@@ -371,18 +371,3 @@ export const destinationGcpLoggingDeleteMutationPopulator = (errors = []) => ({
     },
   },
 });
-
-export const mockOptionsItems = [
-  {
-    text: 'HTTP endpoint',
-    action: () => {
-      this.showEditor('http');
-    },
-  },
-  {
-    text: 'Google Cloud Logging',
-    action: () => {
-      this.showEditor('gcpLogging');
-    },
-  },
-];
-- 
GitLab


From 800736133cc7c9d8c3c0522c6d6afc8d58210d55 Mon Sep 17 00:00:00 2001
From: nrosandich <nrosandich@gitlab.com>
Date: Thu, 6 Jul 2023 08:23:59 +1200
Subject: [PATCH 3/3] Updates from review feedback

---
 .../components/audit_events_stream.vue        | 32 ++++++++++---------
 .../stream/stream_destination_editor.vue      |  5 ++-
 .../components/stream/stream_empty_state.vue  | 18 +++++------
 .../stream_gcp_logging_destination_editor.vue |  5 ++-
 4 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue b/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue
index 542c118f333965..f764a8b9ff570c 100644
--- a/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue
+++ b/ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue
@@ -44,20 +44,6 @@ export default {
       isEditorVisible: false,
       successMessage: null,
       editorType: DESTINATION_TYPE_HTTP,
-      items: [
-        {
-          text: ADD_HTTP,
-          action: () => {
-            this.showEditor(DESTINATION_TYPE_HTTP);
-          },
-        },
-        {
-          text: ADD_GCP_LOGGING,
-          action: () => {
-            this.showEditor(DESTINATION_TYPE_GCP_LOGGING);
-          },
-        },
-      ],
     };
   },
   computed: {
@@ -88,8 +74,24 @@ export default {
     gcpLoggingDestinationQuery() {
       return gcpLoggingDestinationsQuery;
     },
+    destinationOptions() {
+      return [
+        {
+          text: ADD_HTTP,
+          action: () => {
+            this.showEditor(DESTINATION_TYPE_HTTP);
+          },
+        },
+        {
+          text: ADD_GCP_LOGGING,
+          action: () => {
+            this.showEditor(DESTINATION_TYPE_GCP_LOGGING);
+          },
+        },
+      ];
+    },
     addOptions() {
-      return this.isInstance ? [this.items[0]] : this.items;
+      return this.isInstance ? [this.destinationOptions[0]] : this.destinationOptions;
     },
   },
   methods: {
diff --git a/ee/app/assets/javascripts/audit_events/components/stream/stream_destination_editor.vue b/ee/app/assets/javascripts/audit_events/components/stream/stream_destination_editor.vue
index bf46de11714450..cb97d64ecd3987 100644
--- a/ee/app/assets/javascripts/audit_events/components/stream/stream_destination_editor.vue
+++ b/ee/app/assets/javascripts/audit_events/components/stream/stream_destination_editor.vue
@@ -569,6 +569,9 @@ export default {
     updateEventTypeFilters(newFilters) {
       this.filters = newFilters;
     },
+    formSubmission() {
+      return this.isEditing ? this.updateDestination() : this.addDestination();
+    },
   },
   i18n: { ...ADD_STREAM_EDITOR_I18N, CREATING_ERROR },
   fields: [
@@ -626,7 +629,7 @@ export default {
       {{ error }}
     </gl-alert>
 
-    <gl-form @submit.prevent="() => (isEditing ? updateDestination() : addDestination())">
+    <gl-form @submit.prevent="formSubmission">
       <gl-form-group
         :label="$options.i18n.DESTINATION_URL_LABEL"
         data-testid="destination-url-form-group"
diff --git a/ee/app/assets/javascripts/audit_events/components/stream/stream_empty_state.vue b/ee/app/assets/javascripts/audit_events/components/stream/stream_empty_state.vue
index d33c38e170e874..4819048f06f895 100644
--- a/ee/app/assets/javascripts/audit_events/components/stream/stream_empty_state.vue
+++ b/ee/app/assets/javascripts/audit_events/components/stream/stream_empty_state.vue
@@ -15,9 +15,12 @@ export default {
     GlDisclosureDropdown,
   },
   inject: ['groupPath', 'emptyStateSvgPath'],
-  data() {
-    return {
-      items: [
+  computed: {
+    isInstance() {
+      return this.groupPath === 'instance';
+    },
+    destinationOptions() {
+      return [
         {
           text: ADD_HTTP,
           action: () => {
@@ -30,15 +33,10 @@ export default {
             this.$emit('add', DESTINATION_TYPE_GCP_LOGGING);
           },
         },
-      ],
-    };
-  },
-  computed: {
-    isInstance() {
-      return this.groupPath === 'instance';
+      ];
     },
     addOptions() {
-      return this.isInstance ? [this.items[0]] : this.items;
+      return this.isInstance ? [this.destinationOptions[0]] : this.destinationOptions;
     },
   },
   i18n: {
diff --git a/ee/app/assets/javascripts/audit_events/components/stream/stream_gcp_logging_destination_editor.vue b/ee/app/assets/javascripts/audit_events/components/stream/stream_gcp_logging_destination_editor.vue
index b31084fa9b275a..cb33b17c2ac897 100644
--- a/ee/app/assets/javascripts/audit_events/components/stream/stream_gcp_logging_destination_editor.vue
+++ b/ee/app/assets/javascripts/audit_events/components/stream/stream_gcp_logging_destination_editor.vue
@@ -182,6 +182,9 @@ export default {
     deleteDestination() {
       this.$refs.deleteModal.show();
     },
+    formSubmission() {
+      return this.isEditing ? this.updateDestination() : this.addDestination();
+    },
   },
   i18n: ADD_STREAM_EDITOR_I18N,
   DESTINATION_TYPE_GCP_LOGGING,
@@ -213,7 +216,7 @@ export default {
       {{ error }}
     </gl-alert>
 
-    <gl-form @submit.prevent="() => (isEditing ? updateDestination() : addDestination())">
+    <gl-form @submit.prevent="formSubmission">
       <gl-form-group
         :label="$options.i18n.GCP_LOGGING_DESTINATION_PROJECT_ID_LABEL"
         data-testid="gcp-logging-destination-project-id-form-group"
-- 
GitLab