Fixes design management router and issue note linking

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/64667

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

 import $ from 'jquery';
 import Vue from 'vue';
-import router from './router';
+import createRouter from './router';
 import App from './components/app.vue';
 import apolloProvider from './graphql';
 import allDesigns from './queries/allDesigns.graphql';
@@ -8,7 +8,8 @@ import allDesigns from './queries/allDesigns.graphql';
 export default () => {
   const el = document.getElementById('js-design-management');
   const badge = document.querySelector('.js-designs-count');
-  const { issueIid, projectPath } = el.dataset;
+  const { issueIid, projectPath, issuePath } = el.dataset;
+  const router = createRouter(issuePath);
 
   $('.js-issue-tabs').on('shown.bs.tab', ({ target: { id } }) => {
     if (id === 'designs' && router.currentRoute.name === 'root') {

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

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

ee/app/views/projects/issues/_discussion.html.haml

@@ -12,6 +12,6 @@
     #discussion-tab.tab-pane.show.active{ role: 'tabpanel', 'aria-labelledby': 'discussion' }
       = render_ce 'projects/issues/discussion'
     #designs-tab.tab-pane{ role: 'tabpanel', 'aria-labelledby': 'designs' }
-      #js-design-management{ data: { project_path: @project.full_path, issue_iid: @issue.iid } }
+      #js-design-management{ data: { project_path: @project.full_path, issue_iid: @issue.iid, issue_path: project_issue_path(@project, @issue) } }
 - else
   = render_ce 'projects/issues/discussion'

ee/config/routes/project.rb

@@ -72,6 +72,13 @@ constraints(::Constraints::ProjectUrlConstrainer.new) do
         end
       end
 
+      resources :issues, only: [], constraints: { id: /\d+/ } do
+        member do
+          get :designs, action: 'show'
+          get 'designs/*vueroute', action: 'show', format: false
+        end
+      end
+
       resource :insights, only: [:show] do
         collection do
           post :query

ee/spec/frontend/design_management/router_spec.js

@@ -3,11 +3,12 @@ import VueRouter from 'vue-router';
 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 router from 'ee/design_management/router';
+import createRouter from 'ee/design_management/router';
 import '~/commons/bootstrap';
 
 describe('Design management router', () => {
   let vm;
+  let router;
 
   function factory() {
     const localVue = createLocalVue();
@@ -16,6 +17,8 @@ describe('Design management router', () => {
 
     window.gon = { sprite_icons: '' };
 
+    router = createRouter('/');
+
     vm = mount(App, {
       localVue,
       router,