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

cstuncsik · 2023-10-09T05:10:47Z

No description provided.

github-actions · 2023-10-09T05:11:01Z

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.

…flow-history-item-preview-component # Conflicts: # packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue # packages/editor-ui/src/views/WorkflowHistory.vue

codecov · 2023-10-09T13:13:41Z

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.

…ght 30px).

…d workflow history list item component for better reuse

… of github.com:n8n-io/n8n into pay-818-create-workflow-history-item-preview-component

…flow-history-item-preview-component

ivov

Findings:

Second line crops letters at the baseline.
Empty workflow version breaks rendering.
Renaming a user is not reflected in username stored with version. Unsure if intended.
Version ID in workflow JSON does not match version ID in filename.
Opening NDV breaks rendering.
Selecting a line from top left corner and attempting to unselect can take multiple clicks. Happens to all three of them.
Having nodes under top left corner makes version info unreadable.
Version line overlaps version cards.
Tag changes should be reflected across versions?
Workflow settings changes should be reflected across versions?
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.
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.
It'd be nice to see active state when browsing versions.
I can lasso to copy nodes from a version. Not sure if I should be able to.
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.
The difference in shading between enabled and disabled workflow history button is too subtle for colorblind users.
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.
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:

Second line crops letters at the baseline. ✅

Empty workflow version breaks rendering.

Renaming a user is not reflected in username stored with version. Unsure if intended.

Version ID in workflow JSON does not match version ID in filename. ✅

Opening NDV breaks rendering. ✅

Selecting a line from top left corner and attempting to unselect can take multiple clicks. Happens to all three of them.

Having nodes under top left corner makes version info unreadable.

Version line overlaps version cards. ✅

Tag changes should be reflected across versions?

Workflow settings changes should be reflected across versions?

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. ✅

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.

It'd be nice to see active state when browsing versions.

I can lasso to copy nodes from a version. Not sure if I should be able to.

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.

The difference in shading between enabled and disabled workflow history button is too subtle for colorblind users.

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. ✅

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

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.

packages/editor-ui/src/stores/workflowHistory.store.ts

packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue

… in URL

cstuncsik · 2023-10-11T07:45:07Z

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 · 2023-10-11T08:11:53Z

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 · 2023-10-11T08:12:03Z

✅ All Cypress E2E specs passed

janober · 2023-10-11T13:57:19Z

Got released with n8n@1.11.0

* master: fix(core): Fix ignoring crashed executions without event msgs (#7368) ci: Enable ARM64 builds for beta images (no-changelog) (#7403) 🚀 Release 1.11.0 (#7402) fix(editor): Sanitize HTML binary-data before rendering in the UI (#7400) fix(core): Fix error on missing paired item data (#7399) feat(editor): Workflow history [WIP]- Create workflow history item preview component (no-changelog) (#7378) feat(Item Lists Node): Split merge binary data (#7297) fix(core): Missing pairing info (#7326) fix(Webhook Node): Backward compatible form-data parsing for non-array files (#7385)

feat(editor): Load workflow history version to canvas

74bf12f

n8n-assistant bot added n8n team Authored by the n8n team ui Enhancement in /editor-ui or /design-system labels Oct 9, 2023

cstuncsik added 2 commits October 9, 2023 14:37

fix(editor): Reuse list item card in content area

fe2fb56

Merge remote-tracking branch 'origin/master' into pay-818-create-work…

afbf505

…flow-history-item-preview-component # Conflicts: # packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryListItem.vue # packages/editor-ui/src/views/WorkflowHistory.vue

gandreini and others added 6 commits October 9, 2023 17:13

Version button spacing and hover. ellipsis button hover and size (hei…

39ce734

…ght 30px).

fix(editor): Adding slots to action toggle design system component an…

1a6af1b

…d workflow history list item component for better reuse

Merge branch 'pay-818-create-workflow-history-item-preview-component'…

9c07242

… of github.com:n8n-io/n8n into pay-818-create-workflow-history-item-preview-component

Merge remote-tracking branch 'origin/master' into pay-818-create-work…

48020aa

…flow-history-item-preview-component

fix(editor): Update content data styles

b384b8e

fix(editor): Add tests

2601cd8

cstuncsik requested review from krynble and ivov October 10, 2023 08:06

ivov reviewed Oct 10, 2023

View reviewed changes

fix(editor): Address review results

ccb1299

cstuncsik commented Oct 10, 2023

View reviewed changes

cstuncsik added 4 commits October 10, 2023 15:44

fix(editor): Adding last version on top of the list after restoring

8005058

fix(editor): Remove errors from console in unit tests

b667262

fix(editor): Remove errors from console in unit tests

155aae3

fix(editor): Increase workflow history list item clickable area

6767520

ivov reviewed Oct 10, 2023

View reviewed changes

packages/editor-ui/src/stores/workflowHistory.store.ts Outdated Show resolved Hide resolved

packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue Outdated Show resolved Hide resolved

cstuncsik added 5 commits October 10, 2023 21:22

fix(editor): Prevent repeated error toasts

7400029

fix(editor): Prevent overlapping of NDV opened from iframe

143e7cc

fix(editor): Remove commented out style

dbc5c92

fix(editor): Use formatted date in downloadable file name

c9a74b3

fix(editor): Show list if everything is correct except the version ID…

861239a

… in URL

cstuncsik requested a review from ivov October 11, 2023 07:18

krynble approved these changes Oct 11, 2023

View reviewed changes

cstuncsik merged commit 53c3379 into master Oct 11, 2023
55 checks passed

cstuncsik deleted the pay-818-create-workflow-history-item-preview-component branch October 11, 2023 08:13

janober added the Released label Oct 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

cstuncsik commented Oct 9, 2023

github-actions bot commented Oct 9, 2023 •

edited

Loading

codecov bot commented Oct 9, 2023 •

edited

Loading

ivov left a comment •

edited

Loading

cstuncsik left a comment

ivov left a comment •

edited

Loading

cstuncsik commented Oct 11, 2023

cypress bot commented Oct 11, 2023

github-actions bot commented Oct 11, 2023

janober commented Oct 11, 2023

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

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

Conversation

cstuncsik commented Oct 9, 2023

github-actions bot commented Oct 9, 2023 • edited Loading

codecov bot commented Oct 9, 2023 • edited Loading

Codecov Report

ivov left a comment • edited Loading

Choose a reason for hiding this comment

cstuncsik left a comment

Choose a reason for hiding this comment

ivov left a comment • edited Loading

Choose a reason for hiding this comment

cstuncsik commented Oct 11, 2023

cypress bot commented Oct 11, 2023

Passing run #2463 ↗︎

Review all test suite changes for PR #7378 ↗︎

github-actions bot commented Oct 11, 2023

janober commented Oct 11, 2023

github-actions bot commented Oct 9, 2023 •

edited

Loading

codecov bot commented Oct 9, 2023 •

edited

Loading

ivov left a comment •

edited

Loading

ivov left a comment •

edited

Loading