Merge branch '212444-decouple-security-dashboard' into 'master'

Use the new Security Dashboard Layout

See merge request gitlab-org/gitlab!28106

ee/app/assets/javascripts/security_dashboard/components/group_security_dashboard.vue

 <script>
 import { mapActions } from 'vuex';
 import { GlEmptyState } from '@gitlab/ui';
-import SecurityDashboard from './security_dashboard.vue';
+import SecurityDashboard from './security_dashboard_vuex.vue';
 
 export default {
   name: 'GroupSecurityDashboard',

ee/app/assets/javascripts/security_dashboard/components/instance_security_dashboard.vue

@@ -3,7 +3,7 @@ import { mapActions, mapState } from 'vuex';
 import { GlButton, GlEmptyState, GlLink, GlLoadingIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import ProjectManager from './project_manager.vue';
-import SecurityDashboard from './security_dashboard.vue';
+import SecurityDashboard from './security_dashboard_vuex.vue';
 
 export default {
   name: 'InstanceSecurityDashboard',

ee/app/assets/javascripts/security_dashboard/components/pipeline_security_dashboard.vue

 <script>
 import { mapActions } from 'vuex';
 import { GlEmptyState } from '@gitlab/ui';
-import SecurityDashboard from './security_dashboard.vue';
+import SecurityDashboard from './security_dashboard_vuex.vue';
 
 export default {
   name: 'PipelineSecurityDashboard',

ee/app/assets/javascripts/security_dashboard/components/project_security_dashboard.vue

@@ -5,7 +5,7 @@ import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import SecurityDashboard from './security_dashboard.vue';
+import SecurityDashboard from './security_dashboard_vuex.vue';
 
 export default {
   name: 'ProjectSecurityDashboard',

ee/app/assets/javascripts/security_dashboard/components/security_dashboard.vue → ee/app/assets/javascripts/security_dashboard/components/security_dashboard_vuex.vue

@@ -3,6 +3,7 @@ import { isUndefined } from 'lodash';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import IssueModal from 'ee/vue_shared/security_reports/components/modal.vue';
 import Filters from './filters.vue';
+import SecurityDashboardLayout from './security_dashboard_layout.vue';
 import SecurityDashboardTable from './security_dashboard_table.vue';
 import VulnerabilityChart from './vulnerability_chart.vue';
 import VulnerabilityCountList from './vulnerability_count_list.vue';
@@ -10,10 +11,10 @@ import VulnerabilitySeverity from './vulnerability_severity.vue';
 import LoadingError from './loading_error.vue';
 
 export default {
-  name: 'SecurityDashboard',
   components: {
     Filters,
     IssueModal,
+    SecurityDashboardLayout,
     SecurityDashboardTable,
     VulnerabilityChart,
     VulnerabilityCountList,
@@ -159,29 +160,26 @@ export default {
       :illustrations="loadingErrorIllustrations"
     />
     <template v-else>
-      <vulnerability-count-list v-if="shouldShowCountList" />
+      <security-dashboard-layout>
+        <template #header>
+          <vulnerability-count-list v-if="shouldShowCountList" />
+          <filters />
+        </template>
 
-      <header>
-        <filters />
-      </header>
+        <security-dashboard-table>
+          <template #emptyState>
+            <slot name="emptyState"></slot>
+          </template>
+        </security-dashboard-table>
 
-      <div class="row mt-4">
-        <article class="col" :class="{ 'col-xl-7': !isLockedToProject }">
-          <security-dashboard-table>
-            <template #emptyState>
-              <slot name="emptyState"></slot>
-            </template>
-          </security-dashboard-table>
-        </article>
-
-        <aside v-if="shouldShowAside" class="col-xl-5">
+        <template v-if="shouldShowAside" #aside>
           <vulnerability-chart v-if="shouldShowChart" class="mb-3" />
           <vulnerability-severity
             v-if="shouldShowVulnerabilitySeverities"
             :endpoint="vulnerableProjectsEndpoint"
           />
-        </aside>
-      </div>
+        </template>
+      </security-dashboard-layout>
 
       <issue-modal
         :modal="modal"

ee/spec/frontend/security_dashboard/components/group_security_dashboard_spec.js

@@ -2,7 +2,7 @@ import Vuex from 'vuex';
 import { GlEmptyState } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import GroupSecurityDashboard from 'ee/security_dashboard/components/group_security_dashboard.vue';
-import SecurityDashboard from 'ee/security_dashboard/components/security_dashboard.vue';
+import SecurityDashboard from 'ee/security_dashboard/components/security_dashboard_vuex.vue';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);

ee/spec/frontend/security_dashboard/components/instance_security_dashboard_spec.js

@@ -2,7 +2,7 @@ import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
 import InstanceSecurityDashboard from 'ee/security_dashboard/components/instance_security_dashboard.vue';
-import SecurityDashboard from 'ee/security_dashboard/components/security_dashboard.vue';
+import SecurityDashboard from 'ee/security_dashboard/components/security_dashboard_vuex.vue';
 import ProjectManager from 'ee/security_dashboard/components/project_manager.vue';
 
 const localVue = createLocalVue();

ee/spec/frontend/security_dashboard/components/pipeline_security_dashboard_spec.js

@@ -2,7 +2,7 @@ import Vuex from 'vuex';
 import { GlEmptyState } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import PipelineSecurityDashboard from 'ee/security_dashboard/components/pipeline_security_dashboard.vue';
-import SecurityDashboard from 'ee/security_dashboard/components/security_dashboard.vue';
+import SecurityDashboard from 'ee/security_dashboard/components/security_dashboard_vuex.vue';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);

ee/spec/frontend/security_dashboard/components/security_dashboard_spec.js → ee/spec/frontend/security_dashboard/components/security_dashboard_vuex_spec.js

@@ -2,9 +2,10 @@ import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'helpers/test_constants';
 
-import SecurityDashboard from 'ee/security_dashboard/components/security_dashboard.vue';
+import SecurityDashboard from 'ee/security_dashboard/components/security_dashboard_vuex.vue';
 import Filters from 'ee/security_dashboard/components/filters.vue';
 import SecurityDashboardTable from 'ee/security_dashboard/components/security_dashboard_table.vue';
+import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
 import VulnerabilityChart from 'ee/security_dashboard/components/vulnerability_chart.vue';
 import VulnerabilityCountList from 'ee/security_dashboard/components/vulnerability_count_list.vue';
 import VulnerabilitySeverity from 'ee/security_dashboard/components/vulnerability_severity.vue';
@@ -41,6 +42,9 @@ describe('Security Dashboard component', () => {
     store = createStore();
     wrapper = shallowMount(SecurityDashboard, {
       store,
+      stubs: {
+        SecurityDashboardLayout,
+      },
       methods: {
         lockFilter: lockFilterSpy,
         setPipelineId: setPipelineIdSpy,