Rename security charts to security dashboard

Previously we named the security dashboard files as security charts.
This was confusing as in the UI we refer to those files as Security
Dashboard. This commit makes sure file names are aligned with the UI.

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/group_security_charts.vue → ee/app/assets/javascripts/security_dashboard/components/group/group_security_dashboard.vue

@@ -7,14 +7,14 @@ import { PROJECT_LOADING_ERROR_MESSAGE } from 'ee/security_dashboard/helpers';
 import createFlash from '~/flash';
 import DashboardNotConfigured from '../empty_states/group_dashboard_not_configured.vue';
 import VulnerabilitySeverities from '../first_class_vulnerability_severities.vue';
-import SecurityChartsLayout from '../security_charts_layout.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,
     VulnerabilitiesOverTimeChart,
   },
@@ -55,7 +55,7 @@ export default {
 </script>
 
 <template>
-  <security-charts-layout>
+  <security-dashboard-layout>
     <template v-if="shouldShowEmptyState" #empty-state>
       <dashboard-not-configured />
     </template>
@@ -66,5 +66,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/instance/instance_security_charts.vue → ee/app/assets/javascripts/security_dashboard/components/instance/instance_security_dashboard.vue

@@ -7,14 +7,14 @@ import { PROJECT_LOADING_ERROR_MESSAGE } from 'ee/security_dashboard/helpers';
 import createFlash from '~/flash';
 import DashboardNotConfigured from '../empty_states/instance_dashboard_not_configured.vue';
 import VulnerabilitySeverities from '../first_class_vulnerability_severities.vue';
-import SecurityChartsLayout from '../security_charts_layout.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,
     VulnerabilitiesOverTimeChart,
   },
@@ -51,7 +51,7 @@ export default {
 </script>
 
 <template>
-  <security-charts-layout>
+  <security-dashboard-layout>
     <template v-if="shouldShowEmptyState" #empty-state>
       <dashboard-not-configured />
     </template>
@@ -62,5 +62,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/project_security_charts.vue → ee/app/assets/javascripts/security_dashboard/components/project/project_security_dashboard.vue

@@ -8,7 +8,7 @@ import { formatDate, getDateInPast } from '~/lib/utils/datetime_utility';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import { s__, __ } from '~/locale';
 import DashboardNotConfigured from '../empty_states/reports_not_configured.vue';
-import SecurityChartsLayout from '../security_charts_layout.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/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/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';
@@ -19,13 +18,14 @@ 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 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/group_security_charts.vue';
-import InstanceSecurityCharts from './components/instance/instance_security_charts.vue';
-import ProjectSecurityCharts from './components/project/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/group/group_security_charts_spec.js → ee/spec/frontend/security_dashboard/components/group/group_security_dashboard_spec.js

@@ -2,8 +2,8 @@ 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 VulnerabilitySeverities from 'ee/security_dashboard/components/first_class_vulnerability_severities.vue';
-import GroupSecurityCharts from 'ee/security_dashboard/components/group/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';
@@ -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 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,
       },
     });
   };

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

@@ -2,8 +2,8 @@ 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 VulnerabilitySeverities from 'ee/security_dashboard/components/first_class_vulnerability_severities.vue';
-import InstanceSecurityCharts from 'ee/security_dashboard/components/instance/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 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,
       },
     });
   };

ee/spec/frontend/security_dashboard/components/project/__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/project_security_charts_spec.js → ee/spec/frontend/security_dashboard/components/project/project_security_dashboard_spec.js

@@ -3,8 +3,8 @@ 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/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';
@@ -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/security_dashboard_vuex_spec.js

@@ -5,7 +5,7 @@ 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 VulnerabilityReportLayout from 'ee/security_dashboard/components/vulnerability_report_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 { getStoreConfig } from 'ee/security_dashboard/store';
@@ -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/security_dashboard_layout_spec.js → ee/spec/frontend/security_dashboard/components/vulnerability_report_layout.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

@@ -14,10 +14,10 @@ import GroupVulnerabilities from 'ee/security_dashboard/components/group/group_v
 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 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

-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Security Charts default states sets up group-level 1`] = `
-<div>
-  <div>
-    <div
-      class="gl-spinner-container gl-mt-6"
-    >
-      <span
-        aria-label="Loading"
-        class="align-text-bottom gl-spinner gl-spinner-dark gl-spinner-lg"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Security Charts default states sets up instance-level 1`] = `
-<div>
-  <div>
-    <div
-      class="gl-spinner-container gl-mt-6"
-    >
-      <span
-        aria-label="Loading"
-        class="align-text-bottom gl-spinner gl-spinner-dark gl-spinner-lg"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Security Charts error states has unavailable pages 1`] = `
-<div>
-  <section
-    class="row empty-state text-center"
-  >
-    <div
-      class="col-12"
-    >
-      <div
-        class="svg-250 svg-content"
-      >
-        <img
-          alt=""
-          class="gl-max-w-full"
-          src="/test/empty_state.svg"
-        />
-      </div>
-    </div>
-    <div
-      class="col-12"
-    >
-      <div
-        class="text-content gl-mx-auto gl-my-0 gl-p-5"
-      >
-        <h1
-          class="h4"
-        >
-          Oops, something doesn't seem right.
-        </h1>
-        <p>
-          Either you don't have permission to view this dashboard or the dashboard has not been setup. Please check your permission settings with your administrator or check your dashboard configurations to proceed.
-        </p>
-        <div
-          class="gl-display-flex gl-flex-wrap gl-justify-content-center"
-        >
-          <a
-            class="btn gl-mb-3 btn-confirm btn-md gl-button gl-mx-2"
-            href="/test/dashboard_page"
-          >
-            <span
-              class="gl-button-text"
-            >
-              Learn more about setting up your dashboard
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-  </section>
-</div>
-`;

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', () => {