refactor(editor): Fix remaining FE type check errors (no-changelog) (#…

…9607) Co-authored-by: Alex Grozav <[email protected]>
n8n-io · Jun 10, 2024 · 22bdb05 · 22bdb05
1 parent 1e15f73
commit 22bdb05
Show file tree

Hide file tree

Showing 84 changed files with 438 additions and 318 deletions.
diff --git a/packages/design-system/src/components/N8nFormInput/FormInput.vue b/packages/design-system/src/components/N8nFormInput/FormInput.vue
@@ -240,7 +240,7 @@ const validationError = computed<string | null>(() => {
 
 	if (error) {
 		if ('messageKey' in error) {
-			return t(error.messageKey, error.options as object);
+			return t(error.messageKey, error.options);
 		} else if ('message' in error) {
 			return error.message;
 		}

diff --git a/packages/design-system/src/locale/format.ts b/packages/design-system/src/locale/format.ts
@@ -6,6 +6,9 @@ const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g;
  *    https://github.com/Matt-Esch/string-template/index.js
  */
 export default function () {
+	const isReplacementGroup = (target: object, key: string): target is Record<string, unknown> =>
+		key in target;
+
 	function template(
 		value: string | ((...args: unknown[]) => string),
 		...args: Array<string | object>
@@ -15,21 +18,23 @@ export default function () {
 		}
 
 		const str = value;
+		let replacements: object = args;
 		if (args.length === 1 && typeof args[0] === 'object') {
-			args = args[0] as unknown as Array<string | object>;
+			replacements = args[0];
 		}
 
-		if (!args?.hasOwnProperty) {
-			args = {} as unknown as Array<string | object>;
+		if (!replacements?.hasOwnProperty) {
+			replacements = {};
 		}
 
-		return str.replace(RE_NARGS, (match, _, i, index: number) => {
-			let result: string | object | null;
+		return str.replace(RE_NARGS, (match, _, group: string, index: number): string => {
+			let result: string | null;
 
 			if (str[index - 1] === '{' && str[index + match.length] === '}') {
-				return i;
+				return `${group}`;
 			} else {
-				result = Object.hasOwn(args, i) ? args[i] : null;
+				result = isReplacementGroup(replacements, group) ? `${replacements[group]}` : null;
+
 				if (result === null || result === undefined) {
 					return '';
 				}

diff --git a/packages/design-system/src/locale/index.ts b/packages/design-system/src/locale/index.ts
@@ -26,7 +26,7 @@ export const t = function (
 
 	// only support flat keys
 	if (lang[path] !== undefined) {
-		return format(lang[path], options);
+		return format(lang[path], ...(options ? [options] : []));
 	}
 
 	return '';
@@ -44,8 +44,8 @@ export async function use(l: string) {
 	} catch (e) {}
 }
 
-export const i18n = function (fn: N8nLocaleTranslateFn) {
+export function i18n(fn: N8nLocaleTranslateFn) {
 	i18nHandler = fn || i18nHandler;
-};
+}
 
 export default { use, t, i18n };
diff --git a/packages/design-system/src/mixins/locale.ts b/packages/design-system/src/mixins/locale.ts
@@ -2,7 +2,7 @@ import { t } from '../locale';
 
 export default {
 	methods: {
-		t(path: string, options: object) {
+		t(path: string, options: string[]) {
 			return t.call(this, path, options);
 		},
 	},

diff --git a/.../design-system/src/shims-markdown-it.d.ts → ...ages/design-system/src/shims-modules.d.ts b/.../design-system/src/shims-markdown-it.d.ts → ...ages/design-system/src/shims-modules.d.ts
diff --git a/packages/design-system/src/shims-types.d.ts b/packages/design-system/src/shims-types.d.ts
diff --git a/packages/design-system/src/shims-vue.d.ts b/packages/design-system/src/shims-vue.d.ts
@@ -1,4 +1,11 @@
-declare module '*.vue' {
-	import Vue from 'vue';
-	export default Vue;
+export {};
+
+/**
+ * @docs https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties
+ */
+
+declare module 'vue' {
+	interface ComponentCustomProperties {
+		$style: Record<string, string>;
+	}
 }
diff --git a/packages/design-system/src/types/form.ts b/packages/design-system/src/types/form.ts
@@ -1,8 +1,10 @@
+import type { N8nLocaleTranslateFnOptions } from 'n8n-design-system/types/i18n';
+
 export type Rule = { name: string; config?: unknown };
 
 export type RuleGroup = {
 	rules: Array<Rule | RuleGroup>;
-	defaultError?: { messageKey: string; options?: unknown };
+	defaultError?: { messageKey: string; options?: N8nLocaleTranslateFnOptions };
 };
 
 export type Validatable = string | number | boolean | null | undefined;
@@ -13,8 +15,8 @@ export type IValidator<T = unknown> = {
 		config: T,
 	) =>
 		| false
-		| { message: string; options?: unknown }
-		| { messageKey: string; options?: unknown }
+		| { message: string; options?: N8nLocaleTranslateFnOptions }
+		| { messageKey: string; options?: N8nLocaleTranslateFnOptions }
 		| null;
 };
 

diff --git a/packages/design-system/src/types/i18n.ts b/packages/design-system/src/types/i18n.ts
@@ -1,3 +1,5 @@
-export type N8nLocaleTranslateFn = (path: string, options: object) => string;
+export type N8nLocaleTranslateFnOptions = string[] | Record<string, unknown>;
+
+export type N8nLocaleTranslateFn = (path: string, options?: N8nLocaleTranslateFnOptions) => string;
 
 export type N8nLocale = Record<string, string | ((...args: unknown[]) => string)>;
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
@@ -134,16 +134,6 @@ export type EndpointStyle = {
 	hoverMessage?: string;
 };
 
-export type EndpointMeta = {
-	__meta?: {
-		nodeName: string;
-		nodeId: string;
-		index: number;
-		totalEndpoints: number;
-		endpointLabelLength: number;
-	};
-};
-
 export interface IUpdateInformation<T extends NodeParameterValueType = NodeParameterValueType> {
 	name: string;
 	key?: string;
@@ -410,19 +400,6 @@ export interface IExecutionResponse extends IExecutionBase {
 	executedNode?: string;
 }
 
-export interface IExecutionShortResponse {
-	id: string;
-	workflowData: {
-		id: string;
-		name: string;
-	};
-	mode: WorkflowExecuteMode;
-	finished: boolean;
-	startedAt: Date;
-	stoppedAt: Date;
-	executionTime?: number;
-}
-
 export interface IExecutionsListResponse {
 	count: number;
 	results: ExecutionSummary[];
@@ -432,6 +409,7 @@ export interface IExecutionsListResponse {
 export interface IExecutionsCurrentSummaryExtended {
 	id: string;
 	finished?: boolean;
+	status: ExecutionStatus;
 	mode: WorkflowExecuteMode;
 	retryOf?: string | null;
 	retrySuccessId?: string | null;

diff --git a/packages/editor-ui/src/__tests__/data/projects.ts b/packages/editor-ui/src/__tests__/data/projects.ts
@@ -1,5 +1,10 @@
 import { faker } from '@faker-js/faker';
-import type { ProjectListItem, ProjectSharingData, ProjectType } from '@/types/projects.types';
+import type {
+	Project,
+	ProjectListItem,
+	ProjectSharingData,
+	ProjectType,
+} from '@/types/projects.types';
 import { ProjectTypes } from '@/types/projects.types';
 
 export const createProjectSharingData = (projectType?: ProjectType): ProjectSharingData => ({
@@ -19,3 +24,16 @@ export const createProjectListItem = (projectType?: ProjectType): ProjectListIte
 		updatedAt: faker.date.recent().toISOString(),
 	};
 };
+
+export function createTestProject(data: Partial<Project>): Project {
+	return {
+		id: faker.string.uuid(),
+		name: faker.lorem.words({ min: 1, max: 3 }),
+		createdAt: faker.date.past().toISOString(),
+		updatedAt: faker.date.recent().toISOString(),
+		type: 'team',
+		relations: [],
+		scopes: [],
+		...data,
+	};
+}
diff --git a/packages/editor-ui/src/__tests__/server/factories/variable.ts b/packages/editor-ui/src/__tests__/server/factories/variable.ts
@@ -4,7 +4,7 @@ import type { EnvironmentVariable } from '@/Interface';
 
 export const variableFactory = Factory.extend<EnvironmentVariable>({
 	id(i: number) {
-		return i;
+		return `${i}`;
 	},
 	key() {
 		return `${faker.lorem.word()}`.toUpperCase();

diff --git a/packages/editor-ui/src/api/eventbus.ee.ts b/packages/editor-ui/src/api/eventbus.ee.ts
@@ -31,7 +31,7 @@ export async function deleteDestinationFromDb(context: IRestApiContext, destinat
 export async function sendTestMessageToDestination(
 	context: IRestApiContext,
 	destination: ApiMessageEventBusDestinationOptions,
-) {
+): Promise<boolean> {
 	const data: IDataObject = {
 		...destination,
 	};

diff --git a/packages/editor-ui/src/api/nodeTypes.ts b/packages/editor-ui/src/api/nodeTypes.ts
@@ -5,9 +5,9 @@ import type {
 	INodePropertyOptions,
 	INodeTypeDescription,
 	INodeTypeNameVersion,
+	ResourceMapperFields,
 } from 'n8n-workflow';
 import axios from 'axios';
-import type { ResourceMapperFields } from 'n8n-workflow/src/Interfaces';
 
 export async function getNodeTypes(baseUrl: string) {
 	const { data } = await axios.get(baseUrl + 'types/nodes.json', { withCredentials: true });

diff --git a/packages/editor-ui/src/api/templates.ts b/packages/editor-ui/src/api/templates.ts
@@ -11,7 +11,7 @@ import type {
 } from '@/Interface';
 import { get } from '@/utils/apiUtils';
 
-function stringifyArray(arr: number[]) {
+function stringifyArray(arr: string[]) {
 	return arr.join(',');
 }
 
@@ -41,7 +41,7 @@ export async function getCollections(
 
 export async function getWorkflows(
 	apiEndpoint: string,
-	query: { page: number; limit: number; categories: number[]; search: string },
+	query: { page: number; limit: number; categories: string[]; search: string },
 	headers?: RawAxiosRequestHeaders,
 ): Promise<{
 	totalWorkflows: number;

diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -1115,8 +1115,6 @@ export default defineComponent({
 						oauthTokenData: {} as CredentialInformation,
 					};
 
-					this.credentialsStore.enableOAuthCredential(credential);
-
 					// Close the window
 					if (oauthPopup) {
 						oauthPopup.close();
@@ -1164,7 +1162,7 @@ export default defineComponent({
 
 			this.credentialData = {
 				...this.credentialData,
-				scopes,
+				scopes: scopes as unknown as CredentialInformation,
 				homeProject,
 			};
 		},

diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
@@ -72,7 +72,7 @@
 </template>
 
 <script lang="ts">
-import type { ICredentialsResponse, IUser, IUserListAction } from '@/Interface';
+import type { ICredentialsResponse, IUserListAction } from '@/Interface';
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import { useMessage } from '@/composables/useMessage';
@@ -157,22 +157,35 @@ export default defineComponent({
 		credentialOwnerName(): string {
 			return this.credentialsStore.getCredentialOwnerNameById(`${this.credentialId}`);
 		},
+		credentialDataHomeProject(): ProjectSharingData | undefined {
+			const credentialContainsProjectSharingData = (
+				data: ICredentialDataDecryptedObject,
+			): data is { homeProject: ProjectSharingData } => {
+				return 'homeProject' in data;
+			};
+
+			return this.credentialData && credentialContainsProjectSharingData(this.credentialData)
+				? this.credentialData.homeProject
+				: undefined;
+		},
 		isCredentialSharedWithCurrentUser(): boolean {
-			return (this.credentialData.sharedWithProjects ?? []).some((sharee: IUser) => {
-				return sharee.id === this.usersStore.currentUser?.id;
+			if (!Array.isArray(this.credentialData.sharedWithProjects)) return false;
+
+			return this.credentialData.sharedWithProjects.some((sharee) => {
+				return typeof sharee === 'object' && 'id' in sharee
+					? sharee.id === this.usersStore.currentUser?.id
+					: false;
 			});
 		},
 		projects(): ProjectListItem[] {
 			return this.projectsStore.personalProjects.filter(
 				(project) =>
 					project.id !== this.credential?.homeProject?.id &&
-					project.id !== this.credentialData?.homeProject?.id,
+					project.id !== this.credentialDataHomeProject?.id,
 			);
 		},
 		homeProject(): ProjectSharingData | undefined {
-			return (
-				this.credential?.homeProject ?? (this.credentialData?.homeProject as ProjectSharingData)
-			);
+			return this.credential?.homeProject ?? this.credentialDataHomeProject;
 		},
 		isHomeTeamProject(): boolean {
 			return this.homeProject?.type === ProjectTypes.Team;

diff --git a/packages/editor-ui/src/components/HoverableNodeIcon.vue b/packages/editor-ui/src/components/HoverableNodeIcon.vue
@@ -2,7 +2,7 @@
 	<div
 		:class="$style.wrapper"
 		:style="iconStyleData"
-		@click="(e) => $emit('click')"
+		@click="() => $emit('click')"
 		@mouseover="showTooltip = true"
 		@mouseleave="showTooltip = false"
 	>
@@ -126,7 +126,7 @@ export default defineComponent({
 
 			const restUrl = this.rootStore.getRestUrl;
 
-			if (nodeType.icon) {
+			if (typeof nodeType.icon === 'string') {
 				const [type, path] = nodeType.icon.split(':');
 				const returnData: NodeIconData = {
 					type,

diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -207,6 +207,10 @@ const isWorkflowHistoryButtonDisabled = computed(() => {
 	return isNewWorkflow.value;
 });
 
+const workflowTagIds = computed(() => {
+	return (props.workflow.tags ?? []).map((tag) => (typeof tag === 'string' ? tag : tag.id));
+});
+
 watch(
 	() => props.workflow.id,
 	() => {
@@ -601,7 +605,7 @@ function showCreateWorkflowSuccessToast(id?: string) {
 			<TagsContainer
 				v-else
 				:key="workflow.id"
-				:tag-ids="workflow.tags"
+				:tag-ids="workflowTagIds"
 				:clickable="true"
 				:responsive="true"
 				data-test-id="workflow-tags"

diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue b/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue
@@ -88,7 +88,9 @@ function onSelected(item: INodeCreateElement) {
 
 		const icon = item.properties.iconUrl
 			? `${baseUrl}${item.properties.iconUrl}`
-			: item.properties.icon?.split(':')[1];
+			: typeof item.properties.icon === 'string'
+				? item.properties.icon?.split(':')[1]
+				: undefined;
 
 		const transformedActions = nodeActions?.map((a) =>
 			transformNodeType(a, item.properties.displayName, 'action'),

diff --git a/packages/editor-ui/src/components/Node/NodeCreator/__tests__/utils.ts b/packages/editor-ui/src/components/Node/NodeCreator/__tests__/utils.ts
@@ -18,7 +18,7 @@ export const mockSimplifiedNodeType = (
 ): SimplifiedNodeType => ({
 	displayName: 'Sample DisplayName',
 	name: 'sampleName',
-	icon: 'sampleIcon',
+	icon: 'fa:sampleIcon',
 	iconUrl: 'https://example.com/icon.png',
 	group: ['group1', 'group2'],
 	description: 'Sample description',

diff --git a/packages/editor-ui/src/components/Node/NodeCreator/composables/useViewStacks.ts b/packages/editor-ui/src/components/Node/NodeCreator/composables/useViewStacks.ts
@@ -36,7 +36,7 @@ import { useI18n } from '@/composables/useI18n';
 import { useKeyboardNavigation } from './useKeyboardNavigation';
 
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import type { INodeInputFilter, NodeConnectionType } from 'n8n-workflow';
+import type { INodeInputFilter, NodeConnectionType, Themed } from 'n8n-workflow';
 import { useCanvasStore } from '@/stores/canvas.store';
 
 interface ViewStack {
@@ -48,7 +48,7 @@ interface ViewStack {
 	info?: string;
 	nodeIcon?: {
 		iconType?: string;
-		icon?: string;
+		icon?: Themed<string>;
 		color?: string;
 	};
 	iconUrl?: string;