Merge branch '208800-step-2-1-remove-ide-singleton-store' into 'master'

Step 1 - Remove IDE singleton store

See merge request gitlab-org/gitlab!36401

app/assets/javascripts/ide/components/repo_editor.vue

@@ -167,7 +167,7 @@ export default {
   },
   mounted() {
     if (!this.editor) {
-      this.editor = Editor.create(this.editorOptions);
+      this.editor = Editor.create(this.$store, this.editorOptions);
     }
     this.initEditor();
 

app/assets/javascripts/ide/index.js

@@ -3,7 +3,7 @@ import { mapActions } from 'vuex';
 import Translate from '~/vue_shared/translate';
 import { identity } from 'lodash';
 import ide from './components/ide.vue';
-import store from './stores';
+import { createStore } from './stores';
 import { createRouter } from './ide_router';
 import { parseBoolean } from '../lib/utils/common_utils';
 import { resetServiceWorkersPublicPath } from '../lib/utils/webpack';
@@ -32,6 +32,7 @@ export function initIde(el, options = {}) {
   if (!el) return null;
 
   const { rootComponent = ide, extendStore = identity } = options;
+  const store = createStore();
   const router = createRouter(store);
 
   return new Vue({

app/assets/javascripts/ide/lib/editor.js

 import { debounce } from 'lodash';
 import { editor as monacoEditor, KeyCode, KeyMod, Range } from 'monaco-editor';
-import store from '../stores';
 import DecorationsController from './decorations/controller';
 import DirtyDiffController from './diff/controller';
 import Disposable from './common/disposable';
@@ -20,14 +19,14 @@ function setupThemes() {
 }
 
 export default class Editor {
-  static create(options = {}) {
+  static create(...args) {
     if (!this.editorInstance) {
-      this.editorInstance = new Editor(options);
+      this.editorInstance = new Editor(...args);
     }
     return this.editorInstance;
   }
 
-  constructor(options = {}) {
+  constructor(store, options = {}) {
     this.currentModel = null;
     this.instance = null;
     this.dirtyDiffController = null;
@@ -42,6 +41,7 @@ export default class Editor {
       ...defaultDiffEditorOptions,
       ...options,
     };
+    this.store = store;
 
     setupThemes();
     registerLanguages(...languages);
@@ -215,6 +215,7 @@ export default class Editor {
   }
 
   addCommands() {
+    const { store } = this;
     const getKeyCode = key => {
       const monacoKeyMod = key.indexOf('KEY_') === 0;
 

app/assets/javascripts/ide/stores/index.js

@@ -33,5 +33,3 @@ export const createStoreOptions = () => ({
 });
 
 export const createStore = () => new Vuex.Store(createStoreOptions());
-
-export default createStore();

spec/frontend/ide/components/activity_bar_spec.js

 import Vue from 'vue';
-import store from '~/ide/stores';
+import { createStore } from '~/ide/stores';
 import { leftSidebarViews } from '~/ide/constants';
 import ActivityBar from '~/ide/components/activity_bar.vue';
 import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
-import { resetStore } from '../helpers';
 
 describe('IDE activity bar', () => {
   const Component = Vue.extend(ActivityBar);
   let vm;
+  let store;
 
   beforeEach(() => {
+    store = createStore();
+
     Vue.set(store.state.projects, 'abcproject', {
       web_url: 'testing',
     });
@@ -20,8 +22,6 @@ describe('IDE activity bar', () => {
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   describe('updateActivityBarView', () => {

spec/frontend/ide/components/commit_sidebar/empty_state_spec.js

 import Vue from 'vue';
-import store from '~/ide/stores';
+import { createStore } from '~/ide/stores';
 import emptyState from '~/ide/components/commit_sidebar/empty_state.vue';
 import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
-import { resetStore } from '../../helpers';
 
 describe('IDE commit panel empty state', () => {
   let vm;
+  let store;
 
   beforeEach(() => {
+    store = createStore();
+
     const Component = Vue.extend(emptyState);
 
     Vue.set(store.state, 'noChangesStateSvgPath', 'no-changes');
@@ -19,8 +21,6 @@ describe('IDE commit panel empty state', () => {
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   it('renders no changes text when last commit message is empty', () => {

spec/frontend/ide/components/commit_sidebar/form_spec.js

 import Vue from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { projectData } from 'jest/ide/mock_data';
-import store from '~/ide/stores';
+import { createStore } from '~/ide/stores';
 import CommitForm from '~/ide/components/commit_sidebar/form.vue';
 import { leftSidebarViews } from '~/ide/constants';
-import { resetStore } from '../../helpers';
 import waitForPromises from 'helpers/wait_for_promises';
 
 describe('IDE commit form', () => {
   const Component = Vue.extend(CommitForm);
   let vm;
+  let store;
 
   const beginCommitButton = () => vm.$el.querySelector('[data-testid="begin-commit-button"]');
 
   beforeEach(() => {
+    store = createStore();
     store.state.changedFiles.push('test');
     store.state.currentProjectId = 'abcproject';
     store.state.currentBranchId = 'master';
@@ -24,8 +25,6 @@ describe('IDE commit form', () => {
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   it('enables begin commit button when there are changes', () => {

spec/frontend/ide/components/commit_sidebar/list_collapsed_spec.js

 import Vue from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
-import store from '~/ide/stores';
+import { createStore } from '~/ide/stores';
 import listCollapsed from '~/ide/components/commit_sidebar/list_collapsed.vue';
 import { file } from '../../helpers';
 import { removeWhitespace } from '../../../helpers/text_helper';
 
 describe('Multi-file editor commit sidebar list collapsed', () => {
   let vm;
+  let store;
 
   beforeEach(() => {
+    store = createStore();
+
     const Component = Vue.extend(listCollapsed);
 
     vm = createComponentWithStore(Component, store, {

spec/frontend/ide/components/commit_sidebar/list_spec.js

 import Vue from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
-import store from '~/ide/stores';
+import { createStore } from '~/ide/stores';
 import commitSidebarList from '~/ide/components/commit_sidebar/list.vue';
-import { file, resetStore } from '../../helpers';
+import { file } from '../../helpers';
 
 describe('Multi-file editor commit sidebar list', () => {
+  let store;
   let vm;
 
   beforeEach(() => {
+    store = createStore();
+
     const Component = Vue.extend(commitSidebarList);
 
     vm = createComponentWithStore(Component, store, {
@@ -26,8 +29,6 @@ describe('Multi-file editor commit sidebar list', () => {
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   describe('with a list of files', () => {

spec/frontend/ide/components/commit_sidebar/radio_group_spec.js

 import Vue from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
-import { resetStore } from 'jest/ide/helpers';
-import store from '~/ide/stores';
+import { createStore } from '~/ide/stores';
 import radioGroup from '~/ide/components/commit_sidebar/radio_group.vue';
 
 describe('IDE commit sidebar radio group', () => {
   let vm;
+  let store;
 
   beforeEach(done => {
+    store = createStore();
+
     const Component = Vue.extend(radioGroup);
 
     store.state.commit.commitAction = '2';
@@ -25,8 +27,6 @@ describe('IDE commit sidebar radio group', () => {
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   it('uses label if present', () => {

spec/frontend/ide/components/commit_sidebar/success_message_spec.js

 import Vue from 'vue';
-import store from '~/ide/stores';
+import { createStore } from '~/ide/stores';
 import successMessage from '~/ide/components/commit_sidebar/success_message.vue';
 import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
-import { resetStore } from '../../helpers';
 
 describe('IDE commit panel successful commit state', () => {
   let vm;
+  let store;
 
   beforeEach(() => {
+    store = createStore();
+
     const Component = Vue.extend(successMessage);
 
     vm = createComponentWithStore(Component, store, {
@@ -19,8 +21,6 @@ describe('IDE commit panel successful commit state', () => {
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   it('renders last commit message when it exists', done => {

spec/frontend/ide/components/file_row_extra_spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { createStore } from '~/ide/stores';
 import FileRowExtra from '~/ide/components/file_row_extra.vue';
-import { file, resetStore } from '../helpers';
+import { file } from '../helpers';
 
 describe('IDE extra file row component', () => {
   let Component;
@@ -32,7 +32,6 @@ describe('IDE extra file row component', () => {
 
   afterEach(() => {
     vm.$destroy();
-    resetStore(vm.$store);
 
     stagedFilesCount = 0;
     unstagedFilesCount = 0;

spec/frontend/ide/components/file_templates/bar_spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { createStore } from '~/ide/stores';
 import Bar from '~/ide/components/file_templates/bar.vue';
-import { resetStore, file } from '../../helpers';
+import { file } from '../../helpers';
 
 describe('IDE file templates bar component', () => {
   let Component;
@@ -26,7 +26,6 @@ describe('IDE file templates bar component', () => {
 
   afterEach(() => {
     vm.$destroy();
-    resetStore(vm.$store);
   });
 
   describe('template type dropdown', () => {

spec/frontend/ide/components/ide_review_spec.js

@@ -3,7 +3,7 @@ import IdeReview from '~/ide/components/ide_review.vue';
 import { createStore } from '~/ide/stores';
 import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
 import { trimText } from '../../helpers/text_helper';
-import { resetStore, file } from '../helpers';
+import { file } from '../helpers';
 import { projectData } from '../mock_data';
 
 describe('IDE review mode', () => {
@@ -26,8 +26,6 @@ describe('IDE review mode', () => {
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   it('renders list of files', () => {

spec/frontend/ide/components/ide_side_bar_spec.js

 import Vue from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
-import store from '~/ide/stores';
+import { createStore } from '~/ide/stores';
 import ideSidebar from '~/ide/components/ide_side_bar.vue';
 import { leftSidebarViews } from '~/ide/constants';
-import { resetStore } from '../helpers';
 import { projectData } from '../mock_data';
 
 describe('IdeSidebar', () => {
   let vm;
+  let store;
 
   beforeEach(() => {
+    store = createStore();
+
     const Component = Vue.extend(ideSidebar);
 
     store.state.currentProjectId = 'abcproject';
@@ -20,8 +22,6 @@ describe('IdeSidebar', () => {
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   it('renders a sidebar', () => {

spec/frontend/ide/components/ide_spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { createStore } from '~/ide/stores';
 import ide from '~/ide/components/ide.vue';
-import { file, resetStore } from '../helpers';
+import { file } from '../helpers';
 import { projectData } from '../mock_data';
 import extendStore from '~/ide/stores/extend';
 
@@ -41,8 +41,6 @@ describe('ide component, empty repo', () => {
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   it('renders "New file" button in empty repo', done => {
@@ -63,8 +61,6 @@ describe('ide component, non-empty repo', () => {
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   it('shows error message when set', done => {

spec/frontend/ide/components/ide_tree_list_spec.js

 import Vue from 'vue';
 import IdeTreeList from '~/ide/components/ide_tree_list.vue';
-import store from '~/ide/stores';
+import { createStore } from '~/ide/stores';
 import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
-import { resetStore, file } from '../helpers';
+import { file } from '../helpers';
 import { projectData } from '../mock_data';
 
 describe('IDE tree list', () => {
@@ -10,6 +10,7 @@ describe('IDE tree list', () => {
   const normalBranchTree = [file('fileName')];
   const emptyBranchTree = [];
   let vm;
+  let store;
 
   const bootstrapWithTree = (tree = normalBranchTree) => {
     store.state.currentProjectId = 'abcproject';
@@ -25,10 +26,12 @@ describe('IDE tree list', () => {
     });
   };
 
+  beforeEach(() => {
+    store = createStore();
+  });
+
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   describe('normal branch', () => {

spec/frontend/ide/components/ide_tree_spec.js

 import Vue from 'vue';
 import IdeTree from '~/ide/components/ide_tree.vue';
-import store from '~/ide/stores';
+import { createStore } from '~/ide/stores';
 import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
-import { resetStore, file } from '../helpers';
+import { file } from '../helpers';
 import { projectData } from '../mock_data';
 
 describe('IdeRepoTree', () => {
+  let store;
   let vm;
 
   beforeEach(() => {
+    store = createStore();
+
     const IdeRepoTree = Vue.extend(IdeTree);
 
     store.state.currentProjectId = 'abcproject';
@@ -24,8 +27,6 @@ describe('IdeRepoTree', () => {
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   it('renders list of files', () => {

spec/frontend/ide/components/new_dropdown/index_spec.js

 import Vue from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
-import store from '~/ide/stores';
+import { createStore } from '~/ide/stores';
 import newDropdown from '~/ide/components/new_dropdown/index.vue';
-import { resetStore } from '../../helpers';
 
 describe('new dropdown component', () => {
+  let store;
   let vm;
 
   beforeEach(() => {
+    store = createStore();
+
     const component = Vue.extend(newDropdown);
 
     vm = createComponentWithStore(component, store, {
@@ -30,8 +32,6 @@ describe('new dropdown component', () => {
 
   afterEach(() => {
     vm.$destroy();
-
-    resetStore(vm.$store);
   });
 
   it('renders new file, upload and new directory links', () => {

spec/frontend/ide/helpers.js

 import * as pathUtils from 'path';
 import { decorateData } from '~/ide/stores/utils';
-import state from '~/ide/stores/state';
-import commitState from '~/ide/stores/modules/commit/state';
-import mergeRequestsState from '~/ide/stores/modules/merge_requests/state';
-import pipelinesState from '~/ide/stores/modules/pipelines/state';
-import branchesState from '~/ide/stores/modules/branches/state';
-import fileTemplatesState from '~/ide/stores/modules/file_templates/state';
-import paneState from '~/ide/stores/modules/pane/state';
-
-export const resetStore = store => {
-  const newState = {
-    ...state(),
-    commit: commitState(),
-    mergeRequests: mergeRequestsState(),
-    pipelines: pipelinesState(),
-    branches: branchesState(),
-    fileTemplates: fileTemplatesState(),
-    rightPane: paneState(),
-  };
-  store.replaceState(newState);
-};
 
 export const file = (name = 'name', id = name, type = '', parent = null) =>
   decorateData({

spec/frontend/ide/lib/decorations/controller_spec.js

@@ -2,14 +2,17 @@ import Editor from '~/ide/lib/editor';
 import DecorationsController from '~/ide/lib/decorations/controller';
 import Model from '~/ide/lib/common/model';
 import { file } from '../../helpers';
+import { createStore } from '~/ide/stores';
 
 describe('Multi-file editor library decorations controller', () => {
   let editorInstance;
   let controller;
   let model;
+  let store;
 
   beforeEach(() => {
-    editorInstance = Editor.create();
+    store = createStore();
+    editorInstance = Editor.create(store);
     editorInstance.createInstance(document.createElement('div'));
 
     controller = new DecorationsController(editorInstance);

spec/frontend/ide/lib/diff/controller_spec.js

@@ -4,6 +4,7 @@ import ModelManager from '~/ide/lib/common/model_manager';
 import DecorationsController from '~/ide/lib/decorations/controller';
 import DirtyDiffController, { getDiffChangeType, getDecorator } from '~/ide/lib/diff/controller';
 import { computeDiff } from '~/ide/lib/diff/diff';
+import { createStore } from '~/ide/stores';
 import { file } from '../../helpers';
 
 describe('Multi-file editor library dirty diff controller', () => {
@@ -12,9 +13,12 @@ describe('Multi-file editor library dirty diff controller', () => {
   let modelManager;
   let decorationsController;
   let model;
+  let store;
 
   beforeEach(() => {
-    editorInstance = Editor.create();
+    store = createStore();
+
+    editorInstance = Editor.create(store);
     editorInstance.createInstance(document.createElement('div'));
 
     modelManager = new ModelManager();

spec/frontend/ide/lib/editor_spec.js

@@ -5,6 +5,7 @@ import {
   Selection,
 } from 'monaco-editor';
 import Editor from '~/ide/lib/editor';
+import { createStore } from '~/ide/stores';
 import { defaultEditorOptions } from '~/ide/lib/editor_options';
 import { file } from '../helpers';
 
@@ -12,6 +13,7 @@ describe('Multi-file editor library', () => {
   let instance;
   let el;
   let holder;
+  let store;
 
   const setNodeOffsetWidth = val => {
     Object.defineProperty(instance.instance.getDomNode(), 'offsetWidth', {
@@ -22,13 +24,14 @@ describe('Multi-file editor library', () => {
   };
 
   beforeEach(() => {
+    store = createStore();
     el = document.createElement('div');
     holder = document.createElement('div');
     el.appendChild(holder);
 
     document.body.appendChild(el);
 
-    instance = Editor.create();
+    instance = Editor.create(store);
   });
 
   afterEach(() => {
@@ -44,7 +47,7 @@ describe('Multi-file editor library', () => {
   });
 
   it('creates instance returns cached instance', () => {
-    expect(Editor.create()).toEqual(instance);
+    expect(Editor.create(store)).toEqual(instance);
   });
 
   describe('createInstance', () => {

spec/frontend/ide/stores/actions/merge_request_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
-import store from '~/ide/stores';
+import { createStore } from '~/ide/stores';
 import createFlash from '~/flash';
 import {
   getMergeRequestData,
@@ -10,7 +10,6 @@ import {
 } from '~/ide/stores/actions/merge_request';
 import service from '~/ide/services';
 import { leftSidebarViews, PERMISSION_READ_MR } from '~/ide/constants';
-import { resetStore } from '../../helpers';
 
 const TEST_PROJECT = 'abcproject';
 const TEST_PROJECT_ID = 17;
@@ -18,9 +17,12 @@ const TEST_PROJECT_ID = 17;
 jest.mock('~/flash');
 
 describe('IDE store merge request actions', () => {
+  let store;
   let mock;
 
   beforeEach(() => {
+    store = createStore();
+
     mock = new MockAdapter(axios);
 
     store.state.projects[TEST_PROJECT] = {
@@ -34,7 +36,6 @@ describe('IDE store merge request actions', () => {
 
   afterEach(() => {
     mock.restore();
-    resetStore(store);
   });
 
   describe('getMergeRequestsForBranch', () => {