feat(editor): Upgrade frontend tooling to address a few vulnerabilities

package.json

@@ -46,7 +46,7 @@
     "@ngneat/falso": "^6.4.0",
     "@types/jest": "^29.5.3",
     "@types/supertest": "^2.0.12",
-    "@vitest/coverage-v8": "^0.33.0",
+    "@vitest/coverage-v8": "^1.1.0",
     "cross-env": "^7.0.3",
     "cypress": "^12.17.2",
     "cypress-otp": "^1.0.3",
@@ -68,9 +68,9 @@
     "tsc-watch": "^6.0.4",
     "turbo": "1.10.12",
     "typescript": "*",
-    "vite": "^5.0.2",
-    "vitest": "^0.33.0",
-    "vue-tsc": "^1.8.8"
+    "vite": "^5.0.10",
+    "vitest": "^1.1.0",
+    "vue-tsc": "^1.8.25"
   },
   "pnpm": {
     "onlyBuiltDependencies": [

packages/@n8n/chat/package.json

@@ -42,7 +42,7 @@
     "n8n-design-system": "workspace:*",
     "shelljs": "^0.8.5",
     "unplugin-icons": "^0.17.0",
-    "vite-plugin-dts": "^3.6.0"
+    "vite-plugin-dts": "^3.6.4"
   },
   "repository": {
     "type": "git",

packages/design-system/package.json

@@ -38,21 +38,21 @@
     "@storybook/testing-library": "^0.2.2",
     "@storybook/vue3": "^7.5.2",
     "@storybook/vue3-vite": "^7.5.2",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@testing-library/vue": "^7.0.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/user-event": "^14.5.1",
+    "@testing-library/vue": "^8.0.1",
     "@tsconfig/node18": "^18.2.2",
-    "@types/jsdom": "^21.1.1",
+    "@types/jsdom": "^21.1.6",
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-emoji": "^2.0.2",
     "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/sanitize-html": "^2.9.0",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/test-utils": "^2.4.1",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vue/test-utils": "^2.4.3",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.14",
     "core-js": "^3.31.0",
-    "jsdom": "21.1.0",
+    "jsdom": "^23.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.64.1",

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

@@ -1,15 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`N8NActionBox > should render correctly 1`] = `
-"<div class=\\"n8n-action-box container\\" data-test-id=\\"action-box\\">
-  <div class=\\"emoji\\">😿</div>
-  <div class=\\"heading\\">
-    <n8n-heading-stub align=\\"center\\" tag=\\"span\\" bold=\\"false\\" size=\\"xlarge\\"></n8n-heading-stub>
+"<div class="n8n-action-box container" data-test-id="action-box">
+  <div class="emoji">😿</div>
+  <div class="heading">
+    <n8n-heading-stub align="center" tag="span" bold="false" size="xlarge"></n8n-heading-stub>
   </div>
-  <div class=\\"description\\">
-    <n8n-text-stub color=\\"text-base\\" bold=\\"false\\" size=\\"medium\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub>
+  <div class="description">
+    <n8n-text-stub color="text-base" bold="false" size="medium" compact="false" tag="span"></n8n-text-stub>
   </div>
-  <n8n-button-stub label=\\"Do something\\" type=\\"primary\\" size=\\"large\\" loading=\\"false\\" disabled=\\"false\\" outline=\\"false\\" text=\\"false\\" block=\\"false\\" active=\\"false\\" square=\\"false\\" element=\\"button\\"></n8n-button-stub>
+  <n8n-button-stub label="Do something" type="primary" size="large" loading="false" disabled="false" outline="false" text="false" block="false" active="false" square="false" element="button"></n8n-button-stub>
   <!--v-if-->
 </div>"
 `;

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

@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`components > N8nActionDropdown > should render custom styling correctly 1`] = `
-"<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=\\"[object Object]\\" disabled=\\"false\\" role=\\"menu\\" teleported=\\"true\\"></el-dropdown-stub>
+"<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="[object Object]" disabled="false" role="menu" teleported="true"></el-dropdown-stub>
 </div>"
 `;
 
 exports[`components > N8nActionDropdown > should render default styling correctly 1`] = `
-"<div class=\\"action-dropdown-container actionDropdownContainer\\" teleported=\\"false\\">
-  <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=\\"[object Object]\\" disabled=\\"false\\" role=\\"menu\\" teleported=\\"true\\"></el-dropdown-stub>
+"<div class="action-dropdown-container actionDropdownContainer" teleported="false">
+  <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="[object Object]" disabled="false" role="menu" teleported="true"></el-dropdown-stub>
 </div>"
 `;

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

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`components > N8nBadge > props > should render default theme correctly 1`] = `"<span class=\\"n8n-badge default\\"><n8n-text-stub bold=\\"true\\" size=\\"large\\" compact=\\"true\\" tag=\\"span\\"></n8n-text-stub></span>"`;
+exports[`components > N8nBadge > props > should render default theme correctly 1`] = `"<span class="n8n-badge default"><n8n-text-stub bold="true" size="large" compact="true" tag="span"></n8n-text-stub></span>"`;
 
-exports[`components > N8nBadge > props > should render secondary theme correctly 1`] = `"<span class=\\"n8n-badge secondary\\"><n8n-text-stub bold=\\"false\\" size=\\"medium\\" compact=\\"true\\" tag=\\"span\\"></n8n-text-stub></span>"`;
+exports[`components > N8nBadge > props > should render secondary theme correctly 1`] = `"<span class="n8n-badge secondary"><n8n-text-stub bold="false" size="medium" compact="true" tag="span"></n8n-text-stub></span>"`;
 
-exports[`components > N8nBadge > props > should render with default values correctly 1`] = `"<span class=\\"n8n-badge default\\"><n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"true\\" tag=\\"span\\"></n8n-text-stub></span>"`;
+exports[`components > N8nBadge > props > should render with default values correctly 1`] = `"<span class="n8n-badge default"><n8n-text-stub bold="false" size="small" compact="true" tag="span"></n8n-text-stub></span>"`;

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

@@ -1,17 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button class=\\"button button primary medium withIcon\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub></span><span>Button</span></button>"`;
+exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button class="button button primary medium withIcon" aria-live="polite"><span class="icon"><n8n-icon-stub icon="plus-circle" size="medium" spin="false"></n8n-icon-stub></span><span>Button</span></button>"`;
 
-exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button class=\\"button button primary medium loading withIcon\\" disabled=\\"\\" aria-busy=\\"true\\" aria-live=\\"polite\\"><span class=\\"icon\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></button>"`;
+exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button class="button button primary medium loading withIcon" disabled="" aria-busy="true" aria-live="polite"><span class="icon"><n8n-spinner-stub size="medium" type="dots"></n8n-spinner-stub></span><span>Button</span></button>"`;
 
 exports[`components > N8nButton > props > square > should render square button 1`] = `
-"<button class=\\"button button primary medium square\\" aria-live=\\"polite\\">
+"<button class="button button primary medium square" aria-live="polite">
   <!--v-if--><span>48</span>
 </button>"
 `;
 
 exports[`components > N8nButton > should render correctly 1`] = `
-"<button class=\\"button button primary medium\\" aria-live=\\"polite\\">
+"<button class="button button primary medium" aria-live="polite">
   <!--v-if--><span>Button</span>
 </button>"
 `;

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

@@ -1,79 +1,79 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`components > N8nCallout > should render additional slots correctly 1`] = `
-"<div class=\\"n8n-callout callout custom round\\" role=\\"alert\\">
-  <div class=\\"messageSection\\">
-    <div class=\\"icon\\">
-      <n8n-icon-stub icon=\\"code-branch\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
+"<div class="n8n-callout callout custom round" role="alert">
+  <div class="messageSection">
+    <div class="icon">
+      <n8n-icon-stub icon="code-branch" size="medium" spin="false"></n8n-icon-stub>
     </div>
-    <n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp; <n8n-link-stub size=\\"small\\"></n8n-link-stub>
+    <n8n-text-stub bold="false" size="small" compact="false" tag="span"></n8n-text-stub> &nbsp; <n8n-link-stub size="small"></n8n-link-stub>
   </div>
-  <n8n-link-stub theme=\\"secondary\\" size=\\"small\\" bold=\\"true\\" underline=\\"true\\" to=\\"https://n8n.io\\"></n8n-link-stub>
+  <n8n-link-stub theme="secondary" size="small" bold="true" underline="true" to="https://n8n.io"></n8n-link-stub>
 </div>"
 `;
 
 exports[`components > N8nCallout > should render custom theme correctly 1`] = `
-"<div class=\\"n8n-callout callout custom round\\" role=\\"alert\\">
-  <div class=\\"messageSection\\">
-    <div class=\\"icon\\">
-      <n8n-icon-stub icon=\\"code-branch\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
+"<div class="n8n-callout callout custom round" role="alert">
+  <div class="messageSection">
+    <div class="icon">
+      <n8n-icon-stub icon="code-branch" size="medium" spin="false"></n8n-icon-stub>
     </div>
-    <n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
+    <n8n-text-stub bold="false" size="small" compact="false" tag="span"></n8n-text-stub> &nbsp;
   </div>
 </div>"
 `;
 
 exports[`components > N8nCallout > should render danger theme correctly 1`] = `
-"<div class=\\"n8n-callout callout danger round\\" role=\\"alert\\">
-  <div class=\\"messageSection\\">
-    <div class=\\"icon\\">
-      <n8n-icon-stub icon=\\"exclamation-triangle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
+"<div class="n8n-callout callout danger round" role="alert">
+  <div class="messageSection">
+    <div class="icon">
+      <n8n-icon-stub icon="exclamation-triangle" size="medium" spin="false"></n8n-icon-stub>
     </div>
-    <n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
+    <n8n-text-stub bold="false" size="small" compact="false" tag="span"></n8n-text-stub> &nbsp;
   </div>
 </div>"
 `;
 
 exports[`components > N8nCallout > should render info theme correctly 1`] = `
-"<div class=\\"n8n-callout callout info round\\" role=\\"alert\\">
-  <div class=\\"messageSection\\">
-    <div class=\\"icon\\">
-      <n8n-icon-stub icon=\\"info-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
+"<div class="n8n-callout callout info round" role="alert">
+  <div class="messageSection">
+    <div class="icon">
+      <n8n-icon-stub icon="info-circle" size="medium" spin="false"></n8n-icon-stub>
     </div>
-    <n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
+    <n8n-text-stub bold="false" size="small" compact="false" tag="span"></n8n-text-stub> &nbsp;
   </div>
 </div>"
 `;
 
 exports[`components > N8nCallout > should render secondary theme correctly 1`] = `
-"<div class=\\"n8n-callout callout secondary round\\" role=\\"alert\\">
-  <div class=\\"messageSection\\">
-    <div class=\\"icon\\">
-      <n8n-icon-stub icon=\\"info-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
+"<div class="n8n-callout callout secondary round" role="alert">
+  <div class="messageSection">
+    <div class="icon">
+      <n8n-icon-stub icon="info-circle" size="medium" spin="false"></n8n-icon-stub>
     </div>
-    <n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
+    <n8n-text-stub bold="false" size="small" compact="false" tag="span"></n8n-text-stub> &nbsp;
   </div>
 </div>"
 `;
 
 exports[`components > N8nCallout > should render success theme correctly 1`] = `
-"<div class=\\"n8n-callout callout success round\\" role=\\"alert\\">
-  <div class=\\"messageSection\\">
-    <div class=\\"icon\\">
-      <n8n-icon-stub icon=\\"check-circle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
+"<div class="n8n-callout callout success round" role="alert">
+  <div class="messageSection">
+    <div class="icon">
+      <n8n-icon-stub icon="check-circle" size="medium" spin="false"></n8n-icon-stub>
     </div>
-    <n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
+    <n8n-text-stub bold="false" size="small" compact="false" tag="span"></n8n-text-stub> &nbsp;
   </div>
 </div>"
 `;
 
 exports[`components > N8nCallout > should render warning theme correctly 1`] = `
-"<div class=\\"n8n-callout callout warning round\\" role=\\"alert\\">
-  <div class=\\"messageSection\\">
-    <div class=\\"icon\\">
-      <n8n-icon-stub icon=\\"exclamation-triangle\\" size=\\"medium\\" spin=\\"false\\"></n8n-icon-stub>
+"<div class="n8n-callout callout warning round" role="alert">
+  <div class="messageSection">
+    <div class="icon">
+      <n8n-icon-stub icon="exclamation-triangle" size="medium" spin="false"></n8n-icon-stub>
     </div>
-    <n8n-text-stub bold=\\"false\\" size=\\"small\\" compact=\\"false\\" tag=\\"span\\"></n8n-text-stub> &nbsp;
+    <n8n-text-stub bold="false" size="small" compact="false" tag="span"></n8n-text-stub> &nbsp;
   </div>
 </div>"
 `;

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

@@ -1,24 +1,24 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`components > N8nCard > should render correctly 1`] = `
-"<div class=\\"card\\">
+"<div class="card">
   <!--v-if-->
-  <div class=\\"content\\">
+  <div class="content">
     <!--v-if-->
-    <div class=\\"body\\">This is a card.</div>
+    <div class="body">This is a card.</div>
     <!--v-if-->
   </div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`components > N8nCard > should render correctly with header and footer 1`] = `
-"<div class=\\"card\\">
+"<div class="card">
   <!--v-if-->
-  <div class=\\"content\\">
-    <div class=\\"header\\">Header</div>
-    <div class=\\"body\\">This is a card.</div>
-    <div class=\\"footer\\">Footer</div>
+  <div class="content">
+    <div class="header">Header</div>
+    <div class="body">This is a card.</div>
+    <div class="footer">Footer</div>
   </div>
   <!--v-if-->
 </div>"

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

@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`N8NCircleLoader > should render correctly 1`] = `
-"<div class=\\"progress-circle\\"><svg class=\\"progress-ring\\" width=\\"60\\" height=\\"60\\">
-    <circle class=\\"progressRingCircle\\" stroke-width=\\"10\\" stroke=\\"#DCDFE6\\" fill=\\"transparent\\" r=\\"20\\" cx=\\"30\\" cy=\\"30\\"></circle>
-    <circle class=\\"progressRingCircle\\" stroke=\\"#5C4EC2\\" stroke-width=\\"10\\" fill=\\"transparent\\" r=\\"20\\" cx=\\"30\\" cy=\\"30\\" style=\\"stroke-dasharray: 125.66370614359172; stroke-dashoffset: 72.8849495632832;\\"></circle>
+"<div class="progress-circle"><svg class="progress-ring" width="60" height="60">
+    <circle class="progressRingCircle" stroke-width="10" stroke="#DCDFE6" fill="transparent" r="20" cx="30" cy="30"></circle>
+    <circle class="progressRingCircle" stroke="#5C4EC2" stroke-width="10" fill="transparent" r="20" cx="30" cy="30" style="stroke-dasharray: 125.66370614359172; stroke-dashoffset: 72.8849495632832;"></circle>
   </svg></div>"
 `;