Reorganize releases/** code in preparation for "show" page

This commit updates the releases/** code to allow more Vuex pages to be
added in the future. In particular, this work is in preparation for the
new dedicated Release page (a "show" page) being added in the
near future.

app/assets/javascripts/pages/projects/releases/edit/index.js

 import ZenMode from '~/zen_mode';
-import initEditRelease from '~/releases/detail';
+import initEditRelease from '~/releases/mount_edit';
 
 document.addEventListener('DOMContentLoaded', () => {
   new ZenMode(); // eslint-disable-line no-new

app/assets/javascripts/pages/projects/releases/index/index.js

-import initReleases from '~/releases/list';
+import initReleases from '~/releases/mount_index';
 
 document.addEventListener('DOMContentLoaded', initReleases);

app/assets/javascripts/releases/detail/components/app.vue → app/assets/javascripts/releases/components/app_edit.vue

@@ -7,7 +7,7 @@ import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
 
 export default {
-  name: 'ReleaseDetailApp',
+  name: 'ReleaseEditApp',
   components: {
     GlFormInput,
     GlFormGroup,
@@ -18,7 +18,7 @@ export default {
     autofocusonshow,
   },
   computed: {
-    ...mapState([
+    ...mapState('detail', [
       'isFetchingRelease',
       'fetchError',
       'markdownDocsPath',
@@ -42,7 +42,7 @@ export default {
       );
     },
     tagName() {
-      return this.$store.state.release.tagName;
+      return this.$store.state.detail.release.tagName;
     },
     tagNameHintText() {
       return sprintf(
@@ -60,7 +60,7 @@ export default {
     },
     releaseTitle: {
       get() {
-        return this.$store.state.release.name;
+        return this.$store.state.detail.release.name;
       },
       set(title) {
         this.updateReleaseTitle(title);
@@ -68,7 +68,7 @@ export default {
     },
     releaseNotes: {
       get() {
-        return this.$store.state.release.description;
+        return this.$store.state.detail.release.description;
       },
       set(notes) {
         this.updateReleaseNotes(notes);
@@ -79,7 +79,7 @@ export default {
     this.fetchRelease();
   },
   methods: {
-    ...mapActions([
+    ...mapActions('detail', [
       'fetchRelease',
       'updateRelease',
       'updateReleaseTitle',

app/assets/javascripts/releases/list/components/app.vue → app/assets/javascripts/releases/components/app_index.vue

@@ -32,7 +32,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['isLoading', 'releases', 'hasError', 'pageInfo']),
+    ...mapState('list', ['isLoading', 'releases', 'hasError', 'pageInfo']),
     shouldRenderEmptyState() {
       return !this.releases.length && !this.hasError && !this.isLoading;
     },
@@ -47,7 +47,7 @@ export default {
     });
   },
   methods: {
-    ...mapActions(['fetchReleases']),
+    ...mapActions('list', ['fetchReleases']),
     onChangePage(page) {
       historyPushState(buildUrlWithCurrentLocation(`?page=${page}`));
       this.fetchReleases({ page, projectId: this.projectId });

app/assets/javascripts/releases/list/index.js

-import Vue from 'vue';
-import App from './components/app.vue';
-import createStore from './store';
-
-export default () => {
-  const element = document.getElementById('js-releases-page');
-
-  return new Vue({
-    el: element,
-    store: createStore(),
-    components: {
-      App,
-    },
-    render(createElement) {
-      return createElement('app', {
-        props: {
-          projectId: element.dataset.projectId,
-          documentationLink: element.dataset.documentationPath,
-          illustrationPath: element.dataset.illustrationPath,
-        },
-      });
-    },
-  });
-};

app/assets/javascripts/releases/detail/index.js → app/assets/javascripts/releases/mount_edit.js

 import Vue from 'vue';
-import ReleaseDetailApp from './components/app.vue';
-import createStore from './store';
+import ReleaseEditApp from './components/app_edit.vue';
+import createStore from './stores';
+import detailModule from './stores/modules/detail';
 
 export default () => {
   const el = document.getElementById('js-edit-release-page');
 
-  const store = createStore();
+  const store = createStore({ detail: detailModule });
   store.dispatch('setInitialState', el.dataset);
 
   return new Vue({
     el,
     store,
-    components: { ReleaseDetailApp },
-    render(createElement) {
-      return createElement('release-detail-app');
-    },
+    render: h => h(ReleaseEditApp),
   });
 };

app/assets/javascripts/releases/mount_index.js

+import Vue from 'vue';
+import ReleaseListApp from './components/app_index.vue';
+import createStore from './stores';
+import listModule from './stores/modules/list';
+
+export default () => {
+  const el = document.getElementById('js-releases-page');
+
+  return new Vue({
+    el,
+    store: createStore({ list: listModule }),
+    render: h =>
+      h(ReleaseListApp, {
+        props: {
+          projectId: el.dataset.projectId,
+          documentationLink: el.dataset.documentationPath,
+          illustrationPath: el.dataset.illustrationPath,
+        },
+      }),
+  });
+};

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

+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default modules => new Vuex.Store({ modules });

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

-import Vue from 'vue';
-import Vuex from 'vuex';
 import * as actions from './actions';
 import mutations from './mutations';
 import state from './state';
 
-Vue.use(Vuex);
-
-export default () =>
-  new Vuex.Store({
-    actions,
-    mutations,
-    state,
-  });
+export default {
+  namespaced: true,
+  actions,
+  mutations,
+  state,
+};

app/assets/javascripts/releases/list/store/index.js → app/assets/javascripts/releases/stores/modules/list/index.js

-import Vue from 'vue';
-import Vuex from 'vuex';
 import state from './state';
 import * as actions from './actions';
 import mutations from './mutations';
 
-Vue.use(Vuex);
-
-export default () =>
-  new Vuex.Store({
-    actions,
-    mutations,
-    state: state(),
-  });
+export default {
+  namespaced: true,
+  actions,
+  mutations,
+  state,
+};

spec/frontend/releases/detail/components/app_spec.js → spec/frontend/releases/components/app_edit_spec.js

 import Vuex from 'vuex';
 import { mount } from '@vue/test-utils';
-import ReleaseDetailApp from '~/releases/detail/components/app.vue';
-import { release } from '../../mock_data';
+import ReleaseEditApp from '~/releases/components/app_edit.vue';
+import { release } from '../mock_data';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
-describe('Release detail component', () => {
+describe('Release edit component', () => {
   let wrapper;
   let releaseClone;
   let actions;
@@ -27,9 +27,17 @@ describe('Release detail component', () => {
       navigateToReleasesPage: jest.fn(),
     };
 
-    const store = new Vuex.Store({ actions, state });
+    const store = new Vuex.Store({
+      modules: {
+        detail: {
+          namespaced: true,
+          actions,
+          state,
+        },
+      },
+    });
 
-    wrapper = mount(ReleaseDetailApp, {
+    wrapper = mount(ReleaseEditApp, {
       store,
     });
 

spec/frontend/releases/list/components/evidence_block_spec.js → spec/frontend/releases/components/evidence_block_spec.js

@@ -2,8 +2,8 @@ import { mount } from '@vue/test-utils';
 import { GlLink } from '@gitlab/ui';
 import { truncateSha } from '~/lib/utils/text_utility';
 import Icon from '~/vue_shared/components/icon.vue';
-import { release } from '../../mock_data';
-import EvidenceBlock from '~/releases/list/components/evidence_block.vue';
+import { release } from '../mock_data';
+import EvidenceBlock from '~/releases/components/evidence_block.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 describe('Evidence Block', () => {

spec/frontend/releases/list/components/release_block_footer_spec.js → spec/frontend/releases/components/release_block_footer_spec.js

 import { mount } from '@vue/test-utils';
 import { GlLink } from '@gitlab/ui';
 import { trimText } from 'helpers/text_helper';
-import ReleaseBlockFooter from '~/releases/list/components/release_block_footer.vue';
+import ReleaseBlockFooter from '~/releases/components/release_block_footer.vue';
 import Icon from '~/vue_shared/components/icon.vue';
-import { release } from '../../mock_data';
+import { release } from '../mock_data';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 jest.mock('~/vue_shared/mixins/timeago', () => ({

spec/frontend/releases/list/components/release_block_header_spec.js → spec/frontend/releases/components/release_block_header_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { cloneDeep, merge } from 'lodash';
 import { GlLink } from '@gitlab/ui';
-import ReleaseBlockHeader from '~/releases/list/components/release_block_header.vue';
+import ReleaseBlockHeader from '~/releases/components/release_block_header.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import { release as originalRelease } from '../../mock_data';
+import { release as originalRelease } from '../mock_data';
 
 describe('Release block header', () => {
   let wrapper;

spec/frontend/releases/list/components/release_block_milestone_info_spec.js → spec/frontend/releases/components/release_block_milestone_info_spec.js

 import { mount } from '@vue/test-utils';
 import { GlProgressBar, GlLink, GlBadge, GlButton } from '@gitlab/ui';
 import { trimText } from 'helpers/text_helper';
-import ReleaseBlockMilestoneInfo from '~/releases/list/components/release_block_milestone_info.vue';
-import { milestones } from '../../mock_data';
-import { MAX_MILESTONES_TO_DISPLAY } from '~/releases/list/constants';
+import ReleaseBlockMilestoneInfo from '~/releases/components/release_block_milestone_info.vue';
+import { milestones } from '../mock_data';
+import { MAX_MILESTONES_TO_DISPLAY } from '~/releases/constants';
 
 describe('Release block milestone info', () => {
   let wrapper;

spec/frontend/releases/list/components/release_block_spec.js → spec/frontend/releases/components/release_block_spec.js

 import $ from 'jquery';
 import { mount } from '@vue/test-utils';
 import { first } from 'underscore';
-import EvidenceBlock from '~/releases/list/components/evidence_block.vue';
-import ReleaseBlock from '~/releases/list/components/release_block.vue';
-import ReleaseBlockFooter from '~/releases/list/components/release_block_footer.vue';
+import EvidenceBlock from '~/releases/components/evidence_block.vue';
+import ReleaseBlock from '~/releases/components/release_block.vue';
+import ReleaseBlockFooter from '~/releases/components/release_block_footer.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
-import { release } from '../../mock_data';
+import { release } from '../mock_data';
 import Icon from '~/vue_shared/components/icon.vue';
 import { scrollToElement } from '~/lib/utils/common_utils';
 

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

 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
-import * as actions from '~/releases/detail/store/actions';
-import * as types from '~/releases/detail/store/mutation_types';
-import { release } from '../../mock_data';
-import state from '~/releases/detail/store/state';
+import * as actions from '~/releases/stores/modules/detail/actions';
+import * as types from '~/releases/stores/modules/detail/mutation_types';
+import { release } from '../../../mock_data';
+import state from '~/releases/stores/modules/detail/state';
 import createFlash from '~/flash';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';

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

@@ -5,10 +5,10 @@
  * is resolved
  */
 
