refactor(editor): Upgrade frontend typing (no-changelog) (#9915)

packages/design-system/src/components/N8nActionBox/ActionBox.vue

@@ -48,9 +48,9 @@ interface ActionBoxProps {
 	buttonText: string;
 	buttonType: ButtonType;
 	description: string;
-	calloutText: string;
-	calloutTheme: CalloutTheme;
-	calloutIcon: string;
+	calloutText?: string;
+	calloutTheme?: CalloutTheme;
+	calloutIcon?: string;
 }
 
 defineOptions({ name: 'N8nActionBox' });

packages/design-system/src/components/N8nActionBox/__tests__/ActionBox.spec.ts

@@ -10,6 +10,7 @@ describe('N8NActionBox', () => {
 				description:
 					'Long description that you should know something is the way it is because of how it is. ',
 				buttonText: 'Do something',
+				buttonType: 'primary',
 			},
 			global: {
 				stubs: ['n8n-heading', 'n8n-text', 'n8n-button', 'n8n-callout'],

packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue

@@ -5,6 +5,7 @@
 			:placement="placement"
 			:trigger="trigger"
 			:popper-class="popperClass"
+			:teleported="teleported"
 			@command="onSelect"
 			@visible-change="onVisibleChange"
 		>
@@ -74,6 +75,7 @@ interface ActionDropdownProps {
 	iconSize?: IconSize;
 	trigger?: (typeof TRIGGER)[number];
 	hideArrow?: boolean;
+	teleported?: boolean;
 }
 
 const props = withDefaults(defineProps<ActionDropdownProps>(), {
@@ -83,6 +85,7 @@ const props = withDefaults(defineProps<ActionDropdownProps>(), {
 	iconSize: 'medium',
 	trigger: 'click',
 	hideArrow: false,
+	teleported: true,
 });
 
 const $attrs = useAttrs();
@@ -98,7 +101,10 @@ const getItemClasses = (item: ActionDropdownItem): Record<string, boolean> => {
 	};
 };
 
-const $emit = defineEmits(['select', 'visibleChange']);
+const $emit = defineEmits<{
+	(event: 'select', action: string): void;
+	(event: 'visibleChange', open: boolean): void;
+}>();
 const elementDropdown = ref<InstanceType<typeof ElDropdown>>();
 
 const popperClass = computed(

packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts

@@ -6,7 +6,6 @@ describe('components', () => {
 		it('should render default styling correctly', () => {
 			const wrapper = render(N8nActionDropdown, {
 				props: {
-					teleported: false,
 					items: [
 						{
 							id: 'item1',

packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap

@@ -7,7 +7,7 @@ exports[`components > N8nActionDropdown > should render custom styling correctly
 `;
 
 exports[`components > N8nActionDropdown > should render default styling correctly 1`] = `
-"<div class="action-dropdown-container actionDropdownContainer" teleported="false">
+"<div class="action-dropdown-container actionDropdownContainer">
   <el-dropdown-stub trigger="click" effect="light" placement="bottom" popperoptions="[object Object]" size="" splitbutton="false" hideonclick="true" loop="true" showtimeout="150" hidetimeout="150" tabindex="0" maxheight="" popperclass="shadow" disabled="false" role="menu" teleported="true"></el-dropdown-stub>
 </div>"
 `;

packages/design-system/src/components/N8nActionToggle/ActionToggle.vue

@@ -68,7 +68,10 @@ withDefaults(defineProps<ActionToggleProps>(), {
 	iconOrientation: 'vertical',
 });
 
-const $emit = defineEmits(['action', 'visible-change']);
+const $emit = defineEmits<{
+	(event: 'action', value: string): void;
+	(event: 'visible-change', value: boolean): void;
+}>();
 const onCommand = (value: string) => $emit('action', value);
 const onVisibleChange = (value: boolean) => $emit('visible-change', value);
 </script>

packages/design-system/src/components/N8nDatatable/Datatable.vue

@@ -84,7 +84,10 @@ const props = withDefaults(defineProps<DatatableProps>(), {
 	rowsPerPage: 10,
 });
 
-const $emit = defineEmits(['update:currentPage', 'update:rowsPerPage']);
+const $emit = defineEmits<{
+	(event: 'update:currentPage', value: number): void;
+	(event: 'update:rowsPerPage', value: number): void;
+}>();
 
 const { t } = useI18n();
 const rowsPerPageOptions = ref([10, 25, 50, 100]);

packages/design-system/src/components/N8nDatatable/__tests__/data.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import { defineComponent, h } from 'vue';
-import type { DatatableRow } from '../../../types';
+import type { DatatableColumn, DatatableRow } from '../../../types';
 import N8nButton from '../../N8nButton';
 
 export const ActionComponent = defineComponent({
@@ -15,7 +15,7 @@ export const ActionComponent = defineComponent({
 	},
 });
 
-export const columns = [
+export const columns: DatatableColumn[] = [
 	{ id: 'id', path: 'id', label: 'ID' },
 	{ id: 'name', path: 'name', label: 'Name' },
 	{ id: 'age', path: 'meta.age', label: 'Age' },
@@ -23,10 +23,11 @@ export const columns = [
 		id: 'action',
 		label: 'Action',
 		render: ActionComponent,
+		path: 'action',
 	},
 ];
 
-export const rows = [
+export const rows: DatatableRow[] = [
 	{ id: 1, name: 'Richard Hendricks', meta: { age: 29 } },
 	{ id: 2, name: 'Bertram Gilfoyle', meta: { age: 44 } },
 	{ id: 3, name: 'Dinesh Chugtai', meta: { age: 31 } },

packages/design-system/src/components/N8nFormBox/FormBox.vue

@@ -68,7 +68,11 @@ withDefaults(defineProps<FormBoxProps>(), {
 });
 
 const formBus = createEventBus();
-const $emit = defineEmits(['submit', 'update', 'secondaryClick']);
+const $emit = defineEmits<{
+	(event: 'submit', value: { [key: string]: Value }): void;
+	(event: 'update', value: { name: string; value: Value }): void;
+	(event: 'secondaryClick', value: Event): void;
+}>();
 
 const onUpdateModelValue = (e: { name: string; value: Value }) => $emit('update', e);
 const onSubmit = (e: { [key: string]: Value }) => $emit('submit', e);

packages/design-system/src/components/N8nFormInput/FormInput.vue

@@ -159,7 +159,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const $emit = defineEmits<{
 	(event: 'validate', shouldValidate: boolean): void;
-	(event: 'update:modelValue', value: unknown): void;
+	(event: 'update:modelValue', value: Validatable): void;
 	(event: 'focus'): void;
 	(event: 'blur'): void;
 	(event: 'enter'): void;

packages/design-system/src/components/N8nFormInputs/FormInputs.vue

@@ -26,12 +26,12 @@ const props = withDefaults(defineProps<FormInputsProps>(), {
 	tagSize: 'small',
 });
 
-const emit = defineEmits({
-	update: (_: { name: string; value: Value }) => true,
-	'update:modelValue': (_: Record<string, Value>) => true,
-	submit: (_: Record<string, Value>) => true,
-	ready: (_: boolean) => true,
-});
+const emit = defineEmits<{
+	(name: 'update', _: { name: string; value: Value }): boolean;
+	(name: 'update:modelValue', value: Record<string, Value>): boolean;
+	(name: 'submit', value: Record<string, Value>): boolean;
+	(name: 'ready', value: boolean): boolean;
+}>();
 
 const showValidationWarnings = ref(false);
 const values = reactive<Record<string, Value>>({});
@@ -123,8 +123,8 @@ onMounted(() => {
 						:show-validation-warnings="showValidationWarnings"
 						:teleported="teleported"
 						:tag-size="tagSize"
-						@update:model-value="(value) => onUpdateModelValue(input.name, value as Value)"
-						@validate="(value) => onValidate(input.name, value)"
+						@update:model-value="(value: Value) => onUpdateModelValue(input.name, value)"
+						@validate="(value: boolean) => onValidate(input.name, value)"
 						@enter="onSubmit"
 					/>
 				</div>

packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue

@@ -68,7 +68,10 @@ const props = withDefaults(defineProps<InfoAccordionProps>(), {
 	initiallyExpanded: false,
 	eventBus: () => createEventBus(),
 });
-const $emit = defineEmits(['click:body', 'tooltipClick']);
+const $emit = defineEmits<{
+	(name: 'click:body', e: MouseEvent): void;
+	(name: 'tooltipClick', item: string, e: MouseEvent): void;
+}>();
 
 const expanded = ref(false);
 onMounted(() => {

packages/design-system/src/components/N8nMarkdown/Markdown.vue

@@ -155,7 +155,11 @@ const htmlContent = computed(() => {
 	return safeHtml;
 });
 
-const $emit = defineEmits(['markdown-click', 'update-content']);
+const $emit = defineEmits<{
+	(event: 'markdown-click', link: string, e: MouseEvent): void;
+	(event: 'update-content', content: string): void;
+}>();
+
 const onClick = (event: MouseEvent) => {
 	let clickedLink: HTMLAnchorElement | null = null;
 
@@ -169,7 +173,9 @@ const onClick = (event: MouseEvent) => {
 			clickedLink = parentLink;
 		}
 	}
-	$emit('markdown-click', clickedLink, event);
+	if (clickedLink) {
+		$emit('markdown-click', clickedLink?.href, event);
+	}
 };
 
 // Handle checkbox changes

packages/design-system/src/components/N8nRecycleScroller/__tests__/RecycleScroller.spec.ts

@@ -4,7 +4,7 @@ import N8nRecycleScroller from '../RecycleScroller.vue';
 const itemSize = 100;
 const itemKey = 'id';
 const items = [...(new Array(100) as number[])].map((_, index) => ({
-	id: index,
+	id: String(index),
 	name: `Item ${index}`,
 }));
 

packages/design-system/src/components/N8nSelect/__tests__/Select.spec.ts

@@ -26,6 +26,9 @@ describe('components', () => {
 
 		it('should select an option', async () => {
 			const n8nSelectTestComponent = defineComponent({
+				props: {
+					teleported: Boolean,
+				},
 				setup() {
 					const options = ref(['1', '2', '3']);
 					const selected = ref('');
@@ -36,7 +39,7 @@ describe('components', () => {
 					};
 				},
 				template: `
-					<n8n-select v-model="selected">
+					<n8n-select v-model="selected" :teleported="teleported">
 						<n8n-option v-for="o in options" :key="o" :value="o" :label="o" />
 					</n8n-select>
 				`,

packages/design-system/src/components/N8nTags/Tags.vue

@@ -42,7 +42,10 @@ const props = withDefaults(defineProps<TagsProp>(), {
 	truncateAt: 3,
 });
 
-const $emit = defineEmits(['expand', 'click:tag']);
+const $emit = defineEmits<{
+	(event: 'expand', value: boolean): void;
+	(event: 'click:tag', tagId: string, e: MouseEvent): void;
+}>();
 
 const { t } = useI18n();
 

packages/design-system/src/components/N8nUserSelect/UserSelect.vue

@@ -54,7 +54,10 @@ const props = withDefaults(defineProps<UserSelectProps>(), {
 	currentUserId: '',
 });
 
-const $emit = defineEmits(['blur', 'focus']);
+const $emit = defineEmits<{
+	(event: 'blur'): void;
+	(event: 'focus'): void;
+}>();
 
 const { t } = useI18n();
 

packages/design-system/src/components/N8nUserStack/__tests__/UserStack.spec.ts

@@ -15,7 +15,6 @@ describe('UserStack', () => {
 							lastName: 'Side',
 							fullName: 'Sunny Side',
 							email: 'hello@n8n.io',
-							isDefaultUser: false,
 							isPendingUser: false,
 							isOwner: true,
 							signInType: 'email',
@@ -27,7 +26,6 @@ describe('UserStack', () => {
 							lastName: 'Dog',
 							fullName: 'Kobi Dog',
 							email: 'kobi@n8n.io',
-							isDefaultUser: false,
 							isPendingUser: false,
 							isOwner: false,
 							signInType: 'ldap',
@@ -59,7 +57,6 @@ describe('UserStack', () => {
 							lastName: 'Side',
 							fullName: 'Sunny Side',
 							email: 'hello@n8n.io',
-							isDefaultUser: false,
 							isPendingUser: false,
 							isOwner: true,
 							signInType: 'email',
@@ -71,7 +68,6 @@ describe('UserStack', () => {
 							lastName: 'Dog',
 							fullName: 'Kobi Dog',
 							email: 'kobi@n8n.io',
-							isDefaultUser: false,
 							isPendingUser: false,
 							isOwner: false,
 							signInType: 'ldap',
@@ -83,7 +79,6 @@ describe('UserStack', () => {
 							lastName: 'Doe',
 							fullName: 'John Doe',
 							email: 'john@n8n.io',
-							isDefaultUser: false,
 							isPendingUser: false,
 							isOwner: false,
 							signInType: 'email',
@@ -95,7 +90,6 @@ describe('UserStack', () => {
 							lastName: 'Doe',
 							fullName: 'Jane Doe',
 							email: 'jane@n8n.io',
-							isDefaultUser: false,
 							isPendingUser: false,
 							isOwner: false,
 							signInType: 'ldap',

packages/design-system/src/components/N8nUsersList/UsersList.vue

@@ -27,7 +27,7 @@
 					placement="bottom"
 					:actions="getActions(user)"
 					theme="dark"
-					@action="(action) => onUserAction(user, action)"
+					@action="(action: string) => onUserAction(user, action)"
 				/>
 			</div>
 		</div>
@@ -105,7 +105,9 @@ const getActions = (user: IUser): UserAction[] => {
 	return props.actions.filter((action) => (action.guard ?? defaultGuard)(user));
 };
 
-const $emit = defineEmits(['action']);
+const $emit = defineEmits<{
+	(event: 'action', _: { action: string; userId: string }): void;
+}>();
 const onUserAction = (user: IUser, action: string) =>
 	$emit('action', {
 		action,

packages/design-system/src/types/datatable.ts

@@ -4,8 +4,7 @@ export type DatatableRowDataType = string | number | boolean | null | undefined;
 
 export interface DatatableRow {
 	id: string | number;
-
-	[key: string]: DatatableRowDataType;
+	[key: string]: DatatableRowDataType | Record<string, DatatableRowDataType>;
 }
 
 export interface DatatableColumn {