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

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"
-							:images="collection && collection.image"
+							:content="isFullTemplatesCollection(collection) && collection.description"
+							: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 {
-			if (!this.collection) {
-				return null;
+		collectionWorkflows(): ITemplatesWorkflow[] {
+			if (!this.collection || this.loading) {
+				return [];
 			}
-			return this.collection.workflows.map(({ id }) => {
-				return this.templatesStore.getTemplateById(id.toString());
-			});
+			return this.collection.workflows
+				.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>