Use GlAlert instead of a custom alert class

This is part of our pajamas migration. Instead of using a custom
div element with error classes, we prefer using the GlAlert component
in order to increase the consistency across GitLab.

Changelog: changed
EE: true

ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue

 <script>
-import { GlModal } from '@gitlab/ui';
+import { GlModal, GlAlert } from '@gitlab/ui';
 import DismissalCommentBoxToggle from 'ee/vue_shared/security_reports/components/dismissal_comment_box_toggle.vue';
 import DismissalCommentModalFooter from 'ee/vue_shared/security_reports/components/dismissal_comment_modal_footer.vue';
 import DismissalNote from 'ee/vue_shared/security_reports/components/dismissal_note.vue';
@@ -19,6 +19,7 @@ export default {
     DismissalCommentModalFooter,
     IssueNote,
     MergeRequestNote,
+    GlAlert,
     GlModal,
     ModalFooter,
     SolutionCard,
@@ -252,7 +253,9 @@ export default {
         />
       </div>
 
-      <div v-if="modal.error" class="alert alert-danger">{{ modal.error }}</div>
+      <gl-alert v-if="modal.error" variant="danger" :dismissible="false">{{
+        modal.error
+      }}</gl-alert>
     </slot>
     <template #modal-footer>
       <dismissal-comment-modal-footer

ee/spec/frontend/vue_shared/security_reports/components/modal_spec.js

-import { GlModal } from '@gitlab/ui';
+import { GlModal, GlAlert } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import IssueNote from 'ee/vue_shared/security_reports/components/issue_note.vue';
@@ -28,10 +28,25 @@ describe('Security Reports modal', () => {
   };
 
   describe('modal', () => {
+    const findAlert = () => wrapper.findComponent(GlAlert);
+
     it('renders a large modal', () => {
       mountComponent({ modal: createState().modal }, mount);
       expect(modal.props('size')).toBe('lg');
     });
+
+    it('does not render the error message the modal has no error', () => {
+      mountComponent({ modal: createState().modal });
+      expect(findAlert().exists()).toBe(false);
+    });
+
+    it('renders an error message when the modal has an error', () => {
+      const { modal: modalData } = createState();
+      modalData.error = 'Something went wront';
+      mountComponent({ modal: modalData });
+      expect(findAlert().props('variant')).toBe('danger');
+      expect(findAlert().text()).toBe(modalData.error);
+    });
   });
 
   describe('with permissions', () => {