Do not show connection error before it has been requested

packages/editor-ui/src/components/PushConnectionTracker.test.ts

@@ -5,11 +5,13 @@ import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
 
 let isConnected = true;
+let isConnectionRequested = true;
 
 vi.mock('@/stores/pushConnection.store', () => {
 	return {
 		usePushConnectionStore: vi.fn(() => ({
 			isConnected,
+			isConnectionRequested,
 		})),
 	};
 });
@@ -21,6 +23,7 @@ describe('PushConnectionTracker', () => {
 			initialState: {
 				[STORES.PUSH]: {
 					isConnected,
+					isConnectionRequested,
 				},
 			},
 		});
@@ -29,15 +32,25 @@ describe('PushConnectionTracker', () => {
 		return createComponentRenderer(PushConnectionTracker)();
 	};
 
-	it('should render when connected', () => {
+	it('should not render error when connected and connection requested', () => {
 		isConnected = true;
+		isConnectionRequested = true;
 		const { container } = render();
 
 		expect(container).toMatchSnapshot();
 	});
 
-	it('should render when disconnected', () => {
+	it('should render error when disconnected and connection requested', () => {
 		isConnected = false;
+		isConnectionRequested = true;
+		const { container } = render();
+
+		expect(container).toMatchSnapshot();
+	});
+
+	it('should not render error when connected and connection not requested', () => {
+		isConnected = true;
+		isConnectionRequested = false;
 		const { container } = render();
 
 		expect(container).toMatchSnapshot();

packages/editor-ui/src/components/PushConnectionTracker.vue

@@ -1,14 +1,23 @@
 <script setup lang="ts">
 import { usePushConnectionStore } from '@/stores/pushConnection.store';
 import { useI18n } from '@/composables/useI18n';
+import { computed } from 'vue';
 
 const pushConnectionStore = usePushConnectionStore();
 const i18n = useI18n();
+
+const showConnectionLostError = computed(() => {
+	// Only show the connection lost error if the connection has been requested
+	// and the connection is not currently connected. This is to prevent the
+	// connection error from being shown e.g. when user navigates directly to
+	// the workflow executions list, which doesn't open the connection.
+	return pushConnectionStore.isConnectionRequested && !pushConnectionStore.isConnected;
+});
 </script>
 
 <template>
 	<span>
-		<div v-if="!pushConnectionStore.isConnected" class="push-connection-lost primary-color">
+		<div v-if="showConnectionLostError" class="push-connection-lost primary-color">
 			<n8n-tooltip placement="bottom-end">
 				<template #content>
 					<div v-n8n-html="i18n.baseText('pushConnectionTracker.cannotConnectToServer')"></div>

packages/editor-ui/src/components/__snapshots__/PushConnectionTracker.test.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`PushConnectionTracker > should render when connected 1`] = `
+exports[`PushConnectionTracker > should not render error when connected and connection not requested 1`] = `
 <div>
   <span>
     
@@ -9,7 +9,16 @@ exports[`PushConnectionTracker > should render when connected 1`] = `
 </div>
 `;
 
-exports[`PushConnectionTracker > should render when disconnected 1`] = `
+exports[`PushConnectionTracker > should not render error when connected and connection requested 1`] = `
+<div>
+  <span>
+    
+    
+  </span>
+</div>
+`;
+
+exports[`PushConnectionTracker > should render error when disconnected and connection requested 1`] = `
 <div>
   <span>
     <div

packages/editor-ui/src/stores/pushConnection.store.ts

@@ -23,6 +23,9 @@ export const usePushConnectionStore = defineStore(STORES.PUSH, () => {
 	 */
 	const outgoingQueue = ref<unknown[]>([]);
 
+	/** Whether the connection has been requested */
+	const isConnectionRequested = ref(false);
+
 	const onMessageReceivedHandlers = ref<OnPushMessageHandler[]>([]);
 
 	const addEventListener = (handler: OnPushMessageHandler) => {
@@ -77,6 +80,16 @@ export const usePushConnectionStore = defineStore(STORES.PUSH, () => {
 		client.sendMessage(JSON.stringify(message));
 	}
 
+	const pushConnect = () => {
+		isConnectionRequested.value = true;
+		client.connect();
+	};
+
+	const pushDisconnect = () => {
+		isConnectionRequested.value = false;
+		client.disconnect();
+	};
+
 	watch(client.isConnected, (didConnect) => {
 		if (!didConnect) {
 			return;
@@ -100,10 +113,11 @@ export const usePushConnectionStore = defineStore(STORES.PUSH, () => {
 
 	return {
 		isConnected,
+		isConnectionRequested,
 		onMessageReceivedHandlers,
 		addEventListener,
-		pushConnect: client.connect,
-		pushDisconnect: client.disconnect,
+		pushConnect,
+		pushDisconnect,
 		send: serializeAndSend,
 		clearQueue,
 	};