Merge branch...

Merge branch '235471-follow-up-from-improve-productivity-analytics-error-when-query-takes-too-long-to-calculate' into 'master'

Productivity Analytics: Replace bs-callout with GlAlert component

Closes #235471

See merge request gitlab-org/gitlab!39207

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,7 @@ 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">
-        {{ infoMessage }}
-      </div>
+      <gl-alert v-if="infoMessage" :dismissible="false">{{ infoMessage }}</gl-alert>
       <template v-else>
         <gl-deprecated-dropdown
           v-if="hasMetricTypes"

ee/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/spec/frontend/analytics/productivity_analytics/components/__snapshots__/metric_chart_spec.js.snap

@@ -4,14 +4,17 @@ 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' });
@@ -101,7 +101,7 @@ describe('MetricChart component', () => {
 
         describe('and there is no error', () => {
           it('shows a "no data" info text', () => {
-            expect(findInfoMessage().text()).toContain(
+            expect(findInfoMessage().text()).toBe(
               'There is no data available. Please change your selection.',
             );
           });
@@ -111,7 +111,7 @@ describe('MetricChart component', () => {
           it('shows a "too much data" info text', () => {
             factory({ isLoading, chartData: [], errorCode: httpStatusCodes.INTERNAL_SERVER_ERROR });
 
-            expect(findInfoMessage().text()).toContain(
+            expect(findInfoMessage().text()).toBe(
               'There is too much data to calculate. Please change your selection.',
             );
           });