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 | 97 |
1 files changed, 53 insertions, 44 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 3917e4c5fdd..902bad780ad 100644 --- a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue +++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlAlert } from '@gitlab/ui'; +import { GlButton, GlAlert, GlTabs, GlTab } 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'; @@ -30,6 +30,7 @@ import { INTEGRATION_INACTIVE_PAYLOAD_TEST_ERROR, DEFAULT_ERROR, } from '../utils/error_messages'; +import AlertsForm from './alerts_form.vue'; import IntegrationsList from './alerts_integrations_list.vue'; import AlertSettingsForm from './alerts_settings_form.vue'; @@ -38,9 +39,12 @@ export default { i18n, components: { IntegrationsList, + AlertsForm, AlertSettingsForm, - GlButton, GlAlert, + GlButton, + GlTabs, + GlTab, }, inject: { projectPath: { @@ -167,7 +171,7 @@ export default { if (testAfterSubmit) { this.viewIntegration(integration, tabIndices.sendTestAlert); } else { - this.clearCurrentIntegration(type); + this.clearCurrentIntegration({ type }); } createFlash({ @@ -347,46 +351,51 @@ export default { </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> + <gl-tabs data-testid="alert-integration-settings"> + <gl-tab :title="$options.i18n.settingsTabs.currentIntegrations"> + <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" - :loading="loading" - @edit-integration="editIntegration" - @delete-integration="deleteIntegration" - /> - <gl-button - v-if="canAddIntegration && !formVisible" - category="secondary" - variant="confirm" - data-testid="add-integration-btn" - class="gl-mt-3" - @click="setFormVisibility(true)" - > - {{ $options.i18n.addNewIntegration }} - </gl-button> - <alert-settings-form - v-if="formVisible" - :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> + <integrations-list + :integrations="integrations" + :loading="loading" + @edit-integration="editIntegration" + @delete-integration="deleteIntegration" + /> + <gl-button + v-if="canAddIntegration && !formVisible" + category="secondary" + variant="confirm" + data-testid="add-integration-btn" + class="gl-mt-3" + @click="setFormVisibility(true)" + > + {{ $options.i18n.addNewIntegration }} + </gl-button> + <alert-settings-form + v-if="formVisible" + :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" + /> + </gl-tab> + <gl-tab :title="$options.i18n.settingsTabs.integrationSettings"> + <alerts-form class="gl-pt-3" data-testid="alert-integration-settings-tab" /> + </gl-tab> + </gl-tabs> </template> |