refactor(editor): Convert workflowActivate mixin into a composable …

…(no-changelog) (#9423)

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() {

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: {

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,
+	};
+}