Hide Request subtitle when Threat Monitoring has no data

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

@@ -101,12 +101,12 @@ export default {
 
 <template>
   <div class="my-3">
-    <h4 class="h4">{{ title }}</h4>
-    <h5 class="h5">{{ subtitle }}</h5>
+    <h4 ref="chartTitle" class="h4">{{ title }}</h4>
 
     <loading-skeleton v-if="isLoading" class="mt-3" />
 
     <template v-else-if="hasHistory">
+      <h5 ref="chartSubtitle" class="h5">{{ subtitle }}</h5>
       <statistics-summary class="mt-3" :data="summary" />
       <statistics-history class="mt-3" :data="chart" :y-legend="yLegend" />
     </template>

ee/changelogs/unreleased/14707-hide-subtitle-for-empty-waf-charts.yml

+---
+title: Hide Request subtitle when Threat Monitoring has no data
+merge_request: 28760
+author:
+type: fixed

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

@@ -55,6 +55,8 @@ describe('ThreatMonitoringSection component', () => {
   const findStatisticsHistory = () => wrapper.find(StatisticsHistory);
   const findStatisticsSummary = () => wrapper.find(StatisticsSummary);
   const findChartEmptyState = () => wrapper.find({ ref: 'chartEmptyState' });
+  const findChartTitle = () => wrapper.find({ ref: 'chartTitle' });
+  const findChartSubtitle = () => wrapper.find({ ref: 'chartSubtitle' });
 
   beforeEach(() => {
     factory({});
@@ -96,6 +98,14 @@ describe('ThreatMonitoringSection component', () => {
     expect(chart.props('yLegend')).toEqual('Requests');
   });
 
+  it('shows the chart title', () => {
+    expect(findChartTitle().exists()).toBe(true);
+  });
+
+  it('shows the chart subtitle', () => {
+    expect(findChartSubtitle().exists()).toBe(true);
+  });
+
   it('does not show the chart empty state', () => {
     expect(findChartEmptyState().exists()).toBe(false);
   });
@@ -116,6 +126,14 @@ describe('ThreatMonitoringSection component', () => {
       expect(findStatisticsHistory().exists()).toBe(false);
     });
 
+    it('shows the chart title', () => {
+      expect(findChartTitle().exists()).toBe(true);
+    });
+
+    it('does not show the chart subtitle', () => {
+      expect(findChartSubtitle().exists()).toBe(false);
+    });
+
     it('does not show the chart empty state', () => {
       expect(findChartEmptyState().exists()).toBe(false);
     });
@@ -143,6 +161,14 @@ describe('ThreatMonitoringSection component', () => {
       expect(findStatisticsHistory().exists()).toBe(false);
     });
 
+    it('shows the chart title', () => {
+      expect(findChartTitle().exists()).toBe(true);
+    });
+
+    it('does not show the chart subtitle', () => {
+      expect(findChartSubtitle().exists()).toBe(false);
+    });
+
     it('shows the chart empty state', () => {
       expect(findChartEmptyState().element).toMatchSnapshot();
     });