refactor(editor): Fix TypeScript issues in template code (no-changelog) (#9574)

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

@@ -12,7 +12,7 @@
 		<div v-if="loading" :class="$style.loading">
 			<n8n-loading :rows="2" :shrink-last="false" :loading="loading" />
 		</div>
-		<div v-else>
+		<div v-else-if="workflow">
 			<n8n-heading :bold="true" size="small">{{ workflow.name }}</n8n-heading>
 			<div v-if="!simpleView" :class="$style.content">
 				<span v-if="workflow.totalViews">
@@ -31,7 +31,10 @@
 				>
 			</div>
 		</div>
-		<div v-if="!loading" :class="[$style.nodesContainer, useWorkflowButton && $style.hideOnHover]">
+		<div
+			v-if="!loading && workflow"
+			:class="[$style.nodesContainer, useWorkflowButton && $style.hideOnHover]"
+		>
 			<NodeList v-if="workflow.nodes" :nodes="workflow.nodes" :limit="nodesToBeShown" size="md" />
 		</div>
 		<div v-if="useWorkflowButton" :class="$style.buttonContainer">
@@ -47,11 +50,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { type PropType, defineComponent } from 'vue';
 import { filterTemplateNodes } from '@/utils/nodeTypesUtils';
 import { abbreviateNumber } from '@/utils/typesUtils';
 import NodeList from './NodeList.vue';
 import TimeAgo from '@/components/TimeAgo.vue';
+import type { ITemplatesWorkflow } from '@/Interface';
 
 export default defineComponent({
 	name: 'TemplateCard',
@@ -60,6 +64,9 @@ export default defineComponent({
 		NodeList,
 	},
 	props: {
+		workflow: {
+			type: Object as PropType<ITemplatesWorkflow>,
+		},
 		lastItem: {
 			type: Boolean,
 			default: false,
@@ -68,9 +75,6 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-		workflow: {
-			type: Object,
-		},
 		useWorkflowButton: {
 			type: Boolean,
 		},

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

@@ -2,7 +2,10 @@
 	<div>
 		<n8n-loading :loading="loading" :rows="5" variant="p" />
 
-		<TemplateDetailsBlock v-if="!loading && template.nodes.length > 0" :title="blockTitle">
+		<TemplateDetailsBlock
+			v-if="!loading && template && template.nodes.length > 0"
+			:title="blockTitle"
+		>
 			<div :class="$style.icons">
 				<div
 					v-for="node in filterTemplateNodes(template.nodes)"
@@ -20,15 +23,18 @@
 		</TemplateDetailsBlock>
 
 		<TemplateDetailsBlock
-			v-if="!loading && template?.categories.length > 0"
+			v-if="!loading && isFullTemplatesCollection(template) && template.categories.length > 0"
 			:title="$locale.baseText('template.details.categories')"
 		>
 			<n8n-tags :tags="template.categories" @click:tag="redirectToCategory" />
 		</TemplateDetailsBlock>
 
-		<TemplateDetailsBlock v-if="!loading" :title="$locale.baseText('template.details.details')">
+		<TemplateDetailsBlock
+			v-if="!loading && template"
+			:title="$locale.baseText('template.details.details')"
+		>
 			<div :class="$style.text">
-				<n8n-text size="small" color="text-base">
+				<n8n-text v-if="isTemplatesWorkflow(template)" size="small" color="text-base">
 					{{ $locale.baseText('template.details.created') }}
 					<TimeAgo :date="template.createdAt" />
 					{{ $locale.baseText('template.details.by') }}
@@ -36,7 +42,11 @@
 				</n8n-text>
 			</div>
 			<div :class="$style.text">
-				<n8n-text v-if="template.totalViews !== 0" size="small" color="text-base">
+				<n8n-text
+					v-if="isTemplatesWorkflow(template) && template.totalViews !== 0"
+					size="small"
+					color="text-base"
+				>
 					{{ $locale.baseText('template.details.viewed') }}
 					{{ abbreviateNumber(template.totalViews) }}
 					{{ $locale.baseText('template.details.times') }}
@@ -53,10 +63,16 @@ import TemplateDetailsBlock from '@/components/TemplateDetailsBlock.vue';
 import NodeIcon from '@/components/NodeIcon.vue';
 import { filterTemplateNodes } from '@/utils/nodeTypesUtils';
 import { abbreviateNumber } from '@/utils/typesUtils';
-import type { ITemplatesNode, ITemplatesWorkflow, ITemplatesWorkflowFull } from '@/Interface';
+import type {
+	ITemplatesCollection,
+	ITemplatesCollectionFull,
+	ITemplatesNode,
+	ITemplatesWorkflow,
+} from '@/Interface';
 import { mapStores } from 'pinia';
 import { useTemplatesStore } from '@/stores/templates.store';
 import TimeAgo from '@/components/TimeAgo.vue';
+import { isFullTemplatesCollection, isTemplatesWorkflow } from '@/utils/templates/typeGuards';
 
 export default defineComponent({
 	name: 'TemplateDetails',
@@ -66,15 +82,19 @@ export default defineComponent({
 		TimeAgo,
 	},
 	props: {
+		template: {
+			type: Object as PropType<
+				ITemplatesWorkflow | ITemplatesCollection | ITemplatesCollectionFull | null
+			>,
+			required: true,
+		},
 		blockTitle: {
 			type: String,
+			required: true,
 		},
 		loading: {
 			type: Boolean,
 		},
-		template: {
-			type: Object as PropType<ITemplatesWorkflow | ITemplatesWorkflowFull>,
-		},
 	},
 	computed: {
 		...mapStores(useTemplatesStore),
@@ -90,6 +110,8 @@ export default defineComponent({
 			this.templatesStore.resetSessionId();
 			void this.$router.push(`/templates?search=${node.displayName}`);
 		},
+		isFullTemplatesCollection,
+		isTemplatesWorkflow,
 	},
 });
 </script>

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

@@ -34,8 +34,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { type PropType, defineComponent } from 'vue';
 import TemplateCard from './TemplateCard.vue';
+import type { ITemplatesWorkflow } from '@/Interface';
 
 export default defineComponent({
 	name: 'TemplateList',
@@ -55,7 +56,7 @@ export default defineComponent({
 			default: false,
 		},
 		workflows: {
-			type: Array,
+			type: Array as PropType<ITemplatesWorkflow[]>,
 			default: () => [],
 		},
 		totalWorkflows: {
@@ -103,10 +104,10 @@ export default defineComponent({
 				this.$emit('loadMore');
 			}
 		},
-		onCardClick(event: MouseEvent, id: string) {
+		onCardClick(event: MouseEvent, id: number) {
 			this.$emit('openTemplate', { event, id });
 		},
-		onUseWorkflow(event: MouseEvent, id: string) {
+		onUseWorkflow(event: MouseEvent, id: number) {
 			this.$emit('useWorkflow', { event, id });
 		},
 	},

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

@@ -13,9 +13,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { type PropType, defineComponent } from 'vue';
 import Card from '@/components/CollectionWorkflowCard.vue';
 import NodeList from '@/components/NodeList.vue';
+import type { ITemplatesCollection } from '@/Interface';
 
 export default defineComponent({
 	name: 'TemplatesInfoCard',
@@ -24,12 +25,13 @@ export default defineComponent({
 		NodeList,
 	},
 	props: {
+		collection: {
+			type: Object as PropType<ITemplatesCollection>,
+			required: true,
+		},
 		loading: {
 			type: Boolean,
 		},
-		collection: {
-			type: Object,
-		},
 		showItemCount: {
 			type: Boolean,
 			default: true,

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

@@ -56,6 +56,7 @@ export default defineComponent({
 	props: {
 		collections: {
 			type: Array as PropType<ITemplatesCollection[]>,
+			required: true,
 		},
 		loading: {
 			type: Boolean,
@@ -125,7 +126,7 @@ export default defineComponent({
 				this.scrollEnd = scrollWidth - width <= scrollLeft + 7;
 			}
 		},
-		onCardClick(event: MouseEvent, id: string) {
+		onCardClick(event: MouseEvent, id: number) {
 			this.$emit('openCollection', { event, id });
 		},
 		scrollLeft() {

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

@@ -26,7 +26,7 @@
 import { onMounted, onBeforeUnmount, ref, computed, watch } from 'vue';
 import { useI18n } from '@/composables/useI18n';
 import { useToast } from '@/composables/useToast';
-import type { IWorkflowDb } from '@/Interface';
+import type { IWorkflowDb, IWorkflowTemplate } from '@/Interface';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useExecutionsStore } from '@/stores/executions.store';
 
@@ -34,7 +34,7 @@ const props = withDefaults(
 	defineProps<{
 		loading?: boolean;
 		mode?: 'workflow' | 'execution';
-		workflow?: IWorkflowDb;
+		workflow?: IWorkflowDb | IWorkflowTemplate['workflow'];
 		executionId?: string;
 		executionMode?: string;
 		loaderType?: 'image' | 'spinner';

packages/editor-ui/src/shims.d.ts

@@ -5,6 +5,7 @@ import { ExternalHooks } from '@/types/externalHooks';
 declare module 'markdown-it-link-attributes';
 declare module 'markdown-it-emoji';
 declare module 'markdown-it-task-lists';
+declare module 'vue-agile';
 
 declare global {
 	interface ImportMeta {

packages/editor-ui/src/utils/templates/typeGuards.ts

@@ -0,0 +1,17 @@
+import type {
+	ITemplatesCollection,
+	ITemplatesCollectionFull,
+	ITemplatesWorkflow,
+} from '@/Interface';
+
+export function isTemplatesWorkflow(
+	template: ITemplatesWorkflow | ITemplatesCollection | ITemplatesCollectionFull | null,
+): template is ITemplatesWorkflow {
+	return !!template && 'totalViews' in template;
+}
+
+export function isFullTemplatesCollection(
+	template: ITemplatesWorkflow | ITemplatesCollectionFull | ITemplatesCollection | null,
+): template is ITemplatesCollectionFull {
+	return !!template && 'description' in template && 'categories' in template;
+}

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

@@ -21,10 +21,10 @@
 		<template v-if="!notFoundError" #content>
 			<div :class="$style.wrapper">
 				<div :class="$style.mainContent">
-					<div v-if="loading || (collection && collection.description)" :class="$style.markdown">
+					<div v-if="loading || isFullTemplatesCollection(collection)" :class="$style.markdown">
 						<n8n-markdown
-							:content="collection && collection.description"
+							:content="isFullTemplatesCollection(collection) && collection.description"
-							:images="collection && collection.image"
+							:images="isFullTemplatesCollection(collection) && collection.image"
 							:loading="loading"
 						/>
 					</div>
@@ -32,7 +32,7 @@
 						:infinite-scroll-enabled="false"
 						:loading="loading"
 						:use-workflow-button="true"
-						:workflows="loading ? [] : collectionWorkflows"
+						:workflows="collectionWorkflows"
 						@use-workflow="onUseWorkflow"
 						@open-template="onOpenTemplate"
 					/>
@@ -61,7 +61,6 @@ import type {
 	ITemplatesCollection,
 	ITemplatesCollectionFull,
 	ITemplatesWorkflow,
-	ITemplatesWorkflowFull,
 } from '@/Interface';
 
 import { setPageTitle } from '@/utils/htmlUtils';
@@ -71,6 +70,7 @@ import { usePostHog } from '@/stores/posthog.store';
 import { useTemplateWorkflow } from '@/utils/templates/templateActions';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { isFullTemplatesCollection } from '@/utils/templates/typeGuards';
 
 export default defineComponent({
 	name: 'TemplatesCollectionView',
@@ -88,7 +88,7 @@ export default defineComponent({
 	},
 	computed: {
 		...mapStores(useTemplatesStore, usePostHog),
-		collection(): ITemplatesCollectionFull | null {
+		collection(): ITemplatesCollectionFull | ITemplatesCollection | null {
 			return this.templatesStore.getCollectionById(this.collectionId);
 		},
 		collectionId(): string {
@@ -96,13 +96,13 @@ export default defineComponent({
 				? this.$route.params.id[0]
 				: this.$route.params.id;
 		},
-		collectionWorkflows(): Array<ITemplatesWorkflow | ITemplatesWorkflowFull | null> | null {
+		collectionWorkflows(): ITemplatesWorkflow[] {
-			if (!this.collection) {
+			if (!this.collection || this.loading) {
-				return null;
+				return [];
 			}
-			return this.collection.workflows.map(({ id }) => {
+			return this.collection.workflows
-				return this.templatesStore.getTemplateById(id.toString());
+				.map(({ id }) => this.templatesStore.getTemplateById(id.toString()))
-			});
+				.filter((workflow): workflow is ITemplatesWorkflow => !!workflow);
 		},
 	},
 	data() {
@@ -123,7 +123,7 @@ export default defineComponent({
 	async mounted() {
 		this.scrollToTop();
 
-		if (this.collection && this.collection.full) {
+		if (this.collection && 'full' in this.collection && this.collection.full) {
 			this.loading = false;
 			return;
 		}
@@ -172,6 +172,7 @@ export default defineComponent({
 				void this.$router.push({ name: page, params: { id } });
 			}
 		},
+		isFullTemplatesCollection,
 	},
 });
 </script>

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

@@ -198,8 +198,9 @@ export default defineComponent({
 
 		setTimeout(() => {
 			// Check if there is scroll position saved in route and scroll to it
-			if (this.$route.meta && this.$route.meta.scrollOffset > 0) {
+			const scrollOffset = this.$route.meta?.scrollOffset;
-				this.scrollTo(this.$route.meta.scrollOffset, 'auto');
+			if (typeof scrollOffset === 'number' && scrollOffset > 0) {
+				this.scrollTo(scrollOffset, 'auto');
 			}
 		}, 100);
 	},

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

@@ -31,15 +31,15 @@
 				<WorkflowPreview
 					v-if="showPreview"
 					:loading="loading"
-					:workflow="template && template.workflow"
+					:workflow="template?.workflow"
 					@close="onHidePreview"
 				/>
 			</div>
 			<div :class="$style.content">
 				<div :class="$style.markdown" data-test-id="template-description">
 					<n8n-markdown
-						:content="template && template.description"
+						:content="template?.description"
-						:images="template && template.image"
+						:images="template?.image"
 						:loading="loading"
 					/>
 				</div>