Update empty state to match designs

- replace more information button with link

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

 <script>
 import { mapActions } from 'vuex';
-import { GlAlert, GlEmptyState, GlIcon, GlLink, GlPopover, GlTabs, GlTab } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlEmptyState,
+  GlIcon,
+  GlLink,
+  GlPopover,
+  GlSprintf,
+  GlTabs,
+  GlTab,
+} from '@gitlab/ui';
 import { s__ } from '~/locale';
 import axios from '~/lib/utils/axios_utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -17,6 +26,7 @@ export default {
     GlIcon,
     GlLink,
     GlPopover,
+    GlSprintf,
     GlTabs,
     GlTab,
     Alerts,
@@ -114,7 +124,7 @@ export default {
   ),
   emptyStateDescription: s__(
     `ThreatMonitoring|To view this data, ensure you have configured an environment
-    for this project and that at least one threat monitoring feature is enabled.`,
+    for this project and that at least one threat monitoring feature is enabled. %{linkStart}More information%{linkEnd}`,
   ),
   alertText: s__(
     `ThreatMonitoring|The graph below is an overview of traffic coming to your
@@ -132,11 +142,16 @@ export default {
     v-if="!isSetUpMaybe"
     ref="emptyState"
     :title="s__('ThreatMonitoring|No environments detected')"
-    :description="$options.emptyStateDescription"
     :svg-path="emptyStateSvgPath"
-    :primary-button-link="documentationPath"
-    :primary-button-text="__('More information')"
-  />
+  >
+    <template #description>
+      <gl-sprintf :message="$options.emptyStateDescription">
+        <template #link="{ content }">
+          <gl-link :href="documentationPath" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </template>
+  </gl-empty-state>
 
   <section v-else>
     <gl-alert

ee/changelogs/unreleased/290959-threat-monitoring-empty-state.yml

+---
+title: Update empty state to match designs
+merge_request: 50894
+author:
+type: changed

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

-import { GlAlert } from '@gitlab/ui';
+import { GlAlert, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import ThreatMonitoringAlerts from 'ee/threat_monitoring/components/alerts/alerts.vue';
@@ -65,6 +65,7 @@ describe('ThreatMonitoringApp component', () => {
   const findWafSection = () => wrapper.find({ ref: 'wafSection' });
   const findNetworkPolicySection = () => wrapper.find({ ref: 'networkPolicySection' });
   const findEmptyState = () => wrapper.find({ ref: 'emptyState' });
+  const findEmptyStateMessage = () => wrapper.find(GlSprintf);
   const findNetworkPolicyTab = () => wrapper.find({ ref: 'networkPolicyTab' });
   const findAlertTab = () => wrapper.find('[data-testid="threat-monitoring-alerts-tab"]');
 
@@ -91,9 +92,9 @@ describe('ThreatMonitoringApp component', () => {
       it('shows only the empty state', () => {
         const emptyState = findEmptyState();
         expect(wrapper.element).toBe(emptyState.element);
+        expect(findEmptyStateMessage().exists()).toBe(true);
         expect(emptyState.props()).toMatchObject({
           svgPath: emptyStateSvgPath,
-          primaryButtonLink: documentationPath,
         });
       });
     },

locale/gitlab.pot

@@ -29022,7 +29022,7 @@ msgstr ""
 msgid "ThreatMonitoring|Time"
 msgstr ""
 
-msgid "ThreatMonitoring|To view this data, ensure you have configured an environment for this project and that at least one threat monitoring feature is enabled."
+msgid "ThreatMonitoring|To view this data, ensure you have configured an environment for this project and that at least one threat monitoring feature is enabled. %{linkStart}More information%{linkEnd}"
 msgstr ""
 
 msgid "ThreatMonitoring|Total Packets"