refactor(editor): Refactor workflowHelpers mixin to composable (no-changelog) (#8600)

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

@@ -29,7 +29,6 @@ import {
 	VIEWS,
 } from '@/constants';
 import type { INodeUi, ITabBarItem } from '@/Interface';
-import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { useUIStore } from '@/stores/ui.store';
@@ -40,13 +39,11 @@ export default defineComponent({
 		WorkflowDetails,
 		TabBar,
 	},
-	mixins: [pushConnection, workflowHelpers],
+	mixins: [pushConnection],
 	setup(props, ctx) {
 		return {
 			// eslint-disable-next-line @typescript-eslint/no-misused-promises
 			...pushConnection.setup?.(props, ctx),
-			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...workflowHelpers.setup?.(props, ctx),
 		};
 	},
 	data() {

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -158,7 +158,6 @@ import ShortenName from '@/components/ShortenName.vue';
 import TagsContainer from '@/components/TagsContainer.vue';
 import PushConnectionTracker from '@/components/PushConnectionTracker.vue';
 import WorkflowActivator from '@/components/WorkflowActivator.vue';
-import { workflowHelpers } from '@/mixins/workflowHelpers';
 import SaveButton from '@/components/SaveButton.vue';
 import TagsDropdown from '@/components/TagsDropdown.vue';
 import InlineTextEdit from '@/components/InlineTextEdit.vue';
@@ -185,6 +184,8 @@ import { createEventBus } from 'n8n-design-system/utils';
 import { nodeViewEventBus } from '@/event-bus';
 import { hasPermission } from '@/rbac/permissions';
 import { useCanvasStore } from '@/stores/canvas.store';
+import { useRouter } from 'vue-router';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 
 const hasChanged = (prev: string[], curr: string[]) => {
 	if (prev.length !== curr.length) {
@@ -208,7 +209,6 @@ export default defineComponent({
 		BreakpointsObserver,
 		CollaborationPane,
 	},
-	mixins: [workflowHelpers],
 	props: {
 		readOnly: {
 			type: Boolean,
@@ -216,7 +216,11 @@ export default defineComponent({
 		},
 	},
 	setup() {
+		const router = useRouter();
+		const workflowHelpers = useWorkflowHelpers(router);
+
 		return {
+			workflowHelpers,
 			...useTitleChange(),
 			...useToast(),
 			...useMessage(),
@@ -390,7 +394,7 @@ export default defineComponent({
 			} else if (this.$route.params.name && this.$route.params.name !== 'new') {
 				currentId = this.$route.params.name;
 			}
-			const saved = await this.saveCurrentWorkflow({
+			const saved = await this.workflowHelpers.saveCurrentWorkflow({
 				id: currentId,
 				name: this.workflowName,
 				tags: this.currentWorkflowTagIds,
@@ -443,7 +447,7 @@ export default defineComponent({
 			}
 			this.tagsSaving = true;
 
-			const saved = await this.saveCurrentWorkflow({ tags });
+			const saved = await this.workflowHelpers.saveCurrentWorkflow({ tags });
 			this.$telemetry.track('User edited workflow tags', {
 				workflow_id: this.currentWorkflowId,
 				new_tag_count: tags.length,
@@ -494,7 +498,7 @@ export default defineComponent({
 				return;
 			}
 
-			const saved = await this.saveCurrentWorkflow({ name });
+			const saved = await this.workflowHelpers.saveCurrentWorkflow({ name });
 			if (saved) {
 				this.isNameEditEnabled = false;
 			}
@@ -539,7 +543,7 @@ export default defineComponent({
 					break;
 				}
 				case WORKFLOW_MENU_ACTIONS.DOWNLOAD: {
-					const workflowData = await this.getWorkflowDataToSave();
+					const workflowData = await this.workflowHelpers.getWorkflowDataToSave();
 					const { tags, ...data } = workflowData;
 					const exportData: IWorkflowToShare = {
 						...data,