1 files changed, 63 insertions, 10 deletions

diff --git a/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue b/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue
index 5725d0f8d6a..53956fcb4b2 100644
--- a/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue
@@ -1,16 +1,29 @@
 <script>
 import { GlTab, GlTabs } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { trackIncidentDetailsViewsOptions } from '~/incidents/constants';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
 import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import DescriptionComponent from '../description.vue';
 import getAlert from './graphql/queries/get_alert.graphql';
 import HighlightBar from './highlight_bar.vue';
 import TimelineTab from './timeline_events_tab.vue';
 
+export const incidentTabsI18n = Object.freeze({
+  summaryTitle: s__('Incident|Summary'),
+  metricsTitle: s__('Incident|Metrics'),
+  alertsTitle: s__('Incident|Alert details'),
+  timelineTitle: s__('Incident|Timeline'),
+});
+
+export const TAB_NAMES = Object.freeze({
+  SUMMARY: '',
+  ALERTS: 'alerts',
+  METRICS: 'metrics',
+  TIMELINE: 'timeline',
+});
+
 export default {
   components: {
     AlertDetailsTable,
@@ -22,8 +35,8 @@ export default {
     IncidentMetricTab: () =>
       import('ee_component/issues/show/components/incidents/incident_metric_tab.vue'),
   },
-  mixins: [glFeatureFlagsMixin()],
-  inject: ['fullPath', 'iid'],
+  inject: ['fullPath', 'iid', 'uploadMetricsFeatureAvailable'],
+  i18n: incidentTabsI18n,
   apollo: {
     alert: {
       query: getAlert,
@@ -37,7 +50,7 @@ export default {
         return data?.project?.issue?.alertManagementAlert;
       },
       error() {
-        createFlash({
+        createAlert({
           message: s__('Incident|There was an issue loading alert data. Please try again.'),
         });
       },
@@ -46,12 +59,44 @@ export default {
   data() {
     return {
       alert: null,
+      activeTabIndex: 0,
     };
   },
   computed: {
     loading() {
       return this.$apollo.queries.alert.loading;
     },
+    tabMapping() {
+      const availableTabs = [TAB_NAMES.SUMMARY];
+
+      if (this.uploadMetricsFeatureAvailable) {
+        availableTabs.push(TAB_NAMES.METRICS);
+      }
+      if (this.alert) {
+        availableTabs.push(TAB_NAMES.ALERTS);
+      }
+
+      availableTabs.push(TAB_NAMES.TIMELINE);
+
+      const tabNamesToIndex = {};
+      const tabIndexToName = {};
+
+      availableTabs.forEach((item, index) => {
+        tabNamesToIndex[item] = index;
+        tabIndexToName[index] = item;
+      });
+
+      return { tabNamesToIndex, tabIndexToName };
+    },
+    currentTabIndex: {
+      get() {
+        return this.activeTabIndex;
+      },
+      set(index) {
+        this.handleTabChange(index);
+        this.activeTabIndex = index;
+      },
+    },
   },
   mounted() {
     this.trackPageViews();
@@ -91,25 +136,33 @@ export default {
 <template>
   <div>
     <gl-tabs
+      v-model="currentTabIndex"
       content-class="gl-reset-line-height"
       class="gl-mt-n3"
       data-testid="incident-tabs"
-      @input="handleTabChange"
     >
-      <gl-tab :title="s__('Incident|Summary')">
+      <gl-tab :title="$options.i18n.summaryTitle" data-testid="summary-tab">
         <highlight-bar :alert="alert" />
         <description-component v-bind="$attrs" v-on="$listeners" />
       </gl-tab>
-      <incident-metric-tab />
+      <gl-tab
+        v-if="uploadMetricsFeatureAvailable"
+        :title="$options.i18n.metricsTitle"
+        data-testid="metrics-tab"
+      >
+        <incident-metric-tab />
+      </gl-tab>
       <gl-tab
         v-if="alert"
         class="alert-management-details"
-        :title="s__('Incident|Alert details')"
+        :title="$options.i18n.alertsTitle"
         data-testid="alert-details-tab"
       >
         <alert-details-table :alert="alert" :loading="loading" />
       </gl-tab>
-      <timeline-tab />
+      <gl-tab :title="$options.i18n.timelineTitle" data-testid="timeline-tab">
+        <timeline-tab />
+      </gl-tab>
     </gl-tabs>
   </div>
 </template>