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';