diff options
Diffstat (limited to 'app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue')
-rw-r--r-- | app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue b/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue new file mode 100644 index 00000000000..0623c275c5a --- /dev/null +++ b/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue @@ -0,0 +1,61 @@ +<script> +import { GlButton, GlTabs, GlTab } from '@gitlab/ui'; +import AlertsSettingsForm from './alerts_form.vue'; +import PagerDutySettingsForm from './pagerduty_form.vue'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { INTEGRATION_TABS_CONFIG, I18N_INTEGRATION_TABS } from '../constants'; + +export default { + components: { + GlButton, + GlTabs, + GlTab, + AlertsSettingsForm, + PagerDutySettingsForm, + }, + mixins: [glFeatureFlagMixin()], + tabs: INTEGRATION_TABS_CONFIG, + i18n: I18N_INTEGRATION_TABS, + methods: { + isFeatureFlagEnabled(tab) { + if (tab.featureFlag) { + return this.glFeatures[tab.featureFlag]; + } + return true; + }, + }, +}; +</script> + +<template> + <section + id="incident-management-settings" + data-qa-selector="incidents_settings_content" + class="settings no-animate qa-incident-management-settings" + > + <div class="settings-header"> + <h3 ref="sectionHeader" class="h4"> + {{ $options.i18n.headerText }} + </h3> + <gl-button ref="toggleBtn" class="js-settings-toggle">{{ + $options.i18n.expandBtnLabel + }}</gl-button> + <p ref="sectionSubHeader"> + {{ $options.i18n.subHeaderText }} + </p> + </div> + + <div class="settings-content"> + <gl-tabs> + <gl-tab + v-for="(tab, index) in $options.tabs" + v-if="tab.active && isFeatureFlagEnabled(tab)" + :key="`${tab.title}_${index}`" + :title="tab.title" + > + <component :is="tab.component" class="gl-pt-3" :data-testid="`${tab.component}-tab`" /> + </gl-tab> + </gl-tabs> + </div> + </section> +</template> |