Add iteration to board list settings

Also adds the ListIteration model

app/assets/javascripts/boards/constants.js

@@ -6,6 +6,7 @@ export const BoardType = {
 export const ListType = {
   assignee: 'assignee',
   milestone: 'milestone',
+  iteration: 'iteration',
   backlog: 'backlog',
   closed: 'closed',
   label: 'label',

app/assets/javascripts/boards/models/iteration.js

+export default class ListIteration {
+  constructor(obj) {
+    this.id = obj.id;
+    this.title = obj.title;
+
+    if (IS_EE) {
+      this.state = obj.state;
+      this.webUrl = obj.web_url || obj.webUrl;
+      this.description = obj.description;
+    }
+  }
+}
+
+window.ListIteration = ListIteration;

app/assets/javascripts/boards/models/list.js

@@ -5,6 +5,7 @@ import boardsStore from '../stores/boards_store';
 import ListLabel from './label';
 import ListAssignee from './assignee';
 import ListMilestone from './milestone';
+import ListIteration from './iteration';
 import 'ee_else_ce/boards/models/issue';
 
 const TYPES = {
@@ -57,6 +58,9 @@ class List {
     } else if (IS_EE && obj.milestone) {
       this.milestone = new ListMilestone(obj.milestone);
       this.title = this.milestone.title;
+    } else if (IS_EE && obj.iteration) {
+      this.iteration = new ListIteration(obj.iteration);
+      this.title = this.iteration.title;
     }
 
     // doNotFetchIssues is a temporary workaround until issues are fetched using GraphQL on issue boards

ee/app/assets/javascripts/boards/components/board_settings_list_types.vue

@@ -4,8 +4,10 @@ import { __ } from '~/locale';
 
 export default {
   milestone: 'milestone',
+  iteration: 'iteration',
   assignee: 'assignee',
   labelMilestoneText: __('Milestone'),
+  labelIterationText: __('Iteration'),
   labelAssigneeText: __('Assignee'),
   components: {
     GlLink,
@@ -29,6 +31,9 @@ export default {
     activeListMilestone() {
       return this.activeList.milestone;
     },
+    activeListIteration() {
+      return this.activeList.iteration;
+    },
     listTypeTitle() {
       switch (this.boardListType) {
         case this.$options.milestone: {
@@ -37,6 +42,9 @@ export default {
         case this.$options.assignee: {
           return this.$options.labelAssigneeText;
         }
+        case this.$options.iteration: {
+          return this.$options.labelIterationText;
+        }
         default: {
           return '';
         }
@@ -55,6 +63,9 @@ export default {
       :href="activeListMilestone.webUrl"
       >{{ activeListMilestone.title }}</gl-link
     >
+    <gl-link v-else-if="boardListType === $options.iteration" :href="activeListIteration.webUrl">{{
+      activeListIteration.title
+    }}</gl-link>
     <gl-avatar-link
       v-else-if="boardListType === $options.assignee"
       class="js-assignee"

ee/spec/frontend/boards/components/board_list_header_deprecated_spec.js

@@ -81,7 +81,7 @@ describe('Board List Header Component', () => {
   const findSettingsButton = () => wrapper.find({ ref: 'settingsBtn' });
 
   describe('Settings Button', () => {
-    const hasSettings = [ListType.assignee, ListType.milestone, ListType.label];
+    const hasSettings = [ListType.assignee, ListType.milestone, ListType.iteration, ListType.label];
     const hasNoSettings = [ListType.backlog, ListType.closed];
 
     it.each(hasSettings)('does render for List Type `%s`', (listType) => {

ee/spec/frontend/boards/components/board_list_header_spec.js

@@ -72,7 +72,7 @@ describe('Board List Header Component', () => {
   const findSettingsButton = () => wrapper.find({ ref: 'settingsBtn' });
 
   describe('Settings Button', () => {
-    const hasSettings = [ListType.assignee, ListType.milestone, ListType.label];
+    const hasSettings = [ListType.assignee, ListType.milestone, ListType.iteration, ListType.label];
     const hasNoSettings = [ListType.backlog, ListType.closed];
 
     it.each(hasSettings)('does render for List Type `%s`', (listType) => {

spec/frontend/boards/components/board_list_header_deprecated_spec.js

@@ -74,7 +74,13 @@ describe('Board List Header Component', () => {
 
   describe('Add issue button', () => {
     const hasNoAddButton = [ListType.closed];
-    const hasAddButton = [ListType.backlog, ListType.label, ListType.milestone, ListType.assignee];
+    const hasAddButton = [
+      ListType.backlog,
+      ListType.label,
+      ListType.milestone,
+      ListType.iteration,
+      ListType.assignee,
+    ];
 
     it.each(hasNoAddButton)('does not render when List Type is `%s`', (listType) => {
       createComponent({ listType });

spec/frontend/boards/components/board_list_header_spec.js

@@ -78,7 +78,13 @@ describe('Board List Header Component', () => {
 
   describe('Add issue button', () => {
     const hasNoAddButton = [ListType.closed];
-    const hasAddButton = [ListType.backlog, ListType.label, ListType.milestone, ListType.assignee];
+    const hasAddButton = [
+      ListType.backlog,
+      ListType.label,
+      ListType.milestone,
+      ListType.iteration,
+      ListType.assignee,
+    ];
 
     it.each(hasNoAddButton)('does not render when List Type is `%s`', (listType) => {
       createComponent({ listType });
@@ -167,7 +173,7 @@ describe('Board List Header Component', () => {
 
   describe('user can drag', () => {
     const cannotDragList = [ListType.backlog, ListType.closed];
-    const canDragList = [ListType.label, ListType.milestone, ListType.assignee];
+    const canDragList = [ListType.label, ListType.milestone, ListType.iteration, ListType.assignee];
 
     it.each(cannotDragList)(
       'does not have user-can-drag-class so user cannot drag list',