feat(editor): Workflow history [WIP]- Create workflow history item preview component (no-changelog)

[cstuncsik]

No description provided.

[github-actions]

Great PR! Please pay attention to the following items before merging:

Files matching packages/**:

• If fixing bug, added test to cover scenario.
• If addressing forum or Github issue, added link to description.

Files matching packages/**/*.ts:

• Added unit tests to cover new or updated functionality.

Files matching **/*.vue:

• Used composition API for all new components.
• Added component or unit tests to cover functionality.

Files matching packages/editor-ui/**/*.vue:

• Added E2E if adding new features.
• Used design system tokens (colors, spacings...) where possible.

Files matching packages/design-system/**/*.vue:

• Used design system tokens (colors, spacings...) where possible.
• Updated Storybook with new component or updated functionality.

Make sure to check off this list before asking for review.

[codecov]

Codecov Report

Attention: 36 lines in your changes are missing coverage. Please review.

Comparison is base (fbcd1d4) 33.40% compared to head (861239a) 33.46%.
Report is 9 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7378      +/-   ##
==========================================
+ Coverage   33.40%   33.46%   +0.05%     
==========================================
  Files        3389     3389              
  Lines      206627   206822     +195     
  Branches    22307    22316       +9     
==========================================
+ Hits        69032    69204     +172     
- Misses     136477   136501      +24     
+ Partials     1118     1117       -1     

Files	Coverage Δ
...rc/components/N8nActionDropdown/ActionDropdown.vue	90.74% <100.00%> (+0.23%)	⬆️
...em/src/components/N8nActionToggle/ActionToggle.vue	96.29% <100.00%> (+0.05%)	⬆️
...r-ui/src/components/MainHeader/WorkflowDetails.vue	48.04% <100.00%> (+0.56%)	⬆️
...components/WorkflowHistory/WorkflowHistoryList.vue	96.25% <100.00%> (-0.16%)	⬇️
...onents/WorkflowHistory/WorkflowHistoryListItem.vue	97.93% <95.23%> (+0.08%)	⬆️
...kages/editor-ui/src/components/WorkflowPreview.vue	59.44% <20.00%> (-0.40%)	⬇️
...ponents/WorkflowHistory/WorkflowHistoryContent.vue	96.06% <95.51%> (-3.94%)	⬇️
...ages/editor-ui/src/stores/workflowHistory.store.ts	44.33% <12.50%> (+1.61%)	⬆️
packages/editor-ui/src/views/WorkflowHistory.vue	66.01% <74.24%> (-0.66%)	⬇️

... and 4 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ivov]

Findings:

1. Second line crops letters at the baseline.
2. Empty workflow version breaks rendering.
3. Renaming a user is not reflected in username stored with version. Unsure if intended.
4. Version ID in workflow JSON does not match version ID in filename.
5. Opening NDV breaks rendering.
6. Selecting a line from top left corner and attempting to unselect can take multiple clicks. Happens to all three of them.
7. Having nodes under top left corner makes version info unreadable.
8. Version line overlaps version cards.
9. Tag changes should be reflected across versions?
10. Workflow settings changes should be reflected across versions?
11. Seconds are missing from displayed version. Since we do not have autosave, many users very frequently save and will so create multiple versions that are hard to tell apart based on the datetime with only minute precision.
12. There is something wrong when saving a version, e.g. in this example, I added and saved a Hacker News node but it is missing from the latest version.
13. It'd be nice to see active state when browsing versions.
14. I can lasso to copy nodes from a version. Not sure if I should be able to.
15. Attempting to open workflow history on an unsaved workflow disables the button, but does not display a tooltip explaining why it is disabled. Perhaps it should be hidden altogether for unsaved workflows.
16. The difference in shading between enabled and disabled workflow history button is too subtle for colorblind users.
17. Attempting to access the version of a workflow I do not have access to triggers this limbo state. I'd expect to see something clearer like this on authorized access.
18. After sharing a workflow with a second user, editing it causes only the second user to be in the Edited by field. In which case do we expect multiple authors to show up then?

