feat(editor): implement executions preview via the new executions tab in node view #4311
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…design # Conflicts: # packages/editor-ui/src/constants.ts
* ✨ 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
… navigation by modifying route params
…design # Conflicts: # package-lock.json # packages/editor-ui/src/modules/ui.ts
…design # Conflicts: # packages/editor-ui/src/components/MainSidebar.vue # packages/editor-ui/src/store.ts
n8n-assistant
bot
added
n8n team
…design # Conflicts: # packages/editor-ui/src/views/NodeView.vue
MiloradFilipovic
changed the title
…oving listeners when node view is not active
mutdmour
reviewed
Oct 25, 2022
|
|
||
| if (executionPreview) { | ||
| return { | ||
| 'background-image': 'linear-gradient(135deg, #f9f9fb 25%, #ffffff 25%, #ffffff 50%, #f9f9fb 50%, #f9f9fb 75%, #ffffff 75%, #ffffff 100%)', |
There was a problem hiding this comment.
does not need to be updated for this.. but would be nice if it worked with dark mode.. that's why we are using css tokens below
There was a problem hiding this comment.
Good catch.
Agree, but I think we are going to need new values for this from @maxtkacz
I used the existing values and it looks like this in dark mode 😵💫:
| } else if (filter.status !== '') { | ||
| requestFilter.finished = filter.status === 'success'; | ||
| } | ||
| finishedExecutions = await makeRestApiRequest( |
There was a problem hiding this comment.
would be nice to follow same pattern and create and add this to api/workflows
There was a problem hiding this comment.
Yeah. It's getting caught in ExecutionsView component to display error if something fails.
Comment on lines
+90
to
+92
| } catch (error) { | ||
| throw(error); | ||
| } |
There was a problem hiding this comment.
Same as above.
| <div id="content" :class="$style['content']"> | ||
| <router-view /> | ||
| <div id="content" :class="$style.content"> | ||
| <keep-alive include="NodeView" :max="1"> |
There was a problem hiding this comment.
why is this needed? could this have memory or perf implications?
There was a problem hiding this comment.
For sure it's not optimal but it's the only way to keep the main NodeView active, so it's not reloading every time we switch tabs. I guess this is the UX we are after in this feature.
include and max parameters will limit router view so it only caches one instance of NodeViewand not other components that render in that slot.
…design # Conflicts: # packages/editor-ui/src/modules/ui.ts # packages/editor-ui/src/views/NodeView.vue
mutdmour
approved these changes
Oct 26, 2022
MiloradFilipovic
deleted the
feature/workflows-executions-navigation-redesign
branch
n8n-assistant
bot
added
the
Upcoming Release
|
Got released with |
valya
pushed a commit
to valya/n8n
that referenced
this pull request
Nov 8, 2022
… in node view (n8n-io#4311) * ✨ Added main header tabs with current workflow execution count * ⚡ feat(editor): header tab navigation (no-changelog) (n8n-io#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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes N8N-4788