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

packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="['action-dropdown-container', $style.actionDropdownContainer]">
 		<el-dropdown :placement="placement" :trigger="trigger" @command="onSelect">
-			<div :class="$style.activator">
+			<div :class="$style.activator" @click.prevent>
 				<n8n-icon :icon="activatorIcon"/>
 			</div>
 			<el-dropdown-menu slot="dropdown" :class="$style.userActionsMenu">
@@ -18,7 +18,7 @@
 						[item.customClass]: item.customClass !== undefined,
 					}">
 						<span v-if="item.icon" :class="$style.icon">
-							<n8n-icon :icon="item.icon"/>
+							<n8n-icon :icon="item.icon" :size="item.iconSize"/>
 						</span>
 						<span :class="$style.label">
 							{{ item.label }}
@@ -75,6 +75,12 @@ export default Vue.extend({
 			type: String,
 			default: 'ellipsis-v',
 		},
+		iconSize: {
+			type: String,
+			default: 'medium',
+			validator: (value: string): boolean =>
+				['small', 'medium', 'large'].includes(value),
+		},
 		trigger: {
 			type: String,
 			default: 'click',

packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue

@@ -1,27 +1,38 @@
 <template>
 	<div :class="['accordion', $style.container]" >
-		<div :class="{[$style.header]: true, [$style.expanded]: expanded}" @click="toggle">
-			<n8n-text color="text-base" size="small" align="left" bold>{{ title }}</n8n-text>
-
-			<n8n-icon
-				:icon="expanded? 'chevron-up' : 'chevron-down'"
-				bold
-			/>
-
+		<div :class="{[$style.header]: true, [$style.expanded]: expanded }" @click="toggle">
+			<n8n-icon v-if="headerIcon" :icon="headerIcon.icon" :color="headerIcon.color" size="small" class="mr-2xs"/>
+			<n8n-text :class="$style.headerText" color="text-base" size="small" align="left" bold>{{ title }}</n8n-text>
+			<n8n-icon :icon="expanded? 'chevron-up' : 'chevron-down'" bold />
 		</div>
 		<div v-if="expanded" :class="{[$style.description]: true, [$style.collapsed]: !expanded}" @click="onClick">
+			<!-- Info accordion can display list of items with icons or just a HTML description -->
+			<div v-if="items.length > 0" :class="$style.accordionItems">
+				<div v-for="item in items" :key="item.id" :class="$style.accordionItem">
+					<n8n-tooltip :disabled="!item.tooltip">
+						<div slot="content" v-html="item.tooltip" @click="onTooltipClick(item.id, $event)"></div>
+						<n8n-icon :icon="item.icon" :color="item.iconColor" size="small" class="mr-2xs"/>
+					</n8n-tooltip>
+					<n8n-text size="small" color="text-base">{{ item.label }}</n8n-text>
+			</div>
+			</div>
 			<n8n-text color="text-base" size="small" align="left">
 				<span v-html="description"></span>
 			</n8n-text>
 		</div>
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import N8nText from '../N8nText';
 import N8nIcon from '../N8nIcon';
+import Vue, { PropType } from 'vue';
 
-import Vue from 'vue';
+interface IAccordionItem {
+	id: string;
+	label: string;
+	icon: string;
+}
 
 export default Vue.extend({
 	name: 'n8n-info-accordion',
@@ -36,11 +47,26 @@ export default Vue.extend({
 		description: {
 			type: String,
 		},
+		items: {
+			type: Array as PropType<IAccordionItem[]>,
+			default() {
+				return [];
+			},
+		},
+		initiallyExpanded: {
+			type: Boolean,
+			default: false,
+		},
+		headerIcon: {
+			type: Object as () => { icon: string, color: string },
+			required: false,
+		},
 	},
 	mounted() {
 		this.$on('expand', () => {
 			this.expanded = true;
 		});
+		this.expanded = this.initiallyExpanded;
 	},
 	data() {
 		return {
@@ -54,6 +80,9 @@ export default Vue.extend({
 		onClick(e) {
 			this.$emit('click', e);
 		},
+		onTooltipClick(item: string, event: MouseEvent) {
+			this.$emit('tooltipClick', item, event);
+		},
 	},
 });
 </script>
@@ -67,8 +96,9 @@ export default Vue.extend({
 	cursor: pointer;
 	display: flex;
 	padding: var(--spacing-s);
+	align-items: center;
 
-	*:first-child {
+	.headerText {
 		flex-grow: 1;
 	}
 }
@@ -77,6 +107,18 @@ export default Vue.extend({
 	padding: var(--spacing-s) var(--spacing-s) var(--spacing-2xs) var(--spacing-s);
 }
 
+.accordionItems {
+	display: flex;
+	flex-direction: column !important;
+	align-items: flex-start !important;
+	width: 100%;
+}
+
+.accordionItem {
+	display: block !important;
+	text-align: left;
+}
+
 .description {
 	display: flex;
 	padding: 0 var(--spacing-s) var(--spacing-s) var(--spacing-s);

packages/design-system/src/components/N8nInfoTip/__tests__/__snapshots__/InfoTip.spec.ts.snap

@@ -1,9 +1,9 @@
 // Vitest Snapshot v1
 
-exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class=\\"n8n-info-tip _info_3egb8_33 _note_3egb8_16 _base_3egb8_1 _bold_3egb8_12\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_odhsl_34 _size-medium_odhsl_19 _regular_odhsl_5\\"></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></span></div>"`;
+exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class=\\"n8n-info-tip _info_3egb8_33 _note_3egb8_16 _base_3egb8_1 _bold_3egb8_12\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_e4k11_34 _size-medium_e4k11_19 _regular_e4k11_5\\"></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></span></div>"`;
 
 exports[`N8nInfoTip > should render correctly as tooltip 1`] = `
 "<div class=\\"n8n-info-tip _info_3egb8_33 _tooltip_3egb8_23 _base_3egb8_1 _bold_3egb8_12\\">
-  <n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_odhsl_34 _size-medium_odhsl_19 _regular_odhsl_5\\"></span></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></n8n-tooltip-stub>
+  <n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\"><span class=\\"_iconText_3egb8_28\\"><span class=\\"n8n-icon n8n-text _compact_e4k11_34 _size-medium_e4k11_19 _regular_e4k11_5\\"></span></span><span>Need help doing something?<a href=\\"/docs\\" target=\\"_blank\\">Open docs</a></span></n8n-tooltip-stub>
 </div>"
 `;

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/design-system/src/components/N8nText/Text.vue

@@ -21,7 +21,7 @@ export default Vue.extend({
 		},
 		color: {
 			type: String,
-			validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight', 'danger', 'success'].includes(value),
+			validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight', 'danger', 'success', 'warning'].includes(value),
 		},
 		align: {
 			type: String,
@@ -126,6 +126,10 @@ export default Vue.extend({
 	color: var(--color-success);
 }
 
+.warning {
+	color: var(--color-warning);
+}
+
 .align-left {
 	text-align: left;
 }

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

@@ -1009,6 +1009,9 @@ export interface IUiState {
 	isPageLoading: boolean;
 	currentView: string;
 	fakeDoorFeatures: IFakeDoor[];
+	nodeViewInitialized: boolean;
+	addFirstStepOnLoad: boolean;
+	executionSidebarAutoRefresh: boolean;
 }
 
 export type ILogLevel = 'info' | 'debug' | 'warn' | 'error' | 'verbose';
@@ -1088,7 +1091,12 @@ export interface IUsersState {
 	users: {[userId: string]: IUser};
 }
 
-export interface IWorkflowsMap {
+export interface IWorkflowsState {
+	currentWorkflowExecutions: IExecutionsSummary[];
+	activeWorkflowExecution: IExecutionsSummary | null;
+	finishedExecutionsCount: number;
+}
+	export interface IWorkflowsMap {
 	[name: string]: IWorkflowDb;
 }
 
@@ -1145,6 +1153,12 @@ export interface ITab {
 	tooltip?: string;
 }
 
+export interface ITabBarItem {
+	value: string;
+	label: string;
+	disabled?: boolean;
+}
+
 export interface IResourceLocatorReqParams {
 	nodeTypeAndVersion: INodeTypeNameVersion;
 	path: string;

packages/editor-ui/src/api/workflows.ts

@@ -1,4 +1,5 @@
 import { IRestApiContext } from '@/Interface';
+import { IDataObject } from 'n8n-workflow';
 import { makeRestApiRequest } from './helpers';
 
 export async function getNewWorkflow(context: IRestApiContext, name?: string) {
@@ -19,3 +20,10 @@ export async function getActiveWorkflows(context: IRestApiContext) {
 	return await makeRestApiRequest(context, 'GET', `/active`);
 }
 
+export async function getCurrentExecutions(context: IRestApiContext, filter: IDataObject) {
+	return await makeRestApiRequest(context, 'GET', '/executions-current', { filter });
+}
+
+export async function getFinishedExecutions(context: IRestApiContext, filter: IDataObject) {
+	return await makeRestApiRequest(context, 'GET', '/executions', { filter });
+}