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/WorkflowPreview.vue

@@ -1,9 +1,15 @@
 <template>
 	<div :class="$style.container">
-		<n8n-loading :loading="!showPreview" :rows="1" variant="image" />
+		<div v-if="loaderType === 'image' && !showPreview" :class="$style.imageLoader">
+			<n8n-loading :loading="!showPreview" :rows="1" variant="image" />
+		</div>
+		<div v-else-if="loaderType === 'spinner' && !showPreview" :class="$style.spinner">
+			<n8n-spinner type="dots" />
+		</div>
 		<iframe
 			:class="{
 				[$style.workflow]: !this.nodeViewDetailsOpened,
+				[$style.executionPreview]: mode === 'execution',
 				[$style.openNDV]: this.nodeViewDetailsOpened,
 				[$style.show]: this.showPreview,
 			}"
@@ -18,10 +24,36 @@
 <script lang="ts">
 import mixins from 'vue-typed-mixins';
 import { showMessage } from '@/components/mixins/showMessage';
+import { IWorkflowDb } from '../Interface';
 
 export default mixins(showMessage).extend({
 	name: 'WorkflowPreview',
-	props: ['loading', 'workflow'],
+	props: {
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		mode: {
+			type: String,
+			default: 'workflow',
+			validator: (value: string): boolean =>
+				['workflow', 'execution', 'medium'].includes(value),
+		},
+		workflow: {
+			type: Object as () => IWorkflowDb,
+			required: false,
+		},
+		executionId: {
+			type: String,
+			required: false,
+		},
+		loaderType: {
+			type: String,
+			default: 'image',
+			validator: (value: string): boolean =>
+				['image', 'spinner'].includes(value),
+		},
+	},
 	data() {
 		return {
 			nodeViewDetailsOpened: false,
@@ -33,7 +65,12 @@ export default mixins(showMessage).extend({
 	},
 	computed: {
 		showPreview(): boolean {
-			return !this.loading && !!this.workflow && this.ready;
+			return !this.loading &&
+				(
+					(this.mode === 'workflow' && !!this.workflow) ||
+					(this.mode === 'execution' && !!this.executionId)
+				) &&
+				this.ready;
 		},
 	},
 	methods: {
@@ -72,6 +109,29 @@ export default mixins(showMessage).extend({
 				);
 			}
 		},
+		loadExecution() {
+			try {
+				if (!this.executionId) {
+					throw new Error(this.$locale.baseText('workflowPreview.showError.missingExecution'));
+				}
+				const iframe = this.$refs.preview_iframe as HTMLIFrameElement;
+				if (iframe.contentWindow) {
+					iframe.contentWindow.postMessage(
+						JSON.stringify({
+							command: 'openExecution',
+							executionId: this.executionId,
+						}),
+						'*',
+					);
+				}
+			} catch (error) {
+				this.$showError(
+					error,
+					this.$locale.baseText('workflowPreview.showError.previewError.title'),
+					this.$locale.baseText('workflowPreview.executionMode.showError.previewError.message'),
+				);
+			}
+		},
 		receiveMessage({ data }: MessageEvent) {
 			try {
 				const json = JSON.parse(data);
@@ -96,7 +156,16 @@ export default mixins(showMessage).extend({
 	watch: {
 		showPreview(show) {
 			if (show) {
-				this.loadWorkflow();
+				if (this.mode === 'workflow') {
+					this.loadWorkflow();
+				} else if (this.mode === 'execution') {
+					this.loadExecution();
+				}
+			}
+		},
+		executionId(value) {
+			if (this.mode === 'execution' && this.executionId) {
+				this.loadExecution();
 			}
 		},
 	},
@@ -114,13 +183,12 @@ export default mixins(showMessage).extend({
 <style lang="scss" module>
 .container {
 	width: 100%;
-	height: 500px;
+	height: 100%;
+	display: flex;
+	justify-content: center;
 }
 
 .workflow {
-	border: var(--border-base);
-	border-radius: var(--border-radius-large);
-
 	// firefox bug requires loading iframe as such
 	visibility: hidden;
 	height: 0;
@@ -141,4 +209,20 @@ export default mixins(showMessage).extend({
 	width: 100%;
 	z-index: 9999999;
 }
+
+.spinner {
+	color: var(--color-primary);
+	position: absolute;
+	top: 50% !important;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.imageLoader {
+	width: 100%;
+}
+
+.executionPreview {
+	height: 100%;
+}
 </style>