From ac7a561379e45647feddac388bce202a32c987c5 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Sat, 15 Jun 2024 09:41:23 -0400
Subject: [PATCH] refactor(editor): Migrate `userHelpers` mixin to composable
(no-changelog) (#9737)
---
packages/editor-ui/src/App.vue | 2 --
.../editor-ui/src/components/MainSidebar.vue | 7 ++--
.../src/components/SettingsSidebar.vue | 11 +++++--
.../src/composables/useUserHelpers.ts | 32 +++++++++++++++++++
packages/editor-ui/src/mixins/userHelpers.ts | 29 -----------------
5 files changed, 46 insertions(+), 35 deletions(-)
create mode 100644 packages/editor-ui/src/composables/useUserHelpers.ts
delete mode 100644 packages/editor-ui/src/mixins/userHelpers.ts
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 4df18d2573..0e671aad7b 100644
--- a/packages/editor-ui/src/App.vue
+++ b/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(),
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 9b9635928a..467b0049f1 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/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() {
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index ccf6ad54b9..9102fc27fe 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/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[] {
diff --git a/packages/editor-ui/src/composables/useUserHelpers.ts b/packages/editor-ui/src/composables/useUserHelpers.ts
new file mode 100644
index 0000000000..0ae6a81d59
--- /dev/null
+++ b/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,
+ };
+}
diff --git a/packages/editor-ui/src/mixins/userHelpers.ts b/packages/editor-ui/src/mixins/userHelpers.ts
deleted file mode 100644
index 6013154e4f..0000000000
--- a/packages/editor-ui/src/mixins/userHelpers.ts
+++ /dev/null
@@ -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);
- },
- },
-});