Merge branch 'master' into node-1617-code-node-fullscreen-mode-is-ove…

…rflowing-modals-border

package.json

@@ -72,7 +72,6 @@
       "chokidar": "3.5.2",
       "esbuild": "^0.20.2",
       "formidable": "3.5.1",
-      "prettier": "^3.2.5",
       "pug": "^3.0.3",
       "semver": "^7.5.4",
       "tslib": "^2.6.2",

packages/@n8n/benchmark/scenarios/binary-data/binary-data.script.js

@@ -3,8 +3,9 @@ import { check } from 'k6';
 
 const apiBaseUrl = __ENV.API_BASE_URL;
 
-const file = open(__ENV.SCRIPT_FILE_PATH, 'b');
-const filename = String(__ENV.SCRIPT_FILE_PATH).split('/').pop();
+// This creates a 2MB file (16 * 128 * 1024 = 2 * 1024 * 1024 = 2MB)
+const file = Array.from({ length: 128 * 1024 }, () => Math.random().toString().slice(2)).join('');
+const filename = 'test.bin';
 
 export default function () {
 	const data = {

packages/@n8n/benchmark/src/test-execution/k6-executor.ts

@@ -77,7 +77,6 @@ export function handleSummary(data) {
 			env: {
 				API_BASE_URL: this.opts.n8nApiBaseUrl,
 				K6_CLOUD_TOKEN: this.opts.k6ApiToken,
-				SCRIPT_FILE_PATH: augmentedTestScriptPath,
 			},
 			stdio: 'inherit',
 		})`${k6ExecutablePath} run ${flattedFlags} ${augmentedTestScriptPath}`;

packages/@n8n/storybook/package.json

@@ -3,19 +3,19 @@
   "private": true,
   "version": "0.0.1",
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.5.0",
-    "@storybook/addon-a11y": "^8.1.4",
-    "@storybook/addon-actions": "^8.1.4",
-    "@storybook/addon-docs": "^8.1.4",
-    "@storybook/addon-essentials": "^8.1.4",
-    "@storybook/addon-interactions": "^8.1.4",
-    "@storybook/addon-links": "^8.1.4",
-    "@storybook/addon-themes": "^8.1.4",
-    "@storybook/blocks": "^8.1.4",
-    "@storybook/test": "^8.1.4",
-    "@storybook/vue3": "^8.1.4",
-    "@storybook/vue3-vite": "^8.1.4",
-    "chromatic": "^11.4.1",
-    "storybook": "^8.1.4"
+    "@chromatic-com/storybook": "^2.0.2",
+    "@storybook/addon-a11y": "^8.3.1",
+    "@storybook/addon-actions": "^8.3.1",
+    "@storybook/addon-docs": "^8.3.1",
+    "@storybook/addon-essentials": "^8.3.1",
+    "@storybook/addon-interactions": "^8.3.1",
+    "@storybook/addon-links": "^8.3.1",
+    "@storybook/addon-themes": "^8.3.1",
+    "@storybook/blocks": "^8.3.1",
+    "@storybook/test": "^8.3.1",
+    "@storybook/vue3": "^8.3.1",
+    "@storybook/vue3-vite": "^8.3.1",
+    "chromatic": "^11.10.2",
+    "storybook": "^8.3.1"
   }
 }

packages/@n8n_io/eslint-config/frontend.js

@@ -25,7 +25,6 @@ module.exports = {
 		},
 		{
 			files: ['**/*.vue'],
-			plugins: isCI ? [] : ['eslint-plugin-prettier'],
 			rules: {
 				'vue/no-deprecated-slot-attribute': 'error',
 				'vue/no-deprecated-slot-scope-attribute': 'error',
@@ -68,14 +67,6 @@ module.exports = {
 				],
 				'vue/no-v-html': 'error',
 
-				...(isCI
-					? {}
-					: {
-							'prettier/prettier': ['error', { endOfLine: 'auto' }],
-							'arrow-body-style': 'off',
-							'prefer-arrow-callback': 'off',
-						}),
-
 				// TODO: remove these
 				'vue/no-mutating-props': 'warn',
 				'vue/no-side-effects-in-computed-properties': 'warn',

packages/@n8n_io/eslint-config/package.json

@@ -6,7 +6,6 @@
     "@types/eslint": "^8.56.5",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
-    "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-typescript": "^18.0.0",
@@ -15,7 +14,6 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-n8n-local-rules": "^1.0.0",
-    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-unicorn": "^51.0.1",
     "eslint-plugin-unused-imports": "^3.1.0",
     "eslint-plugin-vue": "^9.23.0",

packages/design-system/src/components/AskAssistantLoadingMessage/AssistantLoadingMessage.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { defineProps, withDefaults } from 'vue';
-
 import AssistantAvatar from '../AskAssistantAvatar/AssistantAvatar.vue';
 
 withDefaults(

packages/editor-ui/package.json

@@ -63,7 +63,7 @@
     "n8n-design-system": "workspace:*",
     "n8n-workflow": "workspace:*",
     "pinia": "^2.1.6",
-    "prettier": "^3.1.0",
+    "prettier": "^3.3.3",
     "qrcode.vue": "^3.3.4",
     "stream-browserify": "^3.0.0",
     "timeago.js": "^4.0.2",

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, defineProps, defineEmits } from 'vue';
+import { computed } from 'vue';
 import TagsContainer from './TagsContainer.vue';
 import { useAnnotationTagsStore } from '@/stores/tags.store';
 import type { ITag } from '@/Interface';

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

@@ -77,7 +77,7 @@ const onDrag = (event: MouseEvent) => {
 	if (!isDragging.value && draggingElement.value) {
 		isDragging.value = true;
 
-		const data = props.targetDataKey ? draggingElement.value.dataset.value : props.data ?? '';
+		const data = props.targetDataKey ? draggingElement.value.dataset.value : (props.data ?? '');
 
 		ndvStore.draggableStartDragging({
 			type: props.type,

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

@@ -417,7 +417,7 @@ export default defineComponent({
 						type="secondary"
 						hide-icon
 						:transparent="true"
-						:node-name="isActiveNodeConfig ? rootNode : currentNodeName ?? ''"
+						:node-name="isActiveNodeConfig ? rootNode : (currentNodeName ?? '')"
 						:label="$locale.baseText('ndv.input.noOutputData.executePrevious')"
 						telemetry-source="inputs"
 						data-test-id="execute-previous-node"

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { withDefaults, defineProps, defineEmits, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 import {
 	WEBHOOK_NODE_TYPE,
 	MANUAL_TRIGGER_NODE_TYPE,

packages/editor-ui/src/components/Projects/ProjectSharing.vue

@@ -26,7 +26,7 @@ const emit = defineEmits<{
 	projectRemoved: [value: ProjectSharingData];
 }>();
 
-const selectedProject = ref(Array.isArray(model.value) ? '' : model.value?.id ?? '');
+const selectedProject = ref(Array.isArray(model.value) ? '' : (model.value?.id ?? ''));
 const filter = ref('');
 const selectPlaceholder = computed(
 	() => props.placeholder ?? locale.baseText('projects.sharing.select.placeholder'),

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

@@ -41,7 +41,7 @@ export default defineComponent({
 			const projectId = props.projectId ?? inferProjectIdFromRoute(route);
 			const resourceType = props.resourceType ?? inferResourceTypeFromRoute(route);
 			const resourceId = resourceType
-				? props.resourceId ?? inferResourceIdFromRoute(route)
+				? (props.resourceId ?? inferResourceIdFromRoute(route))
 				: undefined;
 
 			return rbacStore.hasScope(

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

@@ -14,6 +14,7 @@ import { nonExistingJsonPath } from '@/constants';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import TextWithHighlights from './TextWithHighlights.vue';
 import { useTelemetry } from '@/composables/useTelemetry';
+import { useElementSize } from '@vueuse/core';
 
 const LazyRunDataJsonActions = defineAsyncComponent(
 	async () => await import('@/components/RunDataJsonActions.vue'),
@@ -45,6 +46,9 @@ const telemetry = useTelemetry();
 const selectedJsonPath = ref(nonExistingJsonPath);
 const draggingPath = ref<null | string>(null);
 const displayMode = ref('json');
+const jsonDataContainer = ref(null);
+
+const { height } = useElementSize(jsonDataContainer);
 
 const jsonData = computed(() => executionDataToJson(props.inputData));
 
@@ -110,7 +114,7 @@ const getListItemName = (path: string) => {
 </script>
 
 <template>
-	<div :class="[$style.jsonDisplay, { [$style.highlight]: highlight }]">
+	<div ref="jsonDataContainer" :class="[$style.jsonDisplay, { [$style.highlight]: highlight }]">
 		<Suspense>
 			<LazyRunDataJsonActions
 				v-if="!editMode.enabled"
@@ -141,6 +145,8 @@ const getListItemName = (path: string) => {
 				root-path=""
 				selectable-type="single"
 				class="json-data"
+				:virtual="true"
+				:height="height"
 				@update:selected-value="selectedJsonPath = $event"
 			>
 				<template #renderNodeKey="{ node }">
@@ -192,11 +198,10 @@ const getListItemName = (path: string) => {
 	left: 0;
 	padding-left: var(--spacing-s);
 	right: 0;
-	overflow-y: auto;
+	overflow-y: hidden;
 	line-height: 1.5;
 	word-break: normal;
 	height: 100%;
-	padding-bottom: var(--spacing-3xl);
 
 	&:hover {
 		/* Shows .actionsGroup element from <run-data-json-actions /> child component */
@@ -299,4 +304,8 @@ const getListItemName = (path: string) => {
 .vjs-tree .vjs-tree__content.has-line {
 	border-left: 1px dotted var(--color-json-line);
 }
+
+.vjs-tree .vjs-tree-list-holder-inner {
+	padding-bottom: var(--spacing-3xl);
+}
 </style>

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

@@ -25,7 +25,7 @@ const i18n = useI18n();
 
 const saveButtonLabel = computed(() => {
 	return props.isSaving
-		? props.savingLabel ?? i18n.baseText('saveButton.saving')
+		? (props.savingLabel ?? i18n.baseText('saveButton.saving'))
 		: i18n.baseText('saveButton.save');
 });
 

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

@@ -87,7 +87,7 @@ const valueToDisplay = computed<NodeParameterValue>(() => {
 	}
 
 	if (isListMode.value) {
-		return props.modelValue ? props.modelValue.cachedResultName ?? props.modelValue.value : '';
+		return props.modelValue ? (props.modelValue.cachedResultName ?? props.modelValue.value) : '';
 	}
 
 	return props.modelValue ? props.modelValue.value : '';

packages/editor-ui/src/components/__tests__/RunDataJson.test.ts

@@ -2,6 +2,22 @@ import { createTestingPinia } from '@pinia/testing';
 import { screen, cleanup } from '@testing-library/vue';
 import RunDataJson from '@/components/RunDataJson.vue';
 import { createComponentRenderer } from '@/__tests__/render';
+import { useElementSize } from '@vueuse/core'; // Import the composable to mock
+
+vi.mock('@vueuse/core', async () => {
+	// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+	const originalModule = await vi.importActual<typeof import('@vueuse/core')>('@vueuse/core');
+
+	return {
+		...originalModule, // Keep all original exports
+		useElementSize: vi.fn(), // Mock useElementSize
+	};
+});
+
+(useElementSize as jest.Mock).mockReturnValue({
+	height: 500, // Mocked height value
+	width: 300, // Mocked width value
+});
 
 const renderComponent = createComponentRenderer(RunDataJson, {
 	props: {
@@ -34,18 +50,6 @@ const renderComponent = createComponentRenderer(RunDataJson, {
 			disabled: false,
 		},
 	},
-	global: {
-		mocks: {
-			$locale: {
-				baseText() {
-					return '';
-				},
-			},
-			$store: {
-				getters: {},
-			},
-		},
-	},
 });
 
 describe('RunDataJson.vue', () => {