Merge branch 'init-design-management-constants' into 'master'

Define constants for routes within Design Management

See merge request gitlab-org/gitlab!23392

ee/app/assets/javascripts/design_management/components/list/item.vue

@@ -3,6 +3,7 @@ import { GlLoadingIcon } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import Timeago from '~/vue_shared/components/time_ago_tooltip.vue';
 import { n__, __ } from '~/locale';
+import { DESIGN_ROUTE_NAME } from '../../router/constants';
 
 export default {
   components: {
@@ -69,13 +70,14 @@ export default {
       return n__('%d comment', '%d comments', this.notesCount);
     },
   },
+  DESIGN_ROUTE_NAME,
 };
 </script>
 
 <template>
   <router-link
     :to="{
-      name: 'design',
+      name: $options.DESIGN_ROUTE_NAME,
       params: { id: filename },
       query: $route.query,
     }"

ee/app/assets/javascripts/design_management/components/toolbar/index.vue

@@ -7,6 +7,7 @@ import Pagination from './pagination.vue';
 import DeleteButton from '../delete_button.vue';
 import permissionsQuery from '../../graphql/queries/permissions.query.graphql';
 import appDataQuery from '../../graphql/queries/appData.query.graphql';
+import { DESIGNS_ROUTE_NAME } from '../../router/constants';
 
 export default {
   components: {
@@ -89,6 +90,7 @@ export default {
       return this.permissions.createDesign;
     },
   },
+  DESIGNS_ROUTE_NAME,
 };
 </script>
 
@@ -96,7 +98,7 @@ export default {
   <header class="d-flex p-2 bg-white align-items-center js-design-header">
     <router-link
       :to="{
-        name: 'designs',
+        name: $options.DESIGNS_ROUTE_NAME,
         query: $route.query,
       }"
       :aria-label="s__('DesignManagement|Go back to designs')"

ee/app/assets/javascripts/design_management/components/toolbar/pagination.vue

@@ -4,6 +4,7 @@ import 'mousetrap';
 import { s__, sprintf } from '~/locale';
 import PaginationButton from './pagination_button.vue';
 import allDesignsMixin from '../../mixins/all_designs';
