feat(editor): header tab navigation (no-changelog)

packages/design-system/src/components/N8nRadioButtons/RadioButton.vue

@@ -65,6 +65,7 @@ export default Vue.extend({
 	color: var(--color-text-base);
 	transition: background-color 0.2s ease;
 	cursor: pointer;
+	user-select: none;
 }
 
 .disabled {

packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue

@@ -6,8 +6,8 @@
 			v-bind="option"
 			:active="value === option.value"
 			:size="size"
-			:disabled="disabled"
-			@click="(e) => onClick(option.value, e)"
+			:disabled="disabled || option.disabled"
+			@click="(e) => onClick(option, e)"
 		/>
 	</div>
 </template>
@@ -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);
 		},
 	},
 });

packages/editor-ui/src/App.vue

@@ -9,14 +9,16 @@
 				[$style.sidebarCollapsed]: sidebarMenuCollapsed
 			}"
 		>
-			<div id="header" :class="$style['header']">
+			<div id="header" :class="$style.header">
 				<router-view name="header"></router-view>
 			</div>
-			<div id="sidebar" :class="$style['sidebar']">
+			<div id="sidebar" :class="$style.sidebar">
 				<router-view name="sidebar"></router-view>
 			</div>
-			<div id="content" :class="$style['content']">
-				<router-view />
+			<div id="content" :class="$style.content">
+				<keep-alive include="NodeView" :max="1">
+					<router-view />
+				</keep-alive>
 			</div>
 			<Modals />
 			<Telemetry />
@@ -35,7 +37,7 @@ import { showMessage } from './components/mixins/showMessage';
 import { IUser } from './Interface';
 import { mapGetters } from 'vuex';
 import { userHelpers } from './components/mixins/userHelpers';
-import { addHeaders, loadLanguage } from './plugins/i18n';
+import { loadLanguage } from './plugins/i18n';
 import { restApi } from '@/components/mixins/restApi';
 import { globalLinkActions } from '@/components/mixins/globalLinkActions';
 

packages/editor-ui/src/Interface.ts

