Merge branch '242022-bscallout-to-glalert-applications' into 'master'

Migrate bs-callout to GlAlert in clusters components

See merge request gitlab-org/gitlab!47331

app/assets/javascripts/clusters/components/applications.vue

 <script>
-import { GlLoadingIcon, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlLoadingIcon, GlSprintf, GlLink, GlAlert } from '@gitlab/ui';
 import gitlabLogo from 'images/cluster_app_logos/gitlab.png';
 import helmLogo from 'images/cluster_app_logos/helm.png';
 import jupyterhubLogo from 'images/cluster_app_logos/jupyterhub.png';
@@ -30,6 +30,7 @@ export default {
     CrossplaneProviderStack,
     IngressModsecuritySettings,
     FluentdOutputSettings,
+    GlAlert,
   },
   props: {
     type: {
@@ -293,8 +294,8 @@ export default {
             </p>
           </template>
           <template v-else>
-            <div class="bs-callout bs-callout-info">
-              <strong data-testid="ingressCostWarning">
+            <gl-alert variant="info" :dismissible="false">
+              <span data-testid="ingressCostWarning">
                 <gl-sprintf
                   :message="
                     s__(
@@ -308,8 +309,8 @@ export default {
                     }}</gl-link>
                   </template>
                 </gl-sprintf>
-              </strong>
-            </div>
+              </span>
+            </gl-alert>
           </template>
         </template>
       </application-row>
@@ -572,13 +573,13 @@ export default {
         title-link="https://github.com/knative/docs"
       >
         <template #description>
-          <p v-if="!rbac" class="rbac-notice bs-callout bs-callout-info">
+          <gl-alert v-if="!rbac" variant="info" class="rbac-notice gl-my-3" :dismissible="false">
             {{
               s__(`ClusterIntegration|You must have an RBAC-enabled cluster
             to install Knative.`)
             }}
             <gl-link :href="helpPath" target="_blank">{{ __('More information') }}</gl-link>
-          </p>
+          </gl-alert>
           <p>
             {{
               s__(`ClusterIntegration|Knative extends Kubernetes to provide

changelogs/unreleased/242022-bscallout-to-glalert-applications.yml

+---
+title: Replaces elements with the bs-callout class with gl-alert vue component
+merge_request: 47331
+author: Gary Bell @garybell
+type: other

spec/frontend/clusters/components/__snapshots__/applications_spec.js.snap

@@ -55,7 +55,7 @@ exports[`Applications Crossplane application shows the correct description 1`] =
 `;
 
 exports[`Applications Ingress application shows the correct warning message 1`] = `
-<strong
+<span
   data-testid="ingressCostWarning"
 >
   Installing Ingress may incur additional costs. Learn more about 
@@ -68,7 +68,7 @@ exports[`Applications Ingress application shows the correct warning message 1`]
     pricing
   </a>
   .
-</strong>
+</span>
 `;
 
 exports[`Applications Knative application shows the correct description 1`] = `