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 {

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

@@ -13,11 +13,11 @@ const props = defineProps<{
 	selectedCredentialId: string | null;
 }>();
 
-const $emit = defineEmits({
-	credentialSelected: (_credentialId: string) => true,
-	credentialDeselected: () => true,
-	credentialModalOpened: () => true,
-});
+const $emit = defineEmits<{
+	(event: 'credentialSelected', credentialId: string): void;
+	(event: 'credentialDeselected'): void;
+	(event: 'credentialModalOpened'): void;
+}>();
 
 const uiStore = useUIStore();
 const credentialsStore = useCredentialsStore();

packages/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue

@@ -12,10 +12,10 @@ const props = defineProps<{
 	selectedCredentialId: string | null;
 }>();
 
-const $emit = defineEmits({
-	credentialSelected: (_credentialId: string) => true,
-	newCredential: () => true,
-});
+const $emit = defineEmits<{
+	(event: 'credentialSelected', credentialId: string): void;
+	(event: 'newCredential'): void;
+}>();
 
 const i18n = useI18n();
 

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

@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, defineProps, defineEmits } from 'vue';
+import { ref, watch } from 'vue';
 import ExpandableInputEdit from '@/components/ExpandableInput/ExpandableInputEdit.vue';
 import ExpandableInputPreview from '@/components/ExpandableInput/ExpandableInputPreview.vue';
 import { createEventBus } from 'n8n-design-system/utils';

packages/editor-ui/src/components/MainHeader/TabBar.vue

@@ -28,9 +28,11 @@ withDefaults(
 	},
 );
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits<{
+	(key: 'update:modelValue', tab: MAIN_HEADER_TABS, event: MouseEvent): void;
+}>();
 
