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

@@ -0,0 +1,70 @@
+<template>
+	<div v-if="items" :class="{[$style.container]: true, ['tab-bar-container']: true, [$style.menuCollapsed]: mainSidebarCollapsed}">
+		<n8n-radio-buttons
+			:value="activeTab"
+			:options="items"
+			@input="onSelect"
+		/>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+import { ITabBarItem } from '@/Interface';
+import { MAIN_HEADER_TABS } from '@/constants';
+
+export default Vue.extend({
+	name: 'tab-bar',
+	data() {
+		return {
+			MAIN_HEADER_TABS,
+		};
+	},
+	props: {
+		items: {
+			type: Array as PropType<ITabBarItem[]>,
+			required: true,
+		},
+		activeTab: {
+			type: String,
+			default: MAIN_HEADER_TABS.WORKFLOW,
+		},
+	},
+	computed: {
+		mainSidebarCollapsed(): boolean {
+			return this.$store.getters['ui/sidebarMenuCollapsed'];
+		},
+	},
+	methods: {
+		onSelect(tab: string, event: MouseEvent): void {
+			this.$emit('select', tab, event);
+		},
+	},
+});
+</script>
+
+<style module lang="scss">
+
+.container {
+	position: absolute;
+	top: 47px;
+	left: calc(50% + 100px);
+	transform: translateX(-50%);
+	min-height: 30px;
+	display: flex;
+	padding: var(--spacing-5xs);
+	background-color: var(--color-foreground-base);
+	border-radius: var(--border-radius-base);
+	transition: all 150ms ease-in-out;
+
+	&.menuCollapsed {
+		left: 52%;
+	}
+}
+
+@media screen and (max-width: 430px) {
+	.container {
+		flex-direction: column;
+	}
+}
+</style>