Add iterations list to project iterations page

Add iterations list so users can see iterations when in the context
of a project. This change incorrectly gets all group iterations
and will be updated once the backend exposes iterations at a
project level

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

@@ -17,7 +17,7 @@ export default {
     GlTabs,
   },
   props: {
-    groupPath: {
+    fullPath: {
       type: String,
       required: true,
     },
@@ -33,7 +33,7 @@ export default {
     },
   },
   apollo: {
-    group: {
+    namespace: {
       query: GroupIterationQuery,
       variables() {
         return this.queryVariables;
@@ -51,7 +51,7 @@ export default {
   },
   data() {
     return {
-      group: {
+      namespace: {
         iterations: [],
         pageInfo: {
           hasNextPage: true,
@@ -68,7 +68,7 @@ export default {
   computed: {
     queryVariables() {
       const vars = {
-        fullPath: this.groupPath,
+        fullPath: this.fullPath,
         state: this.state,
       };
 
@@ -83,10 +83,10 @@ export default {
       return vars;
     },
     iterations() {
-      return this.group.iterations;
+      return this.namespace.iterations;
     },
     loading() {
-      return this.$apollo.queries.group.loading;
+      return this.$apollo.queries.namespace.loading;
     },
     state() {
       switch (this.tabIndex) {
@@ -100,15 +100,15 @@ export default {
       }
     },
     prevPage() {
-      return Number(this.group.pageInfo.hasPreviousPage);
+      return Number(this.namespace.pageInfo.hasPreviousPage);
     },
     nextPage() {
-      return Number(this.group.pageInfo.hasNextPage);
+      return Number(this.namespace.pageInfo.hasNextPage);
     },
   },
   methods: {
     handlePageChange(page) {
-      const { startCursor, endCursor } = this.group.pageInfo;
+      const { startCursor, endCursor } = this.namespace.pageInfo;
 
       if (page > this.pagination.currentPage) {
         this.pagination = {

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

@@ -21,7 +21,7 @@ export function initIterationsList() {
     render(createElement) {
       return createElement(Iterations, {
         props: {
-          groupPath: el.dataset.groupFullPath,
+          fullPath: el.dataset.fullPath,
           canAdmin: parseBoolean(el.dataset.canAdmin),
           newIterationPath: el.dataset.newIterationPath,
         },

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

+import { initIterationsList } from 'ee/iterations';
+
+document.addEventListener('DOMContentLoaded', initIterationsList);

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

 - page_title _("Iterations")
 
 - if Feature.enabled?(:group_iterations, @group, default_enabled: true)
-  .js-iterations-list{ data: { group_full_path: @group.full_path, can_admin: can?(current_user, :create_iteration, @group).to_s, new_iteration_path: new_group_iteration_path(@group) } }
+  .js-iterations-list{ data: { full_path: @group.full_path, can_admin: can?(current_user, :create_iteration, @group).to_s, new_iteration_path: new_group_iteration_path(@group) } }

ee/app/views/layouts/nav/sidebar/_project_iterations_link.html.haml

-- return unless Feature.enabled?(:project_iterations, @project.group, default_enabled: false)
+- return unless Feature.enabled?(:project_iterations, @project.group)
 - return unless @project.feature_available?(:iterations)
 - return unless can?(current_user, :read_iteration, @project)
 

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

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

ee/spec/features/projects/iterations/iterations_list_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Iterations list', :js do
+  let(:now) { Time.now }
+  let_it_be(:group) { create(:group) }
+  let_it_be(:project) { create(:project, :public, group: group) }
+  let_it_be(:user) { create(:user) }
+  let!(:started_iteration) { create(:iteration, :skip_future_date_validation, group: group, start_date: now - 1.day, due_date: now) }
+  let!(:upcoming_iteration) { create(:iteration, group: group, start_date: now + 1.day, due_date: now + 2.days) }
+  let!(:closed_iteration) { create(:closed_iteration, :skip_future_date_validation, group: group, start_date: now - 3.days, due_date: now - 2.days) }
+
+  context 'as guest' do
+    before do
+      visit project_iterations_path(project)
+    end
+
+    it 'shows iterations on each tab' do
+      expect(page).to have_link(started_iteration.title)
+      expect(page).to have_link(upcoming_iteration.title)
+      expect(page).not_to have_link(closed_iteration.title)
+
+      click_link('Closed')
+
+      expect(page).to have_link(closed_iteration.title)
+      expect(page).not_to have_link(started_iteration.title)
+      expect(page).not_to have_link(upcoming_iteration.title)
+
+      click_link('All')
+
+      expect(page).to have_link(started_iteration.title)
+      expect(page).to have_link(upcoming_iteration.title)
+      expect(page).to have_link(closed_iteration.title)
+    end
+  end
+
+  context 'as authorized user' do
+    before do
+      project.add_developer(user)
+      sign_in(user)
+      visit project_iterations_path(project)
+    end
+
+    it 'does not show "New iteration" button' do
+      expect(page).not_to have_link('New iteration')
+    end
+  end
+end

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

@@ -6,7 +6,7 @@ import { GlAlert, GlLoadingIcon, GlPagination, GlTab, GlTabs } from '@gitlab/ui'
 describe('Iterations tabs', () => {
   let wrapper;
   const defaultProps = {
-    groupPath: 'gitlab-org',
+    fullPath: 'gitlab-org',
   };
 
   const mountComponent = ({ props = defaultProps, loading = false } = {}) => {
@@ -14,7 +14,7 @@ describe('Iterations tabs', () => {
       propsData: props,
       mocks: {
         $apollo: {
-          queries: { group: { loading } },
+          queries: { namespace: { loading } },
         },
       },
       stubs: {
@@ -74,7 +74,7 @@ describe('Iterations tabs', () => {
         loading: false,
       });
       wrapper.setData({
-        group: {
+        namespace: {
           pageInfo: {
             hasNextPage: true,
             hasPreviousPage: false,
@@ -102,7 +102,7 @@ describe('Iterations tabs', () => {
       expect(wrapper.vm.queryVariables).toEqual({
         beforeCursor: 'first-item',
         lastPageSize: 20,
-        fullPath: defaultProps.groupPath,
+        fullPath: defaultProps.fullPath,
         state: 'opened',
       });
     });
@@ -113,7 +113,7 @@ describe('Iterations tabs', () => {
       expect(wrapper.vm.queryVariables).toEqual({
         afterCursor: 'last-item',
         firstPageSize: 20,
-        fullPath: defaultProps.groupPath,
+        fullPath: defaultProps.fullPath,
         state: 'opened',
       });
     });