Merge branch '353431' into 'master'

Update GlAlert in security dashboard table

See merge request gitlab-org/gitlab!82014

ee/app/assets/javascripts/security_dashboard/components/pipeline/security_dashboard_table.vue

 <script>
-import { GlCollapse, GlEmptyState, GlFormCheckbox } from '@gitlab/ui';
+import { GlAlert, GlCollapse, GlEmptyState, GlFormCheckbox } from '@gitlab/ui';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import Pagination from '~/vue_shared/components/pagination_links.vue';
 import SecurityDashboardTableRow from './security_dashboard_table_row.vue';
@@ -8,6 +8,7 @@ import SelectionSummary from './selection_summary_vuex.vue';
 export default {
   name: 'SecurityDashboardTable',
   components: {
+    GlAlert,
     GlCollapse,
     GlEmptyState,
     GlFormCheckbox,
@@ -88,17 +89,13 @@ export default {
       <div class="table-section section-20" role="rowheader"></div>
     </div>
 
-    <div class="flash-container">
-      <div v-if="dashboardListError" class="flash-alert">
-        <div class="flash-text container-fluid container-limited limit-container-width">
-          {{
-            s__(
-              'SecurityReports|Error fetching the vulnerability list. Please check your network connection and try again.',
-            )
-          }}
-        </div>
-      </div>
-    </div>
+    <gl-alert v-if="dashboardListError" variant="danger" :dismissible="false" class="gl-mt-3">
+      {{
+        s__(
+          'SecurityReports|Error fetching the vulnerability list. Please check your network connection and try again.',
+        )
+      }}
+    </gl-alert>
 
     <template v-if="isLoadingVulnerabilities || isDismissingVulnerabilities">
       <security-dashboard-table-row v-for="n in 10" :key="n" :is-loading="true" />

ee/spec/frontend/security_dashboard/components/pipeline/security_dashboard_table_spec.js

-import { GlEmptyState, GlFormCheckbox } from '@gitlab/ui';
+import { GlAlert, GlEmptyState, GlFormCheckbox } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
@@ -33,6 +33,8 @@ describe('Security Dashboard Table', () => {
   });
 
   const findCheckbox = () => wrapper.findComponent(GlFormCheckbox);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
   const findSelectionSummaryCollapse = () => wrapper.findByTestId('selection-summary-collapse');
 
   describe('while loading', () => {
@@ -91,7 +93,7 @@ describe('Security Dashboard Table', () => {
     });
 
     it('should render the empty state', () => {
-      expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
+      expect(findEmptyState().exists()).toBe(true);
     });
   });
 
@@ -101,11 +103,11 @@ describe('Security Dashboard Table', () => {
     });
 
     it('should not render the empty state', () => {
-      expect(wrapper.findComponent(GlEmptyState).exists()).toBe(false);
+      expect(findEmptyState().exists()).toBe(false);
     });
 
     it('should render the error alert', () => {
-      expect(wrapper.find('.flash-alert').exists()).toBe(true);
+      expect(findAlert().exists()).toBe(true);
     });
   });