fix(editor): Update concurrency UI considering different types of ins…

…tances (#12068)

packages/editor-ui/src/components/executions/ConcurrentExecutionsHeader.test.ts

@@ -46,13 +46,12 @@ describe('ConcurrentExecutionsHeader', () => {
 		},
 	);
 
-	it('should show tooltip on hover and call "goToUpgrade" on click', async () => {
-		const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
-
-		const { container, getByText, getByRole, queryByRole } = renderComponent({
+	it('should show tooltip on hover with Upgrade link and emit "goToUpgrade" on click when on cloud', async () => {
+		const { container, getByText, getByRole, queryByRole, emitted } = renderComponent({
 			props: {
 				runningExecutionsCount: 2,
 				concurrencyCap: 5,
+				isCloudDeployment: true,
 			},
 		});
 
@@ -68,6 +67,25 @@ describe('ConcurrentExecutionsHeader', () => {
 
 		await userEvent.click(getByText('Upgrade now'));
 
-		expect(windowOpenSpy).toHaveBeenCalled();
+		expect(emitted().goToUpgrade).toHaveLength(1);
+	});
+
+	it('should show tooltip on hover with Viev docs link when self-hosted', async () => {
+		const { container, getByText, getByRole, queryByRole } = renderComponent({
+			props: {
+				runningExecutionsCount: 2,
+				concurrencyCap: 5,
+			},
+		});
+
+		const tooltipTrigger = container.querySelector('svg') as SVGSVGElement;
+
+		expect(tooltipTrigger).toBeVisible();
+		expect(queryByRole('tooltip')).not.toBeInTheDocument();
+
+		await userEvent.hover(tooltipTrigger);
+
+		expect(getByRole('tooltip')).toBeVisible();
+		expect(getByText('View docs')).toBeVisible();
 	});
 });

packages/editor-ui/src/components/executions/ConcurrentExecutionsHeader.vue

@@ -1,15 +1,18 @@
 <script lang="ts" setup>
-import { computed, defineProps } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from '@/composables/useI18n';
-import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
 
 const props = defineProps<{
 	runningExecutionsCount: number;
 	concurrencyCap: number;
+	isCloudDeployment?: boolean;
+}>();
+
+const emit = defineEmits<{
+	goToUpgrade: [];
 }>();
 
 const i18n = useI18n();
-const pageRedirectionHelper = usePageRedirectionHelper();
 
 const tooltipText = computed(() =>
 	i18n.baseText('executionsList.activeExecutions.tooltip', {
@@ -31,10 +34,6 @@ const headerText = computed(() => {
 		},
 	});
 });
-
-const goToUpgrade = () => {
-	void pageRedirectionHelper.goToUpgrade('concurrency', 'upgrade-concurrency');
-};
 </script>
 
 <template>
@@ -43,9 +42,22 @@ const goToUpgrade = () => {
 			<template #content>
 				<div :class="$style.tooltip">
 					{{ tooltipText }}
-					<n8n-link bold size="small" :class="$style.upgrade" @click="goToUpgrade">
+					<N8nLink
+						v-if="props.isCloudDeployment"
+						bold
+						size="small"
+						:class="$style.link"
+						@click="emit('goToUpgrade')"
+					>
 						{{ i18n.baseText('generic.upgradeNow') }}
-					</n8n-link>
+					</N8nLink>
+					<N8nLink
+						v-else
+						:class="$style.link"
+						:href="i18n.baseText('executions.concurrency.docsLink')"
+						target="_blank"
+						>{{ i18n.baseText('generic.viewDocs') }}</N8nLink
+					>
 				</div>
 			</template>
 			<font-awesome-icon icon="info-circle" class="mr-2xs" />
@@ -54,12 +66,12 @@ const goToUpgrade = () => {
 	</div>
 </template>
 
-<style module scoped>
+<style lang="scss" module>
 .tooltip {
 	display: flex;
 	flex-direction: column;
 }
-.upgrade {
+.link {
 	margin-top: var(--spacing-xs);
 }
 </style>

packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue

@@ -16,6 +16,7 @@ import { getResourcePermissions } from '@/permissions';
 import { useSettingsStore } from '@/stores/settings.store';
 import ProjectHeader from '@/components/Projects/ProjectHeader.vue';
 import ConcurrentExecutionsHeader from '@/components/executions/ConcurrentExecutionsHeader.vue';
+import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
 
 const props = withDefaults(
 	defineProps<{
@@ -40,6 +41,7 @@ const telemetry = useTelemetry();
 const workflowsStore = useWorkflowsStore();
 const executionsStore = useExecutionsStore();
 const settingsStore = useSettingsStore();
+const pageRedirectionHelper = usePageRedirectionHelper();
 
 const isMounted = ref(false);
 const allVisibleSelected = ref(false);
@@ -317,6 +319,10 @@ async function onAutoRefreshToggle(value: boolean) {
 		executionsStore.stopAutoRefreshInterval();
 	}
 }
+
+const goToUpgrade = () => {
+	void pageRedirectionHelper.goToUpgrade('concurrency', 'upgrade-concurrency');
+};
 </script>
 
 <template>
@@ -330,6 +336,8 @@ async function onAutoRefreshToggle(value: boolean) {
 						class="mr-xl"
 						:running-executions-count="runningExecutionsCount"
 						:concurrency-cap="settingsStore.concurrency"
+						:is-cloud-deployment="settingsStore.isCloudDeployment"
+						@go-to-upgrade="goToUpgrade"
 					/>
 					<N8nLoading v-if="!isMounted" :class="$style.filterLoader" variant="custom" />
 					<ElCheckbox
@@ -400,12 +408,14 @@ async function onAutoRefreshToggle(value: boolean) {
 						:workflow-permissions="getExecutionWorkflowPermissions(execution)"
 						:selected="selectedItems[execution.id] || allExistingSelected"
 						:concurrency-cap="settingsStore.concurrency"
+						:is-cloud-deployment="settingsStore.isCloudDeployment"
 						data-test-id="global-execution-list-item"
 						@stop="stopExecution"
 						@delete="deleteExecution"
 						@select="toggleSelectExecution"
 						@retry-saved="retrySavedExecution"
 						@retry-original="retryOriginalExecution"
+						@go-to-upgrade="goToUpgrade"
 					/>
 				</TransitionGroup>
 			</table>

packages/editor-ui/src/components/executions/global/GlobalExecutionsListItem.test.ts

@@ -1,6 +1,7 @@
-import { describe, it, expect, vi } from 'vitest';
+import { vi } from 'vitest';
 import { fireEvent } from '@testing-library/vue';
-import GlobalExecutionsListItem from './GlobalExecutionsListItem.vue';
+import { WAIT_INDEFINITELY } from 'n8n-workflow';
+import GlobalExecutionsListItem from '@/components/executions/global/GlobalExecutionsListItem.vue';
 import { createComponentRenderer } from '@/__tests__/render';
 import { DateTime } from 'luxon';
 
@@ -15,9 +16,20 @@ vi.mock('vue-router', async () => {
 	};
 });
 
+const globalExecutionsListItemQueuedTooltipRenderSpy = vi.fn();
+
 const renderComponent = createComponentRenderer(GlobalExecutionsListItem, {
 	global: {
-		stubs: ['font-awesome-icon', 'n8n-tooltip', 'n8n-button', 'i18n-t'],
+		//stubs: ['font-awesome-icon', 'n8n-tooltip', 'n8n-button', 'i18n-t'],
+		stubs: {
+			'font-awesome-icon': true,
+			'n8n-tooltip': true,
+			'n8n-button': true,
+			'i18n-t': true,
+			GlobalExecutionsListItemQueuedTooltip: {
+				render: globalExecutionsListItemQueuedTooltipRenderSpy,
+			},
+		},
 	},
 });
 
@@ -98,6 +110,7 @@ describe('GlobalExecutionsListItem', () => {
 
 		await fireEvent.click(getByText('TestWorkflow'));
 		expect(window.open).toHaveBeenCalledWith('mockedRoute', '_blank');
+		expect(globalExecutionsListItemQueuedTooltipRenderSpy).not.toHaveBeenCalled();
 	});
 
 	it('should show formatted start date', () => {
@@ -113,4 +126,50 @@ describe('GlobalExecutionsListItem', () => {
 			getByText(`1 Jan, 2022 at ${DateTime.fromJSDate(new Date(testDate)).toFormat('HH')}:00:00`),
 		).toBeInTheDocument();
 	});
+
+	it('should not render queued tooltip for a not indefinitely waiting execution', async () => {
+		renderComponent({
+			props: {
+				execution: {
+					status: 'waiting',
+					waitTill: new Date(Date.now() + 10000000).toISOString(),
+					id: 123,
+					workflowName: 'Test Workflow',
+				},
+				workflowPermissions: {},
+				concurrencyCap: 5,
+			},
+		});
+
+		expect(globalExecutionsListItemQueuedTooltipRenderSpy).not.toHaveBeenCalled();
+	});
+
+	it('should render queued tooltip for an indefinitely waiting execution', async () => {
+		renderComponent({
+			props: {
+				execution: {
+					status: 'waiting',
+					waitTill: WAIT_INDEFINITELY,
+					id: 123,
+					workflowName: 'Test Workflow',
+				},
+				workflowPermissions: {},
+				concurrencyCap: 5,
+			},
+		});
+
+		expect(globalExecutionsListItemQueuedTooltipRenderSpy).toHaveBeenCalled();
+	});
+
+	it('should render queued tooltip for a new execution', async () => {
+		renderComponent({
+			props: {
+				execution: { status: 'new', id: 123, workflowName: 'Test Workflow' },
+				workflowPermissions: {},
+				concurrencyCap: 5,
+			},
+		});
+
+		expect(globalExecutionsListItemQueuedTooltipRenderSpy).toHaveBeenCalled();
+	});
 });

packages/editor-ui/src/components/executions/global/GlobalExecutionsListItem.vue

@@ -8,6 +8,7 @@ import { i18n as locale } from '@/plugins/i18n';
 import ExecutionsTime from '@/components/executions/ExecutionsTime.vue';
 import { useExecutionHelpers } from '@/composables/useExecutionHelpers';
 import type { PermissionsRecord } from '@/permissions';
+import GlobalExecutionsListItemQueuedTooltip from '@/components/executions/global/GlobalExecutionsListItemQueuedTooltip.vue';
 
 type Command = 'retrySaved' | 'retryOriginal' | 'delete';
 
@@ -17,6 +18,7 @@ const emit = defineEmits<{
 	retrySaved: [data: ExecutionSummary];
 	retryOriginal: [data: ExecutionSummary];
 	delete: [data: ExecutionSummary];
+	goToUpgrade: [];
 }>();
 
 const props = withDefaults(
@@ -26,6 +28,7 @@ const props = withDefaults(
 		workflowName?: string;
 		workflowPermissions: PermissionsRecord['workflow'];
 		concurrencyCap: number;
+		isCloudDeployment?: boolean;
 	}>(),
 	{
 		selected: false,
@@ -84,19 +87,6 @@ const formattedStoppedAtDate = computed(() => {
 		: '';
 });
 
-const statusTooltipText = computed(() => {
-	if (isQueued.value) {
-		return i18n.baseText('executionsList.statusTooltipText.waitingForConcurrencyCapacity', {
-			interpolate: { concurrencyCap: props.concurrencyCap },
-		});
-	}
-
-	if (props.execution.status === 'waiting' && isWaitTillIndefinite.value) {
-		return i18n.baseText('executionsList.statusTooltipText.theWorkflowIsWaitingIndefinitely');
-	}
-	return '';
-});
-
 const statusText = computed(() => {
 	switch (props.execution.status) {
 		case 'waiting':
@@ -208,12 +198,15 @@ async function handleActionItemClick(commandData: Command) {
 						/>
 					</template>
 				</i18n-t>
-				<N8nTooltip v-else placement="top">
-					<template #content>
-						<span>{{ statusTooltipText }}</span>
-					</template>
+				<GlobalExecutionsListItemQueuedTooltip
+					v-else
+					:status="props.execution.status"
+					:concurrency-cap="props.concurrencyCap"
+					:is-cloud-deployment="props.isCloudDeployment"
+					@go-to-upgrade="emit('goToUpgrade')"
+				>
 					<span :class="$style.status">{{ statusText }}</span>
-				</N8nTooltip>
+				</GlobalExecutionsListItemQueuedTooltip>
 			</div>
 		</td>
 		<td>