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

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 {
-		id: data.id,
-		key: data.name,
-		value: 'value' in data ? data.value : '',
-	};
-};
+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'));