Merge branch '222763-use-project-iterations-query' into 'master'

Use project iterations query for project iterations list

See merge request gitlab-org/gitlab!38705

ee/app/assets/javascripts/iterations/components/iterations.vue

@@ -2,7 +2,8 @@
 import { GlAlert, GlButton, GlLoadingIcon, GlPagination, GlTab, GlTabs } from '@gitlab/ui';
 import { __ } from '~/locale';
 import IterationsList from './iterations_list.vue';
-import GroupIterationQuery from '../queries/group_iterations.query.graphql';
+import IterationsQuery from '../queries/iterations.query.graphql';
+import { Namespace } from '../constants';
 
 const pageSize = 20;
 
@@ -26,6 +27,12 @@ export default {
       required: false,
       default: false,
     },
+    namespaceType: {
+      type: String,
+      required: false,
+      default: Namespace.Group,
+      validator: value => Object.values(Namespace).includes(value),
+    },
     newIterationPath: {
       type: String,
       required: false,
@@ -34,14 +41,14 @@ export default {
   },
   apollo: {
     namespace: {
-      query: GroupIterationQuery,
+      query: IterationsQuery,
       variables() {
         return this.queryVariables;
       },
-      update: data => {
+      update(data) {
         return {
-          iterations: data.group?.iterations?.nodes || [],
-          pageInfo: data.group?.iterations?.pageInfo || {},
+          iterations: data[this.namespaceType]?.iterations?.nodes || [],
+          pageInfo: data[this.namespaceType]?.iterations?.pageInfo || {},
         };
       },
       error() {
@@ -69,6 +76,8 @@ export default {
     queryVariables() {
       const vars = {
         fullPath: this.fullPath,
+        isGroup: this.namespaceType === Namespace.Group,
+        isProject: this.namespaceType === Namespace.Project,
         state: this.state,
       };
 

ee/app/assets/javascripts/iterations/constants.js

+export const Namespace = {
+  Group: 'group',
+  Project: 'project',
+};
+
+export default {};

ee/app/assets/javascripts/iterations/index.js

@@ -12,7 +12,7 @@ const apolloProvider = new VueApollo({
   defaultClient: createDefaultClient(),
 });
 
-export function initIterationsList() {
+export function initIterationsList(namespaceType) {
   const el = document.querySelector('.js-iterations-list');
 
   return new Vue({
@@ -23,6 +23,7 @@ export function initIterationsList() {
         props: {
           fullPath: el.dataset.fullPath,
           canAdmin: parseBoolean(el.dataset.canAdmin),
+          namespaceType,
           newIterationPath: el.dataset.newIterationPath,
         },
       });

ee/app/assets/javascripts/iterations/queries/iteration.fragment.graphql

+fragment Iteration on Iteration {
+  dueDate
+  id
+  startDate
+  state
+  title
+  webPath
+}

ee/app/assets/javascripts/iterations/queries/group_iterations.query.graphql → ee/app/assets/javascripts/iterations/queries/iterations.query.graphql

 #import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
+#import "./iteration.fragment.graphql"
 
-query GroupIterations(
+query Iterations(
   $fullPath: ID!
+  $isGroup: Boolean = false
+  $isProject: Boolean = false
   $state: IterationState!
   $beforeCursor: String = ""
   $afterCursor: String = ""
   $firstPageSize: Int
   $lastPageSize: Int
 ) {
-  group(fullPath: $fullPath) {
+  group(fullPath: $fullPath) @include(if: $isGroup) {
     iterations(
       state: $state
       includeAncestors: false
@@ -18,12 +21,23 @@ query GroupIterations(
       last: $lastPageSize
     ) {
       nodes {
-        title
-        state
-        id
-        webPath
-        startDate
-        dueDate
+        ...Iteration
+      }
+      pageInfo {
+        ...PageInfo
+      }
+    }
+  }
+  project(fullPath: $fullPath) @include(if: $isProject) {
+    iterations(
+      state: $state
+      before: $beforeCursor
+      after: $afterCursor
+      first: $firstPageSize
+      last: $lastPageSize
+    ) {
+      nodes {
+        ...Iteration
       }
       pageInfo {
         ...PageInfo

ee/app/assets/javascripts/pages/groups/iterations/index.js

 import { initIterationsList } from 'ee/iterations';
+import { Namespace } from 'ee/iterations/constants';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initIterationsList();
-});
+document.addEventListener('DOMContentLoaded', () => initIterationsList(Namespace.Group));

ee/app/assets/javascripts/pages/projects/iterations/index.js

 import { initIterationsList } from 'ee/iterations';
+import { Namespace } from 'ee/iterations/constants';
 
-document.addEventListener('DOMContentLoaded', initIterationsList);
+document.addEventListener('DOMContentLoaded', () => initIterationsList(Namespace.Project));

ee/app/views/projects/iterations/index.html.haml

+- return unless Feature.enabled?(:project_iterations, @project.group)
 - page_title _("Iterations")
 
-- if Feature.enabled?(:project_iterations, @project.group)
-  .js-iterations-list{ data: { full_path: @project.group.full_path } }
+.js-iterations-list{ data: { full_path: @project.full_path } }

ee/spec/frontend/iterations/components/iterations_spec.js

@@ -2,6 +2,7 @@ import Iterations from 'ee/iterations/components/iterations.vue';
 import IterationsList from 'ee/iterations/components/iterations_list.vue';
 import { shallowMount } from '@vue/test-utils';
 import { GlAlert, GlLoadingIcon, GlPagination, GlTab, GlTabs } from '@gitlab/ui';
+import { Namespace } from 'ee/iterations/constants';
 
 describe('Iterations tabs', () => {
   let wrapper;
@@ -101,6 +102,8 @@ describe('Iterations tabs', () => {
 
       expect(wrapper.vm.queryVariables).toEqual({
         beforeCursor: 'first-item',
+        isGroup: true,
+        isProject: false,
         lastPageSize: 20,
         fullPath: defaultProps.fullPath,
         state: 'opened',
@@ -114,6 +117,8 @@ describe('Iterations tabs', () => {
         afterCursor: 'last-item',
         firstPageSize: 20,
         fullPath: defaultProps.fullPath,
+        isGroup: true,
+        isProject: false,
         state: 'opened',
       });
     });
@@ -136,6 +141,49 @@ describe('Iterations tabs', () => {
     });
   });
 
+  describe('iterations query variables', () => {
+    const expected = {
+      afterCursor: undefined,
+      firstPageSize: 20,
+      fullPath: defaultProps.fullPath,
+      state: 'opened',
+    };
+
+    describe('when group', () => {
+      it('has expected query variable values', () => {
+        mountComponent({
+          props: {
+            ...defaultProps,
+            namespaceType: Namespace.Group,
+          },
+        });
+
+        expect(wrapper.vm.queryVariables).toEqual({
+          ...expected,
+          isGroup: true,
+          isProject: false,
+        });
+      });
+    });
+
+    describe('when project', () => {
+      it('has expected query variable values', () => {
+        mountComponent({
+          props: {
+            ...defaultProps,
+            namespaceType: Namespace.Project,
+          },
+        });
+
+        expect(wrapper.vm.queryVariables).toEqual({
+          ...expected,
+          isGroup: false,
+          isProject: true,
+        });
+      });
+    });
+  });
+
   describe('error', () => {
     beforeEach(() => {
       mountComponent({