Convert Knative failed update alert to use gitlab-ui

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

@@ -7,6 +7,7 @@ import {
   GlSearchBoxByType,
   GlSprintf,
   GlButton,
+  GlAlert,
 } from '@gitlab/ui';
 import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
 import { __, s__ } from '~/locale';
@@ -25,6 +26,7 @@ export default {
     GlDropdownItem,
     GlSearchBoxByType,
     GlSprintf,
+    GlAlert,
   },
   props: {
     knative: {
@@ -106,12 +108,13 @@ export default {
 
 <template>
   <div class="row">
-    <div
+    <gl-alert
       v-if="knative.updateFailed"
-      class="bs-callout bs-callout-danger cluster-application-banner col-12 mt-2 mb-2 js-cluster-knative-domain-name-failure-message"
+      class="gl-mb-5 col-12 js-cluster-knative-domain-name-failure-message"
+      variant="danger"
     >
       {{ s__('ClusterIntegration|Something went wrong while updating Knative domain name.') }}
-    </div>
+    </gl-alert>
 
     <div
       :class="{ 'col-md-6': knativeInstalled, 'col-12': !knativeInstalled }"

app/assets/stylesheets/pages/clusters.scss

@@ -58,22 +58,6 @@
   }
 }
 
-.cluster-application-banner {
-  height: 45px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.cluster-application-banner-close {
-  align-self: flex-start;
-  font-weight: 500;
-  font-size: 20px;
-  color: $orange-500;
-  opacity: 1;
-  margin: $gl-padding-8 14px 0 0;
-}
-
 .cluster-application-description {
   flex: 1;
 }

changelogs/unreleased/242023-knative-alert.yml

+---
+title: Convert knative error alert to glalert
+merge_request: 47840
+author:
+type: changed