Disable start date when iteration cadence is in "manual" mode

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

@@ -208,7 +208,11 @@ export default {
           if (this.automatic) {
             return true;
           }
-          const requiredFieldsForAutomatedScheduling = ['iterationsInAdvance', 'durationInWeeks'];
+          const requiredFieldsForAutomatedScheduling = [
+            'iterationsInAdvance',
+            'durationInWeeks',
+            'startDate',
+          ];
           return !requiredFieldsForAutomatedScheduling.includes(field);
         })
         .forEach((field) => {
@@ -223,6 +227,7 @@ export default {
     updateAutomatic(value) {
       this.clearValidation();
       if (!value) {
+        this.startDate = null;
         this.iterationsInAdvance = 0;
         this.durationInWeeks = 0;
       }
@@ -362,9 +367,9 @@ export default {
             class="datepicker gl-datepicker-input"
             autocomplete="off"
             inputmode="none"
-            required
+            :required="automatic"
+            :disabled="loadingCadence || !automatic"
             :state="validationState.startDate"
-            :disabled="loadingCadence"
             data-qa-selector="iteration_cadence_start_date_field"
             @blur="validate('startDate')"
           />
@@ -391,17 +396,6 @@ 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"
@@ -423,6 +417,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.description.label"
         :label-cols-md="2"

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

@@ -83,8 +83,8 @@ 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 findRollOverGroup = () => wrapper.findAllComponents(GlFormGroup).at(4);
-  const findFutureIterationsGroup = () => wrapper.findAllComponents(GlFormGroup).at(5);
+  const findFutureIterationsGroup = () => wrapper.findAllComponents(GlFormGroup).at(4);
+  const findRollOverGroup = () => wrapper.findAllComponents(GlFormGroup).at(5);
 
   const findError = () => wrapper.findComponent(GlAlert);
 
@@ -221,16 +221,17 @@ describe('Iteration cadence form', () => {
         setAutomaticValue(false);
       });
 
-      it('disables future iterations and duration in weeks', () => {
+      it('disables future iterations, duration in weeks, and start date fields', () => {
         expect(findFutureIterations().attributes('disabled')).toBe('disabled');
         expect(findFutureIterations().attributes('required')).toBeUndefined();
         expect(findDuration().attributes('disabled')).toBe('disabled');
         expect(findDuration().attributes('required')).toBeUndefined();
+        expect(findStartDate().attributes('disabled')).toBe('disabled');
+        expect(findStartDate().attributes('required')).toBeUndefined();
       });
 
       it('sets future iterations and cadence duration to 0', async () => {
         const title = 'Iteration 5';
-        const startDate = '2020-05-05';
 
         setFutureIterations(10);
         setDuration(2);
@@ -240,7 +241,6 @@ describe('Iteration cadence form', () => {
         await nextTick();
 
         setTitle(title);
-        setStartDate(startDate);
 
         clickSave();
 
@@ -251,7 +251,7 @@ describe('Iteration cadence form', () => {
             groupPath,
             title,
             automatic: false,
-            startDate,
+            startDate: null,
             rollOver: false,
             durationInWeeks: 0,
             iterationsInAdvance: 0,