ci: Upgrade frontend dev tooling (no-changelog) (#10786)

package.json

@@ -70,13 +70,14 @@
     "overrides": {
       "@types/node": "^18.16.16",
       "chokidar": "^4.0.1",
-      "esbuild": "^0.21.5",
+      "esbuild": "^0.24.0",
       "formidable": "3.5.1",
       "pug": "^3.0.3",
       "semver": "^7.5.4",
       "tslib": "^2.6.2",
       "tsconfig-paths": "^4.2.0",
       "typescript": "^5.6.2",
+      "vue-tsc": "^2.1.6",
       "ws": ">=8.17.1"
     },
     "patchedDependencies": {

packages/@n8n/chat/package.json

@@ -50,7 +50,7 @@
     "unplugin-icons": "^0.19.0",
     "vite": "catalog:frontend",
     "vitest": "catalog:frontend",
-    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-dts": "^4.2.3",
     "vue-tsc": "catalog:frontend"
   },
   "files": [

packages/@n8n/storybook/package.json

@@ -4,18 +4,18 @@
   "version": "0.0.1",
   "devDependencies": {
     "@chromatic-com/storybook": "^2.0.2",
-    "@storybook/addon-a11y": "^8.3.1",
+    "@storybook/addon-a11y": "^8.3.5",
-    "@storybook/addon-actions": "^8.3.1",
+    "@storybook/addon-actions": "^8.3.5",
-    "@storybook/addon-docs": "^8.3.1",
+    "@storybook/addon-docs": "^8.3.5",
-    "@storybook/addon-essentials": "^8.3.1",
+    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.1",
+    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.1",
+    "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-themes": "^8.3.1",
+    "@storybook/addon-themes": "^8.3.5",
-    "@storybook/blocks": "^8.3.1",
+    "@storybook/blocks": "^8.3.5",
-    "@storybook/test": "^8.3.1",
+    "@storybook/test": "^8.3.5",
-    "@storybook/vue3": "^8.3.1",
+    "@storybook/vue3": "^8.3.5",
-    "@storybook/vue3-vite": "^8.3.1",
+    "@storybook/vue3-vite": "^8.3.5",
     "chromatic": "^11.10.2",
-    "storybook": "^8.3.1"
+    "storybook": "^8.3.5"
   }
 }

packages/design-system/src/components/AskAssistantChat/__tests__/AskAssistantChat.spec.ts

@@ -4,21 +4,26 @@ import { n8nHtml } from 'n8n-design-system/directives';
 
 import AskAssistantChat from '../AskAssistantChat.vue';
 
+const stubs = ['n8n-avatar', 'n8n-button', 'n8n-icon', 'n8n-icon-button'];
+
 describe('AskAssistantChat', () => {
 	it('renders default placeholder chat correctly', () => {
 		const { container } = render(AskAssistantChat, {
 			props: {
 				user: { firstName: 'Kobi', lastName: 'Dog' },
 			},
+			global: { stubs },
 		});
 		expect(container).toMatchSnapshot();
 	});
+
 	it('renders chat with messages correctly', () => {
 		const { container } = render(AskAssistantChat, {
 			global: {
 				directives: {
 					n8nHtml,
 				},
+				stubs,
 			},
 			props: {
 				user: { firstName: 'Kobi', lastName: 'Dog' },
@@ -92,12 +97,14 @@ describe('AskAssistantChat', () => {
 		});
 		expect(container).toMatchSnapshot();
 	});
+
 	it('renders streaming chat correctly', () => {
 		const { container } = render(AskAssistantChat, {
 			global: {
 				directives: {
 					n8nHtml,
 				},
+				stubs,
 			},
 			props: {
 				user: { firstName: 'Kobi', lastName: 'Dog' },
@@ -116,12 +123,14 @@ describe('AskAssistantChat', () => {
 		});
 		expect(container).toMatchSnapshot();
 	});
+
 	it('renders end of session chat correctly', () => {
 		const { container } = render(AskAssistantChat, {
 			global: {
 				directives: {
 					n8nHtml,
 				},
+				stubs,
 			},
 			props: {
 				user: { firstName: 'Kobi', lastName: 'Dog' },
@@ -146,12 +155,14 @@ describe('AskAssistantChat', () => {
 		});
 		expect(container).toMatchSnapshot();
 	});
+
 	it('renders message with code snippet', () => {
 		const { container } = render(AskAssistantChat, {
 			global: {
 				directives: {
 					n8nHtml,
 				},
+				stubs,
 			},
 			props: {
 				user: { firstName: 'Kobi', lastName: 'Dog' },

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

@@ -64,7 +64,7 @@ exports[`AskAssistantChat > renders chat with messages correctly 1`] = `
         class="back"
         data-test-id="close-chat-button"
       >
-        <n8n-icon
+        <n8n-icon-stub
           color="text-base"
           icon="arrow-right"
         />
@@ -400,16 +400,14 @@ exports[`AskAssistantChat > renders chat with messages correctly 1`] = `
               <div
                 class="actions"
               >
-                <n8n-button
+                <n8n-button-stub
                   data-test-id="replace-code-button"
                   disabled="false"
                   icon="refresh"
                   loading="false"
                   size="mini"
                   type="primary"
-                >
+                />
-                  Replace my code
-                </n8n-button>
               </div>
             </div>
           </div>
@@ -422,7 +420,7 @@ exports[`AskAssistantChat > renders chat with messages correctly 1`] = `
           <div
             class="roleName userSection"
           >
-            <n8n-avatar
+            <n8n-avatar-stub
               first-name="Kobi"
               last-name="Dog"
               size="xsmall"
@@ -683,16 +681,14 @@ Testing more code
               <div
                 class="actions"
               >
-                <n8n-button
+                <n8n-button-stub
                   data-test-id="replace-code-button"
                   disabled="false"
                   icon="refresh"
                   loading="false"
                   size="mini"
                   type="primary"
-                >
+                />
-                  Replace my code
-                </n8n-button>
               </div>
             </div>
           </div>
@@ -708,22 +704,18 @@ Testing more code
             <div
               data-test-id="quick-replies"
             >
-              <n8n-button
+              <n8n-button-stub
                 size="mini"
                 type="secondary"
-              >
+              />
-                Give me another solution
-              </n8n-button>
             </div>
             <div
               data-test-id="quick-replies"
             >
-              <n8n-button
+              <n8n-button-stub
                 size="mini"
                 type="secondary"
-              >
+              />
-                All good
-              </n8n-button>
             </div>
             
           </div>
@@ -742,7 +734,7 @@ Testing more code
         rows="1"
         wrap="hard"
       />
-      <n8n-icon-button
+      <n8n-icon-button-stub
         class="sendButton"
         data-test-id="send-message-button"
         disabled="true"
@@ -819,7 +811,7 @@ exports[`AskAssistantChat > renders default placeholder chat correctly 1`] = `
         class="back"
         data-test-id="close-chat-button"
       >
-        <n8n-icon
+        <n8n-icon-stub
           color="text-base"
           icon="arrow-right"
         />
@@ -916,7 +908,7 @@ exports[`AskAssistantChat > renders default placeholder chat correctly 1`] = `
         rows="1"
         wrap="hard"
       />
-      <n8n-icon-button
+      <n8n-icon-button-stub
         class="sendButton"
         data-test-id="send-message-button"
         disabled="true"
@@ -993,7 +985,7 @@ exports[`AskAssistantChat > renders end of session chat correctly 1`] = `
         class="back"
         data-test-id="close-chat-button"
       >
-        <n8n-icon
+        <n8n-icon-stub
           color="text-base"
           icon="arrow-right"
         />
@@ -1161,7 +1153,7 @@ exports[`AskAssistantChat > renders end of session chat correctly 1`] = `
         rows="1"
         wrap="hard"
       />
-      <n8n-icon-button
+      <n8n-icon-button-stub
         class="sendButton"
         data-test-id="send-message-button"
         disabled="true"
@@ -1238,7 +1230,7 @@ exports[`AskAssistantChat > renders message with code snippet 1`] = `
         class="back"
         data-test-id="close-chat-button"
       >
-        <n8n-icon
+        <n8n-icon-stub
           color="text-base"
           icon="arrow-right"
         />
@@ -1405,7 +1397,7 @@ catch(e) {
         rows="1"
         wrap="hard"
       />
-      <n8n-icon-button
+      <n8n-icon-button-stub
         class="sendButton"
         data-test-id="send-message-button"
         disabled="true"
@@ -1482,7 +1474,7 @@ exports[`AskAssistantChat > renders streaming chat correctly 1`] = `
         class="back"
         data-test-id="close-chat-button"
       >
-        <n8n-icon
+        <n8n-icon-stub
           color="text-base"
           icon="arrow-right"
         />
@@ -1581,7 +1573,7 @@ exports[`AskAssistantChat > renders streaming chat correctly 1`] = `
         rows="1"
         wrap="hard"
       />
-      <n8n-icon-button
+      <n8n-icon-button-stub
         class="sendButton"
         data-test-id="send-message-button"
         disabled="true"

packages/design-system/src/components/CodeDiff/__tests__/CodeDiff.spec.ts

@@ -2,6 +2,8 @@ import { render } from '@testing-library/vue';
 
 import CodeDiff from '../CodeDiff.vue';
 
+const stubs = ['n8n-button', 'n8n-icon'];
+
 describe('CodeDiff', () => {
 	it('renders code diff correctly', () => {
 		const { container } = render(CodeDiff, {
@@ -10,9 +12,11 @@ describe('CodeDiff', () => {
 				content:
 					"--- original.js\n+++ modified.js\n@@ -1,2 +1,2 @@\n-const SIGNING_SECRET = $input.first().json.slack_secret_signature;\n-const item = $('Webhook to call for Slack command').first();\n+const SIGNING_SECRET = items[0].json.slack_secret_signature;\n+const item = items[0];\n@@ -7,8 +7,6 @@\n}\n\n-const crypto = require('crypto');\n-\n const { binary: { data } } = item;\n\n if (\n@@ -22,7 +20,7 @@\n const rawBody = Buffer.from(data.data, 'base64').toString()\n \n // compute the ",
 			},
+			global: { stubs },
 		});
 		expect(container).toMatchSnapshot();
 	});
+
 	it('renders replaced code diff correctly', () => {
 		const { container } = render(CodeDiff, {
 			props: {
@@ -21,9 +25,11 @@ describe('CodeDiff', () => {
 					'@@ -1,7 +1,6 @@\n-The Way that can be told of is not the eternal Way;\n-The name that can be named is not the eternal name.\nThe Nameless is the origin of Heaven and Earth;\n-The Named is the mother of all things.\n+The named is the mother of all things.\n+\nTherefore let there always be non-being,\nso we may see their subtlety,\nAnd let there always be being,\n@@ -9,3 +8,6 @@\n The two are the same,\n But after they are produced,\n they have different names.\n+They both may be called deep and profound.\n+Deeper and more profound,\n+The door of all subtleties!',
 				replaced: true,
 			},
+			global: { stubs },
 		});
 		expect(container).toMatchSnapshot();
 	});
+
 	it('renders replacing code diff correctly', () => {
 		const { container } = render(CodeDiff, {
 			props: {
@@ -32,9 +38,11 @@ describe('CodeDiff', () => {
 					'@@ -1,7 +1,6 @@\n-The Way that can be told of is not the eternal Way;\n-The name that can be named is not the eternal name.\nThe Nameless is the origin of Heaven and Earth;\n-The Named is the mother of all things.\n+The named is the mother of all things.\n+\nTherefore let there always be non-being,\nso we may see their subtlety,\nAnd let there always be being,\n@@ -9,3 +8,6 @@\n The two are the same,\n But after they are produced,\n they have different names.\n+They both may be called deep and profound.\n+Deeper and more profound,\n+The door of all subtleties!',
 				replacing: true,
 			},
+			global: { stubs },
 		});
 		expect(container).toMatchSnapshot();
 	});
+
 	it('renders error state correctly', () => {
 		const { container } = render(CodeDiff, {
 			props: {
@@ -43,6 +51,7 @@ describe('CodeDiff', () => {
 					'@@ -1,7 +1,6 @@\n-The Way that can be told of is not the eternal Way;\n-The name that can be named is not the eternal name.\nThe Nameless is the origin of Heaven and Earth;\n-The Named is the mother of all things.\n+The named is the mother of all things.\n+\nTherefore let there always be non-being,\nso we may see their subtlety,\nAnd let there always be being,\n@@ -9,3 +8,6 @@\n The two are the same,\n But after they are produced,\n they have different names.\n+They both may be called deep and profound.\n+Deeper and more profound,\n+The door of all subtleties!',
 				error: true,
 			},
+			global: { stubs },
 		});
 		expect(container).toMatchSnapshot();
 	});

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

@@ -270,16 +270,14 @@ exports[`CodeDiff > renders code diff correctly 1`] = `
     <div
       class="actions"
     >
-      <n8n-button
+      <n8n-button-stub
         data-test-id="replace-code-button"
         disabled="false"
         icon="refresh"
         loading="false"
         size="mini"
         type="primary"
-      >
+      />
-        Replace my code
-      </n8n-button>
     </div>
   </div>
 </div>
@@ -535,7 +533,7 @@ exports[`CodeDiff > renders error state correctly 1`] = `
       class="actions"
     >
       <div>
-        <n8n-icon
+        <n8n-icon-stub
           class="mr-5xs"
           color="danger"
           icon="exclamation-triangle"
@@ -801,15 +799,13 @@ exports[`CodeDiff > renders replaced code diff correctly 1`] = `
       class="actions"
     >
       <div>
-        <n8n-button
+        <n8n-button-stub
           data-test-id="undo-replace-button"
           icon="undo"
           size="mini"
           type="secondary"
-        >
+        />
-          Undo
+        <n8n-icon-stub
-        </n8n-button>
-        <n8n-icon
           class="ml-xs"
           color="success"
           icon="check"
@@ -1075,16 +1071,14 @@ exports[`CodeDiff > renders replacing code diff correctly 1`] = `
     <div
       class="actions"
     >
-      <n8n-button
+      <n8n-button-stub
         data-test-id="replace-code-button"
         disabled="false"
         icon="refresh"
         loading="true"
         size="mini"
         type="secondary"
-      >
+      />
-        Replacing...
-      </n8n-button>
     </div>
   </div>
 </div>

packages/design-system/src/components/N8nOption/Option.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { ElOption } from 'element-plus';
 
-defineProps({
+const props = defineProps({
 	...ElOption.props,
 	value: { type: [String, Number], required: true },
 });
 </script>
 
 <template>
-	<ElOption v-bind="{ ...$props, ...$attrs }" :value="value"><slot /></ElOption>
+	<ElOption v-bind="{ ...$props, ...$attrs }" :value="props.value"><slot /></ElOption>
 </template>

packages/design-system/src/components/N8nSelect/Select.vue

@@ -120,9 +120,9 @@ defineExpose({
 		<ElSelect
 			v-bind="{ ...$props, ...listeners }"
 			ref="innerSelect"
-			:model-value="modelValue ?? undefined"
+			:model-value="props.modelValue ?? undefined"
 			:size="computedSize"
-			:popper-class="popperClass"
+			:popper-class="props.popperClass"
 			:class="$style[classes]"
 		>
 			<template v-if="$slots.prefix" #prefix>

packages/editor-ui/package.json

@@ -64,7 +64,7 @@
     "luxon": "catalog:",
     "n8n-design-system": "workspace:*",
     "n8n-workflow": "workspace:*",
-    "pinia": "^2.1.6",
+    "pinia": "^2.2.4",
     "prettier": "^3.3.3",
     "qrcode.vue": "^3.3.4",
     "stream-browserify": "^3.0.0",
@@ -84,8 +84,8 @@
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",
     "@iconify/json": "^2.2.228",
-    "@pinia/testing": "^0.1.3",
+    "@pinia/testing": "^0.1.6",
-    "@sentry/vite-plugin": "^2.22.4",
+    "@sentry/vite-plugin": "^2.22.5",
     "@types/dateformat": "^3.0.0",
     "@types/file-saver": "^2.0.1",
     "@types/humanize-duration": "^3.27.1",

packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap

@@ -701,6 +701,7 @@ exports[`RunDataSchema.vue > renders schema for data 1`] = `
               <!--v-if-->
             </div>
             <input
+              checked=""
               id="set_1-hobbies"
               inert=""
               type="checkbox"
@@ -1136,6 +1137,7 @@ exports[`RunDataSchema.vue > renders schema for data 2`] = `
               <!--v-if-->
             </div>
             <input
+              checked=""
               id="set_2-hobbies"
               inert=""
               type="checkbox"
@@ -1572,6 +1574,7 @@ exports[`RunDataSchema.vue > renders schema in output pane 1`] = `
                 <!--v-if-->
               </div>
               <input
+                checked=""
                 id="output_object-0-0-hobbies"
                 inert=""
                 type="checkbox"
@@ -1963,6 +1966,7 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
                         <!--v-if-->
                       </div>
                       <input
+                        checked=""
                         id="set_1-hello world"
                         inert=""
                         type="checkbox"
@@ -2055,6 +2059,7 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
                               <!--v-if-->
                             </div>
                             <input
+                              checked=""
                               id="set_1-hello world-0"
                               inert=""
                               type="checkbox"
@@ -2138,6 +2143,7 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
                                     <!--v-if-->
                                   </div>
                                   <input
+                                    checked=""
                                     id="set_1-hello world-0-test"
                                     inert=""
                                     type="checkbox"

pnpm-workspace.yaml

@@ -32,8 +32,8 @@ catalogs:
     vite: ^5.4.8
     vitest: ^2.1.2
     vitest-mock-extended: ^2.0.2
-    vue: ^3.4.21
+    vue: ^3.5.11
-    vue-router: ^4.4.2
+    vue-router: ^4.4.5
-    vue-tsc: ^2.0.19
+    vue-tsc: ^2.1.6
     vue-markdown-render: ^2.2.1
     highlight.js: ^11.8.0