Use scopedPath for iterations

The iterations list within a group links to iteration reports within
a group. The list within a project links to iteration reports within
a group which is not correct. They should link to iteration
reports within projects to stay within the project context, which
is where scopedPath comes in.

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

@@ -153,7 +153,7 @@ export default {
         </gl-alert>
       </div>
       <div v-else>
-        <iterations-list :iterations="iterations" />
+        <iterations-list :iterations="iterations" :namespace-type="namespaceType" />
         <gl-pagination
           v-if="prevPage || nextPage"
           :value="pagination.currentPage"

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

 <script>
 import { GlLink } from '@gitlab/ui';
+import { Namespace } from 'ee/iterations/constants';
 import { formatDate } from '~/lib/utils/datetime_utility';
 
 export default {
@@ -12,6 +13,12 @@ export default {
       required: false,
       default: () => [],
     },
+    namespaceType: {
+      type: String,
+      required: false,
+      default: Namespace.Group,
+      validator: value => Object.values(Namespace).includes(value),
+    },
   },
   methods: {
     formatDate(date) {
@@ -26,9 +33,9 @@ export default {
     <ul v-if="iterations.length > 0" class="content-list">
       <li v-for="iteration in iterations" :key="iteration.id" class="milestone">
         <div class="gl-mb-3">
-          <gl-link :href="iteration.webPath"
-            ><strong>{{ iteration.title }}</strong></gl-link
-          >
+          <gl-link :href="iteration.scopedPath || iteration.webPath">
+            <strong>{{ iteration.title }}</strong>
+          </gl-link>
         </div>
         <div class="text-secondary gl-mb-3">
           {{ formatDate(iteration.startDate) }}–{{ formatDate(iteration.dueDate) }}

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

 fragment Iteration on Iteration {
   dueDate
   id
+  scopedPath
   startDate
   state
   title

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

+import { GlLink } from '@gitlab/ui';
 import IterationsList from 'ee/iterations/components/iterations_list.vue';
 import { shallowMount } from '@vue/test-utils';
 import timezoneMock from 'timezone-mock';
@@ -5,6 +6,8 @@ import timezoneMock from 'timezone-mock';
 describe('Iterations list', () => {
   let wrapper;
 
+  const findGlLink = () => wrapper.find(GlLink);
+
   const mountComponent = (propsData = { iterations: [] }) => {
     wrapper = shallowMount(IterationsList, {
       propsData,
@@ -29,6 +32,8 @@ describe('Iterations list', () => {
       title: 'Iteration #1',
       startDate: '2020-05-27',
       dueDate: '2020-06-04',
+      scopedPath: null,
+      webPath: '/groups/gitlab-org/-/iterations/1',
     };
 
     it('shows iteration', () => {
@@ -50,5 +55,32 @@ describe('Iterations list', () => {
       expect(wrapper.html()).toHaveText('May 27, 2020');
       expect(wrapper.html()).toHaveText('Jun 4, 2020');
     });
+
+    describe('when within group', () => {
+      it('links to iteration report within group', () => {
+        mountComponent({
+          iterations: [iteration],
+        });
+
+        expect(findGlLink().attributes('href')).toBe(iteration.webPath);
+      });
+    });
+
+    describe('when within project', () => {
+      it('links to iteration report within project', () => {
+        const scopedPath = '/gitlab-org/gitlab-test/-/iterations/inherited/1';
+
+        mountComponent({
+          iterations: [
+            {
+              ...iteration,
+              scopedPath,
+            },
+          ],
+        });
+
+        expect(findGlLink().attributes('href')).toBe(scopedPath);
+      });
+    });
   });
 });