Merge branch '33779-reorganise-security-dashboard-files-ee' into 'master'

Resolve "Reorganise Security Dashboard frontend files"

See merge request gitlab-org/gitlab!23879

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

-import initSecurityDashboard from 'ee/security_dashboard/index';
-import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
+import initGroupSecurityDashboard from 'ee/security_dashboard/group_init';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initSecurityDashboard(DASHBOARD_TYPES.GROUP);
-});
+document.addEventListener('DOMContentLoaded', initGroupSecurityDashboard);

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

-import initSecurityDashboard from 'ee/security_dashboard/index';
+import initGroupSecurityDashboard from 'ee/security_dashboard/group_init';
 import leaveByUrl from '~/namespaces/leave_by_url';
 import initGroupDetails from '~/pages/groups/shared/group_details';
 import initGroupAnalytics from 'ee/analytics/group_analytics/group_analytics_bundle';
@@ -7,7 +7,7 @@ document.addEventListener('DOMContentLoaded', () => {
   leaveByUrl('group');
 
   if (document.querySelector('#js-group-security-dashboard')) {
-    initSecurityDashboard();
+    initGroupSecurityDashboard();
   } else {
     initGroupDetails();
   }

ee/app/assets/javascripts/pages/projects/pipelines/show/index.js

 import initPipelineDetails from '~/pipelines/pipeline_details_bundle';
 import initPipelines from '~/pages/projects/pipelines/init_pipelines';
-import initSecurityReport from './security_report';
+import initPipelineSecurityDashboard from 'ee/security_dashboard/pipeline_init';
 import initLicenseReport from './license_report';
 import initCodequalityReport from './codequality_report';
 
 document.addEventListener('DOMContentLoaded', () => {
   initPipelines();
   initPipelineDetails();
-  initSecurityReport();
+  initPipelineSecurityDashboard();
   initLicenseReport();
   initCodequalityReport();
 });

ee/app/assets/javascripts/pages/projects/pipelines/show/security_report.js

-import Vue from 'vue';
-import createDashboardStore from 'ee/security_dashboard/store';
-import PipelineSecurityDashboard from 'ee/security_dashboard/components/pipeline_security_dashboard.vue';
-import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
-import { LOADING_VULNERABILITIES_ERROR_CODES } from 'ee/security_dashboard/store/modules/vulnerabilities/constants';
+import initPipelineSecurityDashboard from 'ee/security_dashboard/pipeline_init';
 
-const initSecurityDashboardApp = el => {
-  const {
-    dashboardDocumentation,
-    emptyStateSvgPath,
-    pipelineId,
-    projectId,
-    sourceBranch,
-    vulnerabilitiesEndpoint,
-    vulnerabilityFeedbackHelpPath,
-    emptyStateUnauthorizedSvgPath,
-    emptyStateForbiddenSvgPath,
-  } = el.dataset;
-
-  const loadingErrorIllustrations = {
-    [LOADING_VULNERABILITIES_ERROR_CODES.UNAUTHORIZED]: emptyStateUnauthorizedSvgPath,
-    [LOADING_VULNERABILITIES_ERROR_CODES.FORBIDDEN]: emptyStateForbiddenSvgPath,
-  };
-
-  return new Vue({
-    el,
-    store: createDashboardStore({
-      dashboardType: DASHBOARD_TYPES.PIPELINE,
-    }),
-    render(createElement) {
-      return createElement(PipelineSecurityDashboard, {
-        props: {
-          projectId: parseInt(projectId, 10),
-          pipelineId: parseInt(pipelineId, 10),
-          vulnerabilitiesEndpoint,
-          vulnerabilityFeedbackHelpPath,
-          sourceBranch,
-          dashboardDocumentation,
-          emptyStateSvgPath,
-          loadingErrorIllustrations,
-        },
-      });
-    },
-  });
-};
-
-export default () => {
-  const securityTab = document.getElementById('js-security-report-app');
-
-  if (securityTab) {
-    initSecurityDashboardApp(securityTab);
-  }
-};
+document.addEventListener('DOMContentLoaded', initPipelineSecurityDashboard);

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

-import Vue from 'vue';
-import createRouter from 'ee/security_dashboard/store/router';
-import syncWithRouter from 'ee/security_dashboard/store/plugins/sync_with_router';
-import createStore from 'ee/security_dashboard/store';
-import SecurityReportApp from 'ee/vue_shared/security_reports/card_security_reports_app.vue';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import initProjectSecurityDashboard from 'ee/security_dashboard/project_init';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const securityTab = document.getElementById('js-security-report-app');
-
-  const {
-    hasPipelineData,
-    userPath,
-    userAvatarPath,
-    pipelineCreated,
-    pipelinePath,
-    userName,
-    commitId,
-    commitPath,
-    refId,
-    refPath,
-    pipelineId,
-    projectId,
-    projectName,
-    dashboardDocumentation,
-    emptyStateSvgPath,
-    vulnerabilitiesEndpoint,
-    vulnerabilitiesSummaryEndpoint,
-    vulnerabilityFeedbackHelpPath,
-    securityDashboardHelpPath,
-    emptyStateIllustrationPath,
-  } = securityTab.dataset;
-
-  const parsedPipelineId = parseInt(pipelineId, 10);
-  const parsedHasPipelineData = parseBoolean(hasPipelineData);
-
-  let props = {
-    hasPipelineData: parsedHasPipelineData,
-    dashboardDocumentation,
-    emptyStateSvgPath,
-    vulnerabilitiesEndpoint,
-    vulnerabilitiesSummaryEndpoint,
-    vulnerabilityFeedbackHelpPath,
-    securityDashboardHelpPath,
-    emptyStateIllustrationPath,
-  };
-  if (parsedHasPipelineData) {
-    props = {
-      ...props,
-      project: {
-        id: projectId,
-        name: projectName,
-      },
-      triggeredBy: {
-        avatarPath: userAvatarPath,
-        name: userName,
-        path: userPath,
-      },
-      pipeline: {
-        id: parsedPipelineId,
-        created: pipelineCreated,
-        path: pipelinePath,
-      },
-      commit: {
-        id: commitId,
-        path: commitPath,
-      },
-      branch: {
-        id: refId,
-        path: refPath,
-      },
-    };
-  }
-
-  const router = createRouter();
-  const store = createStore({ plugins: [syncWithRouter(router)] });
-
-  return new Vue({
-    el: securityTab,
-    store,
-    router,
-    components: {
-      SecurityReportApp,
-    },
-    render(createElement) {
-      return createElement('security-report-app', {
-        props,
-      });
-    },
-  });
-});
+document.addEventListener('DOMContentLoaded', initProjectSecurityDashboard);

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

