Commit c55ba092 authored by Kushal Pandya's avatar Kushal Pandya

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

Define constants for routes within Design Management

See merge request gitlab-org/gitlab!23392
parents 4445c6ee 43976583
......@@ -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,
}"
......
......@@ -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')"
......
......@@ -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,
});
......
<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,
};
......
......@@ -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 });
}
});
......
......@@ -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 } });
}
},
},
......
......@@ -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 }">
......
......@@ -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 });
......
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;
}
export const ROOT_ROUTE_NAME = 'root';
export const DESIGNS_ROUTE_NAME = 'designs';
export const DESIGN_ROUTE_NAME = 'design';
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;
}
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 }),
},
],
},
];
......@@ -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,
},
......
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' },
});
......
......@@ -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: {},
});
......
......@@ -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',
},
......
......@@ -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,25 +55,27 @@ 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', () => {
describe.each([['/designs/1'], [{ name: DESIGN_ROUTE_NAME, params: { id: '1' } }]])(
'designs detail route',
pushArg => {
it('pushes designs detail component', () => {
router.push('/designs/1');
router.push(pushArg);
return vm.vm.$nextTick().then(() => {
const detail = vm.find(DesignDetail);
......@@ -76,5 +83,6 @@ describe('Design management router', () => {
expect(detail.props('id')).toEqual('1');
});
});
});
},
);
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment