chore(editor): Clean up warnings on the browser's console (#17307)

packages/frontend/@n8n/design-system/src/components/N8nInputNumber/InputNumber.vue

@@ -20,7 +20,15 @@ const props = withDefaults(defineProps<InputNumberProps>(), {
 	max: Infinity,
 });
 
-const resolvedSize = computed(() => props.size as ElementPlusSizePropType);
+const sizeMap: Record<InputSize, ElementPlusSizePropType> = {
+	mini: 'small',
+	small: 'small',
+	medium: 'default',
+	large: 'large',
+	xlarge: 'large',
+};
+
+const resolvedSize = computed(() => (props.size ? sizeMap[props.size] : undefined));
 </script>
 
 <template>

packages/frontend/editor-ui/index.html

@@ -7,7 +7,6 @@
 		<link rel="icon" href="/favicon.ico" />
         <link rel="stylesheet" href="/static/prefers-color-scheme.css">
 		%CONFIG_SCRIPT%
-		<script src="/{{REST_ENDPOINT}}/sentry.js" type="text/javascript"></script>
 		<script src="/static/posthog.init.js" type="text/javascript"></script>
 
 		<title>n8n.io - Workflow Automation</title>

packages/frontend/editor-ui/src/components/InputPanel.vue

@@ -532,17 +532,8 @@ function handleChangeCollapsingColumn(columnName: string | null) {
 							</I18nT>
 						</N8nText>
 					</template>
-					<N8nTooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay">
-						<template #content>
-							<div
-								v-n8n-html="
-									i18n.baseText('dataMapping.dragFromPreviousHint', {
-										interpolate: { name: focusedMappableInput },
-									})
-								"
-							></div>
-						</template>
 					<NodeExecuteButton
+						v-if="!readOnly"
 						type="secondary"
 						hide-icon
 						:transparent="true"
@@ -551,9 +542,22 @@ function handleChangeCollapsingColumn(columnName: string | null) {
 						class="mt-m"
 						telemetry-source="inputs"
 						data-test-id="execute-previous-node"
+						tooltip-placement="bottom"
 						@execute="onNodeExecute"
-						/>
-					</N8nTooltip>
+					>
+						<template
+							v-if="showDraggableHint && showDraggableHintWithDelay"
+							#persistentTooltipContent
+						>
+							<div
+								v-n8n-html="
+									i18n.baseText('dataMapping.dragFromPreviousHint', {
+										interpolate: { name: focusedMappableInput },
+									})
+								"
+							></div>
+						</template>
+					</NodeExecuteButton>
 					<N8nText v-if="!readOnly" tag="div" size="small">
 						<I18nT keypath="ndv.input.noOutputData.hint" scope="global">
 							<template #info>

packages/frontend/editor-ui/src/components/NodeExecuteButton.vue

@@ -66,6 +66,8 @@ const emit = defineEmits<{
 	valueChanged: [value: IUpdateInformation];
 }>();
 
+const slots = defineSlots<{ persistentTooltipContent?: {} }>();
+
 defineOptions({
 	inheritAttrs: false,
 });
@@ -390,9 +392,14 @@ async function onClick() {
 <template>
 	<N8nTooltip
 		:placement="tooltipPlacement ?? 'right'"
-		:disabled="!tooltipText"
-		:content="tooltipText"
+		:disabled="!tooltipText && !slots.persistentTooltipContent"
+		:visible="slots.persistentTooltipContent ? true : undefined"
 	>
+		<template #content>
+			<slot name="persistentTooltipContent">
+				{{ tooltipText }}
+			</slot>
+		</template>
 		<N8nButton
 			v-bind="$attrs"
 			:loading="isLoading"

packages/frontend/editor-ui/src/components/ParameterInput.vue

@@ -234,12 +234,12 @@ const modelValueResourceLocator = computed<INodeParameterResourceLocator>(() =>
 	return props.modelValue as INodeParameterResourceLocator;
 });
 
-const modelValueExpressionEdit = computed<string>(() => {
+const modelValueExpressionEdit = computed<NodeParameterValueType>(() => {
 	return isResourceLocatorParameter.value && typeof props.modelValue !== 'string'
 		? props.modelValue
-			? ((props.modelValue as INodeParameterResourceLocator).value as string)
+			? (props.modelValue as INodeParameterResourceLocator).value
 			: ''
-		: (props.modelValue as string);
+		: props.modelValue;
 });
 
 const editorRows = computed(() => getTypeOption<number>('rows'));
@@ -1175,6 +1175,7 @@ onUpdated(async () => {
 		@keydown.stop
 	>
 		<ExpressionEditModal
+			v-if="typeof modelValueExpressionEdit === 'string'"
 			:dialog-visible="expressionEditDialogVisible"
 			:model-value="modelValueExpressionEdit"
 			:parameter="parameter"

packages/frontend/editor-ui/src/components/RunDataJsonActions.vue

@@ -12,7 +12,7 @@ import { useI18n } from '@n8n/i18n';
 import { nonExistingJsonPath, PiPWindowSymbol } from '@/constants';
 import { useClipboard } from '@/composables/useClipboard';
 import { usePinnedData } from '@/composables/usePinnedData';
-import { inject, computed } from 'vue';
+import { inject, computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { N8nIconButton } from '@n8n/design-system';
@@ -39,7 +39,7 @@ const props = withDefaults(
 	},
 );
 
-const pipWindow = inject(PiPWindowSymbol);
+const pipWindow = inject(PiPWindowSymbol, ref<Window | undefined>());
 const isInPiPWindow = computed(() => pipWindow?.value !== undefined);
 
 const ndvStore = useNDVStore();

packages/frontend/editor-ui/src/components/TagsDropdown.vue

@@ -72,12 +72,14 @@ const containerClasses = computed(() => {
 	return { 'tags-container': true, focused: focused.value };
 });
 
-const dropdownClasses = computed(() => ({
-	'tags-dropdown': true,
-	[`tags-dropdown-${dropdownId}`]: true,
-	'tags-dropdown-create-enabled': props.createEnabled,
-	'tags-dropdown-manage-enabled': props.manageEnabled,
-}));
+const dropdownClasses = computed(() =>
+	[
+		'tags-dropdown',
+		`tags-dropdown-${dropdownId}`,
+		props.createEnabled ? 'tags-dropdown-create-enabled' : '',
+		props.manageEnabled ? 'tags-dropdown-manage-enabled' : '',
+	].join(' '),
+);
 
 watch(
 	() => props.allTags,

packages/frontend/editor-ui/src/components/canvas/Canvas.vue

@@ -138,7 +138,7 @@ const props = withDefaults(
 
 const { isMobileDevice, controlKeyCode } = useDeviceSupport();
 
-const vueFlow = useVueFlow({ id: props.id, deleteKeyCode: null });
+const vueFlow = useVueFlow(props.id);
 const {
 	getSelectedNodes: selectedNodes,
 	addSelectedNodes,
@@ -896,6 +896,7 @@ provide(CanvasKey, {
 		:zoom-activation-key-code="panningKeyCode"
 		:pan-activation-key-code="panningKeyCode"
 		:disable-keyboard-a11y="true"
+		:delete-key-code="null"
 		data-test-id="canvas"
 		@connect-start="onConnectStart"
 		@connect="onConnect"

packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.vue

@@ -38,7 +38,7 @@ const props = withDefaults(
 const $style = useCssModule();
 const settingsStore = useSettingsStore();
 
-const { onNodesInitialized, getSelectedNodes } = useVueFlow({ id: props.id });
+const { onNodesInitialized, getSelectedNodes } = useVueFlow(props.id);
 
 const workflow = toRef(props, 'workflow');
 const workflowObject = toRef(props, 'workflowObject');

packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionsPreview.vue

@@ -21,7 +21,7 @@ import { useExecutionsStore } from '@/stores/executions.store';
 type RetryDropdownRef = InstanceType<typeof ElDropdown>;
 
 const props = defineProps<{
-	execution: ExecutionSummary;
+	execution?: ExecutionSummary;
 }>();
 
 const emit = defineEmits<{
@@ -109,7 +109,9 @@ async function onDeleteExecution(): Promise<void> {
 }
 
 function handleRetryClick(command: string) {
+	if (props.execution) {
 		emit('retryExecution', { execution: props.execution, command });
+	}
 }
 
 function handleStopClick() {

packages/frontend/editor-ui/src/composables/useCanvasLayout.ts

@@ -54,7 +54,7 @@ export function useCanvasLayout({ id: canvasId }: CanvasLayoutOptions = {}) {
 		getSelectedNodes,
 		edges: allEdges,
 		nodes: allNodes,
-	} = useVueFlow({ id: canvasId });
+	} = useVueFlow(canvasId);
 
 	function getTargetData(target: CanvasLayoutTarget): CanvasLayoutTargetData {
 		if (target === 'selection') {

packages/frontend/editor-ui/src/features/logs/components/MessageOptionAction.vue

@@ -1,22 +1,8 @@
 <script setup lang="ts">
-import type { PropType } from 'vue';
 import { useAttrs } from 'vue';
 import { type IconName } from '@n8n/design-system/src/components/N8nIcon/icons';
 
-defineProps({
-	label: {
-		type: String,
-		required: true,
-	},
-	icon: {
-		type: Object as PropType<IconName>,
-		required: true,
-	},
-	placement: {
-		type: String as PropType<'left' | 'right' | 'top' | 'bottom'>,
-		default: 'top',
-	},
-});
+defineProps<{ label: string; icon: IconName; placement: 'left' | 'right' | 'top' | 'bottom' }>();
 
 const attrs = useAttrs();