refactor(editor): Fix typescript issues in components (no-changelog) (#9580)

packages/editor-ui/src/Interface.ts

@@ -57,6 +57,7 @@ import type { Scope } from '@n8n/permissions';
 import type { NotificationOptions as ElementNotificationOptions } from 'element-plus';
 import type { ProjectSharingData } from '@/features/projects/projects.types';
 import type { Connection } from '@jsplumb/core';
+import type { BaseTextKey } from './plugins/i18n';
 
 export * from 'n8n-design-system/types';
 
@@ -138,14 +139,7 @@ export type EndpointMeta = {
 	};
 };
 
-export interface IUpdateInformation<
-	T extends NodeParameterValueType =
-		| string
-		| number
-		| { [key: string]: string | number | boolean }
-		| NodeParameterValueType
-		| INodeParameters,
-> {
+export interface IUpdateInformation<T extends NodeParameterValueType = NodeParameterValueType> {
 	name: string;
 	key?: string;
 	value: T;
@@ -1340,12 +1334,12 @@ export interface UIState {
 
 export type IFakeDoor = {
 	id: FAKE_DOOR_FEATURES;
-	featureName: string;
+	featureName: BaseTextKey;
 	icon?: string;
-	infoText?: string;
-	actionBoxTitle: string;
-	actionBoxDescription: string;
-	actionBoxButtonLabel?: string;
+	infoText?: BaseTextKey;
+	actionBoxTitle: BaseTextKey;
+	actionBoxDescription: BaseTextKey;
+	actionBoxButtonLabel?: BaseTextKey;
 	linkURL: string;
 	uiLocations: IFakeDoorLocation[];
 };

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

@@ -69,7 +69,7 @@ export default defineComponent({
 			}
 		} else {
 			try {
-				const binaryUrl = this.workflowsStore.getBinaryUrl(id, 'view', fileName, mimeType);
+				const binaryUrl = this.workflowsStore.getBinaryUrl(id, 'view', fileName ?? '', mimeType);
 				if (isJSONData || isHTMLData) {
 					const fetchedData = await fetch(binaryUrl, { credentials: 'include' });
 					this.data = await (isJSONData ? fetchedData.json() : fetchedData.text());

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

@@ -22,7 +22,12 @@ const i18n = useI18n();
 const rootStore = useRootStore();
 const workflowsStore = useWorkflowsStore();
 
-const tabs = ref([
+type ChatEmbedModalTabValue = 'cdn' | 'vue' | 'react' | 'other';
+type ChatEmbedModalTab = {
+	label: string;
+	value: ChatEmbedModalTabValue;
+};
+const tabs = ref<ChatEmbedModalTab[]>([
 	{
 		label: 'CDN Embed',
 		value: 'cdn',
@@ -40,7 +45,7 @@ const tabs = ref([
 		value: 'other',
 	},
 ]);
-const currentTab = ref('cdn');
+const currentTab = ref<ChatEmbedModalTabValue>('cdn');
 
 const webhookNode = computed(() => {
 	for (const type of [CHAT_TRIGGER_NODE_TYPE, WEBHOOK_NODE_TYPE]) {

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

@@ -134,7 +134,7 @@ export default defineComponent({
 		};
 	},
 	watch: {
-		mode(newMode, previousMode: CodeExecutionMode) {
+		mode(_newMode, previousMode: CodeExecutionMode) {
 			this.reloadLinter();
 
 			if (
@@ -143,7 +143,7 @@ export default defineComponent({
 				this.refreshPlaceholder();
 			}
 		},
-		language(newLanguage, previousLanguage: CodeNodeEditorLanguage) {
+		language(_newLanguage, previousLanguage: CodeNodeEditorLanguage) {
 			if (
 				this.getCurrentEditorContent().trim() === CODE_PLACEHOLDERS[previousLanguage]?.[this.mode]
 			) {

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

@@ -16,7 +16,7 @@
 					</n8n-text>
 					{{ ' ' }}
 					<n8n-link :to="COMMUNITY_NODES_INSTALLATION_DOCS_URL" @click="onMoreInfoTopClick">
-						{{ $locale.baseText('_reusableDynamicText.moreInfo') }}
+						{{ $locale.baseText('generic.moreInfo') }}
 					</n8n-link>
 				</div>
 				<n8n-button
@@ -67,7 +67,7 @@
 						{{ $locale.baseText('settings.communityNodes.installModal.checkbox.label') }} </n8n-text
 					><br />
 					<n8n-link :to="COMMUNITY_NODES_RISKS_DOCS_URL" @click="onLearnMoreLinkClick">{{
-						$locale.baseText('_reusableDynamicText.moreInfo')
+						$locale.baseText('generic.moreInfo')
 					}}</n8n-link>
 				</el-checkbox>
 			</div>

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

@@ -77,7 +77,7 @@ export default defineComponent({
 	methods: {
 		copy(): void {
 			this.$emit('copy');
-			void this.clipboard.copy(this.value);
+			void this.clipboard.copy(this.value ?? '');
 
 			this.showMessage({
 				title: this.toastTitle,

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

@@ -118,6 +118,7 @@ export default defineComponent({
 	computed: {
 		...mapStores(useUsersStore, useProjectsStore),
 		userToDelete(): IUser | null {
+			if (!this.activeId) return null;
 			return this.usersStore.getUserById(this.activeId);
 		},
 		isPending(): boolean {

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

@@ -114,7 +114,7 @@ export default defineComponent({
 					e.clientY <= dim.bottom;
 			}
 		},
-		onMouseUp(e: MouseEvent) {
+		onMouseUp() {
 			if (this.activeDrop) {
 				const data = this.ndvStore.draggableData;
 				this.$emit('drop', data);

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

@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { type StyleValue, defineComponent, type PropType } from 'vue';
 
 import type { ITemplatesNode } from '@/Interface';
 import type { INodeTypeDescription } from 'n8n-workflow';
@@ -50,6 +50,7 @@ import { useRootStore } from '@/stores/n8nRoot.store';
 interface NodeIconData {
 	type: string;
 	path?: string;
+	icon?: string;
 	fileExtension?: string;
 	fileBuffer?: string;
 }
@@ -69,7 +70,8 @@ export default defineComponent({
 			default: false,
 		},
 		nodeType: {
-			type: Object,
+			type: Object as PropType<INodeTypeDescription>,
+			required: true,
 		},
 		size: {
 			type: Number,
@@ -82,9 +84,11 @@ export default defineComponent({
 				'max-width': this.size + 'px',
 			};
 		},
-		iconStyleData(): object {
-			const nodeType = this.nodeType as ITemplatesNode | null;
-			const color = nodeType ? nodeType.defaults && nodeType.defaults.color : '';
+		iconStyleData(): StyleValue {
+			const nodeType = this.nodeType;
+			const nodeTypeColor = nodeType?.defaults?.color;
+			const color = typeof nodeTypeColor === 'string' ? nodeTypeColor : '';
+
 			if (!this.size) {
 				return { color };
 			}
@@ -103,7 +107,7 @@ export default defineComponent({
 				}),
 			};
 		},
-		imageStyleData(): object {
+		imageStyleData(): StyleValue {
 			return {
 				width: '100%',
 				'max-width': '100%',

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

@@ -28,7 +28,7 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			observer: null,
+			observer: null as IntersectionObserver | null,
 		};
 	},
 	mounted() {
@@ -64,7 +64,7 @@ export default defineComponent({
 		});
 	},
 	beforeUnmount() {
-		if (this.enabled) {
+		if (this.enabled && this.observer) {
 			this.observer.disconnect();
 		}
 	},

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

@@ -65,7 +65,7 @@ import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 import { useToast } from '@/composables/useToast';
 import Modal from './Modal.vue';
-import type { IFormInputs, IInviteResponse, IUser } from '@/Interface';
+import type { IFormInputs, IInviteResponse, IUser, InvitableRoleName } from '@/Interface';
 import {
 	EnterpriseEditionFeature,
 	VALID_EMAIL_REGEX,
@@ -113,7 +113,7 @@ export default defineComponent({
 			formBus: createEventBus(),
 			modalBus: createEventBus(),
 			emails: '',
-			role: ROLE.Member,
+			role: ROLE.Member as InvitableRoleName,
 			showInviteUrls: null as IInviteResponse[] | null,
 			loading: false,
 			INVITE_USER_MODAL_KEY,
@@ -216,7 +216,7 @@ export default defineComponent({
 
 			return false;
 		},
-		onInput(e: { name: string; value: string }) {
+		onInput(e: { name: string; value: InvitableRoleName }) {
 			if (e.name === 'emails') {
 				this.emails = e.value;
 			}
@@ -237,7 +237,7 @@ export default defineComponent({
 					throw new Error(this.$locale.baseText('settings.users.noUsersToInvite'));
 				}
 
-				const invited: IInviteResponse[] = await this.usersStore.inviteUsers(emails);
+				const invited = await this.usersStore.inviteUsers(emails);
 				const erroredInvites = invited.filter((invite) => invite.error);
 				const successfulEmailInvites = invited.filter(
 					(invite) => !invite.error && invite.user.emailSent,

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

@@ -60,7 +60,7 @@ export default defineComponent({
 	},
 	computed: {
 		doc(): string {
-			return this.editor?.state.doc.toString();
+			return this.editor?.state.doc.toString() ?? '';
 		},
 		extensions(): Extension[] {
 			const { isReadOnly } = this;

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import type { KeyboardShortcut } from '@/Interface';
 import type { Placement } from 'element-plus';
-import type { KeyboardShortcut } from 'n8n-design-system/src/components/N8nKeyboardShortcut';
 
 interface Props {
 	label: string;

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

@@ -38,7 +38,7 @@
 					</n8n-text>
 				</div>
 				<div :class="$style.qrContainer">
-					<QrcodeVue :value="qrCode" size="150" level="H" />
+					<QrcodeVue :value="qrCode" :size="150" level="H" />
 				</div>
 				<div :class="$style.textContainer">
 					<n8n-text size="large" color="text-dark" :bold="true">{{

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

@@ -32,6 +32,7 @@ export default defineComponent({
 	props: {
 		name: {
 			type: String,
+			required: true,
 		},
 		beforeClose: {
 			type: Function,

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

@@ -48,7 +48,7 @@ import { computed, nextTick, ref } from 'vue';
 
 type Props = {
 	modelValue: string;
-	nodeType?: INodeTypeDescription;
+	nodeType?: INodeTypeDescription | null;
 	readOnly?: boolean;
 };
 

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

@@ -243,7 +243,6 @@ export default defineComponent({
 		},
 		node: {
 			type: Object as PropType<INode>,
-			required: true,
 		},
 		path: {
 			type: String,
@@ -308,7 +307,8 @@ export default defineComponent({
 			return !!(node?.credentials && Object.keys(node.credentials).length === 1);
 		},
 		credentialsNotSet(): boolean {
-			const nodeType = this.nodeTypesStore.getNodeType(this.node?.type);
+			if (!this.node) return false;
+			const nodeType = this.nodeTypesStore.getNodeType(this.node.type);
 			if (nodeType) {
 				const usesCredentials =
 					nodeType.credentials !== undefined && nodeType.credentials.length > 0;
@@ -387,8 +387,8 @@ export default defineComponent({
 			filter: string;
 		} {
 			return {
-				parameters: this.node.parameters,
-				credentials: this.node.credentials,
+				parameters: this.node?.parameters ?? {},
+				credentials: this.node?.credentials ?? {},
 				filter: this.searchFilter,
 			};
 		},
@@ -561,7 +561,8 @@ export default defineComponent({
 			this.uiStore.openExistingCredential(id);
 		},
 		createNewCredential(): void {
-			const nodeType = this.nodeTypesStore.getNodeType(this.node?.type);
+			if (!this.node) return;
+			const nodeType = this.nodeTypesStore.getNodeType(this.node.type);
 			if (!nodeType) {
 				return;
 			}
@@ -667,6 +668,10 @@ export default defineComponent({
 				return;
 			}
 
+			if (!this.node) {
+				return;
+			}
+
 			let paginationToken: string | undefined;
 
 			try {

packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue

@@ -24,7 +24,7 @@ function toggleDisableNode() {}
 function deleteNode() {}
 
 // @TODO
-function openContextMenu(e: MouseEvent, type: string) {}
+function openContextMenu(_e: MouseEvent, _type: string) {}
 </script>
 
 <template>

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -69,6 +69,7 @@
 	"generic.and": "and",
 	"generic.welcome": "Welcome",
 	"generic.ownedByMe": "Owned by me",
+	"generic.moreInfo": "More info",
 	"about.aboutN8n": "About n8n",
 	"about.close": "Close",
 	"about.license": "License",

packages/editor-ui/src/types/externalHooks.ts

@@ -1,13 +1,10 @@
 import type { N8nInput } from 'n8n-design-system';
 import type {
 	IConnections,
-	INodeParameters,
 	INodeProperties,
 	INodeTypeDescription,
 	ITelemetryTrackProperties,
-	INodeParameterResourceLocator,
-	NodeParameterValue,
-	ResourceMapperValue,
+	NodeParameterValueType,
 } from 'n8n-workflow';
 import type { RouteLocation } from 'vue-router';
 import type {
@@ -197,16 +194,7 @@ export interface ExternalHooks {
 			ExternalHooksMethod<{
 				node_type?: string;
 				action: string;
-				resource:
-					| string
-					| number
-					| true
-					| INodeParameters
-					| INodeParameterResourceLocator
-					| NodeParameterValue[]
-					| INodeParameters[]
-					| INodeParameterResourceLocator[]
-					| ResourceMapperValue[];
+				resource: NodeParameterValueType;
 			}>
 		>;
 		selectedTypeChanged: Array<ExternalHooksMethod<{ oldValue: string; newValue: string }>>;