refactor(editor): Migrate TemplatesWorkflowView.vue to composition API (#10918)

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

@@ -3,7 +3,7 @@ import { nextTick, onBeforeMount, onMounted, ref, watch } from 'vue';
 import type { ITemplatesCollection } from '@/Interface';
 import Card from '@/components/CollectionWorkflowCard.vue';
 import TemplatesInfoCard from '@/components/TemplatesInfoCard.vue';
-import type { VueAgile } from 'vue-agile';
+import { VueAgile } from 'vue-agile';
 
 type SliderRef = InstanceType<typeof VueAgile>;
 
@@ -31,7 +31,7 @@ const carouselScrollPosition = ref(0);
 const cardWidth = ref(parseInt(props.cardsWidth, 10));
 const scrollEnd = ref(false);
 const listElement = ref<null | Element>(null);
-const sliderRef = ref<null | SliderRef>(null);
+const sliderRef = ref<SliderRef>(null);
 
 const updateCarouselScroll = () => {
 	if (listElement.value) {
@@ -80,9 +80,11 @@ watch(
 
 onMounted(async () => {
 	await nextTick();
+
 	if (!sliderRef.value) {
 		return;
 	}
+
 	listElement.value = sliderRef.value.$el.querySelector('.agile__list');
 	if (listElement.value) {
 		listElement.value.addEventListener('scroll', updateCarouselScroll);
@@ -99,7 +101,7 @@ onBeforeMount(() => {
 
 <template>
 	<div v-show="loading || collections.length" :class="$style.container">
-		<agile
+		<VueAgile
 			ref="sliderRef"
 			:dots="false"
 			:nav-buttons="false"
@@ -117,7 +119,7 @@ onBeforeMount(() => {
 				:width="cardsWidth"
 				@click="(e) => onCardClick(e, collection.id)"
 			/>
-		</agile>
+		</VueAgile>
 		<button
 			v-show="showNavigation && carouselScrollPosition > 0"
 			:class="{ [$style.leftButton]: true }"

packages/editor-ui/src/views/TemplatesWorkflowView.vue

@@ -1,103 +1,90 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
-
-import TemplateDetails from '@/components/TemplateDetails.vue';
-import TemplatesView from './TemplatesView.vue';
-import WorkflowPreview from '@/components/WorkflowPreview.vue';
-
-import type { ITemplatesWorkflowFull } from '@/Interface';
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
 import { setPageTitle } from '@/utils/htmlUtils';
 import { useTemplatesStore } from '@/stores/templates.store';
 import { usePostHog } from '@/stores/posthog.store';
 import { useTemplateWorkflow } from '@/utils/templates/templateActions';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { useRoute, useRouter } from 'vue-router';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { useI18n } from '@/composables/useI18n';
+import TemplatesView from './TemplatesView.vue';
 
-export default defineComponent({
-	name: 'TemplatesWorkflowView',
-	components: {
-		TemplateDetails,
-		TemplatesView,
-		WorkflowPreview,
-	},
-	setup() {
-		const externalHooks = useExternalHooks();
+const externalHooks = useExternalHooks();
+const templatesStore = useTemplatesStore();
+const posthogStore = usePostHog();
+const nodeTypesStore = useNodeTypesStore();
 
-		return {
-			externalHooks,
-		};
-	},
-	computed: {
-		...mapStores(useTemplatesStore, usePostHog),
-		template(): ITemplatesWorkflowFull | null {
-			return this.templatesStore.getFullTemplateById(this.templateId);
-		},
-		templateId() {
-			return Array.isArray(this.$route.params.id)
-				? this.$route.params.id[0]
-				: this.$route.params.id;
-		},
-	},
-	data() {
-		return {
-			loading: true,
-			showPreview: true,
-			notFoundError: false,
-		};
-	},
-	watch: {
-		template(template: ITemplatesWorkflowFull) {
-			if (template) {
-				setPageTitle(`n8n - Template template: ${template.name}`);
-			} else {
-				setPageTitle('n8n - Templates');
-			}
-		},
-	},
-	async mounted() {
-		this.scrollToTop();
+const route = useRoute();
+const router = useRouter();
+const telemetry = useTelemetry();
+const i18n = useI18n();
 
-		if (this.template && this.template.full) {
-			this.loading = false;
-			return;
+const loading = ref(true);
+const showPreview = ref(true);
+const notFoundError = ref(false);
+
+const templateId = computed(() =>
+	Array.isArray(route.params.id) ? route.params.id[0] : route.params.id,
+);
+
+const template = computed(() => templatesStore.getFullTemplateById(templateId.value));
+
+const openTemplateSetup = async (id: string, e: PointerEvent) => {
+	await useTemplateWorkflow({
+		posthogStore,
+		router,
+		templateId: id,
+		inNewBrowserTab: e.metaKey || e.ctrlKey,
+		externalHooks,
+		nodeTypesStore,
+		telemetry,
+		templatesStore,
+		source: 'template_preview',
+	});
+};
+
+const onHidePreview = () => {
+	showPreview.value = false;
+};
+
+const scrollToTop = () => {
+	const contentArea = document.getElementById('content');
+
+	if (contentArea) {
+		contentArea.scrollTo({
+			top: 0,
+		});
+	}
+};
+
+watch(
+	() => template.value,
+	(newTemplate) => {
+		if (newTemplate) {
+			setPageTitle(`n8n - Template template: ${newTemplate.name}`);
+		} else {
+			setPageTitle('n8n - Templates');
 		}
-
-		try {
-			await this.templatesStore.fetchTemplateById(this.templateId);
-		} catch (e) {
-			this.notFoundError = true;
-		}
-
-		this.loading = false;
 	},
-	methods: {
-		async openTemplateSetup(id: string, e: PointerEvent) {
-			await useTemplateWorkflow({
-				posthogStore: this.posthogStore,
-				router: this.$router,
-				templateId: id,
-				inNewBrowserTab: e.metaKey || e.ctrlKey,
-				externalHooks: this.externalHooks,
-				nodeTypesStore: useNodeTypesStore(),
-				telemetry: this.$telemetry,
-				templatesStore: useTemplatesStore(),
-				source: 'template_preview',
-			});
-		},
-		onHidePreview() {
-			this.showPreview = false;
-		},
-		scrollToTop() {
-			const contentArea = document.getElementById('content');
+);
 
-			if (contentArea) {
-				contentArea.scrollTo({
-					top: 0,
-				});
-			}
-		},
-	},
+onMounted(async () => {
+	scrollToTop();
+
+	if (template.value?.full) {
+		loading.value = false;
+		return;
+	}
+
+	try {
+		await templatesStore.fetchTemplateById(templateId.value);
+	} catch (e) {
+		notFoundError.value = true;
+	}
+
+	loading.value = false;
 });
 </script>
 
@@ -110,7 +97,7 @@ export default defineComponent({
 						template.name
 					}}</n8n-heading>
 					<n8n-text v-if="template && template.name" color="text-base" size="small">
-						{{ $locale.baseText('generic.workflow') }}
+						{{ i18n.baseText('generic.workflow') }}
 					</n8n-text>
 					<n8n-loading :loading="!template || !template.name" :rows="2" variant="h1" />
 				</div>
@@ -118,7 +105,7 @@ export default defineComponent({
 					<n8n-button
 						v-if="template"
 						data-test-id="use-template-button"
-						:label="$locale.baseText('template.buttons.useThisWorkflowButton')"
+						:label="i18n.baseText('template.buttons.useThisWorkflowButton')"
 						size="large"
 						@click="openTemplateSetup(templateId, $event)"
 					/>
@@ -126,7 +113,7 @@ export default defineComponent({
 				</div>
 			</div>
 			<div v-else :class="$style.notFound">
-				<n8n-text color="text-base">{{ $locale.baseText('templates.workflowsNotFound') }}</n8n-text>
+				<n8n-text color="text-base">{{ i18n.baseText('templates.workflowsNotFound') }}</n8n-text>
 			</div>
 		</template>
 		<template v-if="!notFoundError" #content>
@@ -148,7 +135,7 @@ export default defineComponent({
 				</div>
 				<div :class="$style.details">
 					<TemplateDetails
-						:block-title="$locale.baseText('template.details.appsInTheWorkflow')"
+						:block-title="i18n.baseText('template.details.appsInTheWorkflow')"
 						:loading="loading"
 						:template="template"
 					/>