Merge branch '217595-fix-broken-filters' into 'master'

Reintroduce the missing router

Closes #217595

See merge request gitlab-org/gitlab!33831

ee/app/assets/javascripts/security_dashboard/first_class_init.js

@@ -6,6 +6,7 @@ import FirstClassGroupSecurityDashboard from './components/first_class_group_sec
 import FirstClassInstanceSecurityDashboard from './components/first_class_instance_security_dashboard.vue';
 import UnavailableState from './components/unavailable_state.vue';
 import createStore from './store';
+import createRouter from './router';
 import projectsPlugin from './store/plugins/projects';
 import projectSelector from './store/plugins/project_selector';
 import apolloProvider from './graphql/provider';
@@ -62,6 +63,7 @@ export default (
     props.vulnerabilitiesExportEndpoint = el.dataset.vulnerabilitiesExportEndpoint;
   }
 
+  const router = createRouter();
   const store = createStore({
     dashboardType,
     plugins: [projectSelector, projectsPlugin],
@@ -70,6 +72,7 @@ export default (
   return new Vue({
     el,
     store,
+    router,
     apolloProvider,
     render(createElement) {
       return createElement(component, { props });

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

+import Vue from 'vue';
+import VueRouter from 'vue-router';
+
+Vue.use(VueRouter);
+
+// Unfortunately Vue Router doesn't work without at least a fake component
+// If you do only data handling
+const EmptyRouterComponent = {
+  render(createElement) {
+    return createElement('div');
+  },
+};
+
+export default () => {
+  const routes = [{ path: '/', name: 'dashboard', component: EmptyRouterComponent }];
+  const router = new VueRouter({
+    mode: 'history',
+    base: window.location.pathname,
+    routes,
+  });
+
+  return router;
+};