Add rollover and description fields to cadence

Update edit form tests as well

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

@@ -8,6 +8,7 @@ import {
   GlFormGroup,
   GlFormInput,
   GlFormSelect,
+  GlFormTextarea,
 } from '@gitlab/ui';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { s__, __ } from '~/locale';
@@ -34,11 +35,18 @@ const i18n = Object.freeze({
     description: s__('Iterations|The duration for each iteration (in weeks)'),
     placeholder: s__('Iterations|Select duration'),
   },
+  rollOver: {
+    label: s__('Iterations|Roll over issues'),
+    description: s__('Iterations|Move incomplete issues to the next iteration'),
+  },
   futureIterations: {
     label: s__('Iterations|Future iterations'),
     description: s__('Iterations|Number of future iterations you would like to have scheduled'),
     placeholder: s__('Iterations|Select number'),
   },
+  description: {
+    label: __('Description'),
+  },
   edit: {
     title: s__('Iterations|Edit iteration cadence'),
     save: s__('Iterations|Save cadence'),
@@ -72,6 +80,7 @@ export default {
     GlFormGroup,
     GlFormInput,
     GlFormSelect,
+    GlFormTextarea,
   },
   inject: ['groupPath', 'cadencesListPath'],
   data() {
@@ -86,9 +95,11 @@ export default {
       errorMessage: '',
       title: '',
       automatic: true,
+      rollOver: false,
       startDate: null,
       durationInWeeks: 0,
       iterationsInAdvance: 0,
+      description: '',
       validationState: {
         title: null,
         startDate: null,
@@ -133,6 +144,7 @@ export default {
           durationInWeeks: this.durationInWeeks,
           active: true,
           iterationsInAdvance: this.iterationsInAdvance,
+          description: this.description,
         },
       };
 
@@ -168,7 +180,9 @@ export default {
         this.automatic = cadence.automatic;
         this.startDate = cadence.startDate;
         this.durationInWeeks = cadence.durationInWeeks;
+        this.rollOver = cadence.rollOver;
         this.iterationsInAdvance = cadence.iterationsInAdvance;
+        this.description = cadence.description;
       },
       error(error) {
         this.errorMessage = error;
@@ -345,6 +359,17 @@ export default {
         />
       </gl-form-group>
 
+      <gl-form-group
+        :label-cols-md="2"
+        label-class="gl-font-weight-bold text-right-md gl-pt-3!"
+        label-for="cadence-rollover-issues"
+        :description="i18n.rollOver.description"
+      >
+        <gl-form-checkbox id="cadence-rollover-issues" v-model="rollOver" @change="clearValidation">
+          <span class="gl-font-weight-bold">{{ i18n.rollOver.label }}</span>
+        </gl-form-checkbox>
+      </gl-form-group>
+
       <gl-form-group
         :label="i18n.futureIterations.label"
         :label-cols-md="2"
@@ -367,6 +392,16 @@ export default {
         />
       </gl-form-group>
 
+      <gl-form-group
+        :label="i18n.description.label"
+        :label-cols-md="2"
+        :content-cols-md="2"
+        label-class="text-right-md gl-pt-3!"
+        label-for="cadence-description"
+      >
+        <gl-form-textarea id="cadence-description" v-model="description" class="w-100" />
+      </gl-form-group>
+
       <div class="form-actions gl-display-flex">
         <gl-button
           :loading="loading"
@@ -377,7 +412,7 @@ export default {
         >
           {{ i18n[page].save }}
         </gl-button>
-        <gl-button class="ml-auto" data-testid="cancel-create-cadence" @click="cancel">
+        <gl-button class="gl-ml-3" data-testid="cancel-create-cadence" @click="cancel">
           {{ i18n.cancel }}
         </gl-button>
       </div>

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

@@ -3,6 +3,8 @@ fragment IterationCadence on IterationCadence {
   title
   automatic
   startDate
+  rollOver
   durationInWeeks
   iterationsInAdvance
+  description
 }

ee/app/assets/javascripts/iterations/queries/iteration_cadence.query.graphql

 #import "./iteration_cadence.fragment.graphql"
 
 # todo: should this use IterationsCadenceID! ?
-query IterationCadences($fullPath: ID!, $id: ID!) {
+query IterationCadence($fullPath: ID!, $id: ID!) {
   group(fullPath: $fullPath) {
     iterationCadences(id: $id) {
       nodes {

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

@@ -4,8 +4,7 @@ import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import IterationCadenceForm from 'ee/iterations/components/iteration_cadence_form.vue';
 import createCadence from 'ee/iterations/queries/cadence_create.mutation.graphql';
-import readCadence from 'ee/iterations/queries/iteration_cadence.query.graphql';
-
+import getCadence from 'ee/iterations/queries/iteration_cadence.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -33,8 +32,11 @@ describe('Iteration cadence form', () => {
     id: `gid://gitlab/Iterations::Cadence/${id}`,
     title: 'An iteration',
     automatic: true,
-    startDate: '2020-06-28',
+    rollOver: false,
     durationInWeeks: '3',
+    description: 'The words',
+    duration: '3',
+    startDate: '2020-06-28',
     iterationsInAdvance: '2',
   };
 
@@ -80,7 +82,7 @@ describe('Iteration cadence form', () => {
   const findAutomatedSchedulingGroup = () => wrapper.findAllComponents(GlFormGroup).at(1);
   const findStartDateGroup = () => wrapper.findAllComponents(GlFormGroup).at(2);
   const findDurationGroup = () => wrapper.findAllComponents(GlFormGroup).at(3);
-  const findFutureIterationsGroup = () => wrapper.findAllComponents(GlFormGroup).at(4);
+  const findFutureIterationsGroup = () => wrapper.findAllComponents(GlFormGroup).at(5);
 
   const findError = () => wrapper.findComponent(GlAlert);
 
@@ -88,6 +90,7 @@ describe('Iteration cadence form', () => {
   const findStartDate = () => wrapper.find('#cadence-start-date');
   const findFutureIterations = () => wrapper.find('#cadence-schedule-future-iterations');
   const findDuration = () => wrapper.find('#cadence-duration');
+  const findDescription = () => wrapper.find('#cadence-description');
 
   const setTitle = (value) => findTitle().vm.$emit('input', value);
   const setStartDate = (value) => findStartDate().vm.$emit('input', value);
@@ -149,6 +152,7 @@ describe('Iteration cadence form', () => {
             durationInWeeks,
             iterationsInAdvance,
             active: true,
+            description: '',
           },
         });
       });
@@ -222,6 +226,7 @@ describe('Iteration cadence form', () => {
             startDate,
             durationInWeeks,
             iterationsInAdvance: 0,
+            description: '',
             active: true,
           },
         });
@@ -230,11 +235,13 @@ describe('Iteration cadence form', () => {
   });
 
   describe('Edit cadence', () => {
-    const query = readCadence;
+    const query = getCadence;
     const resolverMock = jest.fn().mockResolvedValue(getCadenceSuccess);
 
     beforeEach(() => {
       $router.currentRoute.params.cadenceId = id;
+
+      createComponent({ query, resolverMock });
     });
 
     afterEach(() => {
@@ -242,8 +249,6 @@ describe('Iteration cadence form', () => {
     });
 
     it('shows correct title and button text', () => {
-      createComponent({ query, resolverMock });
-
       expect(wrapper.text()).toContain(wrapper.vm.i18n.edit.title);
       expect(wrapper.text()).toContain(wrapper.vm.i18n.edit.save);
     });
@@ -273,6 +278,7 @@ describe('Iteration cadence form', () => {
       expect(findStartDate().element.value).toBe(iterationCadence.startDate);
       expect(findFutureIterations().element.value).toBe(iterationCadence.iterationsInAdvance);
       expect(findDuration().element.value).toBe(iterationCadence.durationInWeeks);
+      expect(findDescription().element.value).toBe(iterationCadence.description);
     });
   });
 });

locale/gitlab.pot

@@ -18586,6 +18586,9 @@ msgstr ""
 msgid "Iterations|Iteration scheduling will be handled automatically"
 msgstr ""
+msgid "Iterations|Move incomplete issues to the next iteration"
+msgstr ""
+
 msgid "Iterations|New iteration cadence"
 msgstr ""
@@ -18598,6 +18601,9 @@ msgstr ""
 msgid "Iterations|Number of future iterations you would like to have scheduled"
 msgstr ""
+msgid "Iterations|Roll over issues"
+msgstr ""
+
 msgid "Iterations|Save cadence"
 msgstr ""