Migrate analytics bs-callout to gl-alert

ee/app/assets/javascripts/analytics/cycle_analytics/components/duration_chart.vue

 <script>
 import { mapActions, mapState, mapGetters } from 'vuex';
+import { GlAlert } from '@gitlab/ui';
 import { __ } from '~/locale';
 import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue';
 import { dateFormats } from '../../shared/constants';
@@ -9,6 +10,7 @@ import StageDropdownFilter from './stage_dropdown_filter.vue';
 export default {
   name: 'DurationChart',
   components: {
+    GlAlert,
     Scatterplot,
     StageDropdownFilter,
     ChartSkeletonLoader,
@@ -58,8 +60,8 @@ export default {
       :tooltip-date-format="$options.durationChartTooltipDateFormat"
       :scatter-data="durationChartPlottableData"
     />
-    <div v-else class="bs-callout bs-callout-info">
+    <gl-alert v-else variant="info" :dismissible="false" class="gl-mt-3">
       {{ error }}
-    </div>
+    </gl-alert>
   </div>
 </template>

ee/app/assets/javascripts/analytics/cycle_analytics/components/type_of_work_charts.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
+import { GlAlert } from '@gitlab/ui';
 import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue';
 import TasksByTypeChart from './tasks_by_type/tasks_by_type_chart.vue';
 import TasksByTypeFilters from './tasks_by_type/tasks_by_type_filters.vue';
@@ -9,7 +10,7 @@ import { TASKS_BY_TYPE_SUBJECT_ISSUE } from '../constants';
 
 export default {
   name: 'TypeOfWorkCharts',
-  components: { ChartSkeletonLoader, TasksByTypeChart, TasksByTypeFilters },
+  components: { ChartSkeletonLoader, GlAlert, TasksByTypeChart, TasksByTypeFilters },
   computed: {
     ...mapState('typeOfWork', [
       'isLoadingTasksByTypeChart',
@@ -88,9 +89,9 @@ export default {
         :group-by="tasksByTypeChartData.groupBy"
         :series-names="tasksByTypeChartData.seriesNames"
       />
-      <div v-else class="bs-callout bs-callout-info">
-        <p>{{ error }}</p>
-      </div>
+      <gl-alert v-else variant="info" :dismissible="false" class="gl-mt-3">
+        {{ error }}
+      </gl-alert>
     </div>
   </div>
 </template>

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

@@ -8,6 +8,7 @@ import {
   GlButton,
   GlTooltipDirective,
   GlIcon,
+  GlAlert,
 } from '@gitlab/ui';
 import dateFormat from 'dateformat';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
@@ -29,6 +30,7 @@ export default {
     GlColumnChart,
     GlButton,
     GlIcon,
+    GlAlert,
     MetricChart,
     Scatterplot,
     MergeRequestTable,
@@ -344,9 +346,9 @@ export default {
             @columnMetricChange="setColumnMetric"
             @pageChange="setPage"
           />
-          <div v-if="showMergeRequestTableNoData" class="js-no-data bs-callout bs-callout-info">
+          <gl-alert v-if="showMergeRequestTableNoData" variant="info" :dismissable="false">
             {{ __('There is no data available. Please change your selection.') }}
-          </div>
+          </gl-alert>
         </div>
       </template>
     </template>

ee/changelogs/unreleased/242032-analytics-alert-migration.yml

+---
+title: Migrate analytics bs-callout to gl-alert
+merge_request: 40788
+author:
+type: deprecated

ee/spec/frontend/analytics/cycle_analytics/components/duration_chart_spec.js

 import Vuex from 'vuex';
-import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
 import { GlDropdownItem } from '@gitlab/ui';
+import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
 import Scatterplot from 'ee/analytics/shared/components/scatterplot.vue';
 import DurationChart from 'ee/analytics/cycle_analytics/components/duration_chart.vue';
 import StageDropdownFilter from 'ee/analytics/cycle_analytics/components/stage_dropdown_filter.vue';

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

@@ -8,7 +8,14 @@ import MergeRequestTable from 'ee/analytics/productivity_analytics/components/mr
 import { getStoreConfig } from 'ee/analytics/productivity_analytics/store';
 import { chartKeys } from 'ee/analytics/productivity_analytics/constants';
 import { TEST_HOST } from 'helpers/test_constants';
-import { GlEmptyState, GlLoadingIcon, GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui';
+import {
+  GlEmptyState,
+  GlLoadingIcon,
+  GlDropdown,
+  GlDropdownItem,
+  GlButton,
+  GlAlert,
+} from '@gitlab/ui';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import UrlSyncMixin from 'ee/analytics/shared/mixins/url_sync_mixin';
 import MetricChart from 'ee/analytics/productivity_analytics/components/metric_chart.vue';
@@ -427,7 +434,7 @@ describe('ProductivityApp component', () => {
                   it('doesn’t render a "no data" message', () => {
                     expect(
                       findMrTableSection()
-                        .find('.js-no-data')
+                        .find(GlAlert)
                         .exists(),
                     ).toBe(false);
                   });
@@ -478,7 +485,7 @@ describe('ProductivityApp component', () => {
                   it('renders a "no data" message', () => {
                     expect(
                       findMrTableSection()
-                        .find('.js-no-data')
+                        .find(GlAlert)
                         .exists(),
                     ).toBe(true);
                   });