Use a factory function in the security apps store

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -9,7 +9,7 @@ import eventHub from './event_hub';
 
 import SecurityReportApp from 'ee/vue_shared/security_reports/split_security_reports_app.vue'; // eslint-disable-line import/first
 import SastSummaryWidget from 'ee/pipelines/components/security_reports/report_summary_widget.vue'; // eslint-disable-line import/first
-import store from 'ee/vue_shared/security_reports/store'; // eslint-disable-line import/first
+import createStore from 'ee/vue_shared/security_reports/store'; // eslint-disable-line import/first
 
 Vue.use(Translate);
 
@@ -116,6 +116,8 @@ export default () => {
     const vulnerabilityFeedbackPath = datasetOptions.vulnerabilityFeedbackPath;
     const vulnerabilityFeedbackHelpPath = datasetOptions.vulnerabilityFeedbackHelpPath;
     const pipelineId = parseInt(datasetOptions.pipelineId, 10);
+
+    const store = createStore();
     // Widget summary
     // eslint-disable-next-line no-new
     new Vue({

ee/app/assets/javascripts/vue_shared/security_reports/grouped_security_reports_app.vue

 <script>
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { SAST, DAST, SAST_CONTAINER } from './store/constants';
-import store from './store';
+import createStore from './store';
 import ReportSection from './components/report_section.vue';
 import SummaryRow from './components/summary_row.vue';
 import IssuesList from './components/issues_list.vue';
@@ -9,7 +9,7 @@ import IssueModal from './components/modal.vue';
 import securityReportsMixin from './mixins/security_report_mixin';
 
 export default {
-  store,
+  store: createStore(),
   components: {
     ReportSection,
     SummaryRow,

ee/app/assets/javascripts/vue_shared/security_reports/split_security_reports_app.vue

@@ -3,14 +3,12 @@ import { mapActions, mapState } from 'vuex';
 import { s__, sprintf, n__ } from '~/locale';
 import createFlash from '~/flash';
 import { SAST } from './store/constants';
-import store from './store';
 import ReportSection from './components/report_section.vue';
 import IssueModal from './components/modal.vue';
 import mixin from './mixins/security_report_mixin';
 import reportsMixin from './mixins/reports_mixin';
 
 export default {
-  store,
   components: {
     ReportSection,
     IssueModal,

ee/app/assets/javascripts/vue_shared/security_reports/store/index.js

@@ -7,11 +7,9 @@ import state from './state';
 
 Vue.use(Vuex);
 
-const store = new Vuex.Store({
+export default () => new Vuex.Store({
   actions,
   getters,
   mutations,
   state: state(),
 });
-
-export default store;

spec/javascripts/vue_shared/security_reports/components/modal_spec.js

 import Vue from 'vue';
 import component from 'ee/vue_shared/security_reports/components/modal.vue';
-import store from 'ee/vue_shared/security_reports/store';
+import createStore from 'ee/vue_shared/security_reports/store';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 
 describe('Security Reports modal', () => {
   const Component = Vue.extend(component);
   let vm;
+  const store = createStore();
 
   beforeEach(() => {
     store.dispatch('setVulnerabilityFeedbackPath', 'path');

spec/javascripts/vue_shared/security_reports/split_security_reports_app_spec.js

@@ -2,9 +2,9 @@ import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import component from 'ee/vue_shared/security_reports/split_security_reports_app.vue';
+import createStore from 'ee/vue_shared/security_reports/store';
 import state from 'ee/vue_shared/security_reports/store/state';
-
-import mountComponent from '../../helpers/vue_mount_component_helper';
+import { mountComponentWithStore } from '../../helpers/vue_mount_component_helper';
 import { sastIssues } from './mock_data';
 
 describe('Slipt security reports app', () => {
@@ -36,16 +36,19 @@ describe('Slipt security reports app', () => {
       mock.onGet('dss_head.json').reply(200, sastIssues);
       mock.onGet('vulnerability_feedback_path.json').reply(200, []);
 
-      vm = mountComponent(Component, {
-        headBlobPath: 'path',
-        baseBlobPath: 'path',
-        sastHeadPath: 'sast_head.json',
-        dependencyScanningHeadPath: 'dss_head.json',
-        sastHelpPath: 'path',
-        dependencyScanningHelpPath: 'path',
-        vulnerabilityFeedbackPath: 'vulnerability_feedback_path.json',
-        vulnerabilityFeedbackHelpPath: 'path',
-        pipelineId: 123,
+      vm = mountComponentWithStore(Component, {
+        store: createStore(),
+        props: {
+          headBlobPath: 'path',
+          baseBlobPath: 'path',
+          sastHeadPath: 'sast_head.json',
+          dependencyScanningHeadPath: 'dss_head.json',
+          sastHelpPath: 'path',
+          dependencyScanningHelpPath: 'path',
+          vulnerabilityFeedbackPath: 'vulnerability_feedback_path.json',
+          vulnerabilityFeedbackHelpPath: 'path',
+          pipelineId: 123,
+        },
       });
     });
 
@@ -63,16 +66,19 @@ describe('Slipt security reports app', () => {
       mock.onGet('dss_head.json').reply(200, sastIssues);
       mock.onGet('vulnerability_feedback_path.json').reply(200, []);
 
-      vm = mountComponent(Component, {
-        headBlobPath: 'path',
-        baseBlobPath: 'path',
-        sastHeadPath: 'sast_head.json',
-        dependencyScanningHeadPath: 'dss_head.json',
-        sastHelpPath: 'path',
-        dependencyScanningHelpPath: 'path',
-        vulnerabilityFeedbackPath: 'vulnerability_feedback_path.json',
-        vulnerabilityFeedbackHelpPath: 'path',
-        pipelineId: 123,
+      vm = mountComponentWithStore(Component, {
+        store: createStore(),
+        props: {
+          headBlobPath: 'path',
+          baseBlobPath: 'path',
+          sastHeadPath: 'sast_head.json',
+          dependencyScanningHeadPath: 'dss_head.json',
+          sastHelpPath: 'path',
+          dependencyScanningHelpPath: 'path',
+          vulnerabilityFeedbackPath: 'vulnerability_feedback_path.json',
+          vulnerabilityFeedbackHelpPath: 'path',
+          pipelineId: 123,
+        },
       });
     });
 
@@ -96,16 +102,19 @@ describe('Slipt security reports app', () => {
       mock.onGet('dss_head.json').reply(500);
       mock.onGet('vulnerability_feedback_path.json').reply(500, []);
 
-      vm = mountComponent(Component, {
-        headBlobPath: 'path',
-        baseBlobPath: 'path',
-        sastHeadPath: 'sast_head.json',
-        dependencyScanningHeadPath: 'dss_head.json',
-        sastHelpPath: 'path',
-        dependencyScanningHelpPath: 'path',
-        vulnerabilityFeedbackPath: 'vulnerability_feedback_path.json',
-        vulnerabilityFeedbackHelpPath: 'path',
-        pipelineId: 123,
+      vm = mountComponentWithStore(Component, {
+        store: createStore(),
+        props: {
+          headBlobPath: 'path',
+          baseBlobPath: 'path',
+          sastHeadPath: 'sast_head.json',
+          dependencyScanningHeadPath: 'dss_head.json',
+          sastHelpPath: 'path',
+          dependencyScanningHelpPath: 'path',
+          vulnerabilityFeedbackPath: 'vulnerability_feedback_path.json',
+          vulnerabilityFeedbackHelpPath: 'path',
+          pipelineId: 123,
+        },
       });
     });