@@ -1034,6 +1034,7 @@ export interface IUsersState {
 }
 
 export interface IWorkflowsState {
+	currentWorkflowExecutions: IExecutionsSummary[];
 }
 
 export interface ICommunityNodesState {
@@ -1088,11 +1089,10 @@ export interface ITab {
 }
 
 export interface ITabBarItem {
-	id: string,
-	label: string,
-	notifications?: number,
-	disabled?: boolean,
-};
+	value: string;
+	label: string;
+	disabled?: boolean;
+}
 
 export interface IResourceLocatorReqParams {
 	nodeTypeAndVersion: INodeTypeNameVersion;

packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue

@@ -0,0 +1,37 @@
+<template>
+	<div :class="$style.previewContainer">
+		<workflow-preview mode="execution" loaderType="spinner" :executionId="executionId"/>
+	</div>
+</template>
+
+<script lang="ts">
+import mixins from 'vue-typed-mixins';
+import { restApi } from '@/components/mixins/restApi';
+import { showMessage } from '../mixins/showMessage';
+import WorkflowPreview from '@/components/WorkflowPreview.vue';
+
+export default mixins(restApi, showMessage).extend({
+	name: 'execution-preview',
+	components: {
+		WorkflowPreview,
+	},
+	data() {
+		return {
+		};
+	},
+	computed: {
+		executionId(): string {
+			return this.$route.params.executionId;
+		},
+	},
+});
+</script>
+
+<style module lang="scss">
+
+.previewContainer {
+	height: 100%;
+	overflow: hidden;
+}
+
+</style>

packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue

@@ -0,0 +1,65 @@
+<template>
+	<div :class="['workflow-executions-container', $style.container]">
+		<div v-if="executionCount === 0" :class="[$style.messageContainer, $style.noExecutionsMessage]">
+			<n8n-heading tag="h2" size="large" color="text-dark">
+				{{ $locale.baseText('executionsLandingPage.emptyState.heading') }}
+			</n8n-heading>
+			<n8n-text>
+				{{ $locale.baseText('executionsLandingPage.emptyState.message') }}
+			</n8n-text>
+			<n8n-button class="mt-l" type="tertiary">
+				{{ $locale.baseText('nodeView.runButtonText.executeWorkflow') }}
+			</n8n-button>
+		</div>
+		<div v-else :class="[$style.messageContainer, $style.executionListMessage]">
+			<p :class="$style.icon">
+				<font-awesome-icon icon="hand-point-left" />
+			</p>
+			<p :class="$style.message">
+				{{ $locale.baseText('executionsLandingPage.clickExecutionMessage') }}
+			</p>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { IExecutionsSummary } from '@/Interface';
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'executions-landing-page',
+	computed: {
+		executionCount(): number {
+			return (this.$store.getters['workflows/currentWorkflowExecutions'] as IExecutionsSummary[]).length;
+		},
+	},
+});
+</script>
+
+<style module lang="scss">
+
+.container {
+	width: 100%;
+	height: 100%;
+	flex: 1;
+	background-color: var(--color-background-light);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.messageContainer {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	margin-top: 20%;
+	color: var(--color-text-base);
+}
+
+.icon {
+	font-size: 24px;
+	color: var(--color-foreground-dark);
+}
+
+</style>

packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue

@@ -0,0 +1,136 @@
+<template>
+	<div v-if="executions.length > 0" :class="['executions-sidebar', $style.container]">
+		<n8n-heading tag="h2" size="medium" color="text-dark">
+			{{ $locale.baseText('generic.executions') }}
+		</n8n-heading>
+		<div :class="$style.executionList">
+			<div v-if="loading" :class="$style.loadingContainer">
+				<n8n-loading :class="$style.loader" variant="p" :rows="1" />
+				<n8n-loading :class="$style.loader" variant="p" :rows="1" />
+			</div>
+			<div v-else :class="$style.executionCard" v-for="execution in executions" :key="execution.id">
+				<n8n-icon v-if="getExecutionStatus(execution) === 'unknown'" :class="['mr-2xs', $style.icon, $style.unknown]" icon="exclamation-triangle" />
+				<n8n-icon v-else :class="['mr-2xs', $style.icon, $style[getExecutionStatus(execution)]]" icon="dot-circle" />
+				<router-link :class="$style.executionLink" :to="{ name: VIEWS.EXECUTION_PREVIEW, params: { workflowId: currentWorkflow, executionId: execution.id }}">
+					{{ $locale.baseText('executionSidebar.executionName', { interpolate: { id: execution.id } }) }}
+				</router-link>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
+import { IExecutionsSummary } from '@/Interface';
+import mixins from 'vue-typed-mixins';
+import { workflowHelpers } from '../mixins/workflowHelpers';
+import { VIEWS } from '../../constants';
+
+export default mixins(workflowHelpers).extend({
+	name: 'executions-sidebar',
+	data() {
+		return {
+			VIEWS,
+			loading: false,
+		};
+	},
+	computed: {
+		workflowName (): string {
+			return this.$store.getters.workflowName;
+		},
+		currentWorkflow (): string {
+			return this.$route.params.name || this.$store.getters.workflowId;
+		},
+		executions(): IExecutionsSummary[] {
+			return this.$store.getters['workflows/currentWorkflowExecutions'];
+		},
+	},
+	async mounted() {
+		if (!this.currentWorkflow || this.currentWorkflow === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
+			this.$store.commit('workflows/setCurrentWorkflowExecutions', []);
+		} else {
+			await this.loadExecutions();
+		}
+	},
+	methods: {
+		async loadExecutions (): Promise<void> {
+			if (!this.currentWorkflow) {
+				this.loading = false;
+				return;
+			}
+			try {
+				this.loading = true;
+				await this.$store.dispatch('workflows/loadCurrentWorkflowExecutions');
+			} catch (error) {
+				this.$showError(
+					error,
+					this.$locale.baseText('executionsList.showError.refreshData.title'),
+				);
+			} finally {
+				this.loading = false;
+			}
+		},
+		getExecutionStatus(execution: IExecutionsSummary): string {
+			let status = 'unknown';
+
+			if (execution.waitTill) {
+				status = 'waiting';
+			} else if (execution.stoppedAt === undefined) {
+				status = 'running';
+			} else if (execution.finished) {
+				status = 'success';
+			} else if (execution.stoppedAt !== null) {
+				status === 'error';
+			}
+
+			return status;
+		},
+	},
+});
+</script>
+
+<style module lang="scss">
+.container {
+	flex: 310px 0 0;
+	height: 100%;
+	background-color: var(--color-background-xlight);
+	border-right: var(--border-base);
+	padding: var(--spacing-l) var(--spacing-2xs) var(--spacing-2xs) var(--spacing-l);
+	z-index: 1;
+	overflow: hidden;
+}
+
+.executionList {
+	height: 93%;
+	overflow: auto;
+	margin: var(--spacing-m) 0;
+}
+
+.executionCard {
+	display: flex;
+	padding: var(--spacing-2xs);
+	border-radius: var(--border-radius-base);
+	cursor: pointer;
+
+	&:hover {
+		background-color: var(--color-foreground-base);
+
+		.executionLink {
+			color: var(--color-text-dark)
+		}
+	}
+}
+
+.icon {
+	&.unknown, &.waiting, &.running { color: var(--color-warning); }
+	&.success { color: var(--color-success); }
+	&.error { color: var(--color-error); }
+}
+
+.executionLink {
+	display: block;
+	color: var(--color-text-base);
+	font-size: var(--font-size-xs);
+}
+
+</style>