-import state from '~/releases/detail/store/state';
-import mutations from '~/releases/detail/store/mutations';
-import * as types from '~/releases/detail/store/mutation_types';
-import { release } from '../../mock_data';
+import state 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;

spec/javascripts/releases/list/components/app_spec.js → spec/javascripts/releases/components/app_index_spec.js

 import _ from 'underscore';
 import Vue from 'vue';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import app from '~/releases/list/components/app.vue';
-import createStore from '~/releases/list/store';
+import app from '~/releases/components/app_index.vue';
+import createStore from '~/releases/stores';
+import listModule from '~/releases/stores/modules/list';
 import api from '~/api';
-import { resetStore } from '../store/helpers';
+import { resetStore } from '../stores/modules/list/helpers';
 import {
   pageInfoHeadersWithoutPagination,
   pageInfoHeadersWithPagination,
   release,
   releases,
-} from '../../mock_data';
+} from '../mock_data';
 
 describe('Releases App ', () => {
   const Component = Vue.extend(app);
@@ -25,7 +26,7 @@ describe('Releases App ', () => {
   };
 
   beforeEach(() => {
-    store = createStore();
+    store = createStore({ list: listModule });
     releasesPagination = _.range(21).map(index => ({ ...release, tag_name: `${index}.00` }));
   });
 

spec/javascripts/releases/list/store/actions_spec.js → spec/javascripts/releases/stores/modules/list/actions_spec.js

@@ -4,12 +4,12 @@ import {
   fetchReleases,
   receiveReleasesSuccess,
   receiveReleasesError,
-} from '~/releases/list/store/actions';
-import state from '~/releases/list/store/state';
-import * as types from '~/releases/list/store/mutation_types';
+} from '~/releases/stores/modules/list/actions';
+import state from '~/releases/stores/modules/list/state';
+import * as types from '~/releases/stores/modules/list/mutation_types';
 import api from '~/api';
 import { parseIntPagination } from '~/lib/utils/common_utils';
-import { pageInfoHeadersWithoutPagination, releases } from '../../mock_data';
+import { pageInfoHeadersWithoutPagination, releases } from '../../../mock_data';
 
 describe('Releases State actions', () => {
   let mockedState;

spec/javascripts/releases/list/store/helpers.js → spec/javascripts/releases/stores/modules/list/helpers.js

-import state from '~/releases/list/store/state';
+import state from '~/releases/stores/modules/list/state';
 
 // eslint-disable-next-line import/prefer-default-export
 export const resetStore = store => {

spec/javascripts/releases/list/store/mutations_spec.js → spec/javascripts/releases/stores/modules/list/mutations_spec.js

-import state from '~/releases/list/store/state';
-import mutations from '~/releases/list/store/mutations';
-import * as types from '~/releases/list/store/mutation_types';
+import state from '~/releases/stores/modules/list/state';
+import mutations from '~/releases/stores/modules/list/mutations';
+import * as types from '~/releases/stores/modules/list/mutation_types';
 import { parseIntPagination } from '~/lib/utils/common_utils';
-import { pageInfoHeadersWithoutPagination, releases } from '../../mock_data';
+import { pageInfoHeadersWithoutPagination, releases } from '../../../mock_data';
 
 describe('Releases Store Mutations', () => {
   let stateCopy;