Update releases page to use state instead of props

This commit updates the releases page to store static data as Vuex state
instead of passing thee data to the Vue app as props.

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

@@ -25,31 +25,16 @@ export default {
     GlLink,
     GlButton,
   },
-  props: {
-    projectId: {
-      type: String,
-      required: true,
-    },
-    projectPath: {
-      type: String,
-      required: true,
-    },
-    documentationPath: {
-      type: String,
-      required: true,
-    },
-    illustrationPath: {
-      type: String,
-      required: true,
-    },
-    newReleasePath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
   computed: {
-    ...mapState('list', ['isLoading', 'releases', 'hasError', 'pageInfo']),
+    ...mapState('list', [
+      'documentationPath',
+      'illustrationPath',
+      'newReleasePath',
+      'isLoading',
+      'releases',
+      'hasError',
+      'pageInfo',
+    ]),
     shouldRenderEmptyState() {
       return !this.releases.length && !this.hasError && !this.isLoading;
     },
@@ -65,15 +50,13 @@ export default {
   created() {
     this.fetchReleases({
       page: getParameterByName('page'),
-      projectId: this.projectId,
-      projectPath: this.projectPath,
     });
   },
   methods: {
     ...mapActions('list', ['fetchReleases']),
     onChangePage(page) {
       historyPushState(buildUrlWithCurrentLocation(`?page=${page}`));
-      this.fetchReleases({ page, projectId: this.projectId });
+      this.fetchReleases({ page });
     },
   },
 };

app/assets/javascripts/releases/components/releases_pagination_graphql.vue

@@ -7,7 +7,7 @@ export default {
   name: 'ReleasesPaginationGraphql',
   components: { GlKeysetPagination },
   computed: {
-    ...mapState('list', ['projectPath', 'graphQlPageInfo']),
+    ...mapState('list', ['graphQlPageInfo']),
     showPagination() {
       return this.graphQlPageInfo.hasPreviousPage || this.graphQlPageInfo.hasNextPage;
     },
@@ -16,11 +16,11 @@ export default {
     ...mapActions('list', ['fetchReleasesGraphQl']),
     onPrev(before) {
       historyPushState(buildUrlWithCurrentLocation(`?before=${before}`));
-      this.fetchReleasesGraphQl({ projectPath: this.projectPath, before });
+      this.fetchReleasesGraphQl({ before });
     },
     onNext(after) {
       historyPushState(buildUrlWithCurrentLocation(`?after=${after}`));
-      this.fetchReleasesGraphQl({ projectPath: this.projectPath, after });
+      this.fetchReleasesGraphQl({ after });
     },
   },
 };

app/assets/javascripts/releases/components/releases_pagination_rest.vue

@@ -7,13 +7,13 @@ export default {
   name: 'ReleasesPaginationRest',
   components: { TablePagination },
   computed: {
-    ...mapState('list', ['projectId', 'pageInfo']),
+    ...mapState('list', ['pageInfo']),
   },
   methods: {
     ...mapActions('list', ['fetchReleasesRest']),
     onChangePage(page) {
       historyPushState(buildUrlWithCurrentLocation(`?page=${page}`));
-      this.fetchReleasesRest({ page, projectId: this.projectId });
+      this.fetchReleasesRest({ page });
     },
   },
 };

app/assets/javascripts/releases/mount_index.js

@@ -21,9 +21,6 @@ export default () => {
         graphqlMilestoneStats: Boolean(gon.features?.graphqlMilestoneStats),
       },
     }),
-    render: h =>
-      h(ReleaseListApp, {
-        props: el.dataset,
-      }),
+    render: h => h(ReleaseListApp),
   });
 };

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

@@ -23,7 +23,7 @@ export const requestReleases = ({ commit }) => commit(types.REQUEST_RELEASES);
  *
  * @param {String} projectId
  */
