Merge branch 'nfriend-releases-page-add-static-data-to-state' into 'master'

Step 3/4: Update Releases page to use Vuex state instead of props

See merge request gitlab-org/gitlab!41636

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,
             [],
             [