Merge branch 'migrate-terminal-alert' into 'master'

Update terminal empty state alert to gl component

See merge request gitlab-org/gitlab!47340

app/assets/javascripts/ide/components/terminal/empty_state.vue

 <script>
-/* eslint-disable vue/no-v-html */
-import { GlLoadingIcon, GlButton } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton, GlAlert, GlSafeHtmlDirective } from '@gitlab/ui';
 
 export default {
   components: {
     GlLoadingIcon,
     GlButton,
+    GlAlert,
+  },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
   },
   props: {
     isLoading: {
@@ -59,7 +62,9 @@ export default {
           {{ __('Start Web Terminal') }}
         </gl-button>
       </p>
-      <div v-if="!isValid && message" class="bs-callout gl-text-left" v-html="message"></div>
+      <gl-alert v-if="!isValid && message" variant="tip" :dismissible="false">
+        <span v-safe-html="message"></span>
+      </gl-alert>
       <p v-else>
         <a
           v-if="helpPath"

changelogs/unreleased/migrate-terminal-alert.yml

+---
+title: Update terminal empty state alert to gl component
+merge_request: 47340
+author:
+type: other

spec/frontend/ide/components/terminal/empty_state_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlLoadingIcon, GlButton } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton, GlAlert } from '@gitlab/ui';
 import { TEST_HOST } from 'spec/test_constants';
 import TerminalEmptyState from '~/ide/components/terminal/empty_state.vue';
 
@@ -101,6 +101,6 @@ describe('IDE TerminalEmptyState', () => {
     });
 
     expect(wrapper.find(GlButton).props('disabled')).toBe(true);
-    expect(wrapper.find('.bs-callout').element.innerHTML).toBe(TEST_HTML_MESSAGE);
+    expect(wrapper.find(GlAlert).html()).toContain(TEST_HTML_MESSAGE);
   });
 });