From 1cefd488fe40cd1ebcec44acc45e97acbf3cf6e9 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 31 May 2024 15:07:49 +0200
Subject: [PATCH] refactor(editor): Fix TypeScript issues in template code
 (no-changelog) (#9574)

---
 .../editor-ui/src/components/TemplateCard.vue | 16 +++++---
 .../src/components/TemplateDetails.vue        | 40 ++++++++++++++-----
 .../editor-ui/src/components/TemplateList.vue |  9 +++--
 .../src/components/TemplatesInfoCard.vue      | 10 +++--
 .../src/components/TemplatesInfoCarousel.vue  |  3 +-
 .../src/components/WorkflowPreview.vue        |  4 +-
 packages/editor-ui/src/shims.d.ts             |  1 +
 .../src/utils/templates/typeGuards.ts         | 17 ++++++++
 .../src/views/TemplatesCollectionView.vue     | 27 +++++++------
 .../src/views/TemplatesSearchView.vue         |  5 ++-
 .../src/views/TemplatesWorkflowView.vue       |  6 +--
 11 files changed, 94 insertions(+), 44 deletions(-)
 create mode 100644 packages/editor-ui/src/utils/templates/typeGuards.ts

diff --git a/packages/editor-ui/src/components/TemplateCard.vue b/packages/editor-ui/src/components/TemplateCard.vue
index 1eab5bc6a9..759d3a2550 100644
--- a/packages/editor-ui/src/components/TemplateCard.vue
+++ b/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,
 		},
diff --git a/packages/editor-ui/src/components/TemplateDetails.vue b/packages/editor-ui/src/components/TemplateDetails.vue
index 6208fa655a..0e6a6336e9 100644
--- a/packages/editor-ui/src/components/TemplateDetails.vue
+++ b/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>
diff --git a/packages/editor-ui/src/components/TemplateList.vue b/packages/editor-ui/src/components/TemplateList.vue
index fe9a6012ce..6207345293 100644
--- a/packages/editor-ui/src/components/TemplateList.vue
+++ b/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 });
 		},
 	},
diff --git a/packages/editor-ui/src/components/TemplatesInfoCard.vue b/packages/editor-ui/src/components/TemplatesInfoCard.vue
index 7084cbf298..2d155148e1 100644
--- a/packages/editor-ui/src/components/TemplatesInfoCard.vue
+++ b/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,
diff --git a/packages/editor-ui/src/components/TemplatesInfoCarousel.vue b/packages/editor-ui/src/components/TemplatesInfoCarousel.vue
index d067e4b263..377f6c8137 100644
--- a/packages/editor-ui/src/components/TemplatesInfoCarousel.vue
+++ b/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() {
diff --git a/packages/editor-ui/src/components/WorkflowPreview.vue b/packages/editor-ui/src/components/WorkflowPreview.vue
index 94adc0464a..84d290a912 100644
--- a/packages/editor-ui/src/components/WorkflowPreview.vue
+++ b/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';
diff --git a/packages/editor-ui/src/shims.d.ts b/packages/editor-ui/src/shims.d.ts
index 112969867b..048ee19f2d 100644
--- a/packages/editor-ui/src/shims.d.ts
+++ b/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 {
diff --git a/packages/editor-ui/src/utils/templates/typeGuards.ts b/packages/editor-ui/src/utils/templates/typeGuards.ts
new file mode 100644
index 0000000000..4ccb8b8a57
--- /dev/null
+++ b/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;
+}
diff --git a/packages/editor-ui/src/views/TemplatesCollectionView.vue b/packages/editor-ui/src/views/TemplatesCollectionView.vue
index 1dfad1a9bb..0ddf6ec595 100644
--- a/packages/editor-ui/src/views/TemplatesCollectionView.vue
+++ b/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>
diff --git a/packages/editor-ui/src/views/TemplatesSearchView.vue b/packages/editor-ui/src/views/TemplatesSearchView.vue
index 8e0a5b77f8..55cfdcf37c 100644
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/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) {
-				this.scrollTo(this.$route.meta.scrollOffset, 'auto');
+			const scrollOffset = this.$route.meta?.scrollOffset;
+			if (typeof scrollOffset === 'number' && scrollOffset > 0) {
+				this.scrollTo(scrollOffset, 'auto');
 			}
 		}, 100);
 	},
diff --git a/packages/editor-ui/src/views/TemplatesWorkflowView.vue b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
index d66a81c75a..fa582f3b95 100644
--- a/packages/editor-ui/src/views/TemplatesWorkflowView.vue
+++ b/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"
-						:images="template && template.image"
+						:content="template?.description"
+						:images="template?.image"
 						:loading="loading"
 					/>
 				</div>