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>