[cstuncsik]

Fixed issues are checked

Findings:

1. Second line crops letters at the baseline. ✅
2. Empty workflow version breaks rendering.
3. Renaming a user is not reflected in username stored with version. Unsure if intended.
4. Version ID in workflow JSON does not match version ID in filename. ✅
5. Opening NDV breaks rendering. ✅
6. Selecting a line from top left corner and attempting to unselect can take multiple clicks. Happens to all three of them.
7. Having nodes under top left corner makes version info unreadable.
8. Version line overlaps version cards. ✅
9. Tag changes should be reflected across versions?
10. Workflow settings changes should be reflected across versions?
11. Seconds are missing from displayed version. Since we do not have autosave, many users very frequently save and will so create multiple versions that are hard to tell apart based on the datetime with only minute precision. ✅
12. There is something wrong when saving a version, e.g. in this example, I added and saved a Hacker News node but it is missing from the latest version.
13. It'd be nice to see active state when browsing versions.
14. I can lasso to copy nodes from a version. Not sure if I should be able to.
15. Attempting to open workflow history on an unsaved workflow disables the button, but does not display a tooltip explaining why it is disabled. Perhaps it should be hidden altogether for unsaved workflows.
16. The difference in shading between enabled and disabled workflow history button is too subtle for colorblind users.
17. Attempting to access the version of a workflow I do not have access to triggers this limbo state. I'd expect to see something clearer like this on authorized access. ✅
18. After sharing a workflow with a second user, editing it causes only the second user to be in the Edited by field. In which case do we expect multiple authors to show up then?

[ivov]

19. The NDV at version view is covered by the top bar and left-hand sidebar. This blocks the Back to canvas button, blocks the grabber notch to move the center pane, etc. Compare NDV at version view vs. NDV at execution view.
20. Canvas background is not identical to executions view. Not sure if intended.
21. Follow-up to 17 - the fix triggers two identical toasts. I expect this should redirect to an empty canvas and show it once, like when attempting to access an unshared workflow. Closing via cross on top-right corner triggers the error toast a third time.
22. Accessing a non-existing workflow using the version URL triggers a double toast. I'd expect we'd redirect to canvas and show one error notification.
23. Accessing a non-existing version leads to an all-white canvas state. I'd expect we'd redirect to canvas and show one error notification.
24. Have you tested that this works with environments?
25. Since the feature button is unlabeled, it'd be nice if hovering over the button showed a tooltip with the name of the feature.

[cstuncsik]

Checked the ones fixed

• The NDV at version view is covered by the top bar and left-hand sidebar. This blocks the Back to canvas button, blocks the grabber notch to move the center pane, etc. Compare NDV at version view vs. NDV at execution view. ✅
• Canvas background is not identical to executions view. Not sure if intended.
• Follow-up to 17 - the fix triggers two identical toasts. I expect this should redirect to an empty canvas and show it once, like when attempting to access an unshared workflow. Closing via cross on top-right corner triggers the error toast a third time. ✅
• Accessing a non-existing workflow using the version URL triggers a double toast. I'd expect we'd redirect to canvas and show one error notification. ✅
• Accessing a non-existing version leads to an all-white canvas state. I'd expect we'd redirect to canvas and show one error notification. ✅
• Have you tested that this works with environments?
• Since the feature button is unlabeled, it'd be nice if hovering over the button showed a tooltip with the name of the feature.

[cypress]

Passing run #2463 ↗︎

0

250

0

0

0

Details:

🌳 pay-818-create-workflow-history-item-preview-component 🖥️ browsers:node18.12...
Project: n8n	Commit: 861239a910
Status: Passed	Duration: 08:53 💡
Started: Oct 11, 2023 8:02 AM	Ended: Oct 11, 2023 8:11 AM

Review all test suite changes for PR #7378 ↗︎

[github-actions]

✅ All Cypress E2E specs passed

[janober]

Got released with n8n@1.11.0