Create tab for threat monitoring alerts

- show empty component
- add tests

ee/app/assets/javascripts/threat_monitoring/components/app.vue

@@ -3,6 +3,7 @@ import { mapActions } from 'vuex';
 import { GlAlert, GlEmptyState, GlIcon, GlLink, GlPopover, GlTabs, GlTab } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import axios from '~/lib/utils/axios_utils';
+import ThreatAlerts from './threat_alerts.vue';
 import ThreatMonitoringFilters from './threat_monitoring_filters.vue';
 import ThreatMonitoringSection from './threat_monitoring_section.vue';
 import NetworkPolicyList from './network_policy_list.vue';
@@ -17,6 +18,7 @@ export default {
     GlPopover,
     GlTabs,
     GlTab,
+    ThreatAlerts,
     ThreatMonitoringFilters,
     ThreatMonitoringSection,
     NetworkPolicyList,
@@ -74,6 +76,11 @@ export default {
       isSetUpMaybe: this.isValidEnvironmentId(this.defaultEnvironmentId),
     };
   },
+  computed: {
+    showAlertsTab() {
+      return gon.features.threatMonitoringAlerts;
+    },
+  },
   created() {
     if (this.isSetUpMaybe) {
       this.setCurrentEnvironmentId(this.defaultEnvironmentId);
@@ -161,6 +168,13 @@ export default {
     </header>
 
     <gl-tabs>
+      <gl-tab
+        v-if="showAlertsTab"
+        :title="s__('ThreatMonitoring|Alerts')"
+        data-testid="threat-monitoring-alerts-tab"
+      >
+        <threat-alerts />
+      </gl-tab>
       <gl-tab ref="networkPolicyTab" :title="s__('ThreatMonitoring|Policies')">
         <network-policy-list
           :documentation-path="documentationPath"

ee/app/assets/javascripts/threat_monitoring/components/threat_alerts.vue

+<script>
+export default {
+  name: 'ThreatAlerts',
+};
+</script>
+
+<template>
+  <div></div>
+</template>

ee/app/controllers/projects/threat_monitoring_controller.rb

@@ -3,6 +3,9 @@
 module Projects
   class ThreatMonitoringController < Projects::ApplicationController
     before_action :authorize_read_threat_monitoring!
+    before_action do
+      push_frontend_feature_flag(:threat_monitoring_alerts, project)
+    end
 
     feature_category :web_firewall
 

ee/spec/frontend/threat_monitoring/components/app_spec.js

 import { GlAlert } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import ThreatMonitoringAlerts from 'ee/threat_monitoring/components/threat_alerts.vue';
 import ThreatMonitoringApp from 'ee/threat_monitoring/components/app.vue';
 import ThreatMonitoringFilters from 'ee/threat_monitoring/components/threat_monitoring_filters.vue';
 import createStore from 'ee/threat_monitoring/store';
@@ -23,6 +24,7 @@ const userCalloutsPath = `${TEST_HOST}/user_callouts`;
 describe('ThreatMonitoringApp component', () => {
   let store;
   let wrapper;
+  window.gon = { features: {} };
 
   const factory = ({ propsData, state, options } = {}) => {
     store = createStore();
@@ -55,13 +57,16 @@ describe('ThreatMonitoringApp component', () => {
   };
 
   const findAlert = () => wrapper.find(GlAlert);
+  const findAlertsView = () => wrapper.find(ThreatMonitoringAlerts);
   const findFilters = () => wrapper.find(ThreatMonitoringFilters);
   const findWafSection = () => wrapper.find({ ref: 'wafSection' });
   const findNetworkPolicySection = () => wrapper.find({ ref: 'networkPolicySection' });
   const findEmptyState = () => wrapper.find({ ref: 'emptyState' });
   const findNetworkPolicyTab = () => wrapper.find({ ref: 'networkPolicyTab' });
+  const findAlertTab = () => wrapper.find('[data-testid="threat-monitoring-alerts-tab"]');
 
   afterEach(() => {
+    window.gon.features = {};
     wrapper.destroy();
     wrapper = null;
   });
@@ -124,6 +129,10 @@ describe('ThreatMonitoringApp component', () => {
       expect(findNetworkPolicyTab().element).toMatchSnapshot();
     });
 
+    it('does not show the alert tab', () => {
+      expect(findAlertTab().exists()).toBe(false);
+    });
+
     describe('dismissing the alert', () => {
       let mockAxios;
 
@@ -162,4 +171,17 @@ describe('ThreatMonitoringApp component', () => {
       expect(findAlert().exists()).toBe(false);
     });
   });
+
+  describe('alerts tab', () => {
+    beforeEach(() => {
+      window.gon.features.threatMonitoringAlerts = true;
+      factory({});
+    });
+    it('shows the alerts tab', () => {
+      expect(findAlertTab().exists()).toBe(true);
+    });
+    it('shows the default alerts component', () => {
+      expect(findAlertsView().exists()).toBe(true);
+    });
+  });
 });

locale/gitlab.pot

@@ -28141,6 +28141,9 @@ msgstr ""
 msgid "Threat Monitoring"
 msgstr ""
 
+msgid "ThreatMonitoring|Alerts"
+msgstr ""
+
 msgid "ThreatMonitoring|All Environments"
 msgstr ""