From 3a5412850c137aafa02cf21bdf5b2c6a5ceeae1d Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Fri, 17 May 2024 10:03:39 -0400
Subject: [PATCH] refactor(editor): Convert `workflowActivate`  mixin into a
 composable  (no-changelog) (#9423)

---
 .../src/components/NodeDetailsView.vue        |   7 +-
 .../src/components/WorkflowActivator.vue      |   8 +-
 .../src/composables/useWorkflowActivate.ts    | 135 ++++++++++++++++++
 .../editor-ui/src/mixins/workflowActivate.ts  | 134 -----------------
 4 files changed, 141 insertions(+), 143 deletions(-)
 create mode 100644 packages/editor-ui/src/composables/useWorkflowActivate.ts
 delete mode 100644 packages/editor-ui/src/mixins/workflowActivate.ts

diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index d89000a0fb6f8..21ac42f7ff080 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -165,7 +165,7 @@ import {
 	START_NODE_TYPE,
 	STICKY_NODE_TYPE,
 } from '@/constants';
-import { workflowActivate } from '@/mixins/workflowActivate';
+import { useWorkflowActivate } from '@/composables/useWorkflowActivate';
 import { dataPinningEventBus } from '@/event-bus';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -189,7 +189,6 @@ export default defineComponent({
 		NDVDraggablePanels,
 		TriggerPanel,
 	},
-	mixins: [workflowActivate],
 	props: {
 		readOnly: {
 			type: Boolean,
@@ -210,16 +209,16 @@ export default defineComponent({
 		const pinnedData = usePinnedData(activeNode);
 		const router = useRouter();
 		const workflowHelpers = useWorkflowHelpers({ router });
+		const workflowActivate = useWorkflowActivate();
 
 		return {
 			externalHooks,
 			nodeHelpers,
 			pinnedData,
 			workflowHelpers,
+			workflowActivate,
 			...useDeviceSupport(),
 			...useMessage(),
-			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...workflowActivate.setup?.(props, ctx),
 		};
 	},
 	data() {
diff --git a/packages/editor-ui/src/components/WorkflowActivator.vue b/packages/editor-ui/src/components/WorkflowActivator.vue
index 0e0c31f3c242e..10599a97c36b6 100644
--- a/packages/editor-ui/src/components/WorkflowActivator.vue
+++ b/packages/editor-ui/src/components/WorkflowActivator.vue
@@ -52,7 +52,7 @@
 
 <script lang="ts">
 import { useToast } from '@/composables/useToast';
-import { workflowActivate } from '@/mixins/workflowActivate';
+import { useWorkflowActivate } from '@/composables/useWorkflowActivate';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { mapStores } from 'pinia';
@@ -61,13 +61,11 @@ import { getActivatableTriggerNodes } from '@/utils/nodeTypesUtils';
 
 export default defineComponent({
 	name: 'WorkflowActivator',
-	mixins: [workflowActivate],
 	props: ['workflowActive', 'workflowId'],
-	setup(props, ctx) {
+	setup() {
 		return {
 			...useToast(),
-			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...workflowActivate.setup?.(props, ctx),
+			...useWorkflowActivate(),
 		};
 	},
 	computed: {
diff --git a/packages/editor-ui/src/composables/useWorkflowActivate.ts b/packages/editor-ui/src/composables/useWorkflowActivate.ts
new file mode 100644
index 0000000000000..1514416c305c3
--- /dev/null
+++ b/packages/editor-ui/src/composables/useWorkflowActivate.ts
@@ -0,0 +1,135 @@
+import { useStorage } from '@/composables/useStorage';
+
+import {
+	LOCAL_STORAGE_ACTIVATION_FLAG,
+	PLACEHOLDER_EMPTY_WORKFLOW_ID,
+	WORKFLOW_ACTIVE_MODAL_KEY,
+} from '@/constants';
+import { useUIStore } from '@/stores/ui.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { useExternalHooks } from '@/composables/useExternalHooks';
+import { useRouter } from 'vue-router';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { useToast } from '@/composables/useToast';
+import { useI18n } from '@/composables/useI18n';
+import { ref } from 'vue';
+
+export function useWorkflowActivate() {
+	const updatingWorkflowActivation = ref(false);
+
+	const router = useRouter();
+	const workflowHelpers = useWorkflowHelpers({ router });
+	const workflowsStore = useWorkflowsStore();
+	const settingsStore = useSettingsStore();
+	const uiStore = useUIStore();
+	const telemetry = useTelemetry();
+	const toast = useToast();
+	const i18n = useI18n();
+
+	//methods
+
+	const updateWorkflowActivation = async (
+		workflowId: string | undefined,
+		newActiveState: boolean,
+		telemetrySource?: string,
+	) => {
+		updatingWorkflowActivation.value = true;
+		const nodesIssuesExist = workflowsStore.nodesIssuesExist;
+
+		let currWorkflowId: string | undefined = workflowId;
+		if (!currWorkflowId || currWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
+			const saved = await workflowHelpers.saveCurrentWorkflow();
+			if (!saved) {
+				updatingWorkflowActivation.value = false;
+				return;
+			}
+			currWorkflowId = workflowsStore.workflowId;
+		}
+		const isCurrentWorkflow = currWorkflowId === workflowsStore.workflowId;
+
+		const activeWorkflows = workflowsStore.activeWorkflows;
+		const isWorkflowActive = activeWorkflows.includes(currWorkflowId);
+
+		const telemetryPayload = {
+			workflow_id: currWorkflowId,
+			is_active: newActiveState,
+			previous_status: isWorkflowActive,
+			ndv_input: telemetrySource === 'ndv',
+		};
+		telemetry.track('User set workflow active status', telemetryPayload);
+		void useExternalHooks().run('workflowActivate.updateWorkflowActivation', telemetryPayload);
+
+		try {
+			if (isWorkflowActive && newActiveState) {
+				toast.showMessage({
+					title: i18n.baseText('workflowActivator.workflowIsActive'),
+					type: 'success',
+				});
+				updatingWorkflowActivation.value = false;
+
+				return;
+			}
+
+			if (isCurrentWorkflow && nodesIssuesExist && newActiveState) {
+				toast.showMessage({
+					title: i18n.baseText(
+						'workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.title',
+					),
+					message: i18n.baseText(
+						'workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.message',
+					),
+					type: 'error',
+				});
+
+				updatingWorkflowActivation.value = false;
+				return;
+			}
+
+			await workflowHelpers.updateWorkflow(
+				{ workflowId: currWorkflowId, active: newActiveState },
+				!uiStore.stateIsDirty,
+			);
+		} catch (error) {
+			const newStateName = newActiveState ? 'activated' : 'deactivated';
+			toast.showError(
+				error,
+				i18n.baseText('workflowActivator.showError.title', {
+					interpolate: { newStateName },
+				}) + ':',
+			);
+			updatingWorkflowActivation.value = false;
+			return;
+		}
+
+		const activationEventName = isCurrentWorkflow
+			? 'workflow.activeChangeCurrent'
+			: 'workflow.activeChange';
+		void useExternalHooks().run(activationEventName, {
+			workflowId: currWorkflowId,
+			active: newActiveState,
+		});
+
+		updatingWorkflowActivation.value = false;
+
+		if (isCurrentWorkflow) {
+			if (newActiveState && useStorage(LOCAL_STORAGE_ACTIVATION_FLAG).value !== 'true') {
+				uiStore.openModal(WORKFLOW_ACTIVE_MODAL_KEY);
+			} else {
+				await settingsStore.fetchPromptsData();
+			}
+		}
+	};
+
+	const activateCurrentWorkflow = async (telemetrySource?: string) => {
+		const workflowId = workflowsStore.workflowId;
+		return await updateWorkflowActivation(workflowId, true, telemetrySource);
+	};
+
+	return {
+		activateCurrentWorkflow,
+		updateWorkflowActivation,
+		updatingWorkflowActivation,
+	};
+}
diff --git a/packages/editor-ui/src/mixins/workflowActivate.ts b/packages/editor-ui/src/mixins/workflowActivate.ts
deleted file mode 100644
index 185e8c7bee48c..0000000000000
--- a/packages/editor-ui/src/mixins/workflowActivate.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
-import { useStorage } from '@/composables/useStorage';
-
-import { useToast } from '@/composables/useToast';
-
-import {
-	LOCAL_STORAGE_ACTIVATION_FLAG,
-	PLACEHOLDER_EMPTY_WORKFLOW_ID,
-	WORKFLOW_ACTIVE_MODAL_KEY,
-} from '@/constants';
-import { useUIStore } from '@/stores/ui.store';
-import { useSettingsStore } from '@/stores/settings.store';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import { useExternalHooks } from '@/composables/useExternalHooks';
-import { useRouter } from 'vue-router';
-import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
-
-export const workflowActivate = defineComponent({
-	setup() {
-		const router = useRouter();
-		const workflowHelpers = useWorkflowHelpers({ router });
-		return {
-			workflowHelpers,
-			...useToast(),
-		};
-	},
-	data() {
-		return {
-			updatingWorkflowActivation: false,
-		};
-	},
-	computed: {
-		...mapStores(useSettingsStore, useUIStore, useWorkflowsStore),
-	},
-	methods: {
-		async activateCurrentWorkflow(telemetrySource?: string) {
-			const workflowId = this.workflowsStore.workflowId;
-			return await this.updateWorkflowActivation(workflowId, true, telemetrySource);
-		},
-		async updateWorkflowActivation(
-			workflowId: string | undefined,
-			newActiveState: boolean,
-			telemetrySource?: string,
-		) {
-			this.updatingWorkflowActivation = true;
-			const nodesIssuesExist = this.workflowsStore.nodesIssuesExist;
-
-			let currWorkflowId: string | undefined = workflowId;
-			if (!currWorkflowId || currWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
-				const saved = await this.workflowHelpers.saveCurrentWorkflow();
-				if (!saved) {
-					this.updatingWorkflowActivation = false;
-					return;
-				}
-				currWorkflowId = this.workflowsStore.workflowId;
-			}
-			const isCurrentWorkflow = currWorkflowId === this.workflowsStore.workflowId;
-
-			const activeWorkflows = this.workflowsStore.activeWorkflows;
-			const isWorkflowActive = activeWorkflows.includes(currWorkflowId);
-
-			const telemetryPayload = {
-				workflow_id: currWorkflowId,
-				is_active: newActiveState,
-				previous_status: isWorkflowActive,
-				ndv_input: telemetrySource === 'ndv',
-			};
-			this.$telemetry.track('User set workflow active status', telemetryPayload);
-			void useExternalHooks().run('workflowActivate.updateWorkflowActivation', telemetryPayload);
-
-			try {
-				if (isWorkflowActive && newActiveState) {
-					this.showMessage({
-						title: this.$locale.baseText('workflowActivator.workflowIsActive'),
-						type: 'success',
-					});
-					this.updatingWorkflowActivation = false;
-
-					return;
-				}
-
-				if (isCurrentWorkflow && nodesIssuesExist && newActiveState) {
-					this.showMessage({
-						title: this.$locale.baseText(
-							'workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.title',
-						),
-						message: this.$locale.baseText(
-							'workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.message',
-						),
-						type: 'error',
-					});
-
-					this.updatingWorkflowActivation = false;
-					return;
-				}
-
-				await this.workflowHelpers.updateWorkflow(
-					{ workflowId: currWorkflowId, active: newActiveState },
-					!this.uiStore.stateIsDirty,
-				);
-			} catch (error) {
-				const newStateName = newActiveState ? 'activated' : 'deactivated';
-				this.showError(
-					error,
-					this.$locale.baseText('workflowActivator.showError.title', {
-						interpolate: { newStateName },
-					}) + ':',
-				);
-				this.updatingWorkflowActivation = false;
-				return;
-			}
-
-			const activationEventName = isCurrentWorkflow
-				? 'workflow.activeChangeCurrent'
-				: 'workflow.activeChange';
-			void useExternalHooks().run(activationEventName, {
-				workflowId: currWorkflowId,
-				active: newActiveState,
-			});
-
-			this.$emit('workflowActiveChanged', { id: currWorkflowId, active: newActiveState });
-			this.updatingWorkflowActivation = false;
-
-			if (isCurrentWorkflow) {
-				if (newActiveState && useStorage(LOCAL_STORAGE_ACTIVATION_FLAG).value !== 'true') {
-					this.uiStore.openModal(WORKFLOW_ACTIVE_MODAL_KEY);
-				} else {
-					await this.settingsStore.fetchPromptsData();
-				}
-			}
-		},
-	},
-});