fix(editor): Fix type errors in TriggerPanel.vue (no-changelog) (#9578)

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

@@ -14,7 +14,7 @@
 						<n8n-text>
 							{{
 								$locale.baseText('ndv.trigger.webhookNode.requestHint', {
-									interpolate: { type: webhookHttpMethod },
+									interpolate: { type: webhookHttpMethod ?? '' },
 								})
 							}}
 						</n8n-text>
@@ -130,6 +130,7 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { createEventBus } from 'n8n-design-system/utils';
 import { useRouter } from 'vue-router';
 import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { isTriggerPanelObject } from '@/utils/typeGuards';
 
 export default defineComponent({
 	name: 'TriggerPanel',
@@ -141,11 +142,14 @@ export default defineComponent({
 	props: {
 		nodeName: {
 			type: String,
+			required: true,
 		},
 		pushRef: {
 			type: String,
+			default: '',
 		},
 	},
+	emits: { activate: null, execute: null },
 	setup() {
 		const router = useRouter();
 		const workflowHelpers = useWorkflowHelpers({ router });
@@ -162,7 +166,7 @@ export default defineComponent({
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
 		node(): INodeUi | null {
-			return this.workflowsStore.getNodeByName(this.nodeName as string);
+			return this.workflowsStore.getNodeByName(this.nodeName);
 		},
 		nodeType(): INodeTypeDescription | null {
 			if (this.node) {
@@ -171,28 +175,26 @@ export default defineComponent({
 
 			return null;
 		},
+		triggerPanel() {
+			const panel = this.nodeType?.triggerPanel;
+			if (isTriggerPanelObject(panel)) {
+				return panel;
+			}
+			return undefined;
+		},
 		hideContent(): boolean {
-			if (!this.nodeType?.triggerPanel) {
+			const hideContent = this.triggerPanel?.hideContent;
-				return false;
+			if (typeof hideContent === 'boolean') {
+				return hideContent;
 			}
 
-			if (
+			if (this.node) {
-				this.nodeType?.triggerPanel &&
+				const hideContentValue = this.workflowHelpers
-				this.nodeType?.triggerPanel.hasOwnProperty('hideContent')
+					.getCurrentWorkflow()
-			) {
+					.expression.getSimpleParameterValue(this.node, hideContent, 'internal', {});
-				const hideContent = this.nodeType?.triggerPanel.hideContent;
-				if (typeof hideContent === 'boolean') {
-					return hideContent;
-				}
 
-				if (this.node) {
+				if (typeof hideContentValue === 'boolean') {
-					const hideContentValue = this.workflowHelpers
+					return hideContentValue;
-						.getCurrentWorkflow()
-						.expression.getSimpleParameterValue(this.node, hideContent, 'internal', {});
-
-					if (typeof hideContentValue === 'boolean') {
-						return hideContentValue;
-					}
 				}
 			}
 
@@ -200,7 +202,7 @@ export default defineComponent({
 		},
 		hasIssues(): boolean {
 			return Boolean(
-				this.node?.issues && (this.node.issues.parameters || this.node.issues.credentials),
+				this.node?.issues && (this.node.issues.parameters ?? this.node.issues.credentials),
 			);
 		},
 		serviceName(): string {
@@ -296,8 +298,8 @@ export default defineComponent({
 				return this.$locale.baseText('ndv.trigger.pollingNode.fetchingEvent');
 			}
 
-			if (this.nodeType?.triggerPanel && typeof this.nodeType.triggerPanel.header === 'string') {
+			if (this.triggerPanel?.header) {
-				return this.nodeType.triggerPanel.header;
+				return this.triggerPanel.header;
 			}
 
 			if (this.isWebhookBasedNode) {
@@ -319,15 +321,15 @@ export default defineComponent({
 			return '';
 		},
 		executionsHelp(): string {
-			if (this.nodeType?.triggerPanel?.executionsHelp !== undefined) {
+			if (this.triggerPanel?.executionsHelp) {
-				if (typeof this.nodeType.triggerPanel.executionsHelp === 'string') {
+				if (typeof this.triggerPanel.executionsHelp === 'string') {
-					return this.nodeType.triggerPanel.executionsHelp;
+					return this.triggerPanel.executionsHelp;
 				}
-				if (!this.isWorkflowActive && this.nodeType.triggerPanel.executionsHelp.inactive) {
+				if (!this.isWorkflowActive && this.triggerPanel.executionsHelp.inactive) {
-					return this.nodeType.triggerPanel.executionsHelp.inactive;
+					return this.triggerPanel.executionsHelp.inactive;
 				}
-				if (this.isWorkflowActive && this.nodeType.triggerPanel.executionsHelp.active) {
+				if (this.isWorkflowActive && this.triggerPanel.executionsHelp.active) {
-					return this.nodeType.triggerPanel.executionsHelp.active;
+					return this.triggerPanel.executionsHelp.active;
 				}
 			}
 
@@ -358,25 +360,22 @@ export default defineComponent({
 			return '';
 		},
 		activationHint(): string {
-			if (this.isActivelyPolling) {
+			if (this.isActivelyPolling || !this.triggerPanel) {
 				return '';
 			}
 
-			if (this.nodeType?.triggerPanel?.activationHint) {
+			if (this.triggerPanel.activationHint) {
-				if (typeof this.nodeType.triggerPanel.activationHint === 'string') {
+				if (typeof this.triggerPanel.activationHint === 'string') {
-					return this.nodeType.triggerPanel.activationHint;
+					return this.triggerPanel.activationHint;
 				}
 				if (
 					!this.isWorkflowActive &&
-					typeof this.nodeType.triggerPanel.activationHint.inactive === 'string'
+					typeof this.triggerPanel.activationHint.inactive === 'string'
 				) {
-					return this.nodeType.triggerPanel.activationHint.inactive;
+					return this.triggerPanel.activationHint.inactive;
 				}
-				if (
+				if (this.isWorkflowActive && typeof this.triggerPanel.activationHint.active === 'string') {
-					this.isWorkflowActive &&
+					return this.triggerPanel.activationHint.active;
-					typeof this.nodeType.triggerPanel.activationHint.active === 'string'
-				) {
-					return this.nodeType.triggerPanel.activationHint.active;
 				}
 			}
 

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

@@ -1,4 +1,9 @@
-import type { INodeParameterResourceLocator, NodeConnectionType } from 'n8n-workflow';
+import type {
+	INodeParameterResourceLocator,
+	INodeTypeDescription,
+	NodeConnectionType,
+	TriggerPanelDefinition,
+} from 'n8n-workflow';
 import { nodeConnectionTypes } from 'n8n-workflow';
 import type { ICredentialsResponse, NewCredentialsModal } from '@/Interface';
 
@@ -56,3 +61,9 @@ export function isValidNodeConnectionType(
 ): connectionType is NodeConnectionType {
 	return nodeConnectionTypes.includes(connectionType as NodeConnectionType);
 }
+
+export function isTriggerPanelObject(
+	triggerPanel: INodeTypeDescription['triggerPanel'],
+): triggerPanel is TriggerPanelDefinition {
+	return triggerPanel !== undefined && typeof triggerPanel === 'object' && triggerPanel !== null;
+}

packages/workflow/src/Interfaces.ts

@@ -1766,29 +1766,19 @@ export interface INodeTypeDescription extends INodeTypeBaseDescription {
 	webhooks?: IWebhookDescription[];
 	translation?: { [key: string]: object };
 	mockManualExecution?: true;
-	triggerPanel?:
+	triggerPanel?: TriggerPanelDefinition | boolean;
-		| {
-				hideContent?: boolean | string;
-				header?: string;
-				executionsHelp?:
-					| string
-					| {
-							active: string;
-							inactive: string;
-					  };
-				activationHint?:
-					| string
-					| {
-							active: string;
-							inactive: string;
-					  };
-		  }
-		| boolean;
 	extendsCredential?: string;
 	hints?: NodeHint[];
 	__loadOptionsMethods?: string[]; // only for validation during build
 }
 
+export type TriggerPanelDefinition = {
+	hideContent?: boolean | string;
+	header?: string;
+	executionsHelp?: string | { active: string; inactive: string };
+	activationHint?: string | { active: string; inactive: string };
+};
+
 export type NodeHint = {
 	message: string;
 	type?: 'info' | 'warning' | 'danger';