refactor(editor): Move a few components to script setup (no-changelog) (#10029)

2025-12-19 11:01:15 +00:00 · 2024-07-12 15:03:23 +02:00
parent 293147642f
commit 2e9ab66602
8 changed files with 1051 additions and 1104 deletions
--- a/packages/editor-ui/src/components/WorkflowActivator.vue
+++ b/packages/editor-ui/src/components/WorkflowActivator.vue
@@ -1,3 +1,84 @@
+<script lang="ts" setup>
+import { useToast } from '@/composables/useToast';
+import { useWorkflowActivate } from '@/composables/useWorkflowActivate';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { getActivatableTriggerNodes } from '@/utils/nodeTypesUtils';
+import { computed } from 'vue';
+import { useI18n } from '@/composables/useI18n';
+
+const props = defineProps<{ workflowActive: boolean; workflowId: string }>();
+const { showMessage } = useToast();
+const workflowActivate = useWorkflowActivate();
+
+const i18n = useI18n();
+const workflowsStore = useWorkflowsStore();
+
+const isWorkflowActive = computed((): boolean => {
+	const activeWorkflows = workflowsStore.activeWorkflows;
+	return activeWorkflows.includes(props.workflowId);
+});
+const couldNotBeStarted = computed((): boolean => {
+	return props.workflowActive && isWorkflowActive.value !== props.workflowActive;
+});
+const getActiveColor = computed((): string => {
+	if (couldNotBeStarted.value) {
+		return '#ff4949';
+	}
+	return '#13ce66';
+});
+const isCurrentWorkflow = computed((): boolean => {
+	return workflowsStore.workflowId === props.workflowId;
+});
+
+const containsTrigger = computed((): boolean => {
+	const foundTriggers = getActivatableTriggerNodes(workflowsStore.workflowTriggerNodes);
+	return foundTriggers.length > 0;
+});
+
+const disabled = computed((): boolean => {
+	const isNewWorkflow = !props.workflowId;
+	if (isNewWorkflow || isCurrentWorkflow.value) {
+		return !props.workflowActive && !containsTrigger.value;
+	}
+
+	return false;
+});
+
+async function activeChanged(newActiveState: boolean) {
+	return await workflowActivate.updateWorkflowActivation(props.workflowId, newActiveState);
+}
+
+async function displayActivationError() {
+	let errorMessage: string;
+	try {
+		const errorData = await workflowsStore.getActivationError(props.workflowId);
+
+		if (errorData === undefined) {
+			errorMessage = i18n.baseText(
+				'workflowActivator.showMessage.displayActivationError.message.errorDataUndefined',
+			);
+		} else {
+			errorMessage = i18n.baseText(
+				'workflowActivator.showMessage.displayActivationError.message.errorDataNotUndefined',
+				{ interpolate: { message: errorData } },
+			);
+		}
+	} catch (error) {
+		errorMessage = i18n.baseText(
+			'workflowActivator.showMessage.displayActivationError.message.catchBlock',
+		);
+	}
+
+	showMessage({
+		title: i18n.baseText('workflowActivator.showMessage.displayActivationError.title'),
+		message: errorMessage,
+		type: 'warning',
+		duration: 0,
+		dangerouslyUseHTMLString: true,
+	});
+}
+</script>
+
 <template>
 	<div class="workflow-activator">
 		<div :class="$style.activeStatusText" data-test-id="workflow-activator-status">
@@ -7,27 +88,27 @@
 				size="small"
 				bold
 			>
-				{{ $locale.baseText('workflowActivator.active') }}
+				{{ i18n.baseText('workflowActivator.active') }}
 			</n8n-text>
 			<n8n-text v-else color="text-base" size="small" bold>
-				{{ $locale.baseText('workflowActivator.inactive') }}
+				{{ i18n.baseText('workflowActivator.inactive') }}
 			</n8n-text>
 		</div>
 		<n8n-tooltip :disabled="!disabled" placement="bottom">
 			<template #content>
 				<div>
-					{{ $locale.baseText('workflowActivator.thisWorkflowHasNoTriggerNodes') }}
+					{{ i18n.baseText('workflowActivator.thisWorkflowHasNoTriggerNodes') }}
 				</div>
 			</template>
 			<el-switch
-				v-loading="updatingWorkflowActivation"
+				v-loading="workflowActivate.updatingWorkflowActivation.value"
 				:model-value="workflowActive"
 				:title="
 					workflowActive
-						? $locale.baseText('workflowActivator.deactivateWorkflow')
-						: $locale.baseText('workflowActivator.activateWorkflow')
+						? i18n.baseText('workflowActivator.deactivateWorkflow')
+						: i18n.baseText('workflowActivator.activateWorkflow')
 				"
-				:disabled="disabled || updatingWorkflowActivation"
+				:disabled="disabled || workflowActivate.updatingWorkflowActivation.value"
 				:active-color="getActiveColor"
 				inactive-color="#8899AA"
 				data-test-id="workflow-activate-switch"
@@ -41,7 +122,7 @@
 				<template #content>
 					<div
 						@click="displayActivationError"
-						v-html="$locale.baseText('workflowActivator.theWorkflowIsSetToBeActiveBut')"
+						v-html="i18n.baseText('workflowActivator.theWorkflowIsSetToBeActiveBut')"
 					></div>
 				</template>
 				<font-awesome-icon icon="exclamation-triangle" @click="displayActivationError" />
@@ -50,95 +131,6 @@
 	</div>
 </template>

-<script lang="ts">
-import { useToast } from '@/composables/useToast';
-import { useWorkflowActivate } from '@/composables/useWorkflowActivate';
-import { useUIStore } from '@/stores/ui.store';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import { mapStores } from 'pinia';
-import { defineComponent } from 'vue';
-import { getActivatableTriggerNodes } from '@/utils/nodeTypesUtils';
-
-export default defineComponent({
-	name: 'WorkflowActivator',
-	props: ['workflowActive', 'workflowId'],
-	setup() {
-		return {
-			...useToast(),
-			...useWorkflowActivate(),
-		};
-	},
-	computed: {
-		...mapStores(useUIStore, useWorkflowsStore),
-		nodesIssuesExist(): boolean {
-			return this.workflowsStore.nodesIssuesExist;
-		},
-		isWorkflowActive(): boolean {
-			const activeWorkflows = this.workflowsStore.activeWorkflows;
-			return activeWorkflows.includes(this.workflowId);
-		},
-		couldNotBeStarted(): boolean {
-			return this.workflowActive === true && this.isWorkflowActive !== this.workflowActive;
-		},
-		getActiveColor(): string {
-			if (this.couldNotBeStarted) {
-				return '#ff4949';
-			}
-			return '#13ce66';
-		},
-		isCurrentWorkflow(): boolean {
-			return this.workflowsStore.workflowId === this.workflowId;
-		},
-		disabled(): boolean {
-			const isNewWorkflow = !this.workflowId;
-			if (isNewWorkflow || this.isCurrentWorkflow) {
-				return !this.workflowActive && !this.containsTrigger;
-			}
-
-			return false;
-		},
-		containsTrigger(): boolean {
-			const foundTriggers = getActivatableTriggerNodes(this.workflowsStore.workflowTriggerNodes);
-			return foundTriggers.length > 0;
-		},
-	},
-	methods: {
-		async activeChanged(newActiveState: boolean) {
-			return await this.updateWorkflowActivation(this.workflowId, newActiveState);
-		},
-		async displayActivationError() {
-			let errorMessage: string;
-			try {
-				const errorData = await this.workflowsStore.getActivationError(this.workflowId);
-
-				if (errorData === undefined) {
-					errorMessage = this.$locale.baseText(
-						'workflowActivator.showMessage.displayActivationError.message.errorDataUndefined',
-					);
-				} else {
-					errorMessage = this.$locale.baseText(
-						'workflowActivator.showMessage.displayActivationError.message.errorDataNotUndefined',
-						{ interpolate: { message: errorData } },
-					);
-				}
-			} catch (error) {
-				errorMessage = this.$locale.baseText(
-					'workflowActivator.showMessage.displayActivationError.message.catchBlock',
-				);
-			}
-
-			this.showMessage({
-				title: this.$locale.baseText('workflowActivator.showMessage.displayActivationError.title'),
-				message: errorMessage,
-				type: 'warning',
-				duration: 0,
-				dangerouslyUseHTMLString: true,
-			});
-		},
-	},
-});
-</script>
-
 <style lang="scss" module>
 .activeStatusText {
 	width: 64px; // Required to avoid jumping when changing active state