Pass initial state to store creation function

This commit updates the Release Edit and Show pages to pass their
initial Vuex store state as a parameter to the store creation function
rather than setting this state data using a `setInitialState` action.

app/assets/javascripts/releases/mount_edit.js

 import Vue from 'vue';
 import ReleaseEditApp from './components/app_edit.vue';
 import createStore from './stores';
-import detailModule from './stores/modules/detail';
+import createDetailModule from './stores/modules/detail';
 
 export default () => {
   const el = document.getElementById('js-edit-release-page');
 
   const store = createStore({
     modules: {
-      detail: detailModule,
+      detail: createDetailModule(el.dataset),
     },
     featureFlags: {
       releaseShowPage: Boolean(gon.features?.releaseShowPage),
     },
   });
 
-  store.dispatch('detail/setInitialState', el.dataset);
-
   return new Vue({
     el,
     store,

app/assets/javascripts/releases/mount_show.js

 import Vue from 'vue';
 import ReleaseShowApp from './components/app_show.vue';
 import createStore from './stores';
-import detailModule from './stores/modules/detail';
+import createDetailModule from './stores/modules/detail';
 
 export default () => {
   const el = document.getElementById('js-show-release-page');
 
   const store = createStore({
     modules: {
-      detail: detailModule,
+      detail: createDetailModule(el.dataset),
     },
   });
-  store.dispatch('detail/setInitialState', el.dataset);
 
   return new Vue({
     el,

app/assets/javascripts/releases/stores/modules/detail/actions.js

@@ -5,9 +5,6 @@ import { s__ } from '~/locale';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
-export const setInitialState = ({ commit }, initialState) =>
-  commit(types.SET_INITIAL_STATE, initialState);
-
 export const requestRelease = ({ commit }) => commit(types.REQUEST_RELEASE);
 export const receiveReleaseSuccess = ({ commit }, data) =>
   commit(types.RECEIVE_RELEASE_SUCCESS, data);

app/assets/javascripts/releases/stores/modules/detail/index.js

 import * as actions from './actions';
 import mutations from './mutations';
-import state from './state';
+import createState from './state';
 
-export default {
+export default initialState => ({
   namespaced: true,
   actions,
   mutations,
-  state,
-};
+  state: createState(initialState),
+});

app/assets/javascripts/releases/stores/modules/detail/mutation_types.js

-export const SET_INITIAL_STATE = 'SET_INITIAL_STATE';
-
 export const REQUEST_RELEASE = 'REQUEST_RELEASE';
 export const RECEIVE_RELEASE_SUCCESS = 'RECEIVE_RELEASE_SUCCESS';
 export const RECEIVE_RELEASE_ERROR = 'RECEIVE_RELEASE_ERROR';

app/assets/javascripts/releases/stores/modules/detail/mutations.js

 import * as types from './mutation_types';
 
 export default {
-  [types.SET_INITIAL_STATE](state, initialState) {
-    Object.keys(state).forEach(key => {
-      state[key] = initialState[key];
-    });
-  },
-
   [types.REQUEST_RELEASE](state) {
     state.isFetchingRelease = true;
   },

app/assets/javascripts/releases/stores/modules/detail/state.js

-export default () => ({
-  projectId: null,
-  tagName: null,
-  releasesPagePath: null,
-  markdownDocsPath: null,
-  markdownPreviewPath: null,
-  updateReleaseApiDocsPath: null,
+export default ({
+  projectId,
+  tagName,
+  releasesPagePath,
+  markdownDocsPath,
+  markdownPreviewPath,
+  updateReleaseApiDocsPath,
+}) => ({
+  projectId,
+  tagName,
+  releasesPagePath,
+  markdownDocsPath,
+  markdownPreviewPath,
+  updateReleaseApiDocsPath,
 
   release: null,
 

spec/frontend/releases/stores/modules/detail/actions_spec.js

@@ -24,7 +24,14 @@ describe('Release detail actions', () => {
   let error;
 
   beforeEach(() => {
-    state = createState();
+    state = createState({
+      projectId: '18',
+      tagName: 'v1.3',
+      releasesPagePath: 'path/to/releases/page',
+      markdownDocsPath: 'path/to/markdown/docs',
+      markdownPreviewPath: 'path/to/markdown/preview',
+      updateReleaseApiDocsPath: 'path/to/api/docs',
+    });
     release = cloneDeep(originalRelease);
     mock = new MockAdapter(axios);
     gon.api_version = 'v4';
@@ -36,16 +43,6 @@ describe('Release detail actions', () => {
     mock.restore();
   });
 
-  describe('setInitialState', () => {
-    it(`commits ${types.SET_INITIAL_STATE} with the provided object`, () => {
-      const initialState = {};
-
-      return testAction(actions.setInitialState, initialState, state, [
-        { type: types.SET_INITIAL_STATE, payload: initialState },
-      ]);
-    });
-  });
-
   describe('requestRelease', () => {
     it(`commits ${types.REQUEST_RELEASE}`, () =>
       testAction(actions.requestRelease, undefined, state, [{ type: types.REQUEST_RELEASE }]));

spec/frontend/releases/stores/modules/detail/mutations_spec.js

@@ -5,115 +5,106 @@
  * is resolved
  */
 
-import state from '~/releases/stores/modules/detail/state';
+import createState from '~/releases/stores/modules/detail/state';
 import mutations from '~/releases/stores/modules/detail/mutations';
 import * as types from '~/releases/stores/modules/detail/mutation_types';
 import { release } from '../../../mock_data';
 
 describe('Release detail mutations', () => {
-  let stateClone;
+  let state;
   let releaseClone;
 
   beforeEach(() => {
-    stateClone = state();
-    releaseClone = JSON.parse(JSON.stringify(release));
-  });
-
-  describe(types.SET_INITIAL_STATE, () => {
-    it('populates the state with initial values', () => {
-      const initialState = {
+    state = createState({
       projectId: '18',
       tagName: 'v1.3',
       releasesPagePath: 'path/to/releases/page',
       markdownDocsPath: 'path/to/markdown/docs',
       markdownPreviewPath: 'path/to/markdown/preview',
-      };
-
-      mutations[types.SET_INITIAL_STATE](stateClone, initialState);
-
-      expect(stateClone).toEqual(expect.objectContaining(initialState));
+      updateReleaseApiDocsPath: 'path/to/api/docs',
     });
+    releaseClone = JSON.parse(JSON.stringify(release));
   });
 
   describe(types.REQUEST_RELEASE, () => {
     it('set state.isFetchingRelease to true', () => {
-      mutations[types.REQUEST_RELEASE](stateClone);
+      mutations[types.REQUEST_RELEASE](state);
 
-      expect(stateClone.isFetchingRelease).toEqual(true);
+      expect(state.isFetchingRelease).toEqual(true);
     });
   });
 
   describe(types.RECEIVE_RELEASE_SUCCESS, () => {
     it('handles a successful response from the server', () => {
-      mutations[types.RECEIVE_RELEASE_SUCCESS](stateClone, releaseClone);
+      mutations[types.RECEIVE_RELEASE_SUCCESS](state, releaseClone);
 
-      expect(stateClone.fetchError).toEqual(undefined);
+      expect(state.fetchError).toEqual(undefined);
 
-      expect(stateClone.isFetchingRelease).toEqual(false);
+      expect(state.isFetchingRelease).toEqual(false);
 
-      expect(stateClone.release).toEqual(releaseClone);
+      expect(state.release).toEqual(releaseClone);
     });
   });
 
   describe(types.RECEIVE_RELEASE_ERROR, () => {
     it('handles an unsuccessful response from the server', () => {
       const error = { message: 'An error occurred!' };
-      mutations[types.RECEIVE_RELEASE_ERROR](stateClone, error);
+      mutations[types.RECEIVE_RELEASE_ERROR](state, error);
 
-      expect(stateClone.isFetchingRelease).toEqual(false);
+      expect(state.isFetchingRelease).toEqual(false);
 
-      expect(stateClone.release).toBeUndefined();
+      expect(state.release).toBeUndefined();
 
-      expect(stateClone.fetchError).toEqual(error);
+      expect(state.fetchError).toEqual(error);
     });
   });
 
   describe(types.UPDATE_RELEASE_TITLE, () => {
     it("updates the release's title", () => {
-      stateClone.release = releaseClone;
+      state.release = releaseClone;
       const newTitle = 'The new release title';
-      mutations[types.UPDATE_RELEASE_TITLE](stateClone, newTitle);
+      mutations[types.UPDATE_RELEASE_TITLE](state, newTitle);
 
-      expect(stateClone.release.name).toEqual(newTitle);
+      expect(state.release.name).toEqual(newTitle);
     });
   });
 
   describe(types.UPDATE_RELEASE_NOTES, () => {
     it("updates the release's notes", () => {
-      stateClone.release = releaseClone;
+      state.release = releaseClone;
       const newNotes = 'The new release notes';
-      mutations[types.UPDATE_RELEASE_NOTES](stateClone, newNotes);
+      mutations[types.UPDATE_RELEASE_NOTES](state, newNotes);
 
-      expect(stateClone.release.description).toEqual(newNotes);
+      expect(state.release.description).toEqual(newNotes);
     });
   });
 
   describe(types.REQUEST_UPDATE_RELEASE, () => {
     it('set state.isUpdatingRelease to true', () => {
-      mutations[types.REQUEST_UPDATE_RELEASE](stateClone);
+      mutations[types.REQUEST_UPDATE_RELEASE](state);
 
-      expect(stateClone.isUpdatingRelease).toEqual(true);
+      expect(state.isUpdatingRelease).toEqual(true);
     });
   });
 
   describe(types.RECEIVE_UPDATE_RELEASE_SUCCESS, () => {
     it('handles a successful response from the server', () => {
-      mutations[types.RECEIVE_UPDATE_RELEASE_SUCCESS](stateClone, releaseClone);
+      mutations[types.RECEIVE_UPDATE_RELEASE_SUCCESS](state, releaseClone);
 
-      expect(stateClone.updateError).toEqual(undefined);
+      expect(state.updateError).toEqual(undefined);
 
-      expect(stateClone.isUpdatingRelease).toEqual(false);
+      expect(state.isUpdatingRelease).toEqual(false);
     });
   });
 
   describe(types.RECEIVE_UPDATE_RELEASE_ERROR, () => {
     it('handles an unsuccessful response from the server', () => {
       const error = { message: 'An error occurred!' };
-      mutations[types.RECEIVE_UPDATE_RELEASE_ERROR](stateClone, error);
+      mutations[types.RECEIVE_UPDATE_RELEASE_ERROR](state, error);
 
-      expect(stateClone.isUpdatingRelease).toEqual(false);
+      expect(state.isUpdatingRelease).toEqual(false);
 
-      expect(stateClone.updateError).toEqual(error);
+      expect(state.updateError).toEqual(error);
     });
   });
 });