From d833345092baf3c12828a5a7680c9fb8555d2c57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= Date: Wed, 26 Oct 2022 10:02:56 +0200 Subject: [PATCH] feat(editor): implement executions preview via the new executions tab in node view (#4311) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ Added main header tabs with current workflow execution count * ⚡ feat(editor): header tab navigation (no-changelog) (#4244) * ✨ Adding current workflow execution list to the Vuex store * ✨ Updating current workflow executions after running a workflow from the node view * ✨ Keeping the tab view content alive when switching tabs in main header * ✨ Updating main header controls to work with current workflow regardless of active tab * 🐛 Fixing a bug with previous WF executions still visible after creating a new WF * ⚡ Updating saved status when new WF is created * ✨ Implemented initial version of execution perview * ✨ Keeping the WF view alive when switching to executions tab in new navigation * ✨ Implemented executions landing page * ✨ Simplifying node view navigation * ✨ Updating executions view zoom and selection to work with the new layout * ✨ Using N8nRadioButtons component for main header tabs * 💄 Implementing executions page states. Minor refactoring. * ⚡ Merge conflict fixes and pieces of code that were left behind * ⚡ Fixing layout and scrolling changes introduced after sync with master branch * ⚡ Removing keep-alive from node view which broke template opening and some more leftover code * ✔️ Fixing linting errors * ✔️ One more lint error * ⚡ Implemented executions preview using iframes * ⚡ Fixing zoom menu positioning in iframe and adding different loading types to workflow preview * ⚡ Fixing navigation to and from WF templates and template loading * ⚡ Updating and fixing navigation to and from node view * 👌 Addressing previous PR comments * 🐛 Fixing infinite loading when saving a new workflow * 🐛 Handling opening already opened WF when not on Node view * ✨ Implemented empty states for executions view * ⚡ Adding execute button shake flag to the store so it doesn't mess up navigation by modifying route params * 💄 Started adding new styles to execution sidebar * 💄 Adding hover style for execution list * ⚡ Added ExecutionsCard component and added executions helper mixin * ✔️ Fixing leftover conflict * ✔️ One more conflict * ✨ Implemented retry execution menu and manual execution icon. Other minor updates * ✨ Implemented executions filtering * 💄 Updating running executions details in preview * ⚡ Added info accordion to executions sidebar * ✨ Implemented auto-refresh for executions sidebar * 💄 Adding running execution landing page, minor fixes * 💄 General refactoring * ✔️ Adding leftover conflict changes * ✔️ Updating `InfoTip` component test snapshots * ✔️ Fixing linting error * ✔️ Fixing lint errors in vuex store module * 👌 Started addressing review feedback * ⚡ Updating executions preview behaviour when filters are applied * 🐛 Fixing a bug where nodes and connections disappear if something is saved from executions view before loading WF in the main NodeView * 🐛 Fixing pasting in executions view and wrong workflow activator state * ⚡ Improved workflow switching and navigation, updated error message when trying to paste into execution * ⚡ Some more navigation updates * 💄 Fixing tab centering, execution filter button layout, added auto-refresh checkbox * 🐛 Fixing a bug when saving workflow using save button * 💄 Addressing design feedback, added delete execution button * ⚡ Moving main execution logic to the root executions view * ⚡ Implemented execution delete function * ⚡ Updating how switching tabs for new unsaved workflows work * ⚡ Remembering active execution when switching tabs * 💄 Addressing design feedback regarding info accordion * 💄 Updating execution card styling * ⚡ Resetting executions when creating new workflow * Fixing lint error * ⚡ Hiding executions preview is active execution is not in the results. Updated execution list spacing * ⚡ Fixing navigation to and from templates and executions * ⚡ Implemented execution lazy loading and added new background to execution preview * 💄 Disabling import when on executions tab * ⚡ Handling opening executions from different workflow * ⚡ Updating active execution on route change * ⚡ Updating execution tab detection * ⚡ Simplifying and updating navigation. Adding new route for new workflows * ⚡ Updating workflow saving logic to work with new routes * 🐛 Fixing a bug when returning to executions from different workflow * 💄 Updating executions info accordion and node details view modal in execution preview * 💄 Updating workflow activated modal to point to new executions view * ⚡ Implemented opening new executions view from execution modal * ⚡ Handling jsplumb init errors, updating unknown executions style * ⚡ Updating main sidebar after syncing branch * ⚡ Opening new trigger menu from executions view * 💄 Updating sidebar resize behaviour * ✔️ Fixing lint errors * ⚡ Loading executions when mounting executions view * ⚡ Resetting execution data when creating a new workflow * 💄 Minor wording updates * ⚡ Not reloading node view when new workflows are saved * Removing leftover console log * 🐛 Fixed a bug with save dialog not appearing when leaving executions tab * ⚡ Updating manual execution settings detection in info accordion * 💄 Addressing UI issues found during bug bash * Fixing workflow saving logic * ⚡ Preventing navigation if clicked tab is already opened * ⚡ Updating lazy loading behaviour * ⚡ Updating delete executions flow * ⚡ Added retry executions button to the execution preview * ⚡ Adding empty execution state, updating trigger detection logic, removing listeners when node view is not active * 💄 Cosmetic code improvements * ⚡ Trying the performance fix for nodeBase * ⚡ Removing the `NodeBase`fix * 🐛 Fixing a bug when saving the current workflow * 👌 Addressing code review feedback --- package-lock.json | 24 +- .../N8nActionDropdown/ActionDropdown.vue | 10 +- .../N8nInfoAccordion/InfoAccordion.vue | 64 ++- .../__snapshots__/InfoTip.spec.ts.snap | 4 +- .../N8nRadioButtons/RadioButton.vue | 1 + .../N8nRadioButtons/RadioButtons.vue | 10 +- .../src/components/N8nText/Text.vue | 6 +- packages/editor-ui/src/App.vue | 12 +- packages/editor-ui/src/Interface.ts | 16 +- packages/editor-ui/src/api/workflows.ts | 8 + .../src/components/ActivationModal.vue | 16 +- .../src/components/ExecutionsList.vue | 36 +- .../ExecutionsView/ExecutionCard.vue | 206 +++++++ .../ExecutionsView/ExecutionPreview.vue | 151 +++++ .../ExecutionsInfoAccordion.vue | 174 ++++++ .../ExecutionsView/ExecutionsLandingPage.vue | 96 ++++ .../ExecutionsView/ExecutionsSidebar.vue | 270 +++++++++ .../ExecutionsView/ExecutionsView.vue | 517 ++++++++++++++++++ .../src/components/MainHeader/MainHeader.vue | 100 +++- .../src/components/MainHeader/TabBar.vue | 70 +++ .../components/MainHeader/WorkflowDetails.vue | 33 +- .../editor-ui/src/components/MainSidebar.vue | 19 +- packages/editor-ui/src/components/Node.vue | 8 +- .../src/components/WorkflowPreview.vue | 100 +++- .../src/components/WorkflowSettings.vue | 6 +- packages/editor-ui/src/components/helpers.ts | 21 +- .../components/mixins/executionsHelpers.ts | 70 +++ .../src/components/mixins/genericHelpers.ts | 2 +- .../components/mixins/globalLinkActions.ts | 6 +- .../src/components/mixins/mouseSelect.ts | 4 +- .../src/components/mixins/nodeBase.ts | 8 +- .../src/components/mixins/pushConnection.ts | 2 +- .../src/components/mixins/workflowHelpers.ts | 5 +- .../src/components/mixins/workflowRun.ts | 4 +- packages/editor-ui/src/constants.ts | 8 + packages/editor-ui/src/modules/ui.ts | 76 +++ packages/editor-ui/src/modules/workflows.ts | 71 ++- .../src/plugins/i18n/locales/en.json | 54 +- packages/editor-ui/src/plugins/icons.ts | 4 + packages/editor-ui/src/router.ts | 56 +- packages/editor-ui/src/store.ts | 2 +- packages/editor-ui/src/views/NodeView.vue | 280 +++++++--- .../src/views/TemplatesSearchView.vue | 1 + .../src/views/TemplatesWorkflowView.vue | 6 +- .../editor-ui/src/views/WorkflowsView.vue | 1 + packages/editor-ui/src/views/canvasHelpers.ts | 19 +- 46 files changed, 2473 insertions(+), 184 deletions(-) create mode 100644 packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue create mode 100644 packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue create mode 100644 packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue create mode 100644 packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue create mode 100644 packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue create mode 100644 packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue create mode 100644 packages/editor-ui/src/components/MainHeader/TabBar.vue create mode 100644 packages/editor-ui/src/components/mixins/executionsHelpers.ts diff --git a/package-lock.json b/package-lock.json index ab5c8c2fa2..8bcb0eafe0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46646,7 +46646,7 @@ "@oclif/errors": "^1.3.6", "@oclif/parser": "^3.8.8", "debug": "^4.3.4", - "globby": "^11.0.2", + "globby": "^11.1.0", "is-wsl": "^2.1.1", "tslib": "^2.3.1" }, @@ -46672,10 +46672,10 @@ "clean-stack": "^3.0.1", "cli-progress": "^3.10.0", "debug": "^4.3.4", - "ejs": "^3.1.8", + "ejs": "^3.1.6", "fs-extra": "^9.1.0", "get-package-type": "^0.1.0", - "globby": "^11.0.2", + "globby": "^11.1.0", "hyperlinker": "^1.0.0", "indent-string": "^4.0.0", "is-wsl": "^2.2.0", @@ -47028,7 +47028,7 @@ "@oclif/errors": "^1.3.3", "@oclif/parser": "^3.8.0", "debug": "^4.1.1", - "globby": "^11.0.2", + "globby": "^11.0.1", "is-wsl": "^2.1.1", "tslib": "^2.0.0" } @@ -47534,7 +47534,7 @@ "css-loader": "^3.6.0", "file-loader": "^6.2.0", "find-up": "^5.0.0", - "fork-ts-checker-webpack-plugin": "^6.0.4", + "fork-ts-checker-webpack-plugin": "^4.1.6", "glob": "^7.1.6", "glob-promise": "^3.4.0", "global": "^4.4.0", @@ -50091,7 +50091,7 @@ "@typescript-eslint/types": "5.40.0", "@typescript-eslint/visitor-keys": "5.40.0", "debug": "^4.3.4", - "globby": "^11.0.2", + "globby": "^11.1.0", "is-glob": "^4.0.3", "semver": "^7.3.7", "tsutils": "^3.21.0" @@ -51409,7 +51409,7 @@ "integrity": "sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==", "dev": true, "requires": { - "browserslist": "^4.21.3", + "browserslist": "^4.12.0", "caniuse-lite": "^1.0.30001109", "normalize-range": "^0.1.2", "num2fraction": "^1.2.2", @@ -54206,7 +54206,7 @@ "integrity": "sha512-ovcyhs2DEBUIE0MGEKHP4olCUW/XYte3Vroyxuh38rD1wAO4dHohsovUC4eAOuzFxE6b+RXvBU3UZ9o0YhUTkA==", "dev": true, "requires": { - "browserslist": "^4.21.3" + "browserslist": "^4.21.4" } }, "core-js-pure": { @@ -54280,7 +54280,7 @@ "requires": { "arrify": "^2.0.1", "cp-file": "^7.0.0", - "globby": "^11.0.2", + "globby": "^9.2.0", "has-glob": "^1.0.0", "junk": "^3.1.0", "nested-error-stacks": "^2.1.0", @@ -55883,7 +55883,7 @@ "functional-red-black-tree": "^1.0.1", "glob-parent": "^6.0.1", "globals": "^13.15.0", - "globby": "^11.0.2", + "globby": "^11.1.0", "grapheme-splitter": "^1.0.4", "ignore": "^5.2.0", "import-fresh": "^3.0.0", @@ -68649,7 +68649,7 @@ "fs-extra": "^6.0.1", "get-stream": "^5.1.0", "glob": "^7.1.2", - "globby": "^11.0.2", + "globby": "^10.0.1", "http-call": "^5.1.2", "load-json-file": "^6.2.0", "pkg-dir": "^4.2.0", @@ -74342,7 +74342,7 @@ "consola": "^2.15.3", "dotenv": "^16.0.0", "dotenv-expand": "^8.0.2", - "ejs": "^3.1.8", + "ejs": "^3.1.6", "fast-glob": "^3.2.11", "fs-extra": "^10.0.1", "html-minifier-terser": "^6.1.0", diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue index 0ae8705fed..894b08dcf4 100644 --- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue +++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue @@ -1,7 +1,7 @@ @@ -36,11 +36,11 @@ export default Vue.extend({ RadioButton, }, methods: { - onClick(value: unknown) { - if (this.disabled) { + onClick(option: {label: string, value: string, disabled?: boolean}) { + if (this.disabled || option.disabled) { return; } - this.$emit('input', value); + this.$emit('input', option.value); }, }, }); diff --git a/packages/design-system/src/components/N8nText/Text.vue b/packages/design-system/src/components/N8nText/Text.vue index 1abc9c41ce..de22fef457 100644 --- a/packages/design-system/src/components/N8nText/Text.vue +++ b/packages/design-system/src/components/N8nText/Text.vue @@ -21,7 +21,7 @@ export default Vue.extend({ }, color: { type: String, - validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight', 'danger', 'success'].includes(value), + validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight', 'danger', 'success', 'warning'].includes(value), }, align: { type: String, @@ -126,6 +126,10 @@ export default Vue.extend({ color: var(--color-success); } +.warning { + color: var(--color-warning); +} + .align-left { text-align: left; } diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue index a03bbf4d37..f9e40416bc 100644 --- a/packages/editor-ui/src/App.vue +++ b/packages/editor-ui/src/App.vue @@ -9,14 +9,16 @@ [$style.sidebarCollapsed]: sidebarMenuCollapsed }" > -