-export const fetchReleases = ({ dispatch, rootState }, { page = '1', projectId, projectPath }) => {
+export const fetchReleases = ({ dispatch, rootState, state }, { page = '1' }) => {
   dispatch('requestReleases');
   if (
@@ -35,7 +35,7 @@ export const fetchReleases = ({ dispatch, rootState }, { page = '1', projectId,
       .query({
         query: allReleasesQuery,
         variables: {
-          fullPath: projectPath,
+          fullPath: state.projectPath,
         },
       })
       .then(response => {
@@ -44,7 +44,7 @@ export const fetchReleases = ({ dispatch, rootState }, { page = '1', projectId,
       .catch(() => dispatch('receiveReleasesError'));
   } else {
     api
-      .releases(projectId, { page })
+      .releases(state.projectId, { page })
       .then(response => dispatch('receiveReleasesSuccess', response))
       .catch(() => dispatch('receiveReleasesError'));
   }

spec/frontend/releases/components/app_index_spec.js

@@ -27,15 +27,18 @@ describe('Releases App ', () => {
     tagName: `${index}.00`,
   }));
-  const defaultProps = {
+  const defaultInitialState = {
     projectId: 'gitlab-ce',
     projectPath: 'gitlab-org/gitlab-ce',
     documentationPath: 'help/releases',
     illustrationPath: 'illustration/path',
   };
-  const createComponent = (propsData = defaultProps) => {
-    const listModule = createListModule({});
+  const createComponent = (stateUpdates = {}) => {
+    const listModule = createListModule({
+      ...defaultInitialState,
+      ...stateUpdates,
+    });
     fetchReleaseSpy = jest.spyOn(listModule.actions, 'fetchReleases');
@@ -51,7 +54,6 @@ describe('Releases App ', () => {
     wrapper = shallowMount(ReleasesApp, {
       store,
       localVue,
-      propsData,
     });
   };
@@ -68,13 +70,9 @@ describe('Releases App ', () => {
       createComponent();
     });
-    it('calls fetchRelease with the page, project ID, and project path', () => {
+    it('calls fetchRelease with the page parameter', () => {
       expect(fetchReleaseSpy).toHaveBeenCalledTimes(1);
-      expect(fetchReleaseSpy).toHaveBeenCalledWith(expect.anything(), {
-        page: null,
-        projectId: defaultProps.projectId,
-        projectPath: defaultProps.projectPath,
-      });
+      expect(fetchReleaseSpy).toHaveBeenCalledWith(expect.anything(), { page: null });
     });
   });
@@ -156,7 +154,7 @@ describe('Releases App ', () => {
       const newReleasePath = 'path/to/new/release';
       beforeEach(() => {
-        createComponent({ ...defaultProps, newReleasePath });
+        createComponent({ ...defaultInitialState, newReleasePath });
       });
       it('renders the "New release" button', () => {

spec/frontend/releases/components/releases_pagination_graphql_spec.js

@@ -143,7 +143,7 @@ describe('~/releases/components/releases_pagination_graphql.vue', () => {
       it('calls fetchReleasesGraphQl with the correct after cursor', () => {
         expect(listModule.actions.fetchReleasesGraphQl.mock.calls).toEqual([
-          [expect.anything(), { projectPath, after: cursors.endCursor }],
+          [expect.anything(), { after: cursors.endCursor }],
         ]);
       });
@@ -161,7 +161,7 @@ describe('~/releases/components/releases_pagination_graphql.vue', () => {
       it('calls fetchReleasesGraphQl with the correct before cursor', () => {
         expect(listModule.actions.fetchReleasesGraphQl.mock.calls).toEqual([
-          [expect.anything(), { projectPath, before: cursors.startCursor }],
+          [expect.anything(), { before: cursors.startCursor }],
         ]);
       });

spec/frontend/releases/components/releases_pagination_rest_spec.js

@@ -59,7 +59,7 @@ describe('~/releases/components/releases_pagination_rest.vue', () => {
     it('calls fetchReleasesRest with the correct page', () => {
       expect(listModule.actions.fetchReleasesRest.mock.calls).toEqual([
-        [expect.anything(), { projectId, page: newPage }],
+        [expect.anything(), { page: newPage }],
       ]);
     });

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

@@ -23,11 +23,16 @@ describe('Releases State actions', () => {
   let pageInfo;
   let releases;
   let graphqlReleasesResponse;
-  let projectPath;
+
+  const projectPath = 'root/test-project';
+  const projectId = 19;
   beforeEach(() => {
     mockedState = {
-      ...createState({}),
+      ...createState({
+        projectId,
+        projectPath,
+      }),
       featureFlags: {
         graphqlReleaseData: true,
         graphqlReleasesPage: true,
@@ -38,7 +43,6 @@ describe('Releases State actions', () => {
     pageInfo = parseIntPagination(pageInfoHeadersWithoutPagination);
     releases = convertObjectPropsToCamelCase(originalReleases, { deep: true });
     graphqlReleasesResponse = cloneDeep(originalGraphqlReleasesResponse);
-    projectPath = 'root/test-project';
   });
   describe('requestReleases', () => {
@@ -51,7 +55,7 @@ describe('Releases State actions', () => {
     describe('success', () => {
       it('dispatches requestReleases and receiveReleasesSuccess', done => {
         jest.spyOn(gqClient, 'query').mockImplementation(({ query, variables }) => {
-          expect(query).toEqual(allReleasesQuery);
+          expect(query).toBe(allReleasesQuery);
           expect(variables).toEqual({
             fullPath: projectPath,
           });
@@ -60,7 +64,7 @@ describe('Releases State actions', () => {
         testAction(
           fetchReleases,
-          { projectPath },
+          {},
           mockedState,
           [],
           [
@@ -83,7 +87,7 @@ describe('Releases State actions', () => {
         testAction(
           fetchReleases,
-          { projectPath },
+          {},
           mockedState,
           [],
           [
@@ -107,14 +111,14 @@ describe('Releases State actions', () => {
       describe('success', () => {
         it('dispatches requestReleases and receiveReleasesSuccess', done => {
           jest.spyOn(api, 'releases').mockImplementation((id, options) => {
-            expect(id).toEqual(1);
-            expect(options.page).toEqual('1');
+            expect(id).toBe(projectId);
+            expect(options.page).toBe('1');
             return Promise.resolve({ data: releases, headers: pageInfoHeadersWithoutPagination });
           });
           testAction(
             fetchReleases,
-            { projectId: 1 },
+            {},
             mockedState,
             [],
             [
@@ -132,13 +136,13 @@ describe('Releases State actions', () => {
         it('dispatches requestReleases and receiveReleasesSuccess on page two', done => {
           jest.spyOn(api, 'releases').mockImplementation((_, options) => {
-            expect(options.page).toEqual('2');
+            expect(options.page).toBe('2');
             return Promise.resolve({ data: releases, headers: pageInfoHeadersWithoutPagination });
           });
           testAction(
             fetchReleases,
-            { page: '2', projectId: 1 },
+            { page: '2' },
             mockedState,
             [],
             [
@@ -161,7 +165,7 @@ describe('Releases State actions', () => {
           testAction(
             fetchReleases,
-            { projectId: null },
+            {},
             mockedState,
             [],
             [