refactor(editor): Migrate userHelpers mixin to composable (no-changelog) (#9737)

packages/editor-ui/src/App.vue

@@ -45,7 +45,6 @@ import LoadingView from '@/views/LoadingView.vue';
 import Telemetry from '@/components/Telemetry.vue';
 import { HIRING_BANNER, VIEWS } from '@/constants';
 
-import { userHelpers } from '@/mixins/userHelpers';
 import { loadLanguage } from '@/plugins/i18n';
 import useGlobalLinkActions from '@/composables/useGlobalLinkActions';
 import { useExternalHooks } from '@/composables/useExternalHooks';
@@ -74,7 +73,6 @@ export default defineComponent({
 		Modals,
 		AIAssistantChat,
 	},
-	mixins: [userHelpers],
 	setup() {
 		return {
 			...useGlobalLinkActions(),

packages/editor-ui/src/components/MainSidebar.vue

@@ -111,7 +111,7 @@ import GiftNotificationIcon from './GiftNotificationIcon.vue';
 
 import { useMessage } from '@/composables/useMessage';
 import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
-import { userHelpers } from '@/mixins/userHelpers';
+import { useUserHelpers } from '@/composables/useUserHelpers';
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 import { useCloudPlanStore } from '@/stores/cloudPlan.store';
@@ -131,6 +131,7 @@ import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useDebounce } from '@/composables/useDebounce';
 import { useBecomeTemplateCreatorStore } from '@/components/BecomeTemplateCreatorCta/becomeTemplateCreatorStore';
 import ProjectNavigation from '@/components/Projects/ProjectNavigation.vue';
+import { useRoute, useRouter } from 'vue-router';
 
 export default defineComponent({
 	name: 'MainSidebar',
@@ -141,15 +142,17 @@ export default defineComponent({
 		BecomeTemplateCreatorCta,
 		ProjectNavigation,
 	},
-	mixins: [userHelpers],
 	setup() {
 		const externalHooks = useExternalHooks();
 		const { callDebounced } = useDebounce();
+		const router = useRouter();
+		const route = useRoute();
 
 		return {
 			externalHooks,
 			callDebounced,
 			...useMessage(),
+			...useUserHelpers(router, route),
 		};
 	},
 	data() {

packages/editor-ui/src/components/SettingsSidebar.vue

@@ -24,7 +24,7 @@
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
-import { userHelpers } from '@/mixins/userHelpers';
+import { useUserHelpers } from '@/composables/useUserHelpers';
 import type { IFakeDoor } from '@/Interface';
 import type { IMenuItem } from 'n8n-design-system';
 import type { BaseTextKey } from '@/plugins/i18n';
@@ -32,10 +32,17 @@ import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { hasPermission } from '@/utils/rbac/permissions';
+import { useRoute, useRouter } from 'vue-router';
 
 export default defineComponent({
 	name: 'SettingsSidebar',
-	mixins: [userHelpers],
+	setup() {
+		const router = useRouter();
+		const route = useRoute();
+		return {
+			...useUserHelpers(router, route),
+		};
+	},
 	computed: {
 		...mapStores(useRootStore, useSettingsStore, useUIStore),
 		settingsFakeDoorFeatures(): IFakeDoor[] {

packages/editor-ui/src/composables/useUserHelpers.ts

@@ -0,0 +1,32 @@
+import type { RouteLocation, RouteLocationNormalizedLoaded, Router } from 'vue-router';
+import { hasPermission } from '@/utils/rbac/permissions';
+import type { PermissionTypeOptions } from '@/types/rbac';
+
+export function useUserHelpers(router: Router, route: RouteLocationNormalizedLoaded) {
+	const canUserAccessRouteByName = (name: string) => {
+		const resolvedRoute = router.resolve({ name });
+
+		return canUserAccessRoute(resolvedRoute);
+	};
+
+	const canUserAccessCurrentRoute = () => {
+		return canUserAccessRoute(route);
+	};
+
+	const canUserAccessRoute = (route: RouteLocation) => {
+		const middleware = route.meta?.middleware;
+		const middlewareOptions = route.meta?.middlewareOptions;
+
+		if (!middleware) {
+			return true;
+		}
+
+		return hasPermission(middleware, middlewareOptions as PermissionTypeOptions | undefined);
+	};
+
+	return {
+		canUserAccessRouteByName,
+		canUserAccessCurrentRoute,
+		canUserAccessRoute,
+	};
+}

packages/editor-ui/src/mixins/userHelpers.ts

@@ -1,29 +0,0 @@
-import { defineComponent } from 'vue';
-import type { RouteLocation } from 'vue-router';
-import { hasPermission } from '@/utils/rbac/permissions';
-import type { PermissionTypeOptions } from '@/types/rbac';
-
-export const userHelpers = defineComponent({
-	methods: {
-		canUserAccessRouteByName(name: string) {
-			const route = this.$router.resolve({ name });
-
-			return this.canUserAccessRoute(route);
-		},
-
-		canUserAccessCurrentRoute() {
-			return this.canUserAccessRoute(this.$route);
-		},
-
-		canUserAccessRoute(route: RouteLocation) {
-			const middleware = route.meta?.middleware;
-			const middlewareOptions = route.meta?.middlewareOptions;
-
-			if (!middleware) {
-				return true;
-			}
-
-			return hasPermission(middleware, middlewareOptions as PermissionTypeOptions | undefined);
-		},
-	},
-});