Merge branch '284894-refactor-folder-structure' into 'master'

Reorganise folder structure for security dashboards

See merge request gitlab-org/gitlab!63092

ee/app/assets/javascripts/pages/groups/security/dashboard/show/index.js

-import initSecurityCharts from 'ee/security_dashboard/security_charts_init';
+import initSecurityDashboard from 'ee/security_dashboard/security_dashboard_init';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 
-initSecurityCharts(document.getElementById('js-group-security-dashboard'), DASHBOARD_TYPES.GROUP);
+initSecurityDashboard(
+  document.getElementById('js-group-security-dashboard'),
+  DASHBOARD_TYPES.GROUP,
+);

ee/app/assets/javascripts/pages/projects/security/dashboard/index/index.js

-import initSecurityCharts from 'ee/security_dashboard/security_charts_init';
+import initSecurityDashboard from 'ee/security_dashboard/security_dashboard_init';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 import { waitForCSSLoaded } from '~/helpers/startup_css_helper';
 
 waitForCSSLoaded(() => {
-  initSecurityCharts(
+  initSecurityDashboard(
     document.getElementById('js-project-security-dashboard'),
     DASHBOARD_TYPES.PROJECT,
   );

ee/app/assets/javascripts/pages/security/dashboard/show/index.js

-import initSecurityCharts from 'ee/security_dashboard/security_charts_init';
+import initSecurityDashboard from 'ee/security_dashboard/security_dashboard_init';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 
-initSecurityCharts(document.getElementById('js-security'), DASHBOARD_TYPES.INSTANCE);
+initSecurityDashboard(document.getElementById('js-security'), DASHBOARD_TYPES.INSTANCE);

ee/app/assets/javascripts/security_dashboard/components/group_security_charts.vue → ee/app/assets/javascripts/security_dashboard/components/group/group_security_dashboard.vue

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
+import groupProjectsQuery from 'ee/security_dashboard/graphql/queries/group_projects.query.graphql';
+import vulnerabilityGradesQuery from 'ee/security_dashboard/graphql/queries/group_vulnerability_grades.query.graphql';
+import vulnerabilityHistoryQuery from 'ee/security_dashboard/graphql/queries/group_vulnerability_history.query.graphql';
+import { PROJECT_LOADING_ERROR_MESSAGE } from 'ee/security_dashboard/helpers';
 import createFlash from '~/flash';
-import groupProjectsQuery from '../graphql/queries/group_projects.query.graphql';
-import vulnerabilityGradesQuery from '../graphql/queries/group_vulnerability_grades.query.graphql';
-import vulnerabilityHistoryQuery from '../graphql/queries/group_vulnerability_history.query.graphql';
-import { PROJECT_LOADING_ERROR_MESSAGE } from '../helpers';
-import DashboardNotConfigured from './empty_states/group_dashboard_not_configured.vue';
-import VulnerabilityChart from './first_class_vulnerability_chart.vue';
-import VulnerabilitySeverities from './first_class_vulnerability_severities.vue';
-import SecurityChartsLayout from './security_charts_layout.vue';
+import DashboardNotConfigured from '../empty_states/group_dashboard_not_configured.vue';
+import VulnerabilitySeverities from '../first_class_vulnerability_severities.vue';
+import SecurityDashboardLayout from '../shared/security_dashboard_layout.vue';
+import VulnerabilitiesOverTimeChart from '../shared/vulnerabilities_over_time_chart.vue';
 
 export default {
   components: {
     GlLoadingIcon,
     DashboardNotConfigured,
-    SecurityChartsLayout,
+    SecurityDashboardLayout,
     VulnerabilitySeverities,
-    VulnerabilityChart,
+    VulnerabilitiesOverTimeChart,
   },
   inject: ['groupFullPath'],
   apollo: {
@@ -55,16 +55,16 @@ export default {
 </script>
 
 <template>
-  <security-charts-layout>
+  <security-dashboard-layout>
     <template v-if="shouldShowEmptyState" #empty-state>
       <dashboard-not-configured />
     </template>
     <template v-else-if="shouldShowCharts" #default>
-      <vulnerability-chart :query="vulnerabilityHistoryQuery" />
+      <vulnerabilities-over-time-chart :query="vulnerabilityHistoryQuery" />
       <vulnerability-severities :query="vulnerabilityGradesQuery" />
     </template>
     <template v-else #loading>
       <gl-loading-icon size="lg" class="gl-mt-6" />
     </template>
-  </security-charts-layout>
+  </security-dashboard-layout>
 </template>

ee/app/assets/javascripts/security_dashboard/components/first_class_group_security_dashboard_vulnerabilities.vue → ee/app/assets/javascripts/security_dashboard/components/group/group_vulnerabilities.vue

 <script>
 import { GlAlert, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
 import produce from 'immer';
-import vulnerabilitiesQuery from '../graphql/queries/group_vulnerabilities.query.graphql';
-import { preparePageInfo } from '../helpers';
-import { VULNERABILITIES_PER_PAGE } from '../store/constants';
-import VulnerabilityList from './vulnerability_list.vue';
+import vulnerabilitiesQuery from 'ee/security_dashboard/graphql/queries/group_vulnerabilities.query.graphql';
+import { preparePageInfo } from 'ee/security_dashboard/helpers';
+import { VULNERABILITIES_PER_PAGE } from 'ee/security_dashboard/store/constants';
+import VulnerabilityList from '../vulnerability_list.vue';
 
 export default {
   components: {

ee/app/assets/javascripts/security_dashboard/components/instance_security_charts.vue → ee/app/assets/javascripts/security_dashboard/components/instance/instance_security_dashboard.vue

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
+import instanceProjectsQuery from 'ee/security_dashboard/graphql/queries/instance_projects.query.graphql';
+import vulnerabilityGradesQuery from 'ee/security_dashboard/graphql/queries/instance_vulnerability_grades.query.graphql';
+import vulnerabilityHistoryQuery from 'ee/security_dashboard/graphql/queries/instance_vulnerability_history.query.graphql';
+import { PROJECT_LOADING_ERROR_MESSAGE } from 'ee/security_dashboard/helpers';
 import createFlash from '~/flash';
-import instanceProjectsQuery from '../graphql/queries/instance_projects.query.graphql';
-import vulnerabilityGradesQuery from '../graphql/queries/instance_vulnerability_grades.query.graphql';
-import vulnerabilityHistoryQuery from '../graphql/queries/instance_vulnerability_history.query.graphql';
-import { PROJECT_LOADING_ERROR_MESSAGE } from '../helpers';
-import DashboardNotConfigured from './empty_states/instance_dashboard_not_configured.vue';
-import VulnerabilityChart from './first_class_vulnerability_chart.vue';
-import VulnerabilitySeverities from './first_class_vulnerability_severities.vue';
-import SecurityChartsLayout from './security_charts_layout.vue';
+import DashboardNotConfigured from '../empty_states/instance_dashboard_not_configured.vue';
+import VulnerabilitySeverities from '../first_class_vulnerability_severities.vue';
+import SecurityDashboardLayout from '../shared/security_dashboard_layout.vue';
+import VulnerabilitiesOverTimeChart from '../shared/vulnerabilities_over_time_chart.vue';
 
 export default {
   components: {
     GlLoadingIcon,
     DashboardNotConfigured,
-    SecurityChartsLayout,
+    SecurityDashboardLayout,
     VulnerabilitySeverities,
-    VulnerabilityChart,
+    VulnerabilitiesOverTimeChart,
   },
   apollo: {
     projects: {
@@ -51,16 +51,16 @@ export default {
 </script>
 
 <template>
-  <security-charts-layout>
+  <security-dashboard-layout>
     <template v-if="shouldShowEmptyState" #empty-state>
       <dashboard-not-configured />
     </template>
     <template v-else-if="shouldShowCharts" #default>
-      <vulnerability-chart :query="vulnerabilityHistoryQuery" />
+      <vulnerabilities-over-time-chart :query="vulnerabilityHistoryQuery" />
       <vulnerability-severities :query="vulnerabilityGradesQuery" />
     </template>
     <template v-else #loading>
       <gl-loading-icon size="lg" class="gl-mt-6" />
     </template>
-  </security-charts-layout>
+  </security-dashboard-layout>
 </template>

ee/app/assets/javascripts/security_dashboard/components/first_class_instance_security_dashboard_vulnerabilities.vue → ee/app/assets/javascripts/security_dashboard/components/instance/instance_vulnerabilities.vue

 <script>
 import { GlAlert, GlIntersectionObserver, GlLoadingIcon } from '@gitlab/ui';
 import produce from 'immer';
+import vulnerabilitiesQuery from 'ee/security_dashboard/graphql/queries/instance_vulnerabilities.query.graphql';
+import { preparePageInfo } from 'ee/security_dashboard/helpers';
+import { VULNERABILITIES_PER_PAGE } from 'ee/security_dashboard/store/constants';
 import { fetchPolicies } from '~/lib/graphql';
-import vulnerabilitiesQuery from '../graphql/queries/instance_vulnerabilities.query.graphql';
-import { preparePageInfo } from '../helpers';
-import { VULNERABILITIES_PER_PAGE } from '../store/constants';
-import VulnerabilityList from './vulnerability_list.vue';
+import VulnerabilityList from '../vulnerability_list.vue';
 
 export default {
   components: {

ee/app/assets/javascripts/security_dashboard/components/project_security_charts.vue → ee/app/assets/javascripts/security_dashboard/components/project/project_security_dashboard.vue

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import { GlLineChart } from '@gitlab/ui/dist/charts';
+import projectsHistoryQuery from 'ee/security_dashboard/graphql/queries/project_vulnerabilities_by_day_and_count.query.graphql';
+import { PROJECT_LOADING_ERROR_MESSAGE } from 'ee/security_dashboard/helpers';
 import createFlash from '~/flash';
 import { formatDate, getDateInPast } from '~/lib/utils/datetime_utility';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import { s__, __ } from '~/locale';
-import projectsHistoryQuery from '../graphql/queries/project_vulnerabilities_by_day_and_count.query.graphql';
-import { PROJECT_LOADING_ERROR_MESSAGE } from '../helpers';
-import DashboardNotConfigured from './empty_states/reports_not_configured.vue';
-import SecurityChartsLayout from './security_charts_layout.vue';
+import DashboardNotConfigured from '../empty_states/reports_not_configured.vue';
+import SecurityDashboardLayout from '../shared/security_dashboard_layout.vue';
 
 const CHART_DEFAULT_DAYS = 30;
 const MAX_DAYS = 100;
@@ -25,7 +25,7 @@ const SEVERITIES = [
 export default {
   components: {
     DashboardNotConfigured,
-    SecurityChartsLayout,
+    SecurityDashboardLayout,
     GlLoadingIcon,
     GlLineChart,
   },
@@ -174,7 +174,7 @@ export default {
 </script>
 
 <template>
-  <security-charts-layout ref="layout">
+  <security-dashboard-layout ref="layout">
     <template v-if="shouldShowEmptyState" #empty-state>
       <dashboard-not-configured />
     </template>
@@ -190,5 +190,5 @@ export default {
     <template v-else #loading>
       <gl-loading-icon size="lg" class="gl-mt-6" />
     </template>
-  </security-charts-layout>
+  </security-dashboard-layout>
 </template>

ee/app/assets/javascripts/security_dashboard/components/project_vulnerabilities.vue → ee/app/assets/javascripts/security_dashboard/components/project/project_vulnerabilities.vue

@@ -3,18 +3,18 @@ import { GlAlert, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
 import produce from 'immer';
 import { difference } from 'lodash';
 import { Portal } from 'portal-vue';
+import securityScannersQuery from 'ee/security_dashboard/graphql/queries/project_security_scanners.query.graphql';
+import vulnerabilitiesQuery from 'ee/security_dashboard/graphql/queries/project_vulnerabilities.query.graphql';
+import { preparePageInfo } from 'ee/security_dashboard/helpers';
+import { VULNERABILITIES_PER_PAGE } from 'ee/security_dashboard/store/constants';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
-import securityScannersQuery from '../graphql/queries/project_security_scanners.query.graphql';
-import vulnerabilitiesQuery from '../graphql/queries/project_vulnerabilities.query.graphql';
-import { preparePageInfo } from '../helpers';
-import { VULNERABILITIES_PER_PAGE } from '../store/constants';
+import VulnerabilityList from '../vulnerability_list.vue';
 import SecurityScannerAlert from './security_scanner_alert.vue';
-import VulnerabilityList from './vulnerability_list.vue';
 
 export default {
-  name: 'ProjectVulnerabilitiesApp',
+  name: 'ProjectVulnerabilities',
   components: {
     GlAlert,
     GlLoadingIcon,

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

@@ -6,14 +6,14 @@ import { securityReportTypeEnumToReportType } from 'ee/vue_shared/security_repor
 import { vulnerabilityModalMixin } from 'ee/vue_shared/security_reports/mixins/vulnerability_modal_mixin';
 import Filters from './filters.vue';
 import LoadingError from './loading_error.vue';
-import SecurityDashboardLayout from './security_dashboard_layout.vue';
 import SecurityDashboardTable from './security_dashboard_table.vue';
+import VulnerabilityReportLayout from './vulnerability_report_layout.vue';
 
 export default {
   components: {
     Filters,
     IssueModal,
-    SecurityDashboardLayout,
+    VulnerabilityReportLayout,
     SecurityDashboardTable,
     LoadingError,
     PipelineArtifactDownload,
@@ -109,7 +109,7 @@ export default {
       :illustrations="loadingErrorIllustrations"
     />
     <template v-else>
-      <security-dashboard-layout>
+      <vulnerability-report-layout>
         <template #header>
           <filters>
             <template v-if="shouldShowDownloadGuidance" #buttons>
@@ -132,7 +132,7 @@ export default {
             <slot name="empty-state"></slot>
           </template>
         </security-dashboard-table>
-      </security-dashboard-layout>
+      </vulnerability-report-layout>
 
       <issue-modal
         :modal="modal"

ee/app/assets/javascripts/security_dashboard/components/survey_request_banner.vue → ee/app/assets/javascripts/security_dashboard/components/shared/survey_request_banner.vue

 <script>
 import { GlButton, GlBanner, GlSprintf } from '@gitlab/ui';
+import {
+  SURVEY_BANNER_LOCAL_STORAGE_KEY,
+  SURVEY_BANNER_CURRENT_ID,
+} from 'ee/security_dashboard/constants';
 import { s__, __ } from '~/locale';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import showToast from '~/vue_shared/plugins/global_toast';
-import { SURVEY_BANNER_LOCAL_STORAGE_KEY, SURVEY_BANNER_CURRENT_ID } from '../constants';
 
 const SURVEY_LINK = 'https://gitlab.fra1.qualtrics.com/jfe/form/SV_7UMsVhPbjmwCp1k';
 const DAYS_TO_ASK_LATER = 7;

ee/app/assets/javascripts/security_dashboard/components/first_class_vulnerability_chart.vue → ee/app/assets/javascripts/security_dashboard/components/shared/vulnerabilities_over_time_chart.vue

 <script>
 import { GlTooltipDirective, GlTable, GlLoadingIcon } from '@gitlab/ui';
 import { GlSparklineChart } from '@gitlab/ui/dist/charts';
+import { SEVERITY_LEVELS, DAYS } from 'ee/security_dashboard/store/constants';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
 import { firstAndLastY } from '~/lib/utils/chart_utils';
 import {
@@ -10,8 +11,7 @@ import {
 } from '~/lib/utils/datetime_utility';
 import { formattedChangeInPercent } from '~/lib/utils/number_utils';
 import { s__, sprintf } from '~/locale';
-import { SEVERITY_LEVELS, DAYS } from '../store/constants';
-import ChartButtons from './vulnerability_chart_buttons.vue';
+import ChartButtons from '../vulnerability_chart_buttons.vue';
 
 const ISO_DATE = 'isoDate';
 const TH_CLASS = 'gl-bg-white!';

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

@@ -3,7 +3,6 @@ import { GlLoadingIcon } from '@gitlab/ui';
 import Cookies from 'js-cookie';
 import { PortalTarget } from 'portal-vue';
 import Filters from 'ee/security_dashboard/components/first_class_vulnerability_filters.vue';
-import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 import { s__ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -14,18 +13,19 @@ import CsvExportButton from './csv_export_button.vue';
 import DashboardNotConfiguredGroup from './empty_states/group_dashboard_not_configured.vue';
 import DashboardNotConfiguredInstance from './empty_states/instance_dashboard_not_configured.vue';
 import DashboardNotConfiguredProject from './empty_states/reports_not_configured.vue';
-import GroupVulnerabilities from './first_class_group_security_dashboard_vulnerabilities.vue';
-import InstanceVulnerabilities from './first_class_instance_security_dashboard_vulnerabilities.vue';
+import GroupVulnerabilities from './group/group_vulnerabilities.vue';
+import InstanceVulnerabilities from './instance/instance_vulnerabilities.vue';
 import PipelineFindings from './pipeline_findings.vue';
+import ProjectVulnerabilities from './project/project_vulnerabilities.vue';
 import ProjectPipelineStatus from './project_pipeline_status.vue';
-import ProjectVulnerabilities from './project_vulnerabilities.vue';
-import SurveyRequestBanner from './survey_request_banner.vue';
+import SurveyRequestBanner from './shared/survey_request_banner.vue';
 import VulnerabilitiesCountList from './vulnerability_count_list.vue';
+import VulnerabilityReportLayout from './vulnerability_report_layout.vue';
 
 export default {
   components: {
     AutoFixUserCallout,
-    SecurityDashboardLayout,
+    VulnerabilityReportLayout,
     GroupVulnerabilities,
     InstanceVulnerabilities,
     ProjectVulnerabilities,
@@ -145,7 +145,7 @@ export default {
         :help-page-path="autoFixDocumentation"
         @close="handleAutoFixUserCalloutClose"
       />
-      <security-dashboard-layout>
+      <vulnerability-report-layout>
         <template v-if="!isPipeline" #header>
           <survey-request-banner class="gl-mt-5" />
           <header class="gl-my-6 gl-display-flex gl-align-items-center">
@@ -164,7 +164,7 @@ export default {
         <instance-vulnerabilities v-else-if="isInstance" :filters="filters" />
         <project-vulnerabilities v-else-if="isProject" :filters="filters" />
         <pipeline-findings v-else-if="isPipeline" :filters="filters" />
-      </security-dashboard-layout>
+      </vulnerability-report-layout>
     </template>
   </div>
 </template>

ee/app/assets/javascripts/security_dashboard/security_charts_init.js → ee/app/assets/javascripts/security_dashboard/security_dashboard_init.js

 import Vue from 'vue';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import GroupSecurityCharts from './components/group_security_charts.vue';
-import InstanceSecurityCharts from './components/instance_security_charts.vue';
-import ProjectSecurityCharts from './components/project_security_charts.vue';
+import GroupSecurityCharts from './components/group/group_security_dashboard.vue';
+import InstanceSecurityCharts from './components/instance/instance_security_dashboard.vue';
+import ProjectSecurityCharts from './components/project/project_security_dashboard.vue';
 import UnavailableState from './components/unavailable_state.vue';
 import apolloProvider from './graphql/provider';
 import createRouter from './router';

ee/spec/frontend/security_dashboard/components/empty_states/__snapshots__/group_dashboard_not_configured_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`first class group security dashboard empty state matches snapshot 1`] = `
+exports[`Group Security Dashboard Empty State matches snapshot 1`] = `
 "<gl-empty-state-stub title=\\"Monitor vulnerabilities in your group\\" svgpath=\\"/placeholder.svg\\" description=\\"Manage and track vulnerabilities identified in projects within your group. Vulnerabilities in projects are shown here when security testing is configured.\\">
   <gl-button-stub category=\\"primary\\" variant=\\"default\\" size=\\"medium\\" icon=\\"\\" buttontextclasses=\\"\\" href=\\"/path/to/dashboard/documentation\\">Learn more</gl-button-stub>
 </gl-empty-state-stub>"

ee/spec/frontend/security_dashboard/components/empty_states/__snapshots__/instance_dashboard_not_configured_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`first class instance security dashboard empty state matches snapshot 1`] = `"<gl-empty-state-stub title=\\"Monitor vulnerabilities in all of your projects\\" svgpath=\\"/placeholder.svg\\" description=\\"Manage and track vulnerabilities identified in your selected projects. Vulnerabilities for selected projects with security testing configured are shown here.\\" primarybuttonlink=\\"/path/to/dashboard/settings\\" primarybuttontext=\\"Add projects\\" secondarybuttonlink=\\"/path/to/dashboard/documentation\\" secondarybuttontext=\\"Learn more\\"></gl-empty-state-stub>"`;
+exports[`Instance Security Dashboard Empty State matches snapshot 1`] = `"<gl-empty-state-stub title=\\"Monitor vulnerabilities in all of your projects\\" svgpath=\\"/placeholder.svg\\" description=\\"Manage and track vulnerabilities identified in your selected projects. Vulnerabilities for selected projects with security testing configured are shown here.\\" primarybuttonlink=\\"/path/to/dashboard/settings\\" primarybuttontext=\\"Add projects\\" secondarybuttonlink=\\"/path/to/dashboard/documentation\\" secondarybuttontext=\\"Learn more\\"></gl-empty-state-stub>"`;

ee/spec/frontend/security_dashboard/components/empty_states/group_dashboard_not_configured_spec.js

 import { shallowMount } from '@vue/test-utils';
 import DashboardNotConfigured from 'ee/security_dashboard/components/empty_states/group_dashboard_not_configured.vue';
 
-describe('first class group security dashboard empty state', () => {
+describe('Group Security Dashboard Empty State', () => {
   let wrapper;
   const dashboardDocumentation = '/path/to/dashboard/documentation';
   const emptyStateSvgPath = '/placeholder.svg';

ee/spec/frontend/security_dashboard/components/empty_states/instance_dashboard_not_configured_spec.js

 import { shallowMount } from '@vue/test-utils';
 import DashboardNotConfigured from 'ee/security_dashboard/components/empty_states/instance_dashboard_not_configured.vue';
 
-describe('first class instance security dashboard empty state', () => {
+describe('Instance Security Dashboard Empty State', () => {
   let wrapper;
   const instanceDashboardSettingsPath = '/path/to/dashboard/settings';
   const dashboardDocumentation = '/path/to/dashboard/documentation';

ee/spec/frontend/security_dashboard/components/group_security_charts_spec.js → ee/spec/frontend/security_dashboard/components/group/group_security_dashboard_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import DashboardNotConfigured from 'ee/security_dashboard/components/empty_states/group_dashboard_not_configured.vue';
-import VulnerabilityChart from 'ee/security_dashboard/components/first_class_vulnerability_chart.vue';
 import VulnerabilitySeverities from 'ee/security_dashboard/components/first_class_vulnerability_severities.vue';
-import GroupSecurityCharts from 'ee/security_dashboard/components/group_security_charts.vue';
-import SecurityChartsLayout from 'ee/security_dashboard/components/security_charts_layout.vue';
+import GroupSecurityDashboard from 'ee/security_dashboard/components/group/group_security_dashboard.vue';
+import SecurityDashboardLayout from 'ee/security_dashboard/components/shared/security_dashboard_layout.vue';
+import VulnerabilitiesOverTimeChart from 'ee/security_dashboard/components/shared/vulnerabilities_over_time_chart.vue';
 import vulnerabilityGradesQuery from 'ee/security_dashboard/graphql/queries/group_vulnerability_grades.query.graphql';
 import vulnerabilityHistoryQuery from 'ee/security_dashboard/graphql/queries/group_vulnerability_history.query.graphql';
 import { TEST_HOST } from 'helpers/test_constants';
@@ -19,19 +19,19 @@ jest.mock(
   }),
 );
 
-describe('Group Security Charts component', () => {
+describe('Group Security Dashboard component', () => {
   let wrapper;
 
   const groupFullPath = `${TEST_HOST}/group/5`;
 
-  const findSecurityChartsLayoutComponent = () => wrapper.find(SecurityChartsLayout);
+  const findSecurityChartsLayoutComponent = () => wrapper.find(SecurityDashboardLayout);
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
-  const findVulnerabilityChart = () => wrapper.find(VulnerabilityChart);
+  const findVulnerabilitiesOverTimeChart = () => wrapper.find(VulnerabilitiesOverTimeChart);
   const findVulnerabilitySeverities = () => wrapper.find(VulnerabilitySeverities);
   const findDashboardNotConfigured = () => wrapper.find(DashboardNotConfigured);
 
   const createWrapper = ({ loading = false } = {}) => {
-    wrapper = shallowMount(GroupSecurityCharts, {
+    wrapper = shallowMount(GroupSecurityDashboard, {
       mocks: {
         $apollo: {
           queries: {
@@ -43,7 +43,7 @@ describe('Group Security Charts component', () => {
       },
       provide: { groupFullPath },
       stubs: {
-        SecurityChartsLayout,
+        SecurityDashboardLayout,
       },
     });
   };
@@ -59,13 +59,13 @@ describe('Group Security Charts component', () => {
     const securityChartsLayout = findSecurityChartsLayoutComponent();
     const dashboardNotConfigured = findDashboardNotConfigured();
     const loadingIcon = findLoadingIcon();
-    const vulnerabilityChart = findVulnerabilityChart();
+    const vulnerabilitiesOverTimeChart = findVulnerabilitiesOverTimeChart();
     const vulnerabilitySeverities = findVulnerabilitySeverities();
 
     expect(securityChartsLayout.exists()).toBe(true);
     expect(dashboardNotConfigured.exists()).toBe(false);
     expect(loadingIcon.exists()).toBe(true);
-    expect(vulnerabilityChart.exists()).toBe(false);
+    expect(vulnerabilitiesOverTimeChart.exists()).toBe(false);
     expect(vulnerabilitySeverities.exists()).toBe(false);
   });
 
@@ -75,13 +75,13 @@ describe('Group Security Charts component', () => {
     const securityChartsLayout = findSecurityChartsLayoutComponent();
     const dashboardNotConfigured = findDashboardNotConfigured();
     const loadingIcon = findLoadingIcon();
-    const vulnerabilityChart = findVulnerabilityChart();
+    const vulnerabilitiesOverTimeChart = findVulnerabilitiesOverTimeChart();
     const vulnerabilitySeverities = findVulnerabilitySeverities();
 
     expect(securityChartsLayout.exists()).toBe(true);
     expect(dashboardNotConfigured.exists()).toBe(true);
     expect(loadingIcon.exists()).toBe(false);
-    expect(vulnerabilityChart.exists()).toBe(false);
+    expect(vulnerabilitiesOverTimeChart.exists()).toBe(false);
     expect(vulnerabilitySeverities.exists()).toBe(false);
   });
 
@@ -93,14 +93,14 @@ describe('Group Security Charts component', () => {
     const securityChartsLayout = findSecurityChartsLayoutComponent();
     const dashboardNotConfigured = findDashboardNotConfigured();
     const loadingIcon = findLoadingIcon();
-    const vulnerabilityChart = findVulnerabilityChart();
+    const vulnerabilitiesOverTimeChart = findVulnerabilitiesOverTimeChart();
     const vulnerabilitySeverities = findVulnerabilitySeverities();
 
     expect(securityChartsLayout.exists()).toBe(true);
     expect(dashboardNotConfigured.exists()).toBe(false);
     expect(loadingIcon.exists()).toBe(false);
-    expect(vulnerabilityChart.exists()).toBe(true);
-    expect(vulnerabilityChart.props()).toEqual({ query: vulnerabilityHistoryQuery });
+    expect(vulnerabilitiesOverTimeChart.exists()).toBe(true);
+    expect(vulnerabilitiesOverTimeChart.props()).toEqual({ query: vulnerabilityHistoryQuery });
     expect(vulnerabilitySeverities.exists()).toBe(true);
     expect(vulnerabilitySeverities.props()).toEqual({
       query: vulnerabilityGradesQuery,

ee/spec/frontend/security_dashboard/components/first_class_group_security_dashboard_vulnerabilities_spec.js → ee/spec/frontend/security_dashboard/components/group/group_vulnerabilities_spec.js

 import { GlAlert, GlIntersectionObserver, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
-import FirstClassGroupVulnerabilities from 'ee/security_dashboard/components/first_class_group_security_dashboard_vulnerabilities.vue';
+import GroupVulnerabilities from 'ee/security_dashboard/components/group/group_vulnerabilities.vue';
 import VulnerabilityList from 'ee/security_dashboard/components/vulnerability_list.vue';
 import vulnerabilitiesQuery from 'ee/security_dashboard/graphql/queries/group_vulnerabilities.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { generateVulnerabilities } from './mock_data';
+import { generateVulnerabilities } from '../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
-describe('First Class Group Dashboard Vulnerabilities Component', () => {
+describe('Group Security Dashboard Vulnerabilities Component', () => {
   let wrapper;
   const apolloMock = {
     queries: { vulnerabilities: { loading: true } },
@@ -29,7 +29,7 @@ describe('First Class Group Dashboard Vulnerabilities Component', () => {
   };
 
   const createWrapper = ({ $apollo = apolloMock } = {}) => {
-    return shallowMount(FirstClassGroupVulnerabilities, {
+    return shallowMount(GroupVulnerabilities, {
       mocks: {
         $apollo,
         fetchNextPage: () => {},
@@ -220,7 +220,7 @@ describe('First Class Group Dashboard Vulnerabilities Component', () => {
     });
 
     const createWrapperWithApollo = ({ query, filters }) => {
-      wrapper = shallowMount(FirstClassGroupVulnerabilities, {
+      wrapper = shallowMount(GroupVulnerabilities, {
         localVue,
         apolloProvider: createMockApollo([[vulnerabilitiesQuery, query]]),
         propsData: { filters },

ee/spec/frontend/security_dashboard/components/instance_security_charts_spec.js → ee/spec/frontend/security_dashboard/components/instance/instance_security_dashboard_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import DashboardNotConfigured from 'ee/security_dashboard/components/empty_states/instance_dashboard_not_configured.vue';
-import VulnerabilityChart from 'ee/security_dashboard/components/first_class_vulnerability_chart.vue';
 import VulnerabilitySeverities from 'ee/security_dashboard/components/first_class_vulnerability_severities.vue';
-import InstanceSecurityCharts from 'ee/security_dashboard/components/instance_security_charts.vue';
-import SecurityChartsLayout from 'ee/security_dashboard/components/security_charts_layout.vue';
+import InstanceSecurityDashboard from 'ee/security_dashboard/components/instance/instance_security_dashboard.vue';
+import SecurityDashboardLayout from 'ee/security_dashboard/components/shared/security_dashboard_layout.vue';
+import VulnerabilitiesOverTimeChart from 'ee/security_dashboard/components/shared/vulnerabilities_over_time_chart.vue';
 import vulnerabilityGradesQuery from 'ee/security_dashboard/graphql/queries/instance_vulnerability_grades.query.graphql';
 import vulnerabilityHistoryQuery from 'ee/security_dashboard/graphql/queries/instance_vulnerability_history.query.graphql';
 
@@ -21,17 +21,17 @@ jest.mock(
   }),
 );
 
-describe('Instance Security Charts component', () => {
+describe('Instance Security Dashboard component', () => {
   let wrapper;
 
-  const findSecurityChartsLayoutComponent = () => wrapper.find(SecurityChartsLayout);
+  const findSecurityChartsLayoutComponent = () => wrapper.find(SecurityDashboardLayout);
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
-  const findVulnerabilityChart = () => wrapper.find(VulnerabilityChart);
+  const findVulnerabilitiesOverTimeChart = () => wrapper.find(VulnerabilitiesOverTimeChart);
   const findVulnerabilitySeverities = () => wrapper.find(VulnerabilitySeverities);
   const findDashboardNotConfigured = () => wrapper.find(DashboardNotConfigured);
 
   const createWrapper = ({ loading = false } = {}) => {
-    wrapper = shallowMount(InstanceSecurityCharts, {
+    wrapper = shallowMount(InstanceSecurityDashboard, {
       mocks: {
         $apollo: {
           queries: {
@@ -42,7 +42,7 @@ describe('Instance Security Charts component', () => {
         },
       },
       stubs: {
-        SecurityChartsLayout,
+        SecurityDashboardLayout,
       },
     });
   };
@@ -58,13 +58,13 @@ describe('Instance Security Charts component', () => {
     const securityChartsLayout = findSecurityChartsLayoutComponent();
     const dashboardNotConfigured = findDashboardNotConfigured();
     const loadingIcon = findLoadingIcon();
-    const vulnerabilityChart = findVulnerabilityChart();
+    const vulnerabilitiesOverTimeChart = findVulnerabilitiesOverTimeChart();
     const vulnerabilitySeverities = findVulnerabilitySeverities();
 
     expect(securityChartsLayout.exists()).toBe(true);
     expect(dashboardNotConfigured.exists()).toBe(false);
     expect(loadingIcon.exists()).toBe(true);
-    expect(vulnerabilityChart.exists()).toBe(false);
+    expect(vulnerabilitiesOverTimeChart.exists()).toBe(false);
     expect(vulnerabilitySeverities.exists()).toBe(false);
   });
 
@@ -74,13 +74,13 @@ describe('Instance Security Charts component', () => {
     const securityChartsLayout = findSecurityChartsLayoutComponent();
     const dashboardNotConfigured = findDashboardNotConfigured();
     const loadingIcon = findLoadingIcon();
-    const vulnerabilityChart = findVulnerabilityChart();
+    const vulnerabilitiesOverTimeChart = findVulnerabilitiesOverTimeChart();
     const vulnerabilitySeverities = findVulnerabilitySeverities();
 
     expect(securityChartsLayout.exists()).toBe(true);
     expect(dashboardNotConfigured.exists()).toBe(true);
     expect(loadingIcon.exists()).toBe(false);
-    expect(vulnerabilityChart.exists()).toBe(false);
+    expect(vulnerabilitiesOverTimeChart.exists()).toBe(false);
     expect(vulnerabilitySeverities.exists()).toBe(false);
   });
 
@@ -92,13 +92,13 @@ describe('Instance Security Charts component', () => {
     const securityChartsLayout = findSecurityChartsLayoutComponent();
     const dashboardNotConfigured = findDashboardNotConfigured();
     const loadingIcon = findLoadingIcon();
-    const vulnerabilityChart = findVulnerabilityChart();
+    const vulnerabilitiesOverTimeChart = findVulnerabilitiesOverTimeChart();
     const vulnerabilitySeverities = findVulnerabilitySeverities();
 
     expect(securityChartsLayout.exists()).toBe(true);
     expect(dashboardNotConfigured.exists()).toBe(false);
     expect(loadingIcon.exists()).toBe(false);
-    expect(vulnerabilityChart.props()).toEqual({ query: vulnerabilityHistoryQuery });
+    expect(vulnerabilitiesOverTimeChart.props()).toEqual({ query: vulnerabilityHistoryQuery });
     expect(vulnerabilitySeverities.exists()).toBe(true);
     expect(vulnerabilitySeverities.props()).toEqual({
       query: vulnerabilityGradesQuery,

ee/spec/frontend/security_dashboard/components/first_class_instance_security_dashboard_vulnerabilities_spec.js → ee/spec/frontend/security_dashboard/components/instance/instance_vulnerabilities_spec.js

 import { GlAlert, GlIntersectionObserver, GlLoadingIcon } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
-import FirstClassInstanceVulnerabilities from 'ee/security_dashboard/components/first_class_instance_security_dashboard_vulnerabilities.vue';
+import InstanceVulnerabilities from 'ee/security_dashboard/components/instance/instance_vulnerabilities.vue';
 import VulnerabilityList from 'ee/security_dashboard/components/vulnerability_list.vue';
 import vulnerabilitiesQuery from 'ee/security_dashboard/graphql/queries/instance_vulnerabilities.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { generateVulnerabilities } from './mock_data';
+import { generateVulnerabilities } from '../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
-describe('First Class Instance Dashboard Vulnerabilities Component', () => {
+describe('Instance Security Dashboard Vulnerabilities Component', () => {
   let wrapper;
 
   const findIntersectionObserver = () => wrapper.find(GlIntersectionObserver);
@@ -24,7 +24,7 @@ describe('First Class Instance Dashboard Vulnerabilities Component', () => {
   };
 
   const createWrapper = ({ loading = false, data } = {}) => {
-    return shallowMount(FirstClassInstanceVulnerabilities, {
+    return shallowMount(InstanceVulnerabilities, {
       mocks: {
         $apollo: {
           queries: { vulnerabilities: { loading } },
@@ -204,7 +204,7 @@ describe('First Class Instance Dashboard Vulnerabilities Component', () => {
     });
 
     const createWrapperWithApollo = ({ query, filters }) => {
-      wrapper = shallowMount(FirstClassInstanceVulnerabilities, {
+      wrapper = shallowMount(InstanceVulnerabilities, {
         localVue,
         apolloProvider: createMockApollo([[vulnerabilitiesQuery, query]]),
         propsData: { filters },

ee/spec/frontend/security_dashboard/components/__snapshots__/project_security_charts_spec.js.snap → ee/spec/frontend/security_dashboard/components/project/__snapshots__/project_security_dashboard_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Project Security Charts component when there is history data should display the chart with data 1`] = `
+exports[`Project Security Dashboard component when there is history data should display the chart with data 1`] = `
 Array [
   Object {
     "data": Array [

ee/spec/frontend/security_dashboard/components/project_security_charts_spec.js → ee/spec/frontend/security_dashboard/components/project/project_security_dashboard_spec.js

@@ -3,15 +3,15 @@ import { GlLineChart } from '@gitlab/ui/dist/charts';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import DashboardNotConfigured from 'ee/security_dashboard/components/empty_states/reports_not_configured.vue';
-import ProjectSecurityCharts from 'ee/security_dashboard/components/project_security_charts.vue';
-import SecurityChartsLayout from 'ee/security_dashboard/components/security_charts_layout.vue';
+import ProjectSecurityDashboard from 'ee/security_dashboard/components/project/project_security_dashboard.vue';
+import SecurityDashboardLayout from 'ee/security_dashboard/components/shared/security_dashboard_layout.vue';
 import projectsHistoryQuery from 'ee/security_dashboard/graphql/queries/project_vulnerabilities_by_day_and_count.query.graphql';
 import { useFakeDate } from 'helpers/fake_date';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import {
   mockProjectSecurityChartsWithData,
   mockProjectSecurityChartsWithoutData,
-} from '../mock_data';
+} from '../../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
@@ -20,7 +20,7 @@ jest.mock('~/lib/utils/icon_utils', () => ({
   getSvgIconPathContent: jest.fn().mockResolvedValue('mockSvgPathContent'),
 }));
 
-describe('Project Security Charts component', () => {
+describe('Project Security Dashboard component', () => {
   let wrapper;
 
   const projectFullPath = 'project/path';
@@ -35,7 +35,7 @@ describe('Project Security Charts component', () => {
   };
 
   const createComponent = ({ query, propsData, chartWidth = 1024 }) => {
-    const component = shallowMount(ProjectSecurityCharts, {
+    const component = shallowMount(ProjectSecurityDashboard, {
       localVue,
       apolloProvider: createApolloProvider([
         projectsHistoryQuery,
@@ -47,7 +47,7 @@ describe('Project Security Charts component', () => {
         ...propsData,
       },
       stubs: {
-        SecurityChartsLayout,
+        SecurityDashboardLayout,
       },
     });
 

ee/spec/frontend/security_dashboard/components/project_vulnerabilities_spec.js → ee/spec/frontend/security_dashboard/components/project/project_vulnerabilities_spec.js

@@ -2,8 +2,8 @@ import { GlAlert, GlIntersectionObserver, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { Portal } from 'portal-vue';
 import VueApollo from 'vue-apollo';
-import ProjectVulnerabilitiesApp from 'ee/security_dashboard/components/project_vulnerabilities.vue';
-import SecurityScannerAlert from 'ee/security_dashboard/components/security_scanner_alert.vue';
+import ProjectVulnerabilities from 'ee/security_dashboard/components/project/project_vulnerabilities.vue';
+import SecurityScannerAlert from 'ee/security_dashboard/components/project/security_scanner_alert.vue';
 import VulnerabilityList from 'ee/security_dashboard/components/vulnerability_list.vue';
 import securityScannersQuery from 'ee/security_dashboard/graphql/queries/project_security_scanners.query.graphql';
 import vulnerabilitiesQuery from 'ee/security_dashboard/graphql/queries/project_vulnerabilities.query.graphql';
@@ -11,7 +11,7 @@ import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
-import { generateVulnerabilities } from './mock_data';
+import { generateVulnerabilities } from '../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
@@ -25,7 +25,7 @@ describe('Vulnerabilities app component', () => {
   };
 
   const createWrapper = ({ props = {}, $apollo = apolloMock } = {}, options = {}) => {
-    wrapper = shallowMount(ProjectVulnerabilitiesApp, {
+    wrapper = shallowMount(ProjectVulnerabilities, {
       provide: {
         projectFullPath: '#',
         hasJiraVulnerabilitiesIntegrationEnabled: false,
@@ -195,7 +195,7 @@ describe('Vulnerabilities app component', () => {
     });
 
     const createWrapperWithApollo = ({ filters }) => {
-      wrapper = shallowMount(ProjectVulnerabilitiesApp, {
+      wrapper = shallowMount(ProjectVulnerabilities, {
         localVue,
         apolloProvider: createMockApollo([
           [vulnerabilitiesQuery, vulnerabilitiesHandler],
@@ -223,7 +223,7 @@ describe('Vulnerabilities app component', () => {
     const vulnerabilityReportAlertsPortal = 'test-alerts-portal';
 
     const createWrapperForScannerAlerts = async ({ securityScanners }) => {
-      wrapper = shallowMount(ProjectVulnerabilitiesApp, {
+      wrapper = shallowMount(ProjectVulnerabilities, {
         localVue,
         apolloProvider: createMockApollo([
           [securityScannersQuery, () => securityScannersHandler(securityScanners)],
@@ -273,7 +273,7 @@ describe('Vulnerabilities app component', () => {
 
       it('should never show the alert once it has been dismissed', async () => {
         window.localStorage.setItem(
-          ProjectVulnerabilitiesApp.SCANNER_ALERT_DISMISSED_LOCAL_STORAGE_KEY,
+          ProjectVulnerabilities.SCANNER_ALERT_DISMISSED_LOCAL_STORAGE_KEY,
           'true',
         );
 
@@ -309,7 +309,7 @@ describe('Vulnerabilities app component', () => {
         await wrapper.vm.$nextTick();
 
         expect(window.localStorage.setItem.mock.calls).toContainEqual([
-          ProjectVulnerabilitiesApp.SCANNER_ALERT_DISMISSED_LOCAL_STORAGE_KEY,
+          ProjectVulnerabilities.SCANNER_ALERT_DISMISSED_LOCAL_STORAGE_KEY,
           'true',
         ]);
       });

ee/spec/frontend/security_dashboard/components/security_scanner_alert_spec.js → ee/spec/frontend/security_dashboard/components/project/security_scanner_alert_spec.js

 import { within, fireEvent } from '@testing-library/dom';
 import { mount } from '@vue/test-utils';
-import SecurityScannerAlert from 'ee/security_dashboard/components/security_scanner_alert.vue';
+import SecurityScannerAlert from 'ee/security_dashboard/components/project/security_scanner_alert.vue';
 
 describe('EE Vulnerability Security Scanner Alert', () => {
   let wrapper;

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

@@ -5,9 +5,9 @@ import { nextTick } from 'vue';
 import Vuex from 'vuex';
 import Filters from 'ee/security_dashboard/components/filters.vue';
 import LoadingError from 'ee/security_dashboard/components/loading_error.vue';
-import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
 import SecurityDashboardTable from 'ee/security_dashboard/components/security_dashboard_table.vue';
 import SecurityDashboard from 'ee/security_dashboard/components/security_dashboard_vuex.vue';
+import VulnerabilityReportLayout from 'ee/security_dashboard/components/vulnerability_report_layout.vue';
 import { getStoreConfig } from 'ee/security_dashboard/store';
 import { VULNERABILITY_MODAL_ID } from 'ee/vue_shared/security_reports/components/constants';
 import IssueModal from 'ee/vue_shared/security_reports/components/modal.vue';
@@ -48,7 +48,7 @@ describe('Security Dashboard component', () => {
     wrapper = shallowMount(SecurityDashboard, {
       store,
       stubs: {
-        SecurityDashboardLayout,
+        VulnerabilityReportLayout,
       },
       propsData: {
         dashboardDocumentation: '',

ee/spec/frontend/security_dashboard/components/security_charts_layout_spec.js → ee/spec/frontend/security_dashboard/components/shared/security_dashboard_layout_spec.js

 import { shallowMount } from '@vue/test-utils';
-import SecurityChartsLayout from 'ee/security_dashboard/components/security_charts_layout.vue';
-import SurveyRequestBanner from 'ee/security_dashboard/components/survey_request_banner.vue';
+import SecurityDashboardLayout from 'ee/security_dashboard/components/shared/security_dashboard_layout.vue';
+import SurveyRequestBanner from 'ee/security_dashboard/components/shared/survey_request_banner.vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
-describe('Security Charts Layout component', () => {
+describe('Security Dashboard Layout component', () => {
   let wrapper;
 
   const DummyComponent = {
@@ -16,7 +16,7 @@ describe('Security Charts Layout component', () => {
   const findSurveyBanner = () => wrapper.findComponent(SurveyRequestBanner);
 
   const createWrapper = (slots) => {
-    wrapper = extendedWrapper(shallowMount(SecurityChartsLayout, { slots }));
+    wrapper = extendedWrapper(shallowMount(SecurityDashboardLayout, { slots }));
   };
 
   afterEach(() => {

ee/spec/frontend/security_dashboard/components/survey_request_banner_spec.js → ee/spec/frontend/security_dashboard/components/shared/survey_request_banner_spec.js

 import { GlBanner, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import SurveyRequestBanner from 'ee/security_dashboard/components/survey_request_banner.vue';
+import SurveyRequestBanner from 'ee/security_dashboard/components/shared/survey_request_banner.vue';
 import {
   SURVEY_BANNER_LOCAL_STORAGE_KEY,
   SURVEY_BANNER_CURRENT_ID,

ee/spec/frontend/security_dashboard/components/first_class_vulnerability_chart_spec.js → ee/spec/frontend/security_dashboard/components/shared/vulnerabilities_over_time_chart_spec.js

 import { GlLoadingIcon, GlTable } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import VulnerabilityChart from 'ee/security_dashboard/components/first_class_vulnerability_chart';
+import VulnerabilitiesOverTimeChart from 'ee/security_dashboard/components/shared/vulnerabilities_over_time_chart.vue';
 import ChartButtons from 'ee/security_dashboard/components/vulnerability_chart_buttons.vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
-describe('First class vulnerability chart component', () => {
+describe('Vulnerabilities Over Time Chart Component', () => {
   let wrapper;
 
   const responseData = {
@@ -32,7 +32,7 @@ describe('First class vulnerability chart component', () => {
 
   const createComponent = ({ $apollo, propsData, stubs, data, provide } = {}) => {
     return extendedWrapper(
-      shallowMount(VulnerabilityChart, {
+      shallowMount(VulnerabilitiesOverTimeChart, {
         propsData: { query: {}, ...propsData },
         provide: { groupFullPath: undefined, ...provide },
         mocks: { $apollo: mockApollo($apollo) },

ee/spec/frontend/security_dashboard/components/security_dashboard_layout_spec.js → ee/spec/frontend/security_dashboard/components/vulnerability_report_layout_spec.js

 import { shallowMount } from '@vue/test-utils';
-import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
+import VulnerabilityReportLayout from 'ee/security_dashboard/components/vulnerability_report_layout.vue';
 
-describe('Security Dashboard Layout component', () => {
+describe('Vulnerability Report Layout component', () => {
   let wrapper;
   const SMALLER_SECTION_CLASS = 'col-xl-7';
   const STICKY_SECTION_SELECTOR = '[data-testid="sticky-section"]';
@@ -12,7 +12,7 @@ describe('Security Dashboard Layout component', () => {
   };
 
   const createWrapper = (slots) => {
-    wrapper = shallowMount(SecurityDashboardLayout, { slots });
+    wrapper = shallowMount(VulnerabilityReportLayout, { slots });
   };
 
   const findArticle = () => wrapper.find('article');

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

@@ -9,15 +9,15 @@ import CsvExportButton from 'ee/security_dashboard/components/csv_export_button.
 import DashboardNotConfiguredGroup from 'ee/security_dashboard/components/empty_states/group_dashboard_not_configured.vue';
 import DashboardNotConfiguredInstance from 'ee/security_dashboard/components/empty_states/instance_dashboard_not_configured.vue';
 import DashboardNotConfiguredProject from 'ee/security_dashboard/components/empty_states/reports_not_configured.vue';
-import GroupVulnerabilities from 'ee/security_dashboard/components/first_class_group_security_dashboard_vulnerabilities.vue';
-import InstanceVulnerabilities from 'ee/security_dashboard/components/first_class_instance_security_dashboard_vulnerabilities.vue';
 import Filters from 'ee/security_dashboard/components/first_class_vulnerability_filters.vue';
+import GroupVulnerabilities from 'ee/security_dashboard/components/group/group_vulnerabilities.vue';
+import InstanceVulnerabilities from 'ee/security_dashboard/components/instance/instance_vulnerabilities.vue';
+import ProjectVulnerabilities from 'ee/security_dashboard/components/project/project_vulnerabilities.vue';
 import ProjectPipelineStatus from 'ee/security_dashboard/components/project_pipeline_status.vue';
-import ProjectVulnerabilities from 'ee/security_dashboard/components/project_vulnerabilities.vue';
-import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
-import SurveyRequestBanner from 'ee/security_dashboard/components/survey_request_banner.vue';
+import SurveyRequestBanner from 'ee/security_dashboard/components/shared/survey_request_banner.vue';
 import VulnerabilitiesCountList from 'ee/security_dashboard/components/vulnerability_count_list.vue';
 import VulnerabilityReport from 'ee/security_dashboard/components/vulnerability_report.vue';
+import VulnerabilityReportLayout from 'ee/security_dashboard/components/vulnerability_report_layout.vue';
 import groupProjectsQuery from 'ee/security_dashboard/graphql/queries/group_projects.query.graphql';
 import instanceProjectsQuery from 'ee/security_dashboard/graphql/queries/instance_projects.query.graphql';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
@@ -60,7 +60,7 @@ describe('Vulnerability Report', () => {
       provide: {
         ...provide,
       },
-      stubs: { SecurityDashboardLayout },
+      stubs: { VulnerabilityReportLayout },
     });
   };
 

ee/spec/frontend_integration/security_dashboard/__snapshots__/security_charts_init_integration_spec.js.snap → ee/spec/frontend_integration/security_dashboard/__snapshots__/security_dashboard_init_integration_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Security Charts default states sets up group-level 1`] = `
+exports[`Security Dashboard default states sets up group-level 1`] = `
 <div>
   <div>
     <div
@@ -15,7 +15,7 @@ exports[`Security Charts default states sets up group-level 1`] = `
 </div>
 `;
 
-exports[`Security Charts default states sets up instance-level 1`] = `
+exports[`Security Dashboard default states sets up instance-level 1`] = `
 <div>
   <div>
     <div
@@ -30,7 +30,7 @@ exports[`Security Charts default states sets up instance-level 1`] = `
 </div>
 `;
 
-exports[`Security Charts error states has unavailable pages 1`] = `
+exports[`Security Dashboard error states has unavailable pages 1`] = `
 <div>
   <section
     class="row empty-state text-center"

ee/spec/frontend_integration/security_dashboard/security_charts_init_integration_spec.js → ee/spec/frontend_integration/security_dashboard/security_dashboard_init_integration_spec.js

-import initSecurityCharts from 'ee/security_dashboard/security_charts_init';
+import initSecurityDashboard from 'ee/security_dashboard/security_dashboard_init';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 import { TEST_HOST } from 'helpers/test_constants';
 
@@ -11,7 +11,7 @@ const TEST_DATASET = {
   emptyStateSvgPath: '/test/empty_state.svg',
 };
 
-describe('Security Charts', () => {
+describe('Security Dashboard', () => {
   let vm;
   let root;
 
@@ -36,11 +36,11 @@ describe('Security Charts', () => {
     const el = document.createElement('div');
     Object.assign(el.dataset, { ...TEST_DATASET, ...data });
     root.appendChild(el);
-    vm = initSecurityCharts(el, type);
+    vm = initSecurityDashboard(el, type);
   };
 
   const createEmptyComponent = () => {
-    vm = initSecurityCharts(null, null);
+    vm = initSecurityDashboard(null, null);
   };
 
   describe('default states', () => {