-import Vue from 'vue';
-import createRouter from 'ee/security_dashboard/store/router';
-import projectSelector from 'ee/security_dashboard/store/plugins/project_selector';
-import syncWithRouter from 'ee/security_dashboard/store/plugins/sync_with_router';
-import createStore from 'ee/security_dashboard/store';
-import InstanceSecurityDashboard from 'ee/security_dashboard/components/instance_security_dashboard.vue';
+import initInstanceSecurityDashboard from 'ee/security_dashboard/instance_init';
 
-if (gon.features && gon.features.instanceSecurityDashboard) {
-  document.addEventListener('DOMContentLoaded', () => {
-    const el = document.querySelector('#js-security');
-    const {
-      dashboardDocumentation,
-      emptyStateSvgPath,
-      emptyDashboardStateSvgPath,
-      projectAddEndpoint,
-      projectListEndpoint,
-      vulnerabilitiesEndpoint,
-      vulnerabilitiesHistoryEndpoint,
-      vulnerabilityFeedbackHelpPath,
-      vulnerableProjectsEndpoint,
-    } = el.dataset;
-    const router = createRouter();
-    const store = createStore({ plugins: [projectSelector, syncWithRouter(router)] });
-
-    return new Vue({
-      el,
-      router,
-      store,
-      components: {
-        InstanceSecurityDashboard,
-      },
-      render(createElement) {
-        return createElement(InstanceSecurityDashboard, {
-          props: {
-            dashboardDocumentation,
-            emptyStateSvgPath,
-            emptyDashboardStateSvgPath,
-            projectAddEndpoint,
-            projectListEndpoint,
-            vulnerabilitiesEndpoint,
-            vulnerabilitiesHistoryEndpoint,
-            vulnerabilityFeedbackHelpPath,
-            vulnerableProjectsEndpoint,
-          },
-        });
-      },
-    });
-  });
+if (gon.features?.instanceSecurityDashboard) {
+  document.addEventListener('DOMContentLoaded', initInstanceSecurityDashboard);
 }

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

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

ee/app/assets/javascripts/vue_shared/security_reports/card_security_reports_app.vue → ee/app/assets/javascripts/security_dashboard/components/project_security_dashboard.vue

 <script>
 import { isUndefined } from 'underscore';
 import { GlEmptyState, GlSprintf } from '@gitlab/ui';
-import SecurityDashboardApp from 'ee/security_dashboard/components/app.vue';
 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';
 
 export default {
+  name: 'ProjectSecurityDashboard',
   components: {
     GlEmptyState,
     GlSprintf,
     UserAvatarLink,
     Icon,
     TimeagoTooltip,
-    SecurityDashboardApp,
+    SecurityDashboard,
   },
   props: {
     hasPipelineData: {
@@ -133,7 +134,7 @@ export default {
         </div>
       </div>
       <h4 class="mt-4 mb-3">{{ __('Vulnerabilities') }}</h4>
-      <security-dashboard-app
+      <security-dashboard
         :lock-to-project="project"
         :vulnerabilities-endpoint="vulnerabilitiesEndpoint"
         :vulnerabilities-count-endpoint="vulnerabilitiesSummaryEndpoint"
@@ -154,7 +155,7 @@ export default {
             "
           />
         </template>
-      </security-dashboard-app>
+      </security-dashboard>
     </template>
     <gl-empty-state
       v-else

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

@@ -10,7 +10,7 @@ import VulnerabilitySeverity from './vulnerability_severity.vue';
 import LoadingError from './loading_error.vue';
 
 export default {
-  name: 'SecurityDashboardApp',
+  name: 'SecurityDashboard',
   components: {
     Filters,
     IssueModal,

ee/app/assets/javascripts/security_dashboard/index.js → ee/app/assets/javascripts/security_dashboard/group_init.js

 import Vue from 'vue';
-import GroupSecurityDashboardApp from './components/group_security_dashboard.vue';
+import GroupSecurityDashboard from './components/group_security_dashboard.vue';
 import UnavailableState from './components/unavailable_state.vue';
 import createStore from './store';
+import { DASHBOARD_TYPES } from './store/constants';
 import createRouter from './store/router';
 import projectsPlugin from './store/plugins/projects';
 import syncWithRouter from './store/plugins/sync_with_router';
 
-export default function(dashboardType) {
+export default () => {
   const el = document.getElementById('js-group-security-dashboard');
   const { isUnavailable, dashboardDocumentation, emptyStateSvgPath } = el.dataset;
 
@@ -26,16 +27,15 @@ export default function(dashboardType) {
 
   const router = createRouter();
   const store = createStore({
-    dashboardType,
+    dashboardType: DASHBOARD_TYPES.GROUP,
     plugins: [projectsPlugin, syncWithRouter(router)],
   });
   return new Vue({
     el,
     store,
     router,
-    components: { GroupSecurityDashboardApp },
     render(createElement) {
-      return createElement('group-security-dashboard-app', {
+      return createElement(GroupSecurityDashboard, {
         props: {
           dashboardDocumentation: el.dataset.dashboardDocumentation,
           emptyStateSvgPath: el.dataset.emptyStateSvgPath,
@@ -48,4 +48,4 @@ export default function(dashboardType) {
       });
     },
   });
-}
+};

ee/app/assets/javascripts/security_dashboard/instance_init.js

+import Vue from 'vue';
+import createRouter from './store/router';
+import projectSelector from './store/plugins/project_selector';
+import syncWithRouter from './store/plugins/sync_with_router';
+import createStore from './store';
+import { DASHBOARD_TYPES } from './store/constants';
+import InstanceSecurityDashboard from './components/instance_security_dashboard.vue';
+
+export default () => {
+  const el = document.querySelector('#js-security');
+  const {
+    dashboardDocumentation,
+    emptyStateSvgPath,
+    emptyDashboardStateSvgPath,
+    projectAddEndpoint,
+    projectListEndpoint,
+    vulnerabilitiesEndpoint,
+    vulnerabilitiesHistoryEndpoint,
+    vulnerabilityFeedbackHelpPath,
+    vulnerableProjectsEndpoint,
+  } = el.dataset;
+  const router = createRouter();
+  const store = createStore({
+    dashboardType: DASHBOARD_TYPES.INSTANCE,
+    plugins: [projectSelector, syncWithRouter(router)],
+  });
+
+  return new Vue({
+    el,
+    router,
+    store,
+    render(createElement) {
+      return createElement(InstanceSecurityDashboard, {
+        props: {
+          dashboardDocumentation,
+          emptyStateSvgPath,
+          emptyDashboardStateSvgPath,
+          projectAddEndpoint,
+          projectListEndpoint,
+          vulnerabilitiesEndpoint,
+          vulnerabilitiesHistoryEndpoint,
+          vulnerabilityFeedbackHelpPath,
+          vulnerableProjectsEndpoint,
+        },
+      });
+    },
+  });
+};

ee/app/assets/javascripts/security_dashboard/pipeline_init.js

+import Vue from 'vue';
+import createDashboardStore from './store';
+import PipelineSecurityDashboard from './components/pipeline_security_dashboard.vue';
+import { DASHBOARD_TYPES } from './store/constants';
+import { LOADING_VULNERABILITIES_ERROR_CODES } from './store/modules/vulnerabilities/constants';
+
+export default () => {
+  const el = document.getElementById('js-security-report-app');
+
+  if (!el) {
+    return null;
+  }
+
+  const {
+    dashboardDocumentation,
+    emptyStateSvgPath,
+    pipelineId,
+    projectId,
+    sourceBranch,
+    vulnerabilitiesEndpoint,
+    vulnerabilityFeedbackHelpPath,
+    emptyStateUnauthorizedSvgPath,
+    emptyStateForbiddenSvgPath,
+  } = el.dataset;
+
+  const loadingErrorIllustrations = {
+    [LOADING_VULNERABILITIES_ERROR_CODES.UNAUTHORIZED]: emptyStateUnauthorizedSvgPath,
+    [LOADING_VULNERABILITIES_ERROR_CODES.FORBIDDEN]: emptyStateForbiddenSvgPath,
+  };
+
+  return new Vue({
+    el,
+    store: createDashboardStore({
+      dashboardType: DASHBOARD_TYPES.PIPELINE,
+    }),
+    render(createElement) {
+      return createElement(PipelineSecurityDashboard, {
+        props: {
+          projectId: parseInt(projectId, 10),
+          pipelineId: parseInt(pipelineId, 10),
+          vulnerabilitiesEndpoint,
+          vulnerabilityFeedbackHelpPath,
+          sourceBranch,
+          dashboardDocumentation,
+          emptyStateSvgPath,
+          loadingErrorIllustrations,
+        },
+      });
+    },
+  });
+};

ee/app/assets/javascripts/security_dashboard/project_init.js

+import Vue from 'vue';
+import createRouter from './store/router';
+import syncWithRouter from './store/plugins/sync_with_router';
+import createStore from './store';
+import { DASHBOARD_TYPES } from './store/constants';
+import ProjectSecurityDashboard from './components/project_security_dashboard.vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+
+export default () => {
+  const securityTab = document.getElementById('js-security-report-app');
+
+  const {
+    hasPipelineData,
+    userPath,
+    userAvatarPath,
+    pipelineCreated,
+    pipelinePath,
+    userName,
+    commitId,
+    commitPath,
+    refId,
+    refPath,
+    pipelineId,
+    projectId,
+    projectName,
+    dashboardDocumentation,
+    emptyStateSvgPath,
+    vulnerabilitiesEndpoint,
+    vulnerabilitiesSummaryEndpoint,
+    vulnerabilityFeedbackHelpPath,
+    securityDashboardHelpPath,
+    emptyStateIllustrationPath,
+  } = securityTab.dataset;
+
+  const parsedPipelineId = parseInt(pipelineId, 10);
+  const parsedHasPipelineData = parseBoolean(hasPipelineData);
+
+  let props = {
+    hasPipelineData: parsedHasPipelineData,
+    dashboardDocumentation,
+    emptyStateSvgPath,
+    vulnerabilitiesEndpoint,
+    vulnerabilitiesSummaryEndpoint,
+    vulnerabilityFeedbackHelpPath,
+    securityDashboardHelpPath,
+    emptyStateIllustrationPath,
+  };
+  if (parsedHasPipelineData) {
+    props = {
+      ...props,
+      project: {
+        id: projectId,
+        name: projectName,
+      },
+      triggeredBy: {
+        avatarPath: userAvatarPath,
+        name: userName,
+        path: userPath,
+      },
+      pipeline: {
+        id: parsedPipelineId,
+        created: pipelineCreated,
+        path: pipelinePath,
+      },
+      commit: {
+        id: commitId,
+        path: commitPath,
+      },
+      branch: {
+        id: refId,
+        path: refPath,
+      },
+    };
+  }
+
+  const router = createRouter();
+  const store = createStore({
+    dashboardType: DASHBOARD_TYPES.PROJECT,
+    plugins: [syncWithRouter(router)],
+  });
+
+  return new Vue({
+    el: securityTab,
+    store,
+    router,
+    render(createElement) {
+      return createElement(ProjectSecurityDashboard, {
+        props,
+      });
+    },
+  });
+};

ee/spec/frontend/dependencies/components/dependencies_table_row_spec.js

@@ -3,7 +3,7 @@ import DependenciesTableRow from 'ee/dependencies/components/dependencies_table_
 import DependencyVulnerability from 'ee/dependencies/components/dependency_vulnerability.vue';
 import { MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY } from 'ee/dependencies/components/constants';
 import { makeDependency } from './utils';
-import mockDataVulnerabilities from '../../security_dashboard/store/vulnerabilities/data/mock_data_vulnerabilities';
+import mockDataVulnerabilities from '../../security_dashboard/store/modules/vulnerabilities/data/mock_data_vulnerabilities';
 
 describe('DependenciesTableRow component', () => {
   let wrapper;

ee/spec/frontend/dependencies/components/dependency_vulnerability_spec.js

 import { shallowMount } from '@vue/test-utils';
 import DependencyVulnerability from 'ee/dependencies/components/dependency_vulnerability.vue';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
-import mockDataVulnerabilities from '../../security_dashboard/store/vulnerabilities/data/mock_data_vulnerabilities';
+import mockDataVulnerabilities from '../../security_dashboard/store/modules/vulnerabilities/data/mock_data_vulnerabilities';
 
 describe('DependencyVulnerability component', () => {
   let wrapper;

ee/spec/frontend/vue_shared/security_reports/__snapshots__/card_security_reports_app_spec.js.snap → ee/spec/frontend/security_dashboard/components/__snapshots__/project_security_dashboard_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Card security reports app Empty State renders correctly renders empty state component with correct props 1`] = `
+exports[`Project Security Dashboard component Empty State renders correctly renders empty state component with correct props 1`] = `
 Object {
   "compact": false,
   "description": "The security dashboard displays the latest security report. Use it to find and fix vulnerabilities.",
@@ -13,8 +13,46 @@ Object {
 }
 `;
 
-exports[`Card security reports app Headline renders renders branch and commit information 1`] = `
-"<span class=\\"js-security-dashboard-right pull-right\\"><svg aria-hidden=\\"true\\" class=\\"s16 ic-branch\\"><use xlink:href=\\"#branch\\"></use></svg> <a href=\\"http://test.host/branch\\" class=\\"monospace\\">master</a> <span class=\\"text-muted prepend-left-5 append-right-5\\">·</span> <svg aria-hidden=\\"true\\" class=\\"s16 ic-commit\\">
-  <use xlink:href=\\"#commit\\"></use>
-</svg> <a href=\\"http://test.host/commit\\" class=\\"monospace\\">1234adf</a></span>"
+exports[`Project Security Dashboard component Headline renders renders branch and commit information 1`] = `
+<span
+  class="js-security-dashboard-right pull-right"
+>
+  <svg
+    aria-hidden="true"
+    class="s16 ic-branch"
+  >
+    <use
+      xlink:href="#branch"
+    />
+  </svg>
+   
+  <a
+    class="monospace"
+    href="http://test.host/branch"
+  >
+    master
+  </a>
+   
+  <span
+    class="text-muted prepend-left-5 append-right-5"
+  >
+    ·
+  </span>
+   
+  <svg
+    aria-hidden="true"
+    class="s16 ic-commit"
+  >
+    <use
+      xlink:href="#commit"
+    />
+  </svg>
+   
+  <a
+    class="monospace"
+    href="http://test.host/commit"
+  >
+    1234adf
+  </a>
+</span>
 `;

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/app.vue';
+import SecurityDashboard from 'ee/security_dashboard/components/security_dashboard.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/app.vue';
+import SecurityDashboard from 'ee/security_dashboard/components/security_dashboard.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/app.vue';
+import SecurityDashboard from 'ee/security_dashboard/components/security_dashboard.vue';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);

ee/spec/frontend/vue_shared/security_reports/card_security_reports_app_spec.js → ee/spec/frontend/security_dashboard/components/project_security_dashboard_spec.js

@@ -3,7 +3,7 @@ import { GlEmptyState } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'helpers/test_constants';
 
-import CardSecurityDashboardApp from 'ee/vue_shared/security_reports/card_security_reports_app.vue';
+import ProjectSecurityDashboard from 'ee/security_dashboard/components/project_security_dashboard.vue';
 import createStore from 'ee/security_dashboard/store';
 import { trimText } from 'helpers/text_helper';
 import axios from '~/lib/utils/axios_utils';
@@ -11,7 +11,7 @@ import axios from '~/lib/utils/axios_utils';
 const vulnerabilitiesEndpoint = `${TEST_HOST}/vulnerabilities`;
 const vulnerabilitiesSummaryEndpoint = `${TEST_HOST}/vulnerabilities_summary`;
 
-describe('Card security reports app', () => {
+describe('Project Security Dashboard component', () => {
   let wrapper;
   let mock;
 
@@ -19,7 +19,7 @@ describe('Card security reports app', () => {
   runDate.setDate(runDate.getDate() - 7);
 
   const createComponent = props => {
-    wrapper = mount(CardSecurityDashboardApp, {
+    wrapper = mount(ProjectSecurityDashboard, {
       store: createStore(),
       stubs: ['security-dashboard-table'],
       propsData: {
@@ -88,12 +88,12 @@ describe('Card security reports app', () => {
 
     it('renders branch and commit information', () => {
       const revInformation = wrapper.find('.card-header .js-security-dashboard-right');
-      expect(revInformation.html()).toMatchSnapshot();
+      expect(revInformation.element).toMatchSnapshot();
     });
   });
 
   describe('Dashboard renders properly', () => {
-    const findDashboard = () => wrapper.find(CardSecurityDashboardApp);
+    const findDashboard = () => wrapper.find(ProjectSecurityDashboard);
 
     it('renders security dashboard', () => {
       const dashboard = findDashboard();

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

@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'helpers/test_constants';
 
-import SecurityDashboardApp from 'ee/security_dashboard/components/app.vue';
+import SecurityDashboard from 'ee/security_dashboard/components/security_dashboard.vue';
 import Filters from 'ee/security_dashboard/components/filters.vue';
 import SecurityDashboardTable from 'ee/security_dashboard/components/security_dashboard_table.vue';
 import VulnerabilityChart from 'ee/security_dashboard/components/vulnerability_chart.vue';
@@ -24,7 +24,7 @@ jest.mock('~/lib/utils/url_utility', () => ({
   getParameterValues: jest.fn().mockReturnValue([]),
 }));
 
-describe('Security Dashboard app', () => {
+describe('Security Dashboard component', () => {
   let wrapper;
   let mock;
   let lockFilterSpy;
@@ -39,7 +39,7 @@ describe('Security Dashboard app', () => {
 
   const createComponent = props => {
     store = createStore();
-    wrapper = shallowMount(SecurityDashboardApp, {
+    wrapper = shallowMount(SecurityDashboard, {
       store,
       methods: {
         lockFilter: lockFilterSpy,

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

@@ -3,7 +3,7 @@ import { GlFormCheckbox } from '@gitlab/ui';
 import SecurityDashboardTableRow from 'ee/security_dashboard/components/security_dashboard_table_row.vue';
 import createStore from 'ee/security_dashboard/store';
 import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
-import mockDataVulnerabilities from '../store/vulnerabilities/data/mock_data_vulnerabilities';
+import mockDataVulnerabilities from '../store/modules/vulnerabilities/data/mock_data_vulnerabilities';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 
 const localVue = createLocalVue();

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

@@ -13,7 +13,7 @@ import {
   REQUEST_VULNERABILITIES,
 } from 'ee/security_dashboard/store/modules/vulnerabilities/mutation_types';
 
-import mockDataVulnerabilities from '../store/vulnerabilities/data/mock_data_vulnerabilities';
+import mockDataVulnerabilities from '../store/modules/vulnerabilities/data/mock_data_vulnerabilities';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);

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

@@ -4,7 +4,7 @@ import component from 'ee/security_dashboard/components/vulnerability_action_but
 import createStore from 'ee/security_dashboard/store';
 import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { resetStore } from '../helpers';
-import mockDataVulnerabilities from '../store/vulnerabilities/data/mock_data_vulnerabilities';
+import mockDataVulnerabilities from '../store/modules/vulnerabilities/data/mock_data_vulnerabilities';
 
 describe('Security Dashboard Action Buttons', () => {
   const Component = Vue.extend(component);

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

@@ -3,7 +3,7 @@ import component from 'ee/security_dashboard/components/vulnerability_count_list
 import createStore from 'ee/security_dashboard/store';
 import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { resetStore } from '../helpers';
-import mockData from '../store/vulnerabilities/data/mock_data_vulnerabilities_count.json';
+import mockData from '../store/modules/vulnerabilities/data/mock_data_vulnerabilities_count.json';
 
 describe('Vulnerability Count List', () => {
   const Component = Vue.extend(component);

ee/spec/frontend/security_dashboard/store/vulnerabilities/utils_spec.js → ee/spec/frontend/security_dashboard/store/modules/vulnerabilities/utils_spec.js

 import { isSameVulnerability } from 'ee/security_dashboard/store/modules/vulnerabilities/utils';
-import mockData from '../../../security_dashboard/store/vulnerabilities/data/mock_data_vulnerabilities';
+import mockData from './data/mock_data_vulnerabilities';
 
 describe('Vulnerabilities utils', () => {
   const clone = serializable => JSON.parse(JSON.stringify(serializable));

ee/spec/javascripts/security_dashboard/store/vulnerabilities/data/mock_data_vulnerabilities.js

 export {
   default,
-} from '../../../../../frontend/security_dashboard/store/vulnerabilities/data/mock_data_vulnerabilities';
+} from '../../../../../frontend/security_dashboard/store/modules/vulnerabilities/data/mock_data_vulnerabilities';