-function onUpdateModelValue(tab: string, event: MouseEvent): void {
+function onUpdateModelValue(tab: MAIN_HEADER_TABS, event: MouseEvent): void {
 	emit('update:modelValue', tab, event);
 }
 </script>

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

@@ -20,7 +20,7 @@
 						data-test-id="floating-node"
 						:data-node-name="node.name"
 						:data-node-placement="connectionGroup"
-						@click="$emit('switchSelectedNode', node.name)"
+						@click="emit('switchSelectedNode', node.name)"
 					>
 						<NodeIcon
 							:node-type="nodeType"
@@ -56,7 +56,9 @@ const props = defineProps<Props>();
 const workflowsStore = useWorkflowsStore();
 const nodeTypesStore = useNodeTypesStore();
 const workflow = workflowsStore.getCurrentWorkflow();
-const emit = defineEmits(['switchSelectedNode']);
+const emit = defineEmits<{
+	(key: 'switchSelectedNode', nodeName: string): void;
+}>();
 
 interface NodeConfig {
 	node: INodeUi;

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

@@ -139,7 +139,10 @@ const workflowsStore = useWorkflowsStore();
 const nodeTypesStore = useNodeTypesStore();
 const nodeHelpers = useNodeHelpers();
 const { debounce } = useDebounce();
-const emit = defineEmits(['switchSelectedNode', 'openConnectionNodeCreator']);
+const emit = defineEmits<{
+	(event: 'switchSelectedNode', nodeName: string): void;
+	(event: 'openConnectionNodeCreator', nodeName: string, connectionType: ConnectionTypes): void;
+}>();
 
 interface NodeConfig {
 	node: INodeUi;

packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue

@@ -29,9 +29,9 @@ import CategorizedItemsRenderer from '../Renderers/CategorizedItemsRenderer.vue'
 import type { IDataObject } from 'n8n-workflow';
 import { useTelemetry } from '@/composables/useTelemetry';
 
-const emit = defineEmits({
-	nodeTypeSelected: (_nodeTypes: string[]) => true,
-});
+const emit = defineEmits<{
+	(event: 'nodeTypeSelected', _: [actionKey: string, nodeName: string] | [nodeName: string]): void;
+}>();
 const telemetry = useTelemetry();
 
 const { userActivated } = useUsersStore();

packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue

@@ -31,9 +31,9 @@ export interface Props {
 	rootView: 'trigger' | 'action';
 }
 
-const emit = defineEmits({
-	nodeTypeSelected: (_nodeTypes: string[]) => true,
-});
+const emit = defineEmits<{
+	(event: 'nodeTypeSelected', nodeTypes: string[]): void;
+}>();
 
 const i18n = useI18n();
 const telemetry = useTelemetry();

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

@@ -141,7 +141,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';
 import { createEventBus } from 'n8n-design-system/utils';
-import type { IRunData, ConnectionTypes, Workflow } from 'n8n-workflow';
+import type { IRunData, Workflow } from 'n8n-workflow';
 import { jsonParse, NodeHelpers, NodeConnectionType } from 'n8n-workflow';
 import type { IUpdateInformation, TargetItem } from '@/Interface';
 
@@ -175,14 +175,18 @@ import { useTelemetry } from '@/composables/useTelemetry';
 import { useI18n } from '@/composables/useI18n';
 import { storeToRefs } from 'pinia';
 
-const emit = defineEmits([
-	'saveKeyboardShortcut',
-	'valueChanged',
-	'switchSelectedNode',
-	'openConnectionNodeCreator',
-	'redrawNode',
-	'stopExecution',
-]);
+const emit = defineEmits<{
+	(value: 'saveKeyboardShortcut', event: KeyboardEvent): void;
+	(value: 'valueChanged', parameterData: IUpdateInformation): void;
+	(value: 'switchSelectedNode', nodeTypeName: string): void;
+	(
+		value: 'openConnectionNodeCreator',
+		nodeTypeName: string,
+		connectionType: NodeConnectionType,
+	): void;
+	(value: 'redrawNode', nodeName: string): void;
+	(value: 'stopExecution'): void;
+}>();
 
 const props = withDefaults(
 	defineProps<{
@@ -597,7 +601,7 @@ const onSwitchSelectedNode = (nodeTypeName: string) => {
 	emit('switchSelectedNode', nodeTypeName);
 };
 
-const onOpenConnectionNodeCreator = (nodeTypeName: string, connectionType: ConnectionTypes) => {
+const onOpenConnectionNodeCreator = (nodeTypeName: string, connectionType: NodeConnectionType) => {
 	emit('openConnectionNodeCreator', nodeTypeName, connectionType);
 };
 

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

@@ -66,7 +66,9 @@ const { getSchemaForExecutionData, filterSchema } = useDataSchema();
 const { getNodeInputData } = useNodeHelpers();
 const { debounce } = useDebounce();
 
-const emit = defineEmits<{ (event: 'clear:search'): void }>();
+const emit = defineEmits<{
+	(event: 'clear:search'): void;
+}>();
 
 const nodeSchema = computed(() =>
 	filterSchema(getSchemaForExecutionData(props.data ?? []), props.search),

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

@@ -17,7 +17,12 @@ const { showMessage } = useToast();
 const settingsStore = useSettingsStore();
 const usersStore = useUsersStore();
 
-const emit = defineEmits(['save', 'cancel', 'edit', 'delete']);
+const emit = defineEmits<{
+	(event: 'save', data: IResource): void;
+	(event: 'cancel', data: IResource): void;
+	(event: 'edit', data: IResource): void;
+	(event: 'delete', data: IResource): void;
+}>();
 
 const props = withDefaults(
 	defineProps<{

packages/editor-ui/src/components/WorkflowShareModal.ee.vue

@@ -68,6 +68,7 @@
 							<i18n-t
 								:keypath="
 									uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.description
+										.tooltip
 								"
 								tag="span"
 							>

packages/editor-ui/src/components/banners/BaseBanner.vue

@@ -18,7 +18,9 @@ const props = withDefaults(defineProps<Props>(), {
 	dismissible: true,
 });
 
-const emit = defineEmits(['close']);
+const emit = defineEmits<{
+	(event: 'close'): void;
+}>();
 
 const hasTrailingContent = computed(() => {
 	return !!slots.trailingContent;

packages/editor-ui/src/components/canvas/elements/buttons/CanvasExecuteWorkflowButton.vue

@@ -4,7 +4,9 @@ import { computed } from 'vue';
 import { useI18n } from '@/composables/useI18n';
 import { useUIStore } from '@/stores/ui.store';
 
-defineEmits(['click']);
+defineEmits<{
+	(key: 'click', event: MouseEvent): void;
+}>();
 
 const uiStore = useUIStore();
 const locale = useI18n();

packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue

@@ -25,7 +25,10 @@ const props = withDefaults(
 	},
 );
 
-const emit = defineEmits(['closeModal', 'execution:stop', 'update:autoRefresh', 'update:filters']);
+const emit = defineEmits<{
+	(event: 'update:filters', value: ExecutionFilterType): void;
+	(event: 'execution:stop'): void;
+}>();
 
 const i18n = useI18n();
 const telemetry = useTelemetry();

packages/editor-ui/src/components/executions/global/GlobalExecutionsListItem.vue

@@ -9,7 +9,13 @@ import { i18n as locale } from '@/plugins/i18n';
 import ExecutionsTime from '@/components/executions/ExecutionsTime.vue';
 import { useExecutionHelpers } from '@/composables/useExecutionHelpers';
 
-const emit = defineEmits(['stop', 'select', 'retrySaved', 'retryOriginal', 'delete']);
+type Command = 'retrySaved' | 'retryOriginal' | 'delete';
+
+const emit = defineEmits<{
+	(event: 'stop', data: ExecutionSummary): void;
+	(event: 'select', data: ExecutionSummary): void;
+	(event: Command, data: ExecutionSummary): void;
+}>();
 
 const props = withDefaults(
 	defineProps<{
@@ -141,7 +147,7 @@ function onSelect() {
 	emit('select', props.execution);
 }
 
-async function handleActionItemClick(commandData: 'retrySaved' | 'retryOriginal' | 'delete') {
+async function handleActionItemClick(commandData: Command) {
 	emit(commandData, props.execution);
 }
 </script>

packages/editor-ui/src/components/layouts/ResourcesListLayout.vue

@@ -165,6 +165,7 @@ export type IResource = {
 	id: string;
 	name: string;
 	value: string;
+	key?: string;
 	updatedAt?: string;
 	createdAt?: string;
 	homeProject?: ProjectSharingData;

packages/editor-ui/src/composables/__tests__/useHistoryHelper.test.ts

@@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { useHistoryHelper } from '../useHistoryHelper';
 import { defineComponent, type PropType } from 'vue';
 import type { RouteLocationNormalizedLoaded } from 'vue-router';
+import { mock } from 'vitest-mock-extended';
 
 const undoMock = vi.fn();
 const redoMock = vi.fn();
@@ -58,12 +59,12 @@ describe('useHistoryHelper', () => {
 		// @ts-ignore
 		render(TestComponent, {
 			props: {
-				route: {
+				route: mock<RouteLocationNormalizedLoaded>({
 					name: MAIN_HEADER_TABS.WORKFLOW,
 					meta: {
 						nodeView: true,
 					},
-				},
+				}),
 			},
 		});
 
@@ -76,12 +77,12 @@ describe('useHistoryHelper', () => {
 		// @ts-ignore
 		render(TestComponent, {
 			props: {
-				route: {
+				route: mock<RouteLocationNormalizedLoaded>({
 					name: MAIN_HEADER_TABS.WORKFLOW,
 					meta: {
 						nodeView: true,
 					},
-				},
+				}),
 			},
 		});
 

packages/editor-ui/src/views/MfaView.vue

@@ -115,7 +115,11 @@ const i18 = useI18n();
 // #region Emit
 // ---------------------------------------------------------------------------
 
-const emit = defineEmits(['onFormChanged', 'onBackClick', 'submit']);
+const emit = defineEmits<{
+	(event: 'onFormChanged', formField: string): void;
+	(event: 'onBackClick', formField: string): void;
+	(event: 'submit', form: { token: string; recoveryCode: string }): void;
+}>();
 
 // #endregion
 

packages/editor-ui/src/views/VariablesView.vue

@@ -118,13 +118,17 @@ function resetNewVariablesList() {
 	newlyAddedVariableIds.value = [];
 }
 
-const resourceToEnvironmentVariable = (data: IResource): EnvironmentVariable => {
-	return {
+const resourceToEnvironmentVariable = (data: IResource): EnvironmentVariable => ({
 	id: data.id,
 	key: data.name,
 	value: 'value' in data ? data.value : '',
-	};
-};
+});
+
+const environmentVariableToResource = (data: EnvironmentVariable): IResource => ({
+	id: data.id,
+	name: data.key,
+	value: 'value' in data ? data.value : '',
+});
 
 async function initialize() {
 	if (!isFeatureEnabled.value) return;
@@ -159,35 +163,33 @@ function addTemporaryVariable() {
 }
 
 async function saveVariable(data: IResource) {
-	let updatedVariable: EnvironmentVariable;
 	const variable = resourceToEnvironmentVariable(data);
-
 	try {
-		if (typeof data.id === 'string' && data.id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
+		if (typeof variable.id === 'string' && variable.id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
 			const { id, ...rest } = variable;
-			updatedVariable = await environmentsStore.createVariable(rest);
+			const updatedVariable = await environmentsStore.createVariable(rest);
 			allVariables.value.unshift(updatedVariable);
 			allVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);
 			newlyAddedVariableIds.value.unshift(updatedVariable.id);
 		} else {
-			updatedVariable = await environmentsStore.updateVariable(variable);
+			const updatedVariable = await environmentsStore.updateVariable(variable);
 			allVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);
 			allVariables.value.push(updatedVariable);
-			toggleEditing(updatedVariable);
+			toggleEditing(environmentVariableToResource(updatedVariable));
 		}
 	} catch (error) {
 		showError(error, i18n.baseText('variables.errors.save'));
 	}
 }
 
-function toggleEditing(data: EnvironmentVariable) {
+function toggleEditing(data: IResource) {
 	editMode.value = {
 		...editMode.value,
 		[data.id]: !editMode.value[data.id],
 	};
 }
 
-function cancelEditing(data: EnvironmentVariable) {
+function cancelEditing(data: IResource) {
 	if (typeof data.id === 'string' && data.id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
 		allVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);
 	} else {
@@ -195,10 +197,13 @@ function cancelEditing(data: EnvironmentVariable) {
 	}
 }
 
-async function deleteVariable(data: EnvironmentVariable) {
+async function deleteVariable(data: IResource) {
+	const variable = resourceToEnvironmentVariable(data);
 	try {
 		const confirmed = await message.confirm(
-			i18n.baseText('variables.modals.deleteConfirm.message', { interpolate: { name: data.key } }),
+			i18n.baseText('variables.modals.deleteConfirm.message', {
+				interpolate: { name: variable.key },
+			}),
 			i18n.baseText('variables.modals.deleteConfirm.title'),
 			{
 				confirmButtonText: i18n.baseText('variables.modals.deleteConfirm.confirmButton'),
@@ -210,7 +215,7 @@ async function deleteVariable(data: EnvironmentVariable) {
 			return;
 		}
 
-		await environmentsStore.deleteVariable(data);
+		await environmentsStore.deleteVariable(variable);
 		allVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);
 	} catch (error) {
 		showError(error, i18n.baseText('variables.errors.delete'));