fix(editor): Track changes from iframe and adjust history actions #23400
Conversation
BundleMonFiles added (2)
Total files change +255.73KB Groups added (2)
Final result: ✅ View report in BundleMon website ➡️ |
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
|
E2E Tests: n8n tests passed after 8m 25.5s Run Details
Groups
This message was posted automatically by
currents.dev | Integration Settings
|
There was a problem hiding this comment.
2 issues found across 5 files
Prompt for AI agents (all 2 issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryActions.vue">
<violation number="1" location="packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryActions.vue:90">
P2: Rule violated: **Prefer Typeguards over Type casting**
Avoid using `as` for type narrowing. Since `value` comes from the action toggle component which should emit valid action types, use a type annotation on the parameter instead of casting inside the function body.</violation>
</file>
<file name="packages/frontend/editor-ui/src/app/components/WorkflowPreview.vue">
<violation number="1" location="packages/frontend/editor-ui/src/app/components/WorkflowPreview.vue:185">
P2: Rule violated: **Prefer Typeguards over Type casting**
Using `as IframeMessage` for type narrowing on `JSON.parse()` result. Prefer a type guard to validate the structure before using it, or at minimum check that `json.command` is a string before accessing it.</violation>
</file>
Reply to cubic to teach it or ask questions. Re-run a review with @cubic-dev-ai review this PR
| const onAction = (value: string) => { | ||
| emit('action', { | ||
| action: value as WorkflowHistoryActionTypes[number], |
There was a problem hiding this comment.
P2: Rule violated: Prefer Typeguards over Type casting
Avoid using as for type narrowing. Since value comes from the action toggle component which should emit valid action types, use a type annotation on the parameter instead of casting inside the function body.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/frontend/editor-ui/src/features/workflows/workflowHistory/components/WorkflowHistoryActions.vue, line 90:
<comment>Avoid using `as` for type narrowing. Since `value` comes from the action toggle component which should emit valid action types, use a type annotation on the parameter instead of casting inside the function body.</comment>
<file context>
@@ -0,0 +1,241 @@
+
+const onAction = (value: string) => {
+ emit('action', {
+ action: value as WorkflowHistoryActionTypes[number],
+ id: props.workflowVersion.versionId,
+ data: {
</file context>
| return; | ||
| } | ||
| try { | ||
| const json = JSON.parse(data) as IframeMessage; |
There was a problem hiding this comment.
P2: Rule violated: Prefer Typeguards over Type casting
Using as IframeMessage for type narrowing on JSON.parse() result. Prefer a type guard to validate the structure before using it, or at minimum check that json.command is a string before accessing it.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/frontend/editor-ui/src/app/components/WorkflowPreview.vue, line 185:
<comment>Using `as IframeMessage` for type narrowing on `JSON.parse()` result. Prefer a type guard to validate the structure before using it, or at minimum check that `json.command` is a string before accessing it.</comment>
<file context>
@@ -178,6 +159,38 @@ const onError = () => {
+ return;
+ }
+ try {
+ const json = JSON.parse(data) as IframeMessage;
+ if (json.command in commandHandlers) {
+ commandHandlers[json.command](json);
</file context>
MiloradFilipovic
left a comment
There was a problem hiding this comment.
Nice, kudos for extracting it to a separate component. I left a few comments and I generally agree with AI review (using typeguards)
| interface IframeMessage { | ||
| command: string; | ||
| width?: number; |
There was a problem hiding this comment.
The name IframeMessage suggests this is a generic iframe message but it has focus panel-specific properties. I suggest either renaming to FocusPanelMessage or use generic payload property to transfer data.
| emit('close'); | ||
| }; | ||
| interface IframeMessage { |
There was a problem hiding this comment.
Nit: Any reason why this is an interface and CommandHandler is a type? Also, we could move these to the top of the file, they are hard to spot in this place
Summary
The workflow history actions render changes based on the focus panel. This enables users to view the focus panel and close it if not needed.
https://www.loom.com/share/656d82235546495986ef268da0dfb382
Related Linear tickets, Github issues, and Community forum posts
https://linear.app/n8n/issue/ADO-4557/bug-focus-tab-not-showing-up-in-workflow-history
Review / Merge checklist
release/backport(if the PR is an urgent fix that needs to be backported)