diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-14 21:09:49 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-14 21:09:49 +0300 |
commit | c083e823cea8e0036866d0286773c5f211a53dfe (patch) | |
tree | 52336e854a6ab90c0a6b4b8f1b0c14c52cf58136 /app/assets/javascripts/alerts_settings | |
parent | 59239af94f0482707d0195097e4b6ce994840346 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/alerts_settings')
4 files changed, 334 insertions, 317 deletions
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue index 3860831169e..38b861a430a 100644 --- a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue +++ b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue @@ -36,9 +36,6 @@ export const i18n = { }, }; -const bodyTrClass = - 'gl-border-1 gl-border-t-solid gl-border-b-solid gl-border-gray-100 gl-hover-cursor-pointer gl-hover-bg-blue-50 gl-hover-border-blue-200'; - export default { i18n, typeSet, @@ -85,20 +82,23 @@ export default { { key: 'active', label: __('Status'), + tdClass: 'gl-vertical-align-middle!', }, { key: 'name', label: s__('AlertsIntegrations|Integration Name'), + tdClass: 'gl-vertical-align-middle!', }, { key: 'type', label: __('Type'), + tdClass: 'gl-vertical-align-middle!', formatter: (value) => (value === typeSet.prometheus ? capitalize(value) : value), }, { key: 'actions', - thClass: `gl-text-center`, - tdClass: `gl-text-center`, + thClass: 'gl-text-right', + tdClass: 'gl-text-right gl-vertical-align-middle!', label: __('Actions'), }, ], @@ -127,12 +127,6 @@ export default { this.observer.observe(this.$el); }, methods: { - tbodyTrClass(item) { - return { - [bodyTrClass]: this.integrations?.length, - 'gl-bg-blue-50': (item !== null && item.id) === this.currentIntegration?.id, - }; - }, trackPageViews() { const { category, action } = trackAlertIntegrationsViewsOptions; Tracking.event(category, action); @@ -160,7 +154,6 @@ export default { :fields="$options.fields" :busy="loading" stacked="md" - :tbody-tr-class="tbodyTrClass" show-empty > <template #cell(active)="{ item }"> @@ -187,7 +180,7 @@ export default { </template> <template #cell(actions)="{ item }"> - <gl-button-group class="gl-ml-3"> + <gl-button-group class="gl-ml-3 gl-mt-n2 gl-mb-n2"> <gl-button icon="settings" :aria-label="$options.i18n.editIntegration" @@ -204,17 +197,14 @@ export default { </template> <template #table-busy> - <gl-loading-icon size="lg" color="dark" class="mt-3" /> + <gl-loading-icon size="sm" /> </template> <template #empty> - <div - class="gl-border-t-solid gl-border-b-solid gl-border-1 gl-border gl-border-gray-100 mt-n3 gl-px-5" - > - <p class="gl-text-gray-400 gl-py-3 gl-my-3">{{ $options.i18n.emptyState }}</p> - </div> + <p class="gl-new-card-empty gl-text-center gl-mb-0">{{ $options.i18n.emptyState }}</p> </template> </gl-table> + <gl-modal modal-id="deleteIntegration" :title="$options.i18n.deleteIntegration" diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue index f831208d9f8..56740e436ca 100644 --- a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue +++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue @@ -387,306 +387,309 @@ export default { </script> <template> - <gl-form class="gl-mt-6" @submit.prevent="submit" @reset.prevent="reset"> - <gl-tabs v-model="activeTabIndex"> - <gl-tab :title="$options.i18n.integrationTabs.configureDetails" class="gl-mt-3"> - <gl-form-group - v-if="isCreating" - id="integration-type" - :label=" - getLabelWithStepNumber( - $options.integrationSteps.selectType, - $options.i18n.integrationFormSteps.selectType.label, - ) - " - label-for="integration-type" - > - <gl-form-select - v-model="integrationForm.type" - :disabled="isSelectDisabled" - class="gl-max-w-full" - data-qa-selector="integration_type_dropdown" - :options="integrationTypesOptions" - /> - - <alert-settings-form-help-block - v-if="!canAddIntegration" - disabled="true" - class="gl-display-inline-block gl-my-4" - :message="$options.i18n.integrationFormSteps.selectType.enterprise" - :link="pricingLink" - data-testid="multi-integrations-not-supported" - /> - </gl-form-group> - <div class="gl-mt-3"> + <div class="gl-new-card-add-form gl-py-0 gl-m-3"> + <gl-form @submit.prevent="submit" @reset.prevent="reset"> + <gl-tabs v-model="activeTabIndex"> + <gl-tab :title="$options.i18n.integrationTabs.configureDetails" class="gl-mt-3"> <gl-form-group - v-if="isHttp" + v-if="isCreating" + id="integration-type" :label=" getLabelWithStepNumber( - $options.integrationSteps.nameIntegration, - $options.i18n.integrationFormSteps.nameIntegration.label, + $options.integrationSteps.selectType, + $options.i18n.integrationFormSteps.selectType.label, ) " - label-for="name-integration" - :invalid-feedback="$options.i18n.integrationFormSteps.nameIntegration.error" - :state="validationState.name" + label-for="integration-type" > - <gl-form-input - id="name-integration" - ref="integrationName" - v-model="integrationForm.name" - type="text" - :placeholder="$options.i18n.integrationFormSteps.nameIntegration.placeholder" - data-qa-selector="integration_name_field" - @input="validateName" + <gl-form-select + v-model="integrationForm.type" + :disabled="isSelectDisabled" + class="gl-max-w-full" + data-qa-selector="integration_type_dropdown" + :options="integrationTypesOptions" + autofocus /> - </gl-form-group> - <gl-form-group - v-if="!isNone" - :label=" - getLabelWithStepNumber( - isHttp - ? $options.integrationSteps.enableHttpIntegration - : $options.integrationSteps.enablePrometheusIntegration, - $options.i18n.integrationFormSteps.enableIntegration.label, - ) - " - > - <span>{{ $options.i18n.integrationFormSteps.enableIntegration.help }}</span> - - <gl-toggle - id="enable-integration" - v-model="integrationForm.active" - :is-loading="loading" - :label="$options.i18n.integrationFormSteps.nameIntegration.activeToggle" - data-qa-selector="active_toggle_container" - class="gl-mt-4 gl-font-weight-normal" + <alert-settings-form-help-block + v-if="!canAddIntegration" + disabled="true" + class="gl-display-inline-block gl-my-4" + :message="$options.i18n.integrationFormSteps.selectType.enterprise" + :link="pricingLink" + data-testid="multi-integrations-not-supported" /> </gl-form-group> - <template v-if="showMappingBuilder"> + <div class="gl-mt-3"> <gl-form-group - data-testid="sample-payload-section" + v-if="isHttp" :label=" getLabelWithStepNumber( - $options.integrationSteps.customizeMapping, - $options.i18n.integrationFormSteps.mapFields.label, + $options.integrationSteps.nameIntegration, + $options.i18n.integrationFormSteps.nameIntegration.label, ) " - label-for="sample-payload" - class="gl-mb-0!" - :invalid-feedback="samplePayload.error" + label-for="name-integration" + :invalid-feedback="$options.i18n.integrationFormSteps.nameIntegration.error" + :state="validationState.name" > - <span>{{ $options.i18n.integrationFormSteps.mapFields.help }}</span> - - <gl-form-textarea - id="sample-payload" - v-model="samplePayload.json" - :disabled="canEditPayload" - :state="isSampePayloadValid" - :placeholder="$options.i18n.integrationFormSteps.mapFields.placeholder" - class="gl-my-3" - :debounce="$options.JSON_VALIDATE_DELAY" - rows="6" - max-rows="10" - @input="validateJson" + <gl-form-input + id="name-integration" + ref="integrationName" + v-model="integrationForm.name" + type="text" + :placeholder="$options.i18n.integrationFormSteps.nameIntegration.placeholder" + data-qa-selector="integration_name_field" + @input="validateName" /> </gl-form-group> + <gl-form-group + v-if="!isNone" + :label=" + getLabelWithStepNumber( + isHttp + ? $options.integrationSteps.enableHttpIntegration + : $options.integrationSteps.enablePrometheusIntegration, + $options.i18n.integrationFormSteps.enableIntegration.label, + ) + " + > + <span>{{ $options.i18n.integrationFormSteps.enableIntegration.help }}</span> + + <gl-toggle + id="enable-integration" + v-model="integrationForm.active" + :is-loading="loading" + :label="$options.i18n.integrationFormSteps.nameIntegration.activeToggle" + data-qa-selector="active_toggle_container" + class="gl-mt-4 gl-font-weight-normal" + /> + </gl-form-group> + <template v-if="showMappingBuilder"> + <gl-form-group + data-testid="sample-payload-section" + :label=" + getLabelWithStepNumber( + $options.integrationSteps.customizeMapping, + $options.i18n.integrationFormSteps.mapFields.label, + ) + " + label-for="sample-payload" + class="gl-mb-0!" + :invalid-feedback="samplePayload.error" + > + <span>{{ $options.i18n.integrationFormSteps.mapFields.help }}</span> + + <gl-form-textarea + id="sample-payload" + v-model="samplePayload.json" + :disabled="canEditPayload" + :state="isSampePayloadValid" + :placeholder="$options.i18n.integrationFormSteps.mapFields.placeholder" + class="gl-my-3" + :debounce="$options.JSON_VALIDATE_DELAY" + rows="6" + max-rows="10" + @input="validateJson" + /> + </gl-form-group> + + <gl-button + v-if="canEditPayload" + v-gl-modal.resetPayloadModal + data-testid="payload-action-btn" + :disabled="!integrationForm.active" + class="gl-mt-3" + > + {{ $options.i18n.integrationFormSteps.mapFields.editPayload }} + </gl-button> + + <gl-button + v-else + data-testid="payload-action-btn" + :class="{ 'gl-mt-3': samplePayload.error }" + :disabled="!canParseSamplePayload" + :loading="samplePayload.loading" + @click="parseSamplePayload" + > + {{ $options.i18n.integrationFormSteps.mapFields.parsePayload }} + </gl-button> + <gl-modal + modal-id="resetPayloadModal" + :title="$options.i18n.integrationFormSteps.mapFields.resetHeader" + :ok-title="$options.i18n.integrationFormSteps.mapFields.resetOk" + ok-variant="danger" + @ok="resetPayloadAndMappingConfirmed = true" + > + {{ $options.i18n.integrationFormSteps.mapFields.resetBody }} + </gl-modal> + + <div class="gl-mt-5"> + <span>{{ $options.i18n.integrationFormSteps.mapFields.mapIntro }}</span> + <mapping-builder + :parsed-payload="parsedPayload" + :saved-mapping="mapping" + :alert-fields="alertFields" + @onMappingUpdate="updateMapping" + /> + </div> + </template> + </div> + <div class="gl-display-flex gl-justify-content-start gl-py-3"> <gl-button - v-if="canEditPayload" - v-gl-modal.resetPayloadModal - data-testid="payload-action-btn" - :disabled="!integrationForm.active" - class="gl-mt-3" + :disabled="!canSubmitForm" + variant="confirm" + class="js-no-auto-disable" + data-testid="integration-form-submit" + @click="submit(false)" > - {{ $options.i18n.integrationFormSteps.mapFields.editPayload }} + {{ $options.i18n.saveIntegration }} </gl-button> <gl-button - v-else - data-testid="payload-action-btn" - :class="{ 'gl-mt-3': samplePayload.error }" - :disabled="!canParseSamplePayload" - :loading="samplePayload.loading" - @click="parseSamplePayload" + :disabled="!canSubmitForm" + variant="confirm" + category="secondary" + class="gl-ml-3 js-no-auto-disable" + data-qa-selector="save_and_create_alert_button" + @click="submit(true)" > - {{ $options.i18n.integrationFormSteps.mapFields.parsePayload }} + {{ $options.i18n.saveAndTestIntegration }} </gl-button> - <gl-modal - modal-id="resetPayloadModal" - :title="$options.i18n.integrationFormSteps.mapFields.resetHeader" - :ok-title="$options.i18n.integrationFormSteps.mapFields.resetOk" - ok-variant="danger" - @ok="resetPayloadAndMappingConfirmed = true" - > - {{ $options.i18n.integrationFormSteps.mapFields.resetBody }} - </gl-modal> - - <div class="gl-mt-5"> - <span>{{ $options.i18n.integrationFormSteps.mapFields.mapIntro }}</span> - <mapping-builder - :parsed-payload="parsedPayload" - :saved-mapping="mapping" - :alert-fields="alertFields" - @onMappingUpdate="updateMapping" - /> - </div> - </template> - </div> - <div class="gl-display-flex gl-justify-content-start gl-py-3"> - <gl-button - :disabled="!canSubmitForm" - variant="confirm" - class="js-no-auto-disable" - data-testid="integration-form-submit" - @click="submit(false)" - > - {{ $options.i18n.saveIntegration }} - </gl-button> - - <gl-button - :disabled="!canSubmitForm" - variant="confirm" - category="secondary" - class="gl-ml-3 js-no-auto-disable" - data-qa-selector="save_and_create_alert_button" - @click="submit(true)" - > - {{ $options.i18n.saveAndTestIntegration }} - </gl-button> - - <gl-button type="reset" class="gl-ml-3 js-no-auto-disable">{{ - $options.i18n.cancelAndClose - }}</gl-button> - </div> - </gl-tab> - - <gl-tab - :title="$options.i18n.integrationTabs.viewCredentials" - :disabled="isCreating" - class="gl-mt-3" - > - <alert-settings-form-help-block - :message="viewCredentialsHelpMsg" - :link="$options.incidentManagementDocsLink" - /> - - <gl-form-group id="integration-webhook"> - <div class="gl-my-4"> - <span class="gl-font-weight-bold"> - {{ $options.i18n.integrationFormSteps.setupCredentials.webhookUrl }} - </span> - - <gl-form-input-group id="url" readonly :value="integrationForm.url"> - <template #append> - <clipboard-button - :text="integrationForm.url || ''" - :title="$options.i18n.copy" - class="gl-m-0!" - /> - </template> - </gl-form-input-group> - </div> - - <div class="gl-my-4"> - <span class="gl-font-weight-bold"> - {{ $options.i18n.integrationFormSteps.setupCredentials.authorizationKey }} - </span> - <gl-form-input-group - id="authorization-key" - class="gl-mb-3" - readonly - :value="integrationForm.token" - > - <template #append> - <clipboard-button - :text="integrationForm.token || ''" - :title="$options.i18n.copy" - class="gl-m-0!" - /> - </template> - </gl-form-input-group> + <gl-button type="reset" class="gl-ml-3 js-no-auto-disable">{{ + $options.i18n.cancelAndClose + }}</gl-button> </div> - </gl-form-group> - - <div class="gl-display-flex gl-justify-content-start gl-py-3"> - <gl-button v-gl-modal.authKeyModal variant="danger"> - {{ $options.i18n.integrationFormSteps.setupCredentials.reset }} - </gl-button> - - <gl-button type="reset" class="gl-ml-3 js-no-auto-disable"> - {{ $options.i18n.cancelAndClose }} - </gl-button> - </div> - - <gl-modal - modal-id="authKeyModal" - :title="$options.i18n.integrationFormSteps.setupCredentials.reset" - :ok-title="$options.i18n.integrationFormSteps.setupCredentials.reset" - ok-variant="danger" - @ok="resetAuthKey" + </gl-tab> + + <gl-tab + :title="$options.i18n.integrationTabs.viewCredentials" + :disabled="isCreating" + class="gl-mt-3" > - {{ $options.i18n.integrationFormSteps.restKeyInfo.label }} - </gl-modal> - </gl-tab> - - <gl-tab - :title="$options.i18n.integrationTabs.sendTestAlert" - :disabled="isCreating" - class="gl-mt-3" - > - <gl-form-group id="test-integration" :invalid-feedback="testPayload.error"> <alert-settings-form-help-block - :message="$options.i18n.integrationFormSteps.testPayload.help" - :link="alertsUsageUrl" + :message="viewCredentialsHelpMsg" + :link="$options.incidentManagementDocsLink" /> - <gl-form-textarea - id="test-payload" - v-model="testPayload.json" - :state="isTestPayloadValid" - :placeholder="$options.i18n.integrationFormSteps.testPayload.placeholder" - class="gl-my-3" - :debounce="$options.JSON_VALIDATE_DELAY" - rows="6" - max-rows="10" - data-qa-selector="test_payload_field" - @input="validateJson(false)" - /> - </gl-form-group> - <div class="gl-display-flex gl-justify-content-start gl-py-3"> - <gl-button - v-gl-modal="testAlertModal" - :disabled="!isTestPayloadValid" - :loading="loading" - data-testid="send-test-alert" - variant="confirm" - class="js-no-auto-disable" - data-qa-selector="send_test_alert_button" - @click="isFormDirty ? null : sendTestAlert()" + <gl-form-group id="integration-webhook"> + <div class="gl-my-4"> + <span class="gl-font-weight-bold"> + {{ $options.i18n.integrationFormSteps.setupCredentials.webhookUrl }} + </span> + + <gl-form-input-group id="url" readonly :value="integrationForm.url"> + <template #append> + <clipboard-button + :text="integrationForm.url || ''" + :title="$options.i18n.copy" + class="gl-m-0!" + /> + </template> + </gl-form-input-group> + </div> + + <div class="gl-my-4"> + <span class="gl-font-weight-bold"> + {{ $options.i18n.integrationFormSteps.setupCredentials.authorizationKey }} + </span> + + <gl-form-input-group + id="authorization-key" + class="gl-mb-3" + readonly + :value="integrationForm.token" + > + <template #append> + <clipboard-button + :text="integrationForm.token || ''" + :title="$options.i18n.copy" + class="gl-m-0!" + /> + </template> + </gl-form-input-group> + </div> + </gl-form-group> + + <div class="gl-display-flex gl-justify-content-start gl-py-3"> + <gl-button v-gl-modal.authKeyModal variant="danger"> + {{ $options.i18n.integrationFormSteps.setupCredentials.reset }} + </gl-button> + + <gl-button type="reset" class="gl-ml-3 js-no-auto-disable"> + {{ $options.i18n.cancelAndClose }} + </gl-button> + </div> + + <gl-modal + modal-id="authKeyModal" + :title="$options.i18n.integrationFormSteps.setupCredentials.reset" + :ok-title="$options.i18n.integrationFormSteps.setupCredentials.reset" + ok-variant="danger" + @ok="resetAuthKey" > - {{ $options.i18n.send }} - </gl-button> - - <gl-button type="reset" class="gl-ml-3 js-no-auto-disable"> - {{ $options.i18n.cancelAndClose }} - </gl-button> - </div> - - <gl-modal - :modal-id="$options.testAlertModalId" - :title="$options.i18n.integrationFormSteps.testPayload.modalTitle" - :action-primary="$options.primaryProps" - :action-secondary="$options.secondaryProps" - :action-cancel="$options.cancelProps" - @primary="saveAndSendTestAlert" - @secondary="sendTestAlert" + {{ $options.i18n.integrationFormSteps.restKeyInfo.label }} + </gl-modal> + </gl-tab> + + <gl-tab + :title="$options.i18n.integrationTabs.sendTestAlert" + :disabled="isCreating" + class="gl-mt-3" > - {{ $options.i18n.integrationFormSteps.testPayload.modalBody }} - </gl-modal> - </gl-tab> - </gl-tabs> - </gl-form> + <gl-form-group id="test-integration" :invalid-feedback="testPayload.error"> + <alert-settings-form-help-block + :message="$options.i18n.integrationFormSteps.testPayload.help" + :link="alertsUsageUrl" + /> + + <gl-form-textarea + id="test-payload" + v-model="testPayload.json" + :state="isTestPayloadValid" + :placeholder="$options.i18n.integrationFormSteps.testPayload.placeholder" + class="gl-my-3" + :debounce="$options.JSON_VALIDATE_DELAY" + rows="6" + max-rows="10" + data-qa-selector="test_payload_field" + @input="validateJson(false)" + /> + </gl-form-group> + <div class="gl-display-flex gl-justify-content-start gl-py-3"> + <gl-button + v-gl-modal="testAlertModal" + :disabled="!isTestPayloadValid" + :loading="loading" + data-testid="send-test-alert" + variant="confirm" + class="js-no-auto-disable" + data-qa-selector="send_test_alert_button" + @click="isFormDirty ? null : sendTestAlert()" + > + {{ $options.i18n.send }} + </gl-button> + + <gl-button type="reset" class="gl-ml-3 js-no-auto-disable"> + {{ $options.i18n.cancelAndClose }} + </gl-button> + </div> + + <gl-modal + :modal-id="$options.testAlertModalId" + :title="$options.i18n.integrationFormSteps.testPayload.modalTitle" + :action-primary="$options.primaryProps" + :action-secondary="$options.secondaryProps" + :action-cancel="$options.cancelProps" + @primary="saveAndSendTestAlert" + @secondary="sendTestAlert" + > + {{ $options.i18n.integrationFormSteps.testPayload.modalBody }} + </gl-modal> + </gl-tab> + </gl-tabs> + </gl-form> + </div> </template> 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 bc9fe9543bd..e4fc37f9760 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, GlTabs, GlTab } from '@gitlab/ui'; +import { GlAlert, GlButton, GlCard, GlTabs, GlTab, GlIcon } 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 { createAlert, VARIANT_SUCCESS } from '~/alert'; @@ -43,8 +43,10 @@ export default { AlertSettingsForm, GlAlert, GlButton, + GlCard, GlTabs, GlTab, + GlIcon, }, inject: { projectPath: { @@ -364,36 +366,55 @@ export default { {{ $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" - data-qa-selector="add_integration_button" - class="gl-mt-3" - @click="setFormVisibility(true)" + <gl-card + class="gl-new-card gl-mt-2" + header-class="gl-new-card-header" + body-class="gl-new-card-body gl-px-0 gl-overflow-hidden" > - {{ $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" - /> + <template #header> + <div class="gl-new-card-title-wrapper"> + <h5 class="gl-new-card-title"> + {{ $options.i18n.card.title }} + <span class="gl-new-card-count"> + <gl-icon name="warning" class="gl-mr-2" /> + {{ integrations.length }} + </span> + </h5> + </div> + <div class="gl-new-card-actions"> + <gl-button + v-if="canAddIntegration && !formVisible" + size="small" + data-testid="add-integration-btn" + data-qa-selector="add_integration_button" + @click="setFormVisibility(true)" + > + {{ $options.i18n.addNewIntegration }} + </gl-button> + </div> + </template> + + <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" + /> + + <integrations-list + :integrations="integrations" + :loading="loading" + @edit-integration="editIntegration" + @delete-integration="deleteIntegration" + /> + </gl-card> </gl-tab> <gl-tab :title="$options.i18n.settingsTabs.integrationSettings"> <alerts-form class="gl-pt-3" /> diff --git a/app/assets/javascripts/alerts_settings/constants.js b/app/assets/javascripts/alerts_settings/constants.js index 218b09cb1b6..a5f18fda542 100644 --- a/app/assets/javascripts/alerts_settings/constants.js +++ b/app/assets/javascripts/alerts_settings/constants.js @@ -1,6 +1,9 @@ import { s__, __ } from '~/locale'; export const i18n = { + card: { + title: s__('AlertSettings|Active alerts'), + }, integrationTabs: { configureDetails: s__('AlertSettings|Configure details'), viewCredentials: s__('AlertSettings|View credentials'), |