fix: Use middleware for routing

packages/editor-ui/src/features/projects/projects-constants.ts

@@ -1,3 +1,5 @@
+import { getPathAsRegexPattern } from '@/utils/routeUtils';
+
 export const projectsBaseRoute = '/projects';
 export const projectsRoute = `${projectsBaseRoute}/:projectId`;
 
@@ -11,3 +13,5 @@ export const oldRoutesToRedirectToProjects = [
 	'/workflow/:workflowId/history/:versionId?',
 	'/workflows/templates/:id',
 ];
+
+export const oldRoutesAsRegExps = oldRoutesToRedirectToProjects.map(getPathAsRegexPattern);

packages/editor-ui/src/features/projects/projects-routes.ts

@@ -1,9 +1,9 @@
-import type { RouteRecordRaw } from 'vue-router';
+import type { NavigationGuardNext, RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
 import { EnterpriseEditionFeature, VIEWS } from '@/constants';
 import {
 	projectsBaseRoute,
 	projectsRoute,
-	oldRoutesToRedirectToProjects,
+	oldRoutesAsRegExps,
 } from '@/features/projects/projects-constants';
 import { getTemplatesRedirect } from '@/utils/routeUtils';
 
@@ -19,11 +19,11 @@ const ExecutionsLandingPage = async () =>
 const ExecutionPreview = async () =>
 	await import('@/components/ExecutionsView/ExecutionPreview.vue');
 const WorkflowHistory = async () => await import('@/views/WorkflowHistory.vue');
-const Projects = async () => await import('@/features/projects/views/Projects.vue');
 
 export const projectsRoutes: Readonly<RouteRecordRaw[]> = [
 	{
 		path: projectsRoute,
+		name: VIEWS.PROJECTS,
 		meta: {
 			middleware: ['authenticated'],
 		},
@@ -175,17 +175,24 @@ export const projectsRoutes: Readonly<RouteRecordRaw[]> = [
 			},
 		],
 	},
-	{
-		path: projectsBaseRoute,
-		component: Projects,
-		name: VIEWS.PROJECTS,
-		meta: {
-			middleware: ['authenticated'],
-		},
-	},
-	// Catch old /credentials and /workflow routes and redirect to /projects
-	...oldRoutesToRedirectToProjects.map((oldRoute) => ({
-		path: oldRoute,
-		redirect: projectsBaseRoute,
-	})),
 ];
+
+export const projectsRouteBeforeMiddleware = async (
+	to: RouteLocationNormalized,
+	from: RouteLocationNormalized,
+	next: NavigationGuardNext,
+) => {
+	const projectId = 'home';
+	if (
+		oldRoutesAsRegExps.some((pattern) => pattern.test(to.path)) &&
+		!to.path.includes(projectsBaseRoute)
+	) {
+		return next({
+			path: `${projectsBaseRoute}/${projectId}${to.path}`,
+			query: to.query,
+		});
+	}
+	if (to.path === '/' || to.path === projectsBaseRoute) {
+		return next({ name: VIEWS.WORKFLOWS, params: { projectId } });
+	}
+};

packages/editor-ui/src/router.ts

@@ -20,7 +20,7 @@ import type { RouteConfig, RouterMiddleware } from '@/types/router';
 import { initializeCore } from '@/init';
 import { tryToParseNumber } from '@/utils/typesUtils';
 import { getTemplatesRedirect } from '@/utils/routeUtils';
-import { projectsRoutes } from '@/features/projects/projects-routes';
+import { projectsRouteBeforeMiddleware, projectsRoutes } from '@/features/projects/projects-routes';
 
 const ChangePasswordView = async () => await import('./views/ChangePasswordView.vue');
 const ErrorView = async () => await import('./views/ErrorView.vue');
@@ -58,16 +58,6 @@ const WorkerView = async () => await import('./views/WorkerView.vue');
 const WorkflowOnboardingView = async () => await import('@/views/WorkflowOnboardingView.vue');
 
 export const routes = [
-	{
-		path: '/',
-		name: VIEWS.HOMEPAGE,
-		redirect: () => {
-			return { name: VIEWS.PROJECTS };
-		},
-		meta: {
-			middleware: ['authenticated'],
-		},
-	},
 	{
 		path: '/collections/:id',
 		name: VIEWS.COLLECTION,
@@ -670,6 +660,9 @@ router.beforeEach(async (to: RouteLocationNormalized & RouteConfig, from, next)
 			return next({ name: VIEWS.SETUP });
 		}
 
+		// Catch old /credentials and /workflow routes and redirect to /projects or /home
+		await projectsRouteBeforeMiddleware(to, from, next);
+
 		/**
 		 * Verify user permissions for current route
 		 */

packages/editor-ui/src/utils/routeUtils.ts

@@ -3,7 +3,7 @@ import { VIEWS } from '@/constants';
 import { useSettingsStore } from '@/stores/settings.store';
 
 export const getPathAsRegexPattern = (path: RouteRecordRaw['path']): RegExp =>
-	new RegExp(path.replace(/:\w+/g, '[^/]+'));
+	new RegExp(path.replace(/:([^\/]+)/g, '([^/]+)').replace('/', '\\/'));
 
 export function getTemplatesRedirect(defaultRedirect: VIEWS[keyof VIEWS]) {
 	const settingsStore = useSettingsStore();