Merge branch 'nfriend-reorganize-releases-js' into 'master'

Restructure `releases/**` JavaScript in preparation for new `show` page

See merge request gitlab-org/gitlab!24010

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;