Merge branch '242024-migrate-bs-callout-ancestor-notice' into 'master'

Migrate the bs-callout class to gl-alert in ancestor notice

See merge request gitlab-org/gitlab!51209

app/assets/javascripts/clusters_list/components/ancestor_notice.vue

 <script>
-import { GlLink, GlSprintf } from '@gitlab/ui';
+import { GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
 import { mapState } from 'vuex';
 
 export default {
   components: {
     GlLink,
     GlSprintf,
+    GlAlert,
   },
   computed: {
     ...mapState(['ancestorHelperPath', 'hasAncestorClusters']),
@@ -14,8 +15,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="hasAncestorClusters" class="bs-callout bs-callout-info">
-    <p>
+  <gl-alert v-if="hasAncestorClusters" variant="info" :dismissible="false" class="gl-my-4">
     <gl-sprintf
       :message="
         s__(
@@ -29,6 +29,5 @@ export default {
         </gl-link>
       </template>
     </gl-sprintf>
-    </p>
-  </div>
+  </gl-alert>
 </template>

spec/frontend/clusters_list/components/ancestor_notice_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlLink, GlSprintf } from '@gitlab/ui';
+import { GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
 import AncestorNotice from '~/clusters_list/components/ancestor_notice.vue';
 import ClusterStore from '~/clusters_list/store';
 
@@ -9,7 +9,7 @@ describe('ClustersAncestorNotice', () => {
 
   const createWrapper = () => {
     store = ClusterStore({ ancestorHelperPath: '/some/ancestor/path' });
-    wrapper = shallowMount(AncestorNotice, { store, stubs: { GlSprintf } });
+    wrapper = shallowMount(AncestorNotice, { store, stubs: { GlSprintf, GlAlert } });
     return wrapper.vm.$nextTick();
   };