## Problem Statement Create a separate form for Google Cloud Logging integration. This form should allow user to input the required Google Cloud Logging configuration data - Google project ID, client email, Log ID, and private key. ## Proposed Solution Add a new form for google cloud logging integration. This form should use GraphQL APIs being implemented in https://gitlab.com/gitlab-org/gitlab/-/issues/409422+s. ### Design The design is based on the updated design of [Update streaming audit event UI styles](https://gitlab.com/gitlab-org/gitlab/-/issues/411005) Please see the description area for the overview and [Figma](https://www.figma.com/file/sLgk5YgIV2AazZt0zU8Ea3/Small-design-issues?type=design&node-id=157%3A18232&t=41JjReKNnmh0tGk1-1) for the specs - `Add streaming destination` to a dropdown, separate HTTP destination creation and 3rd party creation - Add all the filled - ~~When we only provide GCP, we disable the selection for `3rd party source` and show a tooltip~~ - Show error messages ### Implementation plan 1. This is only at top-group level at the moment so will need to add `v-if="!isInstance"` on all components 1. Update `ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue` to pull in a list of google logging destinations using the [API](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/124038/diffs#439eac78a59a9e7e7f7e25d3d7301eb5ab927018_223_258) and store in a new destinations variable called `googleCloudLoggingAuditEventDestinations` 1. Duplicate the `stream-item` component on line 52 displaying the destinations 1. Update button on line 140 to a [drop down button with dropdown items](https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-button--docs#dropdown-button) in `ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue` 1. Duplicate `ee/app/assets/javascripts/audit_events/components/stream/stream_destination_editor.vue` into a new component called `stream_google_cloud_logging_destination_editor.vue` 1. In new component update the form to use the new fields and use the new [GraphQL APIs to update, create and delete](https://docs.gitlab.com/ee/api/graphql/reference/#mutationgooglecloudloggingconfigurationcreate) 1. Import new component into `ee/app/assets/javascripts/audit_events/components/stream/stream_item.vue` and `ee/app/assets/javascripts/audit_events/components/audit_events_stream.vue` 1. Create a new computed prop in both to get the destination type and switch between the `stream_destination_editor.vue` and new `stream_google_cloud_logging_destination_editor.vue` 1. Update delete [mutation](https://docs.gitlab.com/ee/api/graphql/reference/#mutationgooglecloudloggingconfigurationdestroy) to use new API in `stream_item.vue` 1. Update tests 2. Update ~documentation