+import { DESIGN_ROUTE_NAME } from '../../router/constants';
 
 export default {
   components: {
@@ -51,7 +52,7 @@ export default {
     navigateToDesign(design) {
       if (design) {
         this.$router.push({
-          name: 'design',
+          name: DESIGN_ROUTE_NAME,
           params: { id: design.filename },
           query: this.$route.query,
         });

ee/app/assets/javascripts/design_management/components/toolbar/pagination_button.vue

 <script>
 import Icon from '~/vue_shared/components/icon.vue';
+import { DESIGN_ROUTE_NAME } from '../../router/constants';
 
 export default {
   components: {
@@ -25,7 +26,7 @@ export default {
       if (!this.design) return {};
 
       return {
-        name: 'design',
+        name: DESIGN_ROUTE_NAME,
         params: { id: this.design.filename },
         query: this.$route.query,
       };

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

@@ -4,6 +4,7 @@ import createRouter from './router';
 import App from './components/app.vue';
 import apolloProvider from './graphql';
 import projectQuery from './graphql/queries/project.query.graphql';
+import { DESIGNS_ROUTE_NAME, ROOT_ROUTE_NAME } from './router/constants';
 
 export default () => {
   const el = document.getElementById('js-design-management');
@@ -12,10 +13,10 @@ export default () => {
   const router = createRouter(issuePath);
 
   $('.js-issue-tabs').on('shown.bs.tab', ({ target: { id } }) => {
-    if (id === 'designs' && router.currentRoute.name === 'root') {
-      router.push('/designs');
+    if (id === 'designs' && router.currentRoute.name === ROOT_ROUTE_NAME) {
+      router.push({ name: DESIGNS_ROUTE_NAME });
     } else if (id === 'discussion') {
-      router.push('/');
+      router.push({ name: ROOT_ROUTE_NAME });
     }
   });
 

ee/app/assets/javascripts/design_management/mixins/all_designs.js

@@ -4,6 +4,7 @@ import { s__ } from '~/locale';
 import projectQuery from '../graphql/queries/project.query.graphql';
 import { extractNodes } from '../utils/design_management_utils';
 import allVersionsMixin from './all_versions';
+import { DESIGNS_ROUTE_NAME } from '../router/constants';
 
 export default {
   mixins: [allVersionsMixin],
@@ -34,7 +35,7 @@ export default {
               'DesignManagement|Requested design version does not exist. Showing latest version instead',
             ),
           );
-          this.$router.replace({ name: 'designs', query: { version: undefined } });
+          this.$router.replace({ name: DESIGNS_ROUTE_NAME, query: { version: undefined } });
         }
       },
     },

ee/app/assets/javascripts/design_management/pages/design/index.vue

@@ -26,6 +26,7 @@ import {
   DESIGN_NOT_EXIST_ERROR,
   designDeletionError,
 } from '../../utils/error_messages';
+import { DESIGNS_ROUTE_NAME } from '../../router/constants';
 
 export default {
   components: {
@@ -167,7 +168,7 @@ export default {
       // because we redirect user to /designs (the issue page),
       // we want to create these flashes on the issue page
       createFlash(message);
-      this.$router.push({ name: 'designs' });
+      this.$router.push({ name: this.$options.DESIGNS_ROUTE_NAME });
     },
     onDiffNoteError(e) {
       this.errorMessage = ADD_DISCUSSION_COMMENT_ERROR;
@@ -186,7 +187,7 @@ export default {
     },
     closeDesign() {
       this.$router.push({
-        name: 'designs',
+        name: this.$options.DESIGNS_ROUTE_NAME,
         query: this.$route.query,
       });
     },
@@ -196,6 +197,7 @@ export default {
     next();
   },
   createImageDiffNoteMutation,
+  DESIGNS_ROUTE_NAME,
 };
 </script>
 
@@ -210,7 +212,7 @@ export default {
           :filenames="[design.filename]"
           :project-path="projectPath"
           :iid="issueIid"
-          @done="$router.push({ name: 'designs' })"
+          @done="$router.push({ name: $options.DESIGNS_ROUTE_NAME })"
           @error="onDesignDeleteError"
         >
           <template v-slot="{ mutate, loading, error }">

ee/app/assets/javascripts/design_management/pages/index.vue

@@ -14,6 +14,7 @@ import allDesignsMixin from '../mixins/all_designs';
 import { UPLOAD_DESIGN_ERROR, designDeletionError } from '../utils/error_messages';
 import { updateStoreAfterUploadDesign } from '../utils/cache_update';
 import { designUploadOptimisticResponse } from '../utils/design_management_utils';
+import { DESIGNS_ROUTE_NAME } from '../router/constants';
 
 const MAXIMUM_FILE_UPLOAD_LIMIT = 10;
 
@@ -145,7 +146,7 @@ export default {
     },
     onUploadDesignDone() {
       this.resetFilesToBeSaved();
-      this.$router.push({ name: 'designs' });
+      this.$router.push({ name: DESIGNS_ROUTE_NAME });
     },
     onUploadDesignError() {
       this.resetFilesToBeSaved();
@@ -176,7 +177,7 @@ export default {
     },
     onDesignDelete() {
       this.selectedDesigns = [];
-      if (this.$route.query.version) this.$router.push({ name: 'designs' });
+      if (this.$route.query.version) this.$router.push({ name: DESIGNS_ROUTE_NAME });
     },
     onDesignDeleteError() {
       const errorMessage = designDeletionError({ singular: this.selectedDesigns.length === 1 });

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

-import $ from 'jquery';
-import Vue from 'vue';
-import VueRouter from 'vue-router';
-import Home from './pages/index.vue';
-import DesignDetail from './pages/design/index.vue';
-
-Vue.use(VueRouter);
-
-export default function createRouter(base) {
-  const router = new VueRouter({
-    base,
-    mode: 'history',
-    routes: [
-      {
-        name: 'root',
-        path: '/',
-        component: Home,
-        meta: {
-          el: 'discussion',
-        },
-      },
-      {
-        name: 'designs',
-        path: '/designs',
-        component: Home,
-        meta: {
-          el: 'designs',
-        },
-        children: [
-          {
-            name: 'design',
-            path: ':id',
-            component: DesignDetail,
-            meta: {
-              el: 'designs',
-            },
-            beforeEnter(
-              {
-                params: { id },
-              },
-              from,
-              next,
-            ) {
-              if (typeof id === 'string') {
-                next();
-              }
-            },
-            props: ({ params: { id } }) => ({ id }),
-          },
-        ],
-      },
-    ],
-  });
-
-  router.beforeEach(({ meta: { el } }, from, next) => {
-    $(`#${el}`).tab('show');
-
-    next();
-  });
-
-  return router;
-}

ee/app/assets/javascripts/design_management/router/constants.js

+export const ROOT_ROUTE_NAME = 'root';
+export const DESIGNS_ROUTE_NAME = 'designs';
+export const DESIGN_ROUTE_NAME = 'design';

ee/app/assets/javascripts/design_management/router/index.js

+import $ from 'jquery';
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import routes from './routes';
+
+Vue.use(VueRouter);
+
+export default function createRouter(base) {
+  const router = new VueRouter({
+    base,
+    mode: 'history',
+    routes,
+  });
+
+  router.beforeEach(({ meta: { el } }, from, next) => {
+    $(`#${el}`).tab('show');
+
+    next();
+  });
+
+  return router;
+}

ee/app/assets/javascripts/design_management/router/routes.js

+import Home from '../pages/index.vue';
+import DesignDetail from '../pages/design/index.vue';
+import { ROOT_ROUTE_NAME, DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from './constants';
+
+export default [
+  {
+    name: ROOT_ROUTE_NAME,
+    path: '/',
+    component: Home,
+    meta: {
+      el: 'discussion',
+    },
+  },
+  {
+    name: DESIGNS_ROUTE_NAME,
+    path: '/designs',
+    component: Home,
+    meta: {
+      el: 'designs',
+    },
+    children: [
+      {
+        name: DESIGN_ROUTE_NAME,
+        path: ':id',
+        component: DesignDetail,
+        meta: {
+          el: 'designs',
+        },
+        beforeEnter(
+          {
+            params: { id },
+          },
+          from,
+          next,
+        ) {
+          if (typeof id === 'string') {
+            next();
+          }
+        },
+        props: ({ params: { id } }) => ({ id }),
+      },
+    ],
+  },
+];

ee/spec/frontend/design_management/components/toolbar/index_spec.js

@@ -2,6 +2,7 @@ import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueRouter from 'vue-router';
 import Toolbar from 'ee/design_management/components/toolbar/index.vue';
 import DeleteButton from 'ee/design_management/components/delete_button.vue';
+import { DESIGNS_ROUTE_NAME } from 'ee/design_management/router/constants';
 import { GlButton } from '@gitlab/ui';
 
 const localVue = createLocalVue();
@@ -73,7 +74,7 @@ describe('Design management toolbar component', () => {
       const link = wrapper.find('a');
 
       expect(link.props('to')).toEqual({
-        name: 'designs',
+        name: DESIGNS_ROUTE_NAME,
         query: {
           version: undefined,
         },

ee/spec/frontend/design_management/components/toolbar/pagination_button_spec.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueRouter from 'vue-router';
 import PaginationButton from 'ee/design_management/components/toolbar/pagination_button.vue';
+import { DESIGN_ROUTE_NAME } from 'ee/design_management/router/constants';
 
 const localVue = createLocalVue();
 localVue.use(VueRouter);
@@ -51,7 +52,7 @@ describe('Design management pagination button component', () => {
       wrapper.vm.$router.replace('/root/test-project/issues/1/designs/test?version=1');
 
       expect(wrapper.vm.designLink).toEqual({
-        name: 'design',
+        name: DESIGN_ROUTE_NAME,
         params: { id: 'test' },
         query: { version: '1' },
       });

ee/spec/frontend/design_management/components/toolbar/pagination_spec.js

@@ -2,6 +2,7 @@
 import 'mousetrap';
 import { shallowMount } from '@vue/test-utils';
 import Pagination from 'ee/design_management/components/toolbar/pagination.vue';
+import { DESIGN_ROUTE_NAME } from 'ee/design_management/router/constants';
 
 const push = jest.fn();
 const $router = {
@@ -60,7 +61,7 @@ describe('Design management pagination component', () => {
     it('routes to previous design on Left button', () => {
       Mousetrap.trigger('left');
       expect(push).toHaveBeenCalledWith({
-        name: 'design',
+        name: DESIGN_ROUTE_NAME,
         params: { id: '1' },
         query: {},
       });
@@ -69,7 +70,7 @@ describe('Design management pagination component', () => {
     it('routes to next design on Right button', () => {
       Mousetrap.trigger('right');
       expect(push).toHaveBeenCalledWith({
-        name: 'design',
+        name: DESIGN_ROUTE_NAME,
         params: { id: '3' },
         query: {},
       });

ee/spec/frontend/design_management/pages/index_spec.js

@@ -8,6 +8,7 @@ import uploadDesignQuery from 'ee/design_management/graphql/mutations/uploadDesi
 import DesignDestroyer from 'ee/design_management/components/design_destroyer.vue';
 import UploadButton from 'ee/design_management/components/upload/button.vue';
 import DeleteButton from 'ee/design_management/components/delete_button.vue';
+import { DESIGNS_ROUTE_NAME } from 'ee/design_management/router/constants';
 import createFlash from '~/flash';
 
 const localVue = createLocalVue();
@@ -15,7 +16,7 @@ localVue.use(VueRouter);
 const router = new VueRouter({
   routes: [
     {
-      name: 'designs',
+      name: DESIGNS_ROUTE_NAME,
       path: '/designs',
       component: Index,
     },
@@ -382,7 +383,7 @@ describe('Design management index page', () => {
       createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
 
       router.replace({
-        name: 'designs',
+        name: DESIGNS_ROUTE_NAME,
         query: {
           version: '2',
         },

ee/spec/frontend/design_management/router_spec.js

@@ -4,6 +4,11 @@ import App from 'ee/design_management/components/app.vue';
 import Designs from 'ee/design_management/pages/index.vue';
 import DesignDetail from 'ee/design_management/pages/design/index.vue';
 import createRouter from 'ee/design_management/router';
+import {
+  ROOT_ROUTE_NAME,
+  DESIGNS_ROUTE_NAME,
+  DESIGN_ROUTE_NAME,
+} from 'ee/design_management/router/constants';
 import '~/commons/bootstrap';
 
 jest.mock('mousetrap', () => ({
@@ -50,31 +55,34 @@ describe('Design management router', () => {
     window.location.hash = '';
   });
 
-  describe('root', () => {
+  describe.each([['/'], [{ name: ROOT_ROUTE_NAME }]])('root route', pushArg => {
     it('pushes home component', () => {
-      router.push('/');
+      router.push(pushArg);
 
       expect(vm.find(Designs).exists()).toBe(true);
     });
   });
 
-  describe('designs', () => {
+  describe.each([['/designs'], [{ name: DESIGNS_ROUTE_NAME }]])('designs route', pushArg => {
     it('pushes designs root component', () => {
-      router.push('/designs');
+      router.push(pushArg);
 
       expect(vm.find(Designs).exists()).toBe(true);
     });
   });
 
-  describe('designs detail', () => {
-    it('pushes designs detail component', () => {
-      router.push('/designs/1');
-
-      return vm.vm.$nextTick().then(() => {
-        const detail = vm.find(DesignDetail);
-        expect(detail.exists()).toBe(true);
-        expect(detail.props('id')).toEqual('1');
+  describe.each([['/designs/1'], [{ name: DESIGN_ROUTE_NAME, params: { id: '1' } }]])(
+    'designs detail route',
+    pushArg => {
+      it('pushes designs detail component', () => {
+        router.push(pushArg);
+
+        return vm.vm.$nextTick().then(() => {
+          const detail = vm.find(DesignDetail);
+          expect(detail.exists()).toBe(true);
+          expect(detail.props('id')).toEqual('1');
+        });
       });
-    });
-  });
+    },
+  );
 });