diff options
Diffstat (limited to 'app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue')
| -rw-r--r-- | app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue | 123 |
1 files changed, 80 insertions, 43 deletions
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue index 3ffb652e61b..f51c8d7e9f7 100644 --- a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue +++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue @@ -1,11 +1,11 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlButton, GlAlert } from '@gitlab/ui'; import createHttpIntegrationMutation from 'ee_else_ce/alerts_settings/graphql/mutations/create_http_integration.mutation.graphql'; import updateHttpIntegrationMutation from 'ee_else_ce/alerts_settings/graphql/mutations/update_http_integration.mutation.graphql'; import createFlash, { FLASH_TYPES } from '~/flash'; import { fetchPolicies } from '~/lib/graphql'; -import { s__ } from '~/locale'; -import { typeSet } from '../constants'; +import httpStatusCodes from '~/lib/utils/http_status'; +import { typeSet, i18n, tabIndices } from '../constants'; import createPrometheusIntegrationMutation from '../graphql/mutations/create_prometheus_integration.mutation.graphql'; import destroyHttpIntegrationMutation from '../graphql/mutations/destroy_http_integration.mutation.graphql'; import resetHttpTokenMutation from '../graphql/mutations/reset_http_token.mutation.graphql'; @@ -28,21 +28,12 @@ import { RESET_INTEGRATION_TOKEN_ERROR, UPDATE_INTEGRATION_ERROR, INTEGRATION_PAYLOAD_TEST_ERROR, + INTEGRATION_INACTIVE_PAYLOAD_TEST_ERROR, + DEFAULT_ERROR, } from '../utils/error_messages'; import IntegrationsList from './alerts_integrations_list.vue'; import AlertSettingsForm from './alerts_settings_form.vue'; -export const i18n = { - changesSaved: s__( - 'AlertsIntegrations|The integration has been successfully saved. Alerts from this new integration should now appear on your alerts list.', - ), - integrationRemoved: s__('AlertsIntegrations|The integration has been successfully removed.'), - alertSent: s__( - 'AlertsIntegrations|The test alert has been successfully sent, and should now be visible on your alerts list.', - ), - addNewIntegration: s__('AlertSettings|Add new integration'), -}; - export default { typeSet, i18n, @@ -50,14 +41,9 @@ export default { IntegrationsList, AlertSettingsForm, GlButton, + GlAlert, }, inject: { - generic: { - default: {}, - }, - prometheus: { - default: {}, - }, projectPath: { default: '', }, @@ -124,7 +110,10 @@ export default { integrations: {}, httpIntegrations: {}, currentIntegration: null, + newIntegration: null, formVisible: false, + showSuccessfulCreateAlert: false, + tabIndex: tabIndices.configureDetails, }; }, computed: { @@ -139,10 +128,10 @@ export default { isHttp(type) { return type === typeSet.http; }, - createNewIntegration({ type, variables }) { + createNewIntegration({ type, variables }, testAfterSubmit) { const { projectPath } = this; - const isHttp = this.isHttp(type); + this.isUpdating = true; this.$apollo .mutate({ @@ -163,16 +152,19 @@ export default { .then(({ data: { httpIntegrationCreate, prometheusIntegrationCreate } = {} } = {}) => { const error = httpIntegrationCreate?.errors[0] || prometheusIntegrationCreate?.errors[0]; if (error) { - return createFlash({ message: error }); + createFlash({ message: error }); + return; } - const { integration } = httpIntegrationCreate || prometheusIntegrationCreate; - this.editIntegration(integration); + const { integration } = httpIntegrationCreate || prometheusIntegrationCreate; + this.newIntegration = integration; + this.showSuccessfulCreateAlert = true; - return createFlash({ - message: this.$options.i18n.changesSaved, - type: FLASH_TYPES.SUCCESS, - }); + if (testAfterSubmit) { + this.viewIntegration(this.newIntegration, tabIndices.sendTestAlert); + } else { + this.setFormVisibility(false); + } }) .catch(() => { createFlash({ message: ADD_INTEGRATION_ERROR }); @@ -181,9 +173,9 @@ export default { this.isUpdating = false; }); }, - updateIntegration({ type, variables }) { + updateIntegration({ type, variables }, testAfterSubmit) { this.isUpdating = true; - this.$apollo + return this.$apollo .mutate({ mutation: this.isHttp(type) ? updateHttpIntegrationMutation @@ -196,12 +188,20 @@ export default { .then(({ data: { httpIntegrationUpdate, prometheusIntegrationUpdate } = {} } = {}) => { const error = httpIntegrationUpdate?.errors[0] || prometheusIntegrationUpdate?.errors[0]; if (error) { - return createFlash({ message: error }); + createFlash({ message: error }); + return; } - this.clearCurrentIntegration({ type }); + const integration = + httpIntegrationUpdate?.integration || prometheusIntegrationUpdate?.integration; - return createFlash({ + if (testAfterSubmit) { + this.viewIntegration(integration, tabIndices.sendTestAlert); + } else { + this.clearCurrentIntegration(type); + } + + createFlash({ message: this.$options.i18n.changesSaved, type: FLASH_TYPES.SUCCESS, }); @@ -261,13 +261,23 @@ export default { currentIntegration = { ...currentIntegration, ...httpIntegrationMappingData }; } - this.$apollo.mutate({ - mutation: this.isHttp(type) - ? updateCurrentHttpIntegrationMutation - : updateCurrentPrometheusIntegrationMutation, - variables: currentIntegration, - }); - this.setFormVisibility(true); + this.viewIntegration(currentIntegration, tabIndices.viewCredentials); + }, + viewIntegration(integration, tabIndex) { + this.$apollo + .mutate({ + mutation: this.isHttp(integration.type) + ? updateCurrentHttpIntegrationMutation + : updateCurrentPrometheusIntegrationMutation, + variables: integration, + }) + .then(() => { + this.setFormVisibility(true); + this.tabIndex = tabIndex; + }) + .catch(() => { + createFlash({ message: DEFAULT_ERROR }); + }); }, deleteIntegration({ id, type }) { const { projectPath } = this; @@ -319,19 +329,44 @@ export default { type: FLASH_TYPES.SUCCESS, }); }) - .catch(() => { - createFlash({ message: INTEGRATION_PAYLOAD_TEST_ERROR }); + .catch((error) => { + let message = INTEGRATION_PAYLOAD_TEST_ERROR; + if (error.response?.status === httpStatusCodes.FORBIDDEN) { + message = INTEGRATION_INACTIVE_PAYLOAD_TEST_ERROR; + } + createFlash({ message }); }); }, + saveAndTestAlertPayload(integration, payload) { + return this.updateIntegration(integration, false).then(() => { + this.testAlertPayload(payload); + }); + }, setFormVisibility(visible) { this.formVisible = visible; }, + viewCreatedIntegration() { + this.viewIntegration(this.newIntegration, tabIndices.viewCredentials); + this.showSuccessfulCreateAlert = false; + this.newIntegration = null; + }, }, }; </script> <template> <div> + <gl-alert + v-if="showSuccessfulCreateAlert" + class="gl-mt-n2" + :primary-button-text="$options.i18n.integrationCreated.btnCaption" + :title="$options.i18n.integrationCreated.title" + @primaryAction="viewCreatedIntegration" + @dismiss="showSuccessfulCreateAlert = false" + > + {{ $options.i18n.integrationCreated.successMsg }} + </gl-alert> + <integrations-list :integrations="integrations.list" :loading="loading" @@ -353,11 +388,13 @@ export default { :loading="isUpdating" :can-add-integration="canAddIntegration" :alert-fields="alertFields" + :tab-index="tabIndex" @create-new-integration="createNewIntegration" @update-integration="updateIntegration" @reset-token="resetToken" @clear-current-integration="clearCurrentIntegration" @test-alert-payload="testAlertPayload" + @save-and-test-alert-payload="saveAndTestAlertPayload" /> </div> </template> |