feat(editor): implement executions preview via the new executions tab in node view (#4311)

* ✨ 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

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -86,6 +86,7 @@ import { mapGetters } from "vuex";
 import {
 	DUPLICATE_MODAL_KEY,
 	MAX_WORKFLOW_NAME_LENGTH,
+	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 	VIEWS, WORKFLOW_MENU_ACTIONS,
 	WORKFLOW_SETTINGS_MODAL_KEY,
 } from "@/constants";
@@ -145,29 +146,29 @@ export default mixins(workflowHelpers, titleChange).extend({
 		}),
 		...mapGetters('settings', ['areTagsEnabled']),
 		isNewWorkflow(): boolean {
-			return !this.$route.params.name;
+			return !this.currentWorkflowId || (this.currentWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID || this.currentWorkflowId === 'new');
 		},
 		isWorkflowSaving(): boolean {
 			return this.$store.getters.isActionActive("workflowSaving");
 		},
 		currentWorkflowId(): string {
-			return this.$route.params.name;
-		},
-		currentWorkflow (): string {
-			return this.$route.params.name;
+			return this.$store.getters.workflowId;
 		},
 		workflowName (): string {
 			return this.$store.getters.workflowName;
 		},
 		onWorkflowPage(): boolean {
-			return this.$route.meta && this.$route.meta.nodeView;
+			return this.$route.meta && (this.$route.meta.nodeView || this.$route.meta.keepWorkflowAlive === true);
+		},
+		onExecutionsTab(): boolean {
+			return [ VIEWS.EXECUTION_HOME.toString(), VIEWS.EXECUTIONS.toString(), VIEWS.EXECUTION_PREVIEW ].includes(this.$route.name || '');
 		},
 		workflowMenuItems(): Array<{}> {
 			return [
 				{
 					id: WORKFLOW_MENU_ACTIONS.DUPLICATE,
 					label: this.$locale.baseText('menuActions.duplicate'),
-					disabled: !this.onWorkflowPage || !this.currentWorkflow,
+					disabled: !this.onWorkflowPage || !this.currentWorkflowId,
 				},
 				{
 					id: WORKFLOW_MENU_ACTIONS.DOWNLOAD,
@@ -177,22 +178,22 @@ export default mixins(workflowHelpers, titleChange).extend({
 				{
 					id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL,
 					label: this.$locale.baseText('menuActions.importFromUrl'),
-					disabled: !this.onWorkflowPage,
+					disabled: !this.onWorkflowPage || this.onExecutionsTab,
 				},
 				{
 					id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE,
 					label: this.$locale.baseText('menuActions.importFromFile'),
-					disabled: !this.onWorkflowPage,
+					disabled: !this.onWorkflowPage || this.onExecutionsTab,
 				},
 				{
 					id: WORKFLOW_MENU_ACTIONS.SETTINGS,
 					label: this.$locale.baseText('generic.settings'),
-					disabled: !this.onWorkflowPage || !this.currentWorkflow,
+					disabled: !this.onWorkflowPage || this.isNewWorkflow,
 				},
 				{
 					id: WORKFLOW_MENU_ACTIONS.DELETE,
 					label: this.$locale.baseText('menuActions.delete'),
-					disabled: !this.onWorkflowPage || !this.currentWorkflow,
+					disabled: !this.onWorkflowPage || this.isNewWorkflow,
 					customClass: this.$style.deleteItem,
 					divided: true,
 				},
@@ -201,7 +202,13 @@ export default mixins(workflowHelpers, titleChange).extend({
 	},
 	methods: {
 		async onSaveButtonClick () {
-			const saved = await this.saveCurrentWorkflow();
+			let currentId = undefined;
+			if (this.currentWorkflowId !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
+				currentId = this.currentWorkflowId;
+			} else if (this.$route.params.name && this.$route.params.name !== 'new') {
+				currentId = this.$route.params.name;
+			}
+			const saved = await this.saveCurrentWorkflow({ id: currentId, name: this.workflowName, tags: this.currentWorkflowTagIds });
 			if (saved) this.$store.dispatch('settings/fetchPromptsData');
 		},
 		onTagsEditEnable() {
@@ -389,7 +396,7 @@ export default mixins(workflowHelpers, titleChange).extend({
 					}
 
 					try {
-						await this.restApi().deleteWorkflow(this.currentWorkflow);
+						await this.restApi().deleteWorkflow(this.currentWorkflowId);
 					} catch (error) {
 						this.$showError(
 							error,