Add Start iteration button to manual cadences

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

@@ -56,6 +56,7 @@ const i18n = Object.freeze({
     title: s__('Iterations|New iteration cadence'),
     save: s__('Iterations|Create cadence'),
   },
+  createAndStartIteration: s__('Iterations|Create cadence and start iteration'),
   cancel: __('Cancel'),
   requiredField: __('This field is required.'),
 });
@@ -123,6 +124,9 @@ export default {
     page() {
       return this.isEdit ? 'edit' : 'new';
     },
+    showStartIteration() {
+      return !this.isEdit && !this.automatic;
+    },
     mutation() {
       return this.isEdit ? updateCadence : createCadence;
     },
@@ -222,20 +226,49 @@ export default {
         this.durationInWeeks = 0;
       }
     },
+    saveAndCreateIteration() {
+      return this.save()
+        .then((cadenceId) => {
+          this.$router.push({ name: 'newIteration', params: { cadenceId } });
+        })
+        .catch((error) => {
+          this.errorMessage = error ?? s__('Iterations|Unable to save cadence. Please try again.');
+        });
+    },
+    saveAndViewList() {
+      return this.save()
+        .then((cadenceId) => {
+          this.$router.push({
+            name: 'index',
+            query: { createdCadenceId: getIdFromGraphQLId(cadenceId) },
+          });
+        })
+        .catch((error) => {
+          this.errorMessage = error ?? s__('Iterations|Unable to save cadence. Please try again.');
+        });
+    },
     save() {
+      return new Promise((resolve, reject) => {
         this.validateAllFields();
 
         if (!this.valid) {
-        return null;
+          return reject(new Error(s__('Iterations|Cadence configuration is invalid.')));
         }
 
+        return resolve();
+      })
+        .then(() => {
           this.loading = true;
-      return this.createCadence();
+          return this.saveCadence();
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
     cancel() {
       this.$router.push({ name: 'index' });
     },
-    createCadence() {
+    saveCadence() {
       return this.$apollo
         .mutate({
           mutation: this.mutation,
@@ -244,27 +277,17 @@ export default {
         .then(({ data, errors: topLevelErrors = [] } = {}) => {
           if (topLevelErrors.length > 0) {
             this.errorMessage = topLevelErrors[0].message;
-            return;
+            return null;
           }
 
           const { iterationCadence, errors } = data?.result || {};
 
           if (errors?.length > 0) {
             [this.errorMessage] = errors;
-            return;
+            return null;
           }
 
-          this.$router.push({
-            name: 'index',
-            query: { createdCadenceId: getIdFromGraphQLId(iterationCadence.id) },
-          });
-        })
-        .catch((e) => {
-          this.errorMessage = __('Unable to save cadence. Please try again');
-          throw e;
-        })
-        .finally(() => {
-          this.loading = false;
+          return getIdFromGraphQLId(iterationCadence.id);
         });
     },
   },
@@ -414,16 +437,28 @@ export default {
         />
       </gl-form-group>
 
-      <div class="form-actions gl-display-flex">
+      <div class="form-actions gl-display-flex gl-flex-wrap">
         <gl-button
           :loading="loading"
           data-testid="save-cadence"
           variant="confirm"
           data-qa-selector="save_iteration_cadence_button"
-          @click="save"
+          @click="saveAndViewList"
         >
           {{ i18n[page].save }}
         </gl-button>
+        <gl-button
+          v-if="showStartIteration"
+          :loading="loading"
+          class="gl-ml-3"
+          data-testid="save-cadence-create-iteration"
+          variant="confirm"
+          category="secondary"
+          data-qa-selector="save_cadence_start_iteration_button"
+          @click="saveAndCreateIteration"
+        >
+          {{ i18n.createAndStartIteration }}
+        </gl-button>
         <gl-button class="gl-ml-3" data-testid="cancel-create-cadence" @click="cancel">
           {{ i18n.cancel }}
         </gl-button>

ee/spec/features/boards/scoped_issue_board_spec.rb

@@ -286,6 +286,7 @@ RSpec.describe 'Scoped issue boards', :js do
               update_board_scope('current_iteration', true)
 
               expect(page).to have_selector('.board-card', count: 0)
+
               expect(page).not_to have_selector('.gl-alert-body')
             end
           end

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

@@ -111,6 +111,7 @@ describe('Iteration cadence form', () => {
   ];
 
   const findSaveButton = () => wrapper.findByTestId('save-cadence');
+  const findSaveAndStartButton = () => wrapper.findByTestId('save-cadence-create-iteration');
   const findCancelButton = () => wrapper.findByTestId('cancel-create-cadence');
   const clickSave = () => findSaveButton().vm.$emit('click');
   const clickCancel = () => findCancelButton().vm.$emit('click');
@@ -135,7 +136,7 @@ describe('Iteration cadence form', () => {
       const durationInWeeks = 2;
       const iterationsInAdvance = 6;
 
-      it('triggers mutation with form data', () => {
+      it('triggers mutation with form data', async () => {
         setTitle(title);
         setStartDate(startDate);
         setDuration(durationInWeeks);
@@ -143,6 +144,8 @@ describe('Iteration cadence form', () => {
 
         clickSave();
 
+        await nextTick();
+
         expect(findError().exists()).toBe(false);
         expect(resolverMock).toHaveBeenCalledWith({
           input: {
@@ -196,14 +199,18 @@ describe('Iteration cadence form', () => {
 
         expect(findSaveButton().props('loading')).toBe(false);
       });
+
+      it('does not show the Create cadence and start iteration button', async () => {
+        expect(findSaveAndStartButton().exists()).toBe(false);
+      });
     });
 
     describe('automated scheduling disabled', () => {
-      it('disables future iterations and duration in weeks', async () => {
+      beforeEach(() => {
         setAutomaticValue(false);
+      });
 
-        await nextTick();
-
+      it('disables future iterations and duration in weeks', () => {
         expect(findFutureIterations().attributes('disabled')).toBe('disabled');
         expect(findFutureIterations().attributes('required')).toBeUndefined();
         expect(findDuration().attributes('disabled')).toBe('disabled');
@@ -226,6 +233,8 @@ describe('Iteration cadence form', () => {
 
         clickSave();
 
+        await nextTick();
+
         expect(resolverMock).toHaveBeenCalledWith({
           input: {
             groupPath,
@@ -239,6 +248,10 @@ describe('Iteration cadence form', () => {
           },
         });
       });
+
+      it('shows the Create cadence and start iteration button', () => {
+        expect(findSaveAndStartButton().exists()).toBe(true);
+      });
     });
   });
 
@@ -288,5 +301,13 @@ describe('Iteration cadence form', () => {
       expect(findDuration().element.value).toBe(iterationCadence.durationInWeeks);
       expect(findDescription().element.value).toBe(iterationCadence.description);
     });
+
+    it('does not show the Create cadence and start iteration button', async () => {
+      setAutomaticValue(false);
+
+      await nextTick();
+
+      expect(findSaveAndStartButton().exists()).toBe(false);
+    });
   });
 });

locale/gitlab.pot

@@ -19307,6 +19307,9 @@ msgstr ""
 msgid "Iterations|Automated scheduling"
 msgstr ""
 
+msgid "Iterations|Cadence configuration is invalid."
+msgstr ""
+
 msgid "Iterations|Cadence name"
 msgstr ""
 
@@ -19316,6 +19319,9 @@ msgstr ""
 msgid "Iterations|Create cadence"
 msgstr ""
 
+msgid "Iterations|Create cadence and start iteration"
+msgstr ""
+
 msgid "Iterations|Create iteration"
 msgstr ""
 
@@ -19415,6 +19421,9 @@ msgstr ""
 msgid "Iterations|Unable to find iteration."
 msgstr ""
 
+msgid "Iterations|Unable to save cadence. Please try again."
+msgstr ""
+
 msgid "Iteration|Dates cannot overlap with other existing Iterations within this group"
 msgstr ""
 
@@ -36538,9 +36547,6 @@ msgstr ""
 msgid "Unable to load the merge request widget. Try reloading the page."
 msgstr ""
 
-msgid "Unable to save cadence. Please try again"
-msgstr ""
-
 msgid "Unable to save iteration. Please try again"
 msgstr ""