Use vue-router for Iteration Cadences

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

+<template>
+  <router-view />
+</template>

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

@@ -9,7 +9,6 @@ import {
   GlFormInput,
   GlFormSelect,
 } from '@gitlab/ui';
-import { visitUrl } from '~/lib/utils/url_utility';
 import { s__, __ } from '~/locale';
 import createCadence from '../queries/create_cadence.mutation.graphql';
 
@@ -65,14 +64,7 @@ export default {
     GlFormInput,
     GlFormSelect,
   },
-  inject: ['groupPath'],
-  props: {
-    cadencesListPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
+  inject: ['groupPath', 'cadencesListPath'],
   data() {
     return {
       cadences: [],
@@ -150,11 +142,7 @@ export default {
       return this.createCadence();
     },
     cancel() {
-      if (this.cadencesListPath) {
-        visitUrl(this.cadencesListPath);
-      } else {
-        this.$emit('cancel');
-      }
+      this.$router.push({ name: 'index' });
     },
     createCadence() {
       return this.$apollo
@@ -175,7 +163,7 @@ export default {
             return;
           }
 
-          visitUrl(this.cadencesListPath);
+          this.$router.push({ name: 'index' });
         })
         .catch((e) => {
           this.errorMessage = __('Unable to save cadence. Please try again');

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

+<template><ul></ul></template>

ee/app/assets/javascripts/iterations/index.js

@@ -2,10 +2,11 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import IterationCadenceForm from './components/iteration_cadence_form.vue';
+import App from './components/app.vue';
 import IterationForm from './components/iteration_form.vue';
 import IterationReport from './components/iteration_report.vue';
 import Iterations from './components/iterations.vue';
+import createRouter from './router';
 
 Vue.use(VueApollo);
 
@@ -91,28 +92,26 @@ export function initIterationReport({ namespaceType, initiallyEditing } = {}) {
   });
 }
 
-export function initCadenceForm() {
-  const el = document.querySelector('.js-iteration-cadence-form');
+export function initCadenceApp() {
+  const el = document.querySelector('.js-iteration-cadence-app');
 
   if (!el) {
     return null;
   }
 
-  const { groupFullPath: groupPath, cadenceId, cadencesListPath } = el.dataset;
+  const { groupFullPath: groupPath, cadencesListPath } = el.dataset;
+  const router = createRouter(cadencesListPath);
 
   return new Vue({
     el,
+    router,
     apolloProvider,
     provide: {
       groupPath,
-    },
-    render(createElement) {
-      return createElement(IterationCadenceForm, {
-        props: {
-          cadenceId,
       cadencesListPath,
     },
-      });
+    render(createElement) {
+      return createElement(App);
     },
   });
 }

ee/app/assets/javascripts/iterations/router.js

+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import IterationCadenceForm from './components/iteration_cadence_form.vue';
+import IterationCadenceList from './components/iteration_cadences_list.vue';
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    name: 'new',
+    path: '/new',
+    component: IterationCadenceForm,
+  },
+  {
+    name: 'index',
+    path: '/',
+    component: IterationCadenceList,
+  },
+];
+
+export default function createRouter(base) {
+  const router = new VueRouter({
+    base,
+    mode: 'history',
+    routes,
+  });
+
+  return router;
+}

ee/app/assets/javascripts/pages/groups/iteration_cadences/index.js

-import { initCadenceForm } from 'ee/iterations';
+import { initCadenceApp } from 'ee/iterations';
 
-initCadenceForm();
+initCadenceApp();

ee/app/views/groups/iteration_cadences/edit.html.haml

@@ -2,6 +2,6 @@
 - breadcrumb_title params[:id]
 - page_title _("Edit iteration cadence")
 
-.js-iteration-cadence-form{ data: { group_full_path: @group.full_path,
+.js-iteration-cadence-app{ data: { group_full_path: @group.full_path,
   cadence_id: params[:id],
   cadences_list_path: group_iteration_cadences_path(@group) } }

ee/app/views/groups/iteration_cadences/index.html.haml

+- page_title _("Iteration cadences")
+
+.js-iteration-cadence-app{ data: { group_full_path: @group.full_path, cadences_list_path: group_iteration_cadences_path(@group) } }

ee/app/views/groups/iteration_cadences/new.html.haml

@@ -2,4 +2,4 @@
 - breadcrumb_title _("New")
 - page_title _("New iteration cadence")
 
-.js-iteration-cadence-form{ data: { group_full_path: @group.full_path, cadences_list_path: group_iteration_cadences_path(@group) } }
+.js-iteration-cadence-app{ data: { group_full_path: @group.full_path, cadences_list_path: group_iteration_cadences_path(@group) } }

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

 import { GlFormCheckbox, GlFormGroup } from '@gitlab/ui';
-import { createLocalVue, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import IterationCadenceForm from 'ee/iterations/components/iteration_cadence_form.vue';
 import createCadence from 'ee/iterations/queries/create_cadence.mutation.graphql';
@@ -7,14 +8,14 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { visitUrl } from '~/lib/utils/url_utility';
 
-jest.mock('~/lib/utils/url_utility');
-
-const localVue = createLocalVue();
+const push = jest.fn();
+const $router = {
+  push,
+};
 
 function createMockApolloProvider(requestHandlers) {
-  localVue.use(VueApollo);
+  Vue.use(VueApollo);
 
   return createMockApollo(requestHandlers);
 }
@@ -39,17 +40,18 @@ describe('Iteration cadence form', () => {
       iterationCadenceCreate: { iterationCadence, errors: ['alas, your data is unchanged'] },
     },
   };
-  const defaultProps = { cadencesListPath: TEST_HOST };
 
-  function createComponent({ props = defaultProps, resolverMock } = {}) {
+  function createComponent({ resolverMock } = {}) {
     const apolloProvider = createMockApolloProvider([[createCadence, resolverMock]]);
     wrapper = extendedWrapper(
       mount(IterationCadenceForm, {
         apolloProvider,
-        localVue,
-        propsData: props,
+        mocks: {
+          $router,
+        },
         provide: {
           groupPath,
+          cadencesListPath: TEST_HOST,
         },
       }),
     );
@@ -86,7 +88,7 @@ describe('Iteration cadence form', () => {
     it('cancel button links to list page', () => {
       clickCancel();
 
-      expect(visitUrl).toHaveBeenCalledWith(TEST_HOST);
+      expect(push).toHaveBeenCalledWith({ name: 'index' });
     });
 
     describe('save', () => {
@@ -131,7 +133,7 @@ describe('Iteration cadence form', () => {
 
         await waitForPromises();
 
-        expect(visitUrl).toHaveBeenCalled();
+        expect(push).toHaveBeenCalledWith({ name: 'index' });
       });
 
       it('does not submit if required fields missing', () => {