fix: Fix Chromatic workflow trigger and make failures block merging (no-changelog) (#25396)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

.github/workflows/test-visual-chromatic.yml

@@ -25,7 +25,7 @@ jobs:
               - 'packages/frontend/@n8n/design-system/**'
               - 'packages/frontend/@n8n/chat/**'
               - 'packages/frontend/@n8n/storybook/**'
-              - '.github/workflows/test-visual-storybook.yml'
+              - '.github/workflows/test-visual-chromatic.yml'
     outputs:
       has_changes: ${{ steps.changed.outputs.design_system || 'false' }}
 
@@ -55,9 +55,9 @@ jobs:
       - name: Publish to Chromatic
         uses: chromaui/action@1cfa065cbdab28f6ca3afaeb3d761383076a35aa # v11
         id: chromatic_tests
-        continue-on-error: true
         with:
           workingDir: packages/frontend/@n8n/storybook
+          buildScriptName: build
           autoAcceptChanges: 'master'
           skip: 'release/**'
           onlyChanged: true
@@ -65,7 +65,7 @@ jobs:
           exitZeroOnChanges: false
 
       - name: Success comment
-        if: steps.chromatic_tests.outcome == 'success' && github.ref != 'refs/heads/master'
+        if: always() && steps.chromatic_tests.outcome == 'success' && github.ref != 'refs/heads/master'
         uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043 # v4.0.0
         with:
           issue-number: ${{ github.event.pull_request.number }}
@@ -75,7 +75,7 @@ jobs:
             :white_check_mark: No visual regressions found.
 
       - name: Fail comment
-        if: steps.chromatic_tests.outcome != 'success' && github.ref != 'refs/heads/master'
+        if: always() && steps.chromatic_tests.outcome == 'failure' && github.ref != 'refs/heads/master'
         uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043 # v4.0.0
         with:
           issue-number: ${{ github.event.pull_request.number }}

packages/frontend/@n8n/storybook/package.json

@@ -38,6 +38,7 @@
     "typescript": "catalog:",
     "unplugin-icons": "catalog:frontend",
     "vite": "catalog:",
+    "vite-svg-loader": "catalog:frontend",
     "vitest": "catalog:",
     "vue-tsc": "catalog:frontend"
   },

packages/frontend/@n8n/storybook/vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import icons from 'unplugin-icons/vite';
+import svgLoader from 'vite-svg-loader';
 import path from 'path';
 
 // https://vite.dev/config/
@@ -11,6 +12,21 @@ export default defineConfig({
 			compiler: 'vue3',
 			autoInstall: true,
 		}),
+		svgLoader({
+			svgoConfig: {
+				plugins: [
+					{
+						name: 'preset-default',
+						params: {
+							overrides: {
+								cleanupIds: false,
+								removeViewBox: false,
+							},
+						},
+					},
+				],
+			},
+		}),
 	],
 	resolve: {
 		alias: [

packages/frontend/editor-ui/package.json

@@ -140,7 +140,7 @@
     "vite-plugin-istanbul": "^7.2.0",
     "vite-plugin-node-polyfills": "^0.24.0",
     "vite-plugin-static-copy": "2.2.0",
-    "vite-svg-loader": "5.1.0",
+    "vite-svg-loader": "catalog:frontend",
     "vitest": "catalog:",
     "vitest-mock-extended": "catalog:",
     "vue-tsc": "catalog:frontend",

pnpm-lock.yaml

@@ -242,6 +242,9 @@ catalogs:
     unplugin-icons:
       specifier: ^0.19.0
       version: 0.19.0
+    vite-svg-loader:
+      specifier: 5.1.0
+      version: 5.1.0
     vue:
       specifier: ^3.5.13
       version: 3.5.26
@@ -2867,6 +2870,9 @@ importers:
       vite:
         specifier: 'catalog:'
         version: rolldown-vite@7.3.1(@types/node@20.19.21)(esbuild@0.25.10)(jiti@2.6.1)(sass@1.89.2)(terser@5.16.1)(tsx@4.19.3)
+      vite-svg-loader:
+        specifier: catalog:frontend
+        version: 5.1.0(vue@3.5.26(typescript@5.9.2))
       vitest:
         specifier: 'catalog:'
         version: 3.1.3(@types/debug@4.1.12)(@types/node@20.19.21)(jiti@2.6.1)(jsdom@23.0.1(bufferutil@4.0.9)(utf-8-validate@5.0.10))(lightningcss@1.30.2)(sass@1.89.2)(terser@5.16.1)(tsx@4.19.3)
@@ -3223,7 +3229,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0(rolldown-vite@7.3.1(@types/node@20.19.21)(esbuild@0.25.10)(jiti@2.6.1)(sass@1.89.2)(terser@5.16.1)(tsx@4.19.3))
       vite-svg-loader:
-        specifier: 5.1.0
+        specifier: catalog:frontend
         version: 5.1.0(vue@3.5.26(typescript@5.9.2))
       vitest:
         specifier: 'catalog:'
@@ -28386,7 +28392,7 @@ snapshots:
       cheerio-select: 2.1.0
       dom-serializer: 2.0.0
       domhandler: 5.0.3
-      domutils: 3.1.0
+      domutils: 3.2.2
       htmlparser2: 8.0.2
       parse5: 7.1.2
       parse5-htmlparser2-tree-adapter: 7.0.0
@@ -28908,7 +28914,7 @@ snapshots:
       boolbase: 1.0.0
       css-what: 6.1.0
       domhandler: 5.0.3
-      domutils: 3.1.0
+      domutils: 3.2.2
       nth-check: 2.1.1
 
   css-to-react-native@3.2.0:

pnpm-workspace.yaml

@@ -97,6 +97,7 @@ catalogs:
     highlight.js: 11.8.0
     pinia: ^2.2.4
     unplugin-icons: ^0.19.0
+    vite-svg-loader: 5.1.0
     vue: ^3.5.13
     vue-i18n: ^11.1.2
     vue-markdown-render: ^2.2.1