Replace bs-callout with GlAlert component

changelogs/unreleased/235471-follow-up-from-improve-productivity-analytics-error-when-query-tak.yml

+---
+title: 'Productivity Analytics: Replace bs-callout with GlAlert component'
+merge_request: 39207
+author:
+type: changed

ee/app/assets/javascripts/analytics/productivity_analytics/components/metric_chart.vue

 <script>
 import { isEmpty } from 'lodash';
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlLoadingIcon, GlAlert } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import httpStatusCodes from '~/lib/utils/http_status';
@@ -11,6 +11,7 @@ export default {
     GlDeprecatedDropdown,
     GlDeprecatedDropdownItem,
     GlLoadingIcon,
+    GlAlert,
     Icon,
   },
   props: {
@@ -88,9 +89,9 @@ export default {
     <h5 v-if="title">{{ title }}</h5>
     <gl-loading-icon v-if="isLoading" size="md" class="my-4 py-4" />
     <template v-else>
-      <div v-if="infoMessage" data-testid="infoMessage" class="bs-callout bs-callout-info">
+      <gl-alert v-if="infoMessage" :dismissible="false">
         {{ infoMessage }}
-      </div>
+      </gl-alert>
       <template v-else>
         <gl-deprecated-dropdown
           v-if="hasMetricTypes"

ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/metric_chart_spec.js.snap

@@ -4,14 +4,19 @@ exports[`MetricChart component template when isLoading is false and chart data i
 <div>
   <!---->
    
-  <div
-    class="bs-callout bs-callout-info"
-    data-testid="infoMessage"
+  <gl-alert-stub
+    dismisslabel="Dismiss"
+    primarybuttonlink=""
+    primarybuttontext=""
+    secondarybuttonlink=""
+    secondarybuttontext=""
+    title=""
+    variant="info"
   >
     
       There is no data available. Please change your selection.
     
-  </div>
+  </gl-alert-stub>
 </div>
 `;
 

ee/spec/frontend/analytics/productivity_analytics/components/metric_chart_spec.js

 import { shallowMount } from '@vue/test-utils';
 import MetricChart from 'ee/analytics/productivity_analytics/components/metric_chart.vue';
-import { GlLoadingIcon, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlLoadingIcon, GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlAlert } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import httpStatusCodes from '~/lib/utils/http_status';
 
@@ -38,7 +38,7 @@ describe('MetricChart component', () => {
   });
 
   const findLoadingIndicator = () => wrapper.find(GlLoadingIcon);
-  const findInfoMessage = () => wrapper.find('[data-testid="infoMessage"]');
+  const findInfoMessage = () => wrapper.find(GlAlert);
   const findMetricDropdown = () => wrapper.find(GlDeprecatedDropdown);
   const findMetricDropdownItems = () => findMetricDropdown().findAll(GlDeprecatedDropdownItem);
   const findChartSlot = () => wrapper.find({ ref